/* ============================================================
   Career — Career View (Phase 8)
   
   Post-creation bookkeeping tab. Three sections:
     1. Stats ribbon — karma, nuyen, street cred, notoriety, PA
     2. Damage tracks (Physical + Stun) with +/- steppers
     3. Runs log (+add run)
     4. Advancements log (+log advancement)
     5. Reputation editor
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;

window.CareerView = function CareerView({ character, onChange }) {
    const C = SR5_CALC;
    const career = C.career(character);

    return (
        <>
            <ContentHeader title="11 / Career Log" heading="Post-creation bookkeeping" />
            <CareerRibbon character={character} onChange={onChange} />
            <DamageTracker character={character} onChange={onChange} />
            <ReputationPanel character={character} onChange={onChange} />
            <AdvancementsPanel character={character} onChange={onChange} />
            <RunsPanel character={character} onChange={onChange} />
            <div className="phase-note" style={{ marginTop: 20 }}>
                <strong>Phase 8.</strong> Career mode — adds run logs, karma ledger, advancement
                tracking, damage tracks, and reputation counters. Karma-cost helpers cover attributes
                (new×5), active skills (new×2), skill groups (new×5), knowledge/language (new×1),
                new skills (4), new groups (10), specializations (2), new knowledge (2). Street Cred
                is derived from earned karma (÷10) plus any manual bonuses.
            </div>
        </>
    );
};

/* ============================================================
   CareerRibbon — the top-of-page stats strip
   ============================================================ */
window.CareerRibbon = function CareerRibbon({ character, onChange }) {
    const C = SR5_CALC;
    const career = C.career(character);
    const karmaNow = C.karmaCurrent(character);
    const nuyen = C.nuyenLiquid(character);
    const cred = C.streetCred(character);

    return (
        <div className="career-ribbon">
            <div className="cr-stat">
                <div className="cr-lbl">Karma Earned</div>
                <div className="cr-val">{career.karmaEarned}</div>
                <div className="cr-hint">Lifetime total</div>
            </div>
            <div className="cr-stat">
                <div className="cr-lbl">Karma Spent</div>
                <div className="cr-val">{career.karmaSpent}</div>
                <div className="cr-hint">On advancements</div>
            </div>
            <div className="cr-stat primary">
                <div className="cr-lbl">Karma Available</div>
                <div className="cr-val accent">{karmaNow}</div>
                <div className="cr-hint">To spend</div>
            </div>
            <div className="cr-stat">
                <div className="cr-lbl">Nuyen Liquid</div>
                <div className="cr-val">{nuyen.toLocaleString()}¥</div>
                <div className="cr-hint">
                    {career.startingPlayNuyen ?
                        `Start ${career.startingPlayNuyen.toLocaleString()}¥ + earned − spent` :
                        'Earned − spent'}
                </div>
            </div>
            <div className="cr-stat">
                <div className="cr-lbl">Street Cred</div>
                <div className="cr-val">{cred}</div>
                <div className="cr-hint">Earned÷10 + bonus</div>
            </div>
            <div className="cr-stat">
                <div className="cr-lbl">Notoriety</div>
                <div className="cr-val" style={{ color: career.notoriety > 0 ? 'var(--bad)' : 'var(--text-muted)' }}>
                    {career.notoriety}
                </div>
                <div className="cr-hint">Bad rep</div>
            </div>
            <div className="cr-stat">
                <div className="cr-lbl">Public Awareness</div>
                <div className="cr-val">{career.publicAwareness}</div>
                <div className="cr-hint">Public rep</div>
            </div>
        </div>
    );
};

/* ============================================================
   DamageTracker — Physical + Stun tracks, +/- steppers, wound mod
   ============================================================ */
