/**
 * llmindex.io — dedicated full-page live efficiency frontier
 * Author:  Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * License: Proprietary — © Simon-Pierre Boucher, all rights reserved
 */
import type { Metadata } from 'next';
import Link from 'next/link';
import { FrontierChart, type FrontierPoint } from '@/components/FrontierChart';
import { getEfficiencyData } from '@/lib/data';

export const metadata: Metadata = {
  title: 'Efficiency Frontier',
  description:
    'Live Pareto frontier of LLM quality vs. measured cost — every point with 95% confidence intervals, updated automatically as models finish the benchmark.',
};
export const revalidate = 300;

export default async function FrontierPage() {
  const data = await getEfficiencyData();
  const initial: FrontierPoint[] = data.map((p) => ({
    model: p.slug,
    name: p.name,
    provider: p.provider,
    score: p.score,
    score_low: p.scoreLow,
    score_high: p.scoreHigh,
    latency_p50: p.latencyP50,
    cost_per_1k_items: Number(p.costPer1kItems.toFixed(4)),
    on_frontier: p.onFrontier,
  }));

  return (
    <div className="space-y-6">
      <div className="space-y-2">
        <h1 className="text-2xl font-bold tracking-tight text-zinc-900 sm:text-3xl">
          Efficiency frontier
        </h1>
        <p className="max-w-3xl text-sm leading-relaxed text-zinc-600">
          Global Index versus <em>measured</em> cost per 1,000 evaluation items (metered tokens ×
          live pricing), on a log scale. Models on the{' '}
          <span className="font-semibold text-emerald-700">frontier</span> are not dominated on
          both axes; every other model is strictly worse on quality <em>and</em> cost than some
          frontier point. By design this is published as a set — never collapsed into a single
          blended “value” number. The chart updates itself as the live benchmark lands each model.
        </p>
      </div>

      {/* full-bleed chart: break out of the content column on large screens */}
      <div className="lg:relative lg:left-1/2 lg:w-[min(96vw,1500px)] lg:-translate-x-1/2">
        <FrontierChart initial={initial} />
      </div>

      <p className="text-sm text-zinc-500">
        Prefer numbers? The same data lives in the{' '}
        <Link href="/" className="underline hover:text-emerald-600">
          leaderboard table
        </Link>{' '}
        and the{' '}
        <a href="/api/v1/efficiency" className="underline hover:text-emerald-600">
          public API
        </a>
        . Methodology: cost is the mean measured cost per item across a model&apos;s scored
        domains × 1,000; whiskers are the 95% CI of the Global Index; the frontier is computed on
        (score ↑, cost ↓) dominance.
      </p>
    </div>
  );
}