const Leaderboard = () => {
  const rows = [
    { rank: 1, team: "Polaris Lab",        agent: "Sample agent A",   solution: "RustLoop VM / Interpreter",       binary: "sha256:7f3a9e1c2b58d4a64f1c8b35e9ad6c7b21e4f8c3a5b0d97e6f4c19a82b3d7e5f1", score: 94.2, result: "pass" },
    { rank: 2, team: "Li Mingran",                 agent: "Sample agent B",   solution: "Ferris Run — fast interpreter with incremental cache",  binary: "sha256:1b7c4e2a3f96d8e2c7b3a1d4f8e5c6b2a9f3d4e7c8b1a6f5d2e9c4b3a8d7e6f4", score: 91.8, result: "pass" },
    { rank: 3, team: "OpenBuild Group",    agent: "Open agent",       solution: "Cargo QuickExec — direct MIR execution, sandbox isolation, unit-test hot restart, diagnostic replay", binary: "sha256:c8a3f5b2e1d976c4a8b7e3d2f5c1a9b8e7d6c4f3a2b1e8d7c6f5a4b3e2d1c8a7", score: 87.4, result: "review" },
    { rank: 4, team: "An Kaiyuan",                  agent: "Sample agent C",   solution: "Rust test interpreter with function-level cache",  binary: "sha256:9d2e7f1c4b8a3d5e6f2c9b8a7d4f1e3c5b2a8d6e9f4c7b1a3d5e8f2c4b6a9d7e", score: 84.1, result: "review" },
    { rank: 5, team: "Local-First Community", agent: "Custom agent",     solution: "Edit-and-run engine",     binary: "sha256:4a8b3c7d1e6f9c2a5b8e7d4f1c3a6b9e2d5f8c4a7b1e3d6f9c2a5b8e7d4f1c3a", score: 79.6, result: "review" },
  ];

  // deterministic team-id hashes
  const teamIds = ["a7f2c4", "3b89e1", "d4c1a8", "6f3b9c", "2e8a5d"];

  const section = {
    borderBottom: "1px solid var(--line)",
    padding: "100px 0",
    background: "var(--bg-2)",
  };
  const wrap = { maxWidth: 1240, margin: "0 auto", padding: "0 28px" };
  const header = {
    display: "flex",
    alignItems: "flex-end",
    justifyContent: "space-between",
    marginBottom: 36,
    gap: 24,
    flexWrap: "wrap",
  };
  const eyebrow = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    color: "var(--accent)",
    letterSpacing: "0.12em",
    marginBottom: 12,
    textTransform: "uppercase",
  };
  const h2 = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 40,
    fontWeight: 700,
    letterSpacing: "-0.025em",
    margin: 0,
    lineHeight: 1.05,
  };
  const lead = {
    fontSize: 16,
    color: "var(--muted)",
    marginTop: 14,
    maxWidth: 720,
  };
  const tableWrap = {
    border: "1px solid var(--line)",
    background: "var(--panel)",
    overflowX: "auto",
    overflowY: "hidden",
    WebkitOverflowScrolling: "touch",
  };
  const filterBar = {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "16px 24px",
    borderBottom: "1px solid var(--line)",
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 12,
    color: "var(--muted)",
    flexWrap: "wrap",
    gap: 12,
  };
  const tabs = { display: "flex", gap: 4 };
  const tab = (active) => ({
    padding: "6px 12px",
    border: "1px solid " + (active ? "var(--accent-line)" : "var(--line)"),
    background: active ? "var(--accent-soft)" : "transparent",
    color: active ? "var(--accent)" : "var(--muted)",
    cursor: "pointer",
    fontFamily: "inherit",
    fontSize: 12,
  });

  const table = {
    width: "100%",
    minWidth: 980,
    borderCollapse: "collapse",
    tableLayout: "fixed",
  };
  const th = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    color: "var(--muted-2)",
    textTransform: "uppercase",
    letterSpacing: "0.1em",
    fontWeight: 500,
    textAlign: "left",
    padding: "16px 20px",
    borderBottom: "1px solid var(--line)",
  };
  const td = {
    padding: "20px",
    borderBottom: "1px solid var(--line)",
    fontSize: 14,
    verticalAlign: "middle",
  };
  const tdLast = { ...td, borderBottom: "none" };

  const rankCell = (r) => {
    const colors = { 1: "var(--accent)", 2: "var(--accent)", 3: "var(--blue)" };
    const c = colors[r] || "var(--muted)";
    return (
      <span style={{
        fontFamily: "JetBrains Mono, monospace",
        fontWeight: 700,
        fontSize: 18,
        color: c,
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
      }}>
        <span style={{ fontSize: 11, color: "var(--muted-2)" }}>#</span>{String(r).padStart(2, "0")}
      </span>
    );
  };

  const scoreBar = (score) => {
    return (
      <span style={{
        fontFamily: "JetBrains Mono, monospace",
        fontSize: 18,
        fontWeight: 700,
        color: "var(--text)",
      }}>{score.toFixed(1)}</span>
    );
  };

  const binaryCell = (binary) => {
    // Show first 12 chars + ellipsis; tooltip on hover shows full string.
    const short = binary.length > 20 ? binary.slice(0, 16) + "…" : binary;
    return (
      <span
        className="lb-binary"
        title={binary}
        style={{
          fontFamily: "JetBrains Mono, monospace",
          fontSize: 12,
          color: "var(--muted)",
          padding: "3px 8px",
          border: "1px solid var(--line)",
          background: "rgba(255,255,255,0.02)",
          letterSpacing: "0.02em",
          cursor: "help",
          display: "inline-block",
          maxWidth: "100%",
          whiteSpace: "nowrap",
          overflow: "hidden",
          textOverflow: "ellipsis",
          transition: "color .15s, border-color .15s",
        }}
        onMouseOver={(e) => { e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.borderColor = "var(--line-2)"; }}
        onMouseOut={(e) => { e.currentTarget.style.color = "var(--muted)"; e.currentTarget.style.borderColor = "var(--line)"; }}
      >
        {short}
      </span>
    );
  };

  const resultBadge = (r) => {
    const pass = r === "pass";
    return (
      <span style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        fontFamily: "JetBrains Mono, monospace",
        fontSize: 11,
        letterSpacing: "0.08em",
        padding: "4px 10px",
        color: pass ? "var(--accent)" : "var(--warn)",
        background: pass ? "var(--accent-soft)" : "rgba(242,198,107,0.10)",
        border: "1px solid " + (pass ? "var(--accent-line)" : "rgba(242,198,107,0.30)"),
        textTransform: "uppercase",
      }}>
        <span style={{
          width: 5, height: 5, borderRadius: 99,
          background: pass ? "var(--accent)" : "var(--warn)",
        }}></span>
        {pass ? "PASS" : "REVIEW"}
      </span>
    );
  };

  return (
    <section style={section} id="leaderboard" data-screen-label="Leaderboard">
      <style>{`
        .lb-scroll::-webkit-scrollbar { height: 8px; }
        .lb-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
        .lb-scroll::-webkit-scrollbar-thumb { background: var(--accent-line); }
        @media (max-width: 900px) {
          .lb-wrap { padding: 0 20px !important; }
          .lb-header { align-items: flex-start !important; }
          .lb-header-meta { align-items: flex-start !important; text-align: left !important; }
          .lb-filter { align-items: flex-start !important; flex-direction: column !important; padding: 14px 16px !important; }
          .lb-filter-meta { align-items: flex-start !important; flex-direction: column !important; gap: 8px !important; }
          .lb-table { min-width: 860px !important; }
          .lb-table th, .lb-table td { padding: 16px 14px !important; }
        }
        @media (max-width: 680px) {
          .lb-table { min-width: 620px !important; }
          .lb-solution, .lb-binary-col { display: none !important; }
        }
      `}</style>
      <div style={wrap} className="lb-wrap">
        <div style={header} className="lb-header">
          <div>
            <div style={eyebrow}>// {"LEADERBOARD"}</div>
            <h2 style={h2}>{"Latest task leaderboard"}</h2>
            <p style={lead}>{"Every submission is scored by the same rules, with results and artifacts published together."}</p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 8, fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--muted)" }} className="lb-header-meta">
            <span style={{ color: "var(--blue)" }}>{"Sample data · not official"}</span>
            <span>{"sort: score desc"}</span>
          </div>
        </div>

        <div style={tableWrap} className="lb-scroll">
          <div style={filterBar} className="lb-filter">
            <div style={tabs}>
              <button style={tab(true)}>{"Current task"}</button>
              <button style={tab(false)}>{"All-time best"}</button>
              <button style={tab(false)}>{"By team"}</button>
            </div>
            <div style={{ display: "flex", gap: 16, alignItems: "center" }} className="lb-filter-meta">
              <span>{"Latest task · GB-001 Rust Fast Execution Engine"}</span>
              <a style={{ color: "var(--accent)", cursor: "pointer" }}>{"Read the rules →"}</a>
            </div>
          </div>

          <table style={table} className="lb-table">
            <colgroup>
              <col style={{ width: "6%" }} />
              <col style={{ width: "18%" }} />
              <col style={{ width: "11%" }} />
              <col style={{ width: "23%" }} className="lb-solution" />
              <col style={{ width: "18%" }} className="lb-binary-col" />
              <col style={{ width: "10%" }} />
              <col style={{ width: "14%" }} />
            </colgroup>
            <thead>
              <tr>
                <th style={th}>#</th>
                <th style={th}>{"Team / Individual"}</th>
                <th style={th}>{"Agent"}</th>
                <th style={th} className="lb-solution">{"Solution"}</th>
                <th style={th} className="lb-binary-col">{"Binary"}</th>
                <th style={th}>{"Score"}</th>
                <th style={th}>{"Result"}</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={r.rank} style={{ transition: "background .15s" }}
                    onMouseOver={e=>e.currentTarget.style.background="rgba(255,255,255,0.02)"}
                    onMouseOut={e=>e.currentTarget.style.background="transparent"}>
                  <td style={i === rows.length - 1 ? tdLast : td}>{rankCell(r.rank)}</td>
                  <td style={i === rows.length - 1 ? tdLast : td}>
                    <div style={{ fontWeight: 600, color: "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }} title={r.team}>{r.team}</div>
                    <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--muted-2)", marginTop: 4 }}>
                      0x{teamIds[i]}…
                    </div>
                  </td>
                  <td style={i === rows.length - 1 ? tdLast : td}>
                    <span style={{ color: "var(--muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", display: "block", fontSize: 13 }} title={r.agent}>{r.agent}</span>
                  </td>
                  <td style={i === rows.length - 1 ? tdLast : td} className="lb-solution">
                    <span style={{ fontFamily: "JetBrains Mono, monospace", color: "var(--text)", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", lineHeight: 1.4, fontSize: 12.5, wordBreak: "break-word" }} title={r.solution}>{r.solution}</span>
                  </td>
                  <td style={i === rows.length - 1 ? tdLast : td} className="lb-binary-col">{binaryCell(r.binary)}</td>
                  <td style={i === rows.length - 1 ? tdLast : td}>{scoreBar(r.score)}</td>
                  <td style={i === rows.length - 1 ? tdLast : td}>{resultBadge(r.result)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 20, fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--muted-2)", flexWrap: "wrap", gap: 12 }}>
          <span>{"Showing 1–5 · 5 submissions total"}</span>
          <a style={{ color: "var(--accent)", cursor: "pointer" }}>{"Download full CSV →"}</a>
        </div>
      </div>
    </section>
  );
};
window.Leaderboard = Leaderboard;