import type { Metadata } from 'next';
import Link from 'next/link';
import { CompareButton } from '@/components/compare/compare-button';
import { CompareTrayBar } from '@/components/compare/compare-tray-bar';
import { fmtMemory, HW_KIND_LABELS, interconnect, precisions, releaseOf } from '@/components/hardware/hardware-bits';
import { BTN_GHOST, CTRL, Field, SortTh } from '@/components/intelligence/bits';
import { TerminalLayout } from '@/components/layout/terminal';
import { Chip } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink } from '@/components/ui/entity';
import { Pagination, withParams } from '@/components/ui/pagination';
import { Note, PageHeader } 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';

export const revalidate = 600;
type SP = Record<string, string | undefined>;
const LIMIT = 50;
const KEYS = ['q', 'kind', 'manufacturer', 'min_memory', 'sort', 'offset'] as const;
const SORTS = [
  { value: 'memory', label: 'Memory' },
  { value: 'name', label: 'Name' },
  { value: 'updated', label: 'Recently updated' },
];

const TITLE = 'AI hardware — GPUs, accelerators, SoCs and systems: memory, bandwidth, TDP';
const DESC = 'Accelerators and devices for training and inference with the memory, bandwidth, TDP, precision support and interconnect figures published by their manufacturers — and, for each, which models are estimated to fit.';
export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const sp = await searchParams;
  const filtered = ['q', 'kind', 'manufacturer', 'min_memory', 'offset'].some((k) => sp[k]);
  return { title: TITLE, description: DESC, alternates: { canonical: routes.hardware() }, openGraph: { title: `${TITLE} | ${SITE_NAME}`, description: DESC, url: `${SITE_URL}${routes.hardware()}`, siteName: SITE_NAME }, robots: filtered ? { index: false, follow: true } : undefined };
}

