import { ExternalLink } from 'lucide-react';
import Link from 'next/link';
import { Bars } from '@/components/charts/bars';
import { EventList } from '@/components/events/event-row';
import { Chip, ConfidenceBadge, SensorTierBadge, StatusBadge, CountryChip } from '@/components/ui/badges';
import { LiveAgo } from '@/components/ui/live';
import { Empty, Note, Stat, StatGrid } from '@/components/ui/section';
import { cn } from '@/lib/cn';
import { countryName } from '@/lib/countries';
import { fmtDate, fmtDateTime, fmtDayLabel, fmtDuration, fmtInt, fmtPct, fmtPrice, fmtScore, humanize, pathOf, plural } from '@/lib/format';
import { mergePeople, roleRank, type MergedPerson } from '@/lib/profile';
import { routes, SURFACE_LABELS, TIMELINE_FILTERS } from '@/lib/site';
import type { HistoryPayload, Job, JobsPage, Location, Person, Plan, Product, Sensor, Signal, TimelinePayload } from '@/lib/types';
import { SourceChip, WikidataProducts } from './profile-panels';

/* ------------------------------------------------------------------------------------------------------------ timeline */
export function TimelinePanel({ slug, data, filter }: { slug: string; data: TimelinePayload | null; filter: string }) {
  const groups = new Map<string, TimelinePayload['items']>();
  for (const e of data?.items ?? []) {
    const d = e.day ?? e.detected_at.slice(0, 10);
    if (!groups.has(d)) groups.set(d, []);
    groups.get(d)!.push(e);
  }
  const days = [...groups.entries()].sort((a, b) => (a[0] < b[0] ? 1 : -1));
  return (
    <div>
      <div className="no-scrollbar -mx-4 flex gap-1.5 overflow-x-auto px-4 pb-2 md:mx-0 md:flex-wrap md:px-0" role="tablist" aria-label="Timeline filter">
        {TIMELINE_FILTERS.map((f) => (
          <Link key={f} href={`${routes.company(slug, 'timeline')}${f === 'all' ? '' : `&filter=${f}`}`} scroll={false} className="chip-btn" data-on={filter === f} role="tab" aria-selected={filter === f}>
            {f === 'all' ? 'All' : humanize(f)}
          </Link>
        ))}
      </div>
      {!data ? (
        <Empty title="Timeline temporarily unavailable." />
      ) : days.length === 0 ? (
        <Empty>
          No {filter === 'all' ? '' : `${filter} `}events detected for this company yet — sensors are attached and observing.
        </Empty>
      ) : (
        <div className="mt-2 space-y-6">
          {days.map(([day, items]) => (
            <section key={day} aria-label={day}>
              <h3 className="sticky top-[calc(var(--header-h)+44px)] z-10 -mx-4 flex items-baseline gap-2 bg-canvas/95 px-4 py-1.5 text-sm font-semibold backdrop-blur md:static md:mx-0 md:px-0">
                {fmtDayLabel(day)} <span className="tnum text-xs font-normal text-ink-3">{items.length} {plural(items.length, 'event')}</span>
              </h3>
              <EventList events={items} variant="timeline" showCompany={false} />
            </section>
          ))}
        </div>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------------ signals */
export function SignalsPanel({ signals }: { signals: Signal[] }) {
  if (!signals.length) return <Empty title="No signals detected for this company yet.">Signals are pattern detections over the company’s own baselines and are labelled as such — never as facts.</Empty>;
  return (
    <ul className="divide-y divide-rule border-y border-rule">
      {signals.map((s) => (
        <li key={s.id} className="py-3">
          <div className="flex flex-wrap items-center gap-2">
            <Chip tone="accent">signal</Chip>
            <span className="text-[15px] font-medium text-ink">{s.title}</span>
            <span className="ml-auto text-xs text-ink-3">
              strength <span className="tnum text-ink-2">{Math.round(s.strength * 100)}</span> · confidence <span className="tnum text-ink-2">{Math.round(s.confidence * 100)} %</span> · {s.window_days} d window
            </span>
          </div>
          {s.explanation && <p className="mt-1 text-sm text-ink-2">{s.explanation}</p>}
          <p className="mt-1 text-[11px] text-ink-3">detected {fmtDateTime(s.detected_at)}</p>
        </li>
      ))}
    </ul>
  );
}

/* ------------------------------------------------------------------------------------------------------------ jobs */
export function JobsPanel({ slug, data, status, ai }: { slug: string; data: JobsPage | null; status: string; ai: boolean }) {
  const summary = data?.meta?.summary ?? data?.summary;
  const base = routes.company(slug, 'jobs');
  const link = (patch: { status?: string; ai?: boolean }) => {
    const st = patch.status ?? status;
    const a = patch.ai ?? ai;
    return `${base}${st !== 'open' ? `&status=${st}` : ''}${a ? '&ai=1' : ''}`;
  };
  return (
    <div className="space-y-5">
      {summary ? (
        <StatGrid cols={5}>
          <Stat label="Open listings" value={fmtInt(summary.open)} size="sm" />
          <Stat label="New (7 d)" value={fmtInt(summary.new_7d)} size="sm" />
          <Stat label="No longer listed (7 d)" value={fmtInt(summary.removed_7d)} size="sm" />
          <Stat label="AI-related open" value={fmtInt(summary.ai_open)} size="sm" hint={summary.open ? `${Math.round((summary.ai_open / summary.open) * 100)} % of open` : undefined} />
          <Stat label="Remote share" value={summary.remote_ratio === null ? '—' : fmtPct(summary.remote_ratio, 0, true)} size="sm" />
        </StatGrid>
      ) : (
        <Note>Job summary unavailable.</Note>
      )}
      {summary && (summary.by_department.length > 0 || summary.by_country.length > 0) && (
        <div className="grid gap-6 md:grid-cols-2">
          <div>
            <p className="eyebrow mb-2">By department</p>
            <Bars dense rows={summary.by_department.slice(0, 8).map((d) => ({ key: d.department, label: d.department, value: d.n }))} />
          </div>
          <div>
            <p className="eyebrow mb-2">By country</p>
            <Bars dense rows={summary.by_country.slice(0, 8).map((d) => ({ key: d.country, label: countryName(d.country), value: d.n }))} />
          </div>
        </div>
      )}
      <div className="flex flex-wrap items-center gap-1.5">
        {[
          ['open', 'Open'],
          ['removed', 'No longer listed'],
          ['all', 'All'],
        ].map(([v, l]) => (
          <Link key={v} href={link({ status: v })} scroll={false} className="chip-btn" data-on={status === v}>
            {l}
          </Link>
        ))}
        <Link href={link({ ai: !ai })} scroll={false} className="chip-btn ml-2" data-on={ai} aria-pressed={ai}>
          AI-related only
        </Link>
        {data && <span className="tnum ml-auto text-xs text-ink-3">{fmtInt(data.total)} listings</span>}
      </div>
      {!data ? (
        <Empty title="Job listings temporarily unavailable." />
      ) : data.items.length === 0 ? (
        <Empty>No monitored listings match this filter.</Empty>
      ) : (
        <JobsTable items={data.items} />
      )}
      <Note>Counts reflect listings visible on the monitored careers surfaces only. A listing that is no longer visible is reported as “no longer listed” — it is not evidence of a hiring decision.</Note>
    </div>
  );
}

function JobsTable({ items }: { items: Job[] }) {
  return (
    <div className="table-scroll">
      <table className="data-table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Department</th>
            <th>Location</th>
            <th>Type</th>
            <th>First seen</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {items.map((j) => (
            <tr key={j.id}>
              <td className="primary wrap">
                {j.url ? (
                  <a href={j.url} target="_blank" rel="noopener noreferrer" className="row-link inline-flex items-center gap-1">
                    {j.title} <ExternalLink className="size-3 text-ink-3" aria-hidden />
                  </a>
                ) : (
                  j.title
                )}
                {j.is_ai && (
                  <Chip tone="accent" className="ml-1.5">
                    AI
                  </Chip>
                )}
              </td>
              <td className="text-ink-2">{j.department ?? '—'}</td>
              <td className="text-ink-2">
                {j.location_text ?? '—'}
                {j.remote && <span className="ml-1 text-[11px] text-ink-3">· remote</span>}
              </td>
              <td className="text-xs text-ink-3">
                {j.employment_type ? humanize(j.employment_type) : '—'}
                {j.seniority ? ` · ${j.seniority}` : ''}
              </td>
              <td className="tnum text-xs text-ink-3">{fmtDate(j.first_seen_at)}</td>
              <td>
                <StatusBadge status={j.status} />
                {j.removed_at && <span className="ml-1 text-[11px] text-ink-3">{fmtDate(j.removed_at)}</span>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------------ products */
export function ProductsPanel({ data, wikidataProducts = [], wikidataSource = null }: { data: { listed: Product[]; removed: Product[] } | null; wikidataProducts?: string[]; wikidataSource?: { url: string | null; retrieved_at: string } | null }) {
  if (!data) return <Empty title="Products temporarily unavailable." />;
  if (!data.listed.length && !data.removed.length) {
    if (wikidataProducts.length)
      return (
        <div className="space-y-4">
          <WikidataProducts products={wikidataProducts} source={wikidataSource} />
          <Empty compact title="No product catalogue surface has been reconciled for this company yet.">Once a catalogue page is monitored, listed products appear here with first-seen / last-seen dates.</Empty>
        </div>
      );
    return <Empty>No product catalog surface has been reconciled for this company yet.</Empty>;
  }
  const Row = ({ p }: { p: Product }) => (
    <li className="py-2.5">
      <div className="flex flex-wrap items-center gap-2">
        {p.url ? (
          <a href={p.url} target="_blank" rel="noopener noreferrer" className="text-[15px] font-medium text-ink hover:text-accent">
            {p.name}
          </a>
        ) : (
          <span className="text-[15px] font-medium text-ink">{p.name}</span>
        )}
        {p.category && <Chip>{p.category}</Chip>}
        <StatusBadge status={p.status} />
        <span className="ml-auto text-[11px] text-ink-3">
          first seen {fmtDate(p.first_seen_at)}
          {p.removed_at ? ` · no longer listed ${fmtDate(p.removed_at)}` : ` · last seen ${fmtDate(p.last_seen_at)}`}
        </span>
      </div>
      {p.description && <p className="mt-0.5 text-sm text-ink-2">{p.description}</p>}
    </li>
  );
  return (
    <div className="space-y-6">
      <div>
        <p className="eyebrow mb-1">
          Listed <span className="tnum normal-case tracking-normal">({data.listed.length})</span>
        </p>
        <ul className="divide-y divide-rule border-y border-rule">{data.listed.map((p) => <Row key={p.id} p={p} />)}</ul>
      </div>
      {data.removed.length > 0 && (
        <div>
          <p className="eyebrow mb-1">
            No longer listed <span className="tnum normal-case tracking-normal">({data.removed.length})</span>
          </p>
          <ul className="divide-y divide-rule border-y border-rule">{data.removed.map((p) => <Row key={p.id} p={p} />)}</ul>
          <Note className="mt-2">A product that disappears from the public catalog is recorded as “no longer listed”; the platform does not infer discontinuation without a first-party statement.</Note>
        </div>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------------ pricing */
export function PricingPanel({ data }: { data: { current: Plan[]; history: Plan[] } | null }) {
  if (!data) return <Empty title="Pricing temporarily unavailable." />;
  if (!data.current.length && !data.history.length) return <Empty>No public pricing page is monitored for this company yet.</Empty>;
  return (
    <div className="space-y-6">
      <div>
        <p className="eyebrow mb-2">Current plans</p>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          {data.current.map((p) => (
            <div key={p.id} className="border border-rule p-3">
              <p className="text-sm font-medium text-ink">{p.plan_name}</p>
              <p className="tnum mt-1 text-2xl font-semibold tracking-tight">{p.contact_sales ? <span className="text-base font-medium text-ink-2">Contact sales</span> : fmtPrice(p.price, p.currency, p.price_text)}</p>
              {!p.contact_sales && (
                <p className="text-xs text-ink-3">
                  {p.billing_period ? `per ${p.billing_period}` : ''}
                  {p.unit ? ` · per ${p.unit}` : ''}
                </p>
              )}
              {p.features.length > 0 && (
                <ul className="mt-2 space-y-0.5 text-xs text-ink-2">
                  {p.features.slice(0, 6).map((f) => (
                    <li key={f}>· {f}</li>
                  ))}
                </ul>
              )}
              <p className="mt-2 text-[11px] text-ink-3">
                v{p.version_no} · since {fmtDate(p.valid_from)}
              </p>
            </div>
          ))}
        </div>
      </div>
      {data.history.length > 0 && (
        <div>
          <p className="eyebrow mb-2">Version history</p>
          <div className="table-scroll">
            <table className="data-table">
              <thead>
                <tr>
                  <th>Plan</th>
                  <th className="num">Version</th>
                  <th className="num">Price</th>
                  <th>Billing</th>
                  <th>Valid from</th>
                  <th>Valid to</th>
                  <th>Source</th>
                </tr>
              </thead>
              <tbody>
                {[...data.history].sort((a, b) => b.valid_from.localeCompare(a.valid_from)).map((p) => (
                  <tr key={p.id}>
                    <td className="primary">{p.plan_name}</td>
                    <td className="num tnum">v{p.version_no}</td>
                    <td className="num tnum">{p.contact_sales ? 'Contact sales' : fmtPrice(p.price, p.currency, p.price_text)}</td>
                    <td className="text-ink-2">{p.billing_period ?? '—'}</td>
                    <td className="tnum text-xs">{fmtDate(p.valid_from)}</td>
                    <td className="tnum text-xs">{p.valid_to ? fmtDate(p.valid_to) : '—'}</td>
                    <td>
                      {p.source_url ? (
                        <a href={p.source_url} target="_blank" rel="noopener noreferrer" className="link text-xs">
                          {pathOf(p.source_url)}
                        </a>
                      ) : (
                        '—'
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <Note className="mt-2">Every version of every plan is preserved; a price change creates a new version rather than overwriting the previous one.</Note>
        </div>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------------ locations */
export function LocationsPanel({ data, map }: { data: { items: Location[]; countries: string[] } | null; map?: React.ReactNode }) {
  if (!data) return <Empty title="Locations temporarily unavailable." />;
  if (!data.items.length) return <Empty>No locations surface has been reconciled for this company yet.</Empty>;
  const listed = data.items.filter((l) => l.status === 'listed');
  const gone = data.items.filter((l) => l.status !== 'listed');
  return (
    <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)]">
      <div>
        <p className="eyebrow mb-1">
          Listed <span className="tnum normal-case tracking-normal">({listed.length} in {data.countries.length} {plural(data.countries.length, 'country', 'countries')})</span>
        </p>
        <ul className="divide-y divide-rule border-y border-rule text-sm">
          {listed.map((l) => (
            <li key={l.id} className="flex flex-wrap items-center gap-2 py-2">
              <Chip>{l.kind}</Chip>
              <span className="text-ink">{[l.city, l.region].filter(Boolean).join(', ') || l.name}</span>
              <CountryChip code={l.country} name={countryName(l.country)} />
              <span className="ml-auto text-[11px] text-ink-3">since {fmtDate(l.first_seen_at)}</span>
            </li>
          ))}
        </ul>
        {gone.length > 0 && (
          <>
            <p className="eyebrow mb-1 mt-4">No longer listed ({gone.length})</p>
            <ul className="divide-y divide-rule border-y border-rule text-sm text-ink-2">
              {gone.map((l) => (
                <li key={l.id} className="flex flex-wrap items-center gap-2 py-2">
                  <Chip>{l.kind}</Chip>
                  <span>{[l.city, l.region].filter(Boolean).join(', ') || l.name}</span>
                  <CountryChip code={l.country} />
                  <span className="ml-auto text-[11px] text-ink-3">until {fmtDate(l.removed_at)}</span>
                </li>
              ))}
            </ul>
          </>
        )}
        <Note className="mt-2">Only cities/regions/countries are recorded; exact street addresses are never inferred.</Note>
      </div>
      <div className="min-w-0">{map}</div>
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------------ leadership */
/**
 * Page-observed people and Wikidata-sourced executives merged by name (both chips kept when they agree), CEO / chair /
 * founders first. The "no longer listed" group stays separate with wording that depends on the source.
 */
export function PeoplePanel({ data }: { data: { listed: Person[]; no_longer_listed: Person[] } | null }) {
  if (!data) return <Empty title="Leadership temporarily unavailable." />;
  if (!data.listed.length && !data.no_longer_listed.length) return <Empty>No leadership page is monitored for this company yet, and Wikidata records no current executives for it.</Empty>;
  const listed = mergePeople(data.listed);
  const gone = mergePeople(data.no_longer_listed);
  const nPage = listed.filter((p) => p.sources.includes('page')).length;
  const nWd = listed.filter((p) => p.sources.includes('wikidata')).length;
  const Row = ({ p }: { p: MergedPerson }) => {
    const onlyWd = p.sources.length === 1 && p.sources[0] === 'wikidata';
    const when = p.status === 'listed' ? (onlyWd ? `recorded on Wikidata · retrieved ${fmtDate(p.last_seen_at)}` : `listed since ${fmtDate(p.first_seen_at)}`) : onlyWd ? `no longer recorded as current on Wikidata · ${fmtDate(p.removed_at ?? p.last_seen_at)}` : `no longer listed since ${fmtDate(p.removed_at ?? p.last_seen_at)}`;
    return (
      <li className="flex flex-wrap items-center gap-x-2 gap-y-1 py-2 text-sm" data-person-source={p.sources.join('+')}>
        <span className="font-medium text-ink">{p.name}</span>
        <span className="text-ink-2">{p.title ?? 'title not stated'}</span>
        {p.is_executive && roleRank(p.title) > 3 && <Chip>executive</Chip>}
        {p.sources.map((s) => (
          <SourceChip key={s} source={s} url={s === 'page' ? p.source_url : null} retrievedAt={p.last_seen_at} />
        ))}
        <span className="ml-auto text-[11px] text-ink-3">
          {when}
          {p.source_url && !onlyWd && (
            <>
              {' · '}
              <a href={p.source_url} target="_blank" rel="noopener noreferrer" className="hover:text-accent">
                source ↗
              </a>
            </>
          )}
          {p.source_url && onlyWd && (
            <>
              {' · '}
              <a href={p.source_url} target="_blank" rel="noopener nofollow noreferrer" className="hover:text-accent">
                statement ↗
              </a>
            </>
          )}
        </span>
      </li>
    );
  };
  return (
    <div className="space-y-6">
      <div>
        <p className="eyebrow mb-1 flex flex-wrap items-baseline gap-x-2">
          Currently listed <span className="tnum normal-case tracking-normal">({listed.length})</span>
          <span className="tnum font-normal normal-case tracking-normal text-ink-3">
            {nPage > 0 && `${nPage} on the monitored leadership page`}
            {nPage > 0 && nWd > 0 && ' · '}
            {nWd > 0 && `${nWd} recorded on Wikidata`}
          </span>
        </p>
        {listed.length ? <ul className="divide-y divide-rule border-y border-rule">{listed.map((p) => <Row key={p.id} p={p} />)}</ul> : <Empty compact title="No one is currently listed." />}
      </div>
      {gone.length > 0 && (
        <div>
          <p className="eyebrow mb-1">
            No longer listed <span className="tnum normal-case tracking-normal">({gone.length})</span>
          </p>
          <ul className="divide-y divide-rule border-y border-rule">{gone.map((p) => <Row key={p.id} p={p} />)}</ul>
        </div>
      )}
      <Note>
        Leadership data is limited to public professional context: the company’s own leadership page (observed by a sensor) and Wikidata position statements (with their retrieval time). A profile that disappears from the page is “no longer listed on the monitored leadership page”; a Wikidata position with an end date is “no longer recorded as current” — the platform never states why.
      </Note>
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------------ sensors */
export function SensorsTable({ items, className, withCompany = false }: { items: (Sensor & { company?: { slug: string; display_name: string } })[]; className?: string; withCompany?: boolean }) {
  if (!items.length) return <Empty>No sensors attached yet.</Empty>;
  return (
    <div className={cn('table-scroll', className)}>
      <table className="data-table">
        <thead>
          <tr>
            {withCompany && <th>Company</th>}
            <th>Surface</th>
            <th>URL</th>
            <th>Connector</th>
            <th>Status</th>
            <th>Tier</th>
            <th className="num">Quality</th>
            <th>Last checked</th>
            <th className="num">Obs.</th>
            <th className="num">Changes</th>
            <th className="num">Events</th>
          </tr>
        </thead>
        <tbody>
          {items.map((s) => {
            const stale = s.last_success_at && Date.now() - new Date(s.last_success_at).getTime() > 2 * 86_400_000;
            return (
              <tr key={s.id}>
                {withCompany && <td className="primary">{s.company ? <Link href={routes.company(s.company.slug)} className="row-link">{s.company.display_name}</Link> : '—'}</td>}
                <td className="primary">
                  <Link href={routes.sensor(s.id)} className="row-link">
                    {SURFACE_LABELS[s.surface] ?? s.surface}
                  </Link>
                </td>
                <td className="mono text-xs text-ink-2">
                  <a href={s.url} target="_blank" rel="noopener noreferrer" className="hover:text-accent">
                    {pathOf(s.url)}
                  </a>
                </td>
                <td className="mono text-xs text-ink-3">{s.connector_id}</td>
                <td>
                  <StatusBadge status={s.status} />
                  {s.last_failure_class && <span className="mono ml-1 text-[10px] text-danger">{s.last_failure_class}</span>}
                </td>
                <td>
                  <SensorTierBadge tier={s.tier} />
                </td>
                <td className="num tnum">{fmtScore(s.quality_score)}</td>
                <td className={cn('text-xs', stale ? 'text-warning' : 'text-ink-3')}>
                  <LiveAgo at={s.last_success_at ?? s.last_run_at} tick={30000} absoluteFallback={false} prefix={stale ? 'last success ' : ''} />
                </td>
                <td className="num tnum">{fmtInt(s.observation_count)}</td>
                <td className="num tnum">{fmtInt(s.change_count)}</td>
                <td className="num tnum">{fmtInt(s.event_count)}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------------ history viewer */
export function HistoryPanel({ data }: { data: HistoryPayload | null }) {
  if (!data) return <Empty title="Historical page viewer temporarily unavailable." />;
  const sensors = data.sensors.filter((s) => s.versions.length > 0);
  if (!sensors.length) return <Empty>No snapshot versions stored yet.</Empty>;
  return (
    <div className="space-y-5">
      <Note>Every monitored page keeps its normalised versions. Open a version to read it as observed, or diff any two versions block by block.</Note>
      {sensors.map((s) => (
        <details key={s.id} className="border-y border-rule py-2" open={sensors.length <= 3}>
          <summary className="flex cursor-pointer flex-wrap items-center gap-2 py-1 text-sm">
            <span className="font-medium text-ink">{SURFACE_LABELS[s.surface] ?? s.surface}</span>
            <span className="mono text-xs text-ink-3">{pathOf(s.url)}</span>
            <SensorTierBadge tier={s.tier} />
            <span className="tnum ml-auto text-xs text-ink-3">
              {s.versions.length} {plural(s.versions.length, 'version')} · every {fmtDuration(s.current_interval_s)}
            </span>
          </summary>
          <div className="table-scroll mt-1">
            <table className="data-table compact">
              <thead>
                <tr>
                  <th className="num">v</th>
                  <th>Fetched</th>
                  <th>Title</th>
                  <th className="num">Blocks</th>
                  <th className="num">Text</th>
                  <th>Hash</th>
                  <th>Diff</th>
                </tr>
              </thead>
              <tbody>
                {s.versions.map((v, i) => {
                  const prev = s.versions[i + 1];
                  return (
                    <tr key={v.id}>
                      <td className="num tnum">{v.version_no}</td>
                      <td className="tnum text-xs">
                        <Link href={routes.snapshot(v.id)} className="link">
                          {fmtDateTime(v.fetched_at)}
                        </Link>
                      </td>
                      <td className="wrap text-ink-2">{v.title ?? '—'}</td>
                      <td className="num tnum">{fmtInt(v.block_count)}</td>
                      <td className="num tnum">{fmtInt(v.text_length)}</td>
                      <td className="mono text-[11px] text-ink-3">{v.content_hash.replace('sha256:', '').slice(0, 10)}</td>
                      <td className="text-xs">
                        {prev ? (
                          <Link href={routes.snapshotDiff(prev.id, v.id)} className="link">
                            vs v{prev.version_no}
                          </Link>
                        ) : (
                          <span className="text-ink-3">first version</span>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </details>
      ))}
    </div>
  );
}

export function ConfidenceLegend() {
  return (
    <p className="flex flex-wrap items-center gap-1.5 text-[11px] text-ink-3">
      Confidence labels: {['VERIFIED', 'HIGH_CONFIDENCE', 'LIKELY', 'INFERRED', 'LOW_CONFIDENCE'].map((l) => <ConfidenceBadge key={l} label={l} />)}
    </p>
  );
}