"use client";

import { AlertDialog, Button } from "@heroui/react";
import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";

type Confirmation = {
  title: string;
  description: ReactNode;
  confirmLabel?: string;
  status?: "danger" | "warning";
};

export function useConfirmDialog() {
  const [request, setRequest] = useState<Confirmation | null>(null);
  const resolve = useRef<((confirmed: boolean) => void) | null>(null);
  const ask = useCallback((next: Confirmation): Promise<boolean> => {
    if (resolve.current) return Promise.resolve(false);
    return new Promise((finish) => {
      resolve.current = finish;
      setRequest(next);
    });
  }, []);
  const finish = useCallback((confirmed: boolean) => {
    const pending = resolve.current;
    resolve.current = null;
    setRequest(null);
    pending?.(confirmed);
  }, []);
  useEffect(
    () => () => {
      resolve.current?.(false);
      resolve.current = null;
    },
    [],
  );

  const confirmationDialog = (
    <AlertDialog
      isOpen={!!request}
      onOpenChange={(open) => {
        if (!open) finish(false);
      }}
    >
      <AlertDialog.Backdrop isKeyboardDismissDisabled={false}>
        <AlertDialog.Container>
          <AlertDialog.Dialog className="w-full rounded-2xl bg-white sm:max-w-[440px]">
            <AlertDialog.CloseTrigger aria-label="Cancelar confirmación" />
            <AlertDialog.Header>
              <AlertDialog.Icon status={request?.status ?? "danger"} />
              <AlertDialog.Heading>{request?.title ?? "Confirmar acción"}</AlertDialog.Heading>
            </AlertDialog.Header>
            <AlertDialog.Body>
              <p className="break-words text-sm leading-relaxed text-zinc-600">
                {request?.description}
              </p>
            </AlertDialog.Body>
            <AlertDialog.Footer>
              <Button
                autoFocus
                variant="tertiary"
                className="rounded-full"
                onPress={() => finish(false)}
              >
                Cancelar
              </Button>
              <Button
                variant={request?.status === "warning" ? "primary" : "danger"}
                className={`rounded-full ${request?.status === "warning" ? "bg-[#9d2449] text-white hover:bg-[#801c3a]" : ""}`}
                onPress={() => finish(true)}
              >
                {request?.confirmLabel ?? "Eliminar"}
              </Button>
            </AlertDialog.Footer>
          </AlertDialog.Dialog>
        </AlertDialog.Container>
      </AlertDialog.Backdrop>
    </AlertDialog>
  );
  return { ask, confirmationDialog };
}