'use client';
import { AlertTriangle, ArrowDownRight, ArrowUpRight, GitCommitHorizontal, Repeat, SlidersHorizontal, TrendingDown, TrendingUp, Trophy, Waves, X } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useMemo, useRef, useState } from 'react';
import { t } from '@/i18n';
import { clientExplore } from '@/lib/client-api-explore';
import { cn } from '@/lib/cn';
import { formatPeriod, grouped } from '@/lib/format';
import { WB_REGIONS } from '@/lib/regions';
import { severityLabel, severityLevel } from '@/lib/severity';
import { routes } from '@/lib/site';
import type { ChangeItem } from '@/lib/types';
import { BottomSheet } from '@/components/data/bottom-sheet';
import { kindLabel } from '@/components/data/change-list';
import { CountryChip } from '@/components/data/country-chip';
import { EntityPicker, type PickedEntity } from '@/components/explore/entity-picker';

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,
};

type Sev = 0 | 0.4 | 0.7;

/**
 * Global change feed with filters (kind chips, indicator typeahead, region, minimum severity) in a bottom
 * sheet on phones and inline on desktop. Items are grouped by period (year). Server passes the first page;
 * changing a server-side filter (kind / indicator / severity) refetches `/api/v1/changes`; region filters
 * client-side (the API has no region parameter but every item carries the country's region).
 */
