import type { Metadata } from 'next';
import Link from 'next/link';
import { ChangeRow } from '@/components/changes/change-row';
import { Bars } from '@/components/charts/charts';
import { ChipRow, type ChipItem } from '@/components/timeline/chip-row';
import { EntityBadge } from '@/components/ui/badges';
import { Container, Note, PageHeader } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmtInt, fmtMonth, fmtYear } from '@/lib/format';
import { CATEGORY_LABELS, categoryLabel, routes, SITE_NAME } from '@/lib/site';

export const revalidate = 600;

type SP = Record<string, string | undefined>;
const LIMIT = 400;

function current(sp: SP) {
  const out: { entity?: string; year?: string; category?: string } = {};
  if (sp.entity) out.entity = sp.entity;
  if (sp.year && /^\d{4}$/.test(sp.year)) out.year = sp.year;
  if (sp.category) out.category = sp.category;
  return out;
}

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const cur = current(await searchParams);
  const bits: string[] = [];
  if (cur.entity) bits.push(cur.entity);
  if (cur.category) bits.push(categoryLabel(cur.category).toLowerCase());
  if (cur.year) bits.push(cur.year);
  const title = bits.length ? `Timeline — ${bits.join(' · ')}` : 'Timeline — the AI ecosystem month by month';
  return {
    title,
    description: 'Change events grouped by month: releases, price moves, deprecations and benchmark results across the whole atlas or for one entity, each linked to its source.',
    alternates: { canonical: routes.timeline(cur) },
    openGraph: { title: `${title} | ${SITE_NAME}` },
    robots: cur.entity ? { index: false, follow: true } : undefined,
  };
}

