import type { Metadata } from 'next';
import Link from 'next/link';
import type { ScatterPoint } from '@/components/charts';
import { EfficiencyScatter } from '@/components/intelligence/client-charts';
import { ChangeRow } from '@/components/changes/change-row';
import { DistBars, Methodology, RankChips, TrustChip } from '@/components/intelligence/bits';
import { SectionNav, Ticker, type TickerItem } from '@/components/layout/terminal';
import { Chip, OpennessBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink } from '@/components/ui/entity';
import { Container, Note, PageHeader, Section } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { intel } from '@/lib/api';
import { safe } from '@/lib/api';
import { fmtDate, fmtDateTime, fmtInt, fmtParams, fmtScore, fmtTokens, fmtUsdPerM, num } from '@/lib/format';
import { eventTone, routes, SITE_NAME, SITE_URL } from '@/lib/site';
import { eventDate, type Deployment, type EntitySummary, type ModelRef } from '@/lib/types';

export const revalidate = 300;

const TITLE = 'The AI frontier right now — leaders per benchmark, price, context and open weights';
const DESC = 'What defines the AI frontier today: the latest major models, the leader and runner-up of every benchmark comparability group, the cheapest frontier offers, the largest context windows, the open-weight frontier, the quality-vs-price Pareto set, agentic and multimodal leaders and recent movements — observed dimensions only, no composite score.';
export const metadata: Metadata = {
  title: TITLE,
  description: DESC,
  alternates: { canonical: routes.frontier() },
  openGraph: { title: `${TITLE} | ${SITE_NAME}`, description: DESC, url: `${SITE_URL}${routes.frontier()}`, type: 'website', siteName: SITE_NAME },
  twitter: { card: 'summary_large_image', title: TITLE, description: DESC },
};

const NAV = [
  { id: 'latest', label: 'Latest major models' },
  { id: 'benchmarks', label: 'Benchmark frontier' },
  { id: 'price', label: 'Price frontier' },
  { id: 'context', label: 'Context frontier' },
  { id: 'open', label: 'Open-weight frontier' },
  { id: 'efficiency', label: 'Efficiency frontier' },
  { id: 'agentic', label: 'Agentic' },
  { id: 'multimodal', label: 'Multimodal' },
  { id: 'movements', label: 'Recent movements' },
];

const modelHref = (m: { slug: string; entity_type?: string }) => routes.entity({ entity_type: m.entity_type ?? 'model', slug: m.slug });
const orgName = (m: ModelRef | EntitySummary) => m.organization?.name ?? null;

function DeploymentStrip({ d, label }: { d: Deployment | null | undefined; label: string }) {
  return (
    <div className="min-w-0 border-b border-rule py-3 md:border-b-0 md:border-r md:pr-6 last:md:border-r-0">
      <p className="eyebrow">{label}</p>
      {d && d.model ? (
        <>
          <p className="mt-1 flex flex-wrap items-baseline gap-x-2">
            <EntityLink e={d.model} className="text-[15px] font-medium" />
            {d.model.organization && <span className="text-xs text-ink-3">{d.model.organization.name}</span>}
          </p>
          <p className="tnum mt-1 text-[22px] font-semibold leading-none text-accent-2">
            {fmtUsdPerM(d.prices.output)} <span className="text-xs font-normal text-ink-3">output / 1M</span>
          </p>
          <p className="tnum mt-1 text-xs text-ink-3">
            input {fmtUsdPerM(d.prices.input)} · context {fmtTokens(d.context_length)} · via <EntityLink e={d.provider} className="text-ink-2" /> · observed {fmtDate(d.observed_at)}
          </p>
        </>
      ) : (
        <p className="mt-1 text-sm text-ink-3">No frontier model has a current priced offer in the API response.</p>
      )}
    </div>
  );
}

