'use client';
import Link from 'next/link';
import { t } from '@/i18n';
import { formatValue, grouped, ordinal } from '@/lib/format';
import { routes } from '@/lib/site';
import type { FormatSpec } from '@/lib/types';
import type { StoryItem, StoryResponse } from '@/lib/types-analytics';
import { LineChart } from '@/components/charts/line-chart';
import { useProvenance } from '@/components/data/provenance-context';

/**
 * "How {name} changed": one small multiple per long-run indicator (full annual history), the templated sentence
 * computed server-side underneath, first/last labels, peak/trough and rank change. Every chart opens provenance.
 */
export function CountryStory({ data, country }: { data: StoryResponse; country: { id: string; slug: string | null; name: string; flag?: string | null } }) {
  const { open } = useProvenance();
  if (!data.items.length) return <p className="py-4 text-sm text-ink-3">{t('country.story.none')}</p>;
  return (
    <div className="grid gap-x-6 gap-y-7 sm:grid-cols-2 lg:grid-cols-3">
      {data.items.map((it) => (
        <StoryCell key={it.indicator.slug} it={it} country={country} onProvenance={() => open({ indicator: { slug: it.indicator.slug, name: it.indicator.name ?? it.indicator.slug, format: it.indicator.format, unit: it.indicator.unit, unit_short: it.indicator.unit_short, precision: it.indicator.precision, frequency: it.indicator.frequency, higher_is_better: it.indicator.higher_is_better }, value: { value: it.last.value, formatted: it.last.formatted, period: `${it.last.year}-01-01`, year: it.last.year, unit: it.indicator.unit, provenance: it.provenance }, country })} />
      ))}
    </div>
  );
}

function StoryCell({ it, country, onProvenance }: { it: StoryItem; country: { slug: string | null }; onProvenance: () => void }) {
  const spec: FormatSpec = { format: it.indicator.format, unit: it.indicator.unit, unit_short: it.indicator.unit_short, precision: it.indicator.precision, name: it.indicator.short_name ?? it.indicator.name, higher_is_better: it.indicator.higher_is_better };
  const points = it.series.map(([year, value]) => ({ period: `${year}-01-01`, year, value }));
  const up = (it.change_abs ?? 0) >= 0;
  const title = it.indicator.short_name ?? it.indicator.name ?? it.indicator.slug;
  return (
    <article className="min-w-0 border-t border-rule pt-3" aria-labelledby={`story-${it.indicator.slug}`}>
      <div className="flex items-baseline justify-between gap-2">
        <h3 id={`story-${it.indicator.slug}`} className="min-w-0 truncate text-sm font-semibold text-ink">
          <Link href={it.indicator.topic && country.slug ? routes.countryIndicator(country.slug, it.indicator.topic, it.indicator.slug) : routes.indicator(it.indicator.slug)} className="link-quiet">
            {title}
          </Link>
        </h3>
        <span className={`tnum shrink-0 text-xs font-medium ${up ? 'text-inc' : 'text-dec'}`}>
          {it.change_pct != null && Math.abs(it.change_pct) < 10000 && ['currency', 'number', 'tonnes', 'kwh'].includes(it.indicator.format ?? '') ? `${up ? '+' : '−'}${grouped(Math.abs(it.change_pct))} %` : it.change_abs != null ? `${up ? '+' : '−'}${formatValue(Math.abs(it.change_abs), { ...spec, format: spec.format === 'percent' ? 'percent' : spec.format }).replace(/^(US\$|intl \$)/, '$1')}` : ''}
        </span>
      </div>
      <div className="tnum -mt-0.5 flex justify-between text-2xs text-ink-3">
        <span>
          {it.first.year} · {it.first.formatted ?? formatValue(it.first.value, spec)}
        </span>
        <span>
          {it.last.year} · <span className="font-medium text-ink">{it.last.formatted ?? formatValue(it.last.value, spec)}</span>
        </span>
      </div>
      <LineChart series={[{ id: it.indicator.slug, name: title, points }]} spec={spec} subject={title} height={150} endLabels={false} margin={{ left: 40, right: 14, top: 22, bottom: 22 }} defaultWidth={360} className="mt-1 [&_figcaption]:hidden" provenance={it.provenance} payload={{ indicator: { slug: it.indicator.slug, name: it.indicator.name ?? title, format: it.indicator.format, unit: it.indicator.unit, unit_short: it.indicator.unit_short, precision: it.indicator.precision, frequency: it.indicator.frequency, higher_is_better: it.indicator.higher_is_better }, value: { value: it.last.value, formatted: it.last.formatted, period: `${it.last.year}-01-01`, year: it.last.year, unit: it.indicator.unit, provenance: it.provenance }, country: null }} />
      <button type="button" onClick={onProvenance} className="mt-1 text-left text-xs leading-snug text-ink-2 hover:text-ink" aria-label={t('common.openProvenance')}>
        {it.text.replace(/^[^:]+:\s*/, '')}
      </button>
      <p className="tnum mt-1 text-2xs text-ink-3">
        {it.peak && it.peak.year !== it.last.year ? `${t('country.story.peak', { value: formatValue(it.peak.value, spec), year: it.peak.year })}` : ''}
        {it.rank_first && it.rank_last ? `${it.peak && it.peak.year !== it.last.year ? ' · ' : ''}${t('country.story.rank', { r0: ordinal(it.rank_first.rank), y0: it.rank_first.year, r1: ordinal(it.rank_last.rank), n: it.rank_last.n, y1: it.rank_last.year })}` : ''}
      </p>
    </article>
  );
}