'use client';
import { Maximize2 } from 'lucide-react';
import Link from 'next/link';
import { useMemo, useState } from 'react';
import { t } from '@/i18n';
import { formatValue, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import type { FormatSpec } from '@/lib/types';
import type { FramesResponse } from '@/lib/types-analytics';
import { ChoroplethView, classFor, legendFromBreaks, type ChoroplethFeature } from '@/components/charts/choropleth-view';
import { SourceLine } from '@/components/charts/source-line';
import { YearSlider } from '@/components/controls/year-slider';
import type { ProvenancePayload } from '@/components/data/provenance-context';
import { EmptyState } from '@/components/data/empty-state';

/** Geometry the server computes once (no values): one entry per drawn country. */
export interface BaseFeature {
  iso3: string | null;
  name: string;
  slug: string | null;
  flag: string | null;
  d: string;
}

/**
 * Indicator world map with a time machine: every year comes from one `/indicators/{slug}/frames` payload
 * (pooled quantile legend, so colours stay comparable while scrubbing), so the slider and play button need no
 * further requests. Click/tap → country page. Hatched = no data for the selected year.
 */
export function IndicatorMap({ slug, geometry, sphere, frames, spec, payload, initialYear }: { slug: string; geometry: BaseFeature[]; sphere: string; frames: FramesResponse | null; spec: FormatSpec; payload: ProvenancePayload | null; initialYear?: number | null }) {
  const years = frames?.years ?? [];
  const [year, setYear] = useState<number>(initialYear && years.includes(initialYear) ? initialYear : years[years.length - 1] ?? new Date().getUTCFullYear());
  const idx = years.indexOf(year);

  const { features, legend, k, n } = useMemo(() => {
    if (!frames || idx < 0) return { features: [] as ChoroplethFeature[], legend: [], k: 1, n: 0 };
    const breaks = frames.legend.breaks.slice(0, 6);
    let count = 0;
    const feats: ChoroplethFeature[] = geometry.map((g) => {
      const v = g.iso3 ? frames.values[g.iso3]?.[idx] : undefined;
      if (typeof v === 'number') count++;
      return { ...g, value: typeof v === 'number' ? v : null, cls: typeof v === 'number' ? classFor(v, breaks) : null };
    });
    return { features: feats, legend: legendFromBreaks(breaks, frames.legend.min, frames.legend.max, spec), k: breaks.length + 1, n: count };
  }, [frames, idx, geometry, spec]);

  if (!frames || !years.length) return <EmptyState compact title={t('indicator.map.none', { year })} hint={t('indicator.nodata.why')} />;
  const summary = t('chart.summary.map', { name: spec.name ?? slug, year, n, min: formatValue(frames.legend.min, spec), max: formatValue(frames.legend.max, spec) });
  const title = t('chart.map.legend', { name: spec.name ?? slug, year });

  return (
    <div className="min-w-0">
      {n === 0 ? <EmptyState compact title={t('indicator.map.none', { year })} /> : <ChoroplethView features={features} sphere={sphere} legend={legend} k={k} spec={spec} summary={summary} title={title} compact />}
      <div className="mt-3 flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
        <YearSlider years={years} year={year} onChange={setYear} className="min-w-0 flex-1" interval={600} />
        <div className="flex shrink-0 flex-wrap items-center gap-x-3 text-xs text-ink-3">
          <span className="tnum">
            {years[0]}–{years[years.length - 1]} · {t('indicator.map.n', { n: grouped(n) })}
          </span>
          <Link href={routes.explore({ indicator: slug, year })} className="inline-flex min-h-[44px] items-center gap-1.5 text-sm text-accent hover:underline md:min-h-[32px]">
            <Maximize2 size={14} aria-hidden />
            {t('home.map.openExplorer')}
          </Link>
        </div>
      </div>
      <p className="mt-1 text-2xs text-ink-3">{t('indicator.map.legendNote')}</p>
      <div className="mt-1">
        <SourceLine provenance={frames.provenance} payload={payload} />
      </div>
    </div>
  );
}