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 { BTN_GHOST, CTRL, Field, FitCell, LicenceLegend, LicencePerms, Methodology, RankChips, SortTh } from '@/components/intelligence/bits';
import { DataStrip, type StripItem, 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 { Pagination, withParams } from '@/components/ui/pagination';
import { Note, PageHeader, Section } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { WatchButton } from '@/components/watchlist/watch-button';
import { intel, safe } from '@/lib/api';
import { fmtDate, fmtInt, fmtParams, fmtTokens, fmtUsdPerM, num } from '@/lib/format';
import { OPENNESS_LABELS, routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { OpenItem } from '@/lib/types';

export const revalidate = 300;
type SP = Record<string, string | undefined>;
const LIMIT = 50;
const SORTS = ['rank', 'release', 'params', 'context', 'downloads', 'name'] as const;
type Sort = (typeof SORTS)[number];
const SORT_LABELS: Record<Sort, string> = { rank: 'Best benchmark rank', release: 'Release date', params: 'Parameters', context: 'Context window', downloads: 'Downloads', name: 'Name' };
const KEYS = ['sort', 'license', 'min_params', 'max_params', 'min_context', 'modality', 'days', 'openness', 'offset'] as const;
const CATS = ['open-source', 'open-weights', 'restricted-weights'] as const;
const CAT_COLOR: Record<string, string> = { 'open-source': 'var(--positive)', 'open-weights': 'var(--series-1)', 'restricted-weights': 'var(--warning)', proprietary: 'var(--ink-3)' };

function parseScale(v: string | undefined): number | undefined {
  if (!v) return undefined;
  const m = /^\s*([\d.]+)\s*([kmbt])?\s*$/i.exec(v);
  if (!m) return undefined;
  const mult = { k: 1e3, m: 1e6, b: 1e9, t: 1e12 }[(m[2] ?? '').toLowerCase() as 'k' | 'm' | 'b' | 't'] ?? 1;
  const n = Number(m[1]);
  return Number.isFinite(n) ? Math.round(n * mult) : undefined;
}
function pick(sp: SP) {
  const cur: Record<string, string | undefined> = {};
  for (const k of KEYS) if (sp[k]) cur[k] = sp[k];
  const sort: Sort = (SORTS as readonly string[]).includes(cur.sort ?? '') ? (cur.sort as Sort) : 'rank';
  return { cur, sort, offset: Math.max(0, Number(cur.offset) || 0) };
}

const TITLE = 'Open Model Frontier — downloadable AI models by licence, size, context and rank';
const DESC = 'Every canonical model whose weights can be downloaded — open source, open weights, restricted weights — with its licence permissions (commercial use, redistribution, derivatives, hosting), parameters, context, release date, best benchmark ranks, providers and an estimated fit on 64 GB / 128 GB machines. Measurable openness dimensions, no ideological score.';
export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const { cur } = pick(await searchParams);
  const filtered = Object.keys(cur).some((k) => k !== 'sort');
  return { title: TITLE, description: DESC, alternates: { canonical: routes.open() }, openGraph: { title: `${TITLE} | ${SITE_NAME}`, description: DESC, url: `${SITE_URL}${routes.open()}`, type: 'website', siteName: SITE_NAME }, twitter: { card: 'summary_large_image', title: TITLE, description: DESC }, robots: filtered ? { index: false, follow: true } : undefined };
}

export default async function OpenPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const { cur, sort, offset } = pick(sp);
  const [res, meth] = await Promise.all([safe(intel.open({ sort, license: cur.license, min_params: parseScale(cur.min_params), max_params: parseScale(cur.max_params), min_context: parseScale(cur.min_context), modality: cur.modality, days: cur.days, openness: cur.openness, limit: LIMIT, offset })), safe(intel.methodology())]);
  const href = (patch: Record<string, string | number | undefined | null>) => withParams('/open', cur, patch);
  const defs = meth?.openness?.definitions ?? {};
  const labels: Record<string, string> = { ...OPENNESS_LABELS, 'restricted-weights': 'Restricted weights', ...(meth?.openness?.labels ?? {}) };
  const byCat = res?.summary?.by_category ?? {};
  const catTotal = Object.values(byCat).reduce<number>((n, v) => n + (num(v) ?? 0), 0);
  const items: OpenItem[] = res?.items ?? [];
  const filterCount = Object.keys(cur).filter((k) => k !== 'sort' && k !== 'offset').length;
  const licences = res?.summary?.by_license_top ?? [];

  const strip: StripItem[] = [
    ...CATS.map((c) => ({ label: labels[c] ?? c, value: fmtInt(byCat[c] ?? 0), definition: defs[c], href: href({ openness: c, offset: undefined }) })),
    { label: 'Downloadable total', value: fmtInt(res?.total), definition: res?.note ?? 'Universe = canonical models whose weights can be downloaded.' },
    { label: 'New in 30 days', value: fmtInt(res?.summary?.new_30d), definition: 'Downloadable models with a release date inside the last 30 days (release_date claim; models without one are not counted).', href: href({ days: 30, offset: undefined }) },
  ];

  // licence permission matrix over the rows on this page (measurable: each licence's stated permissions)
  const PERMS: { key: 'commercial_use' | 'redistribution' | 'derivatives' | 'hosting'; label: string }[] = [
    { key: 'commercial_use', label: 'Commercial use' },
    { key: 'redistribution', label: 'Redistribution' },
    { key: 'derivatives', label: 'Derivatives' },
    { key: 'hosting', label: 'Hosting' },
  ];
  const matrix = CATS.map((c) => {
    const rows = items.filter((it) => it.dimensions?.openness === c);
    return {
      cat: c,
      n: rows.length,
      cells: PERMS.map((p) => {
        let yes = 0;
        let no = 0;
        let unk = 0;
        for (const it of rows) {
          const l = it.licence;
          if (!l || l.key === null) {
            unk++;
            continue;
          }
          const v = p.key === 'hosting' ? (l.hosting_restrictions === null || l.hosting_restrictions === undefined ? null : !l.hosting_restrictions) : l[p.key];
          if (v === true) yes++;
          else if (v === false) no++;
          else unk++;
        }
        return { yes, no, unk };
      }),
    };
  });

  const filters = (
    <form action="/open" method="get" className="space-y-3" data-open-filters>
      <Field label="Openness category">
        <select name="openness" defaultValue={cur.openness ?? ''} className={CTRL}>
          <option value="">All downloadable</option>
          {CATS.map((c) => (
            <option key={c} value={c}>
              {labels[c] ?? c}
            </option>
          ))}
        </select>
      </Field>
      <Field label="Licence">
        <select name="license" defaultValue={cur.license ?? ''} className={CTRL}>
          <option value="">Any licence</option>
          {licences.map((l) => (
            <option key={l.key} value={l.key}>
              {l.label} ({fmtInt(l.models)})
            </option>
          ))}
          {cur.license && !licences.some((l) => l.key === cur.license) && <option value={cur.license}>{cur.license}</option>}
        </select>
      </Field>
      <div className="grid grid-cols-2 gap-2">
        <Field label="Params ≥">
          <input name="min_params" defaultValue={cur.min_params ?? ''} placeholder="7B" className={CTRL} />
        </Field>
        <Field label="Params ≤">
          <input name="max_params" defaultValue={cur.max_params ?? ''} placeholder="70B" className={CTRL} />
        </Field>
      </div>
      <Field label="Context ≥">
        <input name="min_context" defaultValue={cur.min_context ?? ''} placeholder="128k" className={CTRL} />
      </Field>
      <Field label="Modality">
        <select name="modality" defaultValue={cur.modality ?? ''} className={CTRL}>
          <option value="">Any</option>
          {['text', 'image', 'audio', 'video', 'embedding'].map((m) => (
            <option key={m} value={m}>
              {m}
            </option>
          ))}
        </select>
      </Field>
      <Field label="Released within">
        <select name="days" defaultValue={cur.days ?? ''} className={CTRL}>
          <option value="">Any date</option>
          <option value="30">30 days</option>
          <option value="90">90 days</option>
          <option value="365">1 year</option>
        </select>
      </Field>
      <Field label="Sort">
        <select name="sort" defaultValue={sort} className={CTRL}>
          {SORTS.map((s) => (
            <option key={s} value={s}>
              {SORT_LABELS[s]}
            </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="/open" className={BTN_GHOST}>
          Reset
        </Link>
      </div>
    </form>
  );

  const inspector = (
    <div className="space-y-4 text-xs leading-relaxed text-ink-2">
      <div>
        <p className="eyebrow mb-1">Openness categories</p>
        <dl className="space-y-1.5">
          {(meth?.openness?.categories ?? [...CATS, 'proprietary']).map((c) => (
            <div key={c}>
              <dt className="font-medium text-ink">{labels[c] ?? c}</dt>
              <dd>{defs[c] ?? '—'}</dd>
            </div>
          ))}
        </dl>
        {meth?.openness?.note && <p className="mt-1.5 text-ink-3">{meth.openness.note}</p>}
      </div>
      <div>
        <p className="eyebrow mb-1">Measured dimensions</p>
        <ul className="mono flex flex-wrap gap-1">
          {(meth?.openness?.dimensions ?? []).map((d) => (
            <li key={d} className="rounded-[3px] bg-surface-2 px-1.5 py-[1px] text-[10px]">
              {d}
            </li>
          ))}
        </ul>
        <p className="mt-1 text-ink-3">Each model page states these booleans with their source; the category is derived from them and the licence ontology.</p>
      </div>
      <p>
        <Link href={routes.licenses()} className="link">Licence ontology</Link> · <Link href="/methodology" className="link">/methodology</Link>
      </p>
    </div>
  );

  return (
    <TerminalLayout filters={filters} inspector={inspector} filtersTitle="Filters" inspectorTitle="Definitions" storageKey="aia-inspector-open" filterCount={filterCount}>
      <PageHeader eyebrow="Open model frontier" title="Open models" lede="Every canonical model whose weights can be downloaded, described by measurable properties — licence permissions, parameters, context, release, benchmark ranks, providers, estimated local fit. Openness is a set of observed dimensions here, never a score." className="pt-4 md:pt-6" aside={res ? <p className="tnum text-sm text-ink-3">{fmtInt(res.total)} downloadable models</p> : undefined} />
      {!res ? (
        <Unavailable what="Open models" />
      ) : (
        <>
          <DataStrip items={strip} dense />

          {/* ------------------------------------------------------------------------------- openness explorer */}
          <Section eyebrow="Openness explorer" title="Categories and licence permissions" lede="Left: the downloadable universe by openness category. Right: what the licences on this page allow, counted per category — allowed · restricted · unknown." hairline={false}>
            <div className="grid grid-cols-[minmax(0,1fr)] gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
              <div>
                <div className="flex h-5 w-full overflow-hidden rounded-[3px] bg-surface-2" role="img" aria-label="Downloadable models by openness category">
                  {CATS.map((c) => {
                    const n = num(byCat[c]) ?? 0;
                    return n > 0 ? <span key={c} style={{ width: `${(100 * n) / Math.max(1, catTotal)}%`, background: CAT_COLOR[c] }} title={`${labels[c] ?? c}: ${fmtInt(n)}`} /> : null;
                  })}
                </div>
                <ul className="mt-2 space-y-1 text-sm">
                  {CATS.map((c) => (
                    <li key={c} className="flex items-baseline gap-2">
                      <span className="inline-block size-2.5 shrink-0 rounded-[2px]" style={{ background: CAT_COLOR[c] }} aria-hidden />
                      <Link href={href({ openness: c, offset: undefined })} className="text-ink hover:text-accent">
                        {labels[c] ?? c}
                      </Link>
                      <span className="tnum ml-auto text-ink-2">
                        {fmtInt(byCat[c] ?? 0)} <span className="text-ink-3">{catTotal ? `${Math.round((100 * (num(byCat[c]) ?? 0)) / catTotal)}%` : ''}</span>
                      </span>
                    </li>
                  ))}
                </ul>
                <p className="mt-3 text-xs text-ink-3">Top licences: {licences.slice(0, 6).map((l) => `${l.label ?? l.key} (${fmtInt(l.models)})`).join(' · ') || '—'}</p>
              </div>
              <div className="table-scroll">
                <table className="data-table compact" aria-label="Licence permissions by openness category (models on this page)">
                  <thead>
                    <tr>
                      <th scope="col">Category · this page</th>
                      {PERMS.map((p) => (
                        <th key={p.key} scope="col" className="num">
                          {p.label}
                        </th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {matrix.map((r) => (
                      <tr key={r.cat}>
                        <th scope="row" className="text-left font-normal">
                          <OpennessBadge openness={r.cat} /> <span className="tnum text-xs text-ink-3">n={r.n}</span>
                        </th>
                        {r.cells.map((c, i) => (
                          <td key={PERMS[i]?.key} className="num tnum text-xs">
                            {r.n === 0 ? (
                              <span className="text-ink-3">—</span>
                            ) : (
                              <span className="inline-flex items-center gap-1.5">
                                <span className="text-positive">{c.yes}</span>
                                <span className="text-danger">{c.no}</span>
                                <span className="text-ink-3">{c.unk}</span>
                              </span>
                            )}
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
                <p className="mt-1.5 text-[11px] text-ink-3">
                  Counts read: <span className="text-positive">allowed</span> · <span className="text-danger">restricted</span> · <span>unknown / unclassified</span> — over the {fmtInt(items.length)} models on this page, from each licence&apos;s stated terms (ontology).
                </p>
              </div>
            </div>
          </Section>

          {/* --------------------------------------------------------------------------------------- table */}
          <Section eyebrow="Downloadable models" title={`${fmtInt(res.total)} models · sorted by ${SORT_LABELS[sort].toLowerCase()}`} lede={<LicenceLegend />}>
            <DataTable scroll compact>
              <thead>
                <tr>
                  <SortTh active={sort === 'name'} href={href({ sort: 'name', offset: undefined })}>Model</SortTh>
                  <Th>Licence · permissions</Th>
                  <SortTh active={sort === 'params'} href={href({ sort: 'params', offset: undefined })} num dir="desc">Params</SortTh>
                  <SortTh active={sort === 'context'} href={href({ sort: 'context', offset: undefined })} num dir="desc">Context</SortTh>
                  <SortTh active={sort === 'release'} href={href({ sort: 'release', offset: undefined })} dir="desc">Release</SortTh>
                  <SortTh active={sort === 'rank'} href={href({ sort: undefined, offset: undefined })}>Best results</SortTh>
                  <Th num>Providers</Th>
                  <Th>
                    Fit 64 GB @4bit · 128 GB @8bit <Estimated className="ml-1 align-middle" />
                  </Th>
                  <Th className="w-40" aria-label="Actions" />
                </tr>
              </thead>
              <tbody>
                {items.length === 0 && <EmptyRow cols={9}>No downloadable model matches these filters.</EmptyRow>}
                {items.map((it) => {
                  const d = it.dimensions ?? {};
                  const mods = Array.isArray(d.modalities) ? (d.modalities as string[]) : [];
                  return (
                    <tr key={it.model.id} data-open-row>
                      <Td primary>
                        <span className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                          <EntityLink e={it.model} />
                          {typeof d.openness === 'string' && <OpennessBadge openness={d.openness} />}
                        </span>
                        <span className="block text-xs text-ink-3">
                          {it.model.organization?.name ?? '—'}
                          {mods.length ? ` · ${mods.join(', ')}` : ''}
                        </span>
                      </Td>
                      <Td label="Licence">
                        <LicencePerms l={it.licence} />
                      </Td>
                      <Td num label="Params" className="tnum">
                        {fmtParams(d.parameter_count)}
                        {num(d.active_parameter_count) !== null && num(d.active_parameter_count) !== num(d.parameter_count) && <span className="block text-[10px] text-ink-3">{fmtParams(d.active_parameter_count)} active</span>}
                      </Td>
                      <Td num label="Context" className="tnum">{fmtTokens(d.context_length)}</Td>
                      <Td label="Release" className="tnum text-ink-2 whitespace-nowrap">{typeof d.release_date === 'string' ? fmtDate(d.release_date) : '—'}</Td>
                      <Td label="Best results">
                        <RankChips ranks={it.best_results} max={3} />
                      </Td>
                      <Td num label="Providers" className="tnum">
                        {fmtInt(it.providers)}
                        {num(it.cheapest_output_per_mtok) !== null && <span className="block text-[10px] text-accent-2">from {fmtUsdPerM(it.cheapest_output_per_mtok)} out</span>}
                      </Td>
                      <Td label="Fit (estimated)" className="text-xs">
                        <span className="flex flex-col gap-0.5">
                          <FitCell fit={it.hardware_fit?.['4bit_64gb']} compact />
                          <FitCell fit={it.hardware_fit?.['8bit_128gb']} compact />
                        </span>
                      </Td>
                      <Td className="text-right">
                        <span className="inline-flex flex-wrap justify-end gap-1">
                          <CompareButton e={it.model} size="sm" />
                          <WatchButton e={it.model} size="sm" />
                        </span>
                      </Td>
                    </tr>
                  );
                })}
              </tbody>
            </DataTable>
            <Pagination total={res.total} limit={LIMIT} offset={offset} makeHref={(o) => href({ offset: o || undefined })} className="mt-4" />
            <Note className="mt-3">
              Best results = rank inside each benchmark&apos;s primary comparability group; several dimensions are shown side by side and never combined. Fit columns are estimates (64 GB device at 4-bit, 128 GB at 8-bit, 8K context) — method on <Link href="/methodology#estimates" className="link">/methodology</Link>. <Chip>unclassified</Chip> = the raw licence label is not yet mapped in the ontology.
            </Note>
            <Methodology text={res.note} />
          </Section>
        </>
      )}
      <CompareTrayBar />
    </TerminalLayout>
  );
}