---
import rawData from "../data/benchmark-report.json";

// Detect format: multi-model (has `runs`) vs legacy single-run
type Run = {
  timestamp: string;
  provider: string;
  model: string;
  tasks: Array<{
    taskId: string;
    tier: string;
    strategy: string;
    status: "pass" | "fail" | "error";
    durationMs: number;
    tokensUsed: number;
    estimatedCost: number;
    iterations: number;
    output: string;
    error?: string;
  }>;
  overhead: Array<{ label: string; durationMs: number; samples: number }>;
  summary: {
    totalTasks: number;
    passed: number;
    failed: number;
    errors: number;
    totalDurationMs: number;
    totalTokens: number;
    totalCost: number;
    avgLatencyMs: number;
    byTier: Record<string, { passed: number; total: number; avgMs: number }>;
  };
};

type MultiModelReport = { generatedAt: string; runs: Run[] };

type QualityDimension = "accuracy" | "reasoning" | "tool-mastery" | "memory-fidelity"
  | "loop-intelligence" | "resilience" | "efficiency" | "reliability"
  | "scope-discipline" | "honest-uncertainty"

type DimensionScore = { dimension: QualityDimension; score: number; evidence?: string }

type TaskVariantReport = {
  taskId: string; modelVariantId: string; variantId: string; variantLabel: string
  meanScores: DimensionScore[]; variance: number; meanTokens: number; passRate: number
}

type AblationResult = {
  taskId: string; taskName: string; modelVariantId: string
  variants: TaskVariantReport[]; harnessLift: number; bestVariantId: string
}

type SessionReport = MultiModelReport & {
  sessionId?: string; sessionVersion?: string; gitSha?: string
  ablation?: AblationResult[]
  dimensionSummary?: { dimension: QualityDimension; byVariant: { variantId: string; meanScore: number }[] }[]
  drift?: { hasRegressions: boolean; regressions: { taskId: string; variantId: string; dimension: string; delta: number }[] }
}

const isMultiModel = "runs" in rawData && Array.isArray((rawData as any).runs);

// Compute generatedAt: use explicit field if present, otherwise derive from the latest run timestamp
function deriveGeneratedAt(data: any): string {
  if (data.generatedAt) return data.generatedAt;
  const runs: Run[] = data.runs ?? [data];
  const timestamps = runs.map((r) => r.timestamp).filter(Boolean).sort();
  return timestamps.length > 0 ? timestamps[timestamps.length - 1]! : new Date().toISOString();
}

const report: MultiModelReport = isMultiModel
  ? { ...(rawData as unknown as MultiModelReport), generatedAt: deriveGeneratedAt(rawData) }
  : {
      generatedAt: deriveGeneratedAt(rawData),
      runs: [rawData as unknown as Run],
    };

const { runs } = report;
const sessionReport = rawData as unknown as SessionReport
const hasSession = !!(sessionReport.ablation?.length || sessionReport.dimensionSummary?.length)
const ablation = sessionReport.ablation ?? []
const dimensionSummary = sessionReport.dimensionSummary ?? []

// Ordered variant IDs for column display
const variantOrder = [
  "bare-llm", "manual-react",
  "langchain-react", "vercel-ai-sdk", "openai-agents", "mastra-agent", "llamaindex-ts",
  "ra-reasoning", "ra-full",
]
const variantLabels: Record<string, string> = {
  "bare-llm": "Bare", "manual-react": "Manual",
  "langchain-react": "LC", "vercel-ai-sdk": "Vercel", "openai-agents": "OAI",
  "mastra-agent": "Mastra", "llamaindex-ts": "LlmIdx",
  "ra-reasoning": "RA-R", "ra-full": "RA-Full",
}

function pct(score: number) { return Math.round(score * 100) }
function scoreClass(score: number) {
  return score >= 0.8 ? "text-green-400" : score >= 0.5 ? "text-yellow-400" : "text-red-400"
}

const isMultiRun = runs.length > 1;

// Tiers and descriptions
const tiers = ["trivial", "simple", "moderate", "complex", "expert"] as const;
const tierDescriptions: Record<string, string> = {
  trivial: "MMLU-CS \u00b7 MATH baseline \u00b7 AgentEval -- baseline capability checks",
  simple: "HumanEval Easy \u00b7 BIG-Bench Hard CS \u00b7 MMLU-Pro SE -- 1-2 reasoning steps",
  moderate: "HumanEval Medium \u00b7 BIG-Bench Hard \u00b7 SWE-bench lite -- multi-step ReAct",
  complex: "AgentBench \u00b7 SWE-bench Security \u00b7 TestEval -- plan-execute analysis",
  expert: "BIG-Bench Hard algorithms \u00b7 GAIA Level 3 \u00b7 MMLU-Pro CS -- tree-of-thought",
};

