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


/* ============================================================
   PHASE 4c — Identity + Equipment tabs
   ============================================================ */

/* ------------------------------------------------------------
   IdentityTab — Fake SINs and Licenses editor.
   
   Unlike other equipment tabs, this isn't a catalog browse.
   SINs are just rating + name + optional description, with
   cost = Rating × 2,500¥ computed on the fly. Same pattern
   for licenses (cost = Rating × 200¥, optional SIN link).
   ------------------------------------------------------------ */
window.IdentityTab = function IdentityTab({ character, onChange }) {
    const C = SR5_CALC;
    const E = SR5_EQUIPMENT;
    const sins = C.characterSINs(character);
    const licenses = C.characterLicenses(character);

    const inCareer = C.isCareerMode(character);
    const pendingSINs = inCareer ? window.CareerGear.pendingOfKind(character, 'sin') : [];
    const pendingLicenses = inCareer ? window.CareerGear.pendingOfKind(character, 'license') : [];

    function addBlankSIN() {
        if (inCareer) {
            const ratingStr = prompt("Fake SIN rating (1-6)?", "4");
            const rating = Math.max(1, Math.min(6, parseInt(ratingStr, 10) || 4));
            const cost = rating * 2500;
            if (!window.CareerGear.canAfford(character, cost)) {
                alert(`Not enough nuyen: a rating-${rating} SIN costs ${cost.toLocaleString()}¥.`);
                return;
            }
            const name = prompt("SIN name (optional)?", "") || '';
            onChange(C.stagePendingGear(character, {
                kind: 'sin',
                name: name.trim() || `Fake SIN R${rating}`,
                nuyenCost: cost,
                extras: { rating, name: name.trim(), nuyen: cost },
            }));
        } else {
            onChange(C.addSIN(character, { rating: 4 }));
        }
    }
    function addBlankLicense() {
        if (inCareer) {
            const ratingStr = prompt("License rating (1-6)?", "4");
            const rating = Math.max(1, Math.min(6, parseInt(ratingStr, 10) || 4));
            const cost = rating * 200;
            if (!window.CareerGear.canAfford(character, cost)) {
                alert(`Not enough nuyen: a rating-${rating} license costs ${cost.toLocaleString()}¥.`);
                return;
            }
            const name = prompt("License for (e.g. Firearms, Cyberware)?", "");
            if (!name) return;
            onChange(C.stagePendingGear(character, {
                kind: 'license',
                name: name.trim() || `Fake License R${rating}`,
                nuyenCost: cost,
                extras: { rating, name: name.trim(), sinId: sins[0]?.id || null, nuyen: cost },
            }));
        } else {
            onChange(C.addLicense(character, { rating: 4, sinId: sins[0]?.id || null }));
        }
    }

    function onUpdateSIN(id, patch) {
        if (inCareer) return;
        onChange(C.updateSIN(character, id, patch));
    }
    function onUpdateLicense(id, patch) {
        if (inCareer) return;
        onChange(C.updateLicense(character, id, patch));
    }
    function onRemoveSIN(id) {
        if (inCareer) { alert("Fake SIN burned/lost? Log it in the career log."); return; }
        onChange(C.removeSIN(character, id));
    }
    function onRemoveLicense(id) {
        if (inCareer) { alert("License burned/lost? Log it in the career log."); return; }
        onChange(C.removeLicense(character, id));
    }
    function onUnstage(tempId) {
        onChange(C.unstagePendingGear(character, tempId));
    }

    return (
        <>
            <div className="identity-actions">
                <button className="btn btn-primary" onClick={addBlankSIN}>+ Add Fake SIN</button>
                <button className="btn btn-ghost" onClick={addBlankLicense}>+ Add Fake License</button>
            </div>

            {/* SINs group */}
            <div className="identity-group">
                <div className="identity-group-header">
                    <span>System Identification Numbers</span>
                    <span className="ig-hint">Rating × 2,500¥ · Availability: Rating × 3 Forbidden</span>
                </div>
                {sins.length === 0 && pendingSINs.length === 0 ? (
                    <div className="equip-empty">No fake SINs. Every runner needs one to function in the Sixth World.</div>
                ) : (
                    <>
                        <div className="identity-head">
                            <span>Name / Identity</span>
                            <span>Rating</span>
                            <span>Avail</span>
                            <span>Notes</span>
                            <span style={{ textAlign: 'right' }}>Cost</span>
                            <span></span>
                        </div>
                        {sins.map(sin => {
                            const isBlank = !(sin.name || '').trim();
                            return (
                                <div key={sin.id} className="sin-row">
                                    <div className="sin-name-cell">
                                        <input type="text"
                                               value={sin.name}
                                               disabled={inCareer}
                                               placeholder={`SIN (R${sin.rating})`}
                                               onChange={e => onUpdateSIN(sin.id, { name: e.target.value })} />
                                        {isBlank && (
                                            <span className="sin-auto-label muted" title="Auto-generated label based on current rating">
                                                → {C.sinDisplayName(sin)}
                                            </span>
                                        )}
                                    </div>
                                    <div className="sin-rating">
                                        <input type="number" min="1" max="6"
                                               className="rating-num-input"
                                               disabled={inCareer}
                                               value={sin.rating}
                                               onChange={e => onUpdateSIN(sin.id, { rating: e.target.value })} />
                                    </div>
                                    <div className="sin-stat">{E.sinAvail(sin.rating)}</div>
                                    <input type="text"
                                           value={sin.notes || ''}
                                           disabled={inCareer}
                                           placeholder="Optional…"
                                           onChange={e => onUpdateSIN(sin.id, { notes: e.target.value })} />
                                    <div className="sin-stat cost">{sin.nuyen.toLocaleString()}¥</div>
                                    <button className="btn-row-remove"
                                            onClick={() => onRemoveSIN(sin.id)}
                                            title={inCareer ? "Use career log" : "Remove"}>×</button>
                                    <div className="sin-desc">{E.SIN_RATING_DESCRIPTIONS[sin.rating] || ''}</div>
                                </div>
                            );
                        })}
                        {pendingSINs.map(pg => (
                            <div key={pg.tempId} className="sin-row pending-new">
                                <div className="sin-name-cell">
                                    <span>{pg.extras?.name || `Fake SIN R${pg.extras?.rating}`}</span>
                                    <span className="gear-pending-tag">pending</span>
                                </div>
                                <div className="sin-rating">{pg.extras?.rating || '—'}</div>
                                <div className="sin-stat">{E.sinAvail(pg.extras?.rating || 1)}</div>
                                <div className="muted mono" style={{ fontSize: 11 }}>—</div>
                                <div className="sin-stat cost" style={{ color: 'var(--accent)' }}>{(pg.nuyenCost || 0).toLocaleString()}¥</div>
                                <button className="btn-row-remove"
                                        onClick={() => onUnstage(pg.tempId)}
                                        title="Discard pending">×</button>
                            </div>
                        ))}
                    </>
                )}
            </div>

            {/* Licenses group */}
            <div className="identity-group">
                <div className="identity-group-header">
                    <span>Fake Licenses / Permits</span>
                    <span className="ig-hint">Rating × 200¥ · Availability: Rating × 3 Forbidden</span>
                </div>
                {licenses.length === 0 && pendingLicenses.length === 0 ? (
                    <div className="equip-empty">No fake licenses. Add one for each type of restricted gear you'll be carrying (firearms, cyberware, magical services…).</div>
                ) : (
                    <>
                        <div className="identity-head">
                            <span>License For</span>
                            <span>Rating</span>
                            <span>Avail</span>
                            <span>Linked SIN</span>
                            <span style={{ textAlign: 'right' }}>Cost</span>
                            <span></span>
                        </div>
                        {licenses.map(lic => {
                            const isBlank = !(lic.name || '').trim();
                            return (
                                <div key={lic.id} className="license-row">
                                    <div className="sin-name-cell">
                                        <input type="text"
                                               value={lic.name}
                                               disabled={inCareer}
                                               placeholder="e.g. Firearms"
                                               list={`lic-sugg-${lic.id}`}
                                               onChange={e => onUpdateLicense(lic.id, { name: e.target.value })} />
                                        {isBlank && (
                                            <span className="sin-auto-label muted" title="Auto-generated label based on current rating">
                                                → {C.licenseDisplayName(lic)}
                                            </span>
                                        )}
                                    </div>
                                    <datalist id={`lic-sugg-${lic.id}`}>
                                        {E.LICENSE_SUGGESTIONS.map(s => <option key={s} value={s} />)}
                                    </datalist>
                                    <div className="lic-rating">
                                        <input type="number" min="1" max="6"
                                               className="rating-num-input"
                                               disabled={inCareer}
                                               value={lic.rating}
                                               onChange={e => onUpdateLicense(lic.id, { rating: e.target.value })} />
                                    </div>
                                    <div className="lic-stat">{E.licenseAvail(lic.rating)}</div>
                                    <select value={lic.sinId || ''}
                                            disabled={inCareer}
                                            onChange={e => onUpdateLicense(lic.id, { sinId: e.target.value || null })}>
                                        <option value="">(unlinked)</option>
                                        {sins.map(s => (
                                            <option key={s.id} value={s.id}>{C.sinDisplayName(s)}</option>
                                        ))}
                                    </select>
                                    <div className="lic-stat cost">{lic.nuyen.toLocaleString()}¥</div>
                                    <button className="btn-row-remove"
                                            onClick={() => onRemoveLicense(lic.id)}
                                            title={inCareer ? "Use career log" : "Remove"}>×</button>
                                </div>
                            );
                        })}
                        {pendingLicenses.map(pg => (
                            <div key={pg.tempId} className="license-row pending-new">
                                <div className="sin-name-cell">
                                    <span>{pg.extras?.name || `License R${pg.extras?.rating}`}</span>
                                    <span className="gear-pending-tag">pending</span>
                                </div>
                                <div className="lic-rating">{pg.extras?.rating || '—'}</div>
                                <div className="lic-stat">{E.licenseAvail(pg.extras?.rating || 1)}</div>
                                <div className="muted mono" style={{ fontSize: 11 }}>—</div>
                                <div className="lic-stat cost" style={{ color: 'var(--accent)' }}>{(pg.nuyenCost || 0).toLocaleString()}¥</div>
                                <button className="btn-row-remove"
                                        onClick={() => onUnstage(pg.tempId)}
                                        title="Discard pending">×</button>
                            </div>
                        ))}
                    </>
                )}
            </div>

            <div className="identity-note">
                <strong>Rule summary:</strong> Each fake SIN costs Rating × 2,500¥ with availability Rating × 3F.
                Higher-rated SINs pass more thorough scans. Licenses (Rating × 200¥) are usually attached to a specific SIN
                and cover one category of restricted gear. If a SIN is removed, linked licenses stay as "unlinked" rather than
                being auto-deleted.
            </div>
        </>
    );
};