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


/* ------------------------------------------------------------
   Character header ribbon. Always visible at the top of a loaded
   character, shows the essentials at a glance.
   ------------------------------------------------------------ */
window.CharacterHeader = function CharacterHeader({ character }) {
    const C = SR5_CALC;
    const name = character?.identity?.name?.trim();
    const metatypeKey = character?.identity?.metatype;
    const metatype = metatypeKey ? SR5_DATA.METATYPES[metatypeKey]?.name : null;

    const inCareer = C.isCareerMode(character);

    /* Live stats — pulled from the calc module so they update as the user edits. */
    const derived = C.derivedStats(character);
    const initiative = derived.find(d => d.key === 'initiative');

    /* Creation-mode budgets (hidden in career mode) */
    const attrTotal = C.attributePointsTotal(character);
    const attrSpent = C.attributePointsSpent(character);
    const skillTotal = C.skillPointsTotal(character);
    const skillSpent = C.skillPointsSpent(character);
    const groupTotal = C.skillGroupPointsTotal(character);
    const groupSpent = C.skillGroupPointsSpent(character);
    const knowTotal = C.knowledgePointsTotal(character);
    const knowSpent = C.knowledgePointsSpent(character);

    /* Career-mode stats */
    const karmaAvailable = inCareer ? C.karmaCurrent(character) : 0;
    const liquidNuyen = inCareer ? C.nuyenLiquid(character) : 0;
    const pendingKarma = inCareer ? C.pendingKarmaDelta(character) : 0;
    const pendingNuyen = inCareer ? C.pendingNuyenDelta(character) : 0;
    const streetCred = inCareer ? C.streetCred(character) : 0;
    const careerData = inCareer ? C.career(character) : null;
    const physDamage = careerData?.currentPhysicalDamage || 0;
    const stunDamage = careerData?.currentStunDamage || 0;
    const cm = inCareer ? C.conditionMonitor(character) : { physical: 0, stun: 0 };
    const physMax = cm.physical;
    const stunMax = cm.stun;

    /* Creation starting nuyen (hidden in career mode) */
    const startingNuyen = C.startingNuyen(character);

    return (
        <div className="char-header">
            <div className="char-header-identity">
                <h1>{name || <span className="nameless">unnamed runner</span>}</h1>
                <div className="meta">
                    <span>meta:</span> <strong>{metatype || '—'}</strong>
                    {character?.identity?.streetName && <> &nbsp;·&nbsp; <span>alias:</span> <strong>{character.identity.streetName}</strong></>}
                </div>
            </div>
            <div className="char-header-stats">
                {/* ============ CAREER MODE PIPS ============ */}
                {inCareer && (
                    <>
                        <div className="stat-pip">
                            <div className="stat-pip-label">Karma</div>
                            <div className="stat-pip-value" title={pendingKarma > 0
                                ? `Karma available: ${karmaAvailable} (pending spend ${pendingKarma})`
                                : "Karma available to spend (earned − spent)"}>
                                {karmaAvailable}
                                {pendingKarma > 0 && (
                                    <span style={{ color: 'var(--accent)', fontSize: 12, marginLeft: 4 }}>
                                        → {karmaAvailable - pendingKarma}
                                    </span>
                                )}
                            </div>
                        </div>
                        <div className="stat-pip">
                            <div className="stat-pip-label">Nuyen</div>
                            <div className="stat-pip-value" title={pendingNuyen > 0
                                ? `Liquid nuyen: ${liquidNuyen.toLocaleString()}¥ (pending spend ${pendingNuyen.toLocaleString()}¥)`
                                : "Liquid nuyen (earned − spent on gear)"}>
                                {liquidNuyen.toLocaleString()}¥
                                {pendingNuyen > 0 && (
                                    <span style={{ color: 'var(--accent)', fontSize: 12, marginLeft: 4 }}>
                                        → {(liquidNuyen - pendingNuyen).toLocaleString()}¥
                                    </span>
                                )}
                            </div>
                        </div>
                        <div className="stat-pip">
                            <div className="stat-pip-label">Street Cred</div>
                            <div className="stat-pip-value">{streetCred}</div>
                        </div>
                        <div className="stat-pip">
                            <div className="stat-pip-label">Physical</div>
                            <div className="stat-pip-value" style={{
                                color: physDamage >= physMax ? 'var(--bad)'
                                     : physDamage > physMax * 0.6 ? 'var(--warn)'
                                     : 'var(--text-primary)',
                            }} title="Current physical damage / track maximum">
                                {physDamage}<span className="muted" style={{ fontSize: 12 }}>/{physMax}</span>
                            </div>
                        </div>
                        <div className="stat-pip">
                            <div className="stat-pip-label">Stun</div>
                            <div className="stat-pip-value" style={{
                                color: stunDamage >= stunMax ? 'var(--bad)'
                                     : stunDamage > stunMax * 0.6 ? 'var(--warn)'
                                     : 'var(--text-primary)',
                            }} title="Current stun damage / track maximum">
                                {stunDamage}<span className="muted" style={{ fontSize: 12 }}>/{stunMax}</span>
                            </div>
                        </div>
                    </>
                )}
                {/* ============ CREATION MODE PIPS ============ */}
                {!inCareer && (() => {
                    const kt = C.karmaTotals(character);
                    /* Effective pool = starting + karma gained from negative qualities.
                       We show "remaining / pool" so the denominator reflects what you
                       actually have to spend after negative qualities (not a fixed 25). */
                    const pool = kt.starting + kt.negative;
                    const karmaClass = kt.remaining < 0 ? 'var(--bad)'
                                     : kt.remaining === 0 ? 'var(--good)'
                                     : 'var(--text-primary)';
                    return (
                    <>
                        <div className="stat-pip">
                            <div className="stat-pip-label">Karma</div>
                            <div className="stat-pip-value" style={{ color: karmaClass }}
                                 title={[
                                     `Starting: ${kt.starting} karma`,
                                     kt.negative > 0 ? `Gained from negative qualities: +${kt.negative}` : null,
                                     kt.negative > 0 ? `Effective pool: ${pool}` : null,
                                     kt.positive > 0 ? `Spent on positive qualities: −${kt.positive}` : null,
                                     kt.mysticAdeptPP > 0 ? `Spent on mystic adept PP: −${kt.mysticAdeptPP}` : null,
                                     kt.bondedFoci > 0 ? `Spent on bonded foci: −${kt.bondedFoci}` : null,
                                     kt.karmaToNuyen > 0 ? `Traded for nuyen: −${kt.karmaToNuyen}` : null,
                                     kt.attributes > 0 ? `Spent on attributes over budget: −${kt.attributes}` : null,
                                     kt.skills > 0 ? `Spent on skills over budget: −${kt.skills}` : null,
                                     kt.skillGroups > 0 ? `Spent on skill groups over budget: −${kt.skillGroups}` : null,
                                     kt.knowledge > 0 ? `Spent on knowledge over budget: −${kt.knowledge}` : null,
                                     kt.extraSpells > 0 ? `Spent on extra spells: −${kt.extraSpells}` : null,
                                     kt.extraForms > 0 ? `Spent on extra complex forms: −${kt.extraForms}` : null,
                                     kt.boundSpirits > 0 ? `Spent on bound spirits: −${kt.boundSpirits}` : null,
                                     kt.registeredSprites > 0 ? `Spent on registered sprites: −${kt.registeredSprites}` : null,
                                     kt.contacts > 0 ? `Spent on contacts over CHA×3: −${kt.contacts}` : null,
                                     '',
                                     `Remaining: ${kt.remaining} karma`,
                                 ].filter(x => x !== null).join('\n')}>
                                {Math.max(0, kt.remaining)}<span className="muted" style={{ fontSize: 12 }}>/{pool}</span>
                                {kt.remaining < 0 && (
                                    <span style={{ color: 'var(--bad)', fontSize: 12, marginLeft: 4 }}>
                                        ⚠ over by {Math.abs(kt.remaining)}
                                    </span>
                                )}
                            </div>
                        </div>
                        <div className="stat-pip">
                            <div className="stat-pip-label">Nuyen</div>
                            <div className="stat-pip-value">{startingNuyen > 0 ? `${startingNuyen.toLocaleString()}¥` : '—'}</div>
                        </div>
                        {attrTotal > 0 && (
                            <div className="stat-pip">
                                <div className="stat-pip-label">Attr Pts</div>
                                <div className="stat-pip-value" style={{
                                    color: attrSpent === attrTotal ? 'var(--good)'
                                         : attrSpent > attrTotal ? 'var(--bad)'
                                         : 'var(--text-primary)',
                                }}>{attrSpent}<span className="muted" style={{ fontSize: 12 }}>/{attrTotal}</span></div>
                            </div>
                        )}
                        {skillTotal > 0 && (
                            <div className="stat-pip">
                                <div className="stat-pip-label">Skill Pts</div>
                                <div className="stat-pip-value" style={{
                                    color: skillSpent === skillTotal ? 'var(--good)'
                                         : skillSpent > skillTotal ? 'var(--bad)'
                                         : 'var(--text-primary)',
                                }}>{skillSpent}<span className="muted" style={{ fontSize: 12 }}>/{skillTotal}</span></div>
                            </div>
                        )}
                        {groupTotal > 0 && (
                            <div className="stat-pip">
                                <div className="stat-pip-label">Grp Pts</div>
                                <div className="stat-pip-value" style={{
                                    color: groupSpent === groupTotal ? 'var(--good)'
                                         : groupSpent > groupTotal ? 'var(--bad)'
                                         : 'var(--text-primary)',
                                }}>{groupSpent}<span className="muted" style={{ fontSize: 12 }}>/{groupTotal}</span></div>
                            </div>
                        )}
                        {knowTotal > 0 && (
                            <div className="stat-pip">
                                <div className="stat-pip-label">Know Pts</div>
                                <div className="stat-pip-value" style={{
                                    color: knowSpent === knowTotal ? 'var(--good)'
                                         : knowSpent > knowTotal ? 'var(--bad)'
                                         : 'var(--text-primary)',
                                }}>{knowSpent}<span className="muted" style={{ fontSize: 12 }}>/{knowTotal}</span></div>
                            </div>
                        )}
                        {C.spellSlotsTotal(character) > 0 && (
                            <div className="stat-pip">
                                <div className="stat-pip-label">Spells</div>
                                <div className="stat-pip-value" style={{
                                    color: C.spellSlotsUsed(character) > C.spellSlotsTotal(character) ? 'var(--bad)'
                                         : C.spellSlotsUsed(character) === C.spellSlotsTotal(character) ? 'var(--good)'
                                         : 'var(--text-primary)',
                                }}>
                                    {C.spellSlotsUsed(character)}<span className="muted" style={{ fontSize: 12 }}>/{C.spellSlotsTotal(character)}</span>
                                </div>
                            </div>
                        )}
                        {C.powerPointsTotal(character) > 0 && (
                            <div className="stat-pip">
                                <div className="stat-pip-label">Power Pts</div>
                                <div className="stat-pip-value" style={{
                                    color: C.powerPointsSpent(character) > C.powerPointsTotal(character) ? 'var(--bad)'
                                         : C.powerPointsSpent(character) === C.powerPointsTotal(character) ? 'var(--good)'
                                         : 'var(--text-primary)',
                                }}>
                                    {C.powerPointsSpent(character).toFixed(2)}<span className="muted" style={{ fontSize: 12 }}>/{C.powerPointsTotal(character).toFixed(2)}</span>
                                </div>
                            </div>
                        )}
                        {C.complexFormSlotsTotal(character) > 0 && (
                            <div className="stat-pip">
                                <div className="stat-pip-label">Forms</div>
                                <div className="stat-pip-value" style={{
                                    color: C.complexFormSlotsUsed(character) > C.complexFormSlotsTotal(character) ? 'var(--bad)'
                                         : C.complexFormSlotsUsed(character) === C.complexFormSlotsTotal(character) ? 'var(--good)'
                                         : 'var(--text-primary)',
                                }}>
                                    {C.complexFormSlotsUsed(character)}<span className="muted" style={{ fontSize: 12 }}>/{C.complexFormSlotsTotal(character)}</span>
                                </div>
                            </div>
                        )}
                    </>
                );
                })()}
                {/* ============ ALWAYS-SHOWN PIPS ============ */}
                <div className="stat-pip">
                    <div className="stat-pip-label">Initiative</div>
                    <div className="stat-pip-value">{initiative?.value ?? '—'} <span className="muted" style={{ fontSize: 10 }}>+1D6</span></div>
                </div>
                {(C.essenceSpent(character) > 0) && (
                    <div className="stat-pip">
                        <div className="stat-pip-label">Essence</div>
                        <div className="stat-pip-value" style={{
                            color: C.currentEssence(character) <= 1.0 ? 'var(--bad)'
                                 : C.currentEssence(character) <= 3.0 ? 'var(--warn)'
                                 : 'var(--text-primary)',
                        }}>{C.currentEssence(character).toFixed(2)}</div>
                    </div>
                )}
            </div>
        </div>
    );
};