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


/* ------------------------------------------------------------
   ArmorTab
   ------------------------------------------------------------ */
window.ArmorTab = function ArmorTab({ 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, 'armor') : [];

    const armor = C.characterArmor(character);
    const currentRating = C.currentArmorRating(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: 'armor',
                templateKey: template.key,
                name: template.name,
                nuyenCost: cost,
            }));
        } else {
            onChange(C.addArmorFromTemplate(character, template));
        }
        setPickerOpen(false);
    }
    function handleRemove(id) {
        if (inCareer) { alert("Use career log for removed armor."); return; }
        onChange(C.removeGearItem(character, 'armor', id));
    }
    function handleUnstage(tempId) {
        onChange(C.unstagePendingGear(character, tempId));
    }
    function handleUpdateNotes(id, notes) {
        if (inCareer) return;
        onChange(C.updateGearItem(character, 'armor', id, { notes }));
    }

    function renderRow(a) {
        const isLayer = C.armorIsLayer(a);
        const tpl = a.key ? G.findArmor(a.key) : null;
        return (
            <div className={`armor-row ${isLayer ? 'is-layer' : ''}`} key={a.id}>
                <div className="ar-name">
                    {a.name}
                    {isLayer && <span className="layer-badge">layer</span>}
                </div>
                <div className="ar-stat rating">{a.rating || 0}</div>
                <div className="ar-stat">{a.capacity || 0}</div>
                <div className="ar-stat">{a.avail || tpl?.avail || '—'}</div>
                <div className="ar-stat cost">{(a.nuyen || 0).toLocaleString()}¥</div>
                <button className="knowledge-remove-btn"
                        onClick={() => { if (confirm(`Remove ${a.name}?`)) handleRemove(a.id); }}
                        title={inCareer ? "Use career log for removed armor" : "Remove"}>×</button>
                {(a.notes || tpl?.notes) && (
                    <div className="ar-notes">{a.notes || tpl?.notes}</div>
                )}
                <div style={{ gridColumn: '1 / -1', marginTop: 4 }}>
                    <input className="qr-notes-input"
                           type="text"
                           value={a.notes || ''}
                           disabled={inCareer}
                           onChange={e => handleUpdateNotes(a.id, e.target.value)}
                           placeholder="notes — mods, color, condition…" />
                </div>
            </div>
        );
    }

    function renderPendingRow(pg) {
        const tpl = G.findArmor(pg.templateKey);
        return (
            <div className="armor-row pending-new" key={pg.tempId}>
                <div className="ar-name">
                    {pg.name}
                    <span className="gear-pending-tag">pending</span>
                </div>
                <div className="ar-stat rating">{tpl?.rating || '—'}</div>
                <div className="ar-stat">{tpl?.capacity || '—'}</div>
                <div className="ar-stat">{tpl?.avail || '—'}</div>
                <div className="ar-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 (
        <>
            {(armor.length > 0 || pendingGear.length > 0) && (
                <div className="current-armor-ribbon">
                    <span className="cab-label">Current Armor</span>
                    <span className="cab-value">{currentRating}</span>
                    <span className="cab-formula">
                        best non-layer + layered items (helmet, FFBA)
                    </span>
                </div>
            )}

            {(armor.length > 0 || pendingGear.length > 0) && (
                <div className="armor-table">
                    <div className="armor-table-head">
                        <div>Armor</div>
                        <div style={{ textAlign: 'center' }}>Rating</div>
                        <div style={{ textAlign: 'center' }}>Capacity</div>
                        <div style={{ textAlign: 'center' }}>Avail</div>
                        <div style={{ textAlign: 'right' }}>Cost</div>
                        <div></div>
                    </div>
                    {armor.map(renderRow)}
                    {pendingGear.map(renderPendingRow)}
                </div>
            )}
            {armor.length === 0 && pendingGear.length === 0 && (
                <div className="gear-empty">no armor yet — browse the catalog or add a custom piece</div>
            )}

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

            {pickerOpen && (
                <EntityPicker
                    title="Browse Armor"
                    items={G.ARMOR}
                    getItemKey={a => a.key}
                    filters={G.ARMOR_TAGS}
                    filterBy={(a, query, filter) => {
                        if (filter && !(a.tags || []).includes(filter)) return false;
                        if (query && !a.name.toLowerCase().includes(query)) return false;
                        return true;
                    }}
                    isBlocked={a => !C.availAllowedForCharacter(character, a.avail)}
                    blockedReason={a => `Availability ${a.avail} exceeds creation cap of ${C.CREATION_AVAIL_CAP}`}
                    itemRenderer={(a, { selected, blocked, onClick }) => (
                        <div key={a.key}
                             className={`picker-item ${selected ? 'selected' : ''} ${blocked ? 'blocked' : ''}`}
                             onClick={onClick}
                             title={blocked ? `Availability ${a.avail} — over the creation cap` : undefined}>
                            <span className="pi-name">{a.name}</span>
                            <span className="pi-cost">{a.cost ? a.cost.toLocaleString() + '¥' : '0¥'}</span>
                            <div className="pi-meta">
                                rating {a.rating} · capacity {a.capacity} · avail {a.avail}
                            </div>
                        </div>
                    )}
                    renderDetails={(a) => (
                        <>
                            <h3 className="picker-details-title">{a.name}</h3>
                            <div className="picker-details-cost">
                                <span className="cost-label">Cost</span>
                                <span className="cost-value">{(a.cost || 0).toLocaleString()}¥</span>
                            </div>
                            <div className="weapon-stat-grid">
                                <div className="ws"><span className="ws-label">Rating</span><span className="ws-value damage">{a.rating}</span></div>
                                <div className="ws"><span className="ws-label">Capacity</span><span className="ws-value">{a.capacity}</span></div>
                                <div className="ws"><span className="ws-label">Avail</span><span className="ws-value">{a.avail}</span></div>
                                <div className="ws"><span className="ws-label">Layer?</span><span className="ws-value" style={{ fontSize: 12 }}>{(a.tags || []).includes('layer') ? 'yes' : 'no'}</span></div>
                            </div>
                            {a.notes && (
                                <div className="picker-details-section">
                                    <div className="picker-details-label">Notes</div>
                                    <div className="picker-details-text">{a.notes}</div>
                                </div>
                            )}
                            {a.tags && a.tags.length > 0 && (
                                <div className="picker-details-section">
                                    <div className="picker-details-label">Tags</div>
                                    <div className="picker-details-tags">
                                        {a.tags.map(t => <span key={t} className="picker-tag">{t}</span>)}
                                    </div>
                                </div>
                            )}
                            {a.source && <div className="picker-details-source">{a.source}</div>}
                        </>
                    )}
                    onPick={handlePick}
                    onClose={() => setPickerOpen(false)}
                />
            )}

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