'use client';
import { X } from 'lucide-react';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react';
import { t } from '@/i18n';
import { clientCompare } from '@/lib/client-api-compare';
import type { CountryLite, RankHistoryResponse } from '@/lib/types-compare';
import { seriesVar } from '@/components/charts/palette';
import { CountryTypeahead } from '@/components/compare/country-picker';
import { RankHistoryChart, type RankSeries } from './rank-history-chart';

export const MAX_HISTORY = 5;

/**
 * "Rank over time" panel: up to 5 countries (default top 3 + highlighted), rank-by-year chart. The selection is
 * written to `?history=ISO3,ISO3` (router.replace); new selections fetch `/rankings/{slug}/history` client-side.
 */
export function RankHistoryPanel({ slug, countries, initialIds, initial }: { slug: string; countries: CountryLite[]; initialIds: string[]; initial: RankHistoryResponse | null }) {
  const router = useRouter();
  const pathname = usePathname();
  const params = useSearchParams();
  const [ids, setIds] = useState<string[]>(initialIds);
  const [data, setData] = useState<RankHistoryResponse | null>(initial);
  const [loading, setLoading] = useState(false);
  const byId = useMemo(() => new Map(countries.map((c) => [c.id, c])), [countries]);
  const exclude = useMemo(() => new Set(ids.map((id) => byId.get(id)?.slug ?? id.toLowerCase())), [ids, byId]);

  useEffect(() => {
    const key = ids.join(',');
    const have = data ? data.countries.map((c) => c.id).join(',') : '';
    if (!ids.length || key === have) return;
    const ctrl = new AbortController();
    setLoading(true);
    clientCompare
      .rankHistory(slug, ids, ctrl.signal)
      .then((r) => setData(r))
      .catch((e) => {
        if ((e as Error).name !== 'AbortError') setData(null);
      })
      .finally(() => setLoading(false));
    return () => ctrl.abort();
  }, [ids, slug, data]);

  const apply = (next: string[]) => {
    setIds(next);
    const p = new URLSearchParams(params.toString());
    if (next.length) p.set('history', next.join(','));
    else p.delete('history');
    const s = p.toString();
    router.replace(`${pathname}${s ? `?${s}` : ''}`, { scroll: false });
  };

  const series: RankSeries[] = ids.map((id, i) => {
    const c = byId.get(id) ?? data?.countries.find((x) => x.id === id);
    const pts = (data?.series[id] ?? []).filter((p) => p.rank != null).map((p) => ({ year: p.year, rank: p.rank!, n: p.n }));
    return { id, name: c?.name ?? id, flag: c?.flag ?? null, colorIndex: i, points: pts };
  });

  return (
    <div>
      <div className="flex flex-wrap items-center gap-1.5">
        {ids.map((id, i) => {
          const c = byId.get(id);
          return (
            <span key={id} className="inline-flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface pl-2 text-sm md:h-9">
              <span aria-hidden className="h-2 w-2 shrink-0 rounded-full" style={{ background: seriesVar(i) }} />
              <span aria-hidden>{c?.flag}</span>
              <span className="max-w-[9rem] truncate text-ink">{c?.name ?? id}</span>
              <button type="button" onClick={() => apply(ids.filter((x) => x !== id))} className="grid h-11 w-9 place-items-center text-ink-3 hover:text-down md:h-9 md:w-7" aria-label={t('ranking.history.remove', { name: c?.name ?? id })}>
                <X size={14} aria-hidden />
              </button>
            </span>
          );
        })}
        {ids.length < MAX_HISTORY ? <CountryTypeahead countries={countries} exclude={exclude} onPick={(c) => apply([...ids, c.id])} placeholder={t('ranking.history.pick')} className="w-full sm:w-64" /> : <span className="text-xs text-ink-3">{t('ranking.history.full', { max: MAX_HISTORY })}</span>}
      </div>
      <div className={loading ? 'mt-3 opacity-60 transition-opacity' : 'mt-3'} aria-busy={loading}>
        {ids.length === 0 ? <p className="py-6 text-sm text-ink-3">{t('ranking.history.empty')}</p> : <RankHistoryChart series={series} />}
      </div>
    </div>
  );
}