// views/Odds.jsx — full odds + predictions
function OddsView({ onRoute }) {
  const trophy = window.WCL_TROPHY_ODDS;
  const boot = window.WCL_GOLDEN_BOOT;

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="eyebrow">Forecast · model v3.2</div>
          <h1 className="type-h1">Odds & predictions</h1>
          <div className="sub">Re-fit every 60s on live data · 50,000 monte-carlo sims per tournament path</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <div className="seg">
            <button className="active">Tournament</button>
            <button>Match</button>
            <button>Player</button>
          </div>
        </div>
      </div>

      <div className="col4" style={{ marginBottom: 16 }}>
        <div className="kpi"><div className="kpi-label">Field favorite</div><div className="kpi-value"><TeamRow code="ARG" big /></div><div className="kpi-delta up">14.2% · +0.8 24h</div></div>
        <div className="kpi"><div className="kpi-label">Largest model edge</div><div className="kpi-value" style={{ fontSize: 22 }}>ITA</div><div className="kpi-delta up">+0.6% over market</div></div>
        <div className="kpi"><div className="kpi-label">Calibration · last 100</div><div className="kpi-value">0.92</div><div className="kpi-delta">brier 0.18 · log-loss 0.41</div></div>
        <div className="kpi"><div className="kpi-label">Sims since refit</div><div className="kpi-value mono">50K</div><div className="kpi-delta">14 minutes ago</div></div>
      </div>

      <section className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-head"><h3>To lift the trophy · full field</h3>
          <div style={{ display: 'flex', gap: 6 }}>
            <div className="seg">
              <button className="active">Model</button>
              <button>Market</button>
              <button>Difference</button>
            </div>
            <button className="btn btn-ghost btn-sm">CSV</button>
          </div>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 28 }}>#</th>
              <th>Team</th>
              <th style={{ width: 130 }}>Model probability</th>
              <th style={{ width: 100, textAlign: 'right' }}>Decimal</th>
              <th style={{ width: 100, textAlign: 'right' }}>Implied</th>
              <th style={{ width: 90, textAlign: 'right' }}>Edge</th>
              <th style={{ width: 70, textAlign: 'right' }}>Δ24h</th>
              <th>Trajectory</th>
            </tr>
          </thead>
          <tbody>
            {trophy.map((r, i) => {
              const dec = 1 / r.market;
              const edge = (r.model - r.market) * 100;
              return (
                <tr key={r.team} onClick={() => onRoute('team', { code: r.team })} style={{ cursor: 'pointer' }}>
                  <td className="mono subtle">{i + 1}</td>
                  <td className="strong"><TeamRow code={r.team} /></td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div className="probbar model" style={{ flex: 1 }}><span style={{ width: (r.model / 0.15) * 100 + '%' }} /></div>
                      <span className="mono" style={{ width: 44, textAlign: 'right', color: i === 0 ? 'var(--pitch)' : 'var(--foreground)' }}>{(r.model * 100).toFixed(1)}%</span>
                    </div>
                  </td>
                  <td className="mono" style={{ textAlign: 'right' }}>{dec.toFixed(2)}</td>
                  <td className="mono" style={{ textAlign: 'right' }}>{(r.market * 100).toFixed(1)}%</td>
                  <td className="mono" style={{ textAlign: 'right', color: edge > 0 ? 'var(--success)' : 'var(--destructive)' }}>{(edge > 0 ? '+' : '') + edge.toFixed(1)}pp</td>
                  <td className="mono" style={{ textAlign: 'right', color: r.trend.startsWith('+') ? 'var(--success)' : r.trend.startsWith('-') ? 'var(--destructive)' : 'var(--foreground-muted)' }}>{r.trend}%</td>
                  <td>
                    <div style={{ color: r.trend.startsWith('+') ? 'var(--success)' : 'var(--destructive)' }}>
                      <Sparkline data={Array.from({ length: 14 }, (_, k) => r.model * 100 + Math.sin(k * 0.5 + i) * 0.6 + (r.trend.startsWith('+') ? k * 0.05 : -k * 0.05))} color="currentColor" />
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </section>

      <div className="col2">
        <section className="panel">
          <div className="panel-head"><h3>Stage probability</h3><span className="subtle" style={{ fontSize: 11 }}>top 8 teams</span></div>
          <table className="table" style={{ fontSize: 12 }}>
            <thead>
              <tr>
                <th>Team</th>
                <th style={{ textAlign: 'right' }}>R16</th>
                <th style={{ textAlign: 'right' }}>QF</th>
                <th style={{ textAlign: 'right' }}>SF</th>
                <th style={{ textAlign: 'right' }}>Final</th>
                <th style={{ textAlign: 'right' }}>Win</th>
              </tr>
            </thead>
            <tbody>
              {[
                ['ARG', 0.94, 0.78, 0.56, 0.32, 0.142],
                ['BRA', 0.92, 0.74, 0.51, 0.28, 0.128],
                ['FRA', 0.93, 0.72, 0.49, 0.26, 0.121],
                ['ESP', 0.89, 0.66, 0.42, 0.21, 0.098],
                ['ENG', 0.87, 0.62, 0.38, 0.18, 0.087],
                ['GER', 0.82, 0.51, 0.28, 0.14, 0.064],
                ['POR', 0.84, 0.52, 0.27, 0.13, 0.058],
                ['NED', 0.81, 0.46, 0.22, 0.11, 0.047],
              ].map(([t, ...probs]) => (
                <tr key={t}>
                  <td className="strong"><TeamRow code={t} /></td>
                  {probs.map((p, i) => (
                    <td key={i} className="mono" style={{ textAlign: 'right', color: i === 4 ? 'var(--trophy)' : p > 0.5 ? 'var(--pitch)' : 'var(--foreground)' }}>
                      {(p * 100).toFixed(0)}%
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        <section className="panel">
          <div className="panel-head"><h3>Golden Boot · top scorer</h3></div>
          <table className="table">
            <thead><tr><th>Player</th><th>Team</th><th style={{ textAlign: 'right' }}>Goals</th><th style={{ textAlign: 'right' }}>Decimal</th></tr></thead>
            <tbody>
              {boot.map(p => (
                <tr key={p.player}>
                  <td className="strong">{p.player}</td>
                  <td><TeamRow code={p.team} /></td>
                  <td className="mono" style={{ textAlign: 'right' }}>{p.goals}</td>
                  <td className="mono" style={{ textAlign: 'right' }}>{p.odds.toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </div>

      <section className="panel" style={{ marginTop: 16 }}>
        <div className="panel-head"><h3>Model performance · last 100 matches</h3>
          <span className="subtle" style={{ fontSize: 11 }}>brier 0.18 · log-loss 0.41 · calibration 0.92</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
          {[
            ['Favorite hit rate', '68%', 'last 100', 'up'],
            ['Underdog avg edge', '+3.2pp', 'when picked', 'up'],
            ['Beat closing line', '54%', '60-day window', 'up'],
            ['Avg ROI · flat 1u', '+4.8%', 'last 100', 'up'],
            ['Push rate', '2.0%', 'draws bet', 'flat'],
            ['Worst miss', 'JPN 2-1 GER', 'sep 23 · 91% loss', 'down'],
          ].map(([k, v, sub, tr]) => (
            <div key={k} style={{
              padding: 14,
              background: 'var(--surface)',
              border: '1px solid var(--border)',
              borderRadius: 'var(--radius-md)',
            }}>
              <div className="eyebrow">{k}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, margin: '6px 0 4px' }}>
                <div className="strong" style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>{v}</div>
                {tr === 'up' && <I.TrendUp size={14} style={{ color: 'var(--success)' }} />}
                {tr === 'down' && <I.TrendDown size={14} style={{ color: 'var(--destructive)' }} />}
              </div>
              <div className="subtle" style={{ fontSize: 11 }}>{sub}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { OddsView });