'use client';
import { Check, Copy, Download, X } from 'lucide-react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { t } from '@/i18n';
import { clientPlatform } from '@/lib/client-api-platform';
import { cn } from '@/lib/cn';
import { grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import { parseList, useUrlState } from '@/lib/url-state';
import type { CountryLite } from '@/lib/types-compare';
import { seriesVar } from '@/components/charts/palette';
import { CountryTypeahead } from '@/components/compare/country-picker';
import { IndicatorSelect, Segmented, type IndicatorOption } from '@/components/controls/indicator-select';

const MAX_COUNTRIES = 20;
const MAX_INDICATORS = 20;
const MIN_YEAR = 1960;

interface Preset {
  key: 'g7' | 'brics' | 'climate';
  countries: string[];
  indicators: string[];
}
const PRESETS: Preset[] = [
  { key: 'g7', countries: ['canada', 'france', 'germany', 'italy', 'japan', 'united-kingdom', 'united-states'], indicators: ['population', 'gdp', 'gdp-per-capita', 'gdp-growth', 'inflation', 'unemployment-rate', 'life-expectancy', 'general-government-gross-debt-pct-gdp'] },
  { key: 'brics', countries: ['brazil', 'russia', 'india', 'china', 'south-africa'], indicators: ['gdp', 'gdp-per-capita-ppp', 'gdp-growth', 'inflation', 'trade-pct-gdp', 'population'] },
  { key: 'climate', countries: ['china', 'united-states', 'india', 'russia', 'japan', 'germany', 'iran', 'saudi-arabia'], indicators: ['co2-emissions', 'co2-per-capita', 'renewable-electricity-share', 'energy-use-per-capita', 'carbon-intensity-electricity'] },
];

/**
 * Dataset builder: countries (≤ 20) × indicators (≤ 20) × year range × format → the exact
 * `/api/v1/compare/download.{fmt}` URL, with a live row estimate for small selections. State lives in the URL
 * (`?countries=&indicators=&from=&to=&format=`) so a build is shareable.
 */
export function DownloadBuilder({ countries, indicators, maxYear }: { countries: CountryLite[]; indicators: IndicatorOption[]; maxYear: number }) {
  const { get, getNum, set } = useUrlState();
  const bySlug = useMemo(() => new Map(countries.map((c) => [c.slug, c])), [countries]);
  const byInd = useMemo(() => new Map(indicators.map((i) => [i.slug, i])), [indicators]);
  const selCountries = parseList(get('countries'), MAX_COUNTRIES).filter((s) => bySlug.has(s));
  const selIndicators = parseList(get('indicators'), MAX_INDICATORS).filter((s) => byInd.has(s));
  const from = getNum('from');
  const to = getNum('to');
  const format = (get('format') === 'json' ? 'json' : 'csv') as 'csv' | 'json';
  const forecast = get('forecast') === '1';
  const [copied, setCopied] = useState(false);
  const [estimate, setEstimate] = useState<{ key: string; rows: number } | null>(null);
  const [estimating, setEstimating] = useState(false);
  const abortRef = useRef<AbortController | null>(null);

  const ids = selCountries.map((s) => bySlug.get(s)!.id);
  const ready = ids.length > 0 && selIndicators.length > 0;
  const q = ready ? routes.compareDownload(ids, selIndicators, { from, to }, format) + (forecast ? '' : '&include_forecast=false') : null;
  const estKey = `${ids.join(',')}|${selIndicators.join(',')}|${from ?? ''}|${to ?? ''}|${forecast}`;

  useEffect(() => {
    if (!ready || ids.length * selIndicators.length > 60) {
      setEstimate(null);
      return;
    }
    if (estimate?.key === estKey) return;
    abortRef.current?.abort();
    const ctrl = new AbortController();
    abortRef.current = ctrl;
    setEstimating(true);
    const timer = setTimeout(() => {
      clientPlatform
        .seriesBundle(ids, selIndicators.slice(0, 12), { from, to }, ctrl.signal)
        .then((r) => {
          const rows = r.series.reduce((a, s) => a + s.values.filter((v) => forecast || !v.is_forecast).length, 0);
          const scale = selIndicators.length > 12 ? selIndicators.length / 12 : 1;
          setEstimate({ key: estKey, rows: Math.round(rows * scale) });
        })
        .catch(() => setEstimate(null))
        .finally(() => {
          if (!ctrl.signal.aborted) setEstimating(false);
        });
    }, 250);
    return () => {
      clearTimeout(timer);
      ctrl.abort();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [estKey, ready]);

  const years: number[] = [];
  for (let y = maxYear; y >= MIN_YEAR; y--) years.push(y);
  const copy = async () => {
    if (!q) return;
    try {
      await navigator.clipboard.writeText(`${window.location.origin}${q}`);
      setCopied(true);
      setTimeout(() => setCopied(false), 1600);
    } catch {
      /* clipboard unavailable */
    }
  };
  const setCountries = (next: string[]) => set({ countries: next.join(',') || null }, 0);
  const setIndicators = (next: string[]) => set({ indicators: next.join(',') || null }, 0);
  const excl = new Set(selCountries);
  const pickerOptions = indicators.filter((i) => !selIndicators.includes(i.slug));

  return (
    <div className="min-w-0">
      {/* Quick starts */}
      <div className="flex flex-wrap items-center gap-1.5 text-sm">
        <span className="text-xs text-ink-3">{t('download.presetHint')}</span>
        {PRESETS.map((p) => (
          <button key={p.key} type="button" onClick={() => set({ countries: p.countries.join(','), indicators: p.indicators.join(',') }, 0)} className="inline-flex h-11 items-center rounded-sm border border-rule px-3 text-sm text-ink-2 hover:border-accent hover:text-accent md:h-9 md:px-2.5">
            {t(`download.preset.${p.key}` as 'download.preset.g7')}
          </button>
        ))}
      </div>

      <div className="mt-5 grid gap-x-10 gap-y-6 lg:grid-cols-2">
        {/* Countries */}
        <div className="min-w-0">
          <div className="mb-1.5 flex items-baseline justify-between">
            <div className="eyebrow">{t('download.countries')}</div>
            <span className="tnum text-xs text-ink-3">
              {selCountries.length}/{MAX_COUNTRIES}
            </span>
          </div>
          {selCountries.length < MAX_COUNTRIES ? <CountryTypeahead countries={countries} exclude={excl} onPick={(c) => setCountries([...selCountries, c.slug])} placeholder={t('download.addCountry')} /> : <p className="text-xs text-ink-3">{t('download.max', { n: MAX_COUNTRIES })}</p>}
          <ul className="mt-2 flex flex-wrap gap-1.5">
            {selCountries.map((s, i) => {
              const c = bySlug.get(s)!;
              return (
                <li key={s}>
                  <span 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 rounded-full" style={{ background: seriesVar(i % 8) }} />
                    <span aria-hidden>{c.flag}</span>
                    <span className="max-w-[10rem] truncate">{c.name}</span>
                    <button type="button" onClick={() => setCountries(selCountries.filter((x) => x !== s))} className="grid h-11 w-9 place-items-center text-ink-3 hover:text-down md:h-9 md:w-7" aria-label={t('download.remove', { name: c.name })}>
                      <X size={14} aria-hidden />
                    </button>
                  </span>
                </li>
              );
            })}
          </ul>
        </div>

        {/* Indicators */}
        <div className="min-w-0">
          <div className="mb-1.5 flex items-baseline justify-between">
            <div className="eyebrow">{t('download.indicators')}</div>
            <span className="tnum text-xs text-ink-3">
              {selIndicators.length}/{MAX_INDICATORS}
            </span>
          </div>
          {selIndicators.length < MAX_INDICATORS ? <IndicatorSelect options={pickerOptions} value="" onChange={(slug) => setIndicators([...selIndicators, slug])} label={t('download.addIndicator')} size="sm" /> : <p className="text-xs text-ink-3">{t('download.max', { n: MAX_INDICATORS })}</p>}
          <ul className="mt-2 flex flex-wrap gap-1.5">
            {selIndicators.map((s) => {
              const i = byInd.get(s)!;
              return (
                <li key={s}>
                  <span className="inline-flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface pl-2.5 text-sm md:h-9">
                    <span className="max-w-[14rem] truncate">{i.short_name ?? i.name}</span>
                    <button type="button" onClick={() => setIndicators(selIndicators.filter((x) => x !== s))} className="grid h-11 w-9 place-items-center text-ink-3 hover:text-down md:h-9 md:w-7" aria-label={t('download.remove', { name: i.name })}>
                      <X size={14} aria-hidden />
                    </button>
                  </span>
                </li>
              );
            })}
          </ul>
        </div>
      </div>

      {/* Years · format */}
      <div className="mt-6 flex flex-wrap items-end gap-x-6 gap-y-3 border-t border-rule pt-4">
        <fieldset className="flex items-center gap-1.5">
          <legend className="eyebrow mb-1.5">{t('download.years')}</legend>
          <label className="inline-flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2 md:h-9">
            <span className="text-2xs uppercase tracking-wide text-ink-3">{t('download.from')}</span>
            <select value={from ?? ''} onChange={(e) => set({ from: e.target.value || null }, 0)} className="tnum bg-transparent text-ink outline-none" aria-label={t('download.from')}>
              <option value="">{t('download.allYears')}</option>
              {years.map((y) => (
                <option key={y} value={y} disabled={to != null && y > to}>
                  {y}
                </option>
              ))}
            </select>
          </label>
          <label className="inline-flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2 md:h-9">
            <span className="text-2xs uppercase tracking-wide text-ink-3">{t('download.to')}</span>
            <select value={to ?? ''} onChange={(e) => set({ to: e.target.value || null }, 0)} className="tnum bg-transparent text-ink outline-none" aria-label={t('download.to')}>
              <option value="">{t('download.allYears')}</option>
              {years.map((y) => (
                <option key={y} value={y} disabled={from != null && y < from}>
                  {y}
                </option>
              ))}
            </select>
          </label>
        </fieldset>
        <div>
          <div className="eyebrow mb-1.5">{t('download.format')}</div>
          <Segmented value={format} onChange={(v) => set({ format: v === 'csv' ? null : v }, 0)} options={[{ value: 'csv', label: 'CSV' }, { value: 'json', label: 'JSON' }]} label={t('download.format')} />
        </div>
        <label className={cn('inline-flex h-11 cursor-pointer items-center gap-1.5 rounded-sm border px-2.5 text-sm md:h-9', forecast ? 'border-ink text-ink' : 'border-rule text-ink-2')}>
          <input type="checkbox" checked={forecast} onChange={(e) => set({ forecast: e.target.checked ? '1' : null }, 0)} className="h-5 w-5 accent-[var(--accent)]" />
          {t('download.forecast')}
        </label>
        {selCountries.length || selIndicators.length ? (
          <button type="button" onClick={() => set({ countries: null, indicators: null, from: null, to: null, format: null, forecast: null }, 0)} className="inline-flex h-11 items-center rounded-sm px-2 text-sm text-ink-2 hover:text-ink md:h-9">
            {t('download.clear')}
          </button>
        ) : null}
      </div>

      {/* Result */}
      <div className="mt-5 border-t border-rule pt-4">
        <div className="flex flex-wrap items-center gap-3">
          <a href={q ?? '#'} aria-disabled={!q} className={cn('inline-flex h-11 items-center gap-2 rounded-sm px-4 text-sm font-medium md:h-10', q ? 'bg-ink text-paper hover:bg-accent hover:text-accent-ink' : 'pointer-events-none bg-surface-2 text-ink-3')} download>
            <Download size={15} aria-hidden /> {t('download.get', { fmt: format.toUpperCase() })}
          </a>
          <span className="tnum text-sm text-ink-2">
            {ready ? t('download.selection', { c: selCountries.length, i: selIndicators.length }) : t('download.needBoth')}
            {ready && (estimate?.key === estKey || estimating) ? <span className="text-ink-3"> · {estimating && estimate?.key !== estKey ? t('download.estimating') : t('download.estimate', { n: grouped(estimate?.rows ?? 0) })}</span> : null}
          </span>
        </div>
        {q ? (
          <div className="mt-3 min-w-0">
            <div className="eyebrow mb-1">{t('download.url')}</div>
            <div className="flex items-stretch gap-1">
              <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap rounded-sm border border-rule bg-surface px-2 py-2 font-mono text-xs text-ink-2">{q}</code>
              <button type="button" onClick={copy} className="inline-flex h-auto shrink-0 items-center gap-1 rounded-sm border border-rule px-2.5 text-xs text-ink-2 hover:bg-surface-2 hover:text-ink" aria-live="polite">
                {copied ? <Check size={13} aria-hidden /> : <Copy size={13} aria-hidden />}
                {copied ? t('common.copied') : t('download.copyUrl')}
              </button>
            </div>
            {ready && estimate ? <p className="mt-1 text-2xs text-ink-3">{t('download.estimateNote')}</p> : null}
          </div>
        ) : null}
      </div>
    </div>
  );
}