'use client';
import { Activity, AlertTriangle, ArrowDownRight, ArrowUpRight, GitCommitHorizontal, Repeat, TrendingDown, TrendingUp, Trophy, Waves } from 'lucide-react';
import Link from 'next/link';
import { useMemo, useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { severityLevel } from '@/lib/severity';
import { routes } from '@/lib/site';
import { topicById } from '@/lib/topics';
import type { ChangeItem } from '@/lib/types';
import { kindLabel } from '@/components/data/change-list';

const ICON: Record<string, typeof ArrowUpRight> = {
  yoy_jump: ArrowUpRight,
  yoy_drop: ArrowDownRight,
  record_high: Trophy,
  record_low: AlertTriangle,
  n_year_high: TrendingUp,
  n_year_low: TrendingDown,
  sign_flip: Repeat,
  accelerating: TrendingUp,
  decelerating: TrendingDown,
  structural_break: GitCommitHorizontal,
  trend_reversal: Repeat,
  volatility_spike: Waves,
};

/** Topic filter chips → indicator topics. */
const FILTERS: Array<{ id: string; topics: string[] }> = [
  { id: 'all', topics: [] },
  { id: 'economy', topics: ['economy', 'government', 'trade', 'income'] },
  { id: 'population', topics: ['population'] },
  { id: 'health', topics: ['health'] },
  { id: 'energy', topics: ['energy'] },
  { id: 'climate', topics: ['climate', 'environment'] },
  { id: 'digital', topics: ['digital', 'innovation'] },
];
const PAGE = 40;

/**
 * Country timeline 2.0: a vertical chronological rail grouped by decade → year, topic filters, kind glyphs and
 * severity emphasis (record highs/lows, sharp changes, reversals, structural breaks, volatility). Newest first.
 */
export function Timeline({ items, slug }: { items: ChangeItem[]; slug: string }) {
  const [filter, setFilter] = useState('all');
  const [shown, setShown] = useState(PAGE);
  const filtered = useMemo(() => {
    const f = FILTERS.find((x) => x.id === filter) ?? FILTERS[0]!;
    const rows = f.topics.length ? items.filter((it) => f.topics.includes(('topic' in it.indicator ? it.indicator.topic : null) ?? '')) : items;
    return [...rows].sort((a, b) => (b.year ?? 0) - (a.year ?? 0) || (b.severity ?? 0) - (a.severity ?? 0));
  }, [items, filter]);
  const visible = filtered.slice(0, shown);
  const decades = useMemo(() => {
    const m = new Map<number, Map<number, ChangeItem[]>>();
    for (const it of visible) {
      const y = it.year ?? 0;
      const d = Math.floor(y / 10) * 10;
      if (!m.has(d)) m.set(d, new Map());
      const ym = m.get(d)!;
      if (!ym.has(y)) ym.set(y, []);
      ym.get(y)!.push(it);
    }
    return Array.from(m.entries()).sort((a, b) => b[0] - a[0]);
  }, [visible]);
  const counts = useMemo(() => Object.fromEntries(FILTERS.map((f) => [f.id, f.topics.length ? items.filter((it) => f.topics.includes(('topic' in it.indicator ? it.indicator.topic : null) ?? '')).length : items.length])), [items]);

  if (items.length === 0) return <p className="py-4 text-sm text-ink-3">{t('country.timeline.none')}</p>;
  return (
    <div className="min-w-0">
      <ul className="scrollbar-none -mx-4 flex gap-1.5 overflow-x-auto px-4 sm:mx-0 sm:flex-wrap sm:px-0" role="radiogroup" aria-label={t('country.timeline.filter')}>
        {FILTERS.filter((f) => (counts[f.id] ?? 0) > 0 || f.id === 'all').map((f) => (
          <li key={f.id} className="shrink-0">
            <button type="button" role="radio" aria-checked={filter === f.id} onClick={() => { setFilter(f.id); setShown(PAGE); }} className={cn('inline-flex h-10 items-center gap-1.5 rounded-sm border px-3 text-sm md:h-8 md:px-2.5 md:text-xs', filter === f.id ? 'border-ink bg-ink text-paper' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>
              {t(`country.timeline.f.${f.id}` as 'country.timeline.f.all')}
              <span className={cn('tnum text-2xs', filter === f.id ? 'text-paper/70' : 'text-ink-3')}>{counts[f.id] ?? 0}</span>
            </button>
          </li>
        ))}
      </ul>
      <ul className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-2xs text-ink-3" aria-label={t('common.legend')}>
        {(['record_high', 'yoy_jump', 'sign_flip', 'structural_break', 'volatility_spike'] as const).map((k) => {
          const Icon = ICON[k]!;
          return (
            <li key={k} className="inline-flex items-center gap-1">
              <Icon size={12} aria-hidden /> {kindLabel(k, 10)}
            </li>
          );
        })}
      </ul>

      <ol className="relative mt-4 border-l-2 border-rule pl-5 md:pl-6">
        {decades.map(([decade, years]) => (
          <li key={decade} className="relative pb-6 last:pb-0">
            <span aria-hidden className="absolute -left-[calc(1.25rem+5px)] top-1 h-2 w-2 rounded-full bg-rule-strong md:-left-[calc(1.5rem+5px)]" />
            <div className="display text-lg text-ink-3">{t('country.timeline.decade', { d: decade })}</div>
            <ol className="mt-2 space-y-4">
              {Array.from(years.entries()).map(([year, events]) => (
                <li key={year} className="relative grid gap-x-4 sm:grid-cols-[3.25rem_minmax(0,1fr)]">
                  <span aria-hidden className="absolute -left-[calc(1.25rem+4px)] top-2 h-1.5 w-1.5 rounded-full bg-accent md:-left-[calc(1.5rem+4px)]" />
                  <span className="tnum display text-xl leading-none text-ink">{year}</span>
                  <ul className="mt-1 space-y-1.5 sm:mt-0">
                    {events.map((e, i) => {
                      const ind = e.indicator;
                      const indSlug = (ind as { slug?: string; id: string }).slug ?? ind.id;
                      const topic = 'topic' in ind ? topicById(ind.topic ?? '')?.id : undefined;
                      const href = topic ? routes.countryIndicator(slug, topic, indSlug) : routes.indicator(indSlug);
                      const lvl = severityLevel(e.severity);
                      const Icon = ICON[e.kind ?? ''] ?? Activity;
                      return (
                        <li key={e.id ?? i} className={cn('text-sm leading-snug', lvl === 'high' ? 'text-ink' : 'text-ink-2')}>
                          <Link href={href} className="link-quiet group/e flex items-start gap-2">
                            <span className={cn('mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-xs', lvl === 'high' ? 'bg-accent-soft text-accent' : 'bg-surface-2 text-ink-3')} aria-hidden>
                              <Icon size={12} />
                            </span>
                            <span className="min-w-0">
                              <span className="mr-1.5 text-2xs uppercase tracking-wide text-ink-3">{kindLabel(e.kind, e.window_years)}</span>
                              <span className={cn(lvl === 'high' && 'font-medium')}>{e.headline}</span>
                            </span>
                          </Link>
                        </li>
                      );
                    })}
                  </ul>
                </li>
              ))}
            </ol>
          </li>
        ))}
      </ol>
      {filtered.length > shown ? (
        <div className="mt-4">
          <button type="button" onClick={() => setShown((s) => s + PAGE)} className="inline-flex h-11 items-center rounded-sm border border-rule px-4 text-sm text-ink hover:bg-surface-2 md:h-10">
            {t('common.showMore', { n: Math.min(PAGE, filtered.length - shown) })}
          </button>
        </div>
      ) : null}
    </div>
  );
}