'use client';
import { ArrowDown, ArrowUp, Download, Plus, Scale, X } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useEffect, useMemo, useRef, useState } from 'react';
import { t } from '@/i18n';
import { clientAnalytics } from '@/lib/client-api-analytics';
import { cn } from '@/lib/cn';
import { FINDER_OPS, finderStateQuery, type FinderFilterInput, type FinderOp, type FinderState } from '@/lib/finder-query';
import { formatValue, grouped } from '@/lib/format';
import { INCOME_GROUPS, WB_REGIONS } from '@/lib/regions';
import { routes } from '@/lib/site';
import type { FormatSpec } from '@/lib/types';
import type { FinderResponse } from '@/lib/types-analytics';
import { IndicatorSelect, Segmented, type IndicatorOption } from '@/components/controls/indicator-select';
import { useProvenance } from '@/components/data/provenance-context';
import type { BaseFeature } from '@/components/indicators/indicator-map';
import { MAP_HEIGHT, MAP_WIDTH } from '@/lib/map-geo';

interface Preset {
  id: string;
  filters: FinderFilterInput[];
}
const PRESETS: Preset[] = [
  { id: 'rich-large', filters: [{ slug: 'gdp-per-capita', op: 'gt', value: 40000 }, { slug: 'population', op: 'gt', value: 10_000_000 }] },
  { id: 'green-connected', filters: [{ slug: 'renewable-electricity-share', op: 'gt', value: 50 }, { slug: 'internet-users', op: 'gt', value: 80 }] },
  { id: 'ageing', filters: [{ slug: 'median-age', op: 'gt', value: 42 }] },
  { id: 'young-growing', filters: [{ slug: 'median-age', op: 'lt', value: 25 }, { slug: 'population-growth', op: 'gt', value: 2 }] },
  { id: 'long-lives-low-co2', filters: [{ slug: 'life-expectancy', op: 'gt', value: 80 }, { slug: 'co2-per-capita', op: 'lt', value: 5 }] },
];

function stepFor(spec: FormatSpec, value: number): number {
  if (spec.format === 'percent' || spec.format === 'years' || spec.format === 'ratio' || spec.format === 'per_1000') return 1;
  const mag = Math.pow(10, Math.max(0, Math.floor(Math.log10(Math.max(1, Math.abs(value)))) - 1));
  return mag;
}