export function ChangesFeed({ initial, kinds, limit = 100, compact = false }: { initial: ChangeItem[]; kinds: string[]; limit?: number; compact?: boolean }) {
  const [kind, setKind] = useState<string | null>(null);
  const [indicator, setIndicator] = useState<PickedEntity | null>(null);
  const [region, setRegion] = useState<string | null>(null);
  const [minSev, setMinSev] = useState<Sev>(0);
  const [items, setItems] = useState<ChangeItem[]>(initial);
  const [state, setState] = useState<'idle' | 'loading' | 'error'>('idle');
  const [sheet, setSheet] = useState(false);
  const first = useRef(true);

  useEffect(() => {
    if (first.current) {
      first.current = false;
      return;
    }
    const ctrl = new AbortController();
    setState('loading');
    clientExplore
      .changes({ limit, kind, indicator: indicator?.slug ?? null, min_severity: minSev || null }, ctrl.signal)
      .then((r) => {
        setItems(r.items);
        setState('idle');
      })
      .catch((e) => {
        if ((e as Error).name !== 'AbortError') setState('error');
      });
    return () => ctrl.abort();
  }, [kind, indicator, minSev, limit]);

  const visible = useMemo(() => (region ? items.filter((c) => (c.country?.region ?? '').toUpperCase() === region) : items), [items, region]);
  const groups = useMemo(() => {
    const m = new Map<string, ChangeItem[]>();
    for (const c of visible) {
      const key = c.period ? formatPeriod(c.period, 'A') : t('common.na');
      if (!m.has(key)) m.set(key, []);
      m.get(key)!.push(c);
    }
    return Array.from(m.entries()).sort((a, b) => b[0].localeCompare(a[0]));
  }, [visible]);

  const active = (kind ? 1 : 0) + (indicator ? 1 : 0) + (region ? 1 : 0) + (minSev ? 1 : 0);
  const reset = () => {
    setKind(null);
    setIndicator(null);
    setRegion(null);
    setMinSev(0);
  };

  const filters = (
    <div className="space-y-4">
      <div>
        <div className="eyebrow mb-1.5">{t('changes.filter.kind')}</div>
        <ul className="flex flex-wrap gap-1.5" role="radiogroup" aria-label={t('changes.filter.kind')}>
          <li>
            <Chip active={!kind} onClick={() => setKind(null)}>
              {t('common.all')}
            </Chip>
          </li>
          {kinds.map((k) => (
            <li key={k}>
              <Chip active={kind === k} onClick={() => setKind(kind === k ? null : k)}>
                {kindLabel(k, 10)}
              </Chip>
            </li>
          ))}
        </ul>
      </div>
      <div>
        <div className="eyebrow mb-1.5">{t('changes.filter.indicator')}</div>
        {indicator ? (
          <span className="inline-flex h-11 items-center gap-1 rounded-sm bg-accent-soft pl-2.5 pr-1 text-sm text-accent md:h-9">
            {indicator.name}
            <button type="button" onClick={() => setIndicator(null)} className="grid h-9 w-8 place-items-center" aria-label={t('common.reset')}>
              <X size={13} aria-hidden />
            </button>
          </span>
        ) : (
          <EntityPicker type="indicator" placeholder={t('changes.filter.search')} onPick={setIndicator} className="max-w-sm" size="sm" />
        )}
      </div>
      {!compact ? (
        <div>
          <div className="eyebrow mb-1.5">{t('changes.filter.region')}</div>
          <ul className="flex flex-wrap gap-1.5" role="radiogroup" aria-label={t('changes.filter.region')}>
            <li>
              <Chip active={!region} onClick={() => setRegion(null)}>
                {t('common.all')}
              </Chip>
            </li>
            {WB_REGIONS.map((r) => (
              <li key={r.id}>
                <Chip active={region === r.id} onClick={() => setRegion(region === r.id ? null : r.id)}>
                  {r.short}
                </Chip>
              </li>
            ))}
          </ul>
        </div>
      ) : null}
      <div>
        <div className="eyebrow mb-1.5">{t('changes.filter.severity')}</div>
        <ul className="flex flex-wrap gap-1.5" role="radiogroup" aria-label={t('changes.filter.severity')}>
          {(
            [
              [0, t('changes.filter.severity.any')],
              [0.4, t('changes.filter.severity.notable')],
              [0.7, t('changes.filter.severity.major')],
            ] as Array<[Sev, string]>
          ).map(([v, label]) => (
            <li key={v}>
              <Chip active={minSev === v} onClick={() => setMinSev(v)}>
                {label}
              </Chip>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );

  return (
    <div className="min-w-0">
      <div className="flex flex-wrap items-center gap-2 pb-3">
        <button type="button" onClick={() => setSheet(true)} className={cn('inline-flex h-11 items-center gap-1.5 rounded-sm border px-3 text-sm md:hidden', active ? 'border-accent text-accent' : 'border-rule text-ink-2')}>
          <SlidersHorizontal size={15} aria-hidden />
          {t('common.filters')}
          {active ? <span className="tnum">({active})</span> : null}
        </button>
        {compact ? (
          <button type="button" onClick={() => setSheet(true)} className={cn('hidden h-9 items-center gap-1.5 rounded-sm border px-3 text-sm md:inline-flex', active ? 'border-accent text-accent' : 'border-rule text-ink-2')}>
            <SlidersHorizontal size={15} aria-hidden />
            {t('common.filters')}
            {active ? <span className="tnum">({active})</span> : null}
          </button>
        ) : null}
        {active ? (
          <button type="button" onClick={reset} className="inline-flex h-11 items-center gap-1 rounded-sm px-2 text-xs text-ink-2 hover:text-ink md:h-9">
            <X size={13} aria-hidden /> {t('common.reset')}
          </button>
        ) : null}
        <span className="tnum ml-auto text-xs text-ink-3" aria-live="polite">
          {state === 'loading' ? t('changes.loading') : t('changes.count', { n: grouped(visible.length) })}
        </span>
      </div>
      {!compact ? <div className="hidden pb-4 md:block">{filters}</div> : null}

      {state === 'error' ? <p className="py-6 text-sm text-down">{t('changes.error')}</p> : null}
      {state !== 'error' && visible.length === 0 && state !== 'loading' ? <p className="py-8 text-center text-sm text-ink-3">{t('changes.none')}</p> : null}

      <div className={cn('transition-opacity', state === 'loading' && 'opacity-50')} aria-busy={state === 'loading'}>
        {groups.map(([period, rows]) => (
          <section key={period} className="pb-4">
            <h3 className="tnum sticky top-[52px] z-10 -mx-4 border-b border-rule bg-paper/95 px-4 py-1 text-xs font-semibold uppercase tracking-wide text-ink-2 backdrop-blur sm:mx-0 sm:px-0 md:top-14">
              {period}
            </h3>
            <ol className="divide-y divide-rule">
              {rows.map((c, i) => (
                <ChangeRow key={c.id ?? `${period}-${i}`} c={c} />
              ))}
            </ol>
          </section>
        ))}
      </div>

      <BottomSheet open={sheet} onClose={() => setSheet(false)} side="center" title={t('common.filters')}>
        {filters}
        <div className="mt-6 flex justify-between">
          <button type="button" className="tap rounded-sm px-3 text-sm text-ink-2 hover:bg-surface-2" onClick={reset}>
            {t('common.reset')}
          </button>
          <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>
  );
}

function ChangeRow({ c }: { c: ChangeItem }) {
  const Icon = ICON[c.kind ?? ''] ?? ArrowUpRight;
  const lvl = severityLevel(c.severity);
  const ind = c.indicator as { id: string; slug?: string; name?: string | null; topic?: string | null };
  const slug = ind.slug ?? ind.id;
  const seriesHref = c.country?.slug && ind.topic ? routes.countryIndicator(c.country.slug, ind.topic, slug) : routes.indicator(slug);
  return (
    <li className="flex gap-3 py-3">
      <span className={cn('mt-0.5 grid h-7 w-7 shrink-0 place-items-center rounded-sm', lvl === 'high' ? 'bg-accent-soft text-accent' : 'bg-surface-2 text-ink-2')} aria-hidden>
        <Icon size={15} />
      </span>
      <div className="min-w-0 flex-1">
        <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-2xs text-ink-3">
          {c.country ? <CountryChip country={{ slug: c.country.slug ?? c.country.id, name: c.country.name ?? c.country.id, flag: c.country.flag }} size="sm" /> : null}
          <span className="font-medium uppercase tracking-wide">{kindLabel(c.kind, c.window_years)}</span>
          <span className={cn('rounded-xs px-1 py-px', lvl === 'high' ? 'bg-accent-soft text-accent' : lvl === 'medium' ? 'bg-surface-2 text-ink-2' : 'bg-surface-2 text-ink-3')}>{severityLabel(c.severity)}</span>
        </div>
        <p className="mt-0.5 text-sm leading-snug text-ink">{c.headline ?? `${ind.name ?? slug}: ${c.formatted ?? ''}`}</p>
        <div className="mt-1 flex flex-wrap gap-x-3 text-xs">
          <Link href={seriesHref} className="inline-flex min-h-[32px] items-center text-accent hover:underline">
            {t('changes.series')} →
          </Link>
          <Link href={routes.indicator(slug)} className="inline-flex min-h-[32px] items-center text-ink-2 hover:text-accent hover:underline">
            {ind.name ?? slug}
          </Link>
        </div>
      </div>
    </li>
  );
}

function Chip({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
  return (
    <button type="button" role="radio" aria-checked={active} onClick={onClick} className={cn('inline-flex h-11 items-center rounded-sm border px-3 text-sm md:h-9 md:px-2.5', active ? 'border-ink bg-ink text-paper' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>
      {children}
    </button>
  );
}