import type { Metadata } from 'next';
import Link from 'next/link';
import { DataStrip, SectionNav } from '@/components/layout/terminal';
import { BreadcrumbLd } from '@/components/meta/breadcrumb-ld';
import { daysBefore, firstOfMonth, firstOfQuarter, ISO_DAY, monthsBefore, todayUtc } from '@/components/temporal/dates';
import { ContextChangesSection, EntitiesSection, EventsSection, LeadersSection, NewEntitiesSection, PriceChangesSection } from '@/components/temporal/diff-sections';
import { Container, Note, PageHeader } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, ApiError, apiD1, apiD3, safe } from '@/lib/api';
import { fmtDate, fmtInt, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { ChangeEvent, DiffPayload11, EntitySummary } from '@/lib/types';

type SP = { a?: string; b?: string; scope?: string; scope_custom?: string; include_backfill?: string };
const LIMIT = 200;

function resolve(sp: SP): { a: string; b: string; scope: string; valid: boolean; backfill: boolean } {
  const b = sp.b && ISO_DAY.test(sp.b) ? sp.b : todayUtc();
  const a = sp.a && ISO_DAY.test(sp.a) ? sp.a : daysBefore(b, 7);
  const scope = (sp.scope_custom?.trim() || sp.scope || 'all').trim() || 'all';
  const valid = (!sp.a || ISO_DAY.test(sp.a)) && (!sp.b || ISO_DAY.test(sp.b)) && a < b;
  return { a, b, scope, valid, backfill: sp.include_backfill === '1' };
}
function href(a: string, b: string, scope: string, backfill = false): string {
  const p = new URLSearchParams({ a, b });
  if (scope !== 'all') p.set('scope', scope);
  if (backfill) p.set('include_backfill', '1');
  return `/diff?${p.toString()}`;
}
function describeScope(s: DiffPayload11['scope'], fallback: string): string {
  if (!s) return fallback === 'all' ? 'the whole atlas' : fallback;
  if (typeof s === 'string') return s;
  const kind = typeof s.kind === 'string' ? s.kind : fallback;
  if (kind === 'all') return 'the whole atlas';
  const org = s.organization as { name?: string } | undefined;
  if (kind === 'org' && org?.name) return `organization · ${org.name}`;
  if (kind === 'family' && typeof s.family === 'string') return `family · ${s.family}`;
  if (kind === 'models') return 'models only';
  return kind;
}

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const { a, b, scope } = resolve(await searchParams);
  const title = `Diff the AI world — ${fmtDate(a)} → ${fmtDate(b)}${scope !== 'all' ? ` (${scope})` : ''}`;
  const description = `Every recorded change in the AI ecosystem between ${a} and ${b}: new and retired models, price and context changes, new benchmark leaders, papers, provider and hardware changes — from the change log, nothing inferred.`;
  const og = `${SITE_URL}/diff/og?a=${a}&b=${b}&scope=${encodeURIComponent(scope)}`;
  return { title, description, alternates: { canonical: href(a, b, scope) }, openGraph: { title: `${title} | ${SITE_NAME}`, description, url: `${SITE_URL}${href(a, b, scope)}`, images: [{ url: og, width: 1200, height: 630 }] }, twitter: { card: 'summary_large_image', images: [og] } };
}

