Laufzettel/src/components/vorlage-aktionen.tsx

"use client";

import { useActionState, useState } from "react";
import { Copy, Download, Trash2 } from "lucide-react";
import {
  entwurfVerwerfenAktion,
  vorlageArchivierenAktion,
  vorlageDuplizierenAktion,
  vorlageExportierenAktion,
  type AktionsErgebnis,
} from "@/server/actions/vorlagen";

// `w-fit`, damit ein Knopf in einem Block-Element nicht auf volle Breite geht –
// drei verschieden breite Balken untereinander sehen aus wie ein Fehler.
const KNOPF =
  "flex w-fit min-h-11 items-center gap-2 rounded-pille border border-linie px-4 text-sm text-nebentext hover:bg-flaeche-hoch hover:text-text md:min-h-10";
const FELD =
  "min-h-11 rounded-karte border border-linie bg-grund px-3 text-sm text-text outline-none focus-visible:border-akzent";

function Meldung({ ergebnis }: { ergebnis: AktionsErgebnis }) {
  if (ergebnis.fehler) {
    return (
      <p role="alert" className="mt-2 max-w-prose text-sm text-fehler">
        {ergebnis.fehler}
      </p>
    );
  }
  if (ergebnis.erfolg) {
    return (
      <p role="status" className="mt-2 max-w-prose text-sm text-erledigt">
        {ergebnis.erfolg}
      </p>
    );
  }
  return null;
}

/**
 * Entwurf verwerfen.
 *
 * Mit Rueckfrage, weil ein Entwurf nicht protokolliert wird: was hier
 * verschwindet, ist wirklich weg. Die veroeffentlichte Version bleibt
 * unberuehrt — genau das ist der Sinn des Entwurfs.
 */
export function EntwurfVerwerfen({ versionId }: { versionId: string }) {
  const [ergebnis, aktion, laeuft] = useActionState<AktionsErgebnis, FormData>(entwurfVerwerfenAktion, {});
  const [sicher, setSicher] = useState(false);

  if (!sicher) {
    return (
      <button type="button" onClick={() => setSicher(true)} className={KNOPF}>
        <Trash2 className="size-4" strokeWidth={1.75} aria-hidden="true" />
        Entwurf verwerfen
      </button>
    );
  }

  return (
    <div className="flex flex-col gap-2">
      <p className="max-w-prose text-sm text-faellig">
        Der Entwurf wird gelöscht und ist nicht wiederherstellbar. Die veröffentlichte Version bleibt.
      </p>
      <div className="flex flex-wrap gap-2">
        <form action={aktion}>
          <input type="hidden" name="versionId" value={versionId} />
          <button
            type="submit"
            disabled={laeuft}
            className="flex min-h-11 items-center rounded-pille border border-fehler px-4 text-sm text-fehler hover:bg-fehler/10 md:min-h-10"
          >
            {laeuft ? "Wird verworfen …" : "Ja, verwerfen"}
          </button>
        </form>
        <button type="button" onClick={() => setSicher(false)} className={KNOPF}>
          Abbrechen
        </button>
      </div>
      <Meldung ergebnis={ergebnis} />
    </div>
  );
}

/** Duplizieren: neue Vorlage, Inhalt der neuesten Version als Entwurf. */
export function VorlageDuplizieren({ vorlageId, name }: { vorlageId: string; name: string }) {
  const [ergebnis, aktion, laeuft] = useActionState<AktionsErgebnis, FormData>(vorlageDuplizierenAktion, {});

  return (
    <details>
      <summary className={`${KNOPF} cursor-pointer list-none`}>
        <Copy className="size-4" strokeWidth={1.75} aria-hidden="true" />
        Duplizieren
      </summary>
      <form action={aktion} className="mt-3 flex flex-col gap-3 sm:flex-row sm:items-end">
        <input type="hidden" name="vorlageId" value={vorlageId} />
        <label className="flex min-w-0 flex-1 flex-col gap-1.5 text-sm">
          <span className="text-nebentext">Name der Kopie</span>
          <input name="name" required defaultValue={`${name} (Kopie)`} className={FELD} />
        </label>
        <button type="submit" disabled={laeuft} className={KNOPF}>
          {laeuft ? "Wird kopiert …" : "Kopie anlegen"}
        </button>
      </form>
      <Meldung ergebnis={ergebnis} />
    </details>
  );
}

/** Archivieren statt loeschen – sonst verloere das Archiv seine Bezuege. */
export function VorlageArchivieren({ vorlageId, archiviert }: { vorlageId: string; archiviert: boolean }) {
  const [ergebnis, aktion, laeuft] = useActionState<AktionsErgebnis, FormData>(vorlageArchivierenAktion, {});

  return (
    <div>
      <form action={aktion}>
        <input type="hidden" name="vorlageId" value={vorlageId} />
        <input type="hidden" name="archiviert" value={archiviert ? "false" : "true"} />
        <button type="submit" disabled={laeuft} className={KNOPF}>
          {archiviert ? "wieder freigeben" : "archivieren"}
        </button>
      </form>
      <Meldung ergebnis={ergebnis} />
    </div>
  );
}

/**
 * Export einer Version als Datei.
 *
 * Die Server Action gibt den Text zurueck, und der Browser legt daraus die
 * Datei an. Ein Route Handler dafuer waere ein zweiter Weg zu denselben Daten,
 * mit eigener Rechtepruefung — und damit eine zweite Stelle, die falsch sein kann.
 */
export function VersionExportieren({ versionId }: { versionId: string }) {
  const [laeuft, setLaeuft] = useState(false);
  const [fehler, setFehler] = useState<string | null>(null);

  async function exportieren() {
    setLaeuft(true);
    setFehler(null);
    try {
      const ergebnis = await vorlageExportierenAktion(versionId);
      if (!("inhalt" in ergebnis)) {
        setFehler(ergebnis.fehler ?? "Der Export ist fehlgeschlagen.");
        return;
      }
      const adresse = URL.createObjectURL(new Blob([ergebnis.inhalt], { type: "application/json" }));
      const verweis = document.createElement("a");
      verweis.href = adresse;
      verweis.download = ergebnis.dateiname;
      verweis.click();
      URL.revokeObjectURL(adresse);
    } finally {
      setLaeuft(false);
    }
  }

  return (
    <div>
      <button type="button" onClick={() => void exportieren()} disabled={laeuft} className={KNOPF}>
        <Download className="size-4" strokeWidth={1.75} aria-hidden="true" />
        {laeuft ? "Wird erzeugt …" : "Als JSON exportieren"}
      </button>
      {fehler ? (
        <p role="alert" className="mt-2 max-w-prose text-sm text-fehler">
          {fehler}
        </p>
      ) : null}
    </div>
  );
}