"use client";

import { useEffect, useState, useTransition } from "react";
import { ModalPortal } from "@/components/admin/common/ModalPortal";

type AdminDeleteButtonProps = {
  action: (formData: FormData) => void | Promise<void>;
  title: string;
  description: string;
  confirmLabel?: string;
  triggerLabel?: string;
  inputs: Array<{ name: string; value: string }>;
};

export function AdminDeleteButton({
  action,
  title,
  description,
  confirmLabel = "Da, obriši",
  triggerLabel = "Obriši",
  inputs,
}: AdminDeleteButtonProps) {
  const [open, setOpen] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  useEffect(() => {
    if (!open) {
      return;
    }

    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape" && !isPending) {
        setOpen(false);
      }
    }

    window.addEventListener("keydown", handleKeyDown);

    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [open, isPending]);

  function handleConfirm() {
    setError(null);

    // Pozivamo server akciju DIREKTNO (bez <form>) — ovaj dugmić je čest
    // potomak druge <form> (npr. forma za izmenu kampanje), a ugnežđene
    // <form> su nevalidan HTML: browser odbaci unutrašnju formu pa se
    // akcija nikad ne pozove a spinner "Čuvanje promena..." visi zauvek.
    const formData = new FormData();
    for (const input of inputs) {
      formData.append(input.name, input.value);
    }

    startTransition(async () => {
      try {
        await action(formData);
        // Uspeh: server akcija radi redirect() → navigaciju preuzima
        // Next runtime i tranzicija se razreši; modal se demontira.
      } catch (err) {
        // VAŽNO: redirect()/notFound() iz server akcije bacaju interni signal
        // (digest "NEXT_REDIRECT" / "NEXT_HTTP_ERROR_FALLBACK"). To NIJE greška
        // nego navigacija — moramo ga pustiti dalje, inače „pojedemo" redirect
        // i brisanje izgleda kao da nije uspelo (iako jeste na serveru).
        const digest =
          err && typeof err === "object" && "digest" in err
            ? String((err as { digest?: unknown }).digest)
            : "";
        if (digest.startsWith("NEXT_REDIRECT") || digest.startsWith("NEXT_HTTP_ERROR_FALLBACK")) {
          throw err;
        }
        setError(
          err instanceof Error && err.message
            ? err.message
            : "Brisanje nije uspelo. Pokušajte ponovo.",
        );
      }
    });
  }

  return (
    <>
      <button type="button" className="danger-button" onClick={() => setOpen(true)}>
        {triggerLabel}
      </button>

      {open ? (
        <ModalPortal>
        <div
          className="fixed inset-0 z-[140] flex items-center justify-center bg-[rgba(22,22,22,0.38)] px-4 py-6 backdrop-blur-md"
          onClick={() => {
            if (!isPending) {
              setOpen(false);
            }
          }}
        >
          <div
            className="w-full max-w-[32rem] rounded-[2rem] border border-[rgba(22,22,22,0.08)] bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(248,243,239,0.94))] p-6 shadow-[0_30px_80px_rgba(22,22,22,0.18)]"
            onClick={(event) => event.stopPropagation()}
          >
            <p className="eyebrow">Potvrda brisanja</p>
            <h3 className="mt-3 font-display text-[clamp(1.8rem,2vw,2.2rem)] font-semibold leading-[1.04] text-foreground">
              {title}
            </h3>
            <p className="mt-4 text-sm leading-7 text-muted-foreground">{description}</p>

            <div className="mt-5 rounded-[1.5rem] border border-[rgba(188,63,41,0.12)] bg-[linear-gradient(180deg,rgba(255,247,245,0.98),rgba(253,239,236,0.94))] px-4 py-4 text-sm leading-6 text-muted-foreground">
              Ova akcija uklanja zapis iz sistema. Koristite je samo kada ste sigurni da profil ili sadržaj više nije potreban.
            </div>

            {error ? (
              <p
                role="alert"
                className="mt-4 rounded-[1.25rem] border border-[rgba(188,63,41,0.28)] bg-[rgba(253,239,236,0.92)] px-4 py-3 text-sm font-semibold text-[rgb(176,52,33)]"
              >
                {error}
              </p>
            ) : null}

            <div className="mt-6 flex flex-wrap justify-end gap-3">
              <button
                type="button"
                className="ghost-button"
                onClick={() => setOpen(false)}
                disabled={isPending}
              >
                Otkaži
              </button>
              <button
                type="button"
                className="danger-button"
                onClick={handleConfirm}
                disabled={isPending}
                aria-busy={isPending}
              >
                {isPending ? "Brisanje..." : confirmLabel}
              </button>
            </div>
          </div>
        </div>
        </ModalPortal>
      ) : null}
    </>
  );
}