'use client';
import { ArrowRight, ExternalLink, Scale, X } from 'lucide-react';
import Link from 'next/link';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { formatValue, grouped, ordinal } from '@/lib/format';
import { regionShort } from '@/lib/regions';
import { routes } from '@/lib/site';
import type { FormatSpec, Provenance } from '@/lib/types';
import type { PointCountry } from '@/lib/types-analytics';
import { seqVar } from '@/components/charts/palette';
import { Sparkline } from '@/components/charts/sparkline';
import type { SeriesPoint } from '@/components/charts/scales';
import { useProvenance } from '@/components/data/provenance-context';
import { stepFor } from './geo';

export interface CountryYearInfo {
  country: PointCountry;
  value: number | null;
  year: number;
  rankWorld: number | null;
  nWorld: number;
  rankRegion: number | null;
  nRegion: number;
  series: SeriesPoint[];
  firstYear: number | null;
  lastYear: number | null;
  latestValue: number | null;
  latestYear: number | null;
}

/** Legend for the pooled quantile classes (stable while scrubbing). */
export function ClassLegend({ breaks, min, max, spec, k, compact, className }: { breaks: number[]; min: number | null; max: number | null; spec: FormatSpec; k: number; compact?: boolean; className?: string }) {
  const items = Array.from({ length: k }, (_, i) => {
    const lo = i === 0 ? min : breaks[i - 1]!;
    const hi = i === k - 1 ? max : breaks[i]!;
    return { cls: i, lo, hi };
  });
  return (
    <ol className={cn('flex flex-wrap items-center gap-x-3 gap-y-1 text-2xs text-ink-2', className)} aria-label={t('common.legend')}>
      {items.map((it) => (
        <li key={it.cls} className="inline-flex items-center gap-1 tnum">
          <span aria-hidden className="inline-block h-2.5 w-3.5 rounded-xs" style={{ background: seqVar(stepFor(it.cls, k)) }} />
          {compact ? (it.cls === 0 ? formatValue(it.lo, spec) : it.cls === k - 1 ? formatValue(it.hi, spec) : '') : `${formatValue(it.lo, spec)} – ${formatValue(it.hi, spec)}`}
        </li>
      ))}
      <li className="inline-flex items-center gap-1">
        <span aria-hidden className="no-data-hatch inline-block h-2.5 w-3.5 rounded-xs" />
        {t('chart.legend.noData')}
      </li>
    </ol>
  );
}

/** Floating hover label on the map: country · value · year · world / regional rank. */
export function MapTooltip({ info, spec, x, y, sticky, onOpen }: { info: CountryYearInfo; spec: FormatSpec; x: number; y: number; sticky: boolean; onOpen: () => void }) {
  return (
    <div className="pointer-events-none absolute z-10 max-w-[240px] rounded-sm border border-rule bg-surface/95 px-2.5 py-1.5 text-xs shadow-pop backdrop-blur" style={{ left: Math.min(x + 12, Math.max(0, x + 12)), top: Math.max(4, y - 64) }}>
      <div className="flex items-center gap-1.5 font-medium text-ink">
        {info.country.flag ? <span aria-hidden>{info.country.flag}</span> : null}
        <span className="truncate">{info.country.name}</span>
      </div>
      <div className="tnum text-ink">
        <span className="font-semibold">{formatValue(info.value, spec)}</span>
        <span className="text-ink-3"> · {info.year}</span>
      </div>
      {info.value != null && info.rankWorld != null ? (
        <div className="tnum text-2xs text-ink-2">
          {t('explorer.rank.world', { rank: ordinal(info.rankWorld), n: grouped(info.nWorld) })}
          {info.rankRegion != null && info.country.region ? ` · ${t('explorer.rank.region', { rank: ordinal(info.rankRegion), region: regionShort(info.country.region) ?? info.country.region })}` : ''}
        </div>
      ) : info.value == null ? (
        <div className="text-2xs text-ink-3">{t('explorer.noValueYear', { year: info.year })}</div>
      ) : null}
      {sticky ? (
        <button type="button" onClick={onOpen} className="pointer-events-auto mt-1 inline-flex min-h-[32px] items-center text-accent underline">
          {t('explorer.drawer.details')} →
        </button>
      ) : null}
    </div>
  );
}

