'use client';
import { ArrowDownRight, ArrowUpRight } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useMemo, useRef, useState } from 'react';
import { t, tOpt } from '@/i18n';
import { clientAnalytics } from '@/lib/client-api-analytics';
import { cn } from '@/lib/cn';
import { severityLevel } from '@/lib/severity';
import { routes } from '@/lib/site';
import type { MoverCategory, MoverItem, MoverKindFilter, MoverWindow, MoversResponse } from '@/lib/types-analytics';
import { kindLabel } from '@/components/data/change-list';
import { CountryChip } from '@/components/data/country-chip';
import { Segmented } from '@/components/controls/indicator-select';

const WINDOWS: MoverWindow[] = [1, 5, 10];
const CATEGORIES: MoverCategory[] = ['all', 'economic', 'demographic', 'health', 'energy', 'climate', 'digital', 'housing', 'labor'];
const KINDS_1: MoverKindFilter[] = ['all', 'improvement', 'deterioration', 'record', 'reversal', 'acceleration', 'structural'];
const KINDS_N: MoverKindFilter[] = ['all', 'improvement', 'deterioration', 'increase', 'decrease'];

/**
 * Biggest movers: window tabs (24 months / 5 years / 10 years), category and kind chips; rows show country,
 * indicator, ref → now, delta, severity dot and the templated headline. The server passes the first payload
 * (window 1, all); every change refetches `/movers` client-side with request cancellation.
 */
