import type { Metadata } from 'next';
import Link from 'next/link';
import { Fragment } from 'react';
import { ChangeRow } from '@/components/changes/change-row';
import { BTN_GHOST, CTRL, DistBars, Field, Methodology, SortTh } from '@/components/intelligence/bits';
import { ExpandableOfferRow } from '@/components/intelligence/expand-price-row';
import { PriceIndexChart } from '@/components/intelligence/price-index-chart';
import { DataStrip, type StripItem, TerminalLayout } from '@/components/layout/terminal';
import { PriceMovers } from '@/components/prices/movers';
import { Chip } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink } from '@/components/ui/entity';
import { Pagination, withParams } from '@/components/ui/pagination';
import { SourceCell } from '@/components/ui/provenance';
import { Note, PageHeader, Section } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { api, ApiError, intel, safe } from '@/lib/api';
import { fmtAgo, fmtDate, fmtInt, fmtTokens, fmtUsdPerM, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { CheapestFrontier, Page, Price } from '@/lib/types';

export const revalidate = 300;

type SP = Record<string, string | undefined>;
const LIMIT = 100;
const DAYS = [30, 90, 180, 365];
const SORTS = ['input', 'output', 'cheapest_frontier', 'model', 'provider', 'observed'] as const;
type Sort = (typeof SORTS)[number];
const KEYS = ['days', 'scale', 'sort', 'provider', 'org', 'family', 'modality', 'model', 'offset'] as const;
const SORT_LABELS: Record<Sort, string> = { input: 'Cheapest input', output: 'Cheapest output', cheapest_frontier: 'Cheapest frontier output', model: 'Model', provider: 'Provider', observed: 'Recently observed' };

function pick(sp: SP) {
  const cur: Record<string, string | undefined> = {};
  for (const k of KEYS) if (sp[k]) cur[k] = sp[k];
  const days = DAYS.includes(Number(cur.days)) ? Number(cur.days) : 180;
  const sort: Sort = (SORTS as readonly string[]).includes(cur.sort ?? '') ? (cur.sort as Sort) : 'input';
  return { cur, days, sort, offset: Math.max(0, Number(cur.offset) || 0), scale: cur.scale === 'log' ? ('log' as const) : ('linear' as const) };
}

const TITLE = 'AI Price Index — USD per 1M tokens, every provider, every day';
export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const { cur, days } = pick(await searchParams);
  const filtered = cur.provider || cur.model || cur.org || cur.family || cur.modality;
  const title = filtered ? `AI prices — ${[cur.provider, cur.org, cur.family, cur.modality, cur.model].filter(Boolean).join(' · ')}` : TITLE;
  const description = `Daily medians of published input, output, frontier, open-weight and embedding prices per 1M tokens across every provider offer AI Atlas tracks (last ${days} days), the distribution of current offers, the cheapest frontier model, price movers, new listings and delistings, and every current offer with its source and history.`;
  return {
    title,
    description,
    alternates: { canonical: routes.prices() },
    openGraph: { title: `${title} | ${SITE_NAME}`, description, url: `${SITE_URL}${routes.prices()}`, type: 'website', siteName: SITE_NAME },
    twitter: { card: 'summary_large_image', title, description },
    robots: filtered || cur.offset ? { index: false, follow: true } : undefined,
  };
}

/** `/prices` 404s when a slug filter is unknown — keep that distinction instead of a generic "unavailable". */
async function loadPrices(query: Record<string, string | number | undefined>): Promise<{ page: (Page<Price> & { methodology?: string }) | null; notFound: boolean; detail?: string | null }> {
  try {
    return { page: await intel.prices(query), notFound: false };
  } catch (e) {
    return { page: null, notFound: e instanceof ApiError && e.notFound, detail: e instanceof ApiError ? e.detail : null };
  }
}