export default async function TimelinePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const cur = current(sp);
  const [res, cats, stats, entity] = await Promise.all([safe(api.timeline({ ...cur, limit: LIMIT })), safe(api.changesCategories(365)), safe(api.stats()), cur.entity ? safe(api.entity(cur.entity)) : Promise.resolve(null)]);
  const months = res?.items ?? [];
  const shown = months.reduce((n, m) => n + m.events.length, 0);
  const total = res?.total ?? shown;

  // Years: current UTC year back to the earliest year the atlas knows (first entity or earliest month returned).
  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 >= earliest; y--) years.push(String(y));

  // Categories: live counts over the last year, summed per category; fall back to the vocabulary when unavailable.
  const catCounts = new Map<string, number>();
  for (const it of cats?.items ?? []) catCounts.set(it.category, (catCounts.get(it.category) ?? 0) + (Number(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 yearChips: ChipItem[] = [{ href: routes.timeline({ ...cur, year: undefined }), label: 'All years', active: !cur.year }, ...years.map((y) => ({ href: routes.timeline({ ...cur, year: y }), label: y, active: cur.year === y }))];
  const catChips: ChipItem[] = [{ href: routes.timeline({ ...cur, category: undefined }), label: 'All categories', active: !cur.category }, ...catKeys.map((c) => ({ href: routes.timeline({ ...cur, category: c }), label: categoryLabel(c), count: catCounts.size ? catCounts.get(c) ?? 0 : undefined, active: cur.category === c }))];

  // Density strip, oldest → newest (the list below is newest first).
  const density = [...months].reverse().map((m) => ({ label: fmtMonth(m.month), value: m.count ?? m.events.length }));

  return (
    <Container>
      <PageHeader
        eyebrow={
          entity ? (
            <>
              <EntityBadge type={entity.entity_type} small /> Timeline
            </>
          ) : (
            'Timeline'
          )
        }
        title={
          entity ? (
            <>
              Timeline of <Link href={routes.entity(entity)} className="text-ink-2 hover:text-accent">{entity.name}</Link>
            </>
          ) : cur.entity ? (
            <>Timeline of <span className="mono text-ink-2">{cur.entity}</span></>
          ) : (
            'The ecosystem, month by month'
          )
        }
        lede={entity ? <>Every recorded change for this {entity.entity_type.replace(/_/g, ' ')}{entity.organization ? ` by ${entity.organization.name}` : ''}, newest first. <Link href={routes.entity(entity)} className="link">Back to the entity page →</Link></> : 'Events grouped by month, newest first. Every entry links to the entity and to the source that stated the change.'}
        aside={res ? <p className="tnum text-sm text-ink-3">{fmtInt(shown)}{total > shown ? ` of ${fmtInt(total)}` : ''} events</p> : undefined}
      >
        <div className="mt-6 space-y-3">
          <div>
            <p className="eyebrow mb-1.5">Year</p>
            <ChipRow label="Year" items={yearChips} />
          </div>
          <div>
            <p className="eyebrow mb-1.5">Category {cats ? <span className="normal-case tracking-normal text-ink-3">· events in the last 365 days</span> : null}</p>
            <ChipRow label="Category" items={catChips} />
          </div>
          {cur.entity && (
            <p className="text-xs text-ink-3">
              Filtered to one entity. <Link href={routes.timeline({ year: cur.year, category: cur.category })} className="link">Show the whole atlas</Link>
            </p>
          )}
        </div>
      </PageHeader>

      <div className="pb-16">
        {!res ? (
          <Unavailable what="Timeline" reason={cur.entity ? 'The entity slug may not exist.' : undefined} />
        ) : months.length === 0 ? (
          <EmptyState title="No events for this selection">
            Try another year or category, or open <Link href={routes.changes()} className="link">the live feed</Link>.
          </EmptyState>
        ) : (
          <>
            {density.length > 1 && (
              <section aria-label="Events per month" className="mb-8">
                <p className="eyebrow mb-2">Events per month <span className="tnum normal-case tracking-normal text-ink-3">· {fmtInt(density.length)} months shown</span></p>
                <Bars data={density} height={90} />
              </section>
            )}
            <div className="grid gap-x-10 lg:grid-cols-[10rem_minmax(0,1fr)]">
              <nav aria-label="Months" className="no-scrollbar -mx-4 mb-4 flex gap-1 overflow-x-auto px-4 lg:sticky lg:top-[calc(var(--header-h)+1rem)] lg:mx-0 lg:mb-0 lg:block lg:self-start lg:space-y-0.5 lg:px-0">
                {months.map((m) => (
                  <a key={m.month} href={`#m-${m.month}`} className="tnum flex h-9 shrink-0 items-center justify-between gap-2 border border-rule px-2 text-xs text-ink-2 hover:text-ink lg:h-8 lg:border-0 lg:px-1">
                    <span>{fmtMonth(m.month)}</span>
                    <span className="text-ink-3">{fmtInt(m.count ?? m.events.length)}</span>
                  </a>
                ))}
              </nav>
              <div className="min-w-0">
                {months.map((m) => (
                  <section key={m.month} id={`m-${m.month}`} className="scroll-mt-20 pb-8">
                    <h2 className="eyebrow sticky top-[var(--header-h)] z-10 -mx-4 flex items-baseline justify-between bg-canvas/95 px-4 py-2 backdrop-blur md:mx-0 md:px-0">
                      <span>
                        {fmtMonth(m.month)} <span className="tnum text-ink-3">{fmtInt(m.count ?? m.events.length)}</span>
                      </span>
                      {(m.count ?? m.events.length) > m.events.length && <span className="tnum normal-case tracking-normal text-ink-3">{fmtInt(m.events.length)} shown</span>}
                    </h2>
                    <ul className="border-t border-rule">
                      {m.events.map((e) => (
                        <ChangeRow key={e.id} e={e} showDate live={false} />
                      ))}
                    </ul>
                  </section>
                ))}
                <Note>
                  Showing up to {fmtInt(LIMIT)} events{total > shown ? ` of ${fmtInt(total)} matching` : ''}. Narrow by year or category, or use <Link href={routes.changes()} className="link">the changes feed</Link> for cursor-paged history. Times are UTC.
                </Note>
              </div>
            </div>
          </>
        )}
      </div>
    </Container>
  );
}