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


/* ------------------------------------------------------------
   ComplexFormPickerModal — catalog browser for the 20 CRB forms.
   Filters by target (Persona/Device/File/Host/etc.) for convenience.
   ------------------------------------------------------------ */
window.ComplexFormPickerModal = function ComplexFormPickerModal({ character, onPick, onClose, previewLevel }) {
    const M = SR5_MAGIC;
    const C = SR5_CALC;
    const [selection, setSelection] = useState({});

    /* For forms that have requiresSelection === 'matrix_attribute', we need a
       dropdown for the user to pick Attack/Sleaze/Data Processing/Firewall. */
    const MATRIX_ATTRS = ['Attack', 'Sleaze', 'Data Processing', 'Firewall'];

    function setSelFor(key, val) {
        setSelection(s => ({ ...s, [key]: val }));
    }

    return (
        <EntityPicker
            title="Browse Complex Forms"
            items={M.COMPLEX_FORMS}
            getItemKey={f => f.key}
            filters={M.COMPLEX_FORM_TARGETS}
            filterBy={(f, query, filter) => {
                if (filter && f.target !== filter) return false;
                if (query) {
                    const q = query.toLowerCase();
                    const blob = [f.name, f.target, f.description || ''].join(' ').toLowerCase();
                    if (!blob.includes(q)) return false;
                }
                return true;
            }}
            isAlreadyTaken={(f) => C.complexFormHasKey(character, f.key)}
            itemRenderer={(f, { selected, onClick }) => {
                const owned = C.complexFormHasKey(character, f.key);
                const fadeAtPreview = M.computeFadeValue(f.fade, previewLevel);
                return (
                    <div key={f.key}
                         className={`picker-item ${selected ? 'selected' : ''} ${owned ? 'already-taken' : ''}`}
                         onClick={onClick}>
                        <span className="pi-name">{f.name}</span>
                        <span className="pi-cost">{f.fade} → {fadeAtPreview}</span>
                        <div className="pi-meta">
                            {f.target} · {durationLabel(f.duration)} {owned && '· already known'}
                        </div>
                    </div>
                );
            }}
            renderDetails={(f) => {
                const needsSel = f.requiresSelection === 'matrix_attribute';
                const pickedSel = selection[f.key] || MATRIX_ATTRS[0];
                const fadeAtPreview = M.computeFadeValue(f.fade, previewLevel);
                return (
                    <>
                        <h3 className="picker-details-title">{f.name}</h3>
                        <div className="weapon-stat-grid">
                            <div className="ws"><span className="ws-label">Target</span><span className="ws-value">{f.target}</span></div>
                            <div className="ws"><span className="ws-label">Duration</span><span className="ws-value">{durationLabel(f.duration)}</span></div>
                            <div className="ws"><span className="ws-label">Fade</span><span className="ws-value">{f.fade}</span></div>
                            <div className="ws"><span className="ws-label">@ L{previewLevel}</span><span className="ws-value accent">DV {fadeAtPreview}</span></div>
                            <div className="ws" style={{ gridColumn: '1 / -1' }}>
                                <span className="ws-label">Source</span>
                                <span className="ws-value" style={{ fontSize: 11 }}>{f.source}</span>
                            </div>
                        </div>
                        {f.description && (
                            <div className="picker-details-section">
                                <div className="picker-details-label">Effect</div>
                                <div className="picker-details-text">{f.description}</div>
                            </div>
                        )}
                        {needsSel && (
                            <div className="picker-details-section">
                                <div className="picker-details-label">Pick Matrix attribute</div>
                                <select className="input"
                                        value={pickedSel}
                                        onChange={e => setSelFor(f.key, e.target.value)}>
                                    {MATRIX_ATTRS.map(a => (
                                        <option key={a} value={a}>{a}</option>
                                    ))}
                                </select>
                            </div>
                        )}
                    </>
                );
            }}
            onPick={(f) => {
                const opts = {};
                if (f.requiresSelection === 'matrix_attribute') {
                    opts.selection = selection[f.key] || MATRIX_ATTRS[0];
                }
                onPick(f, opts);
            }}
            onClose={onClose}
        />
    );
};