"use client";

import { Button, Feld, Formularfehler } from "@/components/ui";
import { Auswahlliste } from "@/components/ui/Feld";
import { useFormularAktion } from "@/components/hosts/useFormularAktion";
import { publicZuweisenAktion } from "@/server/actions/verwendungen";
import type { ZielAuswahl } from "@/server/queries/ziele";

/**
 * Public Key einem Host oder einer Hostgruppe zuweisen (#016). Die Zuweisung allein aendert
 * noch nichts auf dem Host – erst Trockenlauf und Ausrollen.
 */
export function PublicZuweisenFormular({
  schluesselId,
  auswahl,
  beiErfolg,
}: {
  schluesselId: string;
  auswahl: ZielAuswahl;
  beiErfolg?: () => void;
}) {
  const { zustand, absenden, laeuft } = useFormularAktion(async (vorher, formular) => {
    const ergebnis = await publicZuweisenAktion(vorher, formular);
    if (!ergebnis.fehler && !ergebnis.feldfehler) beiErfolg?.();
    return ergebnis;
  });
  return (
    <form onSubmit={absenden} className="flex flex-col gap-4">
      <input type="hidden" name="schluesselId" value={schluesselId} />
      <Formularfehler text={zustand.fehler} />
      <Auswahlliste beschriftung="Ziel" name="ziel" defaultValue="" required>
        <option value="" disabled>
          Host oder Hostgruppe wählen …
        </option>
        <optgroup label="Hosts">
          {auswahl.hosts.map((h) => (
            <option key={h.id} value={`host:${h.id}`}>
              {h.name}
              {h.bereit ? "" : " (noch kein Bootstrap)"}
            </option>
          ))}
        </optgroup>
        {auswahl.gruppen.length > 0 && (
          <optgroup label="Hostgruppen">
            {auswahl.gruppen.map((g) => (
              <option key={g.id} value={`gruppe:${g.id}`}>
                {g.name} ({g.mitglieder} Hosts)
              </option>
            ))}
          </optgroup>
        )}
      </Auswahlliste>
      {zustand.feldfehler?.["ziel"] && (
        <p className="text-danger -mt-2 text-[13px]">{zustand.feldfehler["ziel"]}</p>
      )}
      <Feld
        beschriftung="Zielbenutzer"
        name="zielbenutzer"
        defaultValue="root"
        mono
        required
        autoComplete="off"
      />
      <Feld
        beschriftung="Einschränkungen in authorized_keys (optional)"
        name="optionen"
        mono
        autoComplete="off"
        placeholder='restrict,from="10.0.0.12"'
        hinweis='z. B. restrict, from="IP", command="…", no-pty, no-port-forwarding'
      />
      <Button type="submit" variante="primaer" disabled={laeuft}>
        {laeuft ? "Speichere …" : "Zuweisen"}
      </Button>
    </form>
  );
}