import type { Metadata } from 'next';
import Link from 'next/link';
import type { Series } from '@/components/charts';
import { HardwareStepChart } from '@/components/intelligence/client-charts';
import { fmtMemory, HW_KIND_LABELS, memoryRange, releaseMs, releaseOf } from '@/components/hardware/hardware-bits';
import { EstimateBanner, Methodology } from '@/components/intelligence/bits';
import { Chip, Estimated } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink } from '@/components/ui/entity';
import { Container, Note, PageHeader, Section } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { intel, safe } from '@/lib/api';
import { fmtDate, fmtInt, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { EntitySummary } from '@/lib/types';

export const revalidate = 600;
const TITLE = 'Hardware frontier — accelerator memory and bandwidth by release';
const DESC = 'Timeline of accelerators and devices by release date: memory and bandwidth per generation and manufacturer, as published, connected to the models each device is estimated to run at 4-bit.';
export const metadata: Metadata = { title: TITLE, description: DESC, alternates: { canonical: '/hardware/frontier' }, openGraph: { title: `${TITLE} | ${SITE_NAME}`, description: DESC, url: `${SITE_URL}/hardware/frontier`, siteName: SITE_NAME } };

const COLORS = ['var(--series-1)', 'var(--series-2)', 'var(--series-3)', 'var(--series-4)', 'var(--series-5)', 'var(--series-6)'];

export default async function HardwareFrontierPage() {
  const page = await safe(intel.hardware({ limit: 100, sort: 'memory' }));
  if (!page) {
    return (
      <Container wide>
        <PageHeader eyebrow="Hardware frontier" title="Accelerators by generation" />
        <Unavailable what="Hardware" />
      </Container>
    );
  }
  const all = page.items;
  const dated = all.map((e) => ({ e, at: releaseMs(releaseOf(e)), mem: memoryRange(e.attributes?.memory_gb), bw: num(e.attributes?.memory_bandwidth_gbs), maker: typeof e.attributes?.manufacturer === 'string' ? (e.attributes.manufacturer as string) : e.organization?.name ?? 'Unknown' })).filter((x) => x.at !== null);
  const makers = [...new Set(dated.map((x) => x.maker))].sort();
  const memSeries: Series[] = makers.map((m, i) => ({ name: m, color: COLORS[i % COLORS.length], points: dated.filter((x) => x.maker === m && x.mem).sort((a, b) => (a.at as number) - (b.at as number)).map((x) => ({ x: new Date(x.at as number), y: (x.mem as [number, number])[1] })) })).filter((s) => s.points.length > 0);
  const bwSeries: Series[] = makers.map((m, i) => ({ name: m, color: COLORS[i % COLORS.length], points: dated.filter((x) => x.maker === m && x.bw !== null).sort((a, b) => (a.at as number) - (b.at as number)).map((x) => ({ x: new Date(x.at as number), y: x.bw as number })) })).filter((s) => s.points.length > 0);
  const undated = all.length - dated.length;

  // connect to fit estimates: models estimated to fit each dated device at 4-bit / 8K (largest configuration)
  const fits = await Promise.all(dated.slice(0, 40).map(async (x) => ({ slug: x.e.slug, fit: await safe(intel.hardwareSlugFit(x.e.slug, { limit: 1 })) })));
  const fitBy = new Map(fits.map((f) => [f.slug, f.fit]));
  const assumptions = fits.find((f) => f.fit)?.fit?.assumptions ?? [];
  const byMaker = makers.map((m) => ({ maker: m, rows: dated.filter((x) => x.maker === m).sort((a, b) => (b.at as number) - (a.at as number)) }));
  const label = (e: EntitySummary) => `${e.name}`;

  return (
    <Container wide>
      <PageHeader eyebrow={<><Link href={routes.hardware()} className="hover:text-ink">Hardware</Link> <span aria-hidden>/</span> Frontier</>} title="Accelerators by generation" lede="Memory and bandwidth of every dated device the atlas knows, plotted by release and manufacturer (largest configuration when several exist). The right-hand columns connect each device to the models it is estimated to run." aside={<p className="tnum text-sm text-ink-3">{fmtInt(dated.length)} dated devices · {fmtInt(undated)} without a release date</p>} />

      <Section eyebrow="Memory per device" title="Device memory by release date" lede="Largest published memory configuration, GB. Steps mark a new generation; hover for the exact device." hairline={false}>
        {memSeries.reduce((n, s) => n + s.points.length, 0) < 2 ? <EmptyState title="Not enough dated devices to draw" /> : <HardwareStepChart series={memSeries} unit="GB" yLabel="Memory (GB)" />}
      </Section>
      <Section eyebrow="Bandwidth per device" title="Memory bandwidth by release date" lede="GB/s as published — the figure that bounds token generation speed for memory-bound inference.">
        {bwSeries.reduce((n, s) => n + s.points.length, 0) < 2 ? <EmptyState title="Not enough dated devices to draw" /> : <HardwareStepChart series={bwSeries} unit="GB/s" yLabel="Bandwidth (GB/s)" />}
      </Section>

      <Section eyebrow="By manufacturer" title="Every dated device, newest first" lede={<span className="inline-flex flex-wrap items-center gap-2">Fit columns are estimates <Estimated /> — models with a known parameter count estimated to fit at 4-bit, 8K context, batch 1, largest configuration.</span>}>
        <EstimateBanner assumptions={assumptions} className="mb-4" />
        {byMaker.map((g) => (
          <div key={g.maker} className="mb-8">
            <h3 className="mb-2 flex items-baseline gap-2 text-[15px] font-semibold">
              {g.maker} <span className="tnum text-xs font-normal text-ink-3">{fmtInt(g.rows.length)} devices</span>
            </h3>
            <DataTable compact caption={`${g.maker} devices`}>
              <thead>
                <tr>
                  <Th>Device</Th>
                  <Th>Kind</Th>
                  <Th>Release</Th>
                  <Th num>Memory</Th>
                  <Th num>Bandwidth</Th>
                  <Th num>Models that fit @4bit</Th>
                  <Th>Run locally</Th>
                </tr>
              </thead>
              <tbody>
                {g.rows.length === 0 && <EmptyRow cols={7} />}
                {g.rows.map(({ e, mem, bw }) => {
                  const f = fitBy.get(e.slug);
                  const rel = releaseOf(e);
                  return (
                    <tr key={e.id}>
                      <Td primary><EntityLink e={e}>{label(e)}</EntityLink></Td>
                      <Td label="Kind">{typeof e.attributes?.kind === 'string' ? <Chip>{HW_KIND_LABELS[e.attributes.kind as string] ?? (e.attributes.kind as string)}</Chip> : '—'}</Td>
                      <Td label="Release" className="tnum text-ink-2 whitespace-nowrap">{rel ? fmtDate(rel) : '—'}</Td>
                      <Td num label="Memory" className="tnum">{mem ? fmtMemory(e.attributes?.memory_gb) : '—'}</Td>
                      <Td num label="Bandwidth" className="tnum text-ink-2">{bw === null ? '—' : `${fmtInt(bw)} GB/s`}</Td>
                      <Td num label="Fit @4bit" className="tnum">
                        {f ? (
                          <>
                            <span className="font-medium text-positive">{fmtInt(f.counts.fits)}</span> <span className="text-ink-3">/ {fmtInt(f.counts.evaluated)}</span>
                          </>
                        ) : (
                          <span className="text-ink-3">—</span>
                        )}
                      </Td>
                      <Td label="Run locally">
                        <Link href={`${routes.runLocally()}?hardware=${encodeURIComponent(e.slug)}`} className="link text-xs whitespace-nowrap">
                          What can it run? →
                        </Link>
                      </Td>
                    </tr>
                  );
                })}
              </tbody>
            </DataTable>
          </div>
        ))}
        {undated > 0 && (
          <Note>
            {fmtInt(undated)} device{undated === 1 ? '' : 's'} without a sourced release date are not plotted (they remain in the <Link href={routes.hardware()} className="link">listing</Link>).
          </Note>
        )}
        <Methodology text="Release dates and specifications as published by the manufacturer (year- or month-precision dates are plotted mid-period). Fit counts come from GET /hardware/{slug}/fit with default inputs and are estimates." />
      </Section>
    </Container>
  );
}