export function Movers({ initial, limit = 12, compact = false, initialWindow }: { initial: MoversResponse | null; limit?: number; compact?: boolean; initialWindow?: MoverWindow }) {
  const [win, setWin] = useState<MoverWindow>(initialWindow ?? initial?.window ?? 1);
  const [category, setCategory] = useState<MoverCategory>('all');
  const [kind, setKind] = useState<MoverKindFilter>('all');
  const [cache, setCache] = useState<Record<string, MoversResponse | null>>(() => (initial ? { [`${initial.window}|all|all`]: initial } : {}));
  const [loading, setLoading] = useState(false);
  const abortRef = useRef<AbortController | null>(null);
  const key = `${win}|${category}|${kind}`;

  useEffect(() => {
    if (cache[key] !== undefined) return;
    abortRef.current?.abort();
    const ctrl = new AbortController();
    abortRef.current = ctrl;
    setLoading(true);
    clientAnalytics
      .movers({ window: win, category, kind, limit }, 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, win, category, kind, limit, cache]);

  const data = cache[key];
  const kinds = win === 1 ? KINDS_1 : KINDS_N;
  useEffect(() => {
    if (!kinds.includes(kind)) setKind('all');
  }, [kinds, kind]);
  const items = useMemo(() => (data?.items ?? []).slice(0, limit), [data, limit]);

  return (
    <div className="min-w-0">
      <div className="flex flex-wrap items-center gap-2">
        <Segmented value={String(win) as '1' | '5' | '10'} onChange={(v) => setWin(Number(v) as MoverWindow)} label={t('home.movers.window')} options={WINDOWS.map((w) => ({ value: String(w) as '1' | '5' | '10', label: t(`home.movers.window.${w}` as 'home.movers.window.1') }))} size="sm" />
        <label className="inline-flex h-9 items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2 md:h-8 md:text-xs">
          <span className="text-2xs uppercase tracking-wide text-ink-3">{t('home.movers.category')}</span>
          <select value={category} onChange={(e) => setCategory(e.target.value as MoverCategory)} className="bg-transparent text-ink outline-none" aria-label={t('home.movers.category')}>
            {CATEGORIES.map((c) => (
              <option key={c} value={c}>
                {t(`home.movers.cat.${c}` as 'home.movers.cat.all')}
              </option>
            ))}
          </select>
        </label>
        {data?.filter_note ? <span className="text-2xs text-ink-3">{data.filter_note}</span> : null}
      </div>
      <ul className="scrollbar-none -mx-4 mt-2 flex gap-1.5 overflow-x-auto px-4 sm:mx-0 sm:flex-wrap sm:px-0" role="radiogroup" aria-label={t('home.movers.kind')}>
        {kinds.map((k) => (
          <li key={k} className="shrink-0">
            <button type="button" role="radio" aria-checked={kind === k} onClick={() => setKind(k)} className={cn('inline-flex h-9 items-center rounded-sm border px-2.5 text-xs md:h-8', kind === k ? 'border-ink bg-ink text-paper' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>
              {t(`home.movers.kind.${k}` as 'home.movers.kind.all')}
            </button>
          </li>
        ))}
      </ul>

      <div className={cn('mt-3 min-h-[240px] transition-opacity', loading && 'opacity-50')} aria-busy={loading}>
        {data === null ? (
          <p className="py-6 text-sm text-ink-3">{t('common.errorHint')}</p>
        ) : data && items.length === 0 ? (
          <p className="py-6 text-sm text-ink-3">{t('home.movers.none')}</p>
        ) : (
          <ol className={cn('divide-y divide-rule border-y border-rule', compact && 'md:grid md:grid-cols-2 md:gap-x-10 md:border-y-0')}>
            {items.map((m) => (
              <MoverRow key={`${m.country.id}-${m.indicator.slug}-${m.kind}-${m.year}`} m={m} />
            ))}
          </ol>
        )}
      </div>
      <div className="mt-3 flex flex-wrap gap-x-4 text-sm">
        <Link href={routes.changes()} className="inline-flex min-h-[44px] items-center md:min-h-[36px] text-accent hover:underline">
          {t('home.changes.all')} →
        </Link>
        <Link href={routes.extremes({ window: String(win === 1 ? 1 : win) })} className="inline-flex min-h-[44px] items-center md:min-h-[36px] text-ink-2 hover:text-accent hover:underline">
          {t('home.movers.extremes')} →
        </Link>
      </div>
    </div>
  );
}

function MoverRow({ m }: { m: MoverItem }) {
  const up = m.direction === 'up';
  const Icon = up ? ArrowUpRight : ArrowDownRight;
  const lvl = severityLevel(m.severity);
  const tone = m.interpretation === 'improvement' ? 'text-up' : m.interpretation === 'deterioration' ? 'text-down' : up ? 'text-inc' : 'text-dec';
  const deltaText = m.delta_pct != null && ['currency', 'number', 'tonnes', 'kwh'].includes(m.indicator.format ?? '') ? `${m.delta_pct > 0 ? '+' : '−'}${Math.abs(m.delta_pct).toFixed(1)} %` : m.delta != null ? `${m.delta > 0 ? '+' : '−'}${Math.abs(m.delta).toFixed(1)}${m.indicator.format === 'percent' ? ' pts' : ''}` : '';
  return (
    <li className="py-2.5 md:border-b md:border-rule">
      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-2xs text-ink-3">
        <span className={cn('inline-block h-1.5 w-1.5 rounded-full', lvl === 'high' ? 'bg-accent' : lvl === 'medium' ? 'bg-ink-3' : 'bg-rule-strong')} aria-hidden />
        <CountryChip country={{ slug: m.country.slug ?? m.country.id, name: m.country.name ?? m.country.id, flag: m.country.flag }} size="sm" className="text-ink" />
        <span className="uppercase tracking-wide">{kindLabel(m.kind, null)}</span>
        {m.interpretation ? <span className={cn('uppercase tracking-wide', tone)}>{tOpt(`home.movers.interp.${m.interpretation}`, m.interpretation)}</span> : null}
      </div>
      <div className="mt-0.5 flex flex-wrap items-baseline gap-x-2">
        <Link href={routes.indicator(m.indicator.slug)} className="link-quiet -my-2 inline-flex min-h-[44px] items-center py-2 md:my-0 md:min-h-0 md:py-0 text-sm font-medium text-ink">
          {m.indicator.short_name ?? m.indicator.name}
        </Link>
        <span className="tnum text-sm text-ink-2">
          {m.formatted_ref ?? ''} → <span className="font-semibold text-ink">{m.formatted ?? ''}</span>
        </span>
        <span className={cn('tnum inline-flex items-center gap-0.5 text-sm font-medium', tone)}>
          <Icon size={13} aria-hidden strokeWidth={2.25} />
          {deltaText}
        </span>
        <span className="tnum text-2xs text-ink-3">
          {m.ref_year}–{m.year}
        </span>
      </div>
      {m.headline ? <p className="mt-0.5 text-xs leading-snug text-ink-2">{m.headline}</p> : null}
    </li>
  );
}