'use client';
import { ArrowDown, ArrowUp } from 'lucide-react';
import Link from 'next/link';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { displayValue, isNum, ordinal } from '@/lib/format';
import { routes } from '@/lib/site';
import type { MetricValue } from '@/lib/types';
import type { CompareSnapshotRow, CountryLite } from '@/lib/types-compare';
import { seriesVar } from '@/components/charts/palette';
import { payloadFor } from '@/components/data/metric';
import { useProvenance } from '@/components/data/provenance-context';
import { chartHrefFor } from './snapshot-table';
import type { CompareState } from '@/lib/compare-state';

/**
 * Head-to-head view for exactly two countries: the indicator in the middle, one value per side, mirrored bars
 * proportional to the larger value, the year under each value, and a thin world-percentile track with both
 * countries marked (from rank / n). No "winner" language — a small glyph shows the declared direction only.
 */
export function HeadToHead({ rows, countries, slugs, state }: { rows: CompareSnapshotRow[]; countries: CountryLite[]; slugs: string[]; state: CompareState }) {
  const { open } = useProvenance();
  const [a, b] = countries;
  if (!a || !b) return null;
  const visible = rows.filter((r) => r.values[a.id]?.has_data || r.values[b.id]?.has_data);
  if (!visible.length) return <p className="py-6 text-sm text-ink-3">{t('compare.snapshot.empty')}</p>;
  const openCell = (m: MetricValue, c: CountryLite, name: string) => open(payloadFor(m, { id: c.id, slug: c.slug, name: c.name, flag: c.flag }, { name }));

  return (
    <div className="min-w-0">
      <div className="grid grid-cols-[1fr_auto_1fr] items-end gap-3 border-b border-rule pb-3">
        {[a, b].map((c, i) => (
          <Link key={c.id} href={routes.country(c.slug)} className={cn('link-quiet flex min-w-0 items-center gap-2', i === 1 && 'flex-row-reverse text-right')}>
            <span aria-hidden className="text-3xl leading-none md:text-4xl">
              {c.flag}
            </span>
            <span className="min-w-0">
              <span className="display block truncate text-xl leading-tight text-ink md:text-2xl">{c.name}</span>
              <span className="mt-0.5 inline-flex items-center gap-1.5 text-2xs text-ink-3">
                <span aria-hidden className="inline-block h-2 w-2 rounded-full" style={{ background: seriesVar(i) }} />
                {c.id}
              </span>
            </span>
          </Link>
        ))}
        <span className="display col-start-2 row-start-1 self-center text-base text-ink-3 md:text-lg">{t('compare.vs')}</span>
      </div>
      <ol className="divide-y divide-rule">
        {visible.map((r) => {
          const ma = r.values[a.id];
          const mb = r.values[b.id];
          const va = ma?.has_data && isNum(ma.value) ? ma.value : null;
          const vb = mb?.has_data && isNum(mb.value) ? mb.value : null;
          const max = Math.max(Math.abs(va ?? 0), Math.abs(vb ?? 0)) || 1;
          const name = r.indicator.short_name ?? r.indicator.name ?? r.indicator.slug;
          const hib = r.indicator.higher_is_better;
          const pctOf = (m: MetricValue | undefined) => (m && isNum(m.rank_world) && isNum(m.n_world) && m.n_world > 1 ? (1 - (m.rank_world - 1) / (m.n_world - 1)) * 100 : null);
          const pa = pctOf(ma);
          const pb = pctOf(mb);
          return (
            <li key={r.indicator.slug} className="py-3">
              <div className="mb-1 flex items-center justify-center gap-1.5 text-center">
                <Link href={chartHrefFor(slugs, state, r.indicator)} className="link-quiet -my-2 inline-flex min-h-[44px] items-center py-2 md:my-0 md:min-h-0 md:py-0 text-sm font-semibold text-ink">
                  {name}
                </Link>
                {hib != null ? (
                  <span className="inline-flex items-center text-2xs text-ink-3" title={hib ? t('compare.snapshot.hib.higher') : t('compare.snapshot.hib.lower')}>
                    {hib ? <ArrowUp size={11} aria-hidden /> : <ArrowDown size={11} aria-hidden />}
                    <span className="sr-only">{hib ? t('compare.snapshot.hib.higher') : t('compare.snapshot.hib.lower')}</span>
                  </span>
                ) : null}
                <span className="text-2xs text-ink-3">{r.indicator.unit}</span>
              </div>
              <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-x-3">
                <Side m={ma} c={a} i={0} max={max} align="right" onOpen={() => ma && openCell(ma, a, r.indicator.name ?? name)} />
                <Side m={mb} c={b} i={1} max={max} align="left" onOpen={() => mb && openCell(mb, b, r.indicator.name ?? name)} />
              </div>
              {pa != null || pb != null ? (
                <div className="mx-auto mt-2 max-w-md">
                  <div className="relative h-1.5 rounded-xs bg-surface-2" aria-hidden>
                    {pa != null ? <span className="absolute top-1/2 h-3 w-1 -translate-x-1/2 -translate-y-1/2 rounded-xs" style={{ left: `${pa}%`, background: seriesVar(0) }} /> : null}
                    {pb != null ? <span className="absolute top-1/2 h-3 w-1 -translate-x-1/2 -translate-y-1/2 rounded-xs" style={{ left: `${pb}%`, background: seriesVar(1) }} /> : null}
                  </div>
                  <div className="tnum mt-0.5 flex justify-between text-2xs text-ink-3">
                    <span>{t('compare.h2h.pctLow')}</span>
                    <span className="sr-only">
                      {a.name}: {pa != null ? ordinal(Math.round(pa)) : t('common.na')} · {b.name}: {pb != null ? ordinal(Math.round(pb)) : t('common.na')}
                    </span>
                    <span>{t('compare.h2h.pctTrack', { n: ma?.n_world ?? mb?.n_world ?? '' })}</span>
                    <span>{t('compare.h2h.pctHigh')}</span>
                  </div>
                </div>
              ) : null}
            </li>
          );
        })}
      </ol>
      <p className="mt-3 text-xs text-ink-3">{t('compare.h2h.note')}</p>
    </div>
  );
}

