import Link from "next/link";
import { notFound } from "next/navigation";
import { ScopeTrace } from "@/components/ScopeTrace";
import { fmtParams, getRun, getRuns, limitOf, type QualityResult } from "@/lib/results";

export const dynamic = "force-static";

export function generateStaticParams() {
  return getRuns().map((r) => ({ id: r.run_id.slice(0, 8) }));
}

const TIER_TONE = {
  signal: { text: "text-signal", border: "border-signal-dim", chip: "bg-signal-dim/30" },
  reference: { text: "text-reference", border: "border-reference-dim", chip: "bg-reference-dim/30" },
  example: { text: "text-dim", border: "border-rule", chip: "bg-rule" },
} as const;

/**
 * Per-sample outcome grid.
 *
 * This is the reason the result schema stores samples and not just aggregates:
 * an aggregate says a checkpoint got worse, this says which samples broke.
 */
function SampleGrid({ q }: { q: QualityResult }) {
  if (!q.samples.length) return null;
  return (
    <div className="mt-5">
      <div className="label mb-3">
        per-sample outcomes · {q.samples.filter((s) => s.passed).length}/{q.samples.length} passed
      </div>
      <div className="flex flex-wrap gap-[3px]">
        {q.samples.map((s) => (
          <span
            key={s.sample_id}
            title={`${s.sample_id} — ${s.passed ? "pass" : "fail"}`}
            className={`h-3 w-3 ${s.passed ? "bg-pass/70" : "bg-fail/80"}`}
          />
        ))}
      </div>
    </div>
  );
}

