'use client';
import { X } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useMemo, useRef, useState } from 'react';
import { t } from '@/i18n';
import { clientExplore } from '@/lib/client-api-explore';
import { cn } from '@/lib/cn';
import { routes } from '@/lib/site';
import type { FormatSpec, Series } from '@/lib/types';
import { LineChart, type LineSeries } from '@/components/charts/line-chart';
import { pointsFromSeries } from '@/components/charts/scales';
import { seriesVar } from '@/components/charts/palette';
import { EmptyState } from '@/components/data/empty-state';
import type { ProvenancePayload } from '@/components/data/provenance-context';
import { EntityPicker, type PickedEntity } from '@/components/explore/entity-picker';

export interface CompareCountry {
  id: string;
  slug: string;
  name: string;
  flag: string | null;
}

const MAX = 5;

/**
 * Country comparison teaser on an indicator page: chips for the selected countries (≤ 5), a typeahead to add
 * one, and a multi-series LineChart from `/series?country=&indicator=`. Colour slot follows the country's
 * position in the selection (stable while it stays selected).
 */
export function IndicatorCompare({ slug, spec, initialCountries, initialSeries, payload }: { slug: string; spec: FormatSpec; initialCountries: CompareCountry[]; initialSeries: Series[]; payload: ProvenancePayload | null }) {
  const [countries, setCountries] = useState<CompareCountry[]>(initialCountries);
  const [seriesById, setSeriesById] = useState<Record<string, Series | null>>(() => Object.fromEntries(initialSeries.map((s) => [s.country.id, s])));
  const [loading, setLoading] = useState(false);
  const abortRef = useRef<AbortController | null>(null);

  useEffect(() => {
    const missing = countries.filter((c) => seriesById[c.id] === undefined).map((c) => c.id);
    if (missing.length === 0) return;
    abortRef.current?.abort();
    const ctrl = new AbortController();
    abortRef.current = ctrl;
    setLoading(true);
    clientExplore
      .seriesBundle(missing, slug, ctrl.signal)
      .then((r) => {
        const next: Record<string, Series | null> = {};
        for (const id of missing) next[id] = r.series.find((s) => s.country.id === id) ?? null;
        setSeriesById((m) => ({ ...m, ...next }));
      })
      .catch((e) => {
        if ((e as Error).name !== 'AbortError') setSeriesById((m) => ({ ...m, ...Object.fromEntries(missing.map((id) => [id, null])) }));
      })
      .finally(() => {
        if (!ctrl.signal.aborted) setLoading(false);
      });
    return () => ctrl.abort();
  }, [countries, slug, seriesById]);

  const add = (e: PickedEntity) => {
    if (countries.length >= MAX || countries.some((c) => c.id === e.id)) return;
    setCountries((cs) => [...cs, { id: e.id, slug: e.slug, name: e.name, flag: e.flag ?? null }]);
  };
  const remove = (id: string) => setCountries((cs) => cs.filter((c) => c.id !== id));

  const lines: LineSeries[] = useMemo(() => {
    const out: LineSeries[] = [];
    countries.forEach((c, i) => {
      const s = seriesById[c.id];
      if (!s) return;
      const points = pointsFromSeries(s.values);
      if (points.length) out.push({ id: c.id, name: c.name, points, colorIndex: i });
    });
    return out;
  }, [countries, seriesById]);
  const firstProv = countries.map((c) => seriesById[c.id]?.provenance).find(Boolean) ?? null;

  return (
    <div className="min-w-0">
      <div className="mb-3 flex flex-wrap items-center gap-2">
        {countries.map((c, i) => (
          <span key={c.id} className="inline-flex h-11 items-center gap-1.5 rounded-sm border border-rule pl-2.5 pr-1 text-sm text-ink md:h-9">
            <span aria-hidden className="inline-block h-2.5 w-2.5 rounded-xs" style={{ background: seriesVar(i) }} />
            {c.flag ? <span aria-hidden>{c.flag}</span> : null}
            <Link href={routes.country(c.slug)} className="link-quiet inline-flex h-11 items-center md:h-9">
              {c.name}
            </Link>
            <button type="button" onClick={() => remove(c.id)} className="grid h-11 w-11 place-items-center text-ink-3 hover:text-ink md:h-7 md:w-8" aria-label={t('indicator.compare.remove', { name: c.name })}>
              <X size={13} aria-hidden />
            </button>
          </span>
        ))}
        {countries.length < MAX ? (
          <EntityPicker type="country" placeholder={countries.length ? t('indicator.compare.add') : t('indicator.compare.search')} onPick={add} exclude={countries.map((c) => c.id)} className="w-56" size="sm" />
        ) : (
          <span className="text-xs text-ink-3">{t('indicator.compare.max')}</span>
        )}
      </div>
      <div className={cn('transition-opacity', loading && 'opacity-60')} aria-busy={loading} style={{ minHeight: 300 }}>
        {lines.length === 0 && !loading ? (
          <EmptyState compact title={t('indicator.compare.none')} />
        ) : lines.length ? (
          <LineChart series={lines} spec={spec} height={260} provenance={firstProv} payload={payload} defaultWidth={720} endLabels={false} />
        ) : (
          <div className="grid place-items-center text-sm text-ink-3" style={{ minHeight: 260 }}>
            {t('common.loading')}
          </div>
        )}
      </div>
      {countries.length >= 2 ? (
        <Link href={routes.compare(...countries.map((c) => c.slug))} className="mt-2 inline-flex min-h-[40px] items-center text-sm text-accent hover:underline">
          {t('indicator.compare.open')} →
        </Link>
      ) : null}
    </div>
  );
}