sshkeyvault/src/components/personen/PersonFormular.tsx

"use client";

import { Archive } from "lucide-react";
import { useActionState, useRef } from "react";
import { useFormularAktion } from "@/components/hosts/useFormularAktion";
import { Auswahlliste, Button, Feld, Formularfehler, Karte, Textbereich } from "@/components/ui";
import type { FormularZustand } from "@/server/actions/formular";
import {
  personAnlegenAktion,
  personArchivierenAktion,
  personBearbeitenAktion,
} from "@/server/actions/personen";

export type PersonFormularVorgabe = {
  id?: string;
  name: string;
  email: string;
  organisation: string;
  notiz: string;
  benutzerId: string;
};

export const LEERE_PERSON: PersonFormularVorgabe = {
  name: "",
  email: "",
  organisation: "",
  notiz: "",
  benutzerId: "",
};

/** Formular fuer neue und bestehende Personen (#013). Regeln prueft der Server. */
export function PersonFormular({
  vorgabe,
  konten,
  abbrechenZiel,
}: {
  vorgabe: PersonFormularVorgabe;
  konten: { id: string; name: string; email: string | null }[];
  abbrechenZiel: string;
}) {
  const bearbeiten = Boolean(vorgabe.id);
  const { zustand, absenden, laeuft } = useFormularAktion(
    bearbeiten ? personBearbeitenAktion : personAnlegenAktion,
  );
  const f = zustand.feldfehler ?? {};
  return (
    <form onSubmit={absenden} noValidate className="flex flex-col gap-6">
      {vorgabe.id && <input type="hidden" name="id" value={vorgabe.id} />}
      <Formularfehler text={zustand.fehler} />
      <Karte titel="Person">
        <div className="grid gap-4 sm:grid-cols-2">
          <Feld
            beschriftung="Name"
            name="name"
            defaultValue={vorgabe.name}
            required
            maxLength={120}
            autoComplete="off"
            fehler={f["name"]}
            className="sm:col-span-2"
          />
          <Feld
            beschriftung="E-Mail (optional)"
            name="email"
            type="email"
            defaultValue={vorgabe.email}
            maxLength={254}
            autoComplete="off"
            fehler={f["email"]}
          />
          <Feld
            beschriftung="Organisation (optional)"
            name="organisation"
            defaultValue={vorgabe.organisation}
            maxLength={120}
            placeholder="z. B. Dienstleister"
            fehler={f["organisation"]}
          />
          <Auswahlliste
            beschriftung="Verknüpftes Konto (optional)"
            name="benutzerId"
            defaultValue={vorgabe.benutzerId}
            className="sm:col-span-2"
          >
            <option value="">keines</option>
            {konten.map((k) => (
              <option key={k.id} value={k.id}>
                {k.email ? `${k.name} (${k.email})` : k.name}
              </option>
            ))}
          </Auswahlliste>
          {f["benutzerId"] && <p className="text-danger text-[13px] sm:col-span-2">{f["benutzerId"]}</p>}
          <Textbereich
            beschriftung="Notiz (optional)"
            name="notiz"
            defaultValue={vorgabe.notiz}
            maxLength={1000}
            fehler={f["notiz"]}
            className="sm:col-span-2"
          />
        </div>
      </Karte>
      <div className="flex flex-wrap gap-2.5">
        <Button type="submit" variante="primaer" disabled={laeuft}>
          {laeuft ? "Speichere …" : bearbeiten ? "Änderungen speichern" : "Person anlegen"}
        </Button>
        <Button href={abbrechenZiel}>Abbrechen</Button>
      </div>
    </form>
  );
}

/** Archivieren mit Rueckfrage, nativer `<dialog>` wie bei Hosts (#008). */
export function PersonArchivieren({ personId, name }: { personId: string; name: string }) {
  const dialog = useRef<HTMLDialogElement>(null);
  const [zustand, aktion, laeuft] = useActionState<FormularZustand, FormData>(personArchivierenAktion, {});
  return (
    <>
      <Button
        variante="gefahr"
        icon={<Archive className="size-4" />}
        onClick={() => dialog.current?.showModal()}
      >
        Person archivieren
      </Button>
      <dialog
        ref={dialog}
        aria-labelledby="person-archivieren-titel"
        className="border-border-strong bg-surface text-text rounded-karte m-auto w-[calc(100%-32px)] max-w-md border p-5 backdrop:bg-black/70 sm:p-6"
      >
        <form action={aktion} className="flex flex-col gap-4">
          <input type="hidden" name="id" value={personId} />
          <h2 id="person-archivieren-titel" className="text-[17px] font-semibold">
            {name} archivieren?
          </h2>
          <p className="text-muted text-[14.5px]">
            Die Person verschwindet aus Listen und Auswahlfeldern, die Verknüpfung zum Konto entfällt. Ihre
            Schlüssel bleiben zugeordnet und unverändert – widerrufen ist ein eigener Schritt.
          </p>
          <Formularfehler text={zustand.fehler} />
          <div className="flex flex-wrap justify-end gap-2.5">
            <Button onClick={() => dialog.current?.close()}>Abbrechen</Button>
            <Button type="submit" variante="gefahr" disabled={laeuft}>
              {laeuft ? "Archiviere …" : "Archivieren"}
            </Button>
          </div>
        </form>
      </dialog>
    </>
  );
}