export default async function RunPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const run = getRun(id);
  if (!run) notFound();

  const limit = limitOf(run);
  const perf = run.perf?.points ?? [];
  const flags = Object.entries(run.target.serving.flags ?? {});

  return (
    <main className="mx-auto max-w-6xl px-6 py-14">
      <Link href="/" className="label transition-colors hover:text-signal">
        ← board
      </Link>

      <header className="rise mt-6 mb-10">
        <h1 className="font-display text-4xl leading-tight sm:text-5xl">
          {run.target.display_name}
        </h1>
        <p className="mt-3 font-mono text-xs text-dim">{run.target_id}</p>
        <div className="mt-6 flex flex-wrap gap-x-6 gap-y-2 text-[11px] text-dimmer">
          <span>{run.host.hardware}</span>
          <span>{fmtParams(run.target)}</span>
          <span>{run.target.quant?.toUpperCase()}</span>
          <span>ctx {run.target.serving.max_model_len?.toLocaleString()}</span>
          <span>measured {run.timestamp.slice(0, 16).replace("T", " ")}Z</span>
        </div>
      </header>

      {limit && (
        <div className="mb-10 border-l-2 border-signal bg-signal-dim/10 px-4 py-3 text-xs text-dim">
          <span className="text-signal">Capped run.</span> Reference tasks were
          limited to {limit} samples. Not comparable to a full-dataset score.
        </div>
      )}

      <div className="grid gap-10 lg:grid-cols-[1.15fr_1fr]">
        <section>
          <h2 className="font-display mb-5 text-2xl">Quality</h2>
          <div className="space-y-4">
            {run.quality.length === 0 && (
              <p className="text-xs text-dimmer">
                Perf-only run — no quality tasks were executed.
              </p>
            )}
            {run.quality.map((q) => {
              const tone = TIER_TONE[q.tier] ?? TIER_TONE.example;
              const acc = q.metrics?.accuracy;
              return (
                <div key={q.task} className={`panel border-l-2 ${tone.border} p-5`}>
                  <div className="flex items-baseline justify-between gap-4">
                    <div>
                      <span className="text-sm text-ink">{q.task}</span>
                      <span className={`ml-3 px-2 py-0.5 text-[10px] uppercase tracking-widest ${tone.chip} ${tone.text}`}>
                        {q.tier}
                      </span>
                    </div>
                    <span className={`readout font-display text-3xl ${tone.text}`}>
                      {q.error ? "ERR" : acc != null ? acc.toFixed(3) : "—"}
                    </span>
                  </div>

                  {q.error ? (
                    <p className="mt-3 font-mono text-[11px] leading-relaxed text-fail">
                      {q.error.slice(0, 240)}
                    </p>
                  ) : (
                    <>
                      <div className="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-[11px] text-dimmer">
                        <span>{q.n_samples} samples</span>
                        {q.duration_s && <span>{Math.round(q.duration_s)}s</span>}
                        {Object.entries(q.metrics)
                          .filter(([k]) => !k.startsWith("_") && k !== "accuracy")
                          .slice(0, 4)
                          .map(([k, val]) => (
                            <span key={k}>
                              {k} <span className="text-dim">{val.toFixed(3)}</span>
                            </span>
                          ))}
                      </div>
                      <SampleGrid q={q} />
                    </>
                  )}
                </div>
              );
            })}
          </div>
        </section>

        <section>
          <h2 className="font-display mb-5 text-2xl">Serving performance</h2>

          {perf.length > 1 && (
            <div className="panel mb-5 p-5">
              <ScopeTrace points={perf} />
            </div>
          )}

          <div className="overflow-x-auto">
            <table className="w-full border-collapse text-[11px]">
              <thead>
                <tr className="border-b border-rule-bright text-left">
                  <th className="label py-2 pr-3 font-normal">conc</th>
                  <th className="label py-2 pr-3 text-right font-normal">tok/s all</th>
                  <th className="label py-2 pr-3 text-right font-normal">/stream</th>
                  <th className="label py-2 pr-3 text-right font-normal">ttft p50</th>
                  <th className="label py-2 pr-3 text-right font-normal">ttft p95</th>
                  <th className="label py-2 text-right font-normal">tpot</th>
                </tr>
              </thead>
              <tbody>
                {perf.map((p) => (
                  <tr key={p.concurrency} className="border-b border-rule">
                    <td className="readout py-2.5 pr-3">{p.concurrency}</td>
                    <td className="readout py-2.5 pr-3 text-right text-signal">
                      {p.output_tps_total.toFixed(1)}
                    </td>
                    <td className="readout py-2.5 pr-3 text-right">
                      {p.output_tps_per_stream.toFixed(1)}
                    </td>
                    <td className="readout py-2.5 pr-3 text-right text-dim">
                      {p.ttft_p50_ms ? `${Math.round(p.ttft_p50_ms)}ms` : "—"}
                    </td>
                    <td className="readout py-2.5 pr-3 text-right text-dim">
                      {p.ttft_p95_ms ? `${Math.round(p.ttft_p95_ms)}ms` : "—"}
                    </td>
                    <td className="readout py-2.5 text-right text-dim">
                      {p.tpot_p50_ms ? `${p.tpot_p50_ms.toFixed(1)}ms` : "—"}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {flags.length > 0 && (
            <div className="mt-8">
              <div className="label mb-3">serving configuration</div>
              <p className="mb-4 text-[11px] leading-relaxed text-dimmer">
                Results are only comparable between targets with identical flags.
                These are recorded from the live server, not from memory.
              </p>
              <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 font-mono text-[11px]">
                {flags.map(([k, v]) => (
                  <div key={k} className="contents">
                    <dt className="text-dimmer">{k}</dt>
                    <dd className="text-dim">{String(v)}</dd>
                  </div>
                ))}
              </dl>
            </div>
          )}
        </section>
      </div>

      {run.target.notes && (
        <section className="mt-14 border-t border-rule pt-8">
          <div className="label mb-3">notes</div>
          <p className="max-w-3xl text-xs leading-relaxed text-dim">{run.target.notes}</p>
        </section>
      )}

      <section className="mt-10 flex flex-wrap items-center gap-4 border-t border-rule pt-8">
        <a
          href={`/api/card/${run.run_id.slice(0, 8)}`}
          className="border border-rule-bright px-4 py-2 text-xs transition-colors hover:border-signal hover:text-signal"
        >
          download score card ↓
        </a>
        <span className="text-[11px] text-dimmer">
          PNG, sized for sharing. Same image the link preview uses.
        </span>
      </section>
    </main>
  );
}