function Side({ m, c, i, max, align, onOpen }: { m: MetricValue | undefined; c: CountryLite; i: number; max: number; align: 'left' | 'right'; onOpen: () => void }) {
  const has = !!m && m.has_data && isNum(m.value);
  const pct = has ? Math.max(1.5, (Math.abs(m.value!) / max) * 100) : 0;
  return (
    <button type="button" disabled={!has} onClick={onOpen} className={cn('flex min-h-[44px] min-w-0 flex-col justify-center rounded-sm px-1 hover:bg-surface-2 disabled:hover:bg-transparent', align === 'right' ? 'items-end text-right' : 'items-start text-left')} aria-label={has ? `${c.name}: ${displayValue(m!.value, m!, m!.formatted)} (${m!.year ?? ''}). ${t('common.openProvenance')}` : `${c.name}: ${t('common.noData')}`}>
      <span className={cn('tnum text-lg font-semibold leading-tight md:text-xl', has ? 'text-ink' : 'text-ink-3')}>{has ? displayValue(m!.value, m!, m!.formatted) : t('common.noData')}</span>
      <span className={cn('mt-1 flex h-2 w-full', align === 'right' ? 'justify-end' : 'justify-start')} aria-hidden>
        <span className={cn('block h-full', align === 'right' ? 'rounded-l-xs' : 'rounded-r-xs')} style={{ width: `${pct}%`, background: seriesVar(i), opacity: 0.85 }} />
      </span>
      <span className="tnum mt-0.5 text-2xs text-ink-3">
        {has ? m!.year : ''}
        {has && isNum(m!.rank_world) && isNum(m!.n_world) ? ` · ${t('compare.snapshot.rank', { rank: m!.rank_world })} / ${m!.n_world}` : ''}
      </span>
    </button>
  );
}