import { useEffect, type ReactNode } from 'react';
import { createPortal } from 'react-dom';
import { X } from 'lucide-react';
import { cn } from '../../lib/cn';

export type ModalWidth = 'sm' | 'md' | 'lg' | 'xl';

const WIDTH: Record<ModalWidth, string> = {
  sm: 'max-w-[480px]',
  md: 'max-w-[640px]',
  lg: 'max-w-[820px]',
  xl: 'max-w-[1000px]',
};

export interface ModalProps {
  open: boolean;
  onClose: () => void;
  title?: ReactNode;
  subtitle?: ReactNode;
  /** @default "md" */
  width?: ModalWidth;
  children?: ReactNode;
}

/** Portal modal host — backdrop, Esc / click-out close, scroll-locked body.
 *  Aria's equivalent of the renderer's FormPopup; hosts an activity body. */
export function Modal({ open, onClose, title, subtitle, width = 'md', children }: ModalProps) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [open, onClose]);

  if (!open) return null;

  return createPortal(
    <div
      className="fixed inset-0 z-[10000] flex items-start justify-center overflow-y-auto bg-black/40 p-4 sm:p-8"
      onMouseDown={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
    >
      <div
        role="dialog"
        aria-modal="true"
        className={cn(
          // Capped well below the viewport so the box stays a contained dialog
          // (visible backdrop margin) — the body scrolls internally rather than
          // the whole dialog growing with content and taking over the screen.
          'w-full bg-card rounded-lg border border-border-subtle shadow-lg my-auto',
          'flex flex-col max-h-[85vh]',
          WIDTH[width],
        )}
      >
        <header className="shrink-0 flex items-start justify-between gap-3 px-5 py-4 border-b border-border-subtle">
          <div className="min-w-0">
            {title && <h3 className="m-0 text-md font-semibold text-strong truncate">{title}</h3>}
            {subtitle && <div className="text-xs text-faint mt-0.5">{subtitle}</div>}
          </div>
          <button
            onClick={onClose}
            aria-label="Close"
            className="shrink-0 -mr-1 -mt-1 p-1.5 rounded-md text-faint hover:text-strong hover:bg-black/5"
          >
            <X size={18} />
          </button>
        </header>
        <div className="flex-1 min-h-0 overflow-y-auto p-5 scrollbar-slim">{children}</div>
      </div>
    </div>,
    document.body,
  );
}