/** Query builder over /finder: filters live in the URL exactly as the API reads them. */
export function FinderView({ indicators, features, sphere, initial, initialState, specs }: { indicators: IndicatorOption[]; features: BaseFeature[]; sphere: string; initial: FinderResponse | null; initialState: FinderState; specs: Record<string, FormatSpec> }) {
  const router = useRouter();
  const { open: openProv } = useProvenance();
  const [state, setState] = useState<FinderState>(initialState);
  const [data, setData] = useState<FinderResponse | null>(initial);
  const [status, setStatus] = useState<'idle' | 'loading' | 'error'>('idle');
  const abort = useRef<AbortController | null>(null);
  const first = useRef(true);

  // Debounced fetch + URL sync whenever the state changes.
  useEffect(() => {
    if (first.current) {
      first.current = false;
      return;
    }
    const q = finderStateQuery(state);
    const timer = setTimeout(() => {
      router.replace(`${routes.finder()}${q}`, { scroll: false });
      if (!state.filters.length) {
        setData(null);
        setStatus('idle');
        return;
      }
      abort.current?.abort();
      const ctrl = new AbortController();
      abort.current = ctrl;
      setStatus('loading');
      clientAnalytics
        .finder(state.filters, { mode: state.mode, region: state.region, income: state.income, sort: state.sort, limit: 218 }, ctrl.signal)
        .then((r) => {
          setData(r);
          setStatus('idle');
        })
        .catch((e) => {
          if ((e as Error).name !== 'AbortError') setStatus('error');
        });
    }, 350);
    return () => clearTimeout(timer);
  }, [state, router]);

  const update = (i: number, patch: Partial<FinderFilterInput>) => setState((s) => ({ ...s, filters: s.filters.map((f, k) => (k === i ? { ...f, ...patch } : f)) }));
  const remove = (i: number) => setState((s) => ({ ...s, filters: s.filters.filter((_, k) => k !== i) }));
  const add = () => {
    const used = new Set(state.filters.map((f) => f.slug));
    const next = ['gdp-per-capita', 'population', 'life-expectancy', 'median-age', 'internet-users', 'co2-per-capita'].find((s) => !used.has(s) && indicators.some((i) => i.slug === s)) ?? indicators[0]?.slug;
    if (!next) return;
    setState((s) => ({ ...s, filters: [...s.filters, { slug: next, op: 'gt' as FinderOp, value: 0 }].slice(0, 8) }));
  };
  const specFor = (slug: string): FormatSpec => specs[slug] ?? { format: 'number', name: indicators.find((i) => i.slug === slug)?.name ?? slug };
  const matches = data?.items ?? [];
  const matchSet = useMemo(() => new Set(matches.map((m) => m.country.id)), [matches]);
  const sortSlug = state.sort?.split(':')[0] ?? state.filters[0]?.slug ?? null;
  const sortDir = (state.sort?.split(':')[1] as 'asc' | 'desc' | undefined) ?? 'desc';
  const toggleSort = (slug: string) => setState((s) => ({ ...s, sort: sortSlug === slug && sortDir === 'desc' ? `${slug}:asc` : `${slug}:desc` }));
  const downloadHref = matches.length && state.filters.length ? routes.compareDownload(matches.slice(0, 20).map((m) => m.country.id), Array.from(new Set(state.filters.map((f) => f.slug))).slice(0, 20)) : null;
  const compareHref = matches.length >= 2 ? routes.compare(...matches.slice(0, 8).map((m) => m.country.slug ?? m.country.id.toLowerCase())) : null;

  return (
    <div>
      <header className="pb-3 pt-6 md:pt-10">
        <h1 className="display text-3xl leading-tight text-ink md:text-4xl">{t('finder.title')}</h1>
        <p className="mt-2 max-w-prose text-sm text-ink-2 md:text-base">{t('finder.lede')}</p>
      </header>

      {/* Presets */}
      <section aria-label={t('finder.presets')} className="border-y border-rule py-3">
        <div className="eyebrow mb-1.5">{t('finder.presets')}</div>
        <ul className="flex flex-wrap gap-1.5">
          {PRESETS.map((p) => (
            <li key={p.id}>
              <button type="button" onClick={() => setState((s) => ({ ...s, filters: p.filters, mode: 'and' }))} className="inline-flex h-11 flex-col items-start justify-center rounded-sm border border-rule px-3 text-left hover:border-accent md:h-auto md:py-1.5" title={t(`finder.preset.${p.id}.hint` as 'finder.preset.rich-large.hint')}>
                <span className="text-sm text-ink">{t(`finder.preset.${p.id}` as 'finder.preset.rich-large')}</span>
                <span className="hidden text-2xs text-ink-3 md:block">{t(`finder.preset.${p.id}.hint` as 'finder.preset.rich-large.hint')}</span>
              </button>
            </li>
          ))}
        </ul>
      </section>

      {/* Builder */}
      <section aria-label={t('finder.add')} className="py-4">
        <ol className="space-y-2">
          {state.filters.map((f, i) => {
            const spec = specFor(f.slug);
            return (
              <li key={`${i}-${f.slug}`} className="grid grid-cols-[minmax(0,1fr)_2.75rem] items-start gap-2 sm:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)_minmax(0,1fr)_2.75rem]">
                <IndicatorSelect options={indicators} value={f.slug} onChange={(slug) => update(i, { slug })} size="sm" label={i === 0 ? t('finder.indicator') : undefined} />
                <button type="button" onClick={() => remove(i)} className="tap grid place-items-center rounded-sm text-ink-3 hover:bg-surface-2 hover:text-down sm:order-last md:min-h-[36px]" aria-label={t('finder.remove')}>
                  <X size={16} aria-hidden />
                </button>
                <label className="col-span-2 flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm sm:col-span-1 md:h-9">
                  <span className="sr-only">{t('finder.op')}</span>
                  <select value={f.op} onChange={(e) => update(i, { op: e.target.value as FinderOp, value2: e.target.value === 'between' ? (f.value2 ?? f.value) : null })} className="h-11 min-w-0 flex-1 bg-transparent text-ink outline-none md:h-8">
                    {FINDER_OPS.map((op) => (
                      <option key={op} value={op}>
                        {t(`finder.op.${op}` as 'finder.op.gt')}
                      </option>
                    ))}
                  </select>
                </label>
                <div className="col-span-2 flex items-center gap-1.5 sm:col-span-1">
                  <label className="flex h-11 min-w-0 flex-1 items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm md:h-9" title={t('finder.unit', { unit: spec.unit ?? '' })}>
                    <span className="sr-only">{t('finder.value')}</span>
                    <input type="number" inputMode="decimal" step={stepFor(spec, f.value)} value={Number.isFinite(f.value) ? f.value : ''} onChange={(e) => update(i, { value: e.target.value === '' ? 0 : Number(e.target.value) })} className="tnum min-w-0 flex-1 bg-transparent text-ink outline-none" aria-label={`${t('finder.value')} (${spec.unit ?? ''})`} />
                    <span className="shrink-0 truncate text-2xs text-ink-3">{spec.unit_short ?? spec.unit ?? ''}</span>
                  </label>
                  {f.op === 'between' ? (
                    <>
                      <span className="text-xs text-ink-3">{t('finder.value2')}</span>
                      <label className="flex h-11 min-w-0 flex-1 items-center rounded-sm border border-rule bg-surface px-2 text-sm md:h-9">
                        <input type="number" inputMode="decimal" step={stepFor(spec, f.value)} value={f.value2 ?? ''} onChange={(e) => update(i, { value2: e.target.value === '' ? null : Number(e.target.value) })} className="tnum min-w-0 flex-1 bg-transparent text-ink outline-none" aria-label={t('finder.value2')} />
                      </label>
                    </>
                  ) : null}
                </div>
              </li>
            );
          })}
        </ol>
        <div className="mt-3 flex flex-wrap items-center gap-2">
          <button type="button" onClick={add} disabled={state.filters.length >= 8} className="inline-flex h-11 items-center gap-1.5 rounded-sm border border-dashed border-rule-strong px-3 text-sm text-ink-2 hover:border-accent hover:text-accent disabled:opacity-40 md:h-9">
            <Plus size={14} aria-hidden /> {t('finder.add')}
          </button>
          <Segmented value={state.mode} onChange={(m) => setState((s) => ({ ...s, mode: m }))} options={[{ value: 'and' as const, label: t('finder.mode.and') }, { value: 'or' as const, label: t('finder.mode.or') }]} label={t('finder.mode')} size="sm" />
          <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('finder.region')}</span>
            <select value={state.region ?? ''} onChange={(e) => setState((s) => ({ ...s, region: e.target.value || null }))} className="bg-transparent text-ink outline-none">
              <option value="">{t('finder.any')}</option>
              {WB_REGIONS.map((r) => (
                <option key={r.id} value={r.slug}>
                  {r.short}
                </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('finder.income')}</span>
            <select value={state.income ?? ''} onChange={(e) => setState((s) => ({ ...s, income: e.target.value || null }))} className="bg-transparent text-ink outline-none">
              <option value="">{t('finder.any')}</option>
              {INCOME_GROUPS.map((g) => (
                <option key={g.id} value={g.slug}>
                  {g.name}
                </option>
              ))}
            </select>
          </label>
        </div>
      </section>

      {/* Results */}
      <section aria-live="polite" className="border-t border-rule pt-4">
        <div className="flex flex-wrap items-baseline justify-between gap-2">
          <h2 className="display text-xl text-ink md:text-2xl">
            {status === 'loading' ? t('finder.loading') : status === 'error' ? t('finder.error') : data ? t('finder.results', { n: grouped(data.n_matching), m: grouped(data.n_evaluated) }) : ''}
          </h2>
          <div className="flex flex-wrap items-center gap-2 text-sm">
            {downloadHref ? (
              <a href={downloadHref} className="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm border border-rule px-3 text-ink hover:bg-surface-2 md:min-h-[36px]">
                <Download size={14} aria-hidden /> {t('finder.download')}
              </a>
            ) : null}
            {compareHref ? (
              <Link href={compareHref} className="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm bg-ink px-3 font-medium text-paper hover:bg-accent hover:text-accent-ink md:min-h-[36px]">
                <Scale size={14} aria-hidden /> {t('finder.compare', { n: Math.min(8, matches.length) })}
              </Link>
            ) : null}
          </div>
        </div>
        {!state.filters.length ? <p className="mt-3 text-sm text-ink-3">{t('finder.empty')}</p> : null}
        {state.filters.length && data && data.n_matching === 0 && status === 'idle' ? <p className="mt-3 text-sm text-ink-3">{t('finder.none')}</p> : null}
        {data && matches.length ? (
          <div className={cn('mt-4 grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] transition-opacity', status === 'loading' && 'opacity-60')}>
            <div className="min-w-0 overflow-x-auto">
              <table className="w-full min-w-[32rem] text-sm">
                <caption className="sr-only">{t('finder.results', { n: data.n_matching, m: data.n_evaluated })}</caption>
                <thead>
                  <tr className="border-b border-rule text-left text-2xs uppercase tracking-wide text-ink-3">
                    <th scope="col" className="py-1.5 pr-3 font-medium">{t('finder.table.country')}</th>
                    {data.filters.map((f) => (
                      <th key={f.indicator.slug} scope="col" className="py-1.5 pl-3 text-right font-medium">
                        <button type="button" onClick={() => toggleSort(f.indicator.slug)} className="inline-flex min-h-[32px] items-center gap-1 hover:text-ink" aria-label={t('finder.sort', { name: f.indicator.short_name ?? f.indicator.name })}>
                          {f.indicator.short_name ?? f.indicator.name}
                          {sortSlug === f.indicator.slug ? sortDir === 'desc' ? <ArrowDown size={11} aria-hidden /> : <ArrowUp size={11} aria-hidden /> : null}
                        </button>
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody className="divide-y divide-rule">
                  {matches.map((m) => (
                    <tr key={m.country.id}>
                      <td className="py-1.5 pr-3">
                        <Link href={routes.country(m.country.slug ?? m.country.id.toLowerCase())} className="link-quiet inline-flex min-h-[36px] items-center gap-1.5 text-ink">
                          <span aria-hidden>{m.country.flag}</span>
                          <span className="truncate">{m.country.name}</span>
                        </Link>
                      </td>
                      {data.filters.map((f) => {
                        const v = m.values[f.indicator.slug];
                        const spec = specFor(f.indicator.slug);
                        const matched = m.matched.includes(f.indicator.slug);
                        return (
                          <td key={f.indicator.slug} className="tnum py-1.5 pl-3 text-right">
                            {v && v.value != null ? (
                              <button type="button" onClick={() => openProv({ indicator: { slug: f.indicator.slug, name: f.indicator.name ?? f.indicator.slug, format: spec.format, unit: spec.unit, unit_short: spec.unit_short, precision: spec.precision, frequency: 'A' }, value: { value: v.value, formatted: v.formatted, period: v.year ? `${v.year}-01-01` : null, year: v.year, unit: spec.unit, provenance: v.provenance }, country: { id: m.country.id, slug: m.country.slug, name: m.country.name ?? m.country.id, flag: m.country.flag } })} className={cn('inline-flex min-h-[36px] items-baseline gap-1 hover:text-accent', matched ? 'font-medium text-ink' : 'text-ink-3')} aria-label={t('common.openProvenance')}>
                                {formatValue(v.value, spec)}
                                <span className="text-2xs text-ink-3">{v.year}</span>
                              </button>
                            ) : (
                              <span className="text-ink-3">{t('common.noData')}</span>
                            )}
                          </td>
                        );
                      })}
                    </tr>
                  ))}
                </tbody>
              </table>
              <p className="mt-2 text-2xs text-ink-3">{t('finder.latestNote')}</p>
            </div>
            <figure className="min-w-0 lg:order-first">
              <div className="relative w-full" style={{ aspectRatio: `${MAP_WIDTH} / ${MAP_HEIGHT}` }}>
                <svg viewBox={`0 0 ${MAP_WIDTH} ${MAP_HEIGHT}`} className="h-full w-full" role="img" aria-label={t('finder.map')}>
                  <title>{t('finder.map')}</title>
                  <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 on = f.iso3 ? matchSet.has(f.iso3) : false;
                      return <path key={f.iso3 ?? `${f.name}-${i}`} d={f.d} fill={on ? 'var(--accent)' : 'var(--nodata)'} fillOpacity={on ? 0.9 : 0.5} />;
                    })}
                  </g>
                </svg>
              </div>
              <figcaption className="mt-1 text-2xs text-ink-3">{t('finder.map')}</figcaption>
            </figure>
          </div>
        ) : null}
      </section>
    </div>
  );
}