/* ============================================================
   Creation Summary View (Phase 19)

   Read-only "here's what you built" view — the last stop before
   finalize. Surfaces every major creation decision in one place
   so the player can catch mistakes before committing.

   Intended usage:
   - During creation: final sanity check before Finalize
   - Post-finalize: quick "what did I start with" reference

   Sections (in display order):
   1. Identity + Priorities + Metatype
   2. Attributes summary (phys + mental + special)
   3. Skills + specializations + knowledge
   4. Qualities
   5. Magic / Matrix / Rigging (shown only if relevant)
   6. Gear highlights
   7. Lifestyle
   8. Contacts
   9. Finalize checklist (final)
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;

window.CreationSummaryView = function CreationSummaryView({ character, onChange }) {
    const D = SR5_DATA;
    const C = SR5_CALC;
    const Q = SR5_QUALITIES;
    const M = SR5_MAGIC;

    const inCareer = C.isCareerMode(character);
    const metatypeKey = character?.identity?.metatype;
    const metatype = metatypeKey ? D.METATYPES[metatypeKey] : null;
    const priorities = character?.priorities || {};
    const kt = C.karmaTotals(character);
    const magicType = C.priorityRow(character, 'magic')?.type;
    const isMagician = ['magician', 'mystic_adept', 'adept', 'aspected'].includes(magicType);
    const isTechno = magicType === 'technomancer';

    const qualities = C.characterQualities(character);
    const positive = qualities.filter(q => q.type === 'positive');
    const negative = qualities.filter(q => q.type === 'negative');
    const contacts = C.characterContacts(character);
    const checklist = C.finalizeChecklist(character);
    const blockCount = checklist.filter(i => i.severity === 'block').length;
    const warnCount = checklist.filter(i => i.severity === 'warn').length;

    return (
        <>
            <ContentHeader
                title="12 / Summary"
                heading="What you built"
                right={!inCareer && (
                    <span className="mono muted" style={{ fontSize: 11 }}>
                        read-only snapshot · edit on other tabs
                    </span>
                )}
            />

            {/* Top-level status banner */}
            <div className={`summary-status-banner ${
                blockCount > 0 ? 'block' : warnCount > 0 ? 'warn' : 'ok'
            }`}>
                <div className="ssb-icon">
                    {blockCount > 0 ? '✗' : warnCount > 0 ? '!' : '✓'}
                </div>
                <div className="ssb-body">
                    <div className="ssb-title">
                        {blockCount > 0 ? `${blockCount} ${blockCount === 1 ? 'block' : 'blocks'} remaining`
                         : warnCount > 0 ? `${warnCount} ${warnCount === 1 ? 'warning' : 'warnings'} to review`
                         : 'Ready to finalize'}
                    </div>
                    <div className="ssb-detail">
                        {blockCount > 0
                            ? 'Fix blockers before finalizing — see checklist at bottom.'
                            : warnCount > 0
                            ? 'Optional nudges only. Scroll to see details.'
                            : 'Everything checks out. Head to the header → Finalize.'}
                    </div>
                </div>
            </div>

            {/* Identity + metatype + priorities */}
            <section className="summary-section">
                <h3 className="summary-h">Identity</h3>
                <div className="summary-grid-2">
                    <div className="summary-field">
                        <div className="summary-label">Name</div>
                        <div className="summary-value">{character?.identity?.name || <em className="muted">unnamed</em>}</div>
                    </div>
                    <div className="summary-field">
                        <div className="summary-label">Alias</div>
                        <div className="summary-value">{character?.identity?.alias || <em className="muted">—</em>}</div>
                    </div>
                    <div className="summary-field">
                        <div className="summary-label">Metatype</div>
                        <div className="summary-value">{metatype?.name || <em className="muted">not chosen</em>}</div>
                    </div>
                    <div className="summary-field">
                        <div className="summary-label">Priorities</div>
                        <div className="summary-value mono">
                            {['A','B','C','D','E'].map(l => (
                                <span key={l} style={{ marginRight: 10 }}>
                                    <strong>{l}</strong>={priorities[l] || <em className="muted">·</em>}
                                </span>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            {/* Attributes */}
            <section className="summary-section">
                <h3 className="summary-h">Attributes</h3>
                <div className="summary-attr-grid">
                    {D.ATTRIBUTES.map(a => {
                        const [, max] = C.getAttributeRange(character, a.key);
                        const v = C.attributeValue(character, a.key);
                        const bonus = C.attributeMaxBonus(character, a.key);
                        return (
                            <div key={a.key} className="summary-attr">
                                <div className="sa-abbr">{a.abbr}</div>
                                <div className="sa-value">{v}<span className="muted">/{max}</span></div>
                                {bonus > 0 && <div className="sa-bonus mono">+{bonus} excp</div>}
                            </div>
                        );
                    })}
                    {D.SPECIAL_ATTRIBUTES.filter(sa =>
                        sa.key === 'edg' ||
                        (sa.key === 'mag' && isMagician) ||
                        (sa.key === 'res' && isTechno)
                    ).map(sa => {
                        const v = C.specialAttributeValue(character, sa.key);
                        const bonus = sa.key === 'edg' ? C.specialAttributeMaxBonus(character, 'edg') : 0;
                        return (
                            <div key={sa.key} className="summary-attr special">
                                <div className="sa-abbr">{sa.abbr}</div>
                                <div className="sa-value">{v}</div>
                                {bonus > 0 && <div className="sa-bonus mono">+{bonus} lucky</div>}
                            </div>
                        );
                    })}
                </div>
            </section>

            {/* Skills */}
            <section className="summary-section">
                <h3 className="summary-h">Skills</h3>
                {(() => {
                    const skills = character?.skills || {};
                    const groups = character?.skillGroups || {};
                    const specs = character?.specializations || {};
                    const skillEntries = Object.entries(skills).sort((a, b) => a[0].localeCompare(b[0]));
                    const groupEntries = Object.entries(groups).sort((a, b) => a[0].localeCompare(b[0]));
                    const knowledge = C.knowledgeSkills(character);
                    if (skillEntries.length + groupEntries.length + knowledge.length === 0) {
                        return <div className="muted" style={{ fontSize: 12 }}>No skills trained yet.</div>;
                    }
                    return (
                        <>
                            {groupEntries.length > 0 && (
                                <div className="summary-skill-group">
                                    <div className="summary-sgl">Skill Groups</div>
                                    {groupEntries.map(([k, r]) => {
                                        const grp = D.SKILL_GROUPS.find(g => g.key === k);
                                        return (
                                            <div key={k} className="summary-skill-row">
                                                <span>{grp?.label || k}</span>
                                                <span className="mono accent">{r}</span>
                                            </div>
                                        );
                                    })}
                                </div>
                            )}
                            {skillEntries.length > 0 && (
                                <div className="summary-skill-group">
                                    <div className="summary-sgl">Active Skills</div>
                                    {skillEntries.map(([k, r]) => {
                                        const sk = D.ACTIVE_SKILLS.find(s => s.key === k);
                                        const spec = specs[k];
                                        const cap = C.skillMaxRating(character, k);
                                        return (
                                            <div key={k} className="summary-skill-row">
                                                <span>
                                                    {sk?.label || k}
                                                    {spec && <span className="muted"> ({spec})</span>}
                                                    {cap > 6 && <span className="accent" style={{ marginLeft: 6, fontSize: 10 }}>apt</span>}
                                                </span>
                                                <span className="mono accent">{r}</span>
                                            </div>
                                        );
                                    })}
                                </div>
                            )}
                            {knowledge.length > 0 && (
                                <div className="summary-skill-group">
                                    <div className="summary-sgl">Knowledge / Languages</div>
                                    {knowledge.map(k => (
                                        <div key={k.id} className="summary-skill-row">
                                            <span>
                                                {k.name || <em className="muted">unnamed</em>}
                                                <span className="muted"> ({k.category})</span>
                                            </span>
                                            <span className="mono accent">{k.native ? 'N' : k.rating}</span>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </>
                    );
                })()}
            </section>

            {/* Qualities */}
            {(positive.length > 0 || negative.length > 0) && (
                <section className="summary-section">
                    <h3 className="summary-h">Qualities</h3>
                    <div className="summary-grid-2">
                        <div>
                            <div className="summary-sgl">Positive</div>
                            {positive.length === 0 && <div className="muted" style={{ fontSize: 12 }}>none</div>}
                            {positive.map(q => {
                                const tpl = q.key ? (Q.POSITIVE.find(t => t.key === q.key)) : null;
                                let selectionLabel = '';
                                if (q.selection && tpl?.needsSelection) {
                                    if (tpl.needsSelection.kind === 'attribute') {
                                        selectionLabel = D.ATTRIBUTES.find(a => a.key === q.selection)?.label || q.selection;
                                    } else if (tpl.needsSelection.kind === 'skill') {
                                        selectionLabel = D.ACTIVE_SKILLS.find(s => s.key === q.selection)?.label || q.selection;
                                    } else if (tpl.needsSelection.kind === 'mentorSpirit') {
                                        selectionLabel = M.findMentorSpirit(q.selection)?.name || q.selection;
                                    }
                                }
                                return (
                                    <div key={q.id} className="summary-qual positive">
                                        <span>
                                            {q.name}
                                            {q.ranks && q.ranks > 1 && <span className="muted"> ×{q.ranks}</span>}
                                            {selectionLabel && <span className="accent" style={{ marginLeft: 6, fontSize: 11 }}>({selectionLabel})</span>}
                                        </span>
                                        <span className="mono">{q.karma}k</span>
                                    </div>
                                );
                            })}
                        </div>
                        <div>
                            <div className="summary-sgl">Negative</div>
                            {negative.length === 0 && <div className="muted" style={{ fontSize: 12 }}>none</div>}
                            {negative.map(q => (
                                <div key={q.id} className="summary-qual negative">
                                    <span>
                                        {q.name}
                                        {q.ranks && q.ranks > 1 && <span className="muted"> ×{q.ranks}</span>}
                                    </span>
                                    <span className="mono">+{q.karma}k</span>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
            )}

            {/* Magic / Resonance */}
            {(isMagician || isTechno) && (
                <section className="summary-section">
                    <h3 className="summary-h">{isTechno ? 'Resonance' : 'Magic'}</h3>
                    {isMagician && (
                        <>
                            <div className="summary-grid-2">
                                <div className="summary-field">
                                    <div className="summary-label">Tradition</div>
                                    <div className="summary-value">
                                        {M.findTradition(C.characterTradition(character))?.name
                                         || <em className="muted">not chosen</em>}
                                    </div>
                                </div>
                                <div className="summary-field">
                                    <div className="summary-label">Spells</div>
                                    <div className="summary-value">
                                        {C.spellSlotsUsed(character)} / {C.spellSlotsTotal(character)}
                                    </div>
                                </div>
                            </div>
                            {C.characterBoundSpirits(character).length > 0 && (
                                <div className="summary-skill-group">
                                    <div className="summary-sgl">Bound Spirits</div>
                                    {C.characterBoundSpirits(character).map(sp => (
                                        <div key={sp.id} className="summary-skill-row">
                                            <span>{sp.type} (Force {sp.force})</span>
                                            <span className="mono accent">{sp.services} svc</span>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </>
                    )}
                    {isTechno && (
                        <>
                            <div className="summary-grid-2">
                                <div className="summary-field">
                                    <div className="summary-label">Complex Forms</div>
                                    <div className="summary-value">
                                        {C.complexFormSlotsUsed(character)} / {C.complexFormSlotsTotal(character)}
                                    </div>
                                </div>
                            </div>
                            {C.characterRegisteredSprites(character).length > 0 && (
                                <div className="summary-skill-group">
                                    <div className="summary-sgl">Registered Sprites</div>
                                    {C.characterRegisteredSprites(character).map(sp => (
                                        <div key={sp.id} className="summary-skill-row">
                                            <span>{sp.type} (Level {sp.level})</span>
                                            <span className="mono accent">{sp.tasks} task</span>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </>
                    )}
                </section>
            )}

            {/* Gear summary — counts per category */}
            <section className="summary-section">
                <h3 className="summary-h">Gear</h3>
                {(() => {
                    const gear = character?.gear || {};
                    const cats = [
                        ['weapons', 'Weapons'],
                        ['armor', 'Armor'],
                        ['cyberware', 'Cyberware'],
                        ['bioware', 'Bioware'],
                        ['electronics', 'Electronics'],
                        ['security', 'Security'],
                        ['medical', 'Medical'],
                        ['misc', 'Misc'],
                        ['vehicles', 'Vehicles'],
                        ['drones', 'Drones'],
                    ];
                    const nonEmpty = cats.filter(([k]) => (gear[k] || []).length > 0);
                    if (nonEmpty.length === 0) {
                        return <div className="muted" style={{ fontSize: 12 }}>No gear purchased yet.</div>;
                    }
                    const nuyenSpent = C.nuyenSpent(character);
                    const nuyenTotal = C.startingNuyen(character);
                    return (
                        <>
                            <div className="summary-grid-2" style={{ marginBottom: 10 }}>
                                <div className="summary-field">
                                    <div className="summary-label">Nuyen Spent</div>
                                    <div className="summary-value">{nuyenSpent.toLocaleString()}¥</div>
                                </div>
                                <div className="summary-field">
                                    <div className="summary-label">Remaining</div>
                                    <div className="summary-value">
                                        {(nuyenTotal - nuyenSpent).toLocaleString()}¥
                                        <span className="muted"> / {nuyenTotal.toLocaleString()}¥</span>
                                    </div>
                                </div>
                            </div>
                            <div className="summary-gear-cats">
                                {nonEmpty.map(([k, label]) => (
                                    <div key={k} className="summary-gear-cat">
                                        <span className="sg-label">{label}</span>
                                        <span className="mono accent">{gear[k].length}</span>
                                    </div>
                                ))}
                            </div>
                        </>
                    );
                })()}
            </section>

            {/* Lifestyle */}
            <section className="summary-section">
                <h3 className="summary-h">Lifestyle</h3>
                {character?.lifestyle?.tier ? (
                    <div className="summary-field">
                        <div className="summary-value">
                            <strong>{character.lifestyle.tier}</strong>
                            {' '}× {character.lifestyle.months || 1} months
                        </div>
                        {character.lifestyle.notes && (
                            <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
                                {character.lifestyle.notes}
                            </div>
                        )}
                    </div>
                ) : (
                    <div className="muted" style={{ fontSize: 12 }}>No lifestyle chosen.</div>
                )}
            </section>

            {/* Contacts */}
            {contacts.length > 0 && (
                <section className="summary-section">
                    <h3 className="summary-h">Contacts ({contacts.length})</h3>
                    <div className="summary-contacts">
                        {contacts.map(c => (
                            <div key={c.id} className="summary-contact">
                                <div className="sc-name">
                                    <strong>{c.name || <em className="muted">unnamed</em>}</strong>
                                    {c.archetype && <span className="muted" style={{ fontSize: 11, marginLeft: 6 }}>{c.archetype}</span>}
                                </div>
                                <div className="sc-ratings mono">
                                    C{c.connection}/L{c.loyalty}
                                </div>
                            </div>
                        ))}
                    </div>
                </section>
            )}

            {/* Karma summary at bottom */}
            <section className="summary-section">
                <h3 className="summary-h">Karma Ledger</h3>
                <div className="karma-ledger">
                    <div className="kl-row"><span>Starting karma</span><span className="mono">{kt.starting}</span></div>
                    {kt.negative > 0 && <div className="kl-row good"><span>+ Negative qualities</span><span className="mono">+{kt.negative}</span></div>}
                    {kt.positive > 0 && <div className="kl-row bad"><span>− Positive qualities</span><span className="mono">−{kt.positive}</span></div>}
                    {kt.mysticAdeptPP > 0 && <div className="kl-row bad"><span>− Mystic adept PP</span><span className="mono">−{kt.mysticAdeptPP}</span></div>}
                    {kt.bondedFoci > 0 && <div className="kl-row bad"><span>− Bonded foci</span><span className="mono">−{kt.bondedFoci}</span></div>}
                    {kt.karmaToNuyen > 0 && <div className="kl-row bad"><span>− Traded for nuyen</span><span className="mono">−{kt.karmaToNuyen}</span></div>}
                    {kt.skills > 0 && <div className="kl-row bad"><span>− Skills over budget</span><span className="mono">−{kt.skills}</span></div>}
                    {kt.skillGroups > 0 && <div className="kl-row bad"><span>− Skill groups over budget</span><span className="mono">−{kt.skillGroups}</span></div>}
                    {kt.knowledge > 0 && <div className="kl-row bad"><span>− Knowledge over budget</span><span className="mono">−{kt.knowledge}</span></div>}
                    {kt.attributes > 0 && <div className="kl-row bad"><span>− Attributes over budget</span><span className="mono">−{kt.attributes}</span></div>}
                    {kt.extraSpells > 0 && <div className="kl-row bad"><span>− Extra spells</span><span className="mono">−{kt.extraSpells}</span></div>}
                    {kt.extraForms > 0 && <div className="kl-row bad"><span>− Extra complex forms</span><span className="mono">−{kt.extraForms}</span></div>}
                    {kt.boundSpirits > 0 && <div className="kl-row bad"><span>− Bound spirits</span><span className="mono">−{kt.boundSpirits}</span></div>}
                    {kt.registeredSprites > 0 && <div className="kl-row bad"><span>− Registered sprites</span><span className="mono">−{kt.registeredSprites}</span></div>}
                    {kt.contacts > 0 && <div className="kl-row bad"><span>− Contacts over CHA×3</span><span className="mono">−{kt.contacts}</span></div>}
                    <div className={`kl-row total ${kt.remaining < 0 ? 'bad' : kt.remaining === 0 ? 'good' : ''}`}>
                        <span>Remaining</span>
                        <span className="mono">{kt.remaining}</span>
                    </div>
                </div>
            </section>

            {/* Full checklist at bottom */}
            <section className="summary-section">
                <h3 className="summary-h">Finalize Checklist</h3>
                <div className="finalize-checklist">
                    {checklist.map(item => (
                        <div key={item.key} className={`fc-item ${item.severity}`}>
                            <span className="fc-icon">
                                {item.severity === 'ok' ? '✓'
                                 : item.severity === 'warn' ? '!'
                                 : '✗'}
                            </span>
                            <div className="fc-text">
                                <div className="fc-title">{item.title}</div>
                                <div className="fc-detail">{item.detail}</div>
                            </div>
                        </div>
                    ))}
                </div>
            </section>
        </>
    );
};