'use client';
import { ArrowDownWideNarrow, ArrowUpNarrowWide, BarChart3, Map as MapIcon, Search, SlidersHorizontal, Table2, X } from 'lucide-react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { compact, displayValue, formatValue, grouped, isNum, ordinal } from '@/lib/format';
import { INCOME_GROUPS } from '@/lib/regions';
import { MIN_COV_OPTIONS, MIN_POP_OPTIONS, rankingQuery, type RankingState, type RankingView as ViewKind } from '@/lib/ranking-state';
import { routes } from '@/lib/site';
import type { RankingResponse, RankingRow } from '@/lib/types';
import type { CountryLite, RegionItem } from '@/lib/types-compare';
import { ChoroplethView, classFor, legendFromBreaks, type ChoroplethFeature } from '@/components/charts/choropleth-view';
import { MARK } from '@/components/charts/palette';
import { RankedBars, rankedRowFromCountry, staleYear } from '@/components/charts/ranked-bars';
import { Segmented } from '@/components/controls/indicator-select';
import type { BaseFeature } from '@/components/indicators/indicator-map';
import { pointsFromSpark } from '@/components/charts/scales';
import { Sparkline } from '@/components/charts/sparkline';
import { CountryTypeahead } from '@/components/compare/country-picker';
import { BottomSheet } from '@/components/data/bottom-sheet';
import { ChangeChip } from '@/components/data/change-chip';
import { useProvenance, type ProvenancePayload } from '@/components/data/provenance-context';

const PAGE = 25;
const GROUP_KINDS = ['region', 'continent', 'income', 'org'] as const;

/**
 * Interactive ranking: controls (year · group · sort · highlight · search; a compact sticky bar + bottom
 * sheet on phones), the ranked list (rank, flag+name, bar, value, 1 y / 10 y change, sparkline), 25 rows per
 * page with "Show more". Year/group/sort/highlight/q live in the URL (server re-renders the data).
 */
