"use client";

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

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

function DefaultSuccessIllustration() {
  return (
    <div className="relative size-20 shrink-0">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src="/images/success.gif"
        alt=""
        className="size-full object-contain"
        aria-hidden
      />
    </div>
  );
}

export type SuccessModalProps = {
  open: boolean;
  onClose: () => void;
  onPrimary?: () => void;
  title?: string;
  description?: string;
  cancelLabel?: string;
  primaryLabel?: string;
  illustration?: ReactNode;
  ariaLabel?: string;
};

export function SuccessModal({
  open,
  onClose,
  onPrimary,
  title = "Data Tersimpan",
  description,
  cancelLabel = "Batal",
  primaryLabel = "Tambah lain",
  illustration,
  ariaLabel = "Berhasil menyimpan data",
}: SuccessModalProps) {
  useIsomorphicLayoutEffect(() => {
    if (!open) return;

    lockScroll();

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

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

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

    document.addEventListener("keydown", handleKeyDown);

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

  function handlePrimary() {
    if (onPrimary) {
      onPrimary();
      return;
    }

    onClose();
  }

  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="dialog"
          aria-modal="true"
          aria-label={ariaLabel}
          onClick={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 ?? <DefaultSuccessIllustration />}

              {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}>
                {cancelLabel}
              </Button>
              <Button variant="primary" className="flex-1" onClick={handlePrimary}>
                {primaryLabel}
              </Button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}