"use client";

import { useActionState } from "react";
import { createTemplateAction } from "@/lib/actions/documents";
import { DOCUMENT_CATEGORY_LABELS, type DocumentCategory } from "@/lib/documentConstants";

export function NewTemplateForm({ allowedCategories }: { allowedCategories: readonly DocumentCategory[] }) {
  const [state, formAction, pending] = useActionState(createTemplateAction, {});

  return (
    <form action={formAction} className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 flex flex-col gap-3 mb-8">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <input
          name="name"
          placeholder="Name der Vorlage, z. B. Standard-Arbeitsvertrag"
          required
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        <select
          name="category"
          defaultValue={allowedCategories[0]}
          className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        >
          {allowedCategories.map((c) => (
            <option key={c} value={c}>
              {DOCUMENT_CATEGORY_LABELS[c]}
            </option>
          ))}
        </select>
      </div>
      <textarea
        name="body"
        required
        rows={8}
        placeholder={
          "Vorlagentext — Platzhalter mit doppelten geschweiften Klammern, z. B. {{name}}, {{position}}, {{startDate}}.\nAutomatisch vorbefüllt: name, email, department, position, address, startDate, geburtsdatum (aus Personalakte), ausstellungsdatum (heutiges Datum). Alle anderen Platzhalter (z. B. {{gehalt}}, {{urlaubstage}}) bleiben zum manuellen Ausfüllen stehen — Erklärung dazu erscheint automatisch auf der Dokumente-Seite, sobald diese Vorlage ausgewählt wird."
        }
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-white/50 resize-y font-mono"
      />

      <div className="flex flex-col gap-2 border-t border-white/10 pt-3">
        <p className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">
          Vorbelegung beim Erstellen (danach pro Dokument änderbar)
        </p>
        <div className="flex flex-wrap gap-4">
          <label className="flex items-center gap-2 text-xs">
            <input type="checkbox" name="defaultIncludeLetterhead" defaultChecked className="h-3.5 w-3.5" />
            Briefkopf anzeigen
          </label>
          <label className="flex items-center gap-2 text-xs">
            <input type="checkbox" name="defaultIncludeFooter" defaultChecked className="h-3.5 w-3.5" />
            Footer anzeigen
          </label>
          <label className="flex items-center gap-2 text-xs">
            <input type="checkbox" name="defaultIncludeRecipientAddress" className="h-3.5 w-3.5" />
            Empfängeradresse anzeigen (bei Briefen an eine Person)
          </label>
        </div>
        <textarea
          name="defaultFooterText"
          rows={2}
          placeholder="Footer-Text (leer = automatisch „Erstellt am … · Geschäftsname“)"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-white/50 resize-y"
        />
      </div>

      <button
        type="submit"
        disabled={pending}
        className="self-start border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
      >
        Vorlage anlegen
      </button>
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
    </form>
  );
}