import { ExternalLink } from 'lucide-react';
import { ScrollX } from '@/components/models/scroll-x';
import Link from 'next/link';
import { ChangeRow } from '@/components/changes/change-row';
import { Legend, LineChart, type Series, Sparkline, stepPoints } from '@/components/charts/charts';
import { Chip, ConfidenceBadge, Estimated, TierBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityInline, EntityLink, EntityRow, QualityMark } from '@/components/ui/entity';
import { KeyValue, type KVRow } from '@/components/ui/key-value';
import { SourceCell } from '@/components/ui/provenance';
import { Note } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/unavailable';
import { fmtAgo, fmtDate, fmtGb, fmtInt, fmtParams, fmtScore, fmtTokens, fmtUsdPerM, fmtValue, num } from '@/lib/format';
import { predicateLabel, PROSE_KEYS, propertyLabel, routes, typeLabel } from '@/lib/site';
import type { BenchmarkResult, ChangeEvent, EntityDetail, EntitySummary, HardwareFitRow, Price, Provenance, RelationGroup, SourceRef } from '@/lib/types';

/* ------------------------------------------------------------------------------------------------------ spec table */

const MODEL_ORDER = ['family', 'version', 'release_date', 'status', 'openness', 'license', 'architecture', 'parameter_count', 'active_parameter_count', 'is_moe', 'context_length', 'max_output_tokens', 'knowledge_cutoff', 'training_data_cutoff', 'modalities', 'modalities_input', 'modalities_output', 'languages', 'tokenizer', 'api_model_id', 'api_alias', 'base_model', 'quantization', 'quant_format', 'file_size_gb', 'deprecation_date', 'retirement_date', 'retirement_tentative', 'hf_repo', 'pipeline_tag', 'official_url', 'model_card_url', 'paper_url', 'repository_url', 'metric.downloads', 'metric.likes'];
const CAPABILITY_KEYS = ['tool_calling', 'structured_output', 'reasoning', 'vision', 'audio', 'fine_tuning_available'];
const HIDDEN = new Set(['name', 'slug', 'id', 'entity_type']);

/** Every non-prose attribute as a KeyValue list, model keys in canonical order, others alphabetical. */
export function SpecTable({ d, exclude = [] }: { d: EntityDetail; exclude?: string[] }) {
  const attrs = d.attributes ?? {};
  const skip = new Set([...exclude, ...HIDDEN, ...PROSE_KEYS]);
  const keys = Object.keys(attrs).filter((k) => !skip.has(k) && attrs[k] !== null && attrs[k] !== undefined && attrs[k] !== '' && !(Array.isArray(attrs[k]) && (attrs[k] as unknown[]).length === 0));
  const order = new Map(MODEL_ORDER.map((k, i) => [k, i]));
  keys.sort((a, b) => (order.get(a) ?? 999) - (order.get(b) ?? 999) || a.localeCompare(b));
  const rows: KVRow[] = keys.map((k) => ({ key: k, raw: attrs[k] }));
  return <KeyValue rows={rows} provenance={d.provenance} slug={d.slug} entity={{ name: d.name, entity_type: d.entity_type }} />;
}

