import type { Metadata } from 'next';
import Link from 'next/link';
import { DataStrip } from '@/components/layout/terminal';
import { BreadcrumbLd } from '@/components/meta/breadcrumb-ld';
import { daysBefore, monthsBefore, todayUtc, validDay } from '@/components/temporal/dates';
import { HardwareAsOf, LeadersAsOf, ModelsAsOf, PricesAsOf } from '@/components/temporal/time-machine-tables';
import { Chip } from '@/components/ui/badges';
import { Container, Note, PageHeader, Section } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { apiD3, safe } from '@/lib/api';
import { fmtDate, fmtDateTime, fmtInt, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';

type SP = { date?: string; scope?: string };
const SCOPES = [
  { key: 'all', label: 'Overview' },
  { key: 'models', label: 'Models' },
  { key: 'prices', label: 'Provider prices' },
  { key: 'context', label: 'Context lengths' },
  { key: 'benchmarks', label: 'Benchmark leaders' },
  { key: 'hardware', label: 'Hardware' },
] as const;
type Scope = (typeof SCOPES)[number]['key'];
const LIMIT_FOCUS = 200;
const LIMIT_ALL = 25;

function resolve(sp: SP): { date: string; scope: Scope; invalid: boolean } {
  const today = todayUtc();
  const date = validDay(sp.date) ?? today;
  const scope = (SCOPES.find((s) => s.key === sp.scope)?.key ?? 'all') as Scope;
  return { date: date > today ? today : date, scope, invalid: !!sp.date && !validDay(sp.date) };
}
function href(date: string, scope: Scope): string {
  const p = new URLSearchParams({ date });
  if (scope !== 'all') p.set('scope', scope);
  return `/time-machine?${p.toString()}`;
}

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const { date, scope } = resolve(await searchParams);
  const title = `AI Atlas as of ${fmtDate(date)}${scope !== 'all' ? ` — ${SCOPES.find((s) => s.key === scope)?.label.toLowerCase()}` : ''}`;
  const description = `The AI ecosystem as it stood on ${fmtDate(date)}: which models existed, their context lengths and status then, provider prices valid that day, benchmark leaders known by then, hardware — reconstructed from dated claims and honest about it.`;
  const og = `${SITE_URL}/time-machine/og?date=${date}&scope=${scope}`;
  return { title, description, alternates: { canonical: href(date, scope) }, openGraph: { title: `${title} | ${SITE_NAME}`, description, url: `${SITE_URL}${href(date, scope)}`, images: [{ url: og, width: 1200, height: 630 }] }, twitter: { card: 'summary_large_image', images: [og] } };
}

