import type { Metadata } from 'next';
import Link from 'next/link';
import { ChangeRow } from '@/components/changes/change-row';
import { EntityRow } from '@/components/ui/entity';
import { Container, Note, PageHeader, Section, Stat, StatGrid } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { api, ApiError, safe } from '@/lib/api';
import { fmtDate, fmtInt, num } from '@/lib/format';
import { routes } from '@/lib/site';
import type { ChangeEvent, DiffPayload, EntitySummary } from '@/lib/types';

type SP = { a?: string; b?: string; scope?: string; scope_custom?: string };
const ISO_DAY = /^\d{4}-\d{2}-\d{2}$/;

function todayUtc(): string {
  return new Date().toISOString().slice(0, 10);
}
function daysBefore(iso: string, days: number): string {
  const d = new Date(`${iso}T00:00:00Z`);
  d.setUTCDate(d.getUTCDate() - days);
  return d.toISOString().slice(0, 10);
}
function resolve(sp: SP): { a: string; b: string; scope: string; valid: 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 };
}

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const { a, b, scope } = resolve(await searchParams);
  const title = `What changed between ${fmtDate(a)} and ${fmtDate(b)}${scope !== 'all' ? ` (${scope})` : ''}`;
  return { title, description: `New, gone and changed entities, prices and benchmark results in the AI ecosystem between ${a} and ${b}, straight from the AI Atlas change log.`, alternates: { canonical: routes.diff({ a, b, scope }) }, robots: { index: false } };
}

function describeScope(s: DiffPayload['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;
  const parts = Object.entries(s)
    .filter(([k, v]) => k !== 'kind' && v !== null && v !== undefined && v !== '')
    .map(([k, v]) => `${k} ${typeof v === 'object' ? JSON.stringify(v) : String(v)}`);
  if (kind === 'all') return 'the whole atlas';
  return parts.length ? `${kind} · ${parts.join(' · ')}` : kind;
}

function Capped({ shown, total, what }: { shown: number; total: number | null; what: string }) {
  if (total === null || total <= shown) return null;
  return <Note className="mt-2">Showing the first {fmtInt(shown)} of {fmtInt(total)} {what}. Narrow the scope or the dates to see everything.</Note>;
}

function EventsSection({ id, title, items, total, empty }: { id: string; title: string; items: ChangeEvent[]; total: number | null; empty: string }) {
  return (
    <Section id={id} eyebrow={title} title={<>{title} <span className="tnum text-base font-normal text-ink-3">{fmtInt(total ?? items.length)}</span></>}>
      {items.length === 0 ? (
        <EmptyState title={empty} />
      ) : (
        <>
          <ul className="border-t border-rule">
            {items.map((e) => (
              <ChangeRow key={e.id} e={e} showDate live={false} />
            ))}
          </ul>
          <Capped shown={items.length} total={total} what="events" />
        </>
      )}
    </Section>
  );
}

function EntitiesSection({ id, title, items, total, empty }: { id: string; title: string; items: EntitySummary[]; total: number | null; empty: string }) {
  return (
    <Section id={id} eyebrow={title} title={<>{title} <span className="tnum text-base font-normal text-ink-3">{fmtInt(total ?? items.length)}</span></>}>
      {items.length === 0 ? (
        <EmptyState title={empty} />
      ) : (
        <>
          <ul className="border-t border-rule">
            {items.map((e) => (
              <EntityRow key={e.id} e={e} showType showDescription={false} />
            ))}
          </ul>
          <Capped shown={items.length} total={total} what="entities" />
        </>
      )}
    </Section>
  );
}

export default async function DiffPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const { a, b, scope, valid } = resolve(sp);
  const orgs = await safe(api.companies({ limit: 30, sort: 'models' }));
  let payload: DiffPayload | 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 api.diff(a, b, scope);
    } 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 knownScopes = new Set(['all', 'models', ...orgOptions.map((o) => o.value)]);
  const custom = knownScopes.has(scope) ? '' : scope;
  const c = payload?.counts ?? {};
  const cnt = (k: string): number | null => num(c[k]);

  return (
    <Container>
      <PageHeader eyebrow="Diff" title={<>What changed between <span className="tnum">{fmtDate(a)}</span> and <span className="tnum">{fmtDate(b)}</span></>} lede="Two dates, one scope: the entities that appeared or disappeared, and every property, price and benchmark change recorded in between. Built from the change log — nothing is inferred." 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-5">
          <label className="block min-w-0">
            <span className="eyebrow block pb-1">From (UTC)</span>
            <input type="date" name="a" defaultValue={a} max={todayUtc()} 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={todayUtc()} 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>
              )}
              {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="family:Claude · org:<slug>" className={cls} />
          </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>
        <Note className="mt-2">
          Custom scope accepts <span className="mono">org:&lt;slug&gt;</span> or <span className="mono">family:&lt;name&gt;</span>; when filled it overrides the select. Quick links: <Link href={routes.diff({ a: daysBefore(todayUtc(), 1), b: todayUtc() })} className="link">yesterday → today</Link> · <Link href={routes.diff({ a: daysBefore(todayUtc(), 7), b: todayUtc(), scope: 'models' })} className="link">last 7 days, models</Link> · <Link href={routes.diff({ a: daysBefore(todayUtc(), 30), b: todayUtc() })} className="link">last 30 days</Link>
        </Note>
      </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." />
        ) : (
          <>
            <StatGrid cols={8}>
              <Stat label="New entities" value={fmtInt(cnt('new_entities') ?? payload.new_entities.length)} href="#new" />
              <Stat label="Gone" value={fmtInt(cnt('gone_entities') ?? payload.gone_entities.length)} href="#gone" />
              <Stat label="Events" value={fmtInt(cnt('events'))} hint="all types" />
              <Stat label="Price changes" value={fmtInt(cnt('price_changes') ?? payload.price_changes.length)} href="#prices" accent />
              <Stat label="Benchmark changes" value={fmtInt(cnt('benchmark_changes') ?? payload.benchmark_changes.length)} href="#benchmarks" />
              <Stat label="Claims superseded" value={fmtInt(cnt('claims_superseded'))} />
              <Stat label={`Entities at ${fmtDate(a)}`} value={fmtInt(cnt('entities_at_a'))} />
              <Stat label={`Entities at ${fmtDate(b)}`} value={fmtInt(cnt('entities_at_b'))} />
            </StatGrid>
            <Note className="mt-2">
              Price rows opened {fmtInt(cnt('price_rows_opened'))} · closed {fmtInt(cnt('price_rows_closed'))}. Counts are totals over the period; the lists below are capped by the API.
            </Note>

            <EntitiesSection id="new" title="New entities" items={payload.new_entities} total={cnt('new_entities')} empty="No new entities between these dates" />
            <EntitiesSection id="gone" title="Gone entities" items={payload.gone_entities} total={cnt('gone_entities')} empty="No entities disappeared between these dates" />
            <EventsSection id="properties" title="Property changes" items={payload.property_changes} total={cnt('property_changes')} empty="No property changes between these dates" />
            <EventsSection id="prices" title="Price changes" items={payload.price_changes} total={cnt('price_changes')} empty="No price changes between these dates" />
            <EventsSection id="benchmarks" title="Benchmark changes" items={payload.benchmark_changes} total={cnt('benchmark_changes')} empty="No benchmark changes 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. Per-entity history: open any entity's History tab. <Link href="/methodology" className="link">Methodology →</Link>
            </Note>
          </>
        )}
      </div>
    </Container>
  );
}