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


/* ============================================================
   Phase 4a — Gear (Weapons + Armor)
   ============================================================ */

/* ------------------------------------------------------------
   GearView — four sub-tabs (Weapons, Armor, Cyberware, Bioware), nuyen + essence.
   ------------------------------------------------------------ */
window.GearView = function GearView({ character, onChange }) {
    const C = SR5_CALC;
    const [subtab, setSubtab] = useState('weapons');

    const nuyenTotal = C.startingNuyen(character);
    const spent = C.nuyenSpent(character);
    const remaining = C.nuyenRemaining(character);
    const weapons = C.characterWeapons(character);
    const armor = C.characterArmor(character);
    const cyberware = C.characterCyberware(character);
    const bioware = C.characterBioware(character);
    const sins = C.characterSINs(character);
    const licenses = C.characterLicenses(character);
    const electronics = C.characterEquipment(character, 'electronics');
    const security = C.characterEquipment(character, 'security');
    const medical = C.characterEquipment(character, 'medical');
    const misc = C.characterEquipment(character, 'misc');
    const inCareer = C.isCareerMode(character);

    /* Phase 15 — karma-to-nuyen is creation-only */
    const karmaToNuyen = C.karmaToNuyenTraded(character);
    const karmaBonus = C.karmaToNuyenBonus(character);
    const karmaTotals = C.karmaTotals(character);
    const karmaRemaining = karmaTotals.remaining;
    const canIncKarma = !inCareer && karmaToNuyen < C.KARMA_TO_NUYEN_MAX && karmaRemaining >= 1;
    const canDecKarma = !inCareer && karmaToNuyen > 0;

    if (nuyenTotal === 0 && karmaToNuyen === 0) {
        return (
            <>
                <ContentHeader title="07 / Gear" heading="Buy weapons and armor" />
                <div className="card"><div className="card-body muted">
                    Assign a priority letter to <strong className="accent">Resources</strong> first. That's what gives you starting nuyen to spend on gear.
                    {!inCareer && karmaRemaining > 0 && (
                        <>
                            {' '}Alternatively, you can trade up to 10 karma for {C.KARMA_TO_NUYEN_RATE.toLocaleString()}¥ each (CRB p. 99).
                            <div style={{ marginTop: 12, display: 'flex', gap: 8, alignItems: 'center' }}>
                                <button className="btn btn-primary" onClick={() => onChange(C.setKarmaToNuyen(character, 1))}>
                                    Trade 1 karma for 2,000¥
                                </button>
                            </div>
                        </>
                    )}
                </div></div>
            </>
        );
    }

    const nuyenStateRemaining = remaining < 0 ? 'over' : (remaining === 0 ? 'done' : 'free');

    return (
        <>
            <ContentHeader title="07 / Gear" heading="Weapons · Armor · Augmentations" />

            <div className="nuyen-summary">
                <div className="nuyen-stat">
                    <span className="n-label">Starting Nuyen</span>
                    <span className="n-value">{nuyenTotal.toLocaleString()}¥</span>
                    {karmaBonus > 0 && (
                        <span className="n-sub">
                            priority + <span className="accent">{karmaBonus.toLocaleString()}¥ from karma</span>
                        </span>
                    )}
                </div>
                <div className="nuyen-stat">
                    <span className="n-label">Spent</span>
                    <span className="n-value">{spent.toLocaleString()}¥</span>
                </div>
                <div className={`nuyen-stat remaining ${nuyenStateRemaining}`}>
                    <span className="n-label">Remaining</span>
                    <span className="n-value">{remaining.toLocaleString()}¥</span>
                </div>
            </div>

            {!inCareer && (
                <div className="karma-nuyen-convert" style={{
                    marginBottom: 16, padding: '10px 14px',
                    background: 'var(--bg-surface)',
                    border: '1px solid var(--border-subtle)',
                    borderLeft: karmaToNuyen > 0 ? '2px solid var(--accent)' : '2px solid transparent',
                    borderRadius: 3,
                    display: 'flex', alignItems: 'center', gap: 12,
                    fontFamily: 'var(--font-mono)', fontSize: 12,
                }}>
                    <span style={{ letterSpacing: '0.1em', textTransform: 'uppercase',
                                   color: 'var(--text-muted)', fontSize: 11 }}>
                        Karma → Nuyen
                    </span>
                    <button className="stepper-btn" style={{ width: 24, height: 24, fontSize: 14 }}
                            onClick={() => onChange(C.setKarmaToNuyen(character, karmaToNuyen - 1))}
                            disabled={!canDecKarma}
                            title={!canDecKarma ? 'Nothing to refund' : 'Refund 1 karma'}>−</button>
                    <span style={{ minWidth: 40, textAlign: 'center',
                                   color: karmaToNuyen > 0 ? 'var(--accent-bright)' : 'var(--text-primary)',
                                   fontWeight: 600 }}>
                        {karmaToNuyen} / {C.KARMA_TO_NUYEN_MAX}
                    </span>
                    <button className="stepper-btn" style={{ width: 24, height: 24, fontSize: 14 }}
                            onClick={() => onChange(C.setKarmaToNuyen(character, karmaToNuyen + 1))}
                            disabled={!canIncKarma}
                            title={!canIncKarma
                                ? (karmaToNuyen >= C.KARMA_TO_NUYEN_MAX
                                    ? `Max of ${C.KARMA_TO_NUYEN_MAX} reached`
                                    : 'Not enough remaining karma')
                                : 'Trade 1 karma for 2,000¥'}>+</button>
                    <span style={{ color: 'var(--text-secondary)' }}>
                        = {karmaBonus.toLocaleString()}¥ bonus
                    </span>
                    <span className="muted" style={{ marginLeft: 'auto', fontSize: 11 }}>
                        Up to 10 karma × 2,000¥ (CRB p. 99)
                    </span>
                </div>
            )}

            <div className="gear-tabs">
                <button className={`gear-tab ${subtab === 'weapons' ? 'active' : ''}`}
                        onClick={() => setSubtab('weapons')}>
                    Weapons <span className="tab-count">{weapons.length}</span>
                </button>
                <button className={`gear-tab ${subtab === 'armor' ? 'active' : ''}`}
                        onClick={() => setSubtab('armor')}>
                    Armor <span className="tab-count">{armor.length}</span>
                </button>
                <button className={`gear-tab ${subtab === 'cyberware' ? 'active' : ''}`}
                        onClick={() => setSubtab('cyberware')}>
                    Cyberware <span className="tab-count">{cyberware.length}</span>
                </button>
                <button className={`gear-tab ${subtab === 'bioware' ? 'active' : ''}`}
                        onClick={() => setSubtab('bioware')}>
                    Bioware <span className="tab-count">{bioware.length}</span>
                </button>
                <button className={`gear-tab ${subtab === 'electronics' ? 'active' : ''}`}
                        onClick={() => setSubtab('electronics')}>
                    Electronics <span className="tab-count">{electronics.length}</span>
                </button>
                <button className={`gear-tab ${subtab === 'security' ? 'active' : ''}`}
                        onClick={() => setSubtab('security')}>
                    Security <span className="tab-count">{security.length}</span>
                </button>
                <button className={`gear-tab ${subtab === 'medical' ? 'active' : ''}`}
                        onClick={() => setSubtab('medical')}>
                    Medical <span className="tab-count">{medical.length}</span>
                </button>
                <button className={`gear-tab ${subtab === 'misc' ? 'active' : ''}`}
                        onClick={() => setSubtab('misc')}>
                    Misc <span className="tab-count">{misc.length}</span>
                </button>
                <button className={`gear-tab ${subtab === 'identity' ? 'active' : ''}`}
                        onClick={() => setSubtab('identity')}>
                    Identity <span className="tab-count">{sins.length + licenses.length}</span>
                </button>
            </div>

            {subtab === 'weapons'     && <WeaponsTab     character={character} onChange={onChange} />}
            {subtab === 'armor'       && <ArmorTab       character={character} onChange={onChange} />}
            {subtab === 'cyberware'   && <CyberwareTab   character={character} onChange={onChange} />}
            {subtab === 'bioware'     && <BiowareTab     character={character} onChange={onChange} />}
            {subtab === 'electronics' && <EquipmentTab   character={character} onChange={onChange} kind="electronics" />}
            {subtab === 'security'    && <EquipmentTab   character={character} onChange={onChange} kind="security"    />}
            {subtab === 'medical'     && <EquipmentTab   character={character} onChange={onChange} kind="medical"     />}
            {subtab === 'misc'        && <EquipmentTab   character={character} onChange={onChange} kind="misc"        />}
            {subtab === 'identity'    && <IdentityTab    character={character} onChange={onChange} />}

            <div className="phase-note" style={{ marginTop: 20 }}>
                <strong>Phase 4c.</strong> Full SR5 Core gear coverage: weapons, armor, cyberware/bioware,
                electronics (commlinks/cyberdecks/RCCs/programs), security (sensors/locks/countermeasures),
                medical (medkits/patches/DocWagon/drugs), misc (tools/survival/explosives/grenades),
                and identity (fake SINs + licenses). Magical Equipment lives in Phase 5d; Vehicles/Drones in Phase 7.
            </div>
        </>
    );
};