'use client';
import { ArrowDownAZ, ArrowDownWideNarrow, SlidersHorizontal, X } from 'lucide-react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { useCallback, useMemo, useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { compact, formatPct, grouped, isNum } from '@/lib/format';
import { INCOME_GROUPS, WB_REGIONS } from '@/lib/regions';
import { regionShort } from '@/lib/regions';
import { routes } from '@/lib/site';
import type { CountrySummary } from '@/lib/types';
import { BottomSheet } from '@/components/data/bottom-sheet';

type SortKey = 'name' | 'population' | 'gdp' | 'coverage';

/**
 * Country directory: the 218 rows are server-rendered (this client component SSRs with the full list) and
 * filtered/sorted client-side. Region + income chips (bottom sheet on mobile), sort control, A–Z grouping
 * with a sticky letter index on desktop. URL `?region=&income=&q=&sort=` is kept in sync (shallow).
 */
export function CountryDirectory({ items }: { items: CountrySummary[] }) {
  const params = useSearchParams();
  const router = useRouter();
  const [q, setQ] = useState(params.get('q') ?? '');
  const [region, setRegion] = useState<string | null>(params.get('region'));
  const [income, setIncome] = useState<string | null>(params.get('income'));
  const [sort, setSort] = useState<SortKey>((params.get('sort') as SortKey) || 'name');
  const [sheet, setSheet] = useState(false);

  const sync = useCallback(
    (next: { q?: string; region?: string | null; income?: string | null; sort?: SortKey }) => {
      const p = new URLSearchParams();
      const nq = next.q ?? q;
      const nr = next.region === undefined ? region : next.region;
      const ni = next.income === undefined ? income : next.income;
      const ns = next.sort ?? sort;
      if (nq) p.set('q', nq);
      if (nr) p.set('region', nr);
      if (ni) p.set('income', ni);
      if (ns !== 'name') p.set('sort', ns);
      const s = p.toString();
      router.replace(`${routes.countries()}${s ? `?${s}` : ''}`, { scroll: false });
    },
    [q, region, income, sort, router],
  );

  const filtered = useMemo(() => {
    const ql = q.trim().toLowerCase();
    let rows = items.filter((c) => (!region || (c.region ?? '').toUpperCase() === region.toUpperCase()) && (!income || (c.income ?? '').toUpperCase() === income.toUpperCase()));
    if (ql) rows = rows.filter((c) => (c.name ?? '').toLowerCase().includes(ql) || c.id.toLowerCase() === ql || (c.capital ?? '').toLowerCase().includes(ql));
    const num = (v: number | null) => (isNum(v) ? v : -Infinity);
    rows.sort((a, b) => {
      if (sort === 'population') return num(b.population_latest) - num(a.population_latest) || (a.name ?? '').localeCompare(b.name ?? '');
      if (sort === 'gdp') return num(b.gdp_per_capita_latest) - num(a.gdp_per_capita_latest) || (a.name ?? '').localeCompare(b.name ?? '');
      if (sort === 'coverage') return num(b.coverage_pct) - num(a.coverage_pct) || (a.name ?? '').localeCompare(b.name ?? '');
      return (a.name ?? '').localeCompare(b.name ?? '');
    });
    return rows;
  }, [items, q, region, income, sort]);

  const groupsAZ = useMemo(() => {
    if (sort !== 'name') return null;
    const m = new Map<string, CountrySummary[]>();
    for (const c of filtered) {
      const letter = (c.name ?? '#').charAt(0).toUpperCase();
      const key = /[A-Z]/.test(letter) ? letter : '#';
      if (!m.has(key)) m.set(key, []);
      m.get(key)!.push(c);
    }
    return Array.from(m.entries());
  }, [filtered, sort]);

  const activeCount = (region ? 1 : 0) + (income ? 1 : 0);
  const letters = groupsAZ?.map(([l]) => l) ?? [];

  const filters = (
    <div className="space-y-4">
      <ChipGroup label={t('common.region')} value={region} onChange={(v) => { setRegion(v); sync({ region: v }); }} options={WB_REGIONS.map((r) => ({ id: r.id, label: r.short }))} />
      <ChipGroup label={t('common.income')} value={income} onChange={(v) => { setIncome(v); sync({ income: v }); }} options={INCOME_GROUPS.map((g) => ({ id: g.id, label: g.name }))} />
    </div>
  );

  return (
    <div className="lg:grid lg:grid-cols-[1fr_2.5rem] lg:gap-6">
      <div className="min-w-0">
        {/* Controls row */}
        <div className="flex flex-wrap items-center gap-2 py-3">
          <div className="relative min-w-0 flex-1 basis-56">
            <input
              type="search"
              value={q}
              onChange={(e) => { setQ(e.target.value); sync({ q: e.target.value }); }}
              placeholder={t('countries.search')}
              aria-label={t('countries.search')}
              className="h-10 w-full rounded-sm border border-rule bg-surface px-3 text-sm outline-none placeholder:text-ink-3 focus:border-accent"
            />
            {q ? (
              <button type="button" onClick={() => { setQ(''); sync({ q: '' }); }} className="absolute right-1 top-1 grid h-8 w-8 place-items-center text-ink-3 hover:text-ink" aria-label={t('search.clear')}>
                <X size={14} aria-hidden />
              </button>
            ) : null}
          </div>
          <label className="inline-flex h-10 items-center gap-1.5 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2">
            {sort === 'name' ? <ArrowDownAZ size={15} aria-hidden /> : <ArrowDownWideNarrow size={15} aria-hidden />}
            <span className="sr-only">{t('common.sortBy')}</span>
            <select value={sort} onChange={(e) => { const v = e.target.value as SortKey; setSort(v); sync({ sort: v }); }} className="bg-transparent pr-1 text-ink outline-none">
              <option value="name">{t('countries.sort.name')}</option>
              <option value="population">{t('countries.sort.population')}</option>
              <option value="gdp">{t('countries.sort.gdp')}</option>
              <option value="coverage">{t('countries.sort.coverage')}</option>
            </select>
          </label>
          <button type="button" onClick={() => setSheet(true)} className={cn('inline-flex h-10 items-center gap-1.5 rounded-sm border px-3 text-sm md:hidden', activeCount ? 'border-accent text-accent' : 'border-rule text-ink-2')}>
            <SlidersHorizontal size={15} aria-hidden />
            {t('countries.filters')}
            {activeCount ? <span className="tnum">({activeCount})</span> : null}
          </button>
          <span className="tnum ml-auto text-xs text-ink-3">{t('countries.count', { n: grouped(filtered.length), total: grouped(items.length) })}</span>
        </div>
        <div className="hidden pb-3 md:block">{filters}</div>
        {(region || income) && (
          <div className="flex flex-wrap items-center gap-2 pb-3 md:hidden">
            {region ? <ActiveChip label={WB_REGIONS.find((r) => r.id === region)?.short ?? region} onClear={() => { setRegion(null); sync({ region: null }); }} /> : null}
            {income ? <ActiveChip label={INCOME_GROUPS.find((g) => g.id === income)?.name ?? income} onClear={() => { setIncome(null); sync({ income: null }); }} /> : null}
          </div>
        )}

        {/* Header row (sm+) */}
        <div className="hidden grid-cols-[minmax(0,1fr)_7rem_7rem_5rem] gap-3 border-b border-rule pb-1.5 text-2xs font-medium uppercase tracking-wide text-ink-3 sm:grid md:grid-cols-[minmax(0,1fr)_13rem_8rem_8rem_5rem]">
          <span>{t('common.country')}</span>
          <span className="hidden md:block">{t('common.region')}</span>
          <span className="text-right">{t('common.population')}</span>
          <span className="text-right">{t('common.gdpPerCapita')}</span>
          <span className="text-right">{t('common.coverage')}</span>
        </div>

        {filtered.length === 0 ? <p className="py-10 text-center text-sm text-ink-3">{t('countries.noMatch')}</p> : null}

        {groupsAZ ? (
          groupsAZ.map(([letter, rows]) => (
            <section key={letter} id={`letter-${letter}`} className="scroll-mt-28">
              <h2 className="display sticky top-[52px] z-10 -mx-4 border-b border-rule bg-paper/95 px-4 py-1 text-lg text-ink-2 backdrop-blur sm:mx-0 sm:px-0 md:top-14 md:static md:mt-4 md:border-0 md:bg-transparent md:py-0">
                {letter}
              </h2>
              <ul className="divide-y divide-rule">
                {rows.map((c) => (
                  <Row key={c.id} c={c} />
                ))}
              </ul>
            </section>
          ))
        ) : (
          <ol className="divide-y divide-rule">
            {filtered.map((c, i) => (
              <Row key={c.id} c={c} rank={i + 1} />
            ))}
          </ol>
        )}
      </div>

      {/* Sticky letter index (desktop) */}
      {letters.length > 1 ? (
        <nav aria-label={t('countries.letterIndex')} className="hidden lg:block">
          <ol className="sticky top-20 flex flex-col items-center gap-0.5 text-2xs">
            {letters.map((l) => (
              <li key={l}>
                <a href={`#letter-${l}`} className="grid h-6 w-8 place-items-center rounded-xs text-ink-3 hover:bg-surface-2 hover:text-accent">
                  {l}
                </a>
              </li>
            ))}
          </ol>
        </nav>
      ) : null}

      <BottomSheet open={sheet} onClose={() => setSheet(false)} side="center" title={t('countries.filters')}>
        {filters}
        <div className="mt-6 flex justify-between">
          <button type="button" className="tap rounded-sm px-3 text-sm text-ink-2 hover:bg-surface-2" onClick={() => { setRegion(null); setIncome(null); sync({ region: null, income: null }); }}>
            {t('common.reset')}
          </button>
          <button type="button" className="tap rounded-sm bg-ink px-4 text-sm font-medium text-paper" onClick={() => setSheet(false)}>
            {t('common.apply')}
          </button>
        </div>
      </BottomSheet>
    </div>
  );
}

