"use client";

import { Trash2 } from "lucide-react";
import { useRouter } from "next/navigation";
import { useTransition } from "react";
import { deleteHireDraft } from "@/actions/hireDrafts";
import { useHireWizard } from "@/components/hire/HireWizardContext";
import { useToast } from "@/components/ui/Toast";
import type { Entwurf } from "@/lib/entwuerfe";
import { fmtDate } from "@/lib/format";

// Angefangene Neueinstellungen — die eigenen und, wer in der Glocke
// hinzugewählt ist, auch dessen.
//
// Fremde Entwürfe stehen hier zum Ansehen. Fortsetzen und Löschen fehlen bei
// ihnen nicht aus Vorsicht, sondern weil die Datenbank sie ohnehin abwiese
// (hire_drafts_update, hire_drafts_delete): eine Schaltfläche anzubieten, die
// verlässlich in eine Fehlermeldung führt, wäre ein Versprechen ohne Deckung.

export function DraftsCard({ drafts }: { drafts: Entwurf[] }) {
  const { openWizard } = useHireWizard();
  const { showToast } = useToast();
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  if (drafts.length === 0) return null;

  function handleDelete(id: string) {
    startTransition(async () => {
      const result = await deleteHireDraft(id);
      if (result.success) {
        showToast("Entwurf gelöscht.");
        router.refresh();
      } else {
        showToast(result.error ?? "Fehler beim Löschen.", "error");
      }
    });
  }

  return (
    <div className="rounded border border-border bg-white p-4">
      <h2 className="mb-3 text-sm font-bold text-ink">Entwürfe – Neueinstellungen</h2>
      <ul className="flex flex-col divide-y divide-border">
        {drafts.map((d) => {
          const firstName = typeof d.payload.firstName === "string" ? d.payload.firstName : "";
          const lastName = typeof d.payload.lastName === "string" ? d.payload.lastName : "";
          const name = [firstName, lastName].filter(Boolean).join(" ") || "Ohne Namen";
          return (
            <li key={d.id} className="flex items-center justify-between gap-3 py-2 text-sm">
              <div>
                <span className="font-semibold text-ink">{name}</span>
                <span className="ml-2 text-xs text-ink-muted">Gespeichert am {fmtDate(d.updated_at)}</span>
                {/* An jeder Zeile, wie an den Notizen in der Glocke: seit
                    fremde Entwürfe dazwischenstehen, ist ohne die Angabe nicht
                    zu sehen, welcher wessen ist. „von mir" statt des eigenen
                    Namens — den kennt man. */}
                <span className="ml-2 text-xs text-ink-muted">{d.vonMir ? "von mir" : `von ${d.autor}`}</span>
              </div>
              {d.vonMir ? (
                <div className="flex items-center gap-3">
                  <button
                    type="button"
                    onClick={() => openWizard({ draftId: d.id })}
                    className="text-xs font-semibold text-brand-700 hover:underline"
                  >
                    Fortsetzen
                  </button>
                  <button
                    type="button"
                    onClick={() => handleDelete(d.id)}
                    disabled={pending}
                    aria-label="Entwurf löschen"
                    className="text-ink-muted hover:text-danger-solid"
                  >
                    <Trash2 className="h-4 w-4" />
                  </button>
                </div>
              ) : (
                // Warum hier nichts steht, ist sonst nicht zu erraten: die
                // Zeile sähe aus wie eine, an der die Schaltflächen fehlen.
                <span className="shrink-0 text-xs text-ink-muted">Nur zur Ansicht</span>
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}