"use client";

import { Ban, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/Button";
import type { WiderrufUebersicht } from "@/server/queries/widerruf";
import { WiderrufFormular } from "./WiderrufFormular";

/**
 * „Widerrufen“ auf der Schluesselseite (#024): Gefahr-Knopf mit Bestaetigungsdialog. Offen/zu
 * als Zustand wie im AusrollDialog – kein Render-Pfad liest die Ref.
 */
export function WiderrufKnopf({
  uebersicht,
  ruecksprung,
  beschriftung = "Widerrufen",
}: {
  uebersicht: WiderrufUebersicht;
  ruecksprung: string;
  beschriftung?: string;
}) {
  const dialog = useRef<HTMLDialogElement>(null);
  const [offen, setOffen] = useState(false);
  const name = uebersicht.schluessel[0]?.name ?? "";

  useEffect(() => {
    const element = dialog.current;
    if (!element) return;
    if (offen && !element.open) element.showModal();
    if (!offen && element.open) element.close();
  }, [offen]);

  const schliessen = () => setOffen(false);
  return (
    <>
      <Button variante="gefahr" icon={<Ban className="size-4" />} onClick={() => setOffen(true)}>
        {beschriftung}
      </Button>
      <dialog
        ref={dialog}
        aria-labelledby="widerruf-titel"
        onClose={schliessen}
        className="border-border-strong bg-surface text-text rounded-karte m-auto max-h-[calc(100dvh-32px)] w-[calc(100%-32px)] max-w-2xl overflow-y-auto border p-5 backdrop:bg-black/70 sm:p-6"
      >
        <div className="mb-4 flex items-start justify-between gap-3">
          <h2 id="widerruf-titel" className="font-display text-[18px] font-semibold break-words">
            „{name}“ widerrufen?
          </h2>
          <button
            type="button"
            onClick={schliessen}
            aria-label="Schließen"
            className="text-muted hover:text-text hover:bg-raised rounded-feld -mt-2 -mr-2 flex size-11 shrink-0 items-center justify-center"
          >
            <X className="size-5" aria-hidden />
          </button>
        </div>
        {offen && (
          <WiderrufFormular uebersicht={uebersicht} ruecksprung={ruecksprung} abbrechen={schliessen} />
        )}
      </dialog>
    </>
  );
}