window.DamageTracker = function DamageTracker({ character, onChange }) {
    const C = SR5_CALC;
    const cm = C.conditionMonitor(character);
    const career = C.career(character);
    const phys = career.currentPhysicalDamage || 0;
    const stun = career.currentStunDamage || 0;
    const wound = C.woundModifier(character);

    function adjustDamage(kind, delta) {
        const current = kind === 'stun' ? stun : phys;
        const next = Math.max(0, current + delta);
        onChange(C.setDamage(character, kind, next));
    }

    function renderBoxes(filled, total, kind) {
        const boxes = [];
        for (let i = 0; i < total; i++) {
            const isFilled = i < filled;
            const isOverflow = i >= total;  /* not used since we cap display at total */
            boxes.push(
                <div key={i}
                     className={`dmg-box ${isFilled ? 'filled' : ''} ${kind === 'physical' ? 'phys' : 'stun'}`}
                     onClick={() => {
                         /* Click a box: if filled, unfill it back (down to this index);
                            if empty, fill up to this index inclusive. */
                         const newVal = isFilled ? i : i + 1;
                         onChange(C.setDamage(character, kind, newVal));
                     }}
                     title={`${isFilled ? 'filled' : 'empty'} — click to set ${kind} damage`}>
                </div>
            );
        }
        return <div className="dmg-boxes">{boxes}</div>;
    }

    return (
        <div className="card">
            <div className="card-header">
                <h3 className="card-title">Condition Monitor</h3>
                <div className="card-actions">
                    {wound > 0 && (
                        <span className="wound-badge">Wound modifier: <strong>−{wound}</strong></span>
                    )}
                </div>
            </div>
            <div className="card-body">
                <div className="dmg-track">
                    <div className="dmg-track-head">
                        <span className="dmg-label">Physical</span>
                        <span className="dmg-count mono">{phys} / {cm.physical}</span>
                        <div className="dmg-buttons">
                            <button className="btn btn-ghost btn-small" onClick={() => adjustDamage('physical', -1)}>−1</button>
                            <button className="btn btn-ghost btn-small" onClick={() => adjustDamage('physical', +1)}>+1</button>
                        </div>
                    </div>
                    {renderBoxes(phys, cm.physical, 'physical')}
                </div>
                <div className="dmg-track">
                    <div className="dmg-track-head">
                        <span className="dmg-label">Stun</span>
                        <span className="dmg-count mono">{stun} / {cm.stun}</span>
                        <div className="dmg-buttons">
                            <button className="btn btn-ghost btn-small" onClick={() => adjustDamage('stun', -1)}>−1</button>
                            <button className="btn btn-ghost btn-small" onClick={() => adjustDamage('stun', +1)}>+1</button>
                        </div>
                    </div>
                    {renderBoxes(stun, cm.stun, 'stun')}
                </div>
                <div className="dmg-hint muted" style={{ fontSize: 11, marginTop: 10, lineHeight: 1.5 }}>
                    Click any box to set damage to that level. Every 3 filled boxes on a track gives
                    −1 wound modifier to all tests. Stun damage overflows to Physical at 2:1 once the
                    Stun track fills. When Stun fills, you're unconscious. When Physical overflows by
                    more than your Body attribute, you're dead.
                </div>
            </div>
        </div>
    );
};

/* ============================================================
   ReputationPanel — editable notoriety + public awareness +
   street cred bonus
   ============================================================ */