export function RankingView({ data, regions, countries, state, geometry, sphere }: { data: RankingResponse & { label?: string }; regions: RegionItem[]; countries: CountryLite[]; state: RankingState; geometry?: BaseFeature[]; sphere?: string }) {
  const router = useRouter();
  const pathname = usePathname();
  const { open } = useProvenance();
  const [q, setQ] = useState(state.q);
  const [shown, setShown] = useState(PAGE);
  const [sheet, setSheet] = useState(false);
  const [jump, setJump] = useState(false);
  const listRef = useRef<HTMLOListElement>(null);
  const ind = data.indicator;
  const hib = ind.higher_is_better;
  const sort = (data.sort as 'asc' | 'desc') ?? 'desc';

  const setState = useCallback(
    (patch: Partial<RankingState>) => router.replace(`${pathname}${rankingQuery({ ...state, ...patch })}`, { scroll: false }),
    [router, pathname, state],
  );

  // Search is client-side; keep the URL in sync (debounced) so a reload restores it.
  useEffect(() => {
    if (q === state.q) return;
    const id = setTimeout(() => setState({ q }), 400);
    return () => clearTimeout(id);
  }, [q, state.q, setState]);

  // Client-side filters (income group · minimum population · minimum coverage) then re-rank within the result.
  const popById = useMemo(() => new Map(countries.map((c) => [c.id, c.population ?? null])), [countries]);
  const incomeCode = state.income ? INCOME_GROUPS.find((g) => g.slug === state.income || g.id.toLowerCase() === state.income)?.id ?? null : null;
  const rows = useMemo(() => {
    let r = data.rows;
    if (incomeCode) r = r.filter((x) => (x.country.income ?? '').toUpperCase() === incomeCode);
    if (state.minpop) r = r.filter((x) => (popById.get(x.country.id) ?? 0) >= state.minpop!);
    if (state.mincov && data.year_used != null) r = r.filter((x) => (x.year ?? 0) >= data.year_used! - state.mincov!);
    if (r.length !== data.rows.length) r = r.map((x, i) => ({ ...x, rank: i + 1 }));
    return r;
  }, [data.rows, data.year_used, incomeCode, state.minpop, state.mincov, popById]);
  // Freshness honesty: rows ≥ 2 years older than the ranking year show their year next to the value.
  const refYear = useMemo(() => Math.max(data.year_used ?? 0, ...rows.map((r) => r.year ?? 0)), [rows, data.year_used]);
  const max = useMemo(() => Math.max(0, ...rows.map((r) => (isNum(r.value) ? Math.abs(r.value) : 0))), [rows]);
  const ql = q.trim().toLowerCase();
  const filtered = useMemo(() => (ql ? rows.filter((r) => (r.country.name ?? '').toLowerCase().includes(ql) || r.country.id.toLowerCase() === ql || (r.country.region_name ?? '').toLowerCase().includes(ql)) : rows), [rows, ql]);
  const highlightRow = state.highlight ? rows.find((r) => (r.country.slug ?? r.country.id.toLowerCase()) === state.highlight) ?? null : null;
  const highlightCountry = state.highlight ? countries.find((c) => c.slug === state.highlight) ?? null : null;
  const visible = filtered.slice(0, shown);

  // Scroll to the highlighted row after a user-initiated highlight.
  useEffect(() => {
    if (!jump || !highlightRow) return;
    const idx = filtered.findIndex((r) => r.country.id === highlightRow.country.id);
    if (idx >= shown) setShown(Math.ceil((idx + 1) / PAGE) * PAGE);
    const el = listRef.current?.querySelector<HTMLElement>(`[data-country="${highlightRow.country.id}"]`);
    if (el) {
      el.scrollIntoView({ block: 'center', behavior: 'smooth' });
      setJump(false);
    }
  }, [jump, highlightRow, filtered, shown]);

  const payloadOf = (r: RankingRow): ProvenancePayload => ({
    indicator: { slug: ind.slug, name: ind.name ?? ind.slug, format: ind.format, unit: ind.unit, unit_short: ind.unit_short, precision: ind.precision, frequency: ind.frequency, higher_is_better: hib },
    value: { value: r.value, formatted: r.formatted, period: r.year ? `${r.year}-01-01` : null, year: r.year, unit: ind.unit, provenance: r.provenance },
    country: { id: r.country.id, slug: r.country.slug, name: r.country.name ?? r.country.id, flag: r.country.flag },
    downloadHref: routes.indicatorDownload(ind.slug),
  });

  const groupsByKind = GROUP_KINDS.map((k) => ({ kind: k, items: regions.filter((g) => g.kind === k).sort((a, b) => a.name.localeCompare(b.name)) })).filter((g) => g.items.length);
  const activeFilters = (state.group !== 'world' ? 1 : 0) + (state.sort ? 1 : 0) + (state.highlight ? 1 : 0) + (state.income ? 1 : 0) + (state.minpop ? 1 : 0) + (state.mincov ? 1 : 0);
  const years = [...data.years_available].sort((a, b) => b - a);

  const yearSelect = (
    <label className="inline-flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2 md:h-9">
      <span className="text-2xs uppercase tracking-wide text-ink-3">{t('ranking.year')}</span>
      <select value={data.year_used ?? ''} onChange={(e) => setState({ year: Number(e.target.value) })} className="tnum bg-transparent text-ink outline-none" aria-label={t('ranking.year')}>
        {years.map((y) => (
          <option key={y} value={y}>
            {y}
          </option>
        ))}
      </select>
    </label>
  );
  const groupSelect = (
    <label className="inline-flex h-11 max-w-full items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2 md:h-9">
      <span className="text-2xs uppercase tracking-wide text-ink-3">{t('ranking.group')}</span>
      <select value={state.group} onChange={(e) => setState({ group: e.target.value })} className="max-w-[12rem] truncate bg-transparent text-ink outline-none" aria-label={t('ranking.group')}>
        <option value="world">{t('ranking.group.world')}</option>
        {groupsByKind.map((g) => (
          <optgroup key={g.kind} label={t(`ranking.group.${g.kind}` as 'ranking.group.region')}>
            {g.items.map((it) => (
              <option key={it.slug} value={it.slug}>
                {it.name}
              </option>
            ))}
          </optgroup>
        ))}
      </select>
    </label>
  );
  const sortToggle = (
    <button type="button" onClick={() => setState({ sort: sort === 'desc' ? 'asc' : 'desc' })} className="inline-flex h-11 items-center gap-1.5 rounded-sm border border-rule bg-surface px-2.5 text-sm text-ink-2 hover:text-ink md:h-9" aria-label={t('ranking.sort')}>
      {sort === 'desc' ? <ArrowDownWideNarrow size={15} aria-hidden /> : <ArrowUpNarrowWide size={15} aria-hidden />}
      {sort === 'desc' ? t('ranking.sort.desc') : t('ranking.sort.asc')}
    </button>
  );
  const incomeSelect = (
    <label className="inline-flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2 md:h-9">
      <span className="text-2xs uppercase tracking-wide text-ink-3">{t('common.income')}</span>
      <select value={state.income ?? ''} onChange={(e) => setState({ income: e.target.value || null })} className="max-w-[10rem] truncate bg-transparent text-ink outline-none" aria-label={t('common.income')}>
        <option value="">{t('common.all')}</option>
        {INCOME_GROUPS.map((g) => (
          <option key={g.id} value={g.slug}>
            {g.name}
          </option>
        ))}
      </select>
    </label>
  );
  const minPopSelect = (
    <label className="inline-flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2 md:h-9">
      <span className="text-2xs uppercase tracking-wide text-ink-3">{t('ranking.minpop')}</span>
      <select value={state.minpop ?? 0} onChange={(e) => setState({ minpop: Number(e.target.value) || null })} className="tnum bg-transparent text-ink outline-none" aria-label={t('ranking.minpop')}>
        {MIN_POP_OPTIONS.map((v) => (
          <option key={v} value={v}>
            {v ? `≥ ${compact(v)}` : t('common.all')}
          </option>
        ))}
      </select>
    </label>
  );
  const minCovSelect = (
    <label className="inline-flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2 md:h-9">
      <span className="text-2xs uppercase tracking-wide text-ink-3">{t('ranking.mincov')}</span>
      <select value={state.mincov ?? 0} onChange={(e) => setState({ mincov: Number(e.target.value) || null })} className="tnum bg-transparent text-ink outline-none" aria-label={t('ranking.mincov')}>
        {MIN_COV_OPTIONS.map((v) => (
          <option key={v} value={v}>
            {v ? t('ranking.mincov.within', { n: v }) : t('common.all')}
          </option>
        ))}
      </select>
    </label>
  );
  const viewSwitch = (
    <Segmented<ViewKind> value={state.view} onChange={(v) => setState({ view: v })} label={t('control.view')} size="sm" options={[{ value: 'table', label: t('ranking.view.table'), icon: <Table2 size={13} aria-hidden /> }, { value: 'bars', label: t('ranking.view.bars'), icon: <BarChart3 size={13} aria-hidden /> }, { value: 'map', label: t('ranking.view.map'), icon: <MapIcon size={13} aria-hidden /> }]} />
  );
  const highlightControl = highlightCountry ? (
    <span className="inline-flex h-11 items-center gap-1 rounded-sm border border-accent bg-accent-soft pl-2.5 text-sm text-accent md:h-9">
      <span aria-hidden>{highlightCountry.flag}</span>
      <span className="max-w-[9rem] truncate">{highlightCountry.name}</span>
      <button type="button" onClick={() => setState({ highlight: null })} className="grid h-11 w-9 place-items-center md:h-9 md:w-7" aria-label={t('ranking.highlight.clear')}>
        <X size={14} aria-hidden />
      </button>
    </span>
  ) : (
    <CountryTypeahead
      countries={countries}
      exclude={new Set()}
      onPick={(c) => {
        setState({ highlight: c.slug });
        setJump(true);
      }}
      placeholder={t('ranking.highlight.placeholder')}
      className="w-full sm:w-56"
    />
  );
  const searchBox = (
    <div className="relative min-w-0 flex-1">
      <Search size={15} aria-hidden className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-ink-3" />
      <input type="search" value={q} onChange={(e) => { setQ(e.target.value); setShown(PAGE); }} placeholder={t('ranking.search')} aria-label={t('ranking.search')} className="h-11 w-full rounded-sm border border-rule bg-surface pl-9 pr-9 text-sm text-ink outline-none placeholder:text-ink-3 focus:border-accent md:h-9" />
      {q ? (
        <button type="button" onClick={() => setQ('')} className="absolute right-0 top-0 grid h-11 w-10 place-items-center text-ink-3 hover:text-ink md:h-9" aria-label={t('search.clear')}>
          <X size={14} aria-hidden />
        </button>
      ) : null}
    </div>
  );

  const rankNote = hib == null ? (sort === 'desc' ? t('ranking.rankNote.higher') : t('ranking.rankNote.lowest')) : t('ranking.rankNote.better', { direction: hib ? t('ranking.direction.higher') : t('ranking.direction.lower') });

  return (
    <div>
      {/* Sticky compact bar (phones) */}
      <div className="sticky top-[52px] z-20 -mx-4 flex items-center gap-2 border-b border-rule bg-paper/95 px-4 py-2 backdrop-blur supports-[backdrop-filter]:bg-paper/85 md:hidden">
        {yearSelect}
        {searchBox}
        <button type="button" onClick={() => setSheet(true)} className={cn('inline-flex h-11 shrink-0 items-center gap-1 rounded-sm border px-2.5 text-sm', activeFilters ? 'border-accent text-accent' : 'border-rule text-ink-2')} aria-label={t('ranking.filters')}>
          <SlidersHorizontal size={15} aria-hidden />
          {activeFilters ? <span className="tnum">{activeFilters}</span> : null}
        </button>
      </div>
      {/* Desktop controls */}
      <div className="hidden flex-wrap items-center gap-2 py-3 md:flex">
        {yearSelect}
        {groupSelect}
        {incomeSelect}
        {minPopSelect}
        {minCovSelect}
        {sortToggle}
        {highlightControl}
        <div className="ml-auto flex items-center gap-2">
          {viewSwitch}
          <div className="w-56">{searchBox}</div>
        </div>
      </div>
      <div className="flex items-center justify-between gap-2 py-2 md:hidden">{viewSwitch}</div>

      <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 py-2 text-xs text-ink-3">
        <span>{rankNote}</span>
        <span className="tnum">
          {t('ranking.showing', { shown: grouped(Math.min(shown, filtered.length)), n: grouped(filtered.length) })}
          {data.year != null && data.year_used != null && data.year !== data.year_used ? ` · ${t('ranking.yearUsed', { year: data.year_used, requested: data.year })}` : ''}
        </span>
      </div>

      {/* Pinned highlighted row */}
      {highlightRow ? (
        <div className="mb-2 border-y border-accent/40 bg-accent-soft/40">
          <Row r={highlightRow} max={max} spec={ind} refYear={refYear} highlight onValue={() => open(payloadOf(highlightRow))} />
          <button type="button" onClick={() => setJump(true)} className="inline-flex min-h-[36px] items-center px-1 text-xs text-accent hover:underline">
            {t('ranking.jumpToHighlight', { name: highlightRow.country.name ?? highlightRow.country.id })} ↓
          </button>
        </div>
      ) : state.highlight && highlightCountry ? (
        <p className="mb-2 border-y border-dashed border-rule-strong py-2 text-xs text-ink-3">{t('ranking.highlight.notInGroup', { name: highlightCountry.name, year: data.year_used ?? '' })}</p>
      ) : null}

      {state.view === 'bars' ? (
        <div className="py-2">
          <RankedBars rows={filtered.slice(0, 25).map((r) => rankedRowFromCountry(r.country, r.value, r.rank, r.change_10y?.formatted ?? null, staleYear(r.year, refYear)))} spec={ind} highlightId={highlightRow?.country.id ?? null} provenance={filtered[0]?.provenance ?? null} />
          {filtered.length > 25 ? <p className="mt-2 text-xs text-ink-3">{t('ranking.view.barsNote', { n: 25, total: filtered.length })}</p> : null}
        </div>
      ) : null}
      {state.view === 'map' ? (
        geometry && sphere ? (
          <RankingMap rows={filtered} geometry={geometry} sphere={sphere} spec={ind} year={data.year_used} highlight={highlightRow?.country.id ?? null} />
        ) : (
          <p className="py-6 text-sm text-ink-3">{t('ranking.map.none')}</p>
        )
      ) : null}
      {/* Header (sm+) */}
      <div className={cn('grid-cols-[2.25rem_minmax(0,1fr)_minmax(6rem,1.4fr)_6rem_5rem_5rem_4.5rem] gap-x-3 border-b border-rule pb-1.5 text-2xs font-medium uppercase tracking-wide text-ink-3', state.view === 'table' ? 'hidden sm:grid' : 'hidden')}>
        <span className="text-right">{t('ranking.col.rank')}</span>
        <span>{t('ranking.col.country')}</span>
        <span />
        <span className="text-right">{t('ranking.col.value')}</span>
        <span className="text-right">{t('ranking.col.change1y')}</span>
        <span className="text-right">{t('ranking.col.change10y')}</span>
        <span className="text-right">{t('ranking.col.trend')}</span>
      </div>

      {filtered.length === 0 ? <p className="py-10 text-center text-sm text-ink-3">{ql ? t('ranking.noMatch', { q }) : t('ranking.empty')}</p> : null}
      <ol ref={listRef} className={cn('divide-y divide-rule', state.view !== 'table' && 'hidden')} role="list">
        {visible.map((r) => (
          <Row key={r.country.id} r={r} max={max} spec={ind} refYear={refYear} highlight={highlightRow?.country.id === r.country.id} onValue={() => open(payloadOf(r))} />
        ))}
      </ol>
      {state.view === 'table' && filtered.length > shown ? (
        <div className="flex justify-center py-4">
          <button type="button" onClick={() => setShown((s) => s + PAGE)} className="inline-flex h-11 items-center rounded-sm border border-rule px-5 text-sm text-ink hover:bg-surface-2 md:h-10">
            {t('ranking.showMore', { n: Math.min(PAGE, filtered.length - shown) })}
          </button>
        </div>
      ) : null}

      <BottomSheet open={sheet} onClose={() => setSheet(false)} side="center" title={t('ranking.filters')}>
        <div className="space-y-4">
          <div>
            <div className="eyebrow mb-1.5">{t('ranking.group')}</div>
            {groupSelect}
          </div>
          <div>
            <div className="eyebrow mb-1.5">{t('common.income')}</div>
            {incomeSelect}
          </div>
          <div className="flex flex-wrap gap-2">
            {minPopSelect}
            {minCovSelect}
          </div>
          <div>
            <div className="eyebrow mb-1.5">{t('ranking.sort')}</div>
            {sortToggle}
          </div>
          <div>
            <div className="eyebrow mb-1.5">{t('ranking.highlight')}</div>
            {highlightControl}
          </div>
        </div>
        <div className="mt-6 flex justify-between">
          <button type="button" className="tap rounded-sm px-3 text-sm text-ink-2 hover:bg-surface-2" onClick={() => setState({ group: 'world', income: null, minpop: null, mincov: null, sort: null, highlight: null })}>
            {t('common.reset')}
          </button>
          <button type="button" className="tap rounded-sm bg-ink px-4 text-sm font-medium text-paper" onClick={() => setSheet(false)}>
            {t('common.apply')}
          </button>
        </div>
      </BottomSheet>
    </div>
  );
}

