/* global React */
const { useState, useMemo, useEffect } = React;

// ============ END-OF-GAME SCREEN ============
// Triggered when round 5 ends in a 5-round game. state.gameOver=true.
// Shows: hero "battle complete", overall stats, per-round timeline,
// top units fielded, misery faced, per-player results, restart CTA.

function EndGameScreen({ state, setState, openCard }) {
  const data = window.HORDE_DATA;
  const saved = state.savedSpawns || {};
  const rounds = Object.keys(saved).map(n => +n).sort((a, b) => a - b);
  const [revealed, setRevealed] = useState(false);

  // theatrical: fade in stats after a beat
  useEffect(() => {
    const t = setTimeout(() => setRevealed(true), 400);
    return () => clearTimeout(t);
  }, []);

  // ---- aggregations ----
  const allRolls = useMemo(() => {
    const out = [];
    rounds.forEach(r => (saved[r] || []).forEach(s => out.push({ ...s, round: r })));
    return out;
  }, [saved, rounds.join(',')]);

  const noSpawnCount = allRolls.filter(r => !r.bracket).length;
  const totalSpawns = allRolls.length - noSpawnCount;

  const unitTally = useMemo(() => {
    const m = {};
    allRolls.forEach(r => {
      if (!r.pickedUnit) return;
      m[r.pickedUnit] = (m[r.pickedUnit] || 0) + 1;
    });
    return Object.entries(m).sort((a, b) => b[1] - a[1]);
  }, [allRolls]);

  const bracketTally = useMemo(() => {
    const m = { '3-4': 0, '5-6': 0, '7-8': 0, '9-10': 0, '11-12': 0 };
    allRolls.forEach(r => { if (r.bracket && m[r.bracket] !== undefined) m[r.bracket]++; });
    return m;
  }, [allRolls]);

  const highestRoll = useMemo(() => {
    if (!allRolls.length) return null;
    return allRolls.reduce((a, b) => (b.total > a.total ? b : a));
  }, [allRolls]);

  // misery cards faced — we don't keep history per round, so use last activeMisery
  // (we'll show whatever is still active at end-of-game, which is round-5 draws)
  const miseryFaced = (state.activeMisery || []).map(n => data.cards.misery.find(c => c.n === n)).filter(Boolean);

  // ---- player results ----
  const playerResults = (state.players || []).map(p => {
    const secret = p.secrets && p.secretChosen != null ? data.cards.secret.find(c => c.n === p.secrets[p.secretChosen]) : null;
    const purchased = (p.purchases || []).map(n => data.cards.resupply.find(c => c.n === n)).filter(Boolean);
    return { ...p, secret, purchased };
  });

  function newGame() {
    if (!confirm('Start a fresh game? Current results will be cleared.')) return;
    setState(window.HordeState.defaultGameState());
  }
  function backToGame() {
    // un-end so they can keep tinkering
    setState({ ...state, gameOver: false });
  }

  const factionRule = data.factionRules[state.faction];
  const maxBracket = Math.max(1, ...Object.values(bracketTally));

  return (
    <div className="endgame">
      {/* ===== Hero ===== */}
      <div className="endgame-hero">
        <div className="hero-bg"/>
        <div className="hero-streaks">
          {Array.from({length: 18}).map((_, i) => (
            <span key={i} style={{
              left: `${(i * 7) % 100}%`,
              animationDelay: `${(i % 6) * 0.15}s`,
              opacity: 0.15 + ((i * 13) % 50) / 200,
              height: `${30 + ((i * 17) % 60)}%`,
            }}/>
          ))}
        </div>
        <div className="hero-content">
          <div className="endgame-eyebrow">After-Action Report</div>
          <h1 className="endgame-title">
            <span className="line line-1">Battle</span>
            <span className="line line-2">Complete</span>
          </h1>
          <div className="endgame-faction">vs. {state.faction}</div>
          <div className="endgame-meta">
            <span>{state.points} pts</span>
            <span className="dot-sep">·</span>
            <span>{state.deployment}</span>
            {state.hardMode && <><span className="dot-sep">·</span><span style={{color:'var(--c-misery)'}}>HARD</span></>}
            <span className="dot-sep">·</span>
            <span>{rounds.length || state.round} rounds</span>
          </div>
        </div>
      </div>

      <div className={`endgame-body ${revealed ? 'revealed' : ''}`}>
        {/* ===== Big stats ===== */}
        <div className="endgame-statgrid">
          <div className="endgame-stat" style={{'--accent':'var(--c-horde)'}}>
            <div className="lbl">Horde Spawned</div>
            <div className="val">{totalSpawns}</div>
            <div className="sub">spawns across all zones</div>
          </div>
          <div className="endgame-stat" style={{'--accent':'var(--c-misery)'}}>
            <div className="lbl">Misery Faced</div>
            <div className="val">{miseryFaced.length}</div>
            <div className="sub">{miseryFaced.length === 0 ? 'no recorded events' : 'cruel events endured'}</div>
          </div>
          <div className="endgame-stat" style={{'--accent':'var(--c-resupply)'}}>
            <div className="lbl">No-Spawns</div>
            <div className="val">{noSpawnCount}</div>
            <div className="sub">moments of breath</div>
          </div>
          <div className="endgame-stat" style={{'--accent':'var(--c-secondary)'}}>
            <div className="lbl">Highest Roll</div>
            <div className="val">{highestRoll ? highestRoll.total : '—'}</div>
            <div className="sub">{highestRoll ? `R${highestRoll.round} · Z${highestRoll.zone}` : 'no rolls saved'}</div>
          </div>
        </div>

        {/* ===== Bracket distribution ===== */}
        {totalSpawns > 0 && (
          <div className="endgame-section">
            <div className="endgame-section-head">
              <span className="endgame-section-eyebrow">Spawn Breakdown</span>
              <h3 className="endgame-section-title">By bracket</h3>
            </div>
            <div className="bracket-bars">
              {Object.entries(bracketTally).map(([b, n]) => (
                <div key={b} className="bracket-bar">
                  <div className="bar-label">{b}</div>
                  <div className="bar-track">
                    <div className="bar-fill" style={{ width: `${(n / maxBracket) * 100}%` }}/>
                  </div>
                  <div className="bar-count">{n}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* ===== Round timeline ===== */}
        {rounds.length > 0 && (
          <div className="endgame-section">
            <div className="endgame-section-head">
              <span className="endgame-section-eyebrow">Timeline</span>
              <h3 className="endgame-section-title">Round by round</h3>
            </div>
            <div className="timeline">
              {rounds.map(r => {
                const list = saved[r] || [];
                const ns = list.filter(x => x.bracket).length;
                return (
                  <div key={r} className="timeline-round">
                    <div className="tl-marker">
                      <div className="tl-num">R{r}</div>
                    </div>
                    <div className="tl-body">
                      <div className="tl-head">
                        <span className="tl-count">{ns} spawn{ns === 1 ? '' : 's'}</span>
                        <span className="tl-sub">
                          mod +{r >= 5 ? 2 : (r >= 3 ? 1 : 0)}
                        </span>
                      </div>
                      <div className="tl-zones">
                        {list.map(z => (
                          <div key={z.zone} className={`tl-zone ${z.bracket ? '' : 'no-spawn'}`}>
                            <span className="tl-z">Z{z.zone}</span>
                            <span className="tl-total">{z.total}</span>
                            <span className="tl-unit">{z.bracket ? (z.pickedUnit || z.bracket) : '—'}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* ===== Top units ===== */}
        {unitTally.length > 0 && (
          <div className="endgame-section">
            <div className="endgame-section-head">
              <span className="endgame-section-eyebrow">Forces of {state.faction}</span>
              <h3 className="endgame-section-title">Most fielded</h3>
            </div>
            <div className="unit-tally">
              {unitTally.slice(0, 8).map(([name, n], i) => (
                <div key={name} className="unit-tally-row">
                  <div className="rank">#{i + 1}</div>
                  <div className="grow">
                    <div className="name">{name}</div>
                  </div>
                  <div className="count">×{n}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* ===== Misery faced ===== */}
        {miseryFaced.length > 0 && (
          <div className="endgame-section">
            <div className="endgame-section-head">
              <span className="endgame-section-eyebrow" style={{color:'var(--c-misery)'}}>Final Misery</span>
              <h3 className="endgame-section-title">Active at game end</h3>
            </div>
            <div className="misery-faced">
              {miseryFaced.map(c => (
                <button key={c.n} className="misery-faced-row" onClick={() => openCard && openCard(c, 'misery')}>
                  <div className="m-num">M{String(c.n).padStart(2,'0')}</div>
                  <div className="grow">
                    <div className="m-name">{c.title || c.name}</div>
                  </div>
                  <div className="m-arrow">→</div>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* ===== Player results ===== */}
        <div className="endgame-section">
          <div className="endgame-section-head">
            <span className="endgame-section-eyebrow">Survivors</span>
            <h3 className="endgame-section-title">Player results</h3>
          </div>
          <div className="player-results">
            {playerResults.map(p => (
              <div key={p.id} className={`pr-card ${p.eliminated ? 'eliminated' : ''}`}>
                <div className="pr-head">
                  <div className="pr-id">P{p.id}</div>
                  <div className="grow">
                    <div className="pr-name">{p.name}</div>
                    {p.eliminated && <div className="pr-status">Eliminated</div>}
                  </div>
                </div>
                <div className="pr-stats">
                  <div className="pr-stat">
                    <div className="lbl">CP</div>
                    <div className="val">{p.cp}</div>
                  </div>
                  <div className="pr-stat">
                    <div className="lbl">SP</div>
                    <div className="val">{p.sp}</div>
                  </div>
                  <div className="pr-stat">
                    <div className="lbl">Purchases</div>
                    <div className="val">{p.purchased.length}</div>
                  </div>
                </div>
                {p.secret && (
                  <button className="pr-secret" onClick={() => openCard && openCard(p.secret, 'secret')}>
                    <div className="ps-eyebrow">Secret Objective</div>
                    <div className="ps-name">{p.secret.title || p.secret.name}</div>
                  </button>
                )}
                {p.notes && (
                  <div className="pr-notes">"{p.notes}"</div>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* ===== Faction rule recap ===== */}
        {factionRule && (
          <div className="endgame-section">
            <div className="endgame-section-head">
              <span className="endgame-section-eyebrow" style={{color:'var(--c-secret)'}}>Enemy Doctrine</span>
              <h3 className="endgame-section-title">{state.faction}</h3>
            </div>
            <div className="tile" style={{borderLeft:'3px solid var(--c-horde)'}}>
              <div className="body-text" style={{fontSize:13}}>{factionRule}</div>
            </div>
          </div>
        )}

        {/* ===== CTAs ===== */}
        <div className="endgame-cta">
          <button className="btn lg full" onClick={newGame}>Start New Game</button>
          <button className="btn ghost full sm" onClick={backToGame}>← Back to game</button>
        </div>

        <div className="endgame-footer">
          <div className="endgame-stamp">
            <div className="stamp-line">40K · HORDE MODE</div>
            <div className="stamp-line stamp-sub">{new Date(state.gameEndedAt || Date.now()).toLocaleString()}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EndGameScreen });