/* ============================================================
   Magic — Spell 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;


/* ------------------------------------------------------------
   SpellPickerModal — EntityPicker specialized for spells.
   Shows live drain calculation in the details panel.
   ------------------------------------------------------------ */
window.SpellPickerModal = function SpellPickerModal({ character, previewForce, onPick, onClose }) {
    const M = SR5_MAGIC;
    const C = SR5_CALC;

    function isAlreadyTaken(template) {
        return C.spellHasKey(character, template.key);
    }

    function itemRenderer(s, { selected, alreadyTaken, onClick }) {
        return (
            <div key={s.key}
                 className={`picker-item ${s.category} ${selected ? 'selected' : ''} ${alreadyTaken ? 'already-taken' : ''}`}
                 onClick={onClick}>
                <span className="pi-name">{s.name}</span>
                <span className="pi-karma" style={{ color: 'var(--accent)' }}>{s.drain}</span>
                <div className="pi-meta">
                    {s.category} · {M.TYPE_LABEL[s.type]} · {s.range}
                </div>
            </div>
        );
    }

    function renderDetails(s) {
        const dv = C.computeDrainValue(s.drain, previewForce);
        return (
            <>
                <h3 className="picker-details-title">{s.name}</h3>

                <div className="spell-stat-grid">
                    <div className="ws"><span className="ws-label">Type</span><span className="ws-value">{M.TYPE_LABEL[s.type]}</span></div>
                    <div className="ws"><span className="ws-label">Range</span><span className="ws-value">{s.range}</span></div>
                    <div className="ws"><span className="ws-label">Damage</span><span className="ws-value">{M.DAMAGE_LABEL[s.damage] || s.damage}</span></div>
                    <div className="ws"><span className="ws-label">Duration</span><span className="ws-value">{M.DURATION_LABEL[s.duration]}</span></div>
                    <div className="ws"><span className="ws-label">Drain</span><span className="ws-value damage">{s.drain}</span></div>
                </div>

                <div className="picker-details-cost">
                    <span className="cost-label">At Force {previewForce}</span>
                    <span className="cost-value">DV {dv}</span>
                </div>

                {s.description && (
                    <div className="picker-details-section">
                        <div className="picker-details-label">Effect</div>
                        <div className="picker-details-text">{s.description}</div>
                    </div>
                )}
                {s.tags && s.tags.length > 0 && (
                    <div className="picker-details-section">
                        <div className="picker-details-label">Tags</div>
                        <div className="picker-details-tags">
                            {s.tags.map(t => <span key={t} className="picker-tag">{t}</span>)}
                        </div>
                    </div>
                )}
                {s.source && <div className="picker-details-source">{s.source}</div>}
            </>
        );
    }

    return (
        <EntityPicker
            title="Browse Spells"
            items={M.SPELLS}
            getItemKey={s => s.key}
            filters={M.SPELL_CATEGORIES}
            filterBy={(s, query, filter) => {
                if (filter && s.category !== filter) return false;
                if (query && !s.name.toLowerCase().includes(query) &&
                    !(s.description || '').toLowerCase().includes(query)) return false;
                return true;
            }}
            isAlreadyTaken={isAlreadyTaken}
            itemRenderer={itemRenderer}
            renderDetails={renderDetails}
            onPick={onPick}
            onClose={onClose}
        />
    );
};