function Row({ r, max, spec, refYear, highlight, onValue }: { r: RankingRow; max: number; spec: RankingResponse['indicator']; refYear: number; highlight?: boolean; onValue: () => void }) {
  const stale = staleYear(r.year, refYear);
  const pct = isNum(r.value) && max > 0 ? Math.max(0, (Math.abs(r.value) / max) * 100) : 0;
  const points = pointsFromSpark(r.sparkline);
  const dir = r.change_1y?.abs == null ? null : r.change_1y.abs > 0 ? 'up' : r.change_1y.abs < 0 ? 'down' : 'flat';
  const value = displayValue(r.value, spec, r.formatted);
  const worldRank = isNum(r.rank_world) && isNum(r.n_world) ? t('ranking.worldRank', { rank: ordinal(r.rank_world), n: grouped(r.n_world) }) : null;
  return (
    <li data-country={r.country.id} className={cn('py-2 sm:py-1.5', highlight && 'bg-accent-soft/40')}>
      <div className="grid grid-cols-[2.25rem_minmax(0,1fr)_auto] items-center gap-x-3 sm:grid-cols-[2.25rem_minmax(0,1fr)_minmax(6rem,1.4fr)_6rem_5rem_5rem_4.5rem]">
        <span className={cn('tnum text-right text-sm', highlight ? 'font-semibold text-accent' : 'text-ink-3')}>{r.rank}</span>
        <Link href={routes.country(r.country.slug ?? r.country.id)} className="link-quiet flex min-h-[44px] min-w-0 items-center gap-2 sm:min-h-[36px]" title={worldRank ?? undefined}>
          <span aria-hidden className="text-lg leading-none">
            {r.country.flag}
          </span>
          <span className="min-w-0">
            <span className={cn('block truncate text-sm', highlight ? 'font-semibold text-ink' : 'text-ink')}>{r.country.name}</span>
            <span className="block truncate text-2xs text-ink-3 sm:hidden">{worldRank ?? r.country.region_name ?? ''}</span>
          </span>
        </Link>
        <div className="hidden min-w-0 items-center sm:flex" aria-hidden>
          <div className="h-3.5 min-w-0 flex-1" style={{ maxHeight: MARK.barMax }}>
            <div className={cn('h-full', highlight ? 'bg-accent' : 'bg-series-1')} style={{ width: `${pct}%`, minWidth: isNum(r.value) ? 2 : 0, borderRadius: `0 ${MARK.barRadius}px ${MARK.barRadius}px 0`, opacity: highlight ? 1 : 0.85 }} />
          </div>
        </div>
        <button type="button" onClick={onValue} className="tnum -mx-1 inline-flex min-h-[44px] flex-col items-end justify-center rounded-sm px-1 text-right text-sm font-medium leading-tight text-ink hover:bg-surface-2 sm:min-h-[36px]" aria-label={`${r.country.name}: ${value} (${r.year ?? ''}). ${t('common.openProvenance')}`}>
          <span>{value}</span>
          {stale ? <span className="tnum rounded-xs bg-surface-2 px-1 text-2xs font-normal text-ink-2">{stale}</span> : null}
        </button>
        <span className="hidden justify-end sm:flex">
          <ChangeChip change={r.change_1y} spec={spec} showVs={false} />
        </span>
        <span className="hidden justify-end sm:flex">
          <ChangeChip change={r.change_10y} spec={spec} showVs={false} />
        </span>
        <span className="hidden justify-end sm:flex">{points.length >= 2 ? <Sparkline points={points} width={64} height={20} direction={dir} className="opacity-90" /> : <span className="inline-block h-5 w-16" />}</span>
      </div>
      {/* Phone: bar + changes + sparkline on a second line */}
      <div className="mt-1 grid grid-cols-[2.25rem_minmax(0,1fr)_auto] items-center gap-x-3 sm:hidden">
        <span />
        <div className="h-2 min-w-0 overflow-hidden rounded-xs bg-surface-2" aria-hidden>
          <div className={cn('h-full rounded-r-xs', highlight ? 'bg-accent' : 'bg-series-1')} style={{ width: `${pct}%`, opacity: highlight ? 1 : 0.85 }} />
        </div>
        <span className="flex items-center gap-2 text-2xs">
          <ChangeChip change={r.change_1y} spec={spec} showVs={false} />
          {points.length >= 2 ? <Sparkline points={points} width={44} height={16} direction={dir} className="opacity-90" /> : null}
        </span>
      </div>
    </li>
  );
}


