// ── "?" overlay — keyboard shortcut reference ────────────────────────────────
// Renders straight from the live Shortcuts registry, so it can never drift
// from what the keys actually do: a shortcut only appears here while the view
// that owns it is mounted and its `when` condition holds.
const ShortcutHelpModal = ({ onClose }) => {
    // Own Esc handling — this overlay is hand-rolled (not Modal.jsx) so the
    // help sections can use the full body width.
    React.useEffect(() => {
        const handler = (e) => { if (e.key === 'Escape') onClose(); };
        document.addEventListener('keydown', handler);
        return () => document.removeEventListener('keydown', handler);
    }, [onClose]);
    const KEY_LABELS = { ArrowUp: '↑', ArrowDown: '↓', Enter: '↵ Enter', Escape: 'Esc' };
    // Fixed rows the registry can't express well (chords, browser-owned keys).
    const grouped = {};
    Shortcuts.list().forEach(en => {
        (grouped[en.section || 'General'] = grouped[en.section || 'General'] || []).push(en);
    });
    return (
        <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
            <div className="modal modal-medium shortcut-help">
                <div className="modal-header">
                    <h2 className="modal-title">Keyboard Shortcuts</h2>
                    <button className="modal-close-btn" onClick={onClose}>&times;</button>
                </div>
                <div className="modal-body">
                    {Object.entries(grouped).map(([section, list]) => (
                        <div key={section} className="shortcut-help-section">
                            <h3>{section}</h3>
                            {list.map((en, i) => (
                                <div key={i} className="shortcut-help-row">
                                    <span className="shortcut-help-keys">
                                        {en.chord && <><kbd>{en.chord}</kbd><span className="shortcut-help-then">then</span></>}
                                        <kbd>{KEY_LABELS[en.key] || en.key}</kbd>
                                    </span>
                                    <span>{en.description}</span>
                                </div>
                            ))}
                        </div>
                    ))}
                    <div className="shortcut-help-section">
                        <h3>Anywhere</h3>
                        <div className="shortcut-help-row">
                            <span className="shortcut-help-keys"><kbd>⌘K</kbd></span>
                            <span>Search everything</span>
                        </div>
                        <div className="shortcut-help-row">
                            <span className="shortcut-help-keys"><kbd>Esc</kbd></span>
                            <span>Close dialogs · back from an account</span>
                        </div>
                    </div>
                    <p className="shortcut-help-note">Shortcuts pause while you're typing in a field.</p>
                </div>
            </div>
        </div>
    );
};