export default async function TimeMachinePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const { date, scope, invalid } = resolve(sp);
  const today = todayUtc();
  const apiScope = scope === 'context' ? 'models' : scope;
  const [focus, overview] = await Promise.all([safe(apiD3.timeMachine(date, apiScope, scope === 'all' ? LIMIT_ALL : LIMIT_FOCUS)), scope === 'all' ? Promise.resolve(null) : safe(apiD3.timeMachine(date, 'all', 1))]);
  const strip = overview ?? focus;
  const presets: { label: string; date: string }[] = [
    { label: '2023-01-01', date: '2023-01-01' },
    { label: '2024-01-01', date: '2024-01-01' },
    { label: '2025-01-01', date: '2025-01-01' },
    { label: '6 months ago', date: monthsBefore(today, 6) },
    { label: '1 month ago', date: monthsBefore(today, 1) },
    { label: 'yesterday', date: daysBefore(today, 1) },
  ];
  const models = focus?.models;
  const prices = focus?.prices;
  const leaders = focus?.benchmarks?.leaders ?? [];
  const hardware = focus?.hardware?.items ?? [];
  const contextRows = (models?.items ?? []).filter((r) => r.attributes_as_of.context_length !== undefined && r.attributes_as_of.context_length !== null).sort((a, b) => (num(b.attributes_as_of.context_length) ?? 0) - (num(a.attributes_as_of.context_length) ?? 0));
  const cls = 'h-11 border border-rule bg-surface px-2.5 text-sm text-ink focus:border-accent focus:outline-none';

  return (
    <Container wide>
      <BreadcrumbLd items={[{ name: SITE_NAME, href: '/' }, { name: 'Time machine', href: '/time-machine' }, { name: fmtDate(date), href: href(date, scope) }]} />
      <PageHeader
        eyebrow="Time machine"
        title={
          <>
            AI Atlas as of <span className="tnum text-ink-2">{fmtDate(date)}</span>
          </>
        }
        lede="Pick any date: the models that existed, their context lengths and status at the time, the provider prices valid that day, the benchmark leaders known by then, the hardware. Every value opens the claim that establishes it, with its validity interval."
        aside={
          <form action="/time-machine" method="get" className="flex items-end gap-2">
            <label className="block">
              <span className="eyebrow block pb-1">Date (UTC)</span>
              <input type="date" name="date" defaultValue={date} max={today} className={cls} required data-tm-date />
            </label>
            {scope !== 'all' && <input type="hidden" name="scope" value={scope} />}
            <button type="submit" className="inline-flex h-11 items-center bg-ink px-3 text-sm font-medium text-canvas hover:opacity-90">
              Travel
            </button>
          </form>
        }
      >
        <ul className="no-scrollbar -mx-4 mt-4 flex gap-1 overflow-x-auto px-4 md:mx-0 md:px-0" aria-label="Presets">
          {presets.map((p) => (
            <li key={p.label} className="shrink-0">
              <Link href={href(p.date, scope)} className={`inline-flex h-9 items-center border px-2.5 text-sm ${p.date === date ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink'}`} aria-current={p.date === date ? 'true' : undefined}>
                {p.label}
              </Link>
            </li>
          ))}
        </ul>
        {invalid && <Note className="mt-2 text-warning">The date in the URL was not YYYY-MM-DD — showing today instead.</Note>}
      </PageHeader>

      <div className="pb-16">
        {!focus ? (
          <Unavailable what="Time machine" reason="The API did not answer for this date." />
        ) : (
          <>
            {/* honesty banner */}
            <div className={`border-l-2 px-4 py-3 text-sm ${focus.reconstructed ? 'border-warning bg-warning-soft' : 'border-accent bg-accent-soft'}`} role="note" data-tm-banner>
              <p className="flex flex-wrap items-center gap-2 font-medium text-ink">
                {focus.reconstructed ? <Chip tone="estimated">Reconstructed</Chip> : <Chip tone="accent">Observed</Chip>}
                {focus.reconstructed ? `This date is earlier than AI Atlas's first observation — the state is reconstructed from dated claims and release dates, not from direct observation.` : 'This date is inside the observation history: values are claims that were current that day.'}
              </p>
              <p className="mt-1 text-xs text-ink-2">
                Observation history starts {focus.first_entity_at ? <time dateTime={focus.first_entity_at}>{fmtDateTime(focus.first_entity_at)}</time> : 'unknown'}.{focus.note ? ` ${focus.note}` : ''}
              </p>
            </div>

            <DataStrip
              className="mt-6"
              items={[
                { label: 'Models existing', value: fmtInt(strip?.models?.total ?? models?.total), definition: 'Canonical models whose release date (or first dated claim) is on or before the date.', href: href(date, 'models') },
                { label: 'Offers valid', value: fmtInt(strip?.prices?.total ?? prices?.total), definition: 'Price rows whose validity interval covers the date (append-only history).', href: href(date, 'prices') },
                { label: 'Benchmark leaders', value: fmtInt(strip?.benchmarks?.leaders?.length ?? leaders.length), definition: 'Benchmarks with at least one result observed by the date.', href: href(date, 'benchmarks') },
                { label: 'Hardware', value: fmtInt(strip?.hardware?.total ?? strip?.hardware?.items?.length ?? hardware.length), definition: 'Hardware entities released on or before the date.', href: href(date, 'hardware') },
                { label: 'Basis', value: focus.reconstructed ? 'reconstructed' : 'observed', definition: 'Reconstructed = before the first observation; observed = inside the recorded history.' },
              ]}
            />

            <nav aria-label="Scope" className="no-scrollbar -mx-4 mt-6 flex gap-1 overflow-x-auto border-b border-rule px-4 md:mx-0 md:px-0">
              {SCOPES.map((s) => (
                <Link key={s.key} href={href(date, s.key)} className={`flex h-10 shrink-0 items-center border-b-2 px-3 text-sm ${s.key === scope ? 'border-ink font-medium text-ink' : 'border-transparent text-ink-2 hover:text-ink'}`} aria-current={s.key === scope ? 'page' : undefined}>
                  {s.label}
                </Link>
              ))}
              <Link href={routes.diff({ a: date, b: today })} className="ml-auto flex h-10 shrink-0 items-center px-3 text-sm text-accent hover:underline">
                Diff → today
              </Link>
            </nav>

            {(scope === 'all' || scope === 'models') && (
              <Section id="models" eyebrow="Models" title={<>Models as of {fmtDate(date)} <span className="tnum text-base font-normal text-ink-3">{fmtInt(models?.total)}</span></>} action={scope === 'all' ? { href: href(date, 'models'), label: 'All' } : undefined}>
                <ModelsAsOf rows={models?.items ?? []} total={num(models?.total)} date={date} limit={scope === 'all' ? LIMIT_ALL : LIMIT_FOCUS} />
              </Section>
            )}
            {scope === 'context' && (
              <Section id="context" eyebrow="Context lengths" title={<>Context windows as of {fmtDate(date)} <span className="tnum text-base font-normal text-ink-3">{fmtInt(contextRows.length)} with a dated value</span></>}>
                <ModelsAsOf rows={contextRows} total={null} date={date} limit={LIMIT_FOCUS} />
                <Note className="mt-2">Only models with a context-length claim valid on that date are listed (sorted by context). Models without a dated claim are omitted rather than guessed.</Note>
              </Section>
            )}
            {(scope === 'all' || scope === 'prices') && (
              <Section id="prices" eyebrow="Provider prices" title={<>Offers valid on {fmtDate(date)} <span className="tnum text-base font-normal text-ink-3">{fmtInt(prices?.total)}</span></>} action={scope === 'all' ? { href: href(date, 'prices'), label: 'All' } : undefined}>
                <PricesAsOf rows={prices?.items ?? []} total={num(prices?.total)} date={date} />
                {prices?.note && <Note className="mt-1">{prices.note}</Note>}
              </Section>
            )}
            {(scope === 'all' || scope === 'benchmarks') && (
              <Section id="benchmarks" eyebrow="Benchmark leaders" title={<>Leaders known by {fmtDate(date)} <span className="tnum text-base font-normal text-ink-3">{fmtInt(leaders.length)}</span></>}>
                <LeadersAsOf rows={leaders} date={date} />
                {focus.benchmarks?.note && <Note className="mt-1">{focus.benchmarks.note}</Note>}
              </Section>
            )}
            {(scope === 'all' || scope === 'hardware') && (
              <Section id="hardware" eyebrow="Hardware" title={<>Hardware as of {fmtDate(date)} <span className="tnum text-base font-normal text-ink-3">{fmtInt(hardware.length)}</span></>} action={scope === 'all' ? { href: href(date, 'hardware'), label: 'All' } : undefined}>
                <HardwareAsOf rows={hardware} date={date} />
              </Section>
            )}
            <Note className="mt-6">
              Shareable: this URL reproduces the view. Per-entity: every entity page has a History tab with the same as-of reconstruction. What changed since? <Link href={routes.diff({ a: date, b: today })} className="link">Diff {fmtDate(date)} → today</Link>. <Link href={routes.methodology()} className="link">Methodology →</Link>
            </Note>
          </>
        )}
      </div>
    </Container>
  );
}