/** Map view of the (filtered) ranking rows: quantile classes computed client-side, highlighted country outlined. */
function RankingMap({ rows, geometry, sphere, spec, year, highlight }: { rows: RankingRow[]; geometry: BaseFeature[]; sphere: string; spec: RankingResponse['indicator']; year: number | null; highlight: string | null }) {
  const model = useMemo(() => {
    const values = new Map(rows.filter((r) => isNum(r.value)).map((r) => [r.country.id, r.value as number]));
    const sorted = Array.from(values.values()).sort((a, b) => a - b);
    const k = sorted.length >= 40 ? 6 : Math.max(3, Math.min(5, sorted.length));
    const breaks: number[] = [];
    for (let i = 1; i < k; i++) {
      const pos = (i / k) * (sorted.length - 1);
      const lo = Math.floor(pos);
      const hi = Math.min(lo + 1, sorted.length - 1);
      const v = sorted[lo]! + (sorted[hi]! - sorted[lo]!) * (pos - lo);
      if (!breaks.length || v > breaks[breaks.length - 1]!) breaks.push(v);
    }
    const features: ChoroplethFeature[] = geometry.map((g) => {
      const v = g.iso3 ? values.get(g.iso3) : undefined;
      return { ...g, value: v ?? null, cls: v != null ? classFor(v, breaks) : null };
    });
    const fs = { format: spec.format, unit: spec.unit, unit_short: spec.unit_short, precision: spec.precision, name: spec.short_name ?? spec.name };
    return { features, legend: legendFromBreaks(breaks, sorted[0] ?? null, sorted[sorted.length - 1] ?? null, fs), k: breaks.length + 1, fs, n: values.size, min: sorted[0], max: sorted[sorted.length - 1] };
  }, [rows, geometry, spec]);
  return (
    <div className="py-2">
      <ChoroplethView features={model.features} sphere={sphere} legend={model.legend} k={model.k} spec={model.fs} summary={t('chart.summary.map', { name: model.fs.name ?? '', year: year ?? '', n: model.n, min: formatValue(model.min ?? null, model.fs), max: formatValue(model.max ?? null, model.fs) })} title={t('chart.map.legend', { name: model.fs.name ?? '', year: year ?? '' })} compact selectedId={highlight} />
    </div>
  );
}