// views/medals.jsx — All-time World Cup medal table.
// Gold = titles, Silver = runner-up, Bronze = third place. Derived from the
// all-time champions dataset.
function MedalsView({ onRoute }) {
  const A = window.WCL_ALLTIME;
  const rows = A.championsByNation.map(c => ({
    team: c.team,
    gold: c.titles,
    silver: c.runnerUp.length,
    bronze: c.thirdPlace.length,
    note: c.note,
    years: c.years,
  })).map(r => ({ ...r, total: r.gold + r.silver + r.bronze }));
  rows.sort((a, b) => b.gold - a.gold || b.silver - a.silver || b.bronze - a.bronze || b.total - a.total);

  const tot = rows.reduce((s, r) => ({ gold: s.gold + r.gold, silver: s.silver + r.silver, bronze: s.bronze + r.bronze }), { gold: 0, silver: 0, bronze: 0 });
  const max = Math.max(...rows.map(r => r.total));

  const medal = (n, color) => (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontVariantNumeric: 'tabular-nums' }}>
      <span style={{ width: 12, height: 12, borderRadius: 999, background: color, border: '1px solid rgba(0,0,0,0.2)', display: 'inline-block' }} />
      <span className="mono strong">{n}</span>
    </span>
  );
  const GOLD = 'var(--trophy)', SILVER = '#C0C0C0', BRONZE = '#CD7F32';

  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>Medals</span>
          </div>
          <h1 className="type-h1" style={{ margin: 0 }}>All-time medal table</h1>
          <div className="sub">Gold for the title, silver for runner-up, bronze for third place — 1930 to 2022, {A.meta.editions} editions.</div>
        </div>
        <button className="btn btn-secondary btn-sm" onClick={() => onRoute('records')}><I.Sigma size={14} /> Team records</button>
      </div>

      <div className="col4" style={{ marginBottom: 16 }}>
        <div className="kpi"><div className="kpi-label">Gold awarded</div><div className="kpi-value" style={{ color: GOLD }}>{tot.gold}</div><div className="kpi-delta">one per edition</div></div>
        <div className="kpi"><div className="kpi-label">Medal nations</div><div className="kpi-value">{rows.length}</div><div className="kpi-delta">reached a top-3</div></div>
        <div className="kpi"><div className="kpi-label">Most golds</div><div className="kpi-value" style={{ fontSize: 18 }}>Brazil · 5</div><div className="kpi-delta">the only ever-present</div></div>
        <div className="kpi"><div className="kpi-label">Most medals</div><div className="kpi-value" style={{ fontSize: 18 }}>Germany</div><div className="kpi-delta">{rows.find(r => r.team === 'GER')?.total} podiums</div></div>
      </div>

      <section className="panel">
        <div className="panel-head"><h3>Medal table</h3><span className="subtle" style={{ fontSize: 11 }}>ranked by gold, then silver, then bronze</span></div>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 28 }}>#</th>
              <th>Nation</th>
              <th style={{ width: 90, textAlign: 'right' }}>Gold</th>
              <th style={{ width: 90, textAlign: 'right' }}>Silver</th>
              <th style={{ width: 90, textAlign: 'right' }}>Bronze</th>
              <th style={{ width: 70, textAlign: 'right' }}>Total</th>
              <th style={{ width: '24%' }}>Podiums</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={r.team} onClick={() => onRoute('team', { code: r.team })} style={{ cursor: 'pointer' }}>
                <td className="mono" style={{ color: i < 3 ? 'var(--trophy)' : 'var(--foreground-muted)' }}>{i + 1}</td>
                <td className="strong"><TeamRow code={r.team} sub={r.note} /></td>
                <td style={{ textAlign: 'right' }}>{medal(r.gold, GOLD)}</td>
                <td style={{ textAlign: 'right' }}>{medal(r.silver, SILVER)}</td>
                <td style={{ textAlign: 'right' }}>{medal(r.bronze, BRONZE)}</td>
                <td className="mono strong" style={{ textAlign: 'right' }}>{r.total}</td>
                <td>
                  <div style={{ display: 'flex', height: 8, borderRadius: 999, overflow: 'hidden', background: 'var(--muted)', width: (r.total / max * 100) + '%', minWidth: 24 }}>
                    <span style={{ background: GOLD, width: (r.gold / r.total * 100) + '%' }} />
                    <span style={{ background: SILVER, width: (r.silver / r.total * 100) + '%' }} />
                    <span style={{ background: BRONZE, width: (r.bronze / r.total * 100) + '%' }} />
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
          <tfoot>
            <tr style={{ borderTop: '2px solid var(--border-strong)' }}>
              <td></td>
              <td className="strong">Total</td>
              <td style={{ textAlign: 'right' }}>{medal(tot.gold, GOLD)}</td>
              <td style={{ textAlign: 'right' }}>{medal(tot.silver, SILVER)}</td>
              <td style={{ textAlign: 'right' }}>{medal(tot.bronze, BRONZE)}</td>
              <td className="mono strong" style={{ textAlign: 'right' }}>{tot.gold + tot.silver + tot.bronze}</td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </section>
    </div>
  );
}
Object.assign(window, { MedalsView });