function Row({ c, rank }: { c: CountrySummary; rank?: number }) {
  return (
    <li>
      <Link href={routes.country(c.slug ?? c.id)} className="group grid min-h-[52px] grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 py-2 sm:grid-cols-[minmax(0,1fr)_7rem_7rem_5rem] md:grid-cols-[minmax(0,1fr)_13rem_8rem_8rem_5rem]">
        <span className="flex min-w-0 items-center gap-2.5">
          {rank ? <span className="tnum w-6 shrink-0 text-right text-xs text-ink-3">{rank}</span> : null}
          <span aria-hidden className="text-xl leading-none">
            {c.flag}
          </span>
          <span className="min-w-0">
            <span className="block truncate text-sm font-medium text-ink group-hover:text-accent">
              {c.name}
              {c.kind === 'territory' ? <span className="ml-1.5 rounded-xs border border-rule px-1 text-2xs font-normal text-ink-3">{t('countries.territory')}</span> : null}
            </span>
            <span className="block truncate text-xs text-ink-3 md:hidden">{regionShort(c.region) ?? c.region_name ?? ''}</span>
          </span>
        </span>
        <span className="hidden truncate text-xs text-ink-2 md:block">{c.region_name}</span>
        <span className="tnum text-right text-sm text-ink sm:text-sm">
          <span className="block">{isNum(c.population_latest) ? compact(c.population_latest) : t('common.na')}</span>
          <span className="block text-2xs text-ink-3 sm:hidden">{isNum(c.gdp_per_capita_latest) ? `US$${compact(c.gdp_per_capita_latest)} /cap` : ''}</span>
        </span>
        <span className="tnum hidden text-right text-sm text-ink sm:block">{isNum(c.gdp_per_capita_latest) ? `US$${compact(c.gdp_per_capita_latest)}` : t('common.na')}</span>
        <span className="tnum hidden text-right text-xs text-ink-2 sm:block">{formatPct(c.coverage_pct)}</span>
      </Link>
    </li>
  );
}