/** Identity block: aliases + identifiers (scheme: value). */
export function Identity({ d }: { d: EntityDetail }) {
  if (!d.aliases?.length && !d.identifiers?.length) return null;
  return (
    <div className="space-y-3 text-sm">
      {d.identifiers?.length > 0 && (
        <dl className="kv">
          {d.identifiers.map((i) => (
            <div key={`${i.scheme}:${i.value}`}>
              <dt className="mono">{i.scheme}</dt>
              <dd className="mono text-ink">{i.value}</dd>
            </div>
          ))}
        </dl>
      )}
      {d.aliases?.length > 0 && (
        <p className="text-ink-3">
          Also known as: <span className="text-ink-2">{d.aliases.join(', ')}</span>
        </p>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------ capabilities */

export function Capabilities({ d }: { d: EntityDetail }) {
  const a = d.attributes ?? {};
  const mods = (Array.isArray(a.modalities) ? a.modalities : []) as string[];
  const inMods = (Array.isArray(a.modalities_input) ? a.modalities_input : []) as string[];
  const outMods = (Array.isArray(a.modalities_output) ? a.modalities_output : []) as string[];
  const flags = CAPABILITY_KEYS.map((k) => ({ key: k, value: a[k] }));
  const known = flags.filter((f) => typeof f.value === 'boolean');
  return (
    <div className="space-y-6">
      <div>
        <p className="eyebrow mb-2">Modalities</p>
        {mods.length || inMods.length || outMods.length ? (
          <dl className="kv">
            {mods.length > 0 && (
              <div>
                <dt>Modalities</dt>
                <dd className="flex flex-wrap gap-1.5">{mods.map((m) => <Chip key={m}>{m}</Chip>)}</dd>
              </div>
            )}
            {inMods.length > 0 && (
              <div>
                <dt>Input</dt>
                <dd className="flex flex-wrap gap-1.5">{inMods.map((m) => <Chip key={m}>{m}</Chip>)}</dd>
              </div>
            )}
            {outMods.length > 0 && (
              <div>
                <dt>Output</dt>
                <dd className="flex flex-wrap gap-1.5">{outMods.map((m) => <Chip key={m}>{m}</Chip>)}</dd>
              </div>
            )}
          </dl>
        ) : (
          <p className="text-sm text-ink-3">Modalities unavailable.</p>
        )}
      </div>
      <div>
        <p className="eyebrow mb-2">Capabilities</p>
        <ul className="grid grid-cols-2 gap-px border border-rule bg-rule sm:grid-cols-3">
          {flags.map((f) => {
            const v = f.value;
            const p = d.provenance?.[f.key];
            return (
              <li key={f.key} className="bg-canvas px-3 py-3">
                <p className="text-xs text-ink-3">{propertyLabel(f.key)}</p>
                <p className={typeof v === 'boolean' ? (v ? 'mt-0.5 font-medium text-positive' : 'mt-0.5 font-medium text-ink-2') : 'mt-0.5 text-ink-3'}>{typeof v === 'boolean' ? (v ? 'Yes' : 'No') : 'Unavailable'}</p>
                {p && <p className="mt-0.5 truncate text-[11px] text-ink-3">{p.source_name ?? 'source'} · T{p.tier}</p>}
              </li>
            );
          })}
        </ul>
        {known.length === 0 && <Note className="mt-2">No capability flags have been observed from a source yet — we do not infer them.</Note>}
      </div>
      <KeyValue rows={[{ key: 'context_length', raw: a.context_length }, { key: 'max_output_tokens', raw: a.max_output_tokens }, { key: 'knowledge_cutoff', raw: a.knowledge_cutoff }, { key: 'languages', raw: a.languages }, { key: 'tokenizer', raw: a.tokenizer }]} provenance={d.provenance} slug={d.slug} entity={{ name: d.name, entity_type: d.entity_type }} />
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------ benchmarks */

function configSummary(c: Record<string, unknown>): string {
  const parts = Object.entries(c ?? {})
    .filter(([, v]) => v !== null && v !== undefined && v !== '')
    .slice(0, 4)
    .map(([k, v]) => `${k}=${typeof v === 'object' ? JSON.stringify(v) : String(v)}`);
  return parts.join(' · ');
}

/** Results table. `perspective="model"` shows the benchmark column; `"benchmark"` shows rank + model. */
export function ResultsTable({ results, perspective }: { results: BenchmarkResult[]; perspective: 'model' | 'benchmark' }) {
  if (!results.length) return <EmptyState title="No benchmark results recorded">Results appear when a tier 1–3 source publishes them; we never copy scores without a source.</EmptyState>;
  return (
    <>
      <ScrollX><DataTable caption="Benchmark results">
        <thead>
          <tr>
            {perspective === 'benchmark' && <Th className="w-10">#</Th>}
            <Th>{perspective === 'model' ? 'Benchmark' : 'Model'}</Th>
            <Th num>Score</Th>
            <Th>Metric</Th>
            <Th>Config</Th>
            <Th>Evaluated</Th>
            <Th>Source</Th>
          </tr>
        </thead>
        <tbody>
          {results.map((r, i) => {
            const target = perspective === 'model' ? r.benchmark : r.model;
            return (
              <tr key={r.id}>
                {perspective === 'benchmark' && <Td className="tnum text-ink-3" hideStack>{i + 1}</Td>}
                <Td primary>
                  <EntityLink e={target} />
                  {perspective === 'benchmark' && r.model.organization && <span className="ml-2 text-xs text-ink-3">{r.model.organization.name}</span>}
                </Td>
                <Td num label="Score" className="tnum font-medium">
                  {fmtScore(r.score)}
                  {r.unit && r.unit !== '%' ? <span className="text-ink-3"> {r.unit}</span> : r.unit === '%' ? '%' : ''}
                </Td>
                <Td label="Metric" className="text-ink-2">{r.metric ?? '—'}{r.higher_is_better === false && <span className="text-ink-3"> (lower is better)</span>}</Td>
                <Td label="Config" className="mono max-w-[18rem] truncate text-xs text-ink-3" title={JSON.stringify(r.config)}>{configSummary(r.config) || '—'}</Td>
                <Td label="Evaluated" className="text-ink-2">{fmtDate(r.evaluated_at)}</Td>
                <Td label="Source"><SourceCell url={r.source_url} tier={r.tier} /> <ConfidenceBadge confidence={r.confidence !== 'high' && r.confidence !== 'medium' ? r.confidence : null} /></Td>
              </tr>
            );
          })}
        </tbody>
      </DataTable></ScrollX>
      <Note className="mt-3">
        Scores are reported as published, with their evaluation configuration (harness, prompting, judge). Results with different configs are not directly comparable — see <Link href="/methodology#benchmarks" className="link">methodology</Link>.
      </Note>
    </>
  );
}

/* ------------------------------------------------------------------------------------------------------ prices */

export function PricesTable({ prices, perspective }: { prices: Price[]; perspective: 'model' | 'provider' }) {
  if (!prices.length) return <EmptyState title="No current prices recorded">Prices appear when a provider publishes a public pricing page we crawl.</EmptyState>;
  const sorted = [...prices].sort((a, b) => (num(a.input_per_mtok) ?? Infinity) - (num(b.input_per_mtok) ?? Infinity));
  return (
    <>
      <ScrollX><DataTable caption="Current prices per 1M tokens">
        <thead>
          <tr>
            <Th>{perspective === 'model' ? 'Provider' : 'Model'}</Th>
            <Th num>Input / 1M</Th>
            <Th num>Output / 1M</Th>
            <Th num>Cached in</Th>
            <Th num>Batch in / out</Th>
            <Th num>Context</Th>
            <Th>Observed</Th>
            <Th>Source</Th>
          </tr>
        </thead>
        <tbody>
          {sorted.map((p) => {
            const target = perspective === 'model' ? p.provider : p.model;
            return (
              <tr key={p.id}>
                <Td primary>
                  <EntityLink e={target} />
                  {p.provider_model_id && <span className="mono ml-2 text-[11px] text-ink-3">{p.provider_model_id}</span>}
                  {perspective === 'provider' && p.model.organization && <span className="ml-2 text-xs text-ink-3">{p.model.organization.name}</span>}
                </Td>
                <Td num label="Input / 1M" className="tnum font-medium text-accent-2">{fmtUsdPerM(p.input_per_mtok)}</Td>
                <Td num label="Output / 1M" className="tnum font-medium text-accent-2">{fmtUsdPerM(p.output_per_mtok)}</Td>
                <Td num label="Cached input" className="tnum text-ink-2">{fmtUsdPerM(p.cached_input_per_mtok)}</Td>
                <Td num label="Batch in / out" className="tnum text-ink-2">{num(p.batch_input_per_mtok) === null && num(p.batch_output_per_mtok) === null ? '—' : `${fmtUsdPerM(p.batch_input_per_mtok)} / ${fmtUsdPerM(p.batch_output_per_mtok)}`}</Td>
                <Td num label="Context" className="tnum text-ink-2">{num(p.context_length) === null ? '—' : fmtTokens(p.context_length)}</Td>
                <Td label="Observed" className="text-ink-2" title={p.observed_at}>{fmtAgo(p.observed_at)}</Td>
                <Td label="Source"><SourceCell url={p.source_url} tier={p.tier} /></Td>
              </tr>
            );
          })}
        </tbody>
      </DataTable></ScrollX>
      <Note className="mt-3">USD per 1M tokens as published by each provider ({sorted[0]?.currency ?? 'USD'}). Rows are append-only: every change is kept in the history below.</Note>
    </>
  );
}

/** Price history: step lines per provider (input price) + output as second chart when > 1 point. */
export function PriceHistory({ history, perspective = 'model' }: { history: Price[]; perspective?: 'model' | 'provider' }) {
  if (!history.length) return null;
  const byKey = new Map<string, Price[]>();
  for (const p of history) {
    const k = perspective === 'model' ? p.provider.name : p.model.name;
    const arr = byKey.get(k);
    if (arr) arr.push(p);
    else byKey.set(k, [p]);
  }
  const build = (field: 'input_per_mtok' | 'output_per_mtok'): Series[] =>
    [...byKey.entries()].slice(0, 8).map(([name, rows]) => ({
      name,
      points: stepPoints([...rows.sort((a, b) => a.valid_from.localeCompare(b.valid_from)).map((r) => ({ at: r.valid_from, value: num(r[field]) })), ...(rows.every((r) => r.valid_to) ? [] : [{ at: new Date().toISOString(), value: num([...rows].sort((a, b) => b.valid_from.localeCompare(a.valid_from))[0]?.[field]) }])]),
    }));
  const inSeries = build('input_per_mtok').filter((s) => s.points.length > 0);
  const totalPoints = inSeries.reduce((n, s) => n + s.points.length, 0);
  if (totalPoints < 2) return <Note>Price history starts with the first observation — no changes recorded yet ({history.length} row{history.length === 1 ? '' : 's'}).</Note>;
  const outSeries = build('output_per_mtok').filter((s) => s.points.length > 0);
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <div>
        <p className="eyebrow mb-2">Input price · USD / 1M tokens</p>
        <LineChart series={inSeries} height={200} yFormat={(v) => fmtUsdPerM(v)} yDomain={[0, Math.max(...inSeries.flatMap((s) => s.points.map((p) => p.y))) * 1.15 || 1]} />
      </div>
      <div>
        <p className="eyebrow mb-2">Output price · USD / 1M tokens</p>
        <LineChart series={outSeries} height={200} yFormat={(v) => fmtUsdPerM(v)} yDomain={[0, Math.max(...outSeries.flatMap((s) => s.points.map((p) => p.y))) * 1.15 || 1]} />
      </div>
      <Legend series={inSeries} className="md:col-span-2" />
    </div>
  );
}

/** Tiny per-row sparkline of input price for a model across its history. */
export function PriceSpark({ history, provider }: { history: Price[]; provider: string }) {
  const vals = history.filter((p) => p.provider.slug === provider).sort((a, b) => a.valid_from.localeCompare(b.valid_from)).map((p) => num(p.input_per_mtok)).filter((v): v is number => v !== null);
  return <Sparkline values={vals} width={80} height={20} stroke="var(--accent-2)" />;
}

/* ------------------------------------------------------------------------------------------------------ hardware fit */

export function HardwareFitTable({ rows }: { rows: HardwareFitRow[] }) {
  if (!rows.length) return <EmptyState title="No hardware estimate available">Estimates need a parameter count; this model has none recorded from a source.</EmptyState>;
  return (
    <>
      <div className="mb-3 flex flex-wrap items-center gap-2">
        <Estimated />
        <Note>Memory need = bytes per parameter (4-bit ≈ 0.5 × 1.15 overhead, 8-bit 1.0, fp16 2.0) + a KV-cache allowance. Not a measurement.</Note>
      </div>
      <ScrollX><DataTable caption="Estimated hardware fit">
        <thead>
          <tr>
            <Th>Hardware</Th>
            <Th>Quantization</Th>
            <Th num>Memory</Th>
            <Th num>Est. need</Th>
            <Th>Fits</Th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={`${r.hardware.id}-${r.quantization}-${i}`}>
              <Td primary><EntityLink e={r.hardware} /></Td>
              <Td label="Quantization" className="mono text-xs text-ink-2">{r.quantization}</Td>
              <Td num label="Memory" className="tnum text-ink-2">{fmtGb(r.hardware.attributes?.memory_gb as never)}</Td>
              <Td num label="Est. need" className="tnum">{fmtGb(r.estimated_memory_gb, 1)}</Td>
              <Td label="Fits" className={r.fits ? 'font-medium text-positive' : 'text-ink-3'}>{r.fits ? 'Yes' : 'No'}</Td>
            </tr>
          ))}
        </tbody>
      </DataTable></ScrollX>
    </>
  );
}

/* ------------------------------------------------------------------------------------------------------ lineage & relations */

export function LineageBlock({ d }: { d: EntityDetail }) {
  const l = d.lineage;
  if (!l || (!l.ancestors.length && !l.descendants.length && !l.quantizations.length)) return <EmptyState title="No lineage recorded">Lineage comes from explicit `derived_from`, `fine_tuned_from`, `distilled_from` and `quantized_from` relations stated by sources.</EmptyState>;
  const Col = ({ title, items, hint }: { title: string; items: EntitySummary[]; hint: string }) => (
    <div>
      <p className="eyebrow">{title} <span className="tnum text-ink-3">{items.length}</span></p>
      {items.length ? (
        <ul className="mt-2 divide-y divide-rule border-y border-rule">
          {items.map((e) => (
            <li key={e.id} className="flex items-baseline justify-between gap-3 py-2 text-sm">
              <EntityLink e={e} className="font-medium" />
              <span className="tnum shrink-0 text-xs text-ink-3">{num(e.attributes?.parameter_count) !== null ? fmtParams(e.attributes.parameter_count) : e.organization?.name ?? ''}</span>
            </li>
          ))}
        </ul>
      ) : (
        <p className="mt-2 text-sm text-ink-3">{hint}</p>
      )}
    </div>
  );
  return (
    <div className="grid gap-6 md:grid-cols-3">
      <Col title="Ancestors" items={l.ancestors} hint="None recorded." />
      <div className="md:border-x md:border-rule md:px-6">
        <p className="eyebrow">This model</p>
        <p className="mt-2 text-sm font-medium">{d.name}</p>
        <p className="tnum text-xs text-ink-3">{num(d.attributes?.parameter_count) !== null ? `${fmtParams(d.attributes.parameter_count)} params` : ''}</p>
        <Col title="Quantizations" items={l.quantizations} hint="None recorded." />
      </div>
      <Col title="Descendants" items={l.descendants} hint="None recorded." />
    </div>
  );
}

export function RelationsBlock({ relations, exclude = [] }: { relations: RelationGroup[]; exclude?: string[] }) {
  const groups = relations.filter((g) => g.items.length && !exclude.includes(g.predicate));
  if (!groups.length) return <p className="text-sm text-ink-3">No relations recorded.</p>;
  return (
    <dl className="kv">
      {groups.map((g) => (
        <div key={`${g.predicate}-${g.direction}`}>
          <dt>{predicateLabel(g.predicate, g.direction)}</dt>
          <dd>
            <EntityInline items={g.items} max={8} total={g.total} />
            {g.total > 8 && <span className="ml-1 text-xs text-ink-3">({fmtInt(g.total)} total)</span>}
          </dd>
        </div>
      ))}
    </dl>
  );
}

/* ------------------------------------------------------------------------------------------------------ lists */

export function EntityList({ items, empty = 'Nothing recorded yet.', showType = false }: { items: EntitySummary[]; empty?: string; showType?: boolean }) {
  if (!items.length) return <p className="text-sm text-ink-3">{empty}</p>;
  return (
    <ul className="border-t border-rule">
      {items.map((e) => (
        <EntityRow key={e.id} e={e} showType={showType} />
      ))}
    </ul>
  );
}

/** Dense models table for company / provider / hardware pages. */
export function ModelsTable({ items, total, moreHref }: { items: EntitySummary[]; total?: number; moreHref?: string }) {
  if (!items.length) return <EmptyState title="No models recorded" />;
  return (
    <>
      <ScrollX><DataTable caption="Models">
        <thead>
          <tr>
            <Th>Model</Th>
            <Th num>Params</Th>
            <Th num>Context</Th>
            <Th>Openness</Th>
            <Th>Released</Th>
            <Th>Status</Th>
            <Th num>Quality</Th>
          </tr>
        </thead>
        <tbody>
          {items.map((m) => {
            const a = m.attributes ?? {};
            return (
              <tr key={m.id}>
                <Td primary><EntityLink e={m} /></Td>
                <Td num label="Params" className="tnum">{num(a.parameter_count) === null ? '—' : fmtParams(a.parameter_count)}</Td>
                <Td num label="Context" className="tnum">{num(a.context_length) === null ? '—' : fmtTokens(a.context_length)}</Td>
                <Td label="Openness" className="text-ink-2">{typeof a.openness === 'string' ? fmtValue(a.openness) : '—'}</Td>
                <Td label="Released" className="text-ink-2">{typeof a.release_date === 'string' ? fmtDate(a.release_date) : '—'}</Td>
                <Td label="Status" className="text-ink-2">{m.status && m.status !== 'unknown' ? m.status : '—'}</Td>
                <Td num label="Quality"><QualityMark q={m.quality?.score} /></Td>
              </tr>
            );
          })}
        </tbody>
      </DataTable></ScrollX>
      {total !== undefined && total > items.length && moreHref && (
        <p className="mt-3 text-sm">
          <Link href={moreHref} className="link">All {fmtInt(total)} models →</Link>
        </p>
      )}
    </>
  );
}

/* ------------------------------------------------------------------------------------------------------ timeline & sources */

export function TimelineList({ events, slug }: { events: ChangeEvent[]; slug?: string }) {
  if (!events.length) return <EmptyState title="No events yet">Events are generated by the change engine when a material property, price or result changes.</EmptyState>;
  return (
    <>
      <ul className="border-t border-rule">
        {events.map((e) => (
          <ChangeRow key={e.id} e={e} showDate live={false} />
        ))}
      </ul>
      {slug && (
        <p className="mt-3 text-sm">
          <Link href={`/timeline?entity=${encodeURIComponent(slug)}`} className="link">Full timeline →</Link>
        </p>
      )}
    </>
  );
}

export function SourcesTable({ sources }: { sources: SourceRef[] }) {
  if (!sources.length) return <EmptyState title="No documents recorded" />;
  const sorted = [...sources].sort((a, b) => (a.tier ?? 9) - (b.tier ?? 9) || (b.last_observed_at ?? '').localeCompare(a.last_observed_at ?? ''));
  return (
    <>
      <ScrollX><DataTable caption="Source documents">
        <thead>
          <tr>
            <Th>Source</Th>
            <Th>Document</Th>
            <Th>Type</Th>
            <Th>Tier</Th>
            <Th>Last observed</Th>
            <Th num>Snapshots</Th>
          </tr>
        </thead>
        <tbody>
          {sorted.map((s) => (
            <tr key={s.url}>
              <Td primary>{s.source_name ?? s.domain ?? '—'}</Td>
              <Td label="Document" wide>
                <a href={s.url} target="_blank" rel="noopener noreferrer" className="inline-flex max-w-full items-center gap-1 break-all text-ink-2 hover:text-accent">
                  <span className="truncate">{s.url.replace(/^https?:\/\/(www\.)?/, '')}</span> <ExternalLink className="size-3 shrink-0" aria-hidden />
                </a>
              </Td>
              <Td label="Type" className="mono text-xs text-ink-2">{s.doc_type}</Td>
              <Td label="Tier"><TierBadge tier={s.tier} withLabel /></Td>
              <Td label="Last observed" className="text-ink-2" title={s.last_observed_at ?? undefined}>{fmtAgo(s.last_observed_at)}</Td>
              <Td num label="Snapshots" className="tnum">{fmtInt(s.snapshots)}</Td>
            </tr>
          ))}
        </tbody>
      </DataTable></ScrollX>
      <Note className="mt-3">
        Tier 1 = official/primary, 2 = quality secondary, 3 = community, 4 = unverified. Every snapshot is archived; see <Link href="/sources" className="link">all sources</Link> and the <Link href="/methodology" className="link">methodology</Link>.
      </Note>
    </>
  );
}

/** Summary of provenance across all attributes: sources count, tiers distribution, freshest observation. */
export function ProvenanceSummary({ provenance, quality }: { provenance: Provenance; quality: EntityDetail['quality'] }) {
  const entries = Object.values(provenance ?? {});
  const tiers = [1, 2, 3, 4].map((t) => ({ t, n: entries.filter((e) => e.tier === t).length })).filter((x) => x.n);
  const newest = entries.map((e) => e.observed_at).sort().at(-1);
  const conflicts = num(quality?.conflicts) ?? 0;
  return (
    <div className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm sm:grid-cols-4">
      <div>
        <p className="eyebrow">Attributed facts</p>
        <p className="tnum mt-0.5 text-lg font-semibold">{fmtInt(entries.length)}</p>
      </div>
      <div>
        <p className="eyebrow">Source tiers</p>
        <p className="mt-1 flex flex-wrap gap-1">{tiers.length ? tiers.map((x) => <TierBadge key={x.t} tier={x.t} withLabel={false} />) : <span className="text-ink-3">—</span>}{tiers.length > 0 && <span className="tnum text-xs text-ink-3">{tiers.map((x) => x.n).join(' / ')}</span>}</p>
      </div>
      <div>
        <p className="eyebrow">Freshest observation</p>
        <p className="mt-0.5 text-ink-2">{newest ? fmtAgo(newest) : '—'}</p>
      </div>
      <div>
        <p className="eyebrow">Conflicts</p>
        <p className={conflicts ? 'mt-0.5 font-medium text-danger' : 'mt-0.5 text-ink-2'}>{conflicts ? `${conflicts} flagged` : 'None'}</p>
      </div>
    </div>
  );
}

export function typeTitle(e: { entity_type: string }): string {
  return typeLabel(e.entity_type);
}
export { routes };