// Per-run computed data
const runData = runs.map((run) => {
  const tasksByTier: Record<string, typeof run.tasks> = {};
  const tierStrategyMap: Record<string, string> = {};
  for (const task of run.tasks) {
    if (!tasksByTier[task.tier]) tasksByTier[task.tier] = [];
    tasksByTier[task.tier].push(task);
    if (!tierStrategyMap[task.tier]) tierStrategyMap[task.tier] = task.strategy;
  }
  const passRate = Math.round((run.summary.passed / run.summary.totalTasks) * 100);
  const isRealRun = run.provider !== "test";
  return { run, tasksByTier, tierStrategyMap, passRate, isRealRun };
});

// Use first run's overhead for the overhead table
const overhead = runs[0]?.overhead ?? [];

function formatMs(ms: number): string {
  if (ms >= 60000) return `${(ms / 60000).toFixed(1)}m`;
  if (ms >= 1000) return `${(ms / 1000).toFixed(1)}s`;
  return ms < 0.01 ? "<0.01ms" : `${ms.toFixed(2)}ms`;
}

function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

function passRateClass(pct: number): string {
  if (pct >= 90) return "pass-full";
  if (pct >= 70) return "pass-high";
  return "pass-low";
}

function modelLabel(run: Run): string {
  return `${run.provider}/${run.model}`;
}
---

