// page-leaderboard.jsx
function Leaderboard({ lang, onOpenToken }) {
  const t = I18N[lang];
  const totalLaunched = 1247;
  const graduated = 53;
  const totalVolume = 8_421_300;
  const avgGradMin = 92;

  const stats = [
    { l: t.stat_total_launched, v: fmtMcap(totalLaunched), s: '' },
    { l: t.stat_graduated, v: graduated, s: '' },
    { l: t.stat_volume, v: fmtMcap(totalVolume), s: 'TON' },
    { l: t.stat_avg_time, v: avgGradMin, s: t.minutes },
  ];

  return (
    <div className="page" data-screen-label="02 Leaderboard">
      <div className="page-head">
        <div>
          <h1 className="page-title">/ {t.nav_leaderboard.toLowerCase()}</h1>
          <div className="page-sub">&gt; {t.leaderboard_sub}</div>
        </div>
      </div>

      <div className="stats4">
        {stats.map((st, i) => (
          <div key={i} className="stat">
            <label>{st.l}</label>
            <b className="glitch" data-text={st.v}>{st.v} <small>{st.s}</small></b>
          </div>
        ))}
      </div>

      <div className="podium">
        {GRADUATED.slice(0, 3).map((g, i) => (
          <div key={g.sym} className={'podium-card r' + (i + 1)}>
            <div className="podium-rank">#{i + 1}</div>
            <div className="tok-avatar" style={{ width: 56, height: 56, fontSize: 28, marginBottom: 14 }}>{g.emoji}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, marginBottom: 2 }}>{g.name[lang]}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-dim)', marginBottom: 14 }}>${g.sym}</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 11, marginBottom: 14 }}>
              <div>
                <div style={{ color: 'var(--text-faint)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{t.grad_time}</div>
                <div style={{ marginTop: 4, fontSize: 14 }}>{g.gradMin} {t.minutes}</div>
              </div>
              <div>
                <div style={{ color: 'var(--text-faint)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{t.final_mcap}</div>
                <div style={{ marginTop: 4, fontSize: 14 }}>{fmtMcap(g.finalMcap)} TON</div>
              </div>
              <div style={{ gridColumn: '1 / -1' }}>
                <div style={{ color: 'var(--text-faint)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{t.growth}</div>
                <div className="up" style={{ marginTop: 4, fontSize: 18, fontWeight: 600 }}>+{fmtMcap(g.growth)}%</div>
              </div>
            </div>
            <button className="btn btn-block" style={{ background: 'var(--surface-2)' }} onClick={() => window.open('#', '_blank')}>
              {t.trade_on_stonfi} <Icon.ext />
            </button>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="card-head"><h3>FULL RANKING</h3></div>
        <table className="tbl">
          <thead>
            <tr>
              <th>{t.rank}</th><th>{t.token}</th>
              <th style={{ textAlign: 'right' }}>{t.grad_time}</th>
              <th style={{ textAlign: 'right' }}>{t.final_mcap}</th>
              <th style={{ textAlign: 'right' }}>{t.growth}</th>
              <th style={{ textAlign: 'right' }}>{t.actions}</th>
            </tr>
          </thead>
          <tbody>
            {GRADUATED.map((g, i) => (
              <tr key={g.sym} onClick={() => onOpenToken && onOpenToken(g.sym.toLowerCase())}>
                <td style={{ color: 'var(--text-faint)', width: 60 }}>#{i + 1}</td>
                <td>
                  <div className="tbl-token">
                    <div className="tbl-avatar">{g.emoji}</div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 14 }}>{g.name[lang]}</div>
                      <div style={{ color: 'var(--text-dim)', fontSize: 11 }}>${g.sym}</div>
                    </div>
                  </div>
                </td>
                <td style={{ textAlign: 'right' }}>{g.gradMin} {t.minutes}</td>
                <td style={{ textAlign: 'right' }}>{fmtMcap(g.finalMcap)} TON</td>
                <td style={{ textAlign: 'right' }} className="up">+{fmtMcap(g.growth)}%</td>
                <td style={{ textAlign: 'right' }}>
                  <button className="btn" style={{ height: 30, fontSize: 11 }} onClick={(e) => { e.stopPropagation(); window.open('#', '_blank'); }}>
                    {t.dex_trade} <Icon.ext />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
window.Leaderboard = Leaderboard;