"use client";

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

type AdminConfirmDialogProps = {
  open: boolean;
  title: string;
  description: string;
  confirmLabel?: string;
  cancelLabel?: string;
  isPending?: boolean;
  onClose: () => void;
  onConfirm: () => void;
};

export function AdminConfirmDialog({
  open,
  title,
  description,
  confirmLabel = "Potvrdi",
  cancelLabel = "Otkaži",
  isPending = false,
  onClose,
  onConfirm,
}: AdminConfirmDialogProps) {
  useEffect(() => {
    if (!open) {
      return;
    }

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

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

    window.addEventListener("keydown", handleKeyDown);

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

  if (!open) {
    return null;
  }

  return (
    <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={isPending ? undefined : onClose}
    >
      <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>

        <div className="mt-6 flex flex-wrap justify-end gap-3">
          <button type="button" className="ghost-button" onClick={onClose} disabled={isPending}>
            {cancelLabel}
          </button>
          <button type="button" className="danger-button" onClick={onConfirm} disabled={isPending}>
            {isPending ? "Brisanje..." : confirmLabel}
          </button>
        </div>
      </div>
    </div>
    </ModalPortal>
  );
}