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 { QUANTS } from '@/components/hardware/fit-form';
import { EstimateBanner, FitBreakdownList, Methodology, SourceTag } from '@/components/intelligence/bits';
import { CONTEXT_PRESETS, PLATFORMS, RunLocallyForm, type RunLocallyInputs, USE_CASES } from '@/components/intelligence/run-locally-form';
import { TerminalLayout } from '@/components/layout/terminal';
import { Chip, Estimated, OpennessBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink } from '@/components/ui/entity';
import { Note, PageHeader } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { ApiError, intel, safe } from '@/lib/api';
import { fmtGb, fmtInt, fmtParams, fmtTokens, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { Fit, RunLocallyItem, RunLocallyPayload } from '@/lib/types';

export const revalidate = 600;
type SP = Record<string, string | undefined>;

function parse(sp: SP): RunLocallyInputs {
  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 gpu = num(sp.gpu_count);
  const ctx = num(sp.context);
  const batch = num(sp.batch);
  return {
    memory,
    gpuCount: gpu !== null && [1, 2, 4, 8].includes(gpu) ? gpu : 1,
    quant: QUANTS.some((q) => q.value === sp.quant) ? (sp.quant as string) : '4bit',
    context: ctx !== null && ctx > 0 ? Math.round(ctx) : 8192,
    batch: batch !== null && batch > 0 ? Math.round(batch) : 1,
    platform: PLATFORMS.some((p) => p.value === sp.platform) ? (sp.platform as string) : 'any',
    useCase: USE_CASES.some((u) => u.value === sp.use_case) ? (sp.use_case as string) : '',
    openness: ['open-source', 'open-weights', 'restricted-weights'].includes(sp.openness ?? '') ? (sp.openness as string) : '',
    hardware: sp.hardware?.trim() || null,
    fitsOnly: sp.fits === '1',
  };
}

const TITLE = 'Run locally — which AI models fit your machine? (estimated)';
const DESC = 'Local AI Explorer: choose memory, GPU count, platform, quantization, context and batch; the atlas estimates which downloadable models fit — with the weight, KV-cache and overhead breakdown — and lists their compatible GGUF/MLX artifacts, using observed file sizes where a source records them. Every figure is an estimate.';
export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const v = parse(await searchParams);
  const title = v.hardware ? `What can ${v.hardware} run? (estimated)` : v.memory ? `Models estimated to fit ${fmtGb(v.memory * v.gpuCount)} at ${v.quant}, ${fmtTokens(v.context)} context` : TITLE;
  return { title, description: DESC, alternates: { canonical: routes.runLocally() }, openGraph: { title: `${title} | ${SITE_NAME}`, description: DESC, url: `${SITE_URL}${routes.runLocally()}`, siteName: SITE_NAME }, robots: v.memory || v.hardware ? { index: false, follow: true } : undefined };
}