/** Country drawer content (right panel on desktop, bottom sheet on phones). */
export function CountryPanel({ info, spec, indicatorSlug, indicatorName, provenance, onClose, onCompareHref, trajectoriesHref, closeClassName }: { info: CountryYearInfo; spec: FormatSpec; indicatorSlug: string; indicatorName: string; provenance: Provenance | null; onClose: () => void; onCompareHref: string; trajectoriesHref: string; closeClassName?: string }) {
  const { open } = useProvenance();
  const c = info.country;
  const slug = c.slug ?? c.id.toLowerCase();
  const dir = info.series.length >= 2 ? Math.sign((info.series[info.series.length - 1]!.value ?? 0) - (info.series[info.series.length - 2]!.value ?? 0)) : 0;
  return (
    <div className="flex h-full min-h-0 flex-col">
      <div className="flex items-start gap-3 border-b border-rule pb-3">
        <span aria-hidden className="text-4xl leading-none">
          {c.flag}
        </span>
        <div className="min-w-0 flex-1">
          <h2 className="display truncate text-xl text-ink">{c.name}</h2>
          <p className="text-xs text-ink-3">
            {regionShort(c.region) ?? c.region ?? ''}
            {c.income ? ` · ${c.income}` : ''}
          </p>
        </div>
        <button type="button" onClick={onClose} className={cn('tap -mr-2 grid place-items-center rounded-sm text-ink-2 hover:bg-surface-2 md:min-h-[32px] md:min-w-[32px]', closeClassName)} aria-label={t('common.close')}>
          <X size={18} aria-hidden />
        </button>
      </div>
      <div className="min-h-0 flex-1 overflow-y-auto py-3">
        <div className="text-xs font-medium text-ink-2">{indicatorName}</div>
        <button
          type="button"
          onClick={() =>
            open({
              indicator: { slug: indicatorSlug, name: indicatorName, format: spec.format, unit: spec.unit, unit_short: spec.unit_short, precision: spec.precision, frequency: 'A', higher_is_better: spec.higher_is_better },
              value: info.value != null ? { value: info.value, period: `${info.year}-01-01`, year: info.year, unit: spec.unit, provenance } : null,
              country: { id: c.id, slug: c.slug, name: c.name ?? c.id, flag: c.flag },
            })
          }
          className="-mx-1 mt-1 flex min-h-[44px] flex-col items-start rounded-sm px-1 text-left hover:bg-surface-2"
          aria-label={t('common.openProvenance')}
        >
          <span className="pnum text-3xl font-semibold leading-none text-ink">{info.value != null ? formatValue(info.value, spec) : <span className="text-ink-3">{t('common.noData')}</span>}</span>
          <span className="tnum mt-1 text-xs text-ink-3">
            {info.year}
            {info.value == null && info.latestValue != null ? ` · ${t('explorer.drawer.latest', { value: formatValue(info.latestValue, spec), year: info.latestYear ?? '' })}` : ''}
          </span>
        </button>
        {info.value != null && info.rankWorld != null ? (
          <p className="tnum mt-2 text-sm text-ink-2">
            <span className="font-medium text-ink">{t('explorer.rank.world', { rank: ordinal(info.rankWorld), n: grouped(info.nWorld) })}</span>
            {info.rankRegion != null && c.region ? <span className="text-ink-3"> · {t('explorer.rank.region', { rank: ordinal(info.rankRegion), region: regionShort(c.region) ?? c.region })}</span> : null}
          </p>
        ) : null}
        {info.series.length >= 2 ? (
          <div className="mt-4">
            <div className="flex items-baseline justify-between text-2xs text-ink-3">
              <span>{t('explorer.drawer.history', { y0: info.firstYear ?? '', y1: info.lastYear ?? '' })}</span>
            </div>
            <Sparkline points={info.series} width={320} height={64} className="mt-1 h-16 w-full" direction={dir > 0 ? 'up' : dir < 0 ? 'down' : 'flat'} ariaLabel={t('explorer.drawer.sparkAria', { name: c.name ?? c.id, indicator: indicatorName })} />
            <div className="tnum flex justify-between text-2xs text-ink-3">
              <span>{info.firstYear}</span>
              <span>{info.lastYear}</span>
            </div>
          </div>
        ) : null}
        <div className="mt-5 flex flex-col gap-2">
          <Link href={routes.country(slug)} className="inline-flex min-h-[44px] items-center justify-center gap-2 rounded-sm bg-ink px-4 text-sm font-medium text-paper hover:bg-accent hover:text-accent-ink md:min-h-[38px]">
            {t('explorer.drawer.open')} <ArrowRight size={15} aria-hidden />
          </Link>
          <Link href={onCompareHref} className="inline-flex min-h-[44px] items-center justify-center gap-2 rounded-sm border border-rule px-4 text-sm text-ink hover:bg-surface-2 md:min-h-[38px]">
            <Scale size={15} aria-hidden /> {t('explorer.drawer.compare')}
          </Link>
          <Link href={trajectoriesHref} className="inline-flex min-h-[44px] items-center justify-center gap-2 rounded-sm border border-rule px-4 text-sm text-ink hover:bg-surface-2 md:min-h-[38px]">
            <ExternalLink size={14} aria-hidden /> {t('explorer.drawer.trajectories')}
          </Link>
          <Link href={routes.countryIndicator(slug, topicOf(indicatorSlug), indicatorSlug)} className="inline-flex min-h-[44px] items-center text-sm text-accent hover:underline md:min-h-[32px]">
            {t('explorer.drawer.series')} →
          </Link>
        </div>
      </div>
    </div>
  );
}

/** Best-effort topic for the country topic page link (falls back to the indicator page when unknown). */
function topicOf(slug: string): string {
  return TOPIC_HINT[slug] ?? 'economy';
}
const TOPIC_HINT: Record<string, string> = {
  population: 'population', 'population-growth': 'population', 'median-age': 'population', 'fertility-rate': 'population', 'urban-population-share': 'population',
  gdp: 'economy', 'gdp-per-capita': 'economy', 'gdp-per-capita-ppp': 'economy', 'gdp-growth': 'economy', inflation: 'economy',
  'unemployment-rate': 'labor', 'life-expectancy': 'health', 'infant-mortality-rate': 'health', 'general-government-gross-debt-pct-gdp': 'government',
  'co2-per-capita': 'climate', 'co2-emissions': 'climate', 'renewable-electricity-share': 'energy', 'energy-use-per-capita': 'energy', 'internet-users': 'digital',
};