'use client';
import { useRouter } from 'next/navigation';
import { useCallback, useId, useState, type ReactNode } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { formatValue } from '@/lib/format';
import { MAP_HEIGHT, MAP_WIDTH } from '@/lib/map-geo';
import { routes } from '@/lib/site';
import type { FormatSpec as Spec } from '@/lib/types';
import { seqVar } from './palette';

export interface ChoroplethFeature {
  iso3: string | null;
  name: string;
  slug: string | null;
  flag: string | null;
  d: string;
  value: number | null;
  cls: number | null;
}

/** Map a class index (0..k-1) onto the 7-step sequential ramp. */
export function stepFor(cls: number, k: number): number {
  if (k <= 1) return 4;
  const start = k >= 6 ? 1 : 2;
  const end = 7;
  return Math.round(start + (cls / (k - 1)) * (end - start));
}

/** Legend items (class → label) from API quantile breaks; shared by every choropleth wrapper. */
export function legendFromBreaks(breaks: number[], min: number | null, max: number | null, spec: Spec): Array<{ cls: number; label: string }> {
  const k = breaks.length + 1;
  return Array.from({ length: k }, (_, i) => {
    const lo = i === 0 ? min : breaks[i - 1]!;
    const hi = i === k - 1 ? max : breaks[i]!;
    return { cls: i, label: `${formatValue(lo, spec)} – ${formatValue(hi, spec)}` };
  });
}

/** Class index 0..k for a value against sorted quantile breaks. */
export function classFor(value: number, breaks: number[]): number {
  let i = 0;
  while (i < breaks.length && value >= breaks[i]!) i++;
  return i;
}

/**
 * Interactive SVG world map: hover (mouse) shows the floating label; on touch the first tap selects and
 * shows the label with an "Open" link, a click with a mouse navigates (or calls `onSelect` when given).
 * Explicit hatched fill for no data. `selectedId` outlines one country; `renderLabel` customises the tooltip.
 */