<div class="benchmark-results">
  {hasSession && sessionReport.drift?.hasRegressions && (
    <div class="mb-6 p-3 bg-red-900/40 border border-red-700 rounded-lg text-sm text-red-300">
      ⚠ Regressions detected vs. baseline ({sessionReport.drift.regressions.length} dimensions).
      Run <code class="font-mono text-red-200">--save-baseline</code> after reviewing.
    </div>
  )}
  {/* ── Header / Meta ── */}
  <div class="benchmark-meta">
    <span>
      <strong>Last generated:</strong> {formatDate(report.generatedAt)}
    </span>
    <span class="meta-sep">&middot;</span>
    <span>
      <strong>{isMultiRun ? "Models" : "Model"}:</strong>
      {runs.map((r, i) => (
        <span>
          {i > 0 && <span class="meta-sep">,&nbsp;</span>}
          <code>{modelLabel(r)}</code>
        </span>
      ))}
    </span>
    {runs.every((r) => r.provider === "test") && (
      <span class="meta-note">Warning: Framework-overhead-only run (test provider -- no real LLM calls)</span>
    )}
  </div>

  {/* ── Comparison Matrix (always shown) ── */}
  <h3>Comparison Matrix</h3>
  <div class="table-scroll">
    <table class="comparison-matrix">
      <thead>
        <tr>
          <th>Tier</th>
          {runs.map((r) => (
            <th class="model-col"><code>{modelLabel(r)}</code></th>
          ))}
        </tr>
      </thead>
      <tbody>
        {tiers.map((tier) => (
          <tr>
            <td><strong>{tier.charAt(0).toUpperCase() + tier.slice(1)}</strong></td>
            {runs.map((r) => {
              const tierData = r.summary.byTier[tier];
              if (!tierData || tierData.total === 0) return <td class="no-data">--</td>;
              const pct = Math.round((tierData.passed / tierData.total) * 100);
              return (
                <td class={passRateClass(pct)}>
                  {tierData.passed}/{tierData.total} ({pct}%)
                </td>
              );
            })}
          </tr>
        ))}
        <tr class="total-row">
          <td><strong>Total</strong></td>
          {runs.map((r) => {
            const pct = Math.round((r.summary.passed / r.summary.totalTasks) * 100);
            return (
              <td class={passRateClass(pct)}>
                <strong>{r.summary.passed}/{r.summary.totalTasks} ({pct}%)</strong>
              </td>
            );
          })}
        </tr>
      </tbody>
    </table>
  </div>

  {/* ── Per-model summary cards ── */}
  <h3>{isMultiRun ? "Model Summaries" : "Summary"}</h3>
  {runData.map(({ run, passRate }) => (
    <div class="model-summary-section">
      {isMultiRun && (
        <h4 class="model-heading"><code>{modelLabel(run)}</code></h4>
      )}
      <div class="benchmark-summary">
        <div class="summary-card">
          <span class="summary-value">{run.summary.passed}/{run.summary.totalTasks}</span>
          <span class="summary-label">Tasks Passed</span>
        </div>
        <div class={`summary-card ${passRate >= 90 ? "card-success" : passRate >= 70 ? "card-warn" : "card-error"}`}>
          <span class="summary-value">{passRate}%</span>
          <span class="summary-label">Pass Rate</span>
        </div>
        <div class="summary-card">
          <span class="summary-value">{formatMs(run.summary.avgLatencyMs)}</span>
          <span class="summary-label">Avg Latency</span>
        </div>
        <div class="summary-card">
          <span class="summary-value">{formatMs(run.summary.totalDurationMs)}</span>
          <span class="summary-label">Total Duration</span>
        </div>
        <div class="summary-card">
          <span class="summary-value">{run.summary.totalTokens.toLocaleString()}</span>
          <span class="summary-label">Total Tokens</span>
        </div>
        <div class="summary-card">
          <span class="summary-value">${run.summary.totalCost.toFixed(4)}</span>
          <span class="summary-label">Total Cost (USD)</span>
        </div>
      </div>
    </div>
  ))}

  {/* ── Per-model task drilldown ── */}
  <h3>{isMultiRun ? "Task Details by Model" : "Individual Tasks"}</h3>
  {runData.map(({ run, tasksByTier }) => (
    <div class="model-drilldown">
      {isMultiRun && (
        <h4 class="model-heading"><code>{modelLabel(run)}</code></h4>
      )}
      {tiers.map((tier) => {
        const tierTasks = tasksByTier[tier];
        const tierPassed = tierTasks?.filter((t) => t.status === "pass").length ?? 0;
        return tierTasks ? (
          <details>
            <summary>
              <strong>{tier.charAt(0).toUpperCase() + tier.slice(1)}</strong>
              <span class="tier-desc-inline">{tierDescriptions[tier] || ""}</span>
              <span class="tier-badge">{tierPassed}/{tierTasks.length} passed</span>
            </summary>
            <div class="table-inner table-scroll">
            <table>
              <thead>
                <tr>
                  <th class="col-task">Task</th>
                  <th class="col-strategy">Strategy</th>
                  <th class="col-status">Status</th>
                  <th class="col-num">Steps</th>
                  <th class="col-num">Latency</th>
                  <th class="col-num">Tokens</th>
                  <th class="col-num">Cost</th>
                </tr>
              </thead>
              <tbody>
                {tierTasks.map((task) => (
                  <tr>
                    <td class="col-task"><code>{task.taskId}</code></td>
                    <td class="col-strategy"><code>{task.strategy}</code></td>
                    <td class={`col-status ${task.status === "pass" ? "status-pass" : "status-fail"}`}>
                      {task.status === "pass" ? "✓" : task.status === "fail" ? "✗" : "⚠"}
                    </td>
                    <td class="col-num">{task.iterations > 0 ? task.iterations : "—"}</td>
                    <td class="col-num">{formatMs(task.durationMs)}</td>
                    <td class="col-num">{task.tokensUsed > 0 ? task.tokensUsed.toLocaleString() : "—"}</td>
                    <td class="col-num">{task.estimatedCost > 0 ? `$${task.estimatedCost.toFixed(4)}` : "—"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            </div>
          </details>
        ) : null;
      })}
    </div>
  ))}

  {/* ── Framework Overhead ── */}
  <h3>Framework Overhead</h3>
  <p class="overhead-note">Measured with the <code>test</code> provider to isolate pure Effect-TS layer composition cost -- independent of LLM latency.</p>
  <table>
    <thead>
      <tr>
        <th>Measurement</th>
        <th>Avg Duration</th>
        <th>Samples</th>
      </tr>
    </thead>
    <tbody>
      {overhead.map((item) => (
        <tr>
          <td>{item.label.replace(/-/g, " ").replace(/\b\w/g, (c: string) => c.toUpperCase())}</td>
          <td>{formatMs(item.durationMs)}</td>
          <td>{item.samples}</td>
        </tr>
      ))}
    </tbody>
  </table>

  {hasSession && (
    <div class="mt-10">
      <h2 class="text-lg font-semibold text-violet-400 mb-4">Framework Landscape — Harness Lift</h2>
      {[...new Set(ablation.map(a => a.modelVariantId))].map(modelId => {
        const variantAvg = variantOrder.map(vid => {
          const reports = ablation.flatMap(a => a.variants.filter(v => v.variantId === vid && a.modelVariantId === modelId))
          if (!reports.length) return null
          const avg = reports.reduce((s, r) => s + (r.meanScores.find(d => d.dimension === "accuracy")?.score ?? 0), 0) / reports.length
          return { id: vid, label: variantLabels[vid] ?? vid, score: avg }
        }).filter(Boolean) as { id: string; label: string; score: number }[]

        const baseScore = variantAvg.find(v => v.id === "bare-llm")?.score ?? 0
        const fullScore = variantAvg.find(v => v.id === "ra-full")?.score ?? 0

        return (
          <div class="mb-6 p-4 bg-gray-800 rounded-lg border border-gray-700">
            <div class="text-sm text-gray-400 mb-3 font-mono">{modelId}</div>
            {variantAvg.map(v => {
              const barWidth = Math.round(v.score * 100)
              const delta = v.id !== "bare-llm" ? v.score - baseScore : null
              return (
                <div class="flex items-center gap-3 mb-2 text-sm">
                  <span class="w-20 text-gray-300 font-mono text-xs">{v.label}</span>
                  <div class="flex-1 bg-gray-700 rounded h-5 overflow-hidden">
                    <div class={`h-full rounded ${v.id === "ra-full" ? "bg-violet-500" : v.id.startsWith("ra-") ? "bg-violet-700" : "bg-gray-500"}`}
                         style={`width:${barWidth}%`} />
                  </div>
                  <span class={`w-10 text-right font-mono ${scoreClass(v.score)}`}>{pct(v.score)}%</span>
                  {delta !== null && (
                    <span class={`w-14 text-right font-mono text-xs ${delta >= 0 ? "text-green-400" : "text-red-400"}`}>
                      {delta >= 0 ? "+" : ""}{pct(delta)}pp
                    </span>
                  )}
                </div>
              )
            })}
            <div class="mt-3 text-xs text-gray-500">
              Total RA lift: <span class="text-violet-400 font-mono">+{pct(fullScore - baseScore)}pp</span> over bare LLM
            </div>
          </div>
        )
      })}
    </div>
  )}

  {hasSession && ablation.length > 0 && (
    <div class="mt-10">
      <h2 class="text-lg font-semibold text-violet-400 mb-4">Per-Task Ablation</h2>
      <div class="overflow-x-auto">
        <table class="w-full text-xs font-mono border-collapse">
          <thead>
            <tr class="border-b border-gray-600 text-gray-400">
              <th class="text-left py-2 pr-4 w-48">Task</th>
              {variantOrder.map(vid => (
                <th class="text-center px-1 w-12">{variantLabels[vid] ?? vid}</th>
              ))}
              <th class="text-center px-1 w-12">Reli.</th>
              <th class="text-center px-1 w-14">Lift</th>
            </tr>
          </thead>
          <tbody>
            {ablation.filter(a => a.modelVariantId === (ablation[0]?.modelVariantId ?? "")).map(a => {
              const byVariant = Object.fromEntries(a.variants.map(v => [
                v.variantId,
                {
                  acc: v.meanScores.find(d => d.dimension === "accuracy")?.score ?? 0,
                  rel: v.meanScores.find(d => d.dimension === "reliability")?.score ?? 1,
                }
              ]))
              const raFull = byVariant["ra-full"]
              return (
                <tr class="border-b border-gray-800 hover:bg-gray-800/40">
                  <td class="py-1.5 pr-4 text-gray-300 truncate max-w-xs">{a.taskId}</td>
                  {variantOrder.map(vid => {
                    const s = byVariant[vid]?.acc
                    return (
                      <td class={`text-center px-1 ${s !== undefined ? scoreClass(s) : "text-gray-600"}`}>
                        {s !== undefined ? pct(s) : "—"}
                      </td>
                    )
                  })}
                  <td class={`text-center px-1 ${raFull ? scoreClass(raFull.rel) : "text-gray-600"}`}>
                    {raFull ? pct(raFull.rel) : "—"}
                  </td>
                  <td class={`text-center px-1 font-semibold ${a.harnessLift >= 0 ? "text-violet-400" : "text-red-400"}`}>
                    {a.harnessLift >= 0 ? "+" : ""}{pct(a.harnessLift)}
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
      <p class="text-xs text-gray-500 mt-2">
        All scores 0–100. Reli. = reliability (1 − stddev across 3 runs). Lift = ra-full minus bare-llm on accuracy.
      </p>
    </div>
  )}
</div>

<style>
  .benchmark-results {
    margin-top: 1rem;
  }

  /* ── Override Starlight's low-contrast purple code color in dark mode ── */
  /* Starlight uses --sl-color-accent for inline code text, which is low-contrast
     on gray-5/6 backgrounds in dark mode. Use the main text color instead. */
  .benchmark-results code {
    color: var(--sl-color-text);
    background: var(--sl-color-gray-5);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
  }

  /* ── Meta bar ── */
  .benchmark-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    background: var(--sl-color-gray-6);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
  }
  .meta-sep {
    color: var(--sl-color-gray-3);
  }
  .benchmark-meta code {
    font-size: 0.82em;
  }
  .meta-note {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    color: var(--sl-color-orange-high, #f59e0b);
    font-size: 0.82em;
  }

  /* ── Summary cards ── */
  .benchmark-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  @media (max-width: 640px) {
    .benchmark-summary {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 380px) {
    .benchmark-summary {
      grid-template-columns: 1fr;
    }
  }
  .summary-card {
    background: var(--sl-color-gray-6);
    border: 1px solid var(--sl-color-gray-5);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    height: 92px;
    justify-content: center;
    overflow: hidden;
  }
  .summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sl-color-white);
    line-height: 1.1;
    white-space: nowrap;
  }
  .summary-label {
    font-size: 0.72rem;
    color: var(--sl-color-gray-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* ── Model section headings ── */
  .model-heading {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
  }
  .model-heading code {
    background: var(--sl-color-gray-5);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
  }
  .model-summary-section {
    margin-bottom: 1rem;
  }
  .model-drilldown {
    margin-bottom: 1.5rem;
  }

  /* ── Comparison matrix ── */
  .table-scroll {
    overflow-x: auto;
    margin-bottom: 1.5rem;
  }
  .comparison-matrix {
    min-width: 480px;
    table-layout: fixed;
  }
  .comparison-matrix th:first-child,
  .comparison-matrix td:first-child {
    width: 130px;
    min-width: 130px;
  }
  .comparison-matrix .model-col {
    text-align: center;
    min-width: 180px;
  }
  .comparison-matrix td:not(:first-child) {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
  }
  .no-data {
    color: var(--sl-color-gray-3);
  }

  /* ── Tables ── */
  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }
  th, td {
    padding: 0.6rem 1.1rem;
    border-bottom: 1px solid var(--sl-color-gray-5);
    text-align: left;
    vertical-align: middle;
  }
  th {
    background: var(--sl-color-gray-6);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  th.col-num    { text-align: right; }
  th.col-status { text-align: center; }
  .total-row td {
    border-top: 2px solid var(--sl-color-gray-4);
    background: var(--sl-color-gray-6);
  }
  .tier-desc {
    font-size: 0.8rem;
    color: var(--sl-color-gray-2);
  }
  .tier-desc-inline {
    font-size: 0.75rem;
    color: var(--sl-color-gray-3);
    margin-left: 0.25rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pass-full { color: var(--sl-color-green-high, #22c55e); }
  .pass-high { color: var(--sl-color-blue-high, #3b82f6); }
  .pass-low  { color: var(--sl-color-orange-high, #f59e0b); }
  .status-pass { color: var(--sl-color-green-high, #22c55e); }
  .status-fail { color: var(--sl-color-red-high, #ef4444); }

  /* ── Color-coded card borders ── */
  .card-success { border-color: var(--sl-color-green-high, #22c55e); }
  .card-warn { border-color: var(--sl-color-orange-high, #f59e0b); }
  .card-error { border-color: var(--sl-color-red-high, #ef4444); }

  /* ── Details/summary ── */
  details {
    margin-bottom: 0.75rem;
    border: 1px solid var(--sl-color-gray-5);
    border-radius: 0.375rem;
    overflow: hidden;
  }
  details summary {
    cursor: pointer;
    padding: 0.6rem 0.75rem;
    background: var(--sl-color-gray-6);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    user-select: none;
  }
  details summary:hover {
    background: var(--sl-color-gray-5);
  }
  details[open] summary {
    border-bottom: 1px solid var(--sl-color-gray-5);
  }
  details table {
    margin: 0;
  }
  .tier-badge {
    font-size: 0.75rem;
    background: var(--sl-color-gray-5);
    color: var(--sl-color-gray-2);
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    font-weight: 400;
    margin-left: auto;
    flex-shrink: 0;
  }

  /* ── Task drilldown table — scrollable on narrow viewports ── */
  .table-inner table {
    min-width: 680px;
  }

  /* ── Task drilldown column widths & alignment ── */
  .col-task    { width: 26%; min-width: 150px; }
  .col-strategy{ width: 22%; min-width: 170px; } /* plan-execute-reflect needs room */
  .col-status  { width: 7%;  min-width: 52px;  text-align: center; font-weight: 600; font-size: 1.05rem; }
  .col-num     { width: 9%;  min-width: 76px;  text-align: right; font-variant-numeric: tabular-nums; }

  /* ── Overhead note ── */
  .overhead-note {
    font-size: 0.85rem;
    color: var(--sl-color-gray-2);
    margin-bottom: 0.5rem;
  }
</style>
