// Shared dataset page renderer. Takes a dataset config and outputs the full page.
function DatasetPage({ code, tagline, desc, desc2, stats, methodology, citation, leaderboard, links }) {
  const renderLinks = (variant) => links && links.length > 0 ? (
    <div className={"ds-hero-links ds-hero-links--" + variant}>
      {links.map((l) => (
        <a key={l.label} className="lmca-arxiv" href={l.href}>
          {l.label}<span className="lmca-arxiv-arrow"></span>
        </a>
      ))}
    </div>
  ) : null;
  return (
    <div className="site">
      <SiteHeader current={code} />

      <section className="ds-hero">
        <div className="container">
          <div className="ds-hero-toprow">
            <div className="ds-hero-code ds-eyebrow mono-small">{code}</div>
            {renderLinks("top")}
          </div>
          <div className="ds-hero-titlerow">
            <h1 className="ds-hero-title">{tagline}</h1>
            {renderLinks("inline")}
          </div>
          <p className="ds-hero-lede">{desc}</p>
        </div>
      </section>

      {desc2 && (
        <section className="ds-section ds-section--prose">
          <div className="container">
            <div className="ds-narrow">
              {desc2.split("\n\n").map((p, i) => <p key={i}>{p}</p>)}
            </div>
          </div>
        </section>
      )}

      <section className="ds-section">
        <div className="container">
          <div className="ds-narrow">
            <DatasetLeaderboard rows={leaderboard} />
          </div>
        </div>
      </section>

      <section className="ds-section ds-section--methodology">
        <div className="container">
          <div className="ds-narrow">
            <div className="ds-section-label mono-small">Methodology</div>
            <dl className="ds-method">
              {methodology.map((m) => (
                <React.Fragment key={m.title}>
                  <dt>{m.title}</dt>
                  <dd>{m.body}</dd>
                </React.Fragment>
              ))}
            </dl>
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}

function DatasetLeaderboard({ rows }) {
  const max = Math.max(...rows.map((r) => r.score));
  const sorted = rows.slice().sort((a, b) => b.score - a.score);
  return (
    <div className="lb-table-wrap" style={{ padding: 0 }}>
      <table className="lb-table">
        <thead>
          <tr>
            <th className="col-rank">#</th>
            <th className="col-model">Model</th>
            <th className="col-org">Organization</th>
            <th className="col-score">Score</th>
          </tr>
        </thead>
        <tbody>
          {sorted.map((m, i) => (
            <tr key={m.name}>
              <td className="col-rank mono">{String(i + 1).padStart(2, "0")}</td>
              <td className="col-model"><div className="model-name">{m.name}</div></td>
              <td className="col-org">{m.org}</td>
              <td className="col-score">
                <div className="score-cell">
                  <span className="score-num mono">{m.score.toFixed(1)}</span>
                  <div className="score-bar">
                    <div
                      className="score-bar-fill"
                      style={{ width: `${m.score}%`, background: "var(--teal)" }}
                    />
                  </div>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Object.assign(window, { DatasetPage, DatasetLeaderboard });