import { AlertTriangle, ArrowDownRight, ArrowUpRight, GitCommitHorizontal, Repeat, TrendingDown, TrendingUp, Trophy, Waves } from 'lucide-react';
import Link from 'next/link';
import { t, tOpt } from '@/i18n';
import { cn } from '@/lib/cn';
import { formatPeriod } from '@/lib/format';
import { severityLabel, severityLevel } from '@/lib/severity';
import { routes } from '@/lib/site';
import type { ChangeItem } from '@/lib/types';

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

export function kindLabel(kind: string | null | undefined, windowYears?: number | null): string {
  if (!kind) return '';
  return tOpt(`change.kind.${kind}`, kind.replace(/_/g, ' '), { n: windowYears ?? 10 });
}

/**
 * Feed of detected changes/events: kind icon + label, headline, country (optional), period, severity chip.
 * Server component. `showCountry` for the global feed; `compact` for the timeline.
 */
export function ChangeList({ items, showCountry = false, className, emptyText }: { items: ChangeItem[]; showCountry?: boolean; className?: string; emptyText?: string }) {
  if (items.length === 0) return <p className={cn('py-4 text-sm text-ink-3', className)}>{emptyText ?? t('country.changes.none')}</p>;
  return (
    <ol className={cn('divide-y divide-rule', className)}>
      {items.map((c, i) => {
        const Icon = ICON[c.kind ?? ''] ?? ArrowUpRight;
        const lvl = severityLevel(c.severity);
        const indSlug = (c.indicator as { slug?: string; id: string }).slug ?? c.indicator.id;
        const href = c.country?.slug ? routes.country(c.country.slug) : routes.indicator(indSlug);
        return (
          <li key={c.id ?? `${indSlug}-${i}`} 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-baseline gap-x-2 text-2xs text-ink-3">
                <span className="font-medium uppercase tracking-wide">{kindLabel(c.kind, c.window_years)}</span>
                {c.period ? <span className="tnum">{formatPeriod(c.period, 'A')}</span> : null}
                <span className={cn('rounded-xs px-1 py-px', lvl === 'high' ? 'bg-accent-soft text-accent' : 'bg-surface-2 text-ink-3')}>{severityLabel(c.severity)}</span>
              </div>
              <Link href={href} className="link-quiet mt-0.5 block text-sm leading-snug text-ink">
                {showCountry && c.country ? (
                  <span className="mr-1.5 text-ink-2">
                    <span aria-hidden>{c.country.flag} </span>
                    {c.country.name}
                  </span>
                ) : null}
                {c.headline ?? `${'name' in c.indicator ? c.indicator.name : indSlug}: ${c.formatted ?? ''}`}
              </Link>
            </div>
          </li>
        );
      })}
    </ol>
  );
}