function ChipGroup({ label, value, onChange, options }: { label: string; value: string | null; onChange: (v: string | null) => void; options: Array<{ id: string; label: string }> }) {
  return (
    <div>
      <div className="eyebrow mb-1.5">{label}</div>
      <ul className="flex flex-wrap gap-1.5" role="radiogroup" aria-label={label}>
        <li>
          <Chip active={!value} onClick={() => onChange(null)}>
            {t('common.all')}
          </Chip>
        </li>
        {options.map((o) => (
          <li key={o.id}>
            <Chip active={value?.toUpperCase() === o.id.toUpperCase()} onClick={() => onChange(value?.toUpperCase() === o.id.toUpperCase() ? null : o.id)}>
              {o.label}
            </Chip>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Chip({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
  return (
    <button type="button" role="radio" aria-checked={active} onClick={onClick} className={cn('inline-flex h-11 items-center rounded-sm border px-3 text-sm md:h-9 md:px-2.5', active ? 'border-ink bg-ink text-paper' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>
      {children}
    </button>
  );
}

function ActiveChip({ label, onClear }: { label: string; onClear: () => void }) {
  return (
    <span className="inline-flex h-8 items-center gap-1 rounded-sm bg-accent-soft pl-2.5 pr-1 text-xs text-accent">
      {label}
      <button type="button" onClick={onClear} className="grid h-7 w-7 place-items-center" aria-label={t('common.reset')}>
        <X size={12} aria-hidden />
      </button>
    </span>
  );
}