import type { Metadata } from 'next';
import Link from 'next/link';
import { Bars } from '@/components/charts/charts';
import { TerminalLayout } from '@/components/layout/terminal';
import { RailFilters } from '@/components/changes/rail-filters';
import { type ChipItem } from '@/components/timeline/chip-row';
import { occurredAt, TIMELINE_LANES } from '@/components/timeline/lanes';
import { TimelineWorkbench } from '@/components/timeline/timeline-workbench';
import { EntityBadge } from '@/components/ui/badges';
import { withParams } from '@/components/ui/pagination';
import { Container, Note, PageHeader } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { api, apiD1, apiD3, safe } from '@/lib/api';
import { fmtInt, fmtMonth, fmtYear, num } from '@/lib/format';
import { CATEGORY_LABELS, categoryLabel, eventLabel, IMPORTANCE_LABELS, routes, SITE_NAME } from '@/lib/site';
import type { ChangeEvent } from '@/lib/types';

export const revalidate = 600;

type SP = Record<string, string | undefined>;
const LIMIT = 1000;
const KEYS = ['entity', 'year', 'category', 'type', 'importance_min', 'include_backfill', 'org', 'family'] as const;

function current(sp: SP): Record<string, string | undefined> {
  const out: Record<string, string | undefined> = {};
  for (const k of KEYS) if (sp[k]) out[k] = sp[k];
  if (out.year && !/^\d{4}$/.test(out.year)) delete out.year;
  if (out.include_backfill !== '1') delete out.include_backfill;
  return out;
}
/** `org` / `family` are shortcuts for the entity-scoped timeline (an organization's timeline includes its models' events). */
function scopeEntity(cur: Record<string, string | undefined>): string | undefined {
  return cur.entity ?? cur.org ?? cur.family;
}

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const cur = current(await searchParams);
  const bits: string[] = [];
  const scope = scopeEntity(cur);
  if (scope) bits.push(scope);
  if (cur.category) bits.push(categoryLabel(cur.category).toLowerCase());
  if (cur.type) bits.push(eventLabel(cur.type).toLowerCase());
  if (cur.year) bits.push(cur.year);
  const title = bits.length ? `Timeline — ${bits.join(' · ')}` : 'Timeline — the AI ecosystem, lane by lane';
  return {
    title,
    description: 'Eight lanes — models, research, prices, benchmarks, providers, hardware, frameworks, companies — of source-attributed events keyed on when they occurred, brushable by range, with historical backfill on demand.',
    alternates: { canonical: withParams('/timeline', cur, {}) },
    openGraph: { title: `${title} | ${SITE_NAME}` },
    robots: scope ? { index: false, follow: true } : undefined,
  };
}

