"use client";

import { lockScroll, unlockScroll } from "@/lib/dom/scroll-lock";
import { AnimatePresence, motion } from "motion/react";
import Image from "next/image";
import { useEffect, useLayoutEffect, type ReactNode } from "react";
import { Button } from "./button";

const useIsomorphicLayoutEffect =
  typeof window !== "undefined" ? useLayoutEffect : useEffect;

function DefaultDeleteIllustration() {
  return (
    <div className="relative size-20 shrink-0">
      <Image
        src="/images/confirm-delete.png"
        alt=""
        fill
        className="object-contain"
        aria-hidden
      />
    </div>
  );
}

export type ConfirmModalProps = {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  description?: string;
  confirmLabel?: string;
  cancelLabel?: string;
  illustration?: ReactNode;
  isSubmitting?: boolean;
  ariaLabel?: string;
};

export function ConfirmModal({
  open,
  onClose,
  onConfirm,
  title,
  description = "Tindakan ini tidak dapat dibatalkan.",
  confirmLabel = "Ya, Hapus",
  cancelLabel = "Batal",
  illustration,
  isSubmitting = false,
  ariaLabel = "Konfirmasi",
}: ConfirmModalProps) {
  useIsomorphicLayoutEffect(() => {
    if (!open) return;

    lockScroll();

    return () => {
      unlockScroll();
    };
  }, [open]);

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

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

    document.addEventListener("keydown", handleKeyDown);

    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [open, onClose, isSubmitting]);

  return (
    <AnimatePresence>
      {open && (
        <motion.div
          className="fixed inset-0 z-50 flex items-center justify-center bg-neutral-100/40 p-6"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
          role="alertdialog"
          aria-modal="true"
          aria-label={ariaLabel}
          onClick={isSubmitting ? undefined : onClose}
        >
          <motion.div
            className="flex w-full max-w-[300px] flex-col gap-4 rounded-[10px] border border-neutral-40 bg-neutral-10 p-6"
            initial={{ opacity: 0, y: 12, scale: 0.96 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 12, scale: 0.96 }}
            transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
            onClick={(event) => event.stopPropagation()}
          >
            <div className="flex flex-col items-center gap-4 text-center">
              <p className="text-l-medium text-neutral-100">{title}</p>

              {illustration ?? <DefaultDeleteIllustration />}

              {description && (
                <p className="text-m-regular text-neutral-70">{description}</p>
              )}
            </div>

            <div className="flex items-center gap-2">
              <Button
                variant="default"
                className="flex-1"
                onClick={onClose}
                disabled={isSubmitting}
              >
                {cancelLabel}
              </Button>
              <Button
                variant="danger"
                className="flex-1"
                onClick={onConfirm}
                disabled={isSubmitting}
              >
                {confirmLabel}
              </Button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}