// $1,000 Leaderboard — clean table, podium-highlight top 3.
const PODIUM = {
  1: { prize: 500, color: "var(--gold)",   label: "1st" },
  2: { prize: 300, color: "var(--silver)", label: "2nd" },
  3: { prize: 200, color: "var(--bronze)", label: "3rd" },
};

function isWallet(s) { return /^0x/i.test(s); }

function RankBadge({ rank }) {
  const p = PODIUM[rank];
  if (p) {
    return (
      <span className="rank-medal" style={{ "--mc": p.color }}>
        <Icon name="medal" size={18} color={p.color} />
      </span>
    );
  }
  return <span className="rank-num num">{rank}</span>;
}

function LeaderRow({ row }) {
  const p = PODIUM[row.rank];
  return (
    <tr className={p ? "lr podium" : "lr"} style={p ? { "--mc": p.color } : null}>
      <td className="c-rank"><RankBadge rank={row.rank} /></td>
      <td className="c-trader">
        <span className={"tr-name " + (isWallet(row.trader) ? "tr-wallet num" : "")}>{row.trader}</span>
        {isWallet(row.trader) ? null : <span className="tr-tag">@</span>}
      </td>
      <td className="c-prize">
        {p ? <span className="prize-tag num" style={{ color: p.color }}>${p.prize}</span> : <span className="dash">—</span>}
      </td>
      <td className="c-vol num">${money(row.volume)}</td>
    </tr>
  );
}

function Leaderboard() {
  const rows = window.DASH.leaderboard;
  const total = rows.reduce((a, r) => a + r.volume, 0);
  return (
    <section className="card panel">
      <div className="panel-head">
        <div className="panel-titles">
          <div className="panel-eyebrow"><Icon name="trophy" size={14} color="var(--ll-neon)" /> Leaderboard</div>
          <h2 className="panel-title">Top Traders by Volume</h2>
          <p className="panel-desc">Referred traders ranked by total volume. The top 3 win the cash prize and sit out the raffle.</p>
        </div>
        <div className="panel-meta">
          <span className="pool-pill">$1,000 pool</span>
          <span className="panel-substat num">{compact(total)} traded</span>
        </div>
      </div>

      <div className="table-wrap">
        <table className="lb">
          <thead>
            <tr>
              <th className="c-rank">#</th>
              <th className="c-trader">Trader</th>
              <th className="c-prize">Prize</th>
              <th className="c-vol">Volume (USDC)</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => <LeaderRow key={r.rank} row={r} />)}
          </tbody>
        </table>
      </div>

      <div className="panel-foot">
        <span className="legend">
          <span className="lg-dot" style={{ background: "var(--gold)" }} /> 1st $500
          <span className="lg-dot" style={{ background: "var(--silver)" }} /> 2nd $300
          <span className="lg-dot" style={{ background: "var(--bronze)" }} /> 3rd $200
        </span>
      </div>
    </section>
  );
}

window.Leaderboard = Leaderboard;