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 { CONTEXTS, FitForm, QUANTS } from '@/components/hardware/fit-form';
import { Estimated, OpennessBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink } from '@/components/ui/entity';
import { Container, Note, PageHeader } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { api, ApiError } from '@/lib/api';
import { fmtGb, fmtInt, fmtParams, fmtTokens, num } from '@/lib/format';
import { routes } from '@/lib/site';
import type { HardwareFit } from '@/lib/types';

export const revalidate = 600;

type SP = Record<string, string | undefined>;

function parseInputs(sp: SP): { memory: number | null; quant: string; context: number; fitsOnly: boolean } {
  const custom = num(sp.memory_custom);
  const preset = num(sp.memory_gb);
  const memory = custom !== null && custom > 0 ? custom : preset !== null && preset > 0 ? preset : null;
  const quant = QUANTS.some((q) => q.value === sp.quant) ? (sp.quant as string) : '4bit';
  const ctx = num(sp.context);
  const context = ctx !== null && ctx > 0 ? Math.round(ctx) : 8192;
  return { memory, quant, context, fitsOnly: sp.fits === '1' };
}

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const { memory, quant, context } = parseInputs(await searchParams);
  const base = 'Hardware fit — which models run on my machine? (estimated)';
  const title = memory ? `Models estimated to fit ${fmtGb(memory)} at ${quant}, ${fmtTokens(context)} context` : base;
  return {
    title,
    description: 'Estimate which AI models fit a given amount of device memory at 4-bit, 8-bit or fp16 with a chosen context window. Estimates only — bytes per parameter plus a KV-cache allowance, never a measurement.',
    alternates: { canonical: memory ? routes.hardwareFit({ memory_gb: memory, quant, context }) : '/hardware/fit' },
  };
}

