'use client';
import { BarChart3, ChevronDown, ChevronUp, Globe2, Info, LineChart as LineIcon, Sigma, Table2 } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { t } from '@/i18n';
import { clientAnalytics } from '@/lib/client-api-analytics';
import { cn } from '@/lib/cn';
import { formatValue, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import { useUrlState } from '@/lib/url-state';
import type { FormatSpec } from '@/lib/types';
import type { FramesResponse, PointCountry } from '@/lib/types-analytics';
import type { RegionItem } from '@/lib/types-explore';
import { IndicatorSelect, Segmented, type IndicatorOption } from '@/components/controls/indicator-select';
import { YearSlider } from '@/components/controls/year-slider';
import { BottomSheet } from '@/components/data/bottom-sheet';
import { EntityPicker } from '@/components/explore/entity-picker';
import type { BaseFeature } from '@/components/indicators/indicator-map';
import { useProvenance } from '@/components/data/provenance-context';
import { classIndex } from './geo';
import { DEFAULT_EXPLORER_INDICATOR, type ExplorerView } from './options';
import { useIsDesktop } from './use-media';
import { MapCanvas, type MapHover } from './map-canvas';
import { ClassLegend, CountryPanel, MapTooltip, type CountryYearInfo } from './explorer-panels';
import { DistributionView, RankView, TrendView, type YearRow } from './explorer-views';

const QUICK = ['population', 'gdp', 'gdp-per-capita-ppp', 'gdp-growth', 'inflation', 'life-expectancy', 'fertility-rate', 'internet-users', 'co2-per-capita', 'renewable-electricity-share', 'unemployment-rate', 'population-growth'];

export interface ExplorerProps {
  features: BaseFeature[];
  sphere: string;
  countries: PointCountry[];
  indicators: IndicatorOption[];
  groups: RegionItem[];
  initial: FramesResponse | null;
  initialState: { indicator: string; year: number | null; view: ExplorerView; country: string | null; group: string };
}

function specOf(fr: FramesResponse | null, fallbackName: string): FormatSpec {
  const i = fr?.indicator;
  return { format: i?.format ?? 'number', unit: i?.unit, unit_short: i?.unit_short, precision: i?.precision, frequency: 'A', name: i?.short_name ?? i?.name ?? fallbackName, higher_is_better: i?.higher_is_better };
}

/**
 * World Explorer: indicator × year × view, all in the URL. One /frames request per indicator (cached in state)
 * feeds the map, the rank list, the trend and the distribution — no further requests while scrubbing.
 */
export function WorldExplorer({ features, sphere, countries, indicators, groups, initial, initialState }: ExplorerProps) {
  const router = useRouter();
  const { get, getNum, set } = useUrlState();
  const { open: openProv } = useProvenance();
  const indicator = get('indicator') ?? initialState.indicator;
  const group = get('group') ?? initialState.group;
  const view = ((get('view') as ExplorerView | null) ?? initialState.view) as ExplorerView;
  const selectedId = (get('country') ?? initialState.country)?.toUpperCase() ?? null;
  const cacheKey = `${indicator}|${group}`;
  const [cache, setCache] = useState<Record<string, FramesResponse | null>>(() => (initial ? { [`${initialState.indicator}|${initialState.group}`]: initial } : {}));
  const [loading, setLoading] = useState(false);
  const [hover, setHover] = useState<MapHover | null>(null);
  const [focus, setFocus] = useState<string | null>(null);
  const [sheet, setSheet] = useState<'country' | 'table' | null>(null);
  const [legendOpen, setLegendOpen] = useState(false);
  const [playing, setPlaying] = useState(false);
  const abort = useRef<AbortController | null>(null);
  const desktop = useIsDesktop();

  useEffect(() => {
    if (cache[cacheKey] !== undefined) return;
    abort.current?.abort();
    const ctrl = new AbortController();
    abort.current = ctrl;
    setLoading(true);
    clientAnalytics
      .indicatorFrames(indicator, { group: group !== 'world' ? group : null }, ctrl.signal)
      .then((r) => setCache((c) => ({ ...c, [cacheKey]: r })))
      .catch((e) => {
        if ((e as Error).name !== 'AbortError') setCache((c) => ({ ...c, [cacheKey]: null }));
      })
      .finally(() => {
        if (!ctrl.signal.aborted) setLoading(false);
      });
    return () => ctrl.abort();
  }, [cacheKey, indicator, group, cache]);

  const frames = cache[cacheKey] ?? null;
  const years = frames?.years ?? [];
  const urlYear = getNum('year') ?? initialState.year;
  const year = years.length ? (urlYear != null && years.includes(urlYear) ? urlYear : years[years.length - 1]!) : (urlYear ?? new Date().getUTCFullYear());
  const yi = years.indexOf(year);
  const spec = useMemo(() => specOf(frames, indicators.find((i) => i.slug === indicator)?.name ?? indicator), [frames, indicators, indicator]);
  const byId = useMemo(() => new Map(countries.map((c) => [c.id, c])), [countries]);
  const breaks = frames?.legend.breaks ?? [];
  const k = breaks.length + 1;

  /** Values of the current year, ranks (world + region) and the class per country. */
  const yearData = useMemo(() => {
    const rows: YearRow[] = [];
    const cls = new Map<string, number | null>();
    if (!frames || yi < 0) return { rows, cls, rankOf: new Map<string, { world: number; region: number | null; nRegion: number }>() };
    for (const [iso, arr] of Object.entries(frames.values)) {
      const v = arr[yi];
      const c = byId.get(iso);
      if (v != null && Number.isFinite(v) && c) rows.push({ country: c, value: v, rank: 0 });
      cls.set(iso, v != null && Number.isFinite(v) ? classIndex(v, breaks) : null);
    }
    const desc = spec.higher_is_better !== false;
    rows.sort((a, b) => (desc ? b.value - a.value : a.value - b.value));
    const rankOf = new Map<string, { world: number; region: number | null; nRegion: number }>();
    const regionCount = new Map<string, number>();
    rows.forEach((r, i) => {
      r.rank = i + 1;
      const reg = r.country.region ?? '';
      const rr = (regionCount.get(reg) ?? 0) + 1;
      regionCount.set(reg, rr);
      rankOf.set(r.country.id, { world: i + 1, region: reg ? rr : null, nRegion: 0 });
    });
    for (const [iso, info] of rankOf) info.nRegion = regionCount.get(byId.get(iso)?.region ?? '') ?? 0;
    return { rows, cls, rankOf };
  }, [frames, yi, byId, breaks, spec.higher_is_better]);

  const infoFor = useCallback(
    (iso: string): CountryYearInfo | null => {
      const c = byId.get(iso);
      if (!c) return null;
      const arr = frames?.values[iso] ?? [];
      const series = years.map((y, i) => ({ period: `${y}-01-01`, year: y, value: arr[i] ?? null })).filter((p) => p.value != null);
      const rk = yearData.rankOf.get(iso);
      const last = series[series.length - 1];
      return {
        country: c,
        value: yi >= 0 ? arr[yi] ?? null : null,
        year,
        rankWorld: rk?.world ?? null,
        nWorld: yearData.rows.length,
        rankRegion: rk?.region ?? null,
        nRegion: rk?.nRegion ?? 0,
        series,
        firstYear: series[0]?.year ?? null,
        lastYear: last?.year ?? null,
        latestValue: last?.value ?? null,
        latestYear: last?.year ?? null,
      };
    },
    [byId, frames, years, yearData, yi, year],
  );

  const selected = selectedId ? infoFor(selectedId) : null;
  const hoverInfo = hover ? infoFor(hover.iso3) : null;
  const indicatorName = frames?.indicator.name ?? spec.name ?? indicator;

  const setIndicator = (slug: string) => set({ indicator: slug === DEFAULT_EXPLORER_INDICATOR ? null : slug }, 0);
  const setYear = (y: number) => set({ year: years.length && y === years[years.length - 1] ? null : y }, playing ? 250 : 80);
  const setView = (v: ExplorerView) => set({ view: v === 'map' ? null : v }, 0);
  const selectCountry = (iso: string | null) => {
    set({ country: iso ? iso.toLowerCase() : null }, 0);
    if (iso) setSheet('country');
    else setSheet(null);
  };
  const openCountry = (iso: string) => {
    const c = byId.get(iso);
    if (c?.slug) router.push(routes.country(c.slug));
  };
  const flyTo = (iso: string) => {
    setFocus(null);
    requestAnimationFrame(() => setFocus(iso));
    selectCountry(iso);
  };

  const viewOptions = [
    { value: 'map' as const, label: t('explorer.view.map'), icon: <Globe2 size={14} aria-hidden /> },
    { value: 'rank' as const, label: t('explorer.view.rank'), icon: <BarChart3 size={14} aria-hidden /> },
    { value: 'trend' as const, label: t('explorer.view.trend'), icon: <LineIcon size={14} aria-hidden /> },
    { value: 'distribution' as const, label: t('explorer.view.distribution'), icon: <Sigma size={14} aria-hidden /> },
  ];
  const groupOptions = useMemo(() => [{ slug: 'world', name: t('common.world'), kind: 'world' }, ...groups.filter((g) => g.kind === 'region' || g.kind === 'income' || g.kind === 'continent' || g.kind === 'org').map((g) => ({ slug: g.slug ?? g.id, name: g.name ?? g.id, kind: g.kind ?? 'org' }))], [groups]);
  const nYear = yearData.rows.length;
  const compareHref = selected ? routes.compare(selected.country.slug ?? selected.country.id.toLowerCase()) : routes.compare();
  const trajHref = selected ? routes.trajectories({ year, group: group !== 'world' ? group : null }) + `&select=${selected.country.id}` : routes.trajectories();

  const provPayload = frames
    ? {
        indicator: { slug: indicator, name: indicatorName, format: spec.format, unit: spec.unit, unit_short: spec.unit_short, precision: spec.precision, frequency: 'A' as const, higher_is_better: spec.higher_is_better },
        value: null,
        country: null,
        downloadHref: routes.indicatorDownload(indicator),
      }
    : null;

  const countryPanel = selected ? <CountryPanel info={selected} spec={spec} indicatorSlug={indicator} indicatorName={indicatorName} provenance={frames?.provenance ?? null} onClose={() => selectCountry(null)} onCompareHref={compareHref} trajectoriesHref={trajHref} closeClassName="hidden md:grid" /> : null;

  const legend = frames ? <ClassLegend breaks={breaks} min={frames.legend.min} max={frames.legend.max} spec={spec} k={k} /> : null;

  return (
    <div className="flex h-[calc(100dvh-52px)] min-h-[520px] flex-col bg-paper md:h-[calc(100dvh-56px)] md:flex-row" data-testid="world-explorer">
      {/* Left rail (desktop) */}
      <aside className="hidden w-[19rem] shrink-0 flex-col border-r border-rule md:flex" aria-label={t('explorer.rail')}>
        <div className="space-y-3 p-4">
          <div>
            <h1 className="display text-xl text-ink">{t('explorer.title')}</h1>
            <p className="mt-0.5 text-xs text-ink-3">{t('explorer.lede')}</p>
          </div>
          <IndicatorSelect options={indicators} value={indicator} onChange={setIndicator} label={t('control.indicator')} size="sm" />
          <label className="flex h-9 items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2">
            <span className="text-2xs uppercase tracking-wide text-ink-3">{t('explorer.group')}</span>
            <select value={group} onChange={(e) => set({ group: e.target.value === 'world' ? null : e.target.value }, 0)} className="min-w-0 flex-1 truncate bg-transparent text-ink outline-none" aria-label={t('explorer.group')}>
              {groupOptions.map((g) => (
                <option key={g.slug} value={g.slug}>
                  {g.name}
                </option>
              ))}
            </select>
          </label>
          <EntityPicker type="country" placeholder={t('explorer.searchCountry')} onPick={(e) => flyTo(e.id)} size="sm" />
        </div>
        <div className="min-h-0 flex-1 overflow-y-auto border-t border-rule px-4 py-3">
          <div className="eyebrow mb-1.5">{t('explorer.quick')}</div>
          <ul className="flex flex-wrap gap-1">
            {QUICK.filter((q) => indicators.some((i) => i.slug === q)).map((q) => {
              const o = indicators.find((i) => i.slug === q)!;
              return (
                <li key={q}>
                  <button type="button" onClick={() => setIndicator(q)} className={cn('inline-flex h-8 items-center rounded-sm border px-2 text-xs', indicator === q ? 'border-ink bg-ink text-paper' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>
                    {o.short_name ?? o.name}
                  </button>
                </li>
              );
            })}
          </ul>
          {frames ? (
            <div className="mt-5">
              <div className="eyebrow mb-1.5">{t('explorer.legendTitle', { name: spec.name ?? '' })}</div>
              <ClassLegend breaks={breaks} min={frames.legend.min} max={frames.legend.max} spec={spec} k={k} className="flex-col items-start gap-y-1.5 [&>li]:text-xs" />
              <p className="mt-2 text-2xs text-ink-3">{t('explorer.legendNote')}</p>
            </div>
          ) : null}
          {frames?.provenance ? (
            <button type="button" onClick={() => provPayload && openProv(provPayload)} className="mt-4 inline-flex min-h-[32px] items-center gap-1 text-left text-2xs text-ink-2 hover:text-accent" aria-label={t('common.openProvenance')}>
              <Info size={12} aria-hidden className="shrink-0" />
              <span className="truncate">
                {t('common.source')}: {[frames.provenance.source_name, frames.provenance.dataset].filter(Boolean).join(' — ')} · {frames.provenance.series_code}
              </span>
            </button>
          ) : null}
        </div>
      </aside>

      {/* Main column */}
      <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
        {/* Top bar */}
        <div className="flex items-center gap-2 border-b border-rule px-3 py-2 md:px-4">
          <div className="min-w-0 flex-1 md:hidden">
            <IndicatorSelect options={indicators} value={indicator} onChange={setIndicator} size="sm" />
          </div>
          <div className="hidden min-w-0 flex-1 items-baseline gap-2 md:flex">
            <h2 className="truncate text-base font-semibold text-ink">{indicatorName}</h2>
            <span className="tnum shrink-0 text-xs text-ink-3">{frames ? t('explorer.countriesYear', { n: grouped(nYear), year }) : loading ? t('common.loading') : ''}</span>
          </div>
          <Segmented value={view} onChange={setView} options={viewOptions.map((o) => ({ ...o, label: o.label }))} label={t('control.view')} size="sm" className="shrink-0 [&>button]:h-11 md:[&>button]:h-8 [&_span]:hidden sm:[&_span]:inline" />
        </div>

        {/* Stage */}
        <div className={cn('relative min-h-0 flex-1', view !== 'map' && 'overflow-y-auto')} aria-busy={loading}>
          {frames === null && !loading ? (
            <div className="grid h-full place-items-center px-6 text-center text-sm text-ink-3">{t('explorer.noFrames', { indicator: indicatorName })}</div>
          ) : view === 'map' ? (
            <>
              <MapCanvas features={features} sphere={sphere} classOf={yearData.cls} k={k} selectedId={selectedId} focusId={focus} onHover={setHover} onSelect={(iso) => selectCountry(iso)} onOpen={openCountry} labelOf={(iso) => `${byId.get(iso)?.name ?? iso}: ${formatValue(frames?.values[iso]?.[yi] ?? null, spec)} (${year})`} className={cn(loading && 'opacity-60 transition-opacity')} />
              {hover && hoverInfo && !(sheet === 'country' && selectedId === hover.iso3) ? <MapTooltip info={hoverInfo} spec={spec} x={hover.x} y={hover.y} sticky={hover.sticky} onOpen={() => selectCountry(hover.iso3)} /> : null}
              {/* Year watermark + count (map only) */}
              <div className="pointer-events-none absolute left-3 top-2 md:left-4">
                <div className="display tnum text-4xl leading-none text-ink/80 md:text-6xl">{year}</div>
                <div className="tnum mt-1 text-2xs text-ink-3 md:text-xs">{t('explorer.countriesYear', { n: grouped(nYear), year })}</div>
              </div>
              {/* Mobile legend (collapsible) */}
              {frames ? (
                <div className="absolute bottom-2 left-2 right-14 md:hidden">
                  <button type="button" onClick={() => setLegendOpen((o) => !o)} aria-expanded={legendOpen} className="inline-flex h-9 items-center gap-1 rounded-sm border border-rule bg-surface/95 px-2 text-xs text-ink-2 shadow-pop">
                    {legendOpen ? <ChevronDown size={14} aria-hidden /> : <ChevronUp size={14} aria-hidden />}
                    {t('common.legend')}
                  </button>
                  {legendOpen ? (
                    <div className="mt-1 rounded-sm border border-rule bg-surface/95 p-2 shadow-pop">
                      <ClassLegend breaks={breaks} min={frames.legend.min} max={frames.legend.max} spec={spec} k={k} compact />
                    </div>
                  ) : null}
                </div>
              ) : null}
              <button type="button" onClick={() => setSheet('table')} className="absolute right-3 top-2 hidden h-8 items-center gap-1 rounded-sm border border-rule bg-surface/95 px-2 text-2xs text-ink-2 shadow-pop hover:text-ink md:inline-flex" aria-label={t('common.viewTable')}>
                <Table2 size={12} aria-hidden /> {t('common.viewTable')}
              </button>
            </>
          ) : view === 'rank' ? (
            <RankView rows={yearData.rows} year={year} spec={spec} selectedId={selectedId} indicatorSlug={indicator} />
          ) : view === 'trend' ? (
            <TrendView years={years} values={frames?.values ?? {}} spec={spec} selected={selected ? { country: selected.country, series: frames?.values[selected.country.id] ?? [] } : null} subject={indicatorName} />
          ) : (
            <DistributionView rows={yearData.rows} year={year} spec={spec} selected={selected ? { country: selected.country, value: selected.value } : null} />
          )}
        </div>

        {/* Time machine */}
        <div className="border-t border-rule bg-paper px-3 py-2 md:px-4 safe-bottom">
          <YearSlider years={years} year={year} onChange={setYear} compact interval={650} onPlayingChange={setPlaying} label={t('explorer.timeMachine')} />
        </div>

        {/* Desktop drawer */}
        {selected ? (
          <div className="absolute right-0 top-[45px] bottom-[57px] z-20 hidden w-[22rem] border-l border-rule bg-surface/95 p-4 shadow-pop backdrop-blur md:block">{countryPanel}</div>
        ) : null}
      </div>

      {/* Phone sheets */}
      <BottomSheet open={!desktop && sheet === 'country' && !!selected} onClose={() => setSheet(null)} side="drawer" title={<span className="sr-only">{selected?.country.name}</span>}>
        {countryPanel}
      </BottomSheet>
      <BottomSheet open={sheet === 'table'} onClose={() => setSheet(null)} side="drawer" title={t('explorer.table.title', { name: spec.name ?? '', year })}>
        <table className="w-full text-sm tnum">
          <caption className="sr-only">{t('explorer.table.title', { name: spec.name ?? '', year })}</caption>
          <thead>
            <tr className="border-b border-rule text-left text-2xs uppercase tracking-wide text-ink-3">
              <th scope="col" className="py-1 pr-2 font-medium">#</th>
              <th scope="col" className="py-1 pr-2 font-medium">{t('common.country')}</th>
              <th scope="col" className="py-1 text-right font-medium">{spec.name}</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-rule">
            {yearData.rows.map((r) => (
              <tr key={r.country.id} className={cn(r.country.id === selectedId && 'bg-accent-soft/50')}>
                <td className="py-1 pr-2 text-ink-3">{r.rank}</td>
                <td className="py-1 pr-2 text-ink">
                  <span aria-hidden>{r.country.flag} </span>
                  {r.country.name}
                </td>
                <td className="py-1 text-right text-ink">{formatValue(r.value, spec)}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {legend ? <div className="mt-3">{legend}</div> : null}
      </BottomSheet>
    </div>
  );
}