// views/tournaments.jsx — All-time index of every men's World Cup edition.
function TournamentsView({ onRoute }) {
  const H = window.WCL_HISTORY;
  const E = window.WCL_EDITIONS;
  const future = [
    { y: 2026, host: 'USA · Canada · Mexico', teams: 48 },
    { y: 2030, host: 'Morocco · Portugal · Spain', teams: 48 },
    { y: 2034, host: 'Saudi Arabia', teams: 48 },
  ];

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb" style={{ display: 'flex', gap: 6, color: 'var(--foreground-muted)', fontSize: 12, marginBottom: 8 }}>
            <a className="link" onClick={() => onRoute('alltime')}>All-time</a><I.ChevR size={12} /><span>Tournaments</span>
          </div>
          <h1 className="type-h1" style={{ margin: 0 }}>Every edition</h1>
          <div className="sub">{H.length} World Cups played since 1930, three more awarded through 2034. Open any year for the full story.</div>
        </div>
        <button className="btn btn-secondary btn-sm" onClick={() => onRoute('medals')}><I.Trophy size={14} /> Medal table</button>
      </div>

      <section className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-head"><h3>Played editions · 1930 → 2022</h3><span className="subtle" style={{ fontSize: 11 }}>click a row</span></div>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 60 }}>Year</th>
              <th>Host</th>
              <th>Champion</th>
              <th>Runner-up</th>
              <th style={{ width: 110 }}>Final</th>
              <th style={{ width: 50, textAlign: 'right' }}>Teams</th>
              <th style={{ width: 50, textAlign: 'right' }}>Goals</th>
              <th>Top scorer</th>
            </tr>
          </thead>
          <tbody>
            {H.slice().reverse().map(h => (
              <tr key={h.y} onClick={() => onRoute('tournament', { year: h.y, competition: 'wc_men' })} style={{ cursor: 'pointer' }}>
                <td className="mono strong" style={{ color: 'var(--trophy)' }}>{h.y}</td>
                <td className="strong">{h.host}</td>
                <td><TeamRow code={h.winner} /></td>
                <td><TeamRow code={h.runner} /></td>
                <td className="mono subtle" style={{ fontSize: 12 }}>{h.score}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{h.teams}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{h.goals}</td>
                <td className="subtle" style={{ fontSize: 12 }}>{E[h.y]?.topScorers?.[0]?.[0] || h.topScorer}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      <section className="panel">
        <div className="panel-head"><h3>Awarded · 2026 → 2034</h3><span className="subtle" style={{ fontSize: 11 }}>upcoming</span></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
          {future.map(f => (
            <button key={f.y} onClick={() => f.y === 2026 ? onRoute('wc2026') : onRoute('guide')} style={{ textAlign: 'left', padding: 16, background: 'var(--surface)', border: '1px solid color-mix(in oklch, var(--upcoming) 30%, transparent)', borderRadius: 'var(--radius-md)', cursor: 'pointer', color: 'inherit', fontFamily: 'inherit' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span className="mono strong" style={{ fontSize: 20, color: 'var(--upcoming)' }}>{f.y}</span>
                {f.y === 2026 && <span className="badge live" style={{ fontSize: 9 }}>next</span>}
              </div>
              <div className="strong" style={{ fontSize: 14, fontWeight: 600, marginTop: 6 }}>{f.host}</div>
              <div className="subtle" style={{ fontSize: 12, marginTop: 4 }}>{f.teams} teams{f.y === 2026 ? ' · open details →' : ''}</div>
            </button>
          ))}
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { TournamentsView });