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


/* ------------------------------------------------------------
   WeaponsTab
   ------------------------------------------------------------ */
window.WeaponsTab = function WeaponsTab({ character, onChange }) {
    const C = SR5_CALC;
    const G = SR5_GEAR;
    const [pickerOpen, setPickerOpen] = useState(false);
    const [customOpen, setCustomOpen] = useState(false);

    const inCareer = C.isCareerMode(character);
    const pendingGear = inCareer ? window.CareerGear.pendingOfKind(character, 'weapon') : [];

    const weapons = C.characterWeapons(character);

    function handlePick(template) {
        if (inCareer) {
            const cost = template.cost || 0;
            if (!window.CareerGear.canAfford(character, cost)) {
                alert(`Not enough nuyen: ${template.name} costs ${cost.toLocaleString()}¥, your pending budget can't absorb it.`);
                return;
            }
            onChange(C.stagePendingGear(character, {
                kind: 'weapon',
                templateKey: template.key,
                name: template.name,
                nuyenCost: cost,
            }));
        } else {
            onChange(C.addWeaponFromTemplate(character, template));
        }
        setPickerOpen(false);
    }
    function handleRemove(id) {
        if (inCareer) { alert("Remove sold/retired gear by logging it in the career log, not from this tab."); return; }
        onChange(C.removeGearItem(character, 'weapons', id));
    }
    function handleUnstage(tempId) {
        onChange(C.unstagePendingGear(character, tempId));
    }
    function handleUpdateNotes(id, notes) {
        if (inCareer) return;
        onChange(C.updateGearItem(character, 'weapons', id, { notes }));
    }

    function formatStat(v, fallback = '—') {
        if (v === null || v === undefined || v === '') return fallback;
        return String(v);
    }

    function renderRow(w) {
        const tpl = w.key ? G.findWeapon(w.key) : null;
        const stats = tpl || w;
        return (
            <div className={`weapon-row ${w.notes ? 'has-notes' : ''}`} key={w.id}>
                <div className="wr-name">
                    {w.name}
                    <span className="wr-cat">{stats.category?.replace(/_/g, ' ') || ''}</span>
                </div>
                <div className="wr-stat">{formatStat(stats.acc)}</div>
                <div className="wr-stat damage">{formatStat(stats.damage)}</div>
                <div className="wr-stat">{formatStat(stats.ap, '0')}</div>
                <div className="wr-stat">{formatStat(stats.mode, '—')}</div>
                <div className="wr-stat">{formatStat(stats.rc, '—')}</div>
                <div className="wr-stat">{formatStat(stats.ammo || (stats.reach !== undefined ? `reach ${stats.reach}` : ''), '—')}</div>
                <div className="wr-stat">{formatStat(stats.avail)}</div>
                <div className="wr-stat cost">{(w.nuyen || 0).toLocaleString()}¥</div>
                <button className="knowledge-remove-btn"
                        onClick={() => { if (confirm(`Remove ${w.name}?`)) handleRemove(w.id); }}
                        title={inCareer ? "Use career log for sold/lost gear" : "Remove"}>×</button>
                <div className="wr-notes-row">
                    <input className="qr-notes-input"
                           type="text"
                           value={w.notes || ''}
                           disabled={inCareer}
                           onChange={e => handleUpdateNotes(w.id, e.target.value)}
                           placeholder="notes — attachments, ammo type, mods…" />
                </div>
            </div>
        );
    }

    function renderPendingRow(pg) {
        const tpl = G.findWeapon(pg.templateKey);
        const stats = tpl || {};
        return (
            <div className="weapon-row pending-new" key={pg.tempId}>
                <div className="wr-name">
                    {pg.name}
                    <span className="gear-pending-tag">pending</span>
                    <span className="wr-cat">{stats.category?.replace(/_/g, ' ') || ''}</span>
                </div>
                <div className="wr-stat">{formatStat(stats.acc)}</div>
                <div className="wr-stat damage">{formatStat(stats.damage)}</div>
                <div className="wr-stat">{formatStat(stats.ap, '0')}</div>
                <div className="wr-stat">{formatStat(stats.mode, '—')}</div>
                <div className="wr-stat">{formatStat(stats.rc, '—')}</div>
                <div className="wr-stat">{formatStat(stats.ammo || (stats.reach !== undefined ? `reach ${stats.reach}` : ''), '—')}</div>
                <div className="wr-stat">{formatStat(stats.avail)}</div>
                <div className="wr-stat cost" style={{ color: 'var(--accent)' }}>{(pg.nuyenCost || 0).toLocaleString()}¥</div>
                <button className="knowledge-remove-btn"
                        onClick={() => handleUnstage(pg.tempId)}
                        title="Discard pending">×</button>
            </div>
        );
    }

    return (
        <>
            {(weapons.length > 0 || pendingGear.length > 0) && (
                <div className="weapon-table">
                    <div className="weapon-table-head">
                        <div>Weapon</div>
                        <div style={{ textAlign: 'center' }}>Acc</div>
                        <div style={{ textAlign: 'center' }}>Damage</div>
                        <div style={{ textAlign: 'center' }}>AP</div>
                        <div style={{ textAlign: 'center' }}>Mode</div>
                        <div style={{ textAlign: 'center' }}>RC</div>
                        <div style={{ textAlign: 'center' }}>Ammo/Reach</div>
                        <div style={{ textAlign: 'center' }}>Avail</div>
                        <div style={{ textAlign: 'right' }}>Cost</div>
                        <div></div>
                    </div>
                    {weapons.map(renderRow)}
                    {pendingGear.map(renderPendingRow)}
                </div>
            )}
            {weapons.length === 0 && pendingGear.length === 0 && (
                <div className="gear-empty">no weapons yet — browse the catalog or add a custom weapon</div>
            )}

            <div className="gear-add-bar">
                <button className="add-button" onClick={() => setPickerOpen(true)}>
                    <span className="plus-icon">+</span>Browse Weapons
                </button>
                {!inCareer && (
                    <button className="add-button" onClick={() => setCustomOpen(true)}>
                        <span className="plus-icon">+</span>Custom Weapon
                    </button>
                )}
            </div>

            {pickerOpen && (
                <EntityPicker
                    title="Browse Weapons"
                    items={G.WEAPONS}
                    getItemKey={w => w.key}
                    filters={G.WEAPON_CATEGORIES}
                    filterBy={(w, query, filter) => {
                        if (filter && w.category !== filter) return false;
                        if (query && !w.name.toLowerCase().includes(query)) return false;
                        return true;
                    }}
                    isBlocked={w => !C.availAllowedForCharacter(character, w.avail)}
                    blockedReason={w => `Availability ${w.avail} exceeds creation cap of ${C.CREATION_AVAIL_CAP}`}
                    itemRenderer={(w, { selected, blocked, onClick }) => (
                        <div key={w.key}
                             className={`picker-item ${selected ? 'selected' : ''} ${blocked ? 'blocked' : ''}`}
                             onClick={onClick}
                             title={blocked ? `Availability ${w.avail} — over the creation cap` : undefined}>
                            <span className="pi-name">{w.name}</span>
                            <span className="pi-cost">{typeof w.cost === 'number' ? w.cost.toLocaleString() + '¥' : String(w.cost)}</span>
                            <div className="pi-meta">
                                {w.category?.replace(/_/g, ' ')} · {w.damage} · avail {w.avail}
                            </div>
                        </div>
                    )}
                    renderDetails={(w) => (
                        <>
                            <h3 className="picker-details-title">{w.name}</h3>
                            <div className="picker-details-cost">
                                <span className="cost-label">Cost</span>
                                <span className="cost-value">{typeof w.cost === 'number' ? w.cost.toLocaleString() + '¥' : String(w.cost)}</span>
                            </div>
                            <div className="weapon-stat-grid">
                                <div className="ws"><span className="ws-label">Acc</span><span className="ws-value">{formatStat(w.acc)}</span></div>
                                <div className="ws"><span className="ws-label">Damage</span><span className="ws-value damage">{formatStat(w.damage)}</span></div>
                                <div className="ws"><span className="ws-label">AP</span><span className="ws-value">{formatStat(w.ap, '0')}</span></div>
                                <div className="ws"><span className="ws-label">Avail</span><span className="ws-value">{formatStat(w.avail)}</span></div>
                                {w.mode !== undefined && <div className="ws"><span className="ws-label">Mode</span><span className="ws-value">{formatStat(w.mode)}</span></div>}
                                {w.rc !== undefined && <div className="ws"><span className="ws-label">RC</span><span className="ws-value">{formatStat(w.rc)}</span></div>}
                                {w.ammo && <div className="ws"><span className="ws-label">Ammo</span><span className="ws-value">{formatStat(w.ammo)}</span></div>}
                                {w.reach !== undefined && <div className="ws"><span className="ws-label">Reach</span><span className="ws-value">{formatStat(w.reach)}</span></div>}
                                {w.skill && <div className="ws"><span className="ws-label">Skill</span><span className="ws-value" style={{ fontSize: 11 }}>{w.skill.replace(/_/g, ' ')}</span></div>}
                            </div>
                            {w.tags && w.tags.length > 0 && (
                                <div className="picker-details-section">
                                    <div className="picker-details-label">Tags</div>
                                    <div className="picker-details-tags">
                                        {w.tags.map(t => <span key={t} className="picker-tag">{t}</span>)}
                                    </div>
                                </div>
                            )}
                            {w.source && <div className="picker-details-source">{w.source}</div>}
                        </>
                    )}
                    onPick={handlePick}
                    onClose={() => setPickerOpen(false)}
                />
            )}

            {customOpen && (
                <CustomWeaponDialog
                    onSubmit={payload => {
                        onChange(C.addCustomWeapon(character, payload));
                        setCustomOpen(false);
                    }}
                    onClose={() => setCustomOpen(false)}
                />
            )}
        </>
    );
};