'use client';
import { ArrowRight, Maximize2 } from 'lucide-react';
import Link from 'next/link';
import { 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, ordinal } from '@/lib/format';
import { regionShort } from '@/lib/regions';
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 { Sparkline } from '@/components/charts/sparkline';
import { IndicatorSelect, type IndicatorOption } from '@/components/controls/indicator-select';
import { YearSlider } from '@/components/controls/year-slider';
import { BottomSheet } from '@/components/data/bottom-sheet';
import { EmptyState } from '@/components/data/empty-state';
import type { BaseFeature } from '@/components/indicators/indicator-map';

export interface HeroCountry {
  id: string;
  slug: string | null;
  name: string;
  flag: string | null;
  region: string | null;
}

/**
 * Homepage hero map: indicator chips (headline set) + full picker, time machine (frames endpoint, one request per
 * indicator, pooled quantile legend so colours stay comparable while scrubbing), hover label with value · year ·
 * world rank · regional rank, tap/click → quick panel (bottom sheet / drawer) with sparkline and links.
 */
export function HeroMap({ geometry, sphere, initial, options, chips, countries }: { geometry: BaseFeature[]; sphere: string; initial: FramesResponse | null; options: IndicatorOption[]; chips: string[]; countries: HeroCountry[] }) {
  const [slug, setSlug] = useState(initial?.indicator.slug ?? chips[0] ?? 'gdp-per-capita-ppp');
  const [cache, setCache] = useState<Record<string, FramesResponse | null>>(() => (initial ? { [initial.indicator.slug]: initial } : {}));
  const [year, setYear] = useState<number | null>(initial?.years[initial.years.length - 1] ?? null);
  const [selected, setSelected] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const abortRef = useRef<AbortController | null>(null);
  const byId = useMemo(() => new Map(countries.map((c) => [c.id, c])), [countries]);

  useEffect(() => {
    if (cache[slug] !== undefined) return;
    abortRef.current?.abort();
    const ctrl = new AbortController();
    abortRef.current = ctrl;
    setLoading(true);
    clientAnalytics
      .indicatorFrames(slug, {}, ctrl.signal)
      .then((f) => {
        setCache((c) => ({ ...c, [slug]: f }));
        setYear((y) => (y != null && f.years.includes(y) ? y : f.years[f.years.length - 1] ?? null));
      })
      .catch((e) => {
        if ((e as Error).name !== 'AbortError') setCache((c) => ({ ...c, [slug]: null }));
      })
      .finally(() => {
        if (!ctrl.signal.aborted) setLoading(false);
      });
    return () => ctrl.abort();
  }, [slug, cache]);

  const frames = cache[slug] ?? null;
  const yearIdx = frames && year != null ? frames.years.indexOf(year) : -1;
  const spec: FormatSpec | null = frames ? { format: frames.indicator.format, unit: frames.indicator.unit, unit_short: frames.indicator.unit_short, precision: frames.indicator.precision, name: frames.indicator.short_name ?? frames.indicator.name, higher_is_better: frames.indicator.higher_is_better } : null;

  const model = useMemo(() => {
    if (!frames || yearIdx < 0) return null;
    const breaks = frames.legend.breaks.slice(0, 6);
    const values = new Map<string, number>();
    for (const [iso, arr] of Object.entries(frames.values)) {
      const v = arr[yearIdx];
      if (typeof v === 'number') values.set(iso, v);
    }
    const desc = frames.indicator.higher_is_better !== false;
    const sorted = Array.from(values.entries()).sort((a, b) => (desc ? b[1] - a[1] : a[1] - b[1]));
    const rank = new Map<string, number>();
    const regionRank = new Map<string, [number, number]>();
    const regionCount = new Map<string, number>();
    sorted.forEach(([iso], i) => rank.set(iso, i + 1));
    for (const [iso] of sorted) {
      const rg = byId.get(iso)?.region ?? '';
      const n = (regionCount.get(rg) ?? 0) + 1;
      regionCount.set(rg, n);
      regionRank.set(iso, [n, 0]);
    }
    for (const [iso, rr] of regionRank) rr[1] = regionCount.get(byId.get(iso)?.region ?? '') ?? 0;
    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 };
    });
    return { features, breaks, values, rank, regionRank, n: values.size, k: breaks.length + 1 };
  }, [frames, yearIdx, geometry, byId]);

  const legend = useMemo(() => (frames && spec ? legendFromBreaks(frames.legend.breaks.slice(0, 6), frames.legend.min, frames.legend.max, spec) : []), [frames, spec]);
  const sel = selected && byId.get(selected) ? byId.get(selected)! : null;
  const selSeries = selected && frames ? frames.values[selected] ?? null : null;
  const selPoints = selSeries ? frames!.years.map((y, i) => ({ period: `${y}-01-01`, year: y, value: selSeries[i] ?? null })) : [];
  const selValue = selected ? model?.values.get(selected) ?? null : null;
  const summary = frames && spec && year != null && model ? t('chart.summary.map', { name: spec.name, year, n: model.n, min: formatValue(frames.legend.min, spec), max: formatValue(frames.legend.max, spec) }) : t('chart.noData');

  return (
    <div className="min-w-0">
      {/* Indicator switcher */}
      <div className="flex flex-wrap items-center gap-2">
        <ul className="ticker -mx-4 max-w-[calc(100%+2rem)] gap-1.5 px-4 sm:mx-0 sm:max-w-none sm:flex-wrap sm:px-0" aria-label={t('control.indicator')}>
          {chips.map((s) => {
            const o = options.find((x) => x.slug === s);
            if (!o) return null;
            return (
              <li key={s}>
                <button type="button" onClick={() => setSlug(s)} aria-pressed={slug === s} className={cn('inline-flex h-10 items-center whitespace-nowrap rounded-sm border px-3 text-sm md:h-8 md:px-2.5 md:text-xs', slug === s ? '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>
        <IndicatorSelect options={options} value={slug} onChange={setSlug} size="sm" className="w-full sm:ml-auto sm:w-72" align="right" />
      </div>

      <div className={cn('relative mt-3 transition-opacity', loading && 'opacity-60')} aria-busy={loading}>
        {frames === null ? (
          <EmptyState title={t('home.map.unavailable')} hint={t('indicator.nodata.why')} />
        ) : model && spec ? (
          <ChoroplethView
            features={model.features}
            sphere={sphere}
            legend={legend}
            k={model.k}
            spec={spec}
            summary={summary}
            title={t('chart.map.legend', { name: spec.name, year: year ?? '' })}
            compact
            selectedId={selected}
            onSelect={(f) => f.iso3 && setSelected(f.iso3)}
            renderLabel={(f) => {
              const r = f.iso3 ? model.rank.get(f.iso3) : undefined;
              const rr = f.iso3 ? model.regionRank.get(f.iso3) : undefined;
              const c = f.iso3 ? byId.get(f.iso3) : undefined;
              return (
                <div className="tnum text-ink-2">
                  <div>
                    <span className="font-semibold text-ink">{formatValue(f.value, spec)}</span> <span className="text-ink-3">{year}</span>
                  </div>
                  {r ? (
                    <div className="text-2xs text-ink-3">
                      {t('home.map.world', { rank: r, n: model.n })}
                      {rr && c?.region ? ` · ${t('home.map.region', { rank: rr[0], n: rr[1], region: regionShort(c.region) ?? c.region })}` : ''}
                    </div>
                  ) : null}
                </div>
              );
            }}
          />
        ) : (
          <div className="grid aspect-[960/470] w-full place-items-center rounded-sm bg-map-water text-sm text-ink-3">{t('common.loading')}</div>
        )}
      </div>

      {/* Time machine */}
      {frames && year != null ? (
        <div className="mt-3 flex flex-col gap-3 md:flex-row md:items-center md:gap-6">
          <YearSlider years={frames.years} year={year} onChange={setYear} className="min-w-0 flex-1" interval={600} />
          <div className="flex shrink-0 items-center gap-3 text-xs text-ink-3">
            <span className="tnum">{t('indicator.map.n', { n: grouped(model?.n ?? 0) })}</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>
      ) : null}

      {/* Quick panel */}
      <BottomSheet open={!!sel} onClose={() => setSelected(null)} side="drawer" title={sel ? `${sel.flag ?? ''} ${sel.name}`.trim() : ''}>
        {sel && spec && frames ? (
          <div className="space-y-4 text-sm">
            <div>
              <div className="eyebrow">{spec.name}</div>
              <div className="mt-1 flex flex-wrap items-baseline gap-x-3">
                <span className="pnum text-3xl font-semibold text-ink">{formatValue(selValue, spec)}</span>
                <span className="tnum text-ink-3">{year}</span>
              </div>
              {model?.rank.get(sel.id) ? (
                <p className="tnum mt-1 text-xs text-ink-2">
                  {t('metric.rankWorld', { rank: ordinal(model.rank.get(sel.id)!), n: grouped(model.n) })}
                  {model.regionRank.get(sel.id) && sel.region ? ` · ${t('metric.rankRegion', { rank: ordinal(model.regionRank.get(sel.id)![0]), region: regionShort(sel.region) ?? sel.region })}` : ''}
                </p>
              ) : (
                <p className="mt-1 text-xs text-ink-3">{t('home.map.noValue', { year: year ?? '' })}</p>
              )}
            </div>
            {selPoints.filter((p) => p.value != null).length >= 2 ? (
              <div>
                <div className="eyebrow mb-1">{t('home.map.history', { y0: frames.years[0] ?? '', y1: frames.years[frames.years.length - 1] ?? '' })}</div>
                <Sparkline points={selPoints} width={360} height={72} className="h-[72px] w-full" ariaLabel={t('metric.history')} />
              </div>
            ) : null}
            <div className="flex flex-wrap gap-2 pt-1">
              {sel.slug ? (
                <Link href={routes.country(sel.slug)} className="tap inline-flex items-center gap-1.5 rounded-sm bg-ink px-3 text-sm font-medium text-paper hover:bg-accent hover:text-accent-ink">
                  {t('home.map.openCountry')} <ArrowRight size={14} aria-hidden />
                </Link>
              ) : null}
              {sel.slug ? (
                <Link href={routes.compare(sel.slug)} className="tap inline-flex items-center rounded-sm border border-rule px-3 text-sm hover:bg-surface-2">
                  {t('common.compare')}
                </Link>
              ) : null}
              <Link href={routes.explore({ indicator: slug, year, country: sel.id })} className="tap inline-flex items-center rounded-sm border border-rule px-3 text-sm hover:bg-surface-2">
                {t('home.map.openExplorer')}
              </Link>
            </div>
          </div>
        ) : null}
      </BottomSheet>
    </div>
  );
}