// views/Leaderboard.jsx — Pick'em leaderboard
function LeaderboardView({ onRoute }) {
  const L = window.WCL_LEADERBOARD;
  const F = window.WCL_FEATURED;

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="eyebrow">Pick\u2019em · global</div>
          <h1 className="type-h1">Leaderboard</h1>
          <div className="sub">18,204 players today · 6 active matches to pick · daily streak ladder resets at 00:00 UTC</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <div className="seg">
            <button className="active">Global</button>
            <button>Friends</button>
            <button>Country</button>
          </div>
        </div>
      </div>

      <div className="col4" style={{ marginBottom: 16 }}>
        <div className="kpi"><div className="kpi-label">Your rank</div><div className="kpi-value mono">#23</div><div className="kpi-delta up">+7 today</div></div>
        <div className="kpi"><div className="kpi-label">Score</div><div className="kpi-value">982</div><div className="kpi-delta">302 pts behind #1</div></div>
        <div className="kpi"><div className="kpi-label">Hit rate</div><div className="kpi-value">61%</div><div className="kpi-delta">model: 68%</div></div>
        <div className="kpi"><div className="kpi-label">Streak</div><div className="kpi-value" style={{ color: 'var(--trophy)' }}>6</div><div className="kpi-delta">tied longest in top 50</div></div>
      </div>

      <div className="col2">
        <section className="panel">
          <div className="panel-head"><h3>Today's picks · 6 matches</h3><a className="link subtle">Picks history <I.ChevR size={12} /></a></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {window.WCL_TODAY.map(m => <PickRow key={m.id} m={m} />)}
          </div>
        </section>

        <section className="panel">
          <div className="panel-head"><h3>Global leaderboard</h3><span className="subtle" style={{ fontSize: 11 }}>top 5 + you</span></div>
          <table className="table">
            <thead>
              <tr>
                <th style={{ width: 40 }}>#</th>
                <th>User</th>
                <th style={{ textAlign: 'right' }}>Score</th>
                <th style={{ textAlign: 'right' }}>Streak</th>
                <th style={{ textAlign: 'right' }}>Hit</th>
              </tr>
            </thead>
            <tbody>
              {L.slice(0, 5).map(u => (
                <tr key={u.user}>
                  <td className="mono">{u.rank}</td>
                  <td className="strong">
                    {u.rank <= 3 && <I.Trophy size={12} style={{ color: u.rank === 1 ? 'var(--trophy)' : u.rank === 2 ? '#C0C0C0' : '#CD7F32', marginRight: 6, verticalAlign: '-1px' }} />}
                    {u.user}
                  </td>
                  <td className="mono" style={{ textAlign: 'right' }}>{u.score}</td>
                  <td className="mono" style={{ textAlign: 'right', color: u.streak >= 5 ? 'var(--trophy)' : 'var(--foreground-muted)' }}>{u.streak}</td>
                  <td className="mono" style={{ textAlign: 'right' }}>{(u.hit * 100).toFixed(0)}%</td>
                </tr>
              ))}
              <tr><td colSpan="5" style={{ padding: 0, borderBottom: 'none' }}><div className="divider" style={{ margin: '6px 0' }} /></td></tr>
              {L.slice(5).map(u => (
                <tr key={u.user} style={u.you ? { background: 'color-mix(in oklch, var(--brand) 12%, var(--card))', boxShadow: 'inset 2px 0 0 var(--brand)' } : {}}>
                  <td className="mono">{u.rank}</td>
                  <td className="strong">{u.user}{u.you && <span className="mono subtle" style={{ marginLeft: 6, fontSize: 10 }}>(you)</span>}</td>
                  <td className="mono" style={{ textAlign: 'right' }}>{u.score}</td>
                  <td className="mono" style={{ textAlign: 'right', color: u.streak >= 5 ? 'var(--trophy)' : 'var(--foreground-muted)' }}>{u.streak}</td>
                  <td className="mono" style={{ textAlign: 'right' }}>{(u.hit * 100).toFixed(0)}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </div>

      <section className="panel" style={{ marginTop: 16 }}>
        <div className="panel-head"><h3>You vs the model · last 14 days</h3></div>
        <div className="col3">
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Hit rate</div>
            <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
              <Donut value={0.61} color="var(--brand)" size={84} stroke={8} label="61%" />
              <div style={{ fontSize: 12 }}>
                <div style={{ marginBottom: 6 }}><span style={{ display: 'inline-block', width: 10, height: 3, background: 'var(--brand)', marginRight: 8 }} />You · 61%</div>
                <div><span style={{ display: 'inline-block', width: 10, height: 3, background: 'var(--pitch)', marginRight: 8 }} />Model · 68%</div>
              </div>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Points over time</div>
            <div style={{ color: 'var(--pitch)' }}>
              <Sparkline data={[20, 42, 68, 110, 134, 180, 222, 274, 320, 380, 432, 510, 612, 720, 820, 920, 982]} color="currentColor" fill height={64} />
            </div>
            <div className="subtle" style={{ fontSize: 12, marginTop: 6 }}>+162 pts past 7 days (best week)</div>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Bias check</div>
            {[
              ['Picked favorites', 0.74, 'too often'],
              ['Picked Argentina', 0.91, 'unsurprisingly'],
              ['Backed underdog', 0.18, 'low — model would'],
              ['Took draws', 0.06, 'rare — model 12%'],
            ].map(([k, v, sub], i) => (
              <div key={i} style={{ marginBottom: 8 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
                  <span>{k} <span className="subtle" style={{ fontSize: 11, marginLeft: 6 }}>{sub}</span></span>
                  <span className="mono">{(v * 100).toFixed(0)}%</span>
                </div>
                <div className="probbar"><span style={{ width: (v * 100) + '%' }} /></div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function PickRow({ m }) {
  const [pick, setPick] = React.useState(null);
  const isLive = m.state === 'live';
  const isSoon = m.state === 'soon';
  const isFt = m.state === 'ft';
  const locked = isLive || isFt;

  return (
    <div style={{
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-md)',
      background: 'var(--surface)',
      padding: '12px 14px',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
        <span className="subtle" style={{ fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600 }}>
          {isLive && <span className="dot" style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: 'var(--live-red)', marginRight: 6, animation: 'pulseDot 1.6s ease-out infinite' }} />}
          {m.group} {isLive && '· ' + m.minute + "'"} {isFt && '· FT'}
        </span>
        {locked && <span className="badge neutral">Locked</span>}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
        <button
          disabled={locked}
          onClick={() => setPick(0)}
          style={pickBtnStyle(pick === 0, locked, m.home)}>
          <Flag code={m.home} /> <span className="strong">{m.home}</span>
          <span className="mono subtle" style={{ marginLeft: 'auto', fontSize: 11 }}>1.82</span>
        </button>
        <button
          disabled={locked}
          onClick={() => setPick(1)}
          style={pickBtnStyle(pick === 1, locked)}>
          Draw <span className="mono subtle" style={{ marginLeft: 'auto', fontSize: 11 }}>3.45</span>
        </button>
        <button
          disabled={locked}
          onClick={() => setPick(2)}
          style={pickBtnStyle(pick === 2, locked, m.away)}>
          <Flag code={m.away} /> <span className="strong">{m.away}</span>
          <span className="mono subtle" style={{ marginLeft: 'auto', fontSize: 11 }}>4.20</span>
        </button>
      </div>
      {isLive && (
        <div style={{ marginTop: 8 }}>
          <WinProb home={0.72} draw={0.18} away={0.10} small codes={[m.home, m.away]} />
        </div>
      )}
    </div>
  );
}

function pickBtnStyle(active, locked) {
  return {
    display: 'flex', alignItems: 'center', gap: 8,
    padding: '8px 10px',
    background: active ? 'color-mix(in oklch, var(--brand) 18%, var(--card))' : 'var(--card)',
    border: '1px solid ' + (active ? 'var(--brand)' : 'var(--border)'),
    borderRadius: 'var(--radius-md)',
    color: 'var(--foreground)',
    fontFamily: 'var(--font-sans)',
    fontSize: 13,
    cursor: locked ? 'not-allowed' : 'pointer',
    opacity: locked && !active ? 0.5 : 1,
    transition: 'all 120ms var(--ease-out)',
  };
}
Object.assign(window, { LeaderboardView, PickRow });