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


/* ------------------------------------------------------------
   AdeptPowerPickerModal — EntityPicker specialized for adept powers.
   Includes inline level/selection inputs in the details panel.
   ------------------------------------------------------------ */
window.AdeptPowerPickerModal = function AdeptPowerPickerModal({ character, onPick, onClose }) {
    const M = SR5_MAGIC;
    const C = SR5_CALC;

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

    function itemRenderer(p, { selected, alreadyTaken, onClick }) {
        const cost = p.costPerLevel ? `${p.costPerLevel}/lvl` : `${p.cost} PP`;
        return (
            <div key={p.key}
                 className={`picker-item ${selected ? 'selected' : ''} ${alreadyTaken ? 'already-taken' : ''}`}
                 onClick={onClick}>
                <span className="pi-name">{p.name}</span>
                <span className="pi-karma" style={{ color: 'var(--accent)' }}>{cost}</span>
                <div className="pi-meta">
                    {(p.tags || []).slice(0, 3).join(' · ')}
                    {p.source && ` · ${abbreviateSource(p.source)}`}
                </div>
            </div>
        );
    }

    function renderDetails(p, { extras, setExtras }) {
        const level = extras.level || 1;
        const effectiveCost = M.powerPPCost(p, level);

        return (
            <>
                <h3 className="picker-details-title">{p.name}</h3>

                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                    <div className="picker-details-cost">
                        <span className="cost-label">PP Cost</span>
                        <span className="cost-value" style={{ color: 'var(--accent)' }}>
                            {effectiveCost.toFixed(2)}
                        </span>
                    </div>
                    {p.activation && p.activation !== '—' && (
                        <div className="picker-details-cost">
                            <span className="cost-label">Activation</span>
                            <span className="cost-value" style={{ color: 'var(--text-primary)' }}>{p.activation}</span>
                        </div>
                    )}
                    {p.duration && p.duration !== 'Constant' && (
                        <div className="picker-details-cost">
                            <span className="cost-label">Duration</span>
                            <span className="cost-value" style={{ color: 'var(--text-primary)' }}>{p.duration}</span>
                        </div>
                    )}
                </div>

                {/* Level stepper for rated powers */}
                {p.costPerLevel && (
                    <div className="picker-details-rank-input">
                        <label>Level</label>
                        <RatingStepper
                            value={extras.level || 1}
                            min={1}
                            max={p.maxLevels || 6}
                            onChange={(n) => setExtras({ ...extras, level: n })}
                            stopPropagation
                        />
                        <span className="muted mono" style={{ fontSize: 11, marginLeft: 8 }}>max {p.maxLevels || 6}</span>
                    </div>
                )}

                {/* Selection input for powers that need one */}
                {p.requiresSelection && (
                    <div className="power-selection-row">
                        <label>{p.requiresSelection.replace(/_/g, ' ')}</label>
                        {p.requiresSelection === 'physical_attribute' ? (
                            <select value={extras.selection || ''}
                                    onChange={e => setExtras({ ...extras, selection: e.target.value })}>
                                <option value="">— pick one —</option>
                                <option value="Body">Body</option>
                                <option value="Agility">Agility</option>
                                <option value="Reaction">Reaction</option>
                                <option value="Strength">Strength</option>
                            </select>
                        ) : p.requiresSelection === 'limit' ? (
                            <select value={extras.selection || ''}
                                    onChange={e => setExtras({ ...extras, selection: e.target.value })}>
                                <option value="">— pick one —</option>
                                <option value="Physical">Physical</option>
                                <option value="Mental">Mental</option>
                                <option value="Social">Social</option>
                            </select>
                        ) : p.requiresSelection === 'melee_skill' ? (
                            <select value={extras.selection || ''}
                                    onChange={e => setExtras({ ...extras, selection: e.target.value })}>
                                <option value="">— pick one —</option>
                                <option value="Unarmed">Unarmed</option>
                                <option value="Clubs">Clubs</option>
                                <option value="Blades">Blades</option>
                                <option value="Astral Combat">Astral Combat</option>
                                <option value="Exotic Melee">Exotic Melee</option>
                            </select>
                        ) : p.requiresSelection === 'element' ? (
                            <select value={extras.selection || ''}
                                    onChange={e => setExtras({ ...extras, selection: e.target.value })}>
                                <option value="">— pick one —</option>
                                <option value="Fire">Fire</option>
                                <option value="Electric">Electric</option>
                                <option value="Cold">Cold</option>
                                <option value="Acid">Acid</option>
                                <option value="Sound">Sound</option>
                            </select>
                        ) : (
                            /* Generic free text for skill, sense, etc. */
                            <input type="text"
                                   value={extras.selection || ''}
                                   onChange={e => setExtras({ ...extras, selection: e.target.value })}
                                   placeholder={`e.g. ${p.requiresSelection === 'skill' ? 'Pistols' : p.requiresSelection === 'sense' ? 'Low-Light Vision' : 'choose one'}`}/>
                        )}
                    </div>
                )}

                {p.description && (
                    <div className="picker-details-section">
                        <div className="picker-details-label">Effect</div>
                        <div className="picker-details-text">{p.description}</div>
                    </div>
                )}
                {p.prerequisite && (
                    <div className="picker-details-section">
                        <div className="picker-details-label">Prerequisite</div>
                        <div className="picker-details-text">
                            Requires the <strong>{M.findAdeptPower(p.prerequisite)?.name || p.prerequisite}</strong> power.
                        </div>
                    </div>
                )}
                {p.tags && p.tags.length > 0 && (
                    <div className="picker-details-section">
                        <div className="picker-details-label">Tags</div>
                        <div className="picker-details-tags">
                            {p.tags.map(t => <span key={t} className="picker-tag">{t}</span>)}
                        </div>
                    </div>
                )}
                {p.source && <div className="picker-details-source">{p.source}</div>}
            </>
        );
    }

    return (
        <EntityPicker
            title="Browse Adept Powers"
            items={M.ADEPT_POWERS}
            getItemKey={p => p.key}
            filters={M.ADEPT_POWER_TAGS}
            filterBy={(p, query, filter) => {
                if (filter && !(p.tags || []).includes(filter)) return false;
                if (query && !p.name.toLowerCase().includes(query) &&
                    !(p.description || '').toLowerCase().includes(query)) return false;
                return true;
            }}
            isAlreadyTaken={isAlreadyTaken}
            itemRenderer={itemRenderer}
            renderDetails={renderDetails}
            onPick={(p, extras) => onPick(p, { level: extras.level || 1, selection: extras.selection || null })}
            onClose={onClose}
        />
    );
};