export default async function TimelinePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const cur = current(sp);
  const scope = scopeEntity(cur);
  const backfill = cur.include_backfill === '1';
  const [res, cats, stats, entity, orgs, fams, meth] = await Promise.all([
    safe(apiD3.timeline({ entity: scope, year: cur.year, category: cur.category, importance_min: cur.importance_min, include_backfill: backfill ? 1 : undefined, limit: LIMIT })),
    safe(api.changesCategories(365)),
    safe(api.stats()),
    scope ? safe(api.entity(scope)) : Promise.resolve(null),
    safe(api.companies({ limit: 40, sort: 'models' })),
    safe(apiD1.families({ limit: 40, sort: 'models' })),
    safe(apiD3.methodology()),
  ]);
  const months = res?.items ?? [];
  const all: ChangeEvent[] = months.flatMap((m) => m.events);
  const events = cur.type ? all.filter((e) => e.event_type === cur.type) : all;
  const loaded = all.length;
  const capped = loaded >= LIMIT;
  const href = (patch: Record<string, string | number | undefined | null>) => withParams('/timeline', cur, patch);

  // Years: current UTC year back to the earliest year the atlas knows.
  const thisYear = new Date().getUTCFullYear();
  const earliestCandidates = [stats?.first_entity_at, ...months.map((m) => m.month), cur.year].filter((v): v is string => !!v).map((v) => Number(fmtYear(v))).filter((n) => Number.isFinite(n) && n > 1990);
  const earliest = earliestCandidates.length ? Math.min(...earliestCandidates) : thisYear;
  const years: string[] = [];
  for (let y = thisYear; y >= Math.max(earliest, thisYear - 12); y--) years.push(String(y));

  const catCounts = new Map<string, number>();
  for (const it of cats?.items ?? []) catCounts.set(it.category, (catCounts.get(it.category) ?? 0) + (num(it.count) ?? 0));
  const catKeys = catCounts.size ? [...catCounts.entries()].sort((a, b) => b[1] - a[1]).map(([k]) => k) : Object.keys(CATEGORY_LABELS);
  if (cur.category && !catKeys.includes(cur.category)) catKeys.push(cur.category);
  const typeCounts = new Map<string, number>();
  for (const e of all) typeCounts.set(e.event_type, (typeCounts.get(e.event_type) ?? 0) + 1);
  const typeKeys = [...typeCounts.entries()].sort((a, b) => b[1] - a[1]).map(([k]) => k);

  const yearChips: ChipItem[] = [{ href: href({ year: undefined }), label: 'All years', active: !cur.year }, ...years.map((y) => ({ href: href({ year: y }), label: y, active: cur.year === y }))];
  const density = [...months].reverse().map((m) => ({ label: fmtMonth(m.month), value: m.count ?? m.events.length }));
  const activeCount = Object.keys(cur).length;

  const filters = (
    <RailFilters
      action="/timeline"
      resetHref={routes.timeline()}
      testId="timeline"
      fields={[
        { kind: 'chips', label: 'Year', items: yearChips.map((c) => ({ href: c.href, label: c.label, active: c.active })) },
        { kind: 'select', name: 'category', label: 'Category (lane)', value: cur.category, any: 'All lanes', options: catKeys.map((c) => ({ value: c, label: `${categoryLabel(c)}${catCounts.size ? ` (${fmtInt(catCounts.get(c) ?? 0)})` : ''}` })) },
        { kind: 'select', name: 'type', label: 'Event type', value: cur.type, any: 'All types', options: [...typeKeys.map((t) => ({ value: t, label: `${eventLabel(t)} (${fmtInt(typeCounts.get(t) ?? 0)})` })), ...(cur.type && !typeKeys.includes(cur.type) ? [{ value: cur.type, label: `${eventLabel(cur.type)} (0 loaded)` }] : [])], note: 'Filters the loaded events (the API has no type filter on /timeline).' },
        { kind: 'select', name: 'org', label: 'Organization', value: cur.org, any: 'Whole atlas', remote: 'companies', options: (orgs?.items ?? []).filter((o) => o.slug === cur.org).map((o) => ({ value: o.slug, label: `${o.name} (${fmtInt(o.model_count)})` })) },
        { kind: 'select', name: 'family', label: 'Family', value: cur.family, any: 'Any family', remote: 'families', options: (fams?.items ?? []).filter((f) => f.slug === cur.family).map((f) => ({ value: f.slug, label: `${f.name} (${fmtInt(f.model_count)})` })), note: 'Organization and family scope the timeline to that entity (one at a time).' },
        { kind: 'select', name: 'importance_min', label: 'Min importance', value: cur.importance_min, options: [3, 2, 1].map((n) => ({ value: String(n), label: `${IMPORTANCE_LABELS[n]} (≥ ${n})` })) },
        { kind: 'checkbox', name: 'include_backfill', label: 'Include historical backfill', checked: backfill, hint: 'Backfill = history imported when a source is first crawled (release dates, past prices). Off by default so the timeline shows what AI Atlas observed happening; on, it shows the reconstructed history.' },
        ...(cur.year ? [{ kind: 'hidden' as const, name: 'year', value: cur.year }] : []),
        ...(cur.entity ? [{ kind: 'hidden' as const, name: 'entity', value: cur.entity }] : []),
      ]}
    />
  );

  const inspector = (
    <div className="space-y-4 text-sm">
      <div>
        <p className="eyebrow mb-1.5">Lanes</p>
        <ul className="space-y-1">
          {TIMELINE_LANES.filter((l) => l.key !== 'other' || all.some((e) => l.categories.length === 0 && !TIMELINE_LANES.some((x) => x.categories.includes(e.category)))).map((l) => {
            const n = all.filter((e) => (TIMELINE_LANES.find((x) => x.categories.includes(e.category))?.key ?? 'other') === l.key).length;
            return (
              <li key={l.key} className="flex items-center justify-between gap-2">
                <span className="flex items-center gap-2">
                  <span className="inline-block size-2.5 rounded-full" style={{ background: l.color }} aria-hidden /> {l.label}
                </span>
                <span className="tnum text-xs text-ink-3">{fmtInt(n)}</span>
              </li>
            );
          })}
        </ul>
      </div>
      <div>
        <p className="eyebrow mb-1.5">Semantics</p>
        <dl className="kv [&>div]:py-1 text-xs">
          {Object.entries(meth?.event_semantics ?? {}).slice(0, 5).map(([k, v]) => (
            <div key={k}>
              <dt className="mono">{k}</dt>
              <dd className="text-ink-2">{v}</dd>
            </div>
          ))}
          {!meth?.event_semantics && <div><dd className="text-ink-3">Definitions unavailable.</dd></div>}
        </dl>
      </div>
      <p className="text-xs text-ink-3">
        Times are UTC. Per-entity history: open any entity's History tab. Compare two dates in <Link href={routes.diff()} className="link">Diff</Link>; see the atlas as of a date in the <Link href={routes.timeMachine()} className="link">Time machine</Link>.
      </p>
    </div>
  );

  return (
    <>
      <Container wide>
        <PageHeader
          eyebrow={entity ? <><EntityBadge type={entity.entity_type} small /> Timeline</> : 'Timeline 2.0'}
          title={entity ? <>Timeline of <Link href={routes.entity(entity)} className="text-ink-2 hover:text-accent">{entity.name}</Link></> : scope ? <>Timeline of <span className="mono text-ink-2">{scope}</span></> : 'The ecosystem, lane by lane'}
          lede={entity ? <>Every recorded change for this {entity.entity_type.replace(/_/g, ' ')}{entity.organization ? ` by ${entity.organization.name}` : ''}{['company', 'organization', 'lab', 'university'].includes(entity.entity_type) ? ' and for the models it develops' : ''}, keyed on when it occurred. <Link href={routes.entity(entity)} className="link">Back to the entity →</Link></> : 'Models · Research · Prices · Benchmarks · Providers · Hardware · Frameworks · Companies. Dots are events sized by importance; drag on the lanes to zoom the list to a range. Everything links to its entity and to the source that stated it.'}
          aside={res ? <p className="tnum text-sm text-ink-3">{fmtInt(events.length)}{cur.type ? ` of ${fmtInt(loaded)} loaded` : ''} events{capped ? ` · first ${fmtInt(LIMIT)}` : ''}</p> : undefined}
          className="pb-3"
        />
      </Container>
      <div className="pb-16">
        <TerminalLayout filters={filters} inspector={inspector} filtersTitle="Filters" inspectorTitle="Legend" storageKey="aia-timeline-inspector" filterCount={activeCount}>
          {!res ? (
            <Unavailable what="Timeline" reason={scope ? 'The entity slug may not exist.' : undefined} />
          ) : events.length === 0 ? (
            <EmptyState title="No events for this selection">
              {backfill ? 'Try another year, lane or scope, or open ' : 'Nothing was observed live for this selection — turn on “include historical backfill” for reconstructed history, or open '}
              <Link href={routes.changes()} className="link">the live feed</Link>.
            </EmptyState>
          ) : (
            <>
              {density.length > 1 && (
                <section aria-label="Events per month" className="mb-6">
                  <p className="eyebrow mb-2">
                    Events per month <span className="tnum normal-case tracking-normal text-ink-3">· {fmtInt(density.length)} months loaded</span>
                  </p>
                  <Bars data={density} height={72} />
                </section>
              )}
              <TimelineWorkbench events={events} semantics={meth?.event_semantics ?? null} backfill={backfill} />
              <Note className="mt-4">
                Showing up to {fmtInt(LIMIT)} events{capped ? ' — the API cap; narrow by year, lane or scope to see everything' : ''}. Dates are <span className="mono">occurred_at</span> (effective date when a source states one, else observation) — hover a date for the observation time.{!backfill && ' Historical backfill is excluded; the checkbox in the rail includes it.'} Cursor-paged history: <Link href={routes.changes()} className="link">changes feed</Link>.
              </Note>
              {events.length > 0 && <p className="sr-only">Earliest loaded event: {occurredAt(events[events.length - 1]!)}</p>}
            </>
          )}
        </TerminalLayout>
      </div>
    </>
  );
}