export default async function FrontierPage() {
  const [f, idx] = await Promise.all([safe(intel.frontier(12)), safe(intel.priceIndex(30))]);
  if (!f) {
    return (
      <Container wide>
        <PageHeader eyebrow="What defines the AI frontier right now" title="Frontier" lede="Observed leaders per dimension — benchmarks, price, context, open weights, efficiency — from the atlas. No composite score." />
        <Unavailable what="Frontier" reason="GET /frontier did not answer. Nothing here is cached or hardcoded." />
      </Container>
    );
  }
  const latest = f.latest_major_models ?? [];
  const bench = f.benchmark_frontier ?? [];
  const pf = f.price_frontier;
  const ctx = f.context_frontier ?? [];
  const open = f.open_weight_frontier;
  const eff = f.efficiency_frontier;
  const agentic = f.agentic_frontier ?? [];
  const multi = f.multimodal_frontier ?? [];
  const moves = f.recent_frontier_movements ?? [];
  const compo = pf?.composition ?? f.price_frontier?.composition ?? null;

  // efficiency scatter
  const points: ScatterPoint[] = (eff?.points ?? [])
    .filter((p) => num(p.x) !== null && num(p.y) !== null)
    .map((p) => ({ id: p.id, x: num(p.x) as number, y: num(p.y) as number, label: p.model.name, sub: `${p.model.organization ?? ''}${p.provider ? ` · via ${p.provider.name}` : ''} · rank ${p.rank}`, href: modelHref(p.model), color: p.pareto ? 'var(--accent-2)' : undefined }));
  const frontierSet = new Set(eff?.frontier ?? []);
  const frontierLine = points.filter((p) => frontierSet.has(p.id)).sort((a, b) => a.x - b.x);
  const ticker: TickerItem[] = moves.slice(0, 24).map((e) => ({ id: e.id, tone: eventTone(e.event_type), href: e.entity ? routes.entity(e.entity) : routes.changes(), label: e.summary.length > 100 ? `${e.summary.slice(0, 99)}…` : e.summary, meta: num(e.percent_change) !== null ? `${(num(e.percent_change) as number) > 0 ? '+' : ''}${(num(e.percent_change) as number).toFixed(0)}%` : fmtDate(eventDate(e)) }));
  const ld = {
    '@context': 'https://schema.org',
    '@type': 'Dataset',
    name: 'AI Atlas Frontier',
    description: DESC,
    url: `${SITE_URL}${routes.frontier()}`,
    dateModified: f.generated_at,
    creator: { '@type': 'Organization', name: SITE_NAME, url: SITE_URL },
    isAccessibleForFree: true,
  };

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <PageHeader eyebrow="What defines the AI frontier right now" title="Frontier" lede="Who leads, on what, since when — one observed dimension at a time. Every leader comes from a benchmark comparability group, a published price or a sourced attribute; the atlas never sums them into a single score." aside={f.generated_at ? <p className="tnum text-sm text-ink-3" title={f.generated_at}>computed {fmtDateTime(f.generated_at)}</p> : undefined} />
      <SectionNav items={NAV} />
      {ticker.length > 0 && <Ticker items={ticker} className="mt-3" label="Movements" />}

      {/* ---------------------------------------------------------------------------------------------- latest */}
      <Section id="latest" eyebrow="Latest major models" title="Most recent importance-3 model events" lede="New canonical model releases, newest first. Facts are the model's sourced attributes at crawl time." action={{ href: `${routes.changes()}?type=NEW_MODEL&importance_min=3`, label: 'All new models' }} hairline={false}>
        {latest.length === 0 ? (
          <EmptyState title="No major model event returned">The API returned an empty list for latest_major_models.</EmptyState>
        ) : (
          <DataTable caption="Latest major models">
            <thead>
              <tr>
                <Th>Model</Th>
                <Th>Organization</Th>
                <Th>Released</Th>
                <Th>Key facts</Th>
                <Th>Evidence</Th>
              </tr>
            </thead>
            <tbody>
              {latest.map((e) => {
                const m = e.entity;
                const a = m?.attributes ?? {};
                return (
                  <tr key={e.id}>
                    <Td primary>
                      {m ? <EntityLink e={m} /> : <span>{e.summary}</span>}
                      {typeof a.openness === 'string' && <OpennessBadge openness={a.openness} className="ml-2" />}
                    </Td>
                    <Td label="Organization" className="text-ink-2">{m?.organization ? <Link href={routes.entity({ entity_type: 'company', slug: m.organization.slug })} className="hover:text-accent">{m.organization.name}</Link> : '—'}</Td>
                    <Td label="Released" className="tnum text-ink-2 whitespace-nowrap">{typeof a.release_date === 'string' ? fmtDate(a.release_date) : fmtDate(eventDate(e))}</Td>
                    <Td label="Key facts" className="tnum text-xs text-ink-2">
                      {[num(a.parameter_count) !== null ? `${fmtParams(a.parameter_count)} params` : null, num(a.context_length) !== null ? `${fmtTokens(a.context_length)} context` : null, Array.isArray(a.modalities) && a.modalities.length ? (a.modalities as string[]).join(' · ') : null, typeof a.license === 'string' ? a.license : null].filter(Boolean).join(' · ') || '—'}
                    </Td>
                    <Td label="Evidence" className="text-xs">
                      {e.source_url ? (
                        <a href={e.source_url} target="_blank" rel="noopener noreferrer" className="text-ink-2 hover:text-accent">
                          {new URL(e.source_url).hostname.replace(/^www\./, '')}
                        </a>
                      ) : (
                        <span className="text-ink-3">—</span>
                      )}
                      {e.connector_name && <span className="mono ml-1.5 text-[10px] text-ink-3">{e.connector_name}</span>}
                      {e.is_backfill && <span className="ml-1.5 text-[10px] text-ink-3">(back-filled date)</span>}
                    </Td>
                  </tr>
                );
              })}
            </tbody>
          </DataTable>
        )}
      </Section>

      {/* ------------------------------------------------------------------------------------------ benchmarks */}
      <Section id="benchmarks" eyebrow="Benchmark frontier" title="Leader and runner-up per benchmark" lede="One row per benchmark with ≥ 20 current results: the primary comparability group, its leader, the second model and the gap between them, with the trust level of the leading row." action={{ href: routes.benchmarks(), label: 'All leaderboards' }}>
        {bench.length === 0 ? (
          <EmptyState title="No benchmark group qualifies yet">The frontier lists groups with at least 20 current results.</EmptyState>
        ) : (
          <DataTable caption="Benchmark frontier">
            <thead>
              <tr>
                <Th>Benchmark</Th>
                <Th>Leader</Th>
                <Th num>Score</Th>
                <Th>Second</Th>
                <Th num>Gap</Th>
                <Th>Trust</Th>
              </tr>
            </thead>
            <tbody>
              {bench.map((b) => (
                <tr key={b.benchmark.id}>
                  <Td primary>
                    <Link href={routes.benchmark(b.benchmark.slug)} className="text-ink hover:text-accent hover:underline">
                      {b.benchmark.name}
                    </Link>
                    {b.group && <span className="mono block text-[11px] text-ink-3">{b.group.label} · n={fmtInt(b.group.model_count)} models</span>}
                  </Td>
                  <Td label="Leader">
                    {b.leader ? (
                      <>
                        <Link href={modelHref(b.leader.model)} className="font-medium text-ink hover:text-accent hover:underline">
                          {b.leader.model.name}
                        </Link>
                        {orgName(b.leader.model) && <span className="ml-1.5 text-xs text-ink-3">{orgName(b.leader.model)}</span>}
                      </>
                    ) : (
                      '—'
                    )}
                  </Td>
                  <Td num label="Score" className="tnum font-medium">{b.leader ? `${fmtScore(b.leader.score)}${b.leader.unit ? ` ${b.leader.unit}` : ''}` : '—'}</Td>
                  <Td label="Second" className="text-ink-2">
                    {b.second ? (
                      <>
                        <Link href={modelHref(b.second.model)} className="hover:text-accent">
                          {b.second.model.name}
                        </Link>{' '}
                        <span className="tnum text-xs text-ink-3">{fmtScore(b.second.score)}</span>
                      </>
                    ) : (
                      '—'
                    )}
                  </Td>
                  <Td num label="Gap" className="tnum text-ink-2">{num(b.gap) === null ? '—' : fmtScore(b.gap)}</Td>
                  <Td label="Trust">
                    <TrustChip level={b.leader?.trust_level} label={b.leader?.trust_label} />
                  </Td>
                </tr>
              ))}
            </tbody>
          </DataTable>
        )}
        <Methodology text="Leader = best current row of the primary comparability group (canonical metric × task-defining configuration), one row per canonical model. Gap = leader − second in the metric's unit." />
      </Section>

      {/* ----------------------------------------------------------------------------------------------- price */}
      <Section id="price" eyebrow="Price frontier" title="Cheapest frontier output" lede="Among frontier models, the cheapest current published output price — and the cheapest with a context window of at least 1M tokens — with the provider that publishes it." action={{ href: `${routes.prices()}?sort=cheapest_frontier`, label: 'Price terminal' }}>
        <div className="grid grid-cols-[minmax(0,1fr)] gap-x-6 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1.2fr)]">
          <DeploymentStrip d={pf?.cheapest_output} label="Cheapest frontier output" />
          <DeploymentStrip d={pf?.cheapest_output_1m_context} label="Cheapest with ≥ 1M context" />
          <div className="py-3 md:pl-6">
            <p className="eyebrow">Current offers by output price</p>
            <DistBars d={idx?.distribution} className="mt-1" />
          </div>
        </div>
        <p className="tnum mt-2 text-xs text-ink-3">
          Frontier universe: {fmtInt(pf?.frontier_models)} canonical models
          {compo && (
            <>
              {' '}
              ({fmtInt(compo.recent_by_active_orgs)} recent releases by active organizations · {fmtInt(compo.top10_on_a_benchmark)} top-10 on a benchmark
              {compo.since ? ` · since ${fmtDate(compo.since)}` : ''})
            </>
          )}
          .
        </p>
        <Methodology text={idx?.frontier?.methodology ?? f.methodology} />
      </Section>

      {/* --------------------------------------------------------------------------------------------- context */}
      <Section id="context" eyebrow="Context frontier" title="Largest context windows" lede="Distinct canonical models with the largest sourced context_length. A routing endpoint counts as a model only if its provider publishes it as one." action={{ href: `${routes.models()}?sort=context`, label: 'Models by context' }}>
        {ctx.length === 0 ? (
          <EmptyState title="No context data returned" />
        ) : (
          <ol className="grid gap-x-6 md:grid-cols-2 xl:grid-cols-3">
            {ctx.map((c, i) => (
              <li key={c.model.id} className="flex items-baseline gap-3 border-b border-rule py-2.5">
                <span className="tnum w-5 shrink-0 text-xs text-ink-3">{i + 1}</span>
                <span className="min-w-0 flex-1">
                  <EntityLink e={c.model} className="font-medium" />
                  {c.model.organization && <span className="ml-1.5 text-xs text-ink-3">{c.model.organization.name}</span>}
                </span>
                <span className="tnum shrink-0 text-[15px] font-semibold">{fmtTokens(c.context_length)}</span>
              </li>
            ))}
          </ol>
        )}
      </Section>

      {/* ------------------------------------------------------------------------------------------------ open */}
      <Section id="open" eyebrow="Open-weight frontier" title="Best-ranked downloadable models" lede="Observed dimensions only — best rank on any benchmark, parameters, context — for models whose weights can be downloaded. Sorted by best rank, then parameters." action={{ href: routes.open(), label: 'Open model frontier' }}>
        {!open || open.items.length === 0 ? (
          <EmptyState title="No open-weight model with a current benchmark rank" />
        ) : (
          <DataTable caption="Open-weight frontier">
            <thead>
              <tr>
                <Th>Model</Th>
                <Th num>Best rank</Th>
                <Th>On</Th>
                <Th num>Parameters</Th>
                <Th num>Context</Th>
                <Th>Other ranks</Th>
              </tr>
            </thead>
            <tbody>
              {open.items.map((it) => (
                <tr key={it.model.id}>
                  <Td primary>
                    <EntityLink e={it.model} />
                    {it.model.organization && <span className="ml-2 text-xs text-ink-3">{it.model.organization.name}</span>}
                    {typeof it.model.attributes?.license === 'string' && <span className="block text-[11px] text-ink-3">{it.model.attributes.license as string}</span>}
                  </Td>
                  <Td num label="Best rank" className="tnum font-semibold">{num(it.best_rank) === null ? '—' : `#${fmtInt(it.best_rank)}`}</Td>
                  <Td label="On">{it.best_rank_on ? <Link href={routes.benchmark(it.best_rank_on)} className="text-ink-2 hover:text-accent">{it.best_rank_on}</Link> : '—'}</Td>
                  <Td num label="Parameters" className="tnum">{fmtParams(it.parameter_count)}</Td>
                  <Td num label="Context" className="tnum">{fmtTokens(it.context_length)}</Td>
                  <Td label="Other ranks"><RankChips ranks={it.ranks} max={3} /></Td>
                </tr>
              ))}
            </tbody>
          </DataTable>
        )}
        <Methodology text={`Dimensions: ${(open?.dimensions ?? []).join(', ') || 'best_rank, parameter_count, context_length'}. ${open?.note ?? ''}`} />
      </Section>

      {/* ------------------------------------------------------------------------------------------- efficiency */}
      <Section id="efficiency" eyebrow="Efficiency frontier" title={eff?.quality?.benchmark ? <>Quality vs output price · {eff.quality.benchmark}</> : 'Quality vs output price'} lede={eff ? `y = ${eff.quality.group?.label ?? 'score'} in the primary comparability group; x = ${eff.x}. Amber points form the Pareto set (higher score, lower price); the rest are dimmed.` : undefined} action={eff?.quality?.benchmark ? { href: routes.benchmark(eff.quality.benchmark), label: 'Leaderboard' } : undefined}>
        {points.length < 2 ? (
          <EmptyState title="Not enough priced results for a Pareto view">The efficiency frontier needs models with both a current benchmark result and a current output price.</EmptyState>
        ) : (
          <>
            <EfficiencyScatter points={points} frontier={frontierLine.map((p) => ({ x: p.x, y: p.y }))} highlight={[...frontierSet]} yLabel={eff?.quality.group?.label ?? 'score'} />
            <ul className="mt-3 flex flex-wrap gap-1.5">
              {frontierLine.map((p) => (
                <li key={p.id}>
                  <Link href={p.href ?? '#'} className="tnum inline-flex items-center gap-1.5 border border-rule px-2 py-1 text-xs text-ink-2 hover:border-rule-strong hover:text-ink">
                    <span className="inline-block size-1.5 rounded-full bg-accent-2" aria-hidden /> {p.label} <span className="text-ink-3">{fmtScore(p.y)} · {fmtUsdPerM(p.x)}</span>
                  </Link>
                </li>
              ))}
            </ul>
            <p className="tnum mt-2 text-xs text-ink-3">
              {fmtInt(points.length)} models plotted · {fmtInt(frontierLine.length)} on the Pareto frontier · group n={fmtInt(eff?.quality.group?.model_count)}
            </p>
          </>
        )}
        <Methodology text="Pareto frontier maximises the score and minimises the cheapest current output price; exact ties are kept. Price = cheapest current offer across providers. A point's position is two observed facts, not a rating." />
      </Section>

      {/* ---------------------------------------------------------------------------------------------- agentic */}
      <Section id="agentic" eyebrow="Agentic frontier" title="Leaders on agentic benchmarks" lede="Top rows of the primary comparability group of each agentic benchmark (tool use, terminal tasks, multi-turn agents).">
        {agentic.length === 0 ? (
          <EmptyState title="No agentic benchmark group returned" />
        ) : (
          <div className="grid gap-6 md:grid-cols-2">
            {agentic.map((g) => (
              <div key={g.benchmark.id} className="min-w-0">
                <p className="flex flex-wrap items-baseline gap-x-2">
                  <Link href={routes.benchmark(g.benchmark.slug)} className="text-[15px] font-semibold text-ink hover:text-accent">
                    {g.benchmark.name}
                  </Link>
                  {g.group && <span className="mono text-[11px] text-ink-3">{g.group.label} · n={fmtInt(g.group.model_count)}</span>}
                </p>
                <ol className="mt-1.5 border-t border-rule">
                  {g.leaders.map((l) => (
                    <li key={l.result_id} className="grid grid-cols-[1.5rem_minmax(0,1fr)_auto] items-baseline gap-2 border-b border-rule py-2 text-sm">
                      <span className="tnum text-xs text-ink-3">{l.rank}</span>
                      <span className="min-w-0 truncate">
                        <Link href={modelHref(l.model)} className="text-ink hover:text-accent hover:underline">
                          {l.model.name}
                        </Link>
                        {orgName(l.model) && <span className="ml-1.5 text-xs text-ink-3">{orgName(l.model)}</span>}
                      </span>
                      <span className="tnum inline-flex items-center gap-2 text-right">
                        <span className="font-medium">{fmtScore(l.score)}</span>
                        <TrustChip level={l.trust_level} label={l.trust_label} />
                      </span>
                    </li>
                  ))}
                </ol>
              </div>
            ))}
          </div>
        )}
      </Section>

      {/* ------------------------------------------------------------------------------------------- multimodal */}
      <Section id="multimodal" eyebrow="Multimodal frontier" title="Models with the most modalities among top-10 ranks" lede="Sourced modalities of models that hold a top-10 rank on at least one benchmark. Modality lists are attributes as published, not evaluations.">
        {multi.length === 0 ? (
          <EmptyState title="No multimodal leader returned" />
        ) : (
          <DataTable caption="Multimodal frontier">
            <thead>
              <tr>
                <Th>Model</Th>
                <Th>Modalities</Th>
                <Th>Top-10 on</Th>
              </tr>
            </thead>
            <tbody>
              {multi.map((m) => (
                <tr key={m.model.id}>
                  <Td primary>
                    <Link href={modelHref(m.model)} className="font-medium text-ink hover:text-accent hover:underline">
                      {m.model.name}
                    </Link>
                    {'organization' in m.model && m.model.organization && <span className="ml-2 text-xs text-ink-3">{m.model.organization.name}</span>}
                  </Td>
                  <Td label="Modalities">
                    <span className="flex flex-wrap gap-1">
                      {m.modalities.map((x) => (
                        <Chip key={x}>{x}</Chip>
                      ))}
                    </span>
                  </Td>
                  <Td label="Top-10 on" className="text-xs">
                    <span className="flex flex-wrap gap-1">
                      {m.top10_on.slice(0, 6).map((b) => (
                        <Link key={b} href={routes.benchmark(b)} className="rounded-[3px] bg-surface-2 px-1.5 py-[1px] text-[11px] text-ink-2 hover:text-accent">
                          {b}
                        </Link>
                      ))}
                      {m.top10_on.length > 6 && <span className="text-[11px] text-ink-3">+{m.top10_on.length - 6}</span>}
                    </span>
                  </Td>
                </tr>
              ))}
            </tbody>
          </DataTable>
        )}
      </Section>

      {/* -------------------------------------------------------------------------------------------- movements */}
      <Section id="movements" eyebrow="Recent frontier movements" title="Leadership changes and price moves ≥ 20 %" lede="Non-backfill benchmark events and price changes of at least 20 % over the last 30 days, newest first." action={{ href: routes.changes(), label: 'All changes' }}>
        {moves.length === 0 ? (
          <EmptyState title="No frontier movement in the last 30 days">
            The atlas has not observed a leadership change or a ≥ 20 % price move that occurred in the window (historical backfill is excluded). The <Link href={routes.changes()} className="link">change feed</Link> lists everything else.
          </EmptyState>
        ) : (
          <ul className="border-t border-rule">
            {moves.map((e) => (
              <ChangeRow key={e.id} e={e} showDate live={false} />
            ))}
          </ul>
        )}
        <Methodology text={f.methodology} />
        <Note className="mt-2">
          Composition and every threshold above are the API&apos;s (<Link href="/developers" className="link">GET /frontier</Link>); this page adds no ranking of its own.
        </Note>
      </Section>
    </Container>
  );
}