window.ReputationPanel = function ReputationPanel({ character, onChange }) {
    const C = SR5_CALC;
    const career = C.career(character);

    function onAdjust(field, delta) {
        const cur = career[field] || 0;
        onChange(C.setReputation(character, field, Math.max(0, cur + delta)));
    }
    function onSet(field, value) {
        onChange(C.setReputation(character, field, value));
    }

    const fields = [
        { key: 'streetCredBonus',
          label: 'Street Cred bonus',
          hint: `Added to ${Math.floor(career.karmaEarned / 10)} derived from karma earned.`,
          tone: 'good' },
        { key: 'notoriety',
          label: 'Notoriety',
          hint: 'Bad reputation in the shadows. 2 Street Cred points can be traded to reduce by 1.',
          tone: 'bad' },
        { key: 'publicAwareness',
          label: 'Public Awareness',
          hint: 'How much the general public knows of you. 4 Street Cred points reduce by 1.',
          tone: 'neutral' },
    ];

    return (
        <div className="card">
            <div className="card-header">
                <h3 className="card-title">Reputation</h3>
            </div>
            <div className="card-body">
                <div className="rep-grid">
                    {fields.map(f => (
                        <div key={f.key} className="rep-row">
                            <div className="rep-label">{f.label}</div>
                            <div className="rep-controls">
                                <button className="btn btn-ghost btn-small" onClick={() => onAdjust(f.key, -1)}>−</button>
                                <input type="number"
                                       className="input-inline rep-input"
                                       min="0"
                                       value={career[f.key] || 0}
                                       onChange={e => onSet(f.key, parseInt(e.target.value, 10) || 0)} />
                                <button className="btn btn-ghost btn-small" onClick={() => onAdjust(f.key, +1)}>+</button>
                            </div>
                            <div className="rep-hint">{f.hint}</div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

/* ============================================================
   RunsPanel — run log with + Add dialog
   ============================================================ */
window.RunsPanel = function RunsPanel({ character, onChange }) {
    const C = SR5_CALC;
    const career = C.career(character);
    const runs = career.runs || [];
    const [addOpen, setAddOpen] = useState(false);

    function onAdd(payload) {
        onChange(C.addRun(character, payload));
        setAddOpen(false);
    }
    function onRemove(id) {
        if (confirm('Remove this run? Its karma and nuyen will be subtracted from your totals.')) {
            onChange(C.removeRun(character, id));
        }
    }

    return (
        <>
            <div className="card">
                <div className="card-header">
                    <h3 className="card-title">Runs</h3>
                    <div className="card-actions">
                        <span className="muted" style={{ fontSize: 12 }}>{runs.length} run{runs.length === 1 ? '' : 's'}</span>
                        <button className="btn btn-primary" onClick={() => setAddOpen(true)}>+ Log Run</button>
                    </div>
                </div>
                <div className="card-body" style={{ padding: 0 }}>
                    {runs.length === 0 ? (
                        <div className="spell-empty">
                            No runs yet. Each run logged here bumps your Karma Earned and Nuyen Liquid
                            totals. Delete a run to reverse its effect on the totals.
                        </div>
                    ) : (
                        <>
                            <div className="run-head">
                                <span>Date</span>
                                <span>Name</span>
                                <span>Karma</span>
                                <span>Nuyen</span>
                                <span>Notes</span>
                                <span></span>
                            </div>
                            {[...runs].reverse().map(r => (
                                <div key={r.id} className="run-row">
                                    <span className="run-date mono">{r.date}</span>
                                    <span className="run-name">{r.name}</span>
                                    <span className="run-karma mono">+{r.karma}</span>
                                    <span className="run-nuyen mono">+{r.nuyen.toLocaleString()}¥</span>
                                    <span className="run-notes muted">{r.notes}</span>
                                    <button className="btn-row-remove"
                                            onClick={() => onRemove(r.id)}
                                            title="Remove">×</button>
                                </div>
                            ))}
                        </>
                    )}
                </div>
            </div>
            {addOpen && <AddRunDialog
                character={character}
                onSubmit={onAdd}
                onClose={() => setAddOpen(false)} />}
        </>
    );
};

/* Add run dialog */
window.AddRunDialog = function AddRunDialog({ character, onSubmit, onClose }) {
    const C = SR5_CALC;
    const today = new Date().toISOString().slice(0, 10);
    const [date, setDate] = useState(today);
    const [name, setName] = useState('');
    const [karma, setKarma] = useState(5);
    const [nuyen, setNuyen] = useState(5000);
    const [notes, setNotes] = useState('');

    const willFinalize = character && C.isCreationMode(character);

    const footer = (
        <div className="footer-actions" style={{ width: '100%', justifyContent: 'flex-end' }}>
            <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
            <button className="btn btn-primary"
                    disabled={!name.trim()}
                    onClick={() => onSubmit({ date, name, karma, nuyen, notes })}>
                {willFinalize ? 'Log run & finalize character' : 'Log run'}
            </button>
        </div>
    );

    return (
        <Modal title="Log a Run" onClose={onClose} footer={footer}>
            <div style={{ padding: '20px 24px', width: '100%', overflowY: 'auto' }}>
                {willFinalize && (
                    <div className="finalize-warning">
                        <div className="fw-title">Heads up — this will finalize your character.</div>
                        <div className="fw-body">
                            Your character is still in <strong>creation mode</strong>. Logging a run
                            crosses the Rubicon: your creation tabs will become read-only and you
                            won't be able to return to creation mode. Cancel and use the
                            <strong> Creation Mode</strong> chip in the topbar if you want to
                            finalize explicitly, or continue to log and finalize in one step.
                        </div>
                    </div>
                )}
                <div style={{ display: 'grid', gridTemplateColumns: '130px 1fr', gap: 12 }}>
                    <FormRow label="Date">
                        <input type="date" className="input"
                               value={date} onChange={e => setDate(e.target.value)} />
                    </FormRow>
                    <FormRow label="Name">
                        <TextInput value={name} onChange={setName}
                                   placeholder="e.g. Aztechnology datasteal" maxLength={80} />
                    </FormRow>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                    <FormRow label="Karma earned">
                        <input type="number" className="input" min="0"
                               value={karma} onChange={e => setKarma(parseInt(e.target.value, 10) || 0)} />
                    </FormRow>
                    <FormRow label="Nuyen earned">
                        <input type="number" className="input" min="0" step="100"
                               value={nuyen} onChange={e => setNuyen(parseInt(e.target.value, 10) || 0)} />
                    </FormRow>
                </div>
                <FormRow label="Notes">
                    <TextArea value={notes} onChange={setNotes} rows={3}
                              placeholder="What happened, who was involved, consequences..." />
                </FormRow>
            </div>
        </Modal>
    );
};

/* ============================================================
   AdvancementsPanel — display-only log of committed advancements.
   
   Phase 9: this panel is now a read-only record. Entries are created
   automatically when the user commits pending changes on the creation
   tabs. The manual "+ Log Advancement" button + dialog that existed
   in Phase 8 is gone — advancement is driven from the tabs themselves.
   
   Users can still remove a log entry (which refunds karma) with a
   confirmation dialog — useful for correcting an accidentally-committed
   change.
   ============================================================ */
window.AdvancementsPanel = function AdvancementsPanel({ character, onChange }) {
    const C = SR5_CALC;
    const career = C.career(character);
    const adv = career.advancements || [];

    function onRemove(id) {
        if (confirm('Remove this advancement? Its karma cost will be refunded to your available pool. Note: this does not undo the stat change on your sheet — you may want to decrement the stat yourself.')) {
            onChange(C.removeAdvancement(character, id));
        }
    }

    const typeLabel = {
        attribute:      'Attribute',
        skill:          'Active skill',
        skill_group:    'Skill group',
        knowledge:      'Knowledge/Language',
        specialization: 'Specialization',
        quality:        'Quality',
        initiation:     'Initiation/Submersion',
        refund:         'Refund',
        other:          'Other',
    };

    return (
        <div className="card">
            <div className="card-header">
                <h3 className="card-title">Advancement Log</h3>
                <div className="card-actions">
                    <span className="muted" style={{ fontSize: 12 }}>{adv.length} entries</span>
                </div>
            </div>
            <div className="card-body" style={{ padding: 0 }}>
                {adv.length === 0 ? (
                    <div className="spell-empty">
                        Advancements made on the creation tabs (raising a skill, buying a spell, etc.)
                        will appear here automatically once committed. Each entry records what changed
                        and how much karma it cost.
                    </div>
                ) : (
                    <>
                        <div className="adv-head">
                            <span>Date</span>
                            <span>Type</span>
                            <span>Detail</span>
                            <span>Karma</span>
                            <span></span>
                        </div>
                        {[...adv].reverse().map(a => (
                            <div key={a.id} className={`adv-row adv-${a.type} ${a.pendingApproval ? 'adv-pending-approval' : ''}`}>
                                <span className="adv-date mono">{a.date}</span>
                                <span className="adv-type mono">{typeLabel[a.type] || a.type}</span>
                                <span className="adv-detail">
                                    {a.detail}
                                    {a.pendingApproval && (
                                        <span className="adv-approval-badge" title="This refund is pending GM approval">
                                            ⚠ pending approval
                                        </span>
                                    )}
                                </span>
                                <span className="adv-karma mono">
                                    {a.karmaCost >= 0 ? '−' : '+'}{Math.abs(a.karmaCost)}
                                </span>
                                <button className="btn-row-remove"
                                        onClick={() => onRemove(a.id)}
                                        title="Remove">×</button>
                            </div>
                        ))}
                    </>
                )}
            </div>
        </div>
    );
};