export default async function RunLocallyPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const v = parse(sp);
  let res: RunLocallyPayload | null = null;
  let hardwareName: string | null = null;
  let memoryOptions: number[] | undefined;
  let error: string | null = null;
  let notFound = false;
  if (v.hardware) {
    try {
      const h = await intel.hardwareSlugFit(v.hardware, { quant: v.quant, context: v.context, memory_gb: v.memory ?? undefined, gpu_count: v.gpuCount, openness: v.openness || undefined, limit: 300 });
      hardwareName = h.hardware.name;
      memoryOptions = h.memory_options_gb;
      res = { inputs: h.inputs, estimated: h.estimated, assumptions: h.assumptions, counts: h.counts, note: h.note ?? `Runtimes listed for this device: ${h.runtimes.join(', ') || 'unavailable'}.`, items: h.items.map(({ model, ...fit }) => ({ model, fit: fit as Fit, artifacts: [], artifact_count: 0 })) };
    } catch (e) {
      if (e instanceof ApiError && e.notFound) notFound = true;
      else error = e instanceof ApiError ? e.detail ?? e.message : 'API unreachable';
    }
  } else if (v.memory) {
    try {
      res = await intel.runLocally({ memory_gb: v.memory, gpu_count: v.gpuCount, quant: v.quant, context: v.context, batch: v.batch, platform: v.platform, use_case: v.useCase || undefined, openness: v.openness || undefined, limit: 300 });
    } catch (e) {
      error = e instanceof ApiError ? e.detail ?? e.message : 'API unreachable';
    }
  }
  const methodology = res ? null : await safe(intel.methodology());
  const items: RunLocallyItem[] = res ? (v.fitsOnly ? res.items.filter((i) => i.fit.fits) : res.items) : [];
  const multiNote = v.gpuCount > 1 ? res?.items.find((i) => i.fit.multi_gpu_note)?.fit.multi_gpu_note ?? res?.note : null;
  const total = v.memory ? v.memory * v.gpuCount : num(res?.inputs?.total_memory_gb);
  const ctxLabel = CONTEXT_PRESETS.find((c) => c.value === v.context)?.label ?? fmtTokens(v.context);
  const filterCount = [v.memory, v.gpuCount !== 1, v.quant !== '4bit', v.context !== 8192, v.batch !== 1, v.platform !== 'any', v.useCase, v.openness, v.fitsOnly].filter(Boolean).length;
  const withArtifacts = items.filter((i) => i.artifacts.length > 0).length;

  const inspector = (
    <div className="space-y-3 text-xs leading-relaxed text-ink-2">
      <p className="flex items-center gap-2">
        <Estimated /> <span className="font-medium text-ink">Method</span>
      </p>
      <ul className="list-disc space-y-1 pl-4">
        {(res?.assumptions ?? methodology?.hardware_fit?.assumptions ?? []).map((a) => (
          <li key={a}>{a}</li>
        ))}
      </ul>
      {methodology?.hardware_fit?.bytes_per_param && !res && (
        <p>
          bytes / param:{' '}
          {Object.entries(methodology.hardware_fit.bytes_per_param)
            .map(([k, b]) => `${k} ${b}`)
            .join(' · ')}
        </p>
      )}
      <p>
        <Link href="/methodology#estimates" className="link">/methodology</Link> · <Link href="/developers" className="link">GET /run-locally</Link>
      </p>
    </div>
  );

  return (
    <TerminalLayout filters={<RunLocallyForm v={v} hardwareName={hardwareName} memoryOptions={memoryOptions} />} inspector={inspector} filtersTitle="Machine" inspectorTitle="Method" storageKey="aia-inspector-run-locally" filterCount={filterCount}>
      <PageHeader eyebrow={v.hardware ? 'What can this machine run?' : 'Local AI Explorer'} title={hardwareName ? `What can ${hardwareName} run?` : 'Run locally'} lede="Describe the machine — memory, number of devices, platform, quantization, context, batch — and the atlas lists the downloadable models estimated to fit, with the breakdown behind each number and the GGUF / MLX artifacts recorded for them. Estimates, never measurements." aside={<Estimated />} className="pt-4 md:pt-6" />

      <div className="pb-16">
        {notFound ? (
          <EmptyState title={`No hardware with slug “${v.hardware}”`}>
            Pick a device from the <Link href={routes.hardware()} className="link">hardware listing</Link> or describe the machine in the rail.
          </EmptyState>
        ) : !v.memory && !v.hardware ? (
          <EmptyState title="Describe a machine to start">
            Try <Link href="/run-locally?memory_gb=64&quant=4bit" className="link">64 GB · 4-bit</Link>, <Link href="/run-locally?memory_gb=24&gpu_count=2&quant=8bit&platform=nvidia" className="link">2 × 24 GB · 8-bit · NVIDIA</Link>, <Link href="/run-locally?memory_gb=128&quant=4bit&context=131072&use_case=coding&platform=apple" className="link">128 GB · 4-bit · 128K · coding</Link> — or start from a device on <Link href={routes.hardware()} className="link">/hardware</Link>.
          </EmptyState>
        ) : !res ? (
          <Unavailable what="Local fit estimate" reason={error ?? undefined} />
        ) : (
          <>
            <EstimateBanner assumptions={res.assumptions} note={res.note} counts={res.counts} />
            <p className="tnum mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-ink-2">
              <span className="font-medium text-ink">{fmtGb(total)} total</span>
              <span>
                {v.gpuCount} × {fmtGb(v.memory ?? num(res.inputs?.memory_gb))}
              </span>
              <span>{QUANTS.find((q) => q.value === v.quant)?.label.split(' (')[0] ?? v.quant}</span>
              <span>{ctxLabel} context</span>
              <span>batch {v.batch}</span>
              {v.platform !== 'any' && <span>{PLATFORMS.find((p) => p.value === v.platform)?.label.split(' (')[0]}</span>}
              {v.useCase && <Chip tone="accent">{USE_CASES.find((u) => u.value === v.useCase)?.label}</Chip>}
              <span className="ml-auto text-xs text-ink-3">
                {v.fitsOnly ? <Link href={`?${new URLSearchParams(Object.entries(sp).filter(([k, x]) => x && k !== 'fits') as [string, string][]).toString()}`} className="link">Show all evaluated models</Link> : <Link href={`?${new URLSearchParams({ ...(Object.fromEntries(Object.entries(sp).filter(([, x]) => x)) as Record<string, string>), fits: '1' }).toString()}`} className="link">Only fitting models</Link>}
              </span>
            </p>
            {multiNote && v.gpuCount > 1 && (
              <Note className="mt-2 border-l-2 border-warning pl-3">
                <span className="font-medium text-warning">Multi-device:</span> {multiNote}
              </Note>
            )}

            {items.length === 0 ? (
              <EmptyState title={v.fitsOnly ? 'No model is estimated to fit' : 'No models to evaluate'} className="mt-6">
                {v.fitsOnly ? 'Try more memory, a lower-precision quantization, a shorter context or a smaller batch.' : 'Models without a sourced parameter count are not estimated.'}
              </EmptyState>
            ) : (
              <DataTable scroll compact className="mt-5">
                <thead>
                  <tr>
                    <Th>Model</Th>
                    <Th num>Params</Th>
                    <Th num>Est. memory</Th>
                    <Th num>Headroom</Th>
                    <Th>Fits</Th>
                    <Th>Breakdown</Th>
                    <Th>Artifacts</Th>
                    <Th className="w-24" aria-label="Compare" />
                  </tr>
                </thead>
                <tbody>
                  {items.map((it, i) => {
                    const openness = typeof it.model.attributes?.openness === 'string' ? it.model.attributes.openness : null;
                    const head = num(it.fit.headroom_gb);
                    return (
                      <RowGroup key={`${it.model.id}-${i}`} it={it} openness={openness} head={head} />
                    );
                  })}
                  {items.length === 0 && <EmptyRow cols={8} />}
                </tbody>
              </DataTable>
            )}
            <Note className="mt-3">
              Headroom = total device memory − reserve − estimate. {withArtifacts > 0 ? `${fmtInt(withArtifacts)} of ${fmtInt(items.length)} models have quantized artifacts recorded; ` : 'No quantized artifact is recorded for these models yet; '}
              artifact rows use the <span className="text-positive">observed</span> file size when a source publishes it, otherwise the estimate. Sorted by the API (fitting models first). Compare shortlisted models with the + buttons.
            </Note>
            <Methodology text={res.note} />
          </>
        )}
      </div>
      <CompareTrayBar />
    </TerminalLayout>
  );
}

