/* ============================================================
   Primitives — Modal
   Extracted from components.jsx via split.py.
   Each component reaches React hooks via window.React.
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;


/* ============================================================
   Phase 3 — Modal, EntityPicker, Qualities
   ============================================================ */

/* ------------------------------------------------------------
   Modal — generic overlay with a close-on-escape behavior.
   Used by EntityPicker; reusable for any future "opens a dialog" flow.
   ------------------------------------------------------------ */
window.Modal = function Modal({ title, onClose, children, footer }) {
    useEffect(() => {
        function onKey(e) { if (e.key === 'Escape') onClose?.(); }
        window.addEventListener('keydown', onKey);
        return () => window.removeEventListener('keydown', onKey);
    }, [onClose]);

    return (
        <div className="modal-backdrop" onClick={(e) => {
            /* click outside the modal closes it */
            if (e.target === e.currentTarget) onClose?.();
        }}>
            <div className="modal" onClick={e => e.stopPropagation()}>
                <div className="modal-header">
                    <h2 className="modal-title">{title}</h2>
                    <button className="modal-close" onClick={onClose} title="Close (Esc)">×</button>
                </div>
                <div className="modal-body">{children}</div>
                {footer && <div className="modal-footer">{footer}</div>}
            </div>
        </div>
    );
};