'use client';
import { Check, RotateCcw, Share2, SlidersHorizontal, X } 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 { grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import { useUrlState } from '@/lib/url-state';
import type { FormatSpec } from '@/lib/types';
import type { TrajectoryResponse } from '@/lib/types-analytics';
import type { RegionItem } from '@/lib/types-explore';
import { BubbleChart, type BubblePoint } from '@/components/charts/bubble-chart';
import { IndicatorSelect, 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 { useProvenance } from '@/components/data/provenance-context';
import { DEFAULT_TRAJ } from './options';

export interface TrajectoriesState {
  x: string;
  y: string;
  size: string;
  year: number | null;
  group: string;
  select: string[];
}

function specOf(i: TrajectoryResponse['x'] | null | undefined, fallback: string): FormatSpec {
  return { format: i?.format ?? 'number', unit: i?.unit, unit_short: i?.unit_short, precision: i?.precision, frequency: 'A', name: i?.short_name ?? i?.name ?? fallback, higher_is_better: i?.higher_is_better };
}

/** Gapminder-style animated bubbles: one /trajectory payload per (x, y, size, group); the year only re-indexes arrays. */
export function TrajectoriesView({ indicators, groups, initial, initialState }: { indicators: IndicatorOption[]; groups: RegionItem[]; initial: TrajectoryResponse | null; initialState: TrajectoriesState }) {
  const { get, getNum, set } = useUrlState();
  const { open: openProv } = useProvenance();
  const x = get('x') ?? initialState.x;
  const y = get('y') ?? initialState.y;
  const size = get('size') ?? initialState.size;
  const group = get('group') ?? initialState.group;
  const select = useMemo(() => (get('select') ?? initialState.select.join(',')).split(',').map((s) => s.trim().toUpperCase()).filter(Boolean).slice(0, 4), [get, initialState.select]);
  const key = `${x}|${y}|${size}|${group}`;
  const [cache, setCache] = useState<Record<string, TrajectoryResponse | null>>(() => (initial ? { [`${initialState.x}|${initialState.y}|${initialState.size}|${initialState.group}`]: initial } : {}));
  const [loading, setLoading] = useState(false);
  const [sheet, setSheet] = useState(false);
  const [copied, setCopied] = useState(false);
  const [playing, setPlaying] = useState(false);
  const abort = useRef<AbortController | null>(null);
  const [chartH, setChartH] = useState(480);
  useEffect(() => {
    const apply = () => setChartH(Math.max(360, Math.min(640, window.innerHeight - 330)));
    apply();
    window.addEventListener('resize', apply);
    return () => window.removeEventListener('resize', apply);
  }, []);

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

  const data = cache[key] ?? null;
  const years = data?.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 xSpec = specOf(data?.x, x);
  const ySpec = specOf(data?.y, y);
  const sizeSpec = data?.size ? specOf(data.size, size) : null;

  const points: BubblePoint[] = useMemo(() => {
    if (!data || yi < 0) return [];
    return data.countries.map((c) => {
      const s = data.series[c.id];
      return { id: c.id, label: c.name ?? c.id, flag: c.flag, x: s?.x[yi] ?? null, y: s?.y[yi] ?? null, size: s?.size[yi] ?? null, region: c.region, yearX: year, yearY: year };
    });
  }, [data, yi, year]);
  const trails = useMemo(() => {
    const out: Record<string, Array<{ x: number; y: number }>> = {};
    if (!data || yi < 0) return out;
    for (const id of select) {
      const s = data.series[id];
      if (!s) continue;
      const pts: Array<{ x: number; y: number }> = [];
      for (let i = 0; i <= yi; i++) {
        const px = s.x[i];
        const py = s.y[i];
        if (px != null && py != null) pts.push({ x: px, y: py });
      }
      out[id] = pts;
    }
    return out;
  }, [data, select, yi]);
  const byId = useMemo(() => new Map((data?.countries ?? []).map((c) => [c.id, c])), [data]);
  const nYear = points.filter((p) => p.x != null && p.y != null).length;

  const setYear = (v: number) => set({ year: years.length && v === years[years.length - 1] ? null : v }, playing ? 250 : 80);
  const setSelect = (ids: string[]) => set({ select: ids.length ? ids.join(',') : null }, 0);
  const reset = () => set({ x: null, y: null, size: null, group: null, select: null, year: null }, 0);
  const share = async () => {
    try {
      const url = window.location.href;
      if (navigator.share) await navigator.share({ title: document.title, url });
      else {
        await navigator.clipboard.writeText(url);
        setCopied(true);
        setTimeout(() => setCopied(false), 1600);
      }
    } catch {
      /* cancelled */
    }
  };
  const groupOptions = useMemo(() => [{ slug: 'world', name: t('common.world') }, ...groups.filter((g) => ['region', 'income', 'continent', 'org'].includes(g.kind ?? '')).map((g) => ({ slug: g.slug ?? g.id, name: g.name ?? g.id }))], [groups]);
  const sizeOptions: IndicatorOption[] = useMemo(() => [{ slug: 'none', name: t('traj.sizeNone') }, ...indicators.filter((i) => ['population', 'gdp', 'gdp-ppp', 'co2-emissions', 'area-km2', 'labor-force', 'electricity-generation', 'primary-energy-consumption'].includes(i.slug) || i.slug === size)], [indicators, size]);

  const controls = (
    <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
      <IndicatorSelect options={indicators} value={x} onChange={(v) => set({ x: v === DEFAULT_TRAJ.x ? null : v }, 0)} label={t('traj.x')} size="sm" />
      <IndicatorSelect options={indicators} value={y} onChange={(v) => set({ y: v === DEFAULT_TRAJ.y ? null : v }, 0)} label={t('traj.y')} size="sm" />
      <IndicatorSelect options={sizeOptions} value={size} onChange={(v) => set({ size: v === DEFAULT_TRAJ.size ? null : v }, 0)} label={t('traj.size')} size="sm" />
      <label className="flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface px-2.5 text-sm text-ink-2 md:h-9">
        <span className="text-2xs uppercase tracking-wide text-ink-3">{t('traj.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('traj.group')}>
          {groupOptions.map((g) => (
            <option key={g.slug} value={g.slug}>
              {g.name}
            </option>
          ))}
        </select>
      </label>
    </div>
  );
  const follow = (
    <div className="flex flex-wrap items-center gap-1.5">
      <span className="text-2xs uppercase tracking-wide text-ink-3">{t('traj.select')}</span>
      {select.map((id) => {
        const c = byId.get(id);
        return (
          <span key={id} className="inline-flex h-9 items-center gap-1 rounded-sm border border-rule bg-surface pl-2 text-sm">
            <span aria-hidden>{c?.flag}</span>
            <span className="max-w-[8rem] truncate">{c?.name ?? id}</span>
            <button type="button" onClick={() => setSelect(select.filter((s) => s !== id))} className="grid h-9 w-8 place-items-center text-ink-3 hover:text-down" aria-label={t('traj.remove', { name: c?.name ?? id })}>
              <X size={13} aria-hidden />
            </button>
          </span>
        );
      })}
      {select.length < 4 ? <EntityPicker type="country" placeholder={t('traj.selectHint')} onPick={(e) => setSelect(Array.from(new Set([...select, e.id])))} exclude={select} size="sm" className="w-56" /> : null}
    </div>
  );

  return (
    <div className="flex min-h-[calc(100dvh-52px)] flex-col md:min-h-[calc(100dvh-56px)]">
      <div className="container-x mx-auto w-full max-w-[1400px]">
        <header className="flex flex-wrap items-end justify-between gap-x-6 gap-y-2 pb-2 pt-4 md:pt-6">
          <div className="min-w-0">
            <h1 className="display text-2xl text-ink md:text-3xl">{t('traj.title')}</h1>
            <p className="mt-0.5 text-sm text-ink-2">{t('traj.lede')}</p>
          </div>
          <div className="flex items-center gap-1.5 text-sm">
            <button type="button" onClick={() => setSheet(true)} className="inline-flex h-11 items-center gap-1.5 rounded-sm border border-rule px-3 text-ink-2 md:hidden">
              <SlidersHorizontal size={15} aria-hidden /> {t('traj.controls')}
            </button>
            <button type="button" onClick={reset} className="inline-flex h-11 items-center gap-1.5 rounded-sm px-2.5 text-ink-2 hover:bg-surface-2 hover:text-ink md:h-9">
              <RotateCcw size={14} aria-hidden /> <span className="hidden sm:inline">{t('traj.reset')}</span>
            </button>
            <button type="button" onClick={share} className="inline-flex h-11 items-center gap-1.5 rounded-sm border border-rule px-2.5 text-ink-2 hover:text-ink md:h-9" aria-live="polite">
              {copied ? <Check size={14} aria-hidden className="text-up" /> : <Share2 size={14} aria-hidden />} {copied ? t('traj.copied') : t('traj.share')}
            </button>
          </div>
        </header>
        <div className="hidden space-y-2 pb-3 md:block">
          {controls}
          {follow}
        </div>
      </div>

      <div className={cn('container-x mx-auto w-full max-w-[1400px] flex-1 transition-opacity', loading && 'opacity-60')} aria-busy={loading}>
        {data === null && !loading ? (
          <p className="py-16 text-center text-sm text-ink-3">{t('traj.noData')}</p>
        ) : data ? (
          <>
            <BubbleChart points={points} xSpec={xSpec} ySpec={ySpec} sizeSpec={sizeSpec} xDomain={data.domains.x} yDomain={data.domains.y} sizeDomain={data.domains.size} logX={data.log_x} logY={data.log_y} highlight={select} trails={trails} onSelect={(id) => id && setSelect(Array.from(new Set([...select, id])).slice(-4))} height={chartH} yearLabel={year} defaultWidth={1100} />
            <div className="mt-1 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-2xs text-ink-3">
              <span className="tnum">{t('traj.countries', { n: grouped(nYear), y0: years[0] ?? '', y1: years[years.length - 1] ?? '' })}</span>
              <span className="flex flex-wrap items-center gap-x-3">
                <button type="button" onClick={() => openProv({ indicator: { slug: x, name: xSpec.name ?? x, format: xSpec.format, unit: xSpec.unit, frequency: 'A' }, value: null, country: null, downloadHref: routes.indicatorDownload(x) })} className="inline-flex min-h-[32px] items-center hover:text-accent">
                  {t('common.source')}: {data.provenance.map((p) => p.source_name ?? p.source).filter((v, i, a) => v && a.indexOf(v) === i).join(', ')}
                </button>
                <Link href={routes.scatter({ x, y, size: size !== DEFAULT_TRAJ.size ? size : undefined, year, group: group !== 'world' ? group : null })} className="text-accent hover:underline">
                  {t('traj.openScatter')} →
                </Link>
              </span>
            </div>
            <p className="mt-1 text-2xs text-ink-3">{t('traj.note')}</p>
          </>
        ) : (
          <div className="grid min-h-[420px] place-items-center text-sm text-ink-3">{t('common.loading')}</div>
        )}
      </div>

      <div className="sticky bottom-0 z-20 border-t border-rule bg-paper/95 backdrop-blur safe-bottom">
        <div className="container-x mx-auto max-w-[1400px] py-2">
          <YearSlider years={years} year={year} onChange={setYear} interval={450} onPlayingChange={setPlaying} label={t('control.year')} compact />
        </div>
      </div>

      <BottomSheet open={sheet} onClose={() => setSheet(false)} side="center" title={t('traj.controls')}>
        <div className="space-y-4">
          {controls}
          {follow}
        </div>
        <div className="mt-6 flex justify-end">
          <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>
  );
}