'use client';
import Link from 'next/link';
import { useMemo, useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { formatValue } from '@/lib/format';
import { routes } from '@/lib/site';
import type { FormatSpec } from '@/lib/types';
import type { RaceResponse } from '@/lib/types-analytics';
import { YearSlider } from '@/components/controls/year-slider';
import { regionColor } from './bubble-chart';
import { ChartFrame, type TableData } from './chart-frame';

const ROW_H = 36;

/**
 * Bar chart race: the top N countries of a ranking, one horizontal bar per country keyed by id so bars slide
 * to their new rank (CSS transitions on transform + width) as the year slider plays. Colour = region, flags +
 * names + values, faded year behind. Data from `/rankings/{indicator}/race`. Table toggle lists the current frame.
 */
export function RankRace({ data, spec, top = 10, height, interval = 650, className, initialYear }: { data: RaceResponse; spec: FormatSpec; top?: number; height?: number; interval?: number; className?: string; initialYear?: number | null }) {
  const years = data.years;
  const [year, setYear] = useState<number>(initialYear && years.includes(initialYear) ? initialYear : years[years.length - 1] ?? 0);
  const frame = useMemo(() => data.frames.find((f) => f.year === year) ?? data.frames[data.frames.length - 1], [data.frames, year]);
  const rows = useMemo(() => (frame ? [...frame.rows].sort((a, b) => a.rank - b.rank).slice(0, top) : []), [frame, top]);
  const max = rows.length ? Math.max(...rows.map((r) => Math.abs(r.value))) || 1 : 1;
  const n = Math.min(top, data.top);
  const h = height ?? n * ROW_H + 8;
  // Every country that ever appears keeps a DOM node so its bar can slide in/out.
  const ids = useMemo(() => Object.keys(data.countries), [data.countries]);
  const byId = useMemo(() => new Map(rows.map((r) => [r.id, r])), [rows]);
  const summary = t('chart.race.summary', { name: spec.name ?? '', y0: years[0] ?? '', y1: years[years.length - 1] ?? '', top: n });
  const table: TableData = useMemo(
    () => ({ columns: [{ key: 'rank', label: t('common.rank'), numeric: true }, { key: 'country', label: t('common.country') }, { key: 'value', label: spec.name ?? t('common.value'), numeric: true }], rows: rows.map((r) => ({ rank: String(r.rank), country: data.countries[r.id]?.name ?? r.id, value: formatValue(r.value, spec) })) }),
    [rows, data.countries, spec],
  );

  return (
    <ChartFrame summary={summary} table={rows.length ? table : undefined} className={className} minHeight={h + 64} provenance={data.provenance}>
      <div className="relative w-full overflow-hidden" style={{ height: h }} aria-hidden>
        <span className="display pointer-events-none absolute bottom-1 right-2 select-none text-[clamp(3rem,10vw,6rem)] font-semibold leading-none text-rule">{year}</span>
        {ids.map((id) => {
          const r = byId.get(id);
          const c = data.countries[id];
          const visible = !!r;
          const idx = r ? r.rank - 1 : n;
          return (
            <div key={id} className={cn('absolute left-0 right-0 grid grid-cols-[2rem_minmax(0,1fr)_6rem] items-center gap-x-2 sm:grid-cols-[2rem_minmax(0,1fr)_7rem]', !visible && 'pointer-events-none')} style={{ top: 4, transform: `translateY(${idx * ROW_H}px)`, opacity: visible ? 1 : 0, transition: 'transform 600ms cubic-bezier(0.2,0.8,0.2,1), opacity 400ms ease', height: ROW_H - 6 }}>
              <span className="tnum text-right text-xs text-ink-3">{r?.rank ?? ''}</span>
              <div className="relative h-full min-w-0">
                <div className="absolute inset-y-0 left-0 rounded-r-sm" style={{ width: `${r ? Math.max(1, (Math.abs(r.value) / max) * 100) : 0}%`, background: regionColor(c?.region), opacity: 0.85, transition: 'width 600ms cubic-bezier(0.2,0.8,0.2,1)' }} />
                <span className="relative flex h-full items-center gap-1.5 pl-2 text-sm text-ink" style={{ paintOrder: 'stroke' }}>
                  <span aria-hidden>{c?.flag}</span>
                  <span className="truncate font-medium" style={{ textShadow: '0 0 6px var(--surface), 0 0 2px var(--surface)' }}>
                    {c?.name ?? id}
                  </span>
                </span>
              </div>
              <span className="tnum text-right text-sm font-medium text-ink">{r ? formatValue(r.value, spec) : ''}</span>
            </div>
          );
        })}
      </div>
      <ul className="sr-only">
        {rows.map((r) => (
          <li key={r.id}>
            {r.rank}. {data.countries[r.id]?.name ?? r.id}: {formatValue(r.value, spec)} ({year})
          </li>
        ))}
      </ul>
      <div className="mt-3 flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
        <YearSlider years={years} year={year} onChange={setYear} interval={interval} className="min-w-0 flex-1" ticks />
        <Link href={routes.ranking(data.indicator.slug, { year })} className="inline-flex min-h-[36px] shrink-0 items-center text-sm text-accent hover:underline">
          {t('chart.race.openYear', { year })} →
        </Link>
      </div>
    </ChartFrame>
  );
}