function CheapestStrip({ c, label }: { c: CheapestFrontier | null | undefined; label: string }) {
  return (
    <div className="min-w-0 py-3">
      <p className="eyebrow">{label}</p>
      {c ? (
        <>
          <p className="mt-1 flex flex-wrap items-baseline gap-x-2">
            <EntityLink e={c.model} className="text-[15px] font-medium" />
            {c.model.organization && <span className="text-xs text-ink-3">{c.model.organization.name}</span>}
          </p>
          <p className="tnum mt-1 text-[22px] font-semibold leading-none text-accent-2">
            {fmtUsdPerM(c.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(c.input)} · context {fmtTokens(c.context_length)} · via <EntityLink e={c.provider} className="text-ink-2" />
          </p>
        </>
      ) : (
        <p className="mt-1 text-sm text-ink-3">No frontier model with a current priced offer in this response.</p>
      )}
    </div>
  );
}

export default async function PricesPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const { cur, days, sort, offset, scale } = pick(sp);
  const [index, providers, facets, priced, listed, delisted] = await Promise.all([
    safe(intel.priceIndex(days)),
    safe(intel.providers()),
    safe(api.models({ limit: 1, facets: 1 })),
    loadPrices({ sort, provider: cur.provider, model: cur.model, org: cur.org, family: cur.family, modality: cur.modality, limit: LIMIT, offset }),
    safe(api.changes({ type: 'PROVIDER_LISTED', limit: 8 })),
    safe(api.changes({ type: 'PROVIDER_DELISTED', limit: 8 })),
  ]);
  const href = (patch: Record<string, string | number | undefined | null>) => withParams('/prices', cur, patch);
  const providerHref = (name: string) => {
    const p = (providers?.items ?? []).find((x) => x.name === name);
    return p ? href({ provider: p.slug, offset: undefined }) : undefined;
  };

  // ---- index
  const series = index?.series ?? [];
  const populated = series.filter((p) => num(p.median_input) !== null || num(p.median_output) !== null);
  const latest = populated.at(-1) ?? null;
  const first = populated[0] ?? null;
  const delta = (field: 'median_input' | 'median_output' | 'median_frontier_output' | 'median_open_output' | 'median_embedding_input') => {
    const a = num(first?.[field]);
    const b = num(latest?.[field]);
    if (a === null || b === null || a === 0 || first === latest) return undefined;
    const pct = ((b - a) / a) * 100;
    if (Math.abs(pct) < 0.05) return undefined;
    return { value: `${pct > 0 ? '+' : ''}${pct.toFixed(1)}%`, tone: pct < 0 ? ('positive' as const) : pct > 0 ? ('negative' as const) : ('neutral' as const) };
  };
  const money = (v: unknown) => <span className="text-accent-2">{fmtUsdPerM(v)}</span>;
  const strip: StripItem[] | null = latest
    ? [
        { label: 'Median input', value: money(latest.median_input), definition: 'Median of live input prices (USD / 1M tokens) across every provider offer valid at the end of the day; zero or missing prices excluded.', delta: delta('median_input'), hint: `n=${fmtInt(latest.sample?.offers ?? latest.offers)}` },
        { label: 'Median output', value: money(latest.median_output), definition: 'Median of live output prices across every provider offer valid at the end of the day.', delta: delta('median_output') },
        { label: 'Median frontier output', value: money(latest.median_frontier_output), definition: index?.frontier?.methodology ?? 'Frontier models = recent releases by active organizations or top-10 on a benchmark; no composite score.', delta: delta('median_frontier_output'), hint: `n=${fmtInt(latest.sample?.frontier_offers)}` },
        { label: 'Median open output', value: money(latest.median_open_output), definition: 'Median output price over models with openness open-weights / open-source.', delta: delta('median_open_output'), hint: `n=${fmtInt(latest.sample?.open_models)}` },
        { label: 'Median embedding input', value: money(latest.median_embedding_input), definition: 'Median input price over models whose modalities include embedding.', delta: delta('median_embedding_input'), hint: `n=${fmtInt(latest.sample?.embedding_models)}` },
        { label: 'Models priced', value: fmtInt(latest.models), definition: 'Canonical models with at least one live offer on the latest day.', hint: fmtDate(latest.day) },
        { label: 'Cheapest input', value: fmtUsdPerM(latest.min_input), definition: 'Lowest positive live input price on the latest day.', hint: num(latest.max_input) !== null ? `dearest ${fmtUsdPerM(latest.max_input)}` : undefined },
      ]
    : null;

  // ---- offers
  const page = priced.page;
  const rows = page?.items ?? [];
  const minByModel = new Map<string, number>();
  const providersByModel = new Map<string, Set<string>>();
  for (const r of rows) {
    const v = num(r.input_per_mtok);
    if (v !== null) {
      const m = minByModel.get(r.model.slug);
      if (m === undefined || v < m) minByModel.set(r.model.slug, v);
    }
    const s = providersByModel.get(r.model.slug) ?? new Set<string>();
    s.add(r.provider.slug);
    providersByModel.set(r.model.slug, s);
  }
  const providerOptions = (providers?.items ?? []).slice().sort((a, b) => a.name.localeCompare(b.name));
  const providerName = providerOptions.find((o) => o.slug === cur.provider)?.name;
  const orgOptions = ((facets?.facets as { organizations?: { slug: string; name: string; count?: unknown }[] } | undefined)?.organizations ?? []).slice(0, 60);
  const familyOptions = ((facets?.facets as { families?: { value: string; label?: string; count?: unknown }[] } | undefined)?.families ?? []).slice(0, 60);
  const modalityOptions = ((facets?.facets as { modalities?: { value: string; count?: unknown }[] } | undefined)?.modalities ?? []);
  const filterCount = ['provider', 'org', 'family', 'modality', 'model'].filter((k) => cur[k]).length + (days !== 180 ? 1 : 0);
  const newListings = index?.new_listings_30d;
  const delistings = index?.delistings_30d;
  const changes30 = index?.price_changes_30d;
  const asCount = (v: unknown) => (Array.isArray(v) ? v.length : num(v));

  const filters = (
    <form action="/prices" method="get" className="space-y-3" data-price-filters>
      <Field label="Provider">
        <select name="provider" defaultValue={cur.provider ?? ''} className={CTRL}>
          <option value="">Any provider</option>
          {providerOptions.map((p) => (
            <option key={p.slug} value={p.slug}>
              {p.name}
            </option>
          ))}
        </select>
      </Field>
      <Field label="Organization">
        <select name="org" defaultValue={cur.org ?? ''} className={CTRL}>
          <option value="">Any organization</option>
          {orgOptions.map((o) => (
            <option key={o.slug} value={o.slug}>
              {o.name}
            </option>
          ))}
          {cur.org && !orgOptions.some((o) => o.slug === cur.org) && <option value={cur.org}>{cur.org}</option>}
        </select>
      </Field>
      <Field label="Family">
        <select name="family" defaultValue={cur.family ?? ''} className={CTRL}>
          <option value="">Any family</option>
          {familyOptions.map((f) => (
            <option key={f.value} value={f.value}>
              {f.label ?? f.value}
            </option>
          ))}
          {cur.family && !familyOptions.some((f) => f.value === cur.family) && <option value={cur.family}>{cur.family}</option>}
        </select>
      </Field>
      <Field label="Modality">
        <select name="modality" defaultValue={cur.modality ?? ''} className={CTRL}>
          <option value="">Any modality</option>
          {modalityOptions.map((m) => (
            <option key={m.value} value={m.value}>
              {m.value}
            </option>
          ))}
        </select>
      </Field>
      <Field label="Model slug" hint="Slugs only — the API 404s on free text.">
        <input name="model" defaultValue={cur.model ?? ''} placeholder="e.g. claude-opus-5" className={CTRL} />
      </Field>
      <Field label="Index window">
        <select name="days" defaultValue={String(days)} className={CTRL}>
          {DAYS.map((d) => (
            <option key={d} value={d}>
              Last {d} days
            </option>
          ))}
        </select>
      </Field>
      <Field label="Sort offers">
        <select name="sort" defaultValue={sort} className={CTRL}>
          {SORTS.map((s) => (
            <option key={s} value={s}>
              {SORT_LABELS[s]}
            </option>
          ))}
        </select>
      </Field>
      {cur.scale && <input type="hidden" name="scale" value={cur.scale} />}
      <div className="flex gap-2">
        <button type="submit" className="inline-flex h-11 flex-1 items-center justify-center bg-ink lg:h-10 px-3 text-sm font-medium text-canvas hover:opacity-90">
          Apply
        </button>
        <Link href="/prices" className={BTN_GHOST}>
          Reset
        </Link>
      </div>
    </form>
  );

  const inspector = (
    <div className="space-y-4 text-xs leading-relaxed text-ink-2">
      <div>
        <p className="eyebrow mb-1">Index method</p>
        <p>{index?.methodology ?? index?.note ?? 'Unavailable.'}</p>
      </div>
      {latest?.sample && (
        <div>
          <p className="eyebrow mb-1">Sample · {fmtDate(latest.day)}</p>
          <dl className="tnum grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5">
            <dt className="text-ink-3">offers</dt>
            <dd>{fmtInt(latest.sample.offers)}</dd>
            <dt className="text-ink-3">models</dt>
            <dd>{fmtInt(latest.sample.models)}</dd>
            <dt className="text-ink-3">frontier</dt>
            <dd>
              {fmtInt(latest.sample.frontier_models)} models · {fmtInt(latest.sample.frontier_offers)} offers
            </dd>
            <dt className="text-ink-3">open</dt>
            <dd>{fmtInt(latest.sample.open_models)} models</dd>
            <dt className="text-ink-3">embedding</dt>
            <dd>{fmtInt(latest.sample.embedding_models)} models</dd>
          </dl>
        </div>
      )}
      {index?.frontier?.composition && (
        <div>
          <p className="eyebrow mb-1">Frontier composition</p>
          <dl className="tnum grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5">
            {Object.entries(index.frontier.composition).map(([k, v]) => (
              <Fragment key={k}>
                <dt className="text-ink-3">{k.replace(/_/g, ' ')}</dt>
                <dd>{typeof v === 'string' && /^\d{4}-/.test(v) ? fmtDate(v) : fmtInt(v)}</dd>
              </Fragment>
            ))}
          </dl>
        </div>
      )}
      <div>
        <p className="eyebrow mb-1">30-day counters</p>
        <dl className="tnum grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5">
          <dt className="text-ink-3">new listings</dt>
          <dd>{fmtInt(asCount(newListings))}</dd>
          <dt className="text-ink-3">delistings</dt>
          <dd>{fmtInt(asCount(delistings))}</dd>
          <dt className="text-ink-3">price changes</dt>
          <dd>{fmtInt(asCount(changes30))}</dd>
        </dl>
      </div>
      <p>
        <Link href="/developers" className="link">GET /prices/index</Link> · <Link href="/methodology" className="link">methodology</Link>
      </p>
    </div>
  );

  return (
    <TerminalLayout filters={filters} inspector={inspector} filtersTitle="Filters" inspectorTitle="Method" storageKey="aia-inspector-prices" filterCount={filterCount}>
      <PageHeader eyebrow="Price history terminal" title="AI Price Index" lede="What a million tokens costs, day by day, across every provider offer the atlas tracks — medians for the whole market, the frontier, open weights and embeddings; the distribution of current offers; movers, listings and every offer with its history." aside={latest ? <p className="tnum text-sm text-ink-3">{fmtInt(latest.offers)} offers · {fmtInt(latest.models)} models · {fmtDate(latest.day)}</p> : undefined} className="pt-4 md:pt-6" />

      {/* ------------------------------------------------------------------------------------------------ index */}
      <Section eyebrow="AI Price Index" title={<>Daily medians · last {days} days</>} hairline={false} className="pt-0">
        {!index ? (
          <Unavailable what="Price index" />
        ) : !latest ? (
          <EmptyState title="No priced offers in this window">Prices appear once a provider pricing page has been crawled. Try a longer window.</EmptyState>
        ) : (
          <>
            {strip && <DataStrip items={strip} dense />}
            <PriceIndexChart series={series} initialScale={scale} className="mt-5" />
            <p className="tnum mt-2 text-xs text-ink-3">
              {fmtInt(populated.length)} populated day{populated.length === 1 ? '' : 's'} in the window · sample sizes per day in the tooltip · a null median means no offer in that universe on that day.
            </p>
            <Methodology text={index.methodology ?? index.note} />
          </>
        )}
      </Section>

      {/* ------------------------------------------------------------------------------------- distribution + frontier */}
      {index && (
        <Section eyebrow="Current offers" title="Distribution and the cheapest frontier">
          <div className="grid grid-cols-[minmax(0,1fr)] gap-x-8 gap-y-4 md:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)_minmax(0,1fr)]">
            <div>
              <p className="eyebrow">Current offers by output price</p>
              <DistBars d={index.distribution} className="mt-2" />
            </div>
            <CheapestStrip c={index.cheapest_frontier} label="Cheapest frontier output" />
            <CheapestStrip c={index.cheapest_frontier_1m_context} label="Cheapest frontier with ≥ 1M context" />
          </div>
          <Methodology text={index.frontier?.methodology} />
        </Section>
      )}

      {/* ------------------------------------------------------------------------------------------------ movers */}
      <Section eyebrow="Movers" title="Recent price changes" lede="Provider offers whose published price moved, newest first, with the relative change." action={{ href: `${routes.changes()}?type=PRICE_CHANGED`, label: 'All pricing events' }}>
        {!index ? <Unavailable what="Price changes" /> : <PriceMovers movers={index.movers ?? []} providerHref={providerHref} />}
      </Section>

      {/* ---------------------------------------------------------------------------------- listings / delistings */}
      <Section eyebrow="Listings · 30 days" title="New listings and delistings">
        <div className="grid grid-cols-[minmax(0,1fr)] gap-8 md:grid-cols-2">
          <div>
            <p className="flex items-baseline justify-between">
              <span className="text-sm font-medium text-ink">New listings</span>
              <span className="tnum text-sm text-ink-3">{fmtInt(asCount(newListings))} in 30 d</span>
            </p>
            <p className="mt-0.5 text-xs text-ink-3">PROVIDER_LISTED events that occurred in the last 30 days (a model × provider offer first opened).</p>
            {Array.isArray(newListings) && newListings.length ? (
              <ul className="mt-2 border-t border-rule">{newListings.slice(0, 8).map((e) => <ChangeRow key={e.id} e={e} dense live={false} showDate />)}</ul>
            ) : listed?.items.length ? (
              <ul className="mt-2 border-t border-rule">{listed.items.map((e) => <ChangeRow key={e.id} e={e} dense live={false} showDate />)}</ul>
            ) : (
              <p className="mt-2 text-sm text-ink-3">No listing event in the window.</p>
            )}
            <p className="mt-2 text-xs">
              <Link href={`${routes.changes()}?type=PROVIDER_LISTED`} className="link">All listing events →</Link>
            </p>
          </div>
          <div>
            <p className="flex items-baseline justify-between">
              <span className="text-sm font-medium text-ink">Delistings</span>
              <span className="tnum text-sm text-ink-3">{fmtInt(asCount(delistings))} in 30 d</span>
            </p>
            <p className="mt-0.5 text-xs text-ink-3">PROVIDER_DELISTED events that occurred in the last 30 days (an offer closed).</p>
            {Array.isArray(delistings) && delistings.length ? (
              <ul className="mt-2 border-t border-rule">{delistings.slice(0, 8).map((e) => <ChangeRow key={e.id} e={e} dense live={false} showDate />)}</ul>
            ) : delisted?.items.length ? (
              <ul className="mt-2 border-t border-rule">{delisted.items.map((e) => <ChangeRow key={e.id} e={e} dense live={false} showDate />)}</ul>
            ) : (
              <p className="mt-2 text-sm text-ink-3">No delisting recorded in the window — offers that disappear from a pricing page are closed (valid_to) and emit PROVIDER_DELISTED.</p>
            )}
          </div>
        </div>
      </Section>

      {/* ------------------------------------------------------------------------------------------------ offers */}
      <Section eyebrow="Current offers" title={providerName ? `Every current offer from ${providerName}` : cur.model ? `Current offers for ${cur.model}` : 'Every current offer'} lede="One row per model × provider, as published. Expand a row to load its price history (sparklines). Sort with the column headers or the rail.">
        {priced.notFound ? (
          <EmptyState title={`No ${cur.model ? 'model' : cur.provider ? 'provider' : 'entity'} with slug “${cur.model ?? cur.provider ?? cur.org ?? cur.family}”`}>
            Slugs are the last part of an entity URL (<span className="mono">/models/&lt;slug&gt;</span>). <Link href={cur.model ? routes.search(cur.model, 'model') : routes.providers()} className="link">Search instead →</Link>
          </EmptyState>
        ) : !page ? (
          <Unavailable what="Current prices" reason={priced.detail ?? undefined} />
        ) : (
          <>
            {page.methodology && sort === 'cheapest_frontier' && <Methodology text={page.methodology} className="mb-3 mt-0" />}
            <DataTable scroll compact>
              <thead>
                <tr>
                  <SortTh active={sort === 'model'} href={href({ sort: 'model', offset: undefined })}>Model</SortTh>
                  <SortTh active={sort === 'provider'} href={href({ sort: 'provider', offset: undefined })}>Provider</SortTh>
                  <SortTh active={sort === 'input'} href={href({ sort: undefined, offset: undefined })} num>Input / 1M</SortTh>
                  <Th num>Cached in</Th>
                  <SortTh active={sort === 'output' || sort === 'cheapest_frontier'} href={href({ sort: 'output', offset: undefined })} num>Output / 1M</SortTh>
                  <Th num>Batch in / out</Th>
                  <Th num>Context</Th>
                  <SortTh active={sort === 'observed'} href={href({ sort: 'observed', offset: undefined })} dir="desc">Observed</SortTh>
                  <Th>Source</Th>
                  <Th className="w-24" aria-label="History" />
                </tr>
              </thead>
              <tbody>
                {rows.length === 0 && <EmptyRow cols={10}>{sort === 'cheapest_frontier' ? 'No frontier model has a current priced offer in the API response (see the methodology above).' : 'No current offers match these filters.'}</EmptyRow>}
                {rows.map((p) => {
                  const v = num(p.input_per_mtok);
                  const cheapest = v !== null && minByModel.get(p.model.slug) === v && (providersByModel.get(p.model.slug)?.size ?? 0) > 1;
                  return (
                    <ExpandableOfferRow key={p.id} model={p.model.slug} provider={p.provider.slug} colSpan={9}>
                      <Td primary>
                        <EntityLink e={p.model} />
                        {p.model.organization && <span className="ml-2 text-xs text-ink-3">{p.model.organization.name}</span>}
                        {p.provider_model_id && p.provider_model_id !== p.model.slug && <span className="mono block text-[11px] text-ink-3">{p.provider_model_id}</span>}
                      </Td>
                      <Td label="Provider" className="text-ink-2">
                        <Link href={href({ provider: p.provider.slug, offset: undefined })} className="hover:text-accent" title="Filter by this provider">
                          {p.provider.name}
                        </Link>
                        <EntityLink e={p.provider} className="ml-1.5 text-xs text-ink-3">↗</EntityLink>
                      </Td>
                      <Td num label="Input / 1M" className={cheapest ? 'tnum font-semibold text-accent-2' : 'tnum text-accent-2'}>
                        {fmtUsdPerM(p.input_per_mtok)}
                        {cheapest && <Chip tone="accent" className="ml-1.5 align-middle">cheapest</Chip>}
                      </Td>
                      <Td num label="Cached in" className="tnum text-ink-2">{fmtUsdPerM(p.cached_input_per_mtok)}</Td>
                      <Td num label="Output / 1M" className="tnum text-accent-2">{fmtUsdPerM(p.output_per_mtok)}</Td>
                      <Td num label="Batch" className="tnum text-ink-2">
                        {num(p.batch_input_per_mtok) === null && num(p.batch_output_per_mtok) === null ? <span className="text-ink-3">—</span> : `${fmtUsdPerM(p.batch_input_per_mtok)} / ${fmtUsdPerM(p.batch_output_per_mtok)}`}
                      </Td>
                      <Td num label="Context" className="tnum text-ink-2">{num(p.context_length) === null ? <span className="text-ink-3">—</span> : fmtTokens(p.context_length)}</Td>
                      <Td label="Observed" className="text-ink-2" title={p.observed_at}>{fmtAgo(p.observed_at)}</Td>
                      <Td label="Source"><SourceCell url={p.source_url} tier={p.tier} /></Td>
                    </ExpandableOfferRow>
                  );
                })}
              </tbody>
            </DataTable>
            <Pagination total={page.total} limit={LIMIT} offset={offset} makeHref={(o) => href({ offset: o || undefined })} className="mt-4" />
            <Note className="mt-3">
              “Cheapest” marks the lowest input price for a model among the rows on this page (models served by several providers). USD per 1M tokens as published; <Link href={routes.providers()} className="link">providers overview</Link> · <Link href={routes.calculator()} className="link">cost calculator</Link> · <Link href="/methodology" className="link">methodology</Link>.
            </Note>
          </>
        )}
      </Section>
    </TerminalLayout>
  );
}