'use client';
import { ArrowDownRight, ArrowUpRight } from 'lucide-react';
import Link from 'next/link';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { fixed, formatValue } from '@/lib/format';
import { routes } from '@/lib/site';
import type { FormatSpec } from '@/lib/types';
import type { ExtremeFacet } from '@/lib/types-analytics';
import { SourceLine } from '@/components/charts/source-line';

function changeText(row: ExtremeFacet['rows'][number], metric: ExtremeFacet['metric'], spec: FormatSpec): string {
  if (metric === 'pct' && row.delta_pct != null) return `${row.delta_pct >= 0 ? '+' : '−'}${fixed(Math.abs(row.delta_pct), 1)} %`;
  if (row.delta == null) return t('common.na');
  const sign = row.delta >= 0 ? '+' : '−';
  if (metric === 'points') return `${sign}${fixed(Math.abs(row.delta), spec.precision ?? 1)} pts`;
  return `${sign}${formatValue(Math.abs(row.delta), spec)}`;
}

/** One extremes facet: title, direction, rows start → end with the change bar. Neutral colours (increase/decrease). */
export function ExtremeFacetBlock({ facet }: { facet: ExtremeFacet }) {
  const ind = facet.indicator;
  const spec: FormatSpec = { format: ind.format, unit: ind.unit, unit_short: ind.unit_short, precision: ind.precision, frequency: 'A', name: ind.short_name ?? ind.name, higher_is_better: ind.higher_is_better };
  const up = facet.direction === 'up';
  const Icon = up ? ArrowUpRight : ArrowDownRight;
  const mags = facet.rows.map((r) => Math.abs((facet.metric === 'pct' ? r.delta_pct : r.delta) ?? 0));
  const max = Math.max(1e-9, ...mags);
  const y0 = facet.rows[0]?.year_start;
  const y1 = facet.rows[0]?.year_end;
  const payload = { indicator: { slug: ind.slug, name: ind.name ?? ind.slug, format: ind.format, unit: ind.unit, unit_short: ind.unit_short, precision: ind.precision, frequency: 'A' as const, higher_is_better: ind.higher_is_better }, value: null, country: null, downloadHref: routes.indicatorDownload(ind.slug) };
  return (
    <section id={facet.id} className="hairline min-w-0 scroll-mt-28 pb-8 pt-6" aria-labelledby={`${facet.id}-h`}>
      <div className="mb-3 flex flex-wrap items-end justify-between gap-x-6 gap-y-2">
        <div className="min-w-0">
          <h2 id={`${facet.id}-h`} className="display text-xl text-ink md:text-2xl">
            {facet.title}
          </h2>
          <p className="mt-0.5 flex flex-wrap items-center gap-x-2 text-sm text-ink-2">
            <span className={cn('inline-flex items-center gap-0.5 font-medium', up ? 'text-inc' : 'text-dec')}>
              <Icon size={14} aria-hidden /> {up ? t('extremes.direction.up') : t('extremes.direction.down')}
            </span>
            <span className="text-ink-3">·</span>
            <Link href={routes.indicator(ind.slug)} className="link-quiet text-ink">
              {ind.name}
            </Link>
            {y0 && y1 ? (
              <span className="tnum text-ink-3">
                · {y0}–{y1} · {t('extremes.n', { n: facet.n })}
              </span>
            ) : null}
          </p>
        </div>
        <div className="flex flex-wrap gap-x-4 text-sm">
          <Link href={routes.ranking(ind.slug)} className="inline-flex min-h-[44px] items-center text-accent hover:underline md:min-h-[32px]">
            {t('extremes.openRanking')} →
          </Link>
          <Link href={routes.explore({ indicator: ind.slug, year: y1 ?? null })} className="inline-flex min-h-[44px] items-center text-accent hover:underline md:min-h-[32px]">
            {t('extremes.explore')} →
          </Link>
        </div>
      </div>
      <ol className="divide-y divide-rule">
        {facet.rows.map((r, i) => {
          const mag = Math.abs((facet.metric === 'pct' ? r.delta_pct : r.delta) ?? 0);
          const pct = (mag / max) * 100;
          return (
            <li key={r.country.id} className="grid grid-cols-[1.5rem_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-0.5 py-1.5 sm:grid-cols-[1.5rem_minmax(0,12rem)_minmax(0,1fr)_minmax(9rem,auto)]">
              <span className="tnum text-right text-xs text-ink-3">{i + 1}</span>
              <Link href={routes.country(r.country.slug ?? r.country.id.toLowerCase())} className="link-quiet col-span-2 flex min-h-[40px] min-w-0 items-center gap-1.5 text-sm text-ink sm:col-span-1 sm:min-h-[32px]">
                <span aria-hidden>{r.country.flag}</span>
                <span className="truncate">{r.country.name}</span>
              </Link>
              <div className="col-start-2 row-start-2 h-2.5 min-w-0 self-center sm:col-start-3 sm:row-start-1 sm:h-3.5" aria-hidden>
                <div className={cn('h-full rounded-r-sm', up ? 'bg-inc' : 'bg-dec')} style={{ width: `${Math.max(1.5, pct)}%`, opacity: 0.85 }} />
              </div>
              <div className="tnum col-start-3 row-start-2 text-right text-sm sm:col-start-4 sm:row-start-1">
                <span className={cn('font-semibold', up ? 'text-inc' : 'text-dec')}>{changeText(r, facet.metric, spec)}</span>
                <span className="block text-2xs text-ink-3">
                  {r.formatted_start ?? formatValue(r.value_start, spec)} <span aria-hidden>→</span> <span className="sr-only">{t('extremes.to')}</span> {r.formatted_end ?? formatValue(r.value_end, spec)}
                  {r.year_start && r.year_end && (r.year_start !== y0 || r.year_end !== y1) ? ` (${r.year_start}–${r.year_end})` : ''}
                </span>
              </div>
            </li>
          );
        })}
      </ol>
      <div className="mt-2">
        <SourceLine provenance={facet.provenance} payload={payload} />
      </div>
    </section>
  );
}