"use client";

import { Plus, Trash2 } from "lucide-react";
import { useActionState, useEffect, useRef } from "react";
import { useFormularAktion } from "@/components/hosts/useFormularAktion";
import { Button, Feld, Formularfehler, Karte, Textbereich } from "@/components/ui";
import type { FormularZustand } from "@/server/actions/formular";
import {
  eigenenKeyEntfernenAktion,
  eigenenKeyHinterlegenAktion,
  type HinterlegenZustand,
} from "@/server/actions/meine-schluessel";

/** Eigenen Public Key hinterlegen (#013). Nach Erfolg leert sich das Formular. */
export function KeyHinterlegen() {
  const formular = useRef<HTMLFormElement>(null);
  const { zustand, absenden, laeuft } = useFormularAktion(
    eigenenKeyHinterlegenAktion as (v: FormularZustand, f: FormData) => Promise<HinterlegenZustand>,
  );
  const erfolg = (zustand as HinterlegenZustand).erfolg;
  useEffect(() => {
    if (erfolg) formular.current?.reset();
  }, [erfolg]);
  const f = zustand.feldfehler ?? {};
  return (
    <Karte
      titel="Public Key hinterlegen"
      untertitel="Eine Zeile im OpenSSH-Format, z. B. aus ~/.ssh/id_ed25519.pub"
    >
      <form ref={formular} onSubmit={absenden} noValidate className="flex flex-col gap-4">
        <Formularfehler text={zustand.fehler} />
        {erfolg && (
          <p role="status" className="text-ok text-[14px] break-all">
            {erfolg}
          </p>
        )}
        <Feld
          beschriftung="Bezeichnung"
          name="name"
          required
          maxLength={120}
          placeholder="Laptop, Workstation …"
          autoComplete="off"
          fehler={f["name"]}
        />
        <Textbereich
          beschriftung="Public Key"
          name="publicKey"
          required
          rows={3}
          spellCheck={false}
          placeholder="ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAA… name@rechner"
          fehler={f["publicKey"]}
          className="[&_textarea]:font-mono [&_textarea]:text-[13px]"
        />
        <p className="text-muted text-[13.5px]">
          Wirksam erst, wenn ein Operator oder Admin den Schlüssel einem Host zuweist. Den Private Key
          behalten Sie bei sich – sshkv fragt nie danach.
        </p>
        <div>
          <Button
            type="submit"
            variante="primaer"
            disabled={laeuft}
            icon={<Plus className="size-4" strokeWidth={2.4} />}
          >
            {laeuft ? "Speichere …" : "Hinterlegen"}
          </Button>
        </div>
      </form>
    </Karte>
  );
}

/** Eigenen, noch nirgends zugewiesenen Key entfernen – mit Rueckfrage. */
export function KeyEntfernen({ schluesselId, name }: { schluesselId: string; name: string }) {
  const dialog = useRef<HTMLDialogElement>(null);
  const [zustand, aktion, laeuft] = useActionState<FormularZustand, FormData>(eigenenKeyEntfernenAktion, {});
  return (
    <>
      <Button
        variante="gefahr"
        klein
        icon={<Trash2 className="size-4" />}
        onClick={() => dialog.current?.showModal()}
        aria-label={`${name} entfernen`}
      >
        Entfernen
      </Button>
      <dialog
        ref={dialog}
        aria-labelledby={`entfernen-${schluesselId}`}
        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={schluesselId} />
          <h2 id={`entfernen-${schluesselId}`} className="text-[17px] font-semibold">
            „{name}“ entfernen?
          </h2>
          <p className="text-muted text-[14.5px]">
            Der Public Key verschwindet aus sshkv. Er ist noch keinem Host zugewiesen; auf keinem Server
            ändert sich etwas.
          </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 ? "Entferne …" : "Entfernen"}
            </Button>
          </div>
        </form>
      </dialog>
    </>
  );
}