import { useEffect, useId, useRef, type ReactNode } from "react";
import { X } from "lucide-react";

type Props = {
  open: boolean;
  onClose: () => void;
  title: ReactNode;
  description?: ReactNode;
  children: ReactNode;
  footer?: ReactNode;
  size?: "sm" | "md" | "lg";
  closeOnBackdrop?: boolean;
};

const sizes = {
  sm: "max-w-sm",
  md: "max-w-md",
  lg: "max-w-2xl",
} as const;

export function Dialog({
  open,
  onClose,
  title,
  description,
  children,
  footer,
  size = "md",
  closeOnBackdrop = true,
}: Props) {
  const ref = useRef<HTMLDialogElement>(null);
  const titleId = useId();

  useEffect(() => {
    const dialog = ref.current;
    if (!dialog) return;
    if (open && !dialog.open) dialog.showModal();
    if (!open && dialog.open) dialog.close();
  }, [open]);

  useEffect(() => {
    const dialog = ref.current;
    if (!dialog) return;
    const handleClose = () => onClose();
    dialog.addEventListener("close", handleClose);
    return () => dialog.removeEventListener("close", handleClose);
  }, [onClose]);

  return (
    <dialog
      ref={ref}
      aria-labelledby={titleId}
      onClick={(event) => {
        if (!closeOnBackdrop) return;
        if (event.target === ref.current) onClose();
      }}
      className={`fixed inset-0 m-auto h-fit max-h-[calc(100vh-2rem)] w-[calc(100%-2rem)] ${sizes[size]} animate-scale-fade overflow-y-auto rounded-2xl border border-zinc-700/60 bg-zinc-800/95 p-0 text-zinc-100 shadow-2xl backdrop:bg-zinc-950/60 backdrop:backdrop-blur-sm`}
    >
      <div className="flex items-start justify-between gap-3 border-b border-zinc-700/60 px-5 py-4">
        <div className="space-y-1">
          <h2 id={titleId} className="text-base font-semibold text-zinc-100">
            {title}
          </h2>
          {description ? <p className="text-sm text-zinc-400">{description}</p> : null}
        </div>
        <button
          type="button"
          aria-label="Close dialog"
          onClick={onClose}
          className="-mr-1 rounded-md p-1 text-zinc-400 transition-colors hover:bg-zinc-700/60 hover:text-zinc-100"
        >
          <X className="h-4 w-4" strokeWidth={2.25} aria-hidden="true" />
        </button>
      </div>
      <div className="px-5 py-4">{children}</div>
      {footer ? (
        <div className="flex items-center justify-end gap-2 border-t border-zinc-700/60 px-5 py-3">{footer}</div>
      ) : null}
    </dialog>
  );
}