import type { Metadata } from 'next';
import { ScrollX } from '@/components/models/scroll-x';
import Link from 'next/link';
import { CompareTrayBar } from '@/components/compare/compare-tray-bar';
import { FilterBar } from '@/components/listing/filters';
import { Chip, EntityBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { Hint } from '@/components/ui/hint';
import { Pagination, withParams } from '@/components/ui/pagination';
import { Container, Note, PageHeader } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { apiD1, safe } from '@/lib/api';
import { fmtDate, fmtInt, fmtParams, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';

export const metadata: Metadata = {
  title: 'Model families — releases, parameter ranges, licences & benchmark ranks',
  description: 'Model families (Llama, Qwen, Claude, Gemma…) grouping canonical releases: member count, first and latest release, parameter range, modalities, licence mix and best benchmark ranks — every number from sourced claims.',
  alternates: { canonical: '/families' },
  openGraph: { title: `Model families | ${SITE_NAME}`, url: `${SITE_URL}/families`, type: 'website' },
};
export const revalidate = 600;

type SP = Record<string, string | undefined>;
const LIMIT = 50;
const SORTS = [
  { value: 'models', label: 'Most models' },
  { value: 'last_release', label: 'Latest release' },
  { value: 'name', label: 'Name' },
];

export default async function FamiliesPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const current: SP = {};
  for (const k of ['q', 'org', 'sort', 'offset']) if (sp[k]) current[k] = sp[k];
  const offset = Math.max(0, Number(current.offset) || 0);
  const sort = current.sort ?? 'models';
  const [page, bench] = await Promise.all([safe(apiD1.families({ q: current.q, org: current.org, sort, limit: LIMIT, offset })), safe(apiD1.benchmarks())]);
  const benchName = new Map((bench?.items ?? []).map((b) => [b.slug, b.name]));
  const href = (patch: Record<string, string | number | undefined | null>) => withParams('/families', current, patch);
  const nonCanonical = (page?.items ?? []).filter((f) => !f.canonical).length;
  const ld = { '@context': 'https://schema.org', '@type': 'CollectionPage', name: 'Model families', url: `${SITE_URL}/families`, description: metadata.description, ...(page ? { mainEntity: { '@type': 'ItemList', numberOfItems: page.total, itemListElement: page.items.slice(0, 10).map((f, i) => ({ '@type': 'ListItem', position: offset + i + 1, name: f.name, url: `${SITE_URL}${routes.family(f.slug)}` })) } } : {}) };

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <PageHeader eyebrow="Families" title="Model families" lede="Families group canonical releases (Llama 3.1, Qwen3, Claude…). Counts, releases and parameter ranges are aggregated from the members' sourced claims; benchmark ranks are the best rank of any member in the benchmark's primary group." aside={page ? <p className="tnum text-sm text-ink-3">{fmtInt(page.total)} families</p> : undefined}>
        <FilterBar action="/families" className="mt-6" resetHref="/families" fields={[{ kind: 'text', name: 'q', label: 'Name', value: current.q, placeholder: 'llama, qwen…' }, { kind: 'text', name: 'org', label: 'Organization slug', value: current.org, placeholder: 'meta-ai' }]} sort={{ value: sort, options: SORTS }} />
      </PageHeader>
      <div className="pb-16">
        {!page ? (
          <Unavailable what="Families" />
        ) : (
          <>
            {nonCanonical > 0 && (
              <p className="mb-2 flex items-center gap-1 text-xs text-ink-3">
                {fmtInt(nonCanonical)} row{nonCanonical === 1 ? '' : 's'} on this page are label-based families (not yet canonical entities)
                <Hint text={page.note ?? 'canonical: true = model_family entity; false = legacy attributes.family label awaiting canonicalisation.'} />
              </p>
            )}
            <ScrollX><DataTable caption="Model families" compact>
              <thead>
                <tr>
                  <Th>Family</Th>
                  <Th>Organization</Th>
                  <Th num>Models</Th>
                  <Th>First · latest release</Th>
                  <Th num>Parameters</Th>
                  <Th>Modalities</Th>
                  <Th>Licences</Th>
                  <Th>Best benchmark ranks</Th>
                </tr>
              </thead>
              <tbody>
                {page.items.length === 0 && <EmptyRow cols={8}>No family matches.</EmptyRow>}
                {page.items.map((f) => {
                  const ranks = Object.entries(f.benchmark_best ?? {})
                    .sort((a, b) => a[1].rank - b[1].rank)
                    .slice(0, 3);
                  const pmin = num(f.param_range?.min);
                  const pmax = num(f.param_range?.max);
                  return (
                    <tr key={f.slug}>
                      <Td primary>
                        <span className="flex flex-wrap items-center gap-x-2">
                          <Link href={routes.family(f.slug)} className="text-ink hover:text-accent hover:underline">
                            {f.name}
                          </Link>
                          {!f.canonical && (
                            <span className="inline-flex items-center gap-0.5 text-[10px] uppercase tracking-wide text-warning" title="Label-based family: grouped by the source's family label, not yet a canonical entity">
                              label
                            </span>
                          )}
                        </span>
                      </Td>
                      <Td label="Organization" className="text-ink-2">
                        {f.organization ? (
                          <Link href={routes.entity({ entity_type: 'company', slug: f.organization.slug })} className="hover:text-accent">
                            {f.organization.name}
                          </Link>
                        ) : (
                          '—'
                        )}
                      </Td>
                      <Td num label="Models" className="tnum">
                        {fmtInt(f.model_count)}
                      </Td>
                      <Td label="First · latest release" className="tnum text-ink-2 whitespace-nowrap">
                        {f.first_release ? fmtDate(f.first_release) : '—'} <span className="text-ink-3">·</span> {f.last_release ? fmtDate(f.last_release) : '—'}
                      </Td>
                      <Td num label="Parameters" className="tnum text-ink-2 whitespace-nowrap">
                        {pmin === null ? '—' : pmin === pmax ? fmtParams(pmin) : `${fmtParams(pmin)} – ${fmtParams(pmax)}`}
                      </Td>
                      <Td label="Modalities">
                        <span className="flex flex-wrap gap-1">{f.modalities?.length ? f.modalities.map((m) => <Chip key={m}>{m}</Chip>) : <span className="text-ink-3">—</span>}</span>
                      </Td>
                      <Td label="Licences" className="text-xs text-ink-2">
                        {f.licenses?.length ? (
                          <span className="flex flex-wrap gap-x-2 gap-y-0.5">
                            {f.licenses.slice(0, 3).map((l) => (
                              <Link key={l.key} href={`/licenses/${encodeURIComponent(l.key)}`} className="hover:text-accent" title={l.label}>
                                {l.key} <span className="tnum text-ink-3">{fmtInt(l.models)}</span>
                              </Link>
                            ))}
                            {f.licenses.length > 3 && <span className="text-ink-3">+{f.licenses.length - 3}</span>}
                          </span>
                        ) : (
                          <span className="text-ink-3">—</span>
                        )}
                      </Td>
                      <Td label="Best benchmark ranks" className="text-xs text-ink-2">
                        {ranks.length ? (
                          <span className="flex flex-wrap gap-x-2 gap-y-0.5">
                            {ranks.map(([slug, r]) => (
                              <Link key={slug} href={routes.benchmark(slug)} className="whitespace-nowrap hover:text-accent" title={`${benchName.get(slug) ?? slug}: rank ${r.rank} (${r.model})`}>
                                {(benchName.get(slug) ?? slug).replace('Artificial Analysis ', 'AA ')} <span className="tnum font-medium text-ink">#{fmtInt(r.rank)}</span>
                              </Link>
                            ))}
                          </span>
                        ) : (
                          <span className="text-ink-3">no results</span>
                        )}
                      </Td>
                    </tr>
                  );
                })}
              </tbody>
            </DataTable></ScrollX>
            <Pagination total={page.total} limit={LIMIT} offset={offset} makeHref={(o) => href({ offset: o || undefined })} className="mt-4" />
            <Note className="mt-3">
              <EntityBadge type="model_family" small /> {page.note ?? 'Families are canonical model_family entities; legacy labels appear as label-based rows until canonicalised.'}
            </Note>
          </>
        )}
      </div>
      <CompareTrayBar />
    </Container>
  );
}