// views/Alltime.jsx — All-time FIFA World Cup statistics
function AlltimeView({ onRoute }) {
  const A = window.WCL_ALLTIME;

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="eyebrow">All-time records · 1930 → 2022 · 22 editions</div>
          <h1 className="type-h1">All-time stats & winners</h1>
          <div className="sub">80 nations have played at least one World Cup · 8 different champions · all numbers sourced from Wikipedia.</div>
        </div>
        <button className="btn btn-secondary btn-sm" onClick={() => onRoute('wc2026')}>The 2026 tournament <I.ChevR size={12} /></button>
      </div>

      {/* KPIs */}
      <div className="col4" style={{ marginBottom: 16 }}>
        <div className="kpi"><div className="kpi-label">Editions played</div><div className="kpi-value">{A.meta.editions}</div><div className="kpi-delta">1930 → 2022 · 1942 & 1946 cancelled (WWII)</div></div>
        <div className="kpi"><div className="kpi-label">Nations ever played</div><div className="kpi-value">{A.meta.nationsEverPlayed}</div><div className="kpi-delta">Brazil the only nation in every edition</div></div>
        <div className="kpi"><div className="kpi-label">Different champions</div><div className="kpi-value">{A.meta.championsCount}</div><div className="kpi-delta">BRA · GER · ITA · ARG · FRA · URU · ENG · ESP</div></div>
        <div className="kpi"><div className="kpi-label">Next World Cup</div><div className="kpi-value" style={{ fontSize: 22 }}>2026</div><div className="kpi-delta">USA · MEX · CAN · 48 teams</div></div>
      </div>

      {/* Champions */}
      <section className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-head"><h3>Champions · every winning nation</h3><span className="subtle" style={{ fontSize: 11 }}>top-4 finishes included</span></div>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 28 }}>#</th>
              <th>Team</th>
              <th style={{ width: 80, textAlign: 'right' }}>Titles</th>
              <th>Won in</th>
              <th style={{ width: 60, textAlign: 'right' }}>Final losses</th>
              <th style={{ width: 60, textAlign: 'right' }}>3rd</th>
              <th style={{ width: 60, textAlign: 'right' }}>4th</th>
              <th style={{ width: 60, textAlign: 'right' }}>Top 4</th>
            </tr>
          </thead>
          <tbody>
            {A.championsByNation.map((c, i) => (
              <tr key={c.team} onClick={() => onRoute('team', { code: c.team })} style={{ cursor: 'pointer' }}>
                <td className="mono subtle">{i + 1}</td>
                <td className="strong"><TeamRow code={c.team} sub={c.note} /></td>
                <td style={{ textAlign: 'right' }}>
                  <span className="mono" style={{ fontWeight: 700, color: 'var(--trophy)' }}>{c.titles}</span>
                  <span style={{ display: 'inline-flex', gap: 2, marginLeft: 8, verticalAlign: '-2px' }}>
                    {Array.from({ length: c.titles }).map((_, k) => <I.Trophy key={k} size={10} style={{ color: 'var(--trophy)' }} />)}
                  </span>
                </td>
                <td className="mono subtle" style={{ fontSize: 12 }}>{c.years.join(', ')}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{c.runnerUp.length}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{c.thirdPlace.length}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{c.fourthPlace.length}</td>
                <td className="mono strong" style={{ textAlign: 'right' }}>{c.top4}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      <div className="col2">
        {/* Top scorers */}
        <section className="panel">
          <div className="panel-head"><h3>All-time top scorers</h3><span className="subtle" style={{ fontSize: 11 }}>via Wikipedia · bold = active</span></div>
          <table className="table">
            <thead>
              <tr>
                <th style={{ width: 24 }}>#</th>
                <th>Player</th>
                <th style={{ width: 60 }}>Team</th>
                <th style={{ width: 50, textAlign: 'right' }}>G</th>
                <th style={{ width: 50, textAlign: 'right' }}>MP</th>
                <th style={{ width: 70, textAlign: 'right' }}>G/M</th>
              </tr>
            </thead>
            <tbody>
              {A.topScorers.map((p, i) => (
                <tr key={p.player}>
                  <td className="mono" style={{ color: i < 3 ? 'var(--trophy)' : 'var(--foreground-muted)' }}>{i + 1}</td>
                  <td className={p.active ? 'strong' : ''} style={{ fontWeight: p.active ? 700 : 500 }}>
                    {i === 0 && <I.Trophy size={11} style={{ color: 'var(--trophy)', marginRight: 6, verticalAlign: '-1px' }} />}
                    {p.player}
                    <span className="subtle mono" style={{ marginLeft: 8, fontSize: 10 }}>{p.span}</span>
                  </td>
                  <td><Flag code={p.team} /></td>
                  <td className="mono strong" style={{ textAlign: 'right' }}>{p.goals}</td>
                  <td className="mono" style={{ textAlign: 'right' }}>{p.matches}</td>
                  <td className="mono subtle" style={{ textAlign: 'right' }}>{p.gpg.toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        {/* Goals by nation */}
        <section className="panel">
          <div className="panel-head"><h3>Goals scored by nation</h3><span className="subtle" style={{ fontSize: 11 }}>since 1930</span></div>
          <table className="table">
            <thead><tr><th style={{ width: 28 }}>#</th><th>Nation</th><th style={{ textAlign: 'right' }}>Goals</th><th>Distribution</th></tr></thead>
            <tbody>
              {A.topNationsByGoals.map((n, i) => (
                <tr key={n.team} onClick={() => onRoute('team', { code: n.team })} style={{ cursor: 'pointer' }}>
                  <td className="mono subtle">{i + 1}</td>
                  <td className="strong"><TeamRow code={n.team} /></td>
                  <td className="mono strong" style={{ textAlign: 'right' }}>{n.goals}</td>
                  <td style={{ width: '40%' }}>
                    <div className="probbar model"><span style={{ width: (n.goals / 237 * 100) + '%' }} /></div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </div>

      <section className="panel" style={{ marginTop: 16 }}>
        <div className="panel-head"><h3>Golden Boot · every edition</h3></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 10 }}>
          {A.goldenBootHistory.slice().reverse().map(g => (
            <button key={g.y} onClick={() => onRoute('tournament', { year: g.y, competition: 'wc_men' })} style={{
              padding: 12,
              background: 'var(--surface)',
              border: '1px solid var(--border)',
              borderRadius: 'var(--radius-md)',
              cursor: 'pointer',
              textAlign: 'left',
              color: 'inherit',
              fontFamily: 'inherit',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span className="mono" style={{ color: 'var(--trophy)', fontWeight: 600, fontSize: 14 }}>{g.y}</span>
                <span className="mono" style={{ fontSize: 12, color: 'var(--foreground)' }}>{g.goals}g</span>
              </div>
              <div className="strong" style={{ fontSize: 13, fontWeight: 600, marginTop: 4, lineHeight: 1.3 }}>{g.player}</div>
              {g.team !== '—' && <div className="subtle" style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, marginTop: 4 }}><Flag code={g.team} /> {window.WCL_TEAMS[g.team]?.name || g.team}</div>}
            </button>
          ))}
        </div>
      </section>

      <div className="col2" style={{ marginTop: 16 }}>
        <section className="panel">
          <div className="panel-head"><h3>Golden Ball winners (best player)</h3><span className="subtle" style={{ fontSize: 11 }}>since 1982</span></div>
          <table className="table">
            <tbody>
              {A.goldenBallHistory.slice().reverse().map(g => (
                <tr key={g.y} onClick={() => onRoute('tournament', { year: g.y, competition: 'wc_men' })} style={{ cursor: 'pointer' }}>
                  <td className="mono strong" style={{ color: 'var(--trophy)', width: 60 }}>{g.y}</td>
                  <td className="strong">{g.player}</td>
                  <td><TeamRow code={g.team} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        <section className="panel">
          <div className="panel-head"><h3>Most tournaments played</h3><span className="subtle" style={{ fontSize: 11 }}>6 players at 5</span></div>
          <table className="table">
            <tbody>
              {A.mostTournaments.map(p => (
                <tr key={p.player}>
                  <td className="mono" style={{ width: 30, color: 'var(--foreground-muted)' }}>5</td>
                  <td className="strong">{p.player}</td>
                  <td><TeamRow code={p.team} /></td>
                  <td className="mono subtle" style={{ fontSize: 11, textAlign: 'right' }}>{p.span}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="divider" />
          <div className="eyebrow" style={{ marginBottom: 6 }}>Other landmarks</div>
          <ul style={{ fontSize: 12, color: 'var(--foreground-subtle)', lineHeight: 1.8, paddingLeft: 18, margin: 0 }}>
            <li>Most matches played: <span className="strong">Messi</span> · {A.mostMatches.matches} apps</li>
            <li>{A.scoredInFiveTournaments}</li>
            <li>Only 3-time champion player: <span className="strong">Pelé</span> · 1958, 1962, 1970</li>
            <li>Coaching double: <span className="strong">Zagallo · Beckenbauer · Deschamps</span> (player+coach)</li>
          </ul>
        </section>
      </div>

      {/* Confederation */}
      <section className="panel" style={{ marginTop: 16 }}>
        <div className="panel-head"><h3>By confederation</h3><span className="subtle" style={{ fontSize: 11 }}>cumulative team entries</span></div>
        <table className="table">
          <thead>
            <tr>
              <th>Confederation</th>
              <th style={{ textAlign: 'right' }}>Entries</th>
              <th style={{ textAlign: 'right' }}>Top 16</th>
              <th style={{ textAlign: 'right' }}>Top 8</th>
              <th style={{ textAlign: 'right' }}>Top 4</th>
              <th style={{ textAlign: 'right' }}>Top 2</th>
              <th style={{ textAlign: 'right' }}>Titles</th>
              <th>Distribution</th>
            </tr>
          </thead>
          <tbody>
            {A.byConfederation.map(c => (
              <tr key={c.confed}>
                <td className="strong">{c.confed}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{c.teams}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{c.top16}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{c.top8}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{c.top4}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{c.top2}</td>
                <td className="mono strong" style={{ textAlign: 'right', color: c.first > 0 ? 'var(--trophy)' : 'var(--foreground)' }}>{c.first}</td>
                <td style={{ width: 200 }}>
                  <div className="probbar"><span style={{ width: (c.teams / 258 * 100) + '%' }} /></div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      {/* Misc records */}
      <section className="panel" style={{ marginTop: 16 }}>
        <div className="panel-head"><h3>Records & oddities</h3></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 12 }}>
          {A.records.map(r => (
            <div key={r.k} style={{ padding: 14, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)' }}>
              <div className="eyebrow" style={{ marginBottom: 6 }}>{r.k}</div>
              <div className="strong" style={{ fontSize: 14, fontWeight: 600, marginBottom: 4, textWrap: 'pretty' }}>{r.v}</div>
              <div className="subtle" style={{ fontSize: 11 }}>{r.sub}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Hosts */}
      <section className="panel" style={{ marginTop: 16 }}>
        <div className="panel-head"><h3>Hosts by confederation</h3><span className="subtle" style={{ fontSize: 11 }}>OFC has never hosted</span></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
          {A.hostsByConfederation.map(h => (
            <div key={h.confed} style={{ padding: 14, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)' }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>{h.confed} · {h.times} hosts</div>
              <ul style={{ margin: 0, paddingLeft: 18, fontSize: 12, color: 'var(--foreground-subtle)', lineHeight: 1.7 }}>
                {h.hosts.map((s, i) => <li key={i}>{s}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { AlltimeView });