export default async function HardwarePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const cur: Record<string, string | undefined> = {};
  for (const k of KEYS) if (sp[k]) cur[k] = sp[k];
  const offset = Math.max(0, Number(cur.offset) || 0);
  const sort = SORTS.some((s) => s.value === cur.sort) ? (cur.sort as string) : 'memory';
  const page = await safe(intel.hardware({ q: cur.q, kind: cur.kind, manufacturer: cur.manufacturer, min_memory: num(cur.min_memory) ?? undefined, sort, limit: LIMIT, offset }));
  const href = (patch: Record<string, string | number | undefined | null>) => withParams('/hardware', cur, patch);
  const kinds = page?.facets?.kinds ?? [];
  const manufacturers = page?.facets?.manufacturers ?? [];
  const filterCount = ['q', 'kind', 'manufacturer', 'min_memory'].filter((k) => cur[k]).length;
  const items = page?.items ?? [];
  const withTdp = items.filter((e) => num(e.attributes?.tdp_watts) !== null).length;
  const withPrec = items.filter((e) => precisions(e.attributes ?? {}).length).length;

  const filters = (
    <form action="/hardware" method="get" className="space-y-3" data-hardware-filters>
      <Field label="Name">
        <input name="q" defaultValue={cur.q ?? ''} placeholder="H100, M4 Max…" className={CTRL} />
      </Field>
      <Field label="Kind">
        <select name="kind" defaultValue={cur.kind ?? ''} className={CTRL}>
          <option value="">Any kind</option>
          {kinds.map((k) => (
            <option key={k.value} value={k.value}>
              {HW_KIND_LABELS[k.value] ?? k.value} ({fmtInt(k.count)})
            </option>
          ))}
          {cur.kind && !kinds.some((k) => k.value === cur.kind) && <option value={cur.kind}>{HW_KIND_LABELS[cur.kind] ?? cur.kind}</option>}
        </select>
      </Field>
      <Field label="Manufacturer">
        <select name="manufacturer" defaultValue={cur.manufacturer ?? ''} className={CTRL}>
          <option value="">Any manufacturer</option>
          {manufacturers.map((m) => (
            <option key={m.value} value={m.value}>
              {m.value} ({fmtInt(m.count)})
            </option>
          ))}
          {cur.manufacturer && !manufacturers.some((m) => m.value === cur.manufacturer) && <option value={cur.manufacturer}>{cur.manufacturer}</option>}
        </select>
      </Field>
      <Field label="Memory ≥ (GB)">
        <input name="min_memory" inputMode="numeric" defaultValue={cur.min_memory ?? ''} placeholder="e.g. 64" className={CTRL} />
      </Field>
      <Field label="Sort">
        <select name="sort" defaultValue={sort} className={CTRL}>
          {SORTS.map((s) => (
            <option key={s.value} value={s.value}>
              {s.label}
            </option>
          ))}
        </select>
      </Field>
      <div className="flex gap-2">
        <button type="submit" className="inline-flex h-11 flex-1 items-center justify-center bg-ink lg:h-10 px-3 text-sm font-medium text-canvas hover:opacity-90">
          Apply
        </button>
        <Link href="/hardware" className={BTN_GHOST}>
          Reset
        </Link>
      </div>
    </form>
  );
  const inspector = (
    <div className="space-y-3 text-xs leading-relaxed text-ink-2">
      <p>Figures are the manufacturer&apos;s published specifications (spec sheets, tier 2 when read from a reseller). A dash means no source has stated the value — TDP, precision support and interconnect are sparse in the current corpus ({fmtInt(withTdp)} / {fmtInt(withPrec)} of the {fmtInt(items.length)} rows shown carry TDP / precision).</p>
      <p>Memory listed as a range = several configurations (Apple silicon tiers); fit estimates use the largest unless you pick one.</p>
      <p>
        <Link href={routes.runLocally()} className="link">Run locally</Link> · <Link href="/hardware/frontier" className="link">Hardware frontier</Link> · <Link href="/methodology#estimates" className="link">estimate method</Link>
      </p>
    </div>
  );

  return (
    <TerminalLayout filters={filters} inspector={inspector} filtersTitle="Filters" inspectorTitle="Reading" storageKey="aia-inspector-hardware" filterCount={filterCount}>
      <PageHeader eyebrow="Hardware" title="Hardware" lede="GPUs, accelerators, SoCs and systems with the memory and bandwidth figures their manufacturers publish. Every device links to what it is estimated to run." className="pt-4 md:pt-6" aside={
        <div className="flex flex-col items-start gap-2 md:items-end">
          {page && <p className="tnum text-sm text-ink-3">{fmtInt(page.total)} devices</p>}
          <span className="flex flex-wrap gap-2">
            <Link href="/hardware/frontier" className="inline-flex h-10 items-center border border-rule px-3 text-sm text-ink-2 hover:border-rule-strong hover:text-ink">
              Hardware frontier →
            </Link>
            <Link href={routes.runLocally()} className="inline-flex h-10 items-center border border-rule-strong px-3 text-sm font-medium text-ink hover:border-accent hover:text-accent">
              What fits my machine? →
            </Link>
          </span>
        </div>
      } />
      <div className="pb-16">
        {!page ? (
          <Unavailable what="Hardware" />
        ) : items.length === 0 && !offset ? (
          <EmptyState title={filterCount ? 'No hardware matches these filters' : 'No hardware recorded yet'}>{filterCount ? 'Remove a filter.' : 'Connectors: manufacturer spec pages.'}</EmptyState>
        ) : (
          <>
            <DataTable scroll compact>
              <thead>
                <tr>
                  <SortTh active={sort === 'name'} href={href({ sort: 'name', offset: undefined })}>Hardware</SortTh>
                  <Th>Kind</Th>
                  <SortTh active={sort === 'memory'} href={href({ sort: undefined, offset: undefined })} num dir="desc">Memory</SortTh>
                  <Th num>Bandwidth</Th>
                  <Th num>TDP</Th>
                  <Th>Precision</Th>
                  <Th>Interconnect</Th>
                  <Th>Release</Th>
                  <Th>Fit</Th>
                  <Th className="w-24" aria-label="Compare" />
                </tr>
              </thead>
              <tbody>
                {items.length === 0 && <EmptyRow cols={10} />}
                {items.map((e) => {
                  const a = e.attributes ?? {};
                  const prec = precisions(a);
                  const ic = interconnect(a);
                  const rel = releaseOf(e);
                  return (
                    <tr key={e.id} data-hardware-row>
                      <Td primary>
                        <EntityLink e={e} />
                        <span className="block text-xs text-ink-3">{typeof a.manufacturer === 'string' ? a.manufacturer : e.organization?.name ?? '—'}</span>
                      </Td>
                      <Td label="Kind">{typeof a.kind === 'string' ? <Chip>{HW_KIND_LABELS[a.kind] ?? a.kind}</Chip> : <span className="text-ink-3">—</span>}</Td>
                      <Td num label="Memory" className="tnum font-medium">{fmtMemory(a.memory_gb)}{typeof a.memory_type === 'string' && <span className="block text-[10px] font-normal text-ink-3">{a.memory_type}</span>}</Td>
                      <Td num label="Bandwidth" className="tnum text-ink-2">{num(a.memory_bandwidth_gbs) === null ? <span className="text-ink-3">—</span> : `${fmtInt(a.memory_bandwidth_gbs)} GB/s`}</Td>
                      <Td num label="TDP" className="tnum text-ink-2">{num(a.tdp_watts) === null ? <span className="text-ink-3">—</span> : `${fmtInt(a.tdp_watts)} W`}</Td>
                      <Td label="Precision" className="mono text-[11px] text-ink-2">{prec.length ? prec.join(' · ') : <span className="font-sans text-xs text-ink-3">—</span>}</Td>
                      <Td label="Interconnect" className="text-xs text-ink-2">{ic ?? <span className="text-ink-3">—</span>}</Td>
                      <Td label="Release" className="tnum text-ink-2 whitespace-nowrap">{rel ? fmtDate(rel) : <span className="text-ink-3">—</span>}</Td>
                      <Td label="Fit">
                        <Link href={`${routes.runLocally()}?hardware=${encodeURIComponent(e.slug)}`} className="link whitespace-nowrap text-xs">
                          What can it run? →
                        </Link>
                      </Td>
                      <Td className="text-right">
                        <CompareButton e={e} size="sm" />
                      </Td>
                    </tr>
                  );
                })}
              </tbody>
            </DataTable>
            <Pagination total={page.total} limit={LIMIT} offset={offset} makeHref={(o) => href({ offset: o || undefined })} className="mt-4" />
            <Note className="mt-3">
              Each device page lists the models estimated to fit its memory per quantization — labelled as estimates, method on <Link href="/methodology#estimates" className="link">/methodology</Link>. A dash = not stated by any source (never guessed).
            </Note>
          </>
        )}
      </div>
      <CompareTrayBar />
    </TerminalLayout>
  );
}