'use client';
import { ArrowRight, 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 { fixed, formatValue, grouped } from '@/lib/format';
import { regionShort } from '@/lib/regions';
import { routes } from '@/lib/site';
import { useUrlState } from '@/lib/url-state';
import type { FormatSpec } from '@/lib/types';
import type { RelatedResponse, ScatterResponse } from '@/lib/types-analytics';
import type { RegionItem } from '@/lib/types-explore';
import { BubbleChart, type BubbleFit, type BubblePoint } from '@/components/charts/bubble-chart';
import { IndicatorSelect, type IndicatorOption } from '@/components/controls/indicator-select';
import { useProvenance } from '@/components/data/provenance-context';
import { DEFAULT_TRAJ } from './options';
import { useIsDesktop } from './use-media';
import { BottomSheet } from '@/components/data/bottom-sheet';

export interface ScatterState {
  x: string;
  y: string;
  size: string;
  year: number | null;
  group: string;
  log: string | null;
  fit: boolean;
  country: string | null;
}

function specOf(i: ScatterResponse['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 };
}

/** Cross-section scatter with descriptive statistics; every control is in the URL. */
export function ScatterView({ indicators, groups, initial, initialRelated, initialState }: { indicators: IndicatorOption[]; groups: RegionItem[]; initial: ScatterResponse | null; initialRelated: RelatedResponse | null; initialState: ScatterState }) {
  const { get, getNum, set } = useUrlState();
  const { open: openProv } = useProvenance();
  const desktop = useIsDesktop();
  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 year = getNum('year') ?? initialState.year;
  const logParam = get('log') ?? initialState.log;
  const fit = (get('fit') ?? (initialState.fit ? '1' : null)) === '1';
  const selected = (get('country') ?? initialState.country)?.toUpperCase() ?? null;
  const logX = logParam == null ? null : logParam.includes('x');
  const logY = logParam == null ? null : logParam.includes('y');
  const key = `${x}|${y}|${size}|${group}|${year ?? ''}|${logParam ?? ''}`;
  const [cache, setCache] = useState<Record<string, ScatterResponse | null>>(() => (initial ? { [`${initialState.x}|${initialState.y}|${initialState.size}|${initialState.group}|${initialState.year ?? ''}|${initialState.log ?? ''}`]: initial } : {}));
  const [related, setRelated] = useState<Record<string, RelatedResponse | null>>(() => (initialRelated ? { [initialState.x]: initialRelated } : {}));
  const [loading, setLoading] = useState(false);
  const abort = useRef<AbortController | null>(null);

  useEffect(() => {
    if (cache[key] !== undefined) return;
    abort.current?.abort();
    const ctrl = new AbortController();
    abort.current = ctrl;
    setLoading(true);
    clientAnalytics
      .scatter({ x, y, size: size === 'none' ? 'none' : size, year, group: group !== 'world' ? group : null, log_x: logX == null ? null : String(logX), log_y: logY == null ? null : String(logY) }, 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, year, logX, logY, cache]);

  useEffect(() => {
    if (related[x] !== undefined) return;
    const ctrl = new AbortController();
    clientAnalytics
      .indicatorRelated(x, 8, ctrl.signal)
      .then((r) => setRelated((c) => ({ ...c, [x]: r })))
      .catch(() => setRelated((c) => ({ ...c, [x]: null })));
    return () => ctrl.abort();
  }, [x, related]);

  const data = cache[key] ?? null;
  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(() => (data?.points ?? []).map((p) => ({ id: p.id, label: p.name ?? p.id, flag: p.flag, x: p.x, y: p.y, size: p.size, region: p.region, yearX: p.year_x, yearY: p.year_y })), [data]);
  const fitLine: BubbleFit | null = fit && data?.stats.ols ? { slope: data.stats.ols.slope, intercept: data.stats.ols.intercept, logX: data.stats.log_x, logY: data.stats.log_y } : null;
  const sel = selected ? data?.points.find((p) => p.id === selected) ?? null : null;
  const xOpt = indicators.find((i) => i.slug === x);
  const yOpt = indicators.find((i) => i.slug === y);
  const yearRange = useMemo(() => {
    const lo = Math.max(xOpt?.first_year ?? 1960, yOpt?.first_year ?? 1960);
    const hi = Math.min(xOpt?.last_year ?? 2025, yOpt?.last_year ?? 2025);
    const out: number[] = [];
    for (let yy = hi; yy >= lo; yy--) out.push(yy);
    return out;
  }, [xOpt, yOpt]);
  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', 'labor-force', 'electricity-generation'].includes(i.slug) || i.slug === size)], [indicators, size]);
  const setLog = (axis: 'x' | 'y', on: boolean) => {
    const cur = new Set((logParam ?? `${data?.stats.log_x ? 'x' : ''}${data?.stats.log_y ? 'y' : ''}`).split(''));
    if (on) cur.add(axis);
    else cur.delete(axis);
    const v = ['x', 'y'].filter((a) => cur.has(a)).join(',');
    set({ log: v || 'none' }, 0);
  };
  const effLogX = data?.stats.log_x ?? false;
  const effLogY = data?.stats.log_y ?? false;
  const rel = related[x] ?? null;
  const country = sel ? { id: sel.id, slug: sel.slug, name: sel.name ?? sel.id, flag: sel.flag } : null;

  const selPanel = sel ? (
    <div className="text-sm">
      <div className="flex items-start gap-2">
        <span aria-hidden className="text-3xl leading-none">
          {sel.flag}
        </span>
        <div className="min-w-0 flex-1">
          <div className="display text-lg text-ink">{sel.name}</div>
          <div className="text-xs text-ink-3">{regionShort(sel.region) ?? sel.region}</div>
        </div>
        <button type="button" onClick={() => set({ country: null }, 0)} className="tap -mr-2 grid place-items-center text-ink-2 md:min-h-[32px] md:min-w-[32px]" aria-label={t('common.close')}>
          <X size={16} aria-hidden />
        </button>
      </div>
      <dl className="mt-3 divide-y divide-rule border-y border-rule">
        {[
          { spec: xSpec, v: sel.x, yr: sel.year_x, slug: x },
          { spec: ySpec, v: sel.y, yr: sel.year_y, slug: y },
          ...(sizeSpec ? [{ spec: sizeSpec, v: sel.size, yr: null, slug: size }] : []),
        ].map((row) => (
          <div key={row.slug} className="flex items-baseline justify-between gap-3 py-2">
            <dt className="text-ink-2">{row.spec.name}</dt>
            <dd className="tnum text-right">
              <button type="button" onClick={() => openProv({ indicator: { slug: row.slug, name: row.spec.name ?? row.slug, format: row.spec.format, unit: row.spec.unit, unit_short: row.spec.unit_short, precision: row.spec.precision, frequency: 'A' }, value: { value: row.v, period: row.yr ? `${row.yr}-01-01` : null, year: row.yr, unit: row.spec.unit, provenance: data?.provenance?.[0] ?? null }, country })} className="font-semibold text-ink hover:text-accent" aria-label={t('common.openProvenance')}>
                {formatValue(row.v, row.spec)}
              </button>
              {row.yr ? <span className="text-ink-3"> · {row.yr}</span> : null}
            </dd>
          </div>
        ))}
      </dl>
      <Link href={routes.country(sel.slug ?? sel.id.toLowerCase())} className="mt-3 inline-flex min-h-[44px] items-center gap-1 text-accent hover:underline md:min-h-[32px]">
        {t('explorer.drawer.open')} <ArrowRight size={14} aria-hidden />
      </Link>
    </div>
  ) : null;

  return (
    <div>
      <header className="pb-3 pt-6 md:pt-10">
        <h1 className="display text-3xl leading-tight text-ink md:text-4xl">{t('scatter.title')}</h1>
        <p className="mt-2 max-w-prose text-sm text-ink-2 md:text-base">{t('scatter.lede')}</p>
      </header>
      <div className="grid grid-cols-1 gap-2 border-y border-rule py-3 sm:grid-cols-2 lg:grid-cols-[1fr_1fr_1fr_9rem_10rem]">
        <IndicatorSelect options={indicators} value={x} onChange={(v) => set({ x: v === DEFAULT_TRAJ.x ? null : v, log: null }, 0)} label={t('traj.x')} size="sm" />
        <IndicatorSelect options={indicators} value={y} onChange={(v) => set({ y: v === DEFAULT_TRAJ.y ? null : v, log: null }, 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('scatter.year')}</span>
          <select value={data?.year_used ?? year ?? ''} onChange={(e) => set({ year: Number(e.target.value) }, 0)} className="tnum min-w-0 flex-1 bg-transparent text-ink outline-none" aria-label={t('scatter.year')}>
            {yearRange.map((yy) => (
              <option key={yy} value={yy}>
                {yy}
              </option>
            ))}
          </select>
        </label>
        <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>
      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 py-2 text-sm">
        <label className="inline-flex h-11 items-center gap-1.5 text-ink-2 md:h-8">
          <input type="checkbox" checked={effLogX} onChange={(e) => setLog('x', e.target.checked)} className="accent-[var(--accent)]" /> {t('scatter.logX')}
        </label>
        <label className="inline-flex h-11 items-center gap-1.5 text-ink-2 md:h-8">
          <input type="checkbox" checked={effLogY} onChange={(e) => setLog('y', e.target.checked)} className="accent-[var(--accent)]" /> {t('scatter.logY')}
        </label>
        <label className="inline-flex h-11 items-center gap-1.5 text-ink-2 md:h-8">
          <input type="checkbox" checked={fit} onChange={(e) => set({ fit: e.target.checked ? '1' : null }, 0)} className="accent-[var(--accent)]" /> {t('scatter.fit')}
        </label>
        <Link href={routes.trajectories({ x, y, size: size !== DEFAULT_TRAJ.size ? size : undefined, year: data?.year_used ?? year, group: group !== 'world' ? group : null })} className="ml-auto inline-flex min-h-[44px] items-center text-accent hover:underline md:min-h-[32px]">
          {t('scatter.openTrajectories')} →
        </Link>
      </div>

      <div className="grid gap-x-8 lg:grid-cols-[minmax(0,1fr)_18rem]">
        <div className={cn('min-w-0 transition-opacity', loading && 'opacity-60')} aria-busy={loading}>
          {data === null && !loading ? (
            <p className="py-16 text-center text-sm text-ink-3">{t('scatter.noData', { year: year ?? '' })}</p>
          ) : data && data.n === 0 ? (
            <p className="py-16 text-center text-sm text-ink-3">{t('scatter.noData', { year: data.year_used ?? year ?? '' })}</p>
          ) : data ? (
            <BubbleChart points={points} xSpec={xSpec} ySpec={ySpec} sizeSpec={sizeSpec} logX={effLogX} logY={effLogY} fit={fitLine} highlight={selected ? [selected] : []} onSelect={(id) => set({ country: id ? id.toLowerCase() : null }, 0)} height={desktop ? 480 : 380} defaultWidth={900} />
          ) : (
            <div className="grid min-h-[420px] place-items-center text-sm text-ink-3">{t('common.loading')}</div>
          )}
          {data ? (
            <div className="mt-3 border-t border-rule pt-3">
              <dl className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm sm:grid-cols-5">
                {[
                  [t('scatter.stats.pearson'), data.stats.pearson != null ? fixed(data.stats.pearson, 2) : t('common.na')],
                  [t('scatter.stats.spearman'), data.stats.spearman != null ? fixed(data.stats.spearman, 2) : t('common.na')],
                  [t('scatter.stats.r2'), data.stats.ols?.r2 != null ? fixed(data.stats.ols.r2, 2) : t('common.na')],
                  [t('scatter.stats.n'), grouped(data.n)],
                  [t('scatter.stats.year'), String(data.year_used ?? '')],
                ].map(([k, v]) => (
                  <div key={k}>
                    <dt className="text-2xs uppercase tracking-wide text-ink-3">{k}</dt>
                    <dd className="tnum text-xl font-semibold text-ink">{v}</dd>
                  </div>
                ))}
              </dl>
              <p className="mt-2 text-xs font-medium text-ink-2">{t('scatter.caveat')}</p>
              <p className="text-2xs text-ink-3">
                {t('scatter.nearest', { year: data.year_used ?? '', n: data.nearest_years })}
                {effLogX || effLogY ? ` ${t('common.log')}: ${[effLogX ? 'x' : null, effLogY ? 'y' : null].filter(Boolean).join(', ')}.` : ''}
              </p>
            </div>
          ) : null}
        </div>
        <aside className="min-w-0">
          {desktop && selPanel ? <div className="border-t border-rule pt-3 lg:border-t-0 lg:pt-0">{selPanel}</div> : null}
          <div className={cn('border-t border-rule pt-3', desktop && selPanel && 'mt-6')}>
            <div className="text-sm font-semibold text-ink">{t('scatter.related', { name: xSpec.name ?? x })}</div>
            <p className="mb-2 text-2xs text-ink-3">{t('scatter.relatedHint')}</p>
            {rel && rel.items.length ? (
              <ul className="divide-y divide-rule">
                {rel.items
                  .filter((it) => it.indicator.slug !== y)
                  .slice(0, 6)
                  .map((it) => (
                    <li key={it.indicator.slug}>
                      <button type="button" onClick={() => set({ y: it.indicator.slug, log: null }, 0)} className="flex min-h-[44px] w-full items-center justify-between gap-2 text-left text-sm hover:text-accent md:min-h-[36px]">
                        <span className="truncate">{it.indicator.short_name ?? it.indicator.name}</span>
                        <span className={cn('tnum shrink-0 text-xs', it.direction === 'negative' ? 'text-dec' : 'text-inc')}>ρ {it.spearman != null ? fixed(it.spearman, 2) : '—'}</span>
                      </button>
                    </li>
                  ))}
              </ul>
            ) : (
              <p className="text-xs text-ink-3">{rel === null ? t('common.noDataLong') : t('common.loading')}</p>
            )}
          </div>
        </aside>
      </div>
      <BottomSheet open={!desktop && !!selPanel} onClose={() => set({ country: null }, 0)} side="drawer" title={<span className="sr-only">{sel?.name}</span>}>
        {selPanel}
      </BottomSheet>
    </div>
  );
}