import { ArrowDownRight, ArrowUpRight } from 'lucide-react';
import Link from 'next/link';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { formatValue, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import type { PulseItem, PulseResponse } from '@/lib/types-analytics';

/**
 * World Pulse: a dense editorial list of what is changing globally, one row per headline/featured indicator.
 * Direction uses the neutral increase/decrease colours (--inc/--dec); "improvement" tones apply only when the
 * indicator declares a direction. Share bar = countries up vs down; right column = biggest mover.
 */
export function WorldPulse({ data, limit = 14 }: { data: PulseResponse; limit?: number }) {
  const items = [...data.items].sort((a, b) => Math.max(b.share_up, b.share_down) - Math.max(a.share_up, a.share_down)).slice(0, limit);
  return (
    <div className="min-w-0">
      <ol className="divide-y divide-rule border-y border-rule">
        {items.map((it) => (
          <PulseRow key={it.indicator.slug} it={it} />
        ))}
      </ol>
      <p className="mt-3 text-xs text-ink-3">
        {t('home.pulse.footnote', { year: data.year_reference, n: grouped(data.summary.n_countries_reporting) })} {t('semantics.note')}
      </p>
    </div>
  );
}

function PulseRow({ it }: { it: PulseItem }) {
  const up = it.share_up >= it.share_down;
  const Icon = up ? ArrowUpRight : ArrowDownRight;
  const spec = { format: it.indicator.format, unit: it.indicator.unit, unit_short: it.indicator.unit_short, precision: it.indicator.precision };
  const mover = up ? it.top_up : it.top_down;
  const total = it.n_up + it.n_down + it.n_flat || 1;
  return (
    <li className="grid gap-x-4 gap-y-1.5 py-3 md:grid-cols-[minmax(0,12rem)_minmax(0,1fr)_minmax(0,14rem)] md:items-center">
      <div className="flex min-w-0 items-center gap-2">
        <span className={cn('grid h-7 w-7 shrink-0 place-items-center rounded-sm', up ? 'bg-inc/15 text-inc' : 'bg-dec/15 text-dec')} aria-hidden>
          <Icon size={15} strokeWidth={2.25} />
        </span>
        <Link href={routes.indicator(it.indicator.slug)} className="link-quiet flex min-h-[44px] min-w-0 items-center text-sm font-semibold text-ink md:min-h-0">
          <span className="truncate">{it.indicator.short_name ?? it.indicator.name}</span>
        </Link>
      </div>
      <div className="min-w-0">
        <p className="text-sm leading-snug text-ink">{it.headline}</p>
        <div className="mt-1 flex items-center gap-2 text-2xs text-ink-3" aria-label={t('home.pulse.shareLabel', { up: it.n_up, down: it.n_down })}>
          <span className="tnum shrink-0 text-inc">↑ {it.n_up}</span>
          <span className="flex h-1.5 min-w-0 flex-1 overflow-hidden rounded-xs bg-surface-2" aria-hidden>
            <span className="h-full bg-inc" style={{ width: `${(it.n_up / total) * 100}%` }} />
            <span className="h-full bg-dec" style={{ width: `${(it.n_down / total) * 100}%` }} />
          </span>
          <span className="tnum shrink-0 text-dec">↓ {it.n_down}</span>
          {it.record_highs ? <span className="tnum hidden shrink-0 sm:inline">· {t('home.pulse.records', { n: it.record_highs })}</span> : null}
        </div>
      </div>
      <div className="min-w-0 text-xs text-ink-2">
        {mover ? (
          <Link href={mover.country.slug ? routes.country(mover.country.slug) : routes.indicator(it.indicator.slug)} className="link-quiet flex min-h-[32px] items-center gap-1.5">
            <span className="shrink-0 text-ink-3">{up ? t('home.pulse.largestRise') : t('home.pulse.largestFall')}</span>
            <span aria-hidden>{mover.country.flag}</span>
            <span className="truncate font-medium text-ink">{mover.country.name}</span>
            <span className="tnum shrink-0 text-ink-3">{formatValue(mover.value, spec)}</span>
          </Link>
        ) : null}
      </div>
    </li>
  );
}