function RowGroup({ it, openness, head }: { it: RunLocallyItem; openness: string | null; head: number | null }) {
  return (
    <>
      <tr data-fit-row>
        <Td primary>
          <span className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
            <EntityLink e={it.model} />
            {openness && <OpennessBadge openness={openness} />}
          </span>
          {it.model.organization && <span className="block text-xs text-ink-3">{it.model.organization.name}</span>}
          {typeof it.model.attributes?.license === 'string' && <span className="block text-[11px] text-ink-3">{it.model.attributes.license as string}</span>}
        </Td>
        <Td num label="Params" className="tnum">{fmtParams(it.fit.parameter_count ?? it.model.attributes?.parameter_count)}</Td>
        <Td num label="Est. memory" className="tnum">
          {fmtGb(it.fit.estimated_memory_gb, 1)} <SourceTag source={it.fit.breakdown?.weights_source ?? 'estimated'} />
        </Td>
        <Td num label="Headroom" className={it.fit.fits ? 'tnum text-positive' : 'tnum text-danger'}>{head === null ? '—' : `${head >= 0 ? '+' : '−'}${fmtGb(Math.abs(head), 1)}`}</Td>
        <Td label="Fits" className={it.fit.fits ? 'font-medium text-positive' : 'text-ink-3'}>{it.fit.fits ? '✓ fits' : '✗ too large'}</Td>
        <Td label="Breakdown" wide>
          <FitBreakdownList fit={it.fit} />
        </Td>
        <Td label="Artifacts" className="text-xs text-ink-2">
          {num(it.artifact_count) ? `${fmtInt(it.artifact_count)} recorded` : <span className="text-ink-3">none recorded</span>}
        </Td>
        <Td className="text-right">
          <CompareButton e={it.model} size="sm" />
        </Td>
      </tr>
      {it.artifacts.slice(0, 4).map((a, j) => (
        <tr key={`${a.artifact.id}-${j}`} className="bg-surface-2/40" data-artifact-row>
          <Td primary className="!pl-6">
            <span className="text-xs text-ink-3">↳ </span>
            <EntityLink e={a.artifact} className="text-sm" />
            {a.quant_format && <Chip className="ml-2 uppercase">{a.quant_format}</Chip>}
          </Td>
          <Td num label="File size" className="tnum text-xs">
            {num(a.file_size_gb) === null ? '—' : fmtGb(a.file_size_gb, 1)} <SourceTag source={a.weights_source} />
          </Td>
          <Td num label="Est. memory" className="tnum text-xs">{fmtGb(a.fit.estimated_memory_gb, 1)}</Td>
          <Td num label="Headroom" className={a.fit.fits ? 'tnum text-xs text-positive' : 'tnum text-xs text-danger'}>{num(a.fit.headroom_gb) === null ? '—' : `${(num(a.fit.headroom_gb) as number) >= 0 ? '+' : '−'}${fmtGb(Math.abs(num(a.fit.headroom_gb) as number), 1)}`}</Td>
          <Td label="Fits" className={a.fit.fits ? 'text-xs font-medium text-positive' : 'text-xs text-ink-3'}>{a.fit.fits ? '✓ fits' : '✗ too large'}</Td>
          <Td label="Breakdown" wide>
            <FitBreakdownList fit={a.fit} />
          </Td>
          <Td label="Artifacts" className="mono text-[11px] text-ink-3">{a.fit.quantization}</Td>
          <Td />
        </tr>
      ))}
      {it.artifacts.length > 4 && (
        <tr className="bg-surface-2/40">
          <td colSpan={8} className="!py-1.5 pl-6 text-xs text-ink-3">
            +{it.artifacts.length - 4} more artifacts on the <EntityLink e={it.model} className="link">model page</EntityLink>.
          </td>
        </tr>
      )}
    </>
  );
}