"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { updateGeneratedDocumentAction, deleteGeneratedDocumentAction, signGeneratedDocumentAction } from "@/lib/actions/documents";
import { DOCUMENT_CATEGORY_LABELS, type DocumentCategory } from "@/lib/documentConstants";

export function GeneratedDocumentRow({
  document,
  allowedCategories,
}: {
  document: {
    id: string;
    templateName: string;
    category: DocumentCategory;
    clientName: string;
    renderedBody: string;
    includeLetterhead: boolean;
    includeFooter: boolean;
    footerText: string;
    includeRecipientAddress: boolean;
    recipientAddress: string;
    createdAt: string;
    signature: { name: string; signedAt: string; ip: string } | null;
  };
  allowedCategories: readonly DocumentCategory[];
}) {
  const [pending, startTransition] = useTransition();
  const [signName, setSignName] = useState("");
  const router = useRouter();

  function sign() {
    if (!signName.trim()) return;
    if (!confirm(`Als „${signName.trim()}" digital unterschreiben? Das lässt sich danach nicht mehr ändern.`)) return;
    startTransition(async () => {
      await signGeneratedDocumentAction(document.id, signName.trim());
      router.refresh();
    });
  }

  function submit(form: HTMLFormElement) {
    const data = new FormData(form);
    startTransition(async () => {
      await updateGeneratedDocumentAction(document.id, data);
      router.refresh();
    });
  }

  return (
    <details className="bg-[var(--rk-surface)] border border-white/10 rounded-xl px-4 py-3">
      <summary className="flex items-center justify-between gap-3 cursor-pointer list-none">
        <div className="min-w-0">
          <p className="text-sm truncate">
            {document.templateName}{" "}
            <span className="text-xs text-[var(--rk-ink-muted)]">
              {document.clientName ? `· ${document.clientName}` : ""} · Bearbeiten ▾
            </span>
          </p>
          <p className="text-xs text-[var(--rk-ink-muted)]">
            {document.createdAt}
            {document.signature && <span className="text-emerald-400"> · ✓ unterschrieben</span>}
          </p>
        </div>
        <div className="flex items-center gap-3 shrink-0" onClick={(e) => e.stopPropagation()}>
          <a
            href={`/api/documents/${document.id}/pdf`}
            target="_blank"
            rel="noopener noreferrer"
            className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white transition-colors"
          >
            PDF öffnen
          </a>
          <button
            disabled={pending}
            onClick={() => {
              if (confirm("Dieses Dokument wirklich löschen?")) startTransition(() => deleteGeneratedDocumentAction(document.id));
            }}
            className="text-xs text-red-400/80 hover:text-red-400 transition-colors disabled:opacity-50"
          >
            Löschen
          </button>
        </div>
      </summary>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          submit(e.currentTarget);
        }}
        className="mt-4 flex flex-col gap-3"
      >
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <input
            name="templateName"
            defaultValue={document.templateName}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
          <select
            name="category"
            defaultValue={document.category}
            className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          >
            {allowedCategories.map((c) => (
              <option key={c} value={c}>
                {DOCUMENT_CATEGORY_LABELS[c]}
              </option>
            ))}
          </select>
        </div>
        <textarea
          name="body"
          defaultValue={document.renderedBody}
          rows={12}
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-white/50 resize-y font-mono"
        />
        <div className="flex flex-col gap-2 border-t border-white/10 pt-3">
          <div className="flex flex-wrap gap-4">
            <label className="flex items-center gap-2 text-xs">
              <input type="checkbox" name="includeLetterhead" defaultChecked={document.includeLetterhead} className="h-3.5 w-3.5" />
              Briefkopf anzeigen
            </label>
            <label className="flex items-center gap-2 text-xs">
              <input type="checkbox" name="includeFooter" defaultChecked={document.includeFooter} className="h-3.5 w-3.5" />
              Footer anzeigen
            </label>
            <label className="flex items-center gap-2 text-xs">
              <input
                type="checkbox"
                name="includeRecipientAddress"
                defaultChecked={document.includeRecipientAddress}
                className="h-3.5 w-3.5"
              />
              Empfängeradresse anzeigen
            </label>
          </div>
          <textarea
            name="footerText"
            defaultValue={document.footerText}
            rows={2}
            placeholder="Footer-Text (leer = automatisch „Erstellt am … · Geschäftsname“)"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-white/50 resize-y"
          />
          <textarea
            name="recipientAddress"
            defaultValue={document.recipientAddress}
            rows={3}
            placeholder="Empfängeradresse (Anschrift, eine Zeile pro Zeile)"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-white/50 resize-y"
          />
        </div>
        <button
          type="submit"
          disabled={pending}
          className="self-start border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
        >
          Speichern
        </button>
      </form>

      <div className="mt-4 pt-3 border-t border-white/10">
        <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-2">Digitale Unterschrift</p>
        {document.signature ? (
          <p className="text-xs text-emerald-400">
            ✓ Unterschrieben von „{document.signature.name}" am{" "}
            {new Date(document.signature.signedAt).toLocaleString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" })}
          </p>
        ) : (
          <div className="flex items-center gap-2">
            <input
              value={signName}
              onChange={(e) => setSignName(e.target.value)}
              placeholder="Name zur Bestätigung eingeben"
              className="flex-1 bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
            />
            <button
              type="button"
              disabled={pending || !signName.trim()}
              onClick={sign}
              className="text-xs border border-white/30 rounded-lg px-3 py-2 hover:border-white disabled:opacity-50 shrink-0"
            >
              Unterschreiben
            </button>
          </div>
        )}
      </div>
    </details>
  );
}