/* ============================================================
   Matrix — Actions Reference (Phase 6c)
   
   Quick-reference modal listing all ~37 Matrix actions from the
   Core Rulebook grouped by category. Useful at the table when
   someone asks "what's the dice pool for Hack on the Fly?".
   
   Opens from a button in the Matrix view (available to deckers,
   technomancers, and anyone curious).
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;

window.MatrixActionsReference = function MatrixActionsReference({ onClose }) {
    const M = SR5_MATRIX;
    const [query, setQuery] = useState('');
    const [activeCategory, setActiveCategory] = useState(null);

    const filtered = M.MATRIX_ACTIONS.filter(a => {
        if (activeCategory && a.category !== activeCategory) return false;
        if (query) {
            const q = query.toLowerCase();
            const blob = (a.name + ' ' + a.test + ' ' + (a.opposed || '') + ' ' + a.description).toLowerCase();
            if (!blob.includes(q)) return false;
        }
        return true;
    });

    const byCategory = M.MATRIX_ACTION_CATEGORIES.map(cat => ({
        cat,
        actions: filtered.filter(a => a.category === cat.key),
    })).filter(g => g.actions.length > 0);

    const footer = (
        <div className="footer-actions" style={{ width: '100%', justifyContent: 'flex-end' }}>
            <button className="btn btn-primary" onClick={onClose}>Done</button>
        </div>
    );

    return (
        <Modal title="Matrix Actions Reference" onClose={onClose} footer={footer}>
            <div style={{ padding: '16px 24px 20px', width: '100%', overflowY: 'auto' }}>
                {/* Search + filter chips */}
                <div className="mar-toolbar">
                    <input type="text"
                           className="input"
                           value={query}
                           onChange={e => setQuery(e.target.value)}
                           placeholder="Search actions…"
                           style={{ flex: 1, minWidth: 200 }} />
                    <div className="mar-chips">
                        <button
                            className={`mar-chip ${activeCategory === null ? 'active' : ''}`}
                            onClick={() => setActiveCategory(null)}>All</button>
                        {M.MATRIX_ACTION_CATEGORIES.map(c => (
                            <button
                                key={c.key}
                                className={`mar-chip mar-chip-${c.key} ${activeCategory === c.key ? 'active' : ''}`}
                                onClick={() => setActiveCategory(c.key)}>
                                {c.label}
                            </button>
                        ))}
                    </div>
                </div>

                {/* Legend */}
                <div className="muted" style={{ fontSize: 11, marginBottom: 12, lineHeight: 1.5 }}>
                    Marks required shown as ◉; 0 = no mark needed. Action type: F (Free), S (Simple), C (Complex).
                    Tests in <span className="mono">monospace</span>, opposed defender's test follows <span className="accent">vs.</span>
                </div>

                {filtered.length === 0 ? (
                    <div className="muted" style={{ fontSize: 13, padding: '20px 0', textAlign: 'center' }}>
                        No actions match.
                    </div>
                ) : byCategory.map(({ cat, actions }) => (
                    <div key={cat.key} className="mar-category-group" style={{ borderLeft: `3px solid ${cat.color}` }}>
                        <div className="mar-cat-heading" style={{ color: cat.color }}>
                            {cat.label} <span className="muted mono" style={{ fontSize: 10, marginLeft: 8 }}>({actions.length})</span>
                        </div>
                        {actions.map(a => (
                            <div key={a.key} className="mar-row">
                                <div className="mar-row-head">
                                    <span className="mar-name">{a.name}</span>
                                    <span className="mar-meta mono">
                                        <span className="mar-marks" title="Marks required">
                                            {a.marks === 0 ? '—' : a.marks === 'varies' ? 'varies' : '◉'.repeat(a.marks)}
                                        </span>
                                        <span className="mar-type" title="Action type">
                                            {({ free: 'F', simple: 'S', complex: 'C', varies: 'V', interrupt: 'I' })[a.actionType] || a.actionType}
                                        </span>
                                        <span className="mar-source muted">{a.source}</span>
                                    </span>
                                </div>
                                <div className="mar-test mono">
                                    {a.test}
                                    {a.opposed && (
                                        <span className="mar-opposed"> <span className="accent">vs.</span> {a.opposed}</span>
                                    )}
                                </div>
                                <div className="mar-desc">{a.description}</div>
                            </div>
                        ))}
                    </div>
                ))}
            </div>
        </Modal>
    );
};