export default async function DiffPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const { a, b, scope, valid, backfill } = resolve(sp);
  const today = todayUtc();
  const [orgs, fams] = await Promise.all([safe(api.companies({ limit: 40, sort: 'models' })), safe(apiD1.families({ limit: 40, sort: 'models' }))]);
  let payload: DiffPayload11 | null = null;
  let error: string | null = null;
  if (!valid) error = 'Dates must be YYYY-MM-DD and the first date must come before the second.';
  else {
    try {
      payload = await apiD3.diff(a, b, scope, LIMIT, backfill);
    } catch (e) {
      error = e instanceof ApiError && e.status === 400 ? e.detail ?? 'The API rejected these parameters.' : null;
    }
  }
  const cls = 'h-11 w-full border border-rule bg-surface px-2.5 text-sm text-ink focus:border-accent focus:outline-none';
  const orgOptions = (orgs?.items ?? []).map((o) => ({ value: `org:${o.slug}`, label: `${o.name} (${fmtInt(o.model_count)} models)` }));
  const famOptions = (fams?.items ?? []).filter((f) => f.canonical).map((f) => ({ value: `family:${f.slug}`, label: `${f.name} (${fmtInt(f.model_count)})` }));
  const knownScopes = new Set(['all', 'models', ...orgOptions.map((o) => o.value), ...famOptions.map((o) => o.value)]);
  const custom = knownScopes.has(scope) ? '' : scope;
  const c = payload?.counts ?? {};
  const cnt = (k: string): number | null => num(c[k]);

  // Split new entities by type (the API's new_entities is every type for scope=all).
  const newAll: EntitySummary[] = payload?.new_entities ?? [];
  const newModels = newAll.filter((e) => e.entity_type === 'model');
  const newPapers = newAll.filter((e) => e.entity_type === 'paper');
  const newOther = newAll.filter((e) => e.entity_type !== 'model' && e.entity_type !== 'paper');
  const newTotal = cnt('new_entities');
  const listCapped = newTotal !== null && newTotal > newAll.length;
  const retired: EntitySummary[] = (payload?.retired_models ?? []).map((r) => ('entity' in (r as ChangeEvent) && (r as ChangeEvent).entity ? ((r as ChangeEvent).entity as EntitySummary) : (r as EntitySummary))).filter((e) => e && e.slug);

  const presets: { label: string; a: string; b: string }[] = [
    { label: 'Last 7 days', a: daysBefore(today, 7), b: today },
    { label: 'Since the 1st', a: firstOfMonth(today), b: today },
    { label: 'Last 30 days', a: monthsBefore(today, 1), b: today },
    { label: 'This quarter', a: firstOfQuarter(today), b: today },
    { label: 'Last 90 days', a: daysBefore(today, 90), b: today },
  ];
  const sections = payload
    ? [
        { id: 'new-models', label: 'New models' },
        { id: 'retired', label: 'Retired' },
        { id: 'prices', label: 'Prices' },
        { id: 'context', label: 'Context' },
        { id: 'leaders', label: 'Leaders' },
        { id: 'papers', label: 'Papers' },
        { id: 'providers', label: 'Providers' },
        { id: 'hardware', label: 'Hardware' },
        { id: 'properties', label: 'Properties' },
        { id: 'gone', label: 'Gone' },
      ]
    : [];

  return (
    <Container wide>
      <BreadcrumbLd items={[{ name: SITE_NAME, href: '/' }, { name: 'Diff', href: '/diff' }, { name: `${a} → ${b}`, href: href(a, b, scope) }]} />
      <PageHeader
        eyebrow="Diff the AI world"
        title={
          <>
            What changed between <span className="tnum">{fmtDate(a)}</span> and <span className="tnum">{fmtDate(b)}</span>
          </>
        }
        lede="Two dates, one scope: new and retired models, price and context changes, new benchmark leaders, new papers, provider and hardware changes. Built from the change log keyed on when things occurred — nothing is inferred, and the URL is the report."
        aside={payload ? <p className="text-sm text-ink-3">Scope: <span className="text-ink-2">{describeScope(payload.scope, scope)}</span></p> : undefined}
      >
        <form action="/diff" method="get" className="mt-6 grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6" data-diff-form>
          <label className="block min-w-0">
            <span className="eyebrow block pb-1">From (UTC)</span>
            <input type="date" name="a" defaultValue={a} max={today} className={cls} required />
          </label>
          <label className="block min-w-0">
            <span className="eyebrow block pb-1">To (UTC)</span>
            <input type="date" name="b" defaultValue={b} max={today} className={cls} required />
          </label>
          <label className="block min-w-0">
            <span className="eyebrow block pb-1">Scope</span>
            <select name="scope" defaultValue={custom ? '' : scope} className={cls}>
              <option value="all">Everything</option>
              <option value="models">Models only</option>
              {orgOptions.length > 0 && (
                <optgroup label="Organization">
                  {orgOptions.map((o) => (
                    <option key={o.value} value={o.value}>
                      {o.label}
                    </option>
                  ))}
                </optgroup>
              )}
              {famOptions.length > 0 && (
                <optgroup label="Family">
                  {famOptions.map((o) => (
                    <option key={o.value} value={o.value}>
                      {o.label}
                    </option>
                  ))}
                </optgroup>
              )}
              {custom && <option value="">Custom (below)</option>}
            </select>
          </label>
          <label className="block min-w-0">
            <span className="eyebrow block pb-1">Custom scope</span>
            <input name="scope_custom" defaultValue={custom} placeholder="org:<slug> · family:<slug>" className={cls} />
          </label>
          <label className="flex min-w-0 items-end">
            <span className="flex h-11 items-center gap-2 text-sm text-ink-2">
              <input type="checkbox" name="include_backfill" value="1" defaultChecked={backfill} className="size-4 accent-[var(--accent)]" /> include backfill
            </span>
          </label>
          <div className="flex items-end gap-2">
            <button type="submit" className="inline-flex h-11 flex-1 items-center justify-center bg-ink px-3 text-sm font-medium text-canvas hover:opacity-90">
              Compare dates
            </button>
            <Link href={routes.diff()} className="inline-flex h-11 items-center border border-rule px-3 text-sm text-ink-2 hover:text-ink">
              Reset
            </Link>
          </div>
        </form>
        <ul className="no-scrollbar -mx-4 mt-3 flex gap-1 overflow-x-auto px-4 md:mx-0 md:px-0" aria-label="Presets">
          {presets.map((p) => {
            const on = p.a === a && p.b === b;
            return (
              <li key={p.label} className="shrink-0">
                <Link href={href(p.a, p.b, scope, backfill)} className={`inline-flex h-9 items-center border px-2.5 text-sm ${on ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink'}`} aria-current={on ? 'true' : undefined}>
                  {p.label}
                </Link>
              </li>
            );
          })}
        </ul>
      </PageHeader>

      <div className="pb-16">
        {error ? (
          <Unavailable what="Diff" reason={error} />
        ) : !payload ? (
          <Unavailable what="Diff" reason="The change log could not be read right now." />
        ) : (
          <>
            <DataStrip
              dense
              items={[
                { label: 'New models', value: fmtInt(listCapped ? null : newModels.length), hint: listCapped ? `${fmtInt(newTotal)} new entities in total` : undefined, definition: 'Canonical models first seen between the two dates (artifacts excluded unless include=artifacts).', href: '#new-models' },
                { label: 'Retired models', value: fmtInt(cnt('retired_models') ?? retired.length), definition: 'Models whose status became retired/deprecated in the window.', href: '#retired' },
                { label: 'Price changes', value: fmtInt(cnt('price_changes') ?? payload.price_changes.length), definition: 'PRICE_CHANGED events that occurred in the window.', href: '#prices' },
                { label: 'Context changes', value: fmtInt(cnt('context_changes') ?? payload.context_changes?.length), definition: 'CONTEXT_CHANGED events in the window.', href: '#context' },
                { label: 'New leaders', value: fmtInt(cnt('new_benchmark_leaders') ?? payload.new_benchmark_leaders?.length), definition: 'Benchmarks whose primary-group leader differs between the two dates.', href: '#leaders' },
                { label: 'New papers', value: fmtInt(listCapped ? null : newPapers.length), definition: 'Papers first seen in the window (from the new-entities list).', href: '#papers' },
                { label: 'Provider changes', value: fmtInt(cnt('provider_changes') ?? payload.provider_changes?.length), definition: 'Listings and delistings by providers.', href: '#providers' },
                { label: 'Hardware changes', value: fmtInt(cnt('hardware_changes') ?? payload.hardware_changes?.length), definition: 'Hardware entities and spec changes.', href: '#hardware' },
              ]}
            />
            <Note className="mt-2">
              {fmtInt(cnt('events'))} events in the window · {fmtInt(cnt('claims_superseded'))} claims superseded · price rows opened {fmtInt(cnt('price_rows_opened'))} / closed {fmtInt(cnt('price_rows_closed'))} · entities at {fmtDate(a)}: {fmtInt(cnt('entities_at_a'))} → at {fmtDate(b)}: {fmtInt(cnt('entities_at_b'))}.
              {listCapped && <> The entity lists are capped at {fmtInt(LIMIT)} by the API — per-type counts below are “of the first {fmtInt(LIMIT)}”.</>}
              {payload.note && <> {payload.note}</>}
            </Note>
            <SectionNav items={sections} className="mt-4" />

            <NewEntitiesSection id="new-models" title="New models" items={newModels} total={listCapped ? null : newModels.length} empty="No new canonical model between these dates" type="model" />
            <EntitiesSection id="retired" title="Retired models" items={retired} total={cnt('retired_models')} empty="No model was retired between these dates" />
            <PriceChangesSection id="prices" title="Price changes" items={payload.price_changes} total={cnt('price_changes')} empty="No price change between these dates" />
            <ContextChangesSection id="context" title="Context changes" items={payload.context_changes ?? []} total={cnt('context_changes')} empty="No context-window change between these dates" />
            <LeadersSection id="leaders" items={payload.new_benchmark_leaders ?? []} a={a} b={b} />
            <NewEntitiesSection id="papers" title="New papers" items={newPapers} total={listCapped ? null : newPapers.length} empty="No new paper between these dates" type="paper" />
            <PriceChangesSection id="providers" title="Provider changes" items={payload.provider_changes ?? []} total={cnt('provider_changes')} empty="No provider listing or delisting between these dates" />
            <EventsSection id="hardware" title="Hardware changes" items={payload.hardware_changes ?? []} total={cnt('hardware_changes')} empty="No hardware change between these dates" />
            <EventsSection id="properties" title="Other property changes" items={payload.property_changes} total={cnt('property_changes')} empty="No other property change between these dates" lede="Openness, licence, status, parameters, release-date and other material property changes (context changes are listed above)." />
            {newOther.length > 0 && <NewEntitiesSection id="new-other" title="Other new entities" items={newOther} total={listCapped ? null : newOther.length} empty="" type="other" />}
            <EntitiesSection id="gone" title="Gone entities" items={payload.gone_entities} total={cnt('gone_entities')} empty="No entity disappeared between these dates" />
            <Note className="mt-6">
              “Gone” means an entity present at the first date is no longer current at the second (merged or retired) — its record and history are kept. Events are keyed on <span className="mono">occurred_at</span>{backfill ? ' and include back-filled history' : '; back-filled history is excluded (tick “include backfill” to add it)'}. Per-entity history: any entity's History tab. <Link href={routes.timeMachine(a)} className="link">Atlas as of {fmtDate(a)}</Link> · <Link href={routes.methodology()} className="link">Methodology →</Link>
            </Note>
          </>
        )}
      </div>
    </Container>
  );
}