export default async function HardwareFitPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const { memory, quant, context, fitsOnly } = parseInputs(sp);
  let res: HardwareFit | null = null;
  let error: string | null = null;
  if (memory) {
    try {
      res = await api.hardwareFit({ memory_gb: memory, quant, context, limit: 200 });
    } catch (e) {
      error = e instanceof ApiError ? e.detail ?? e.message : 'API unreachable';
    }
  }
  const items = res ? (fitsOnly ? res.items.filter((i) => i.fits) : res.items) : [];
  const fits = num(res?.counts?.fits) ?? res?.items.filter((i) => i.fits).length ?? null;
  const evaluated = num(res?.counts?.evaluated) ?? res?.items.length ?? null;
  const self = (patch: { fits?: boolean }) => routes.hardwareFit({ memory_gb: memory ?? undefined, quant, context }) + (patch.fits ? '&fits=1' : '');
  const ctxLabel = CONTEXTS.find((c) => Number(c.value) === context)?.label ?? `${fmtTokens(context)} tokens`;

  return (
    <Container wide>
      <PageHeader
        eyebrow={
          <>
            <Link href={routes.hardware()} className="hover:text-ink">Hardware</Link> <span aria-hidden>/</span> Fit tool
          </>
        }
        title="What fits my machine?"
        lede="Pick a device memory size, a quantization and a context window: the atlas estimates each model's memory need from its parameter count. Every figure here is an estimate, never a measurement."
        aside={<Estimated />}
      >
        <FitForm memory={memory ? String(memory) : undefined} quant={quant} context={String(context)} className="mt-6" />
      </PageHeader>

      <div className="pb-16">
        {!memory ? (
          <EmptyState title="Choose a memory size to start">
            Try <Link href={routes.hardwareFit({ memory_gb: 32, quant: '4bit', context: 8192 })} className="link">32 GB · 4-bit · 8k</Link>, <Link href={routes.hardwareFit({ memory_gb: 80, quant: '8bit', context: 32768 })} className="link">80 GB · 8-bit · 32k</Link> or <Link href={routes.hardwareFit({ memory_gb: 192, quant: 'fp16', context: 131072 })} className="link">192 GB · fp16 · 128k</Link>.
          </EmptyState>
        ) : !res ? (
          <Unavailable what="Hardware fit" reason={error ?? undefined} />
        ) : (
          <>
            <div className="mb-5 border-y border-rule py-3">
              <p className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
                <Estimated />
                <span className="font-semibold text-ink">All figures are estimates, not measurements.</span>
                <span className="tnum text-ink-2">
                  {fmtGb(memory)} · {QUANTS.find((q) => q.value === quant)?.label.split(' (')[0] ?? quant} · {ctxLabel}
                </span>
                {fits !== null && evaluated !== null && (
                  <span className="tnum text-ink-3">
                    <span className="font-medium text-positive">{fmtInt(fits)}</span> of {fmtInt(evaluated)} models with a known parameter count fit
                  </span>
                )}
              </p>
              <ul className="mt-2 list-disc space-y-0.5 pl-5 text-xs leading-relaxed text-ink-3">
                {res.assumptions.map((a) => (
                  <li key={a}>{a}</li>
                ))}
                {res.assumptions.length === 0 && <li>Assumptions unavailable from the API.</li>}
              </ul>
              <p className="mt-2 flex flex-wrap items-center gap-3 text-xs">
                {fitsOnly ? (
                  <Link href={self({})} className="link">Show all evaluated models</Link>
                ) : (
                  <Link href={self({ fits: true })} className="link">Show only fitting models</Link>
                )}
                <Link href="/methodology#estimates" className="text-ink-3 hover:text-ink">Method →</Link>
              </p>
            </div>

            {items.length === 0 ? (
              <EmptyState title={fitsOnly ? 'No model is estimated to fit' : 'No models to evaluate'}>{fitsOnly ? 'Try a larger memory size or a lower-precision quantization.' : 'Models without a sourced parameter count are not estimated.'}</EmptyState>
            ) : (
              <DataTable caption="Estimated hardware fit">
                <thead>
                  <tr>
                    <Th>Model</Th>
                    <Th num>Params</Th>
                    <Th>Quant</Th>
                    <Th num>Est. memory</Th>
                    <Th num>Headroom</Th>
                    <Th>Fits</Th>
                    <Th className="w-24"><span className="sr-only">Compare</span></Th>
                  </tr>
                </thead>
                <tbody>
                  {items.length === 0 && <EmptyRow cols={7} />}
                  {items.map((r) => {
                    const openness = typeof r.model.attributes?.openness === 'string' ? r.model.attributes.openness : null;
                    return (
                      <tr key={`${r.model.id}-${r.quantization}`}>
                        <Td primary>
                          <span className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                            <EntityLink e={r.model} />
                            {openness && <OpennessBadge openness={openness} />}
                          </span>
                          {r.model.organization && <span className="block text-xs text-ink-3">{r.model.organization.name}</span>}
                          {r.note && <span className="block text-xs text-ink-3">{r.note}</span>}
                        </Td>
                        <Td num label="Params" className="tnum">{fmtParams(r.parameter_count)}</Td>
                        <Td label="Quant" className="mono text-xs text-ink-2">{r.quantization}</Td>
                        <Td num label="Est. memory" className="tnum">{fmtGb(r.estimated_memory_gb, 1)}</Td>
                        <Td num label="Headroom" className={r.fits ? 'tnum text-positive' : 'tnum text-danger'}>
                          {num(r.headroom_gb) === null ? '—' : `${r.headroom_gb >= 0 ? '+' : '−'}${fmtGb(Math.abs(r.headroom_gb), 1)}`}
                        </Td>
                        <Td label="Fits" className={r.fits ? 'font-medium text-positive' : 'text-ink-3'}>{r.fits ? '✓ fits' : '✗ too large'}</Td>
                        <Td className="text-right">
                          <CompareButton e={r.model} size="sm" />
                        </Td>
                      </tr>
                    );
                  })}
                </tbody>
              </DataTable>
            )}
            <Note className="mt-3">
              Headroom = device memory − 2 GB reserve − estimated need. Sorted by the API (fitting models first). Compare the models you shortlist with the + buttons. Devices with these memory sizes: <Link href={routes.hardware()} className="link">hardware listing</Link>.
            </Note>
          </>
        )}
      </div>
      <CompareTrayBar />
    </Container>
  );
}