"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from "react";
import { Button } from "../../../components/atoms/Button";
import { cn } from "../../../utils/cn";
const sizeStyles = {
    sm: "max-w-md",
    md: "max-w-lg",
    lg: "max-w-2xl",
    xl: "max-w-4xl",
    full: "max-w-full",
};
export const Modal = ({ isOpen, onClose, title, children, footer, size = "md", className, }) => {
    // Lock body scroll when modal is open
    useEffect(() => {
        if (isOpen) {
            document.body.style.overflow = "hidden";
        }
        else {
            document.body.style.overflow = "unset";
        }
        return () => {
            document.body.style.overflow = "unset";
        };
    }, [isOpen]);
    // Keyboard navigation and focus management
    useEffect(() => {
        if (!isOpen)
            return;
        const handleKeyDown = (e) => {
            if (e.key === "Escape") {
                onClose();
            }
            // Trap focus within modal
            if (e.key === "Tab") {
                const modal = document.querySelector('[role="dialog"]');
                if (modal) {
                    const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
                    const firstElement = focusableElements[0];
                    const lastElement = focusableElements[focusableElements.length - 1];
                    if (e.shiftKey && document.activeElement === firstElement) {
                        e.preventDefault();
                        lastElement?.focus();
                    }
                    else if (!e.shiftKey && document.activeElement === lastElement) {
                        e.preventDefault();
                        firstElement?.focus();
                    }
                }
            }
        };
        window.addEventListener("keydown", handleKeyDown);
        // Focus first focusable element when modal opens
        const modal = document.querySelector('[role="dialog"]');
        if (modal) {
            const firstFocusable = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
            firstFocusable?.focus();
        }
        return () => {
            window.removeEventListener("keydown", handleKeyDown);
        };
    }, [isOpen, onClose]);
    if (!isOpen)
        return null;
    return (_jsx("div", { className: "fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4", onClick: onClose, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? "modal-title" : undefined, children: _jsxs("div", { className: cn("bg-white dark:bg-neutral-800 rounded-xl shadow-lg w-full", sizeStyles[size], className), onClick: (e) => e.stopPropagation(), children: [title && (_jsxs("div", { className: "flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700", children: [title && (_jsx("h2", { id: "modal-title", className: "text-xl font-semibold text-neutral-900 dark:text-white", children: title })), onClose && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close modal", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }))] })), _jsx("div", { className: "p-6", children: children }), footer && (_jsx("div", { className: "flex items-center justify-end gap-2 p-6 border-t border-neutral-200 dark:border-neutral-700", children: footer }))] }) }));
};
export default Modal;