export function ChoroplethView({
  features,
  sphere,
  legend,
  k,
  spec,
  summary,
  title,
  height,
  compact,
  className,
  onSelect,
  selectedId,
  renderLabel,
  showLegend = true,
  showHint = true,
  fillFor,
}: {
  features: ChoroplethFeature[];
  sphere: string;
  legend: Array<{ cls: number; label: string }>;
  k: number;
  spec: Spec;
  summary: string;
  title: string;
  height?: number;
  compact?: boolean;
  className?: string;
  /** When given, clicking / "Open" calls this instead of navigating to the country page. */
  onSelect?: (f: ChoroplethFeature) => void;
  selectedId?: string | null;
  renderLabel?: (f: ChoroplethFeature) => ReactNode;
  showLegend?: boolean;
  showHint?: boolean;
  /** Override the class → colour mapping (e.g. a diverging ramp). */
  fillFor?: (f: ChoroplethFeature) => string;
}) {
  const router = useRouter();
  const id = useId();
  const [active, setActive] = useState<{ f: ChoroplethFeature; x: number; y: number; sticky: boolean } | null>(null);

  const place = useCallback((e: React.PointerEvent<SVGPathElement>, f: ChoroplethFeature, sticky: boolean) => {
    const box = e.currentTarget.ownerSVGElement?.parentElement?.getBoundingClientRect();
    if (!box) return;
    setActive({ f, x: e.clientX - box.left, y: e.clientY - box.top, sticky });
  }, []);

  const open = (f: ChoroplethFeature) => {
    if (onSelect) {
      onSelect(f);
      setActive(null);
      return;
    }
    if (f.slug) router.push(routes.country(f.slug));
  };
  const fill = (f: ChoroplethFeature) => (fillFor ? fillFor(f) : f.cls != null ? seqVar(stepFor(f.cls, k)) : `url(#${id}-hatch)`);
  const selected = selectedId ? features.find((f) => f.iso3 === selectedId) ?? null : null;

  return (
    <figure className={cn('min-w-0', className)}>
      <div className="relative w-full" style={{ aspectRatio: `${MAP_WIDTH} / ${MAP_HEIGHT}`, maxHeight: height }} onPointerLeave={() => setActive((a) => (a?.sticky ? a : null))}>
        <svg viewBox={`0 0 ${MAP_WIDTH} ${MAP_HEIGHT}`} className="h-full w-full" role="img" aria-label={summary}>
          <title>{title}</title>
          <desc>{summary}</desc>
          <defs>
            <pattern id={`${id}-hatch`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
              <rect width="6" height="6" fill="var(--nodata)" />
              <line x1="0" y1="0" x2="0" y2="6" stroke="var(--rule-strong)" strokeWidth="1.5" />
            </pattern>
          </defs>
          <path d={sphere} fill="var(--map-water)" stroke="var(--rule)" strokeWidth={1} />
          <g stroke="var(--map-stroke)" strokeWidth={0.6} strokeLinejoin="round">
            {features.map((f, i) => {
              const isActive = active?.f === f;
              const interactive = !!f.slug || (!!onSelect && !!f.iso3);
              return (
                <path
                  key={f.iso3 ?? `${f.name}-${i}`}
                  d={f.d}
                  fill={fill(f)}
                  className={cn(interactive && 'cursor-pointer', 'transition-[fill-opacity] duration-100')}
                  fillOpacity={isActive ? 0.75 : 1}
                  tabIndex={interactive ? 0 : -1}
                  role={interactive ? (onSelect ? 'button' : 'link') : undefined}
                  aria-label={`${f.name}: ${formatValue(f.value, spec)}`}
                  onPointerMove={(e) => {
                    if (e.pointerType === 'mouse') place(e, f, false);
                  }}
                  onPointerDown={(e) => {
                    if (e.pointerType !== 'mouse') {
                      e.preventDefault();
                      place(e, f, true);
                    }
                  }}
                  onClick={(e) => {
                    // Mouse: open. Touch: the label carries the action (first tap selects).
                    if ((e.nativeEvent as PointerEvent).pointerType === 'mouse' || (e as unknown as { detail: number }).detail === 0) open(f);
                  }}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && interactive) open(f);
                  }}
                  onFocus={(e) => {
                    const b = e.currentTarget.getBBox();
                    setActive({ f, x: ((b.x + b.width / 2) / MAP_WIDTH) * (e.currentTarget.ownerSVGElement?.clientWidth ?? MAP_WIDTH), y: (b.y / MAP_HEIGHT) * (e.currentTarget.ownerSVGElement?.clientHeight ?? MAP_HEIGHT), sticky: false });
                  }}
                >
                  <title>{`${f.name}: ${formatValue(f.value, spec)}`}</title>
                </path>
              );
            })}
            {selected ? <path d={selected.d} fill="none" stroke="var(--ink)" strokeWidth={1.6} pointerEvents="none" /> : null}
          </g>
        </svg>
        {active ? (
          <div className="pointer-events-none absolute z-10 rounded-sm border border-rule bg-surface px-2.5 py-1.5 text-xs shadow-pop" style={{ left: Math.max(0, Math.min(active.x + 10, (typeof window !== 'undefined' ? window.innerWidth : 9999) - 240)), top: Math.max(0, active.y - 44), maxWidth: 230 }}>
            <div className="flex items-center gap-1.5 font-medium text-ink">
              {active.f.flag ? <span aria-hidden>{active.f.flag}</span> : null}
              <span className="truncate">{active.f.name}</span>
            </div>
            {renderLabel ? renderLabel(active.f) : <div className="tnum text-ink-2">{formatValue(active.f.value, spec)}</div>}
            {active.sticky && (active.f.slug || onSelect) ? (
              <button type="button" className="pointer-events-auto mt-1 min-h-[32px] text-accent underline" onClick={() => open(active.f)}>
                {t('metric.open', { name: active.f.name })} →
              </button>
            ) : null}
          </div>
        ) : null}
      </div>
      {showLegend ? (
        <figcaption className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-2xs text-ink-2">
          {!compact ? <span className="mr-1 font-medium text-ink">{title}</span> : null}
          <ul className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
            {legend.map((l) => (
              <li key={l.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(l.cls, k)) }} />
                {l.label}
              </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>
          </ul>
          {showHint ? (
            <>
              <span className="ml-auto hidden text-ink-3 md:inline">{t('chart.map.hoverHint')}</span>
              <span className="ml-auto text-ink-3 md:hidden">{t('chart.map.tapHint')}</span>
            </>
          ) : null}
        </figcaption>
      ) : null}
    </figure>
  );
}