'use client';
import { ArrowRight, ChevronDown, ChevronUp, GripVertical, Plus, X } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useCallback, useMemo, useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { COMPARE_GROUP_PRESETS } from '@/lib/compare-presets';
import { MAX_COMPARE_COUNTRIES, MIN_COMPARE_COUNTRIES } from '@/lib/compare-state';
import { routes } from '@/lib/site';
import type { CountryLite } from '@/lib/types-compare';
import { seriesVar } from '@/components/charts/palette';
import { COMPARE_PRESETS } from '@/components/home/compare-teaser';
import { CountryPickerSheet, CountryTypeahead } from './country-picker';

/**
 * /compare landing: typeahead + ordered chips (drag on desktop, up/down buttons everywhere), presets
 * (G7, Nordics, BRICS, USMCA…, "Canada vs peers" from /similar) and the Compare button → /compare/a/b/c.
 * On phones the chip row is sticky under the header and the picker opens as a bottom sheet.
 */
export function CompareBuilder({ countries, peers, initial = [] }: { countries: CountryLite[]; peers: CountryLite[]; initial?: string[] }) {
  const router = useRouter();
  const bySlug = useMemo(() => new Map(countries.map((c) => [c.slug, c])), [countries]);
  const [selected, setSelected] = useState<string[]>(() => initial.filter((s) => bySlug.has(s)).slice(0, MAX_COMPARE_COUNTRIES));
  const [sheet, setSheet] = useState(false);
  const [dragFrom, setDragFrom] = useState<number | null>(null);
  const exclude = useMemo(() => new Set(selected), [selected]);
  const chosen = selected.map((s) => bySlug.get(s)!).filter(Boolean);
  const canGo = selected.length >= MIN_COMPARE_COUNTRIES;
  const full = selected.length >= MAX_COMPARE_COUNTRIES;

  const add = useCallback((c: CountryLite) => setSelected((s) => (s.includes(c.slug) || s.length >= MAX_COMPARE_COUNTRIES ? s : [...s, c.slug])), []);
  const remove = (slug: string) => setSelected((s) => s.filter((x) => x !== slug));
  const move = (from: number, to: number) =>
    setSelected((s) => {
      if (to < 0 || to >= s.length || from === to) return s;
      const next = [...s];
      const [item] = next.splice(from, 1);
      next.splice(to, 0, item!);
      return next;
    });
  const go = () => {
    if (canGo) router.push(routes.compare(...selected));
  };

  const peerPreset = peers.length >= 2 ? ['canada', ...peers.filter((p) => p.slug !== 'canada').slice(0, 5).map((p) => p.slug)] : null;

  return (
    <div>
      {/* Selected chips — sticky on phones */}
      <div className="sticky top-[52px] z-20 -mx-4 border-b border-rule bg-paper/95 px-4 py-2 backdrop-blur supports-[backdrop-filter]:bg-paper/85 sm:-mx-6 sm:px-6 md:static md:mx-0 md:border-0 md:bg-transparent md:px-0 md:py-0 md:backdrop-blur-none">
        <div className="flex items-center gap-2 md:hidden">
          <button type="button" onClick={() => setSheet(true)} disabled={full} className={cn('inline-flex h-11 shrink-0 items-center gap-1.5 rounded-sm border px-3 text-sm', full ? 'border-rule text-ink-3' : 'border-ink text-ink')}>
            <Plus size={15} aria-hidden />
            {t('compare.add')}
          </button>
          <ul className="scrollbar-none flex min-w-0 flex-1 gap-1.5 overflow-x-auto" aria-label={t('compare.builder.selected')}>
            {chosen.map((c, i) => (
              <li key={c.slug} className="shrink-0">
                <span className="inline-flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface pl-2 text-sm">
                  <span aria-hidden className="h-2 w-2 rounded-full" style={{ background: seriesVar(i) }} />
                  <span aria-hidden>{c.flag}</span>
                  <span className="max-w-[9rem] truncate">{c.name}</span>
                  <button type="button" onClick={() => remove(c.slug)} className="grid h-11 w-9 place-items-center text-ink-3 hover:text-ink" aria-label={t('compare.builder.remove', { name: c.name })}>
                    <X size={14} aria-hidden />
                  </button>
                </span>
              </li>
            ))}
          </ul>
          <button type="button" onClick={go} disabled={!canGo} className={cn('inline-flex h-11 shrink-0 items-center gap-1 rounded-sm px-3 text-sm font-medium', canGo ? 'bg-ink text-paper' : 'bg-surface-2 text-ink-3')}>
            {t('compare.builder.go')}
            <ArrowRight size={15} aria-hidden />
          </button>
        </div>

        <div className="hidden md:block">
          <CountryTypeahead countries={countries} exclude={exclude} onPick={add} disabled={full} placeholder={full ? t('compare.builder.full', { max: MAX_COMPARE_COUNTRIES }) : undefined} className="max-w-xl" />
        </div>
      </div>

      {/* Ordered list with reorder controls */}
      <div className="mt-4">
        <div className="eyebrow mb-2">
          {t('compare.builder.selected')} · <span className="tnum">{selected.length}/{MAX_COMPARE_COUNTRIES}</span>
        </div>
        {chosen.length === 0 ? (
          <p className="border-t border-dashed border-rule-strong py-5 text-sm text-ink-3">{t('compare.builder.empty')}</p>
        ) : (
          <ol className="divide-y divide-rule border-y border-rule">
            {chosen.map((c, i) => (
              <li
                key={c.slug}
                draggable
                onDragStart={() => setDragFrom(i)}
                onDragOver={(e) => e.preventDefault()}
                onDrop={() => {
                  if (dragFrom != null) move(dragFrom, i);
                  setDragFrom(null);
                }}
                onDragEnd={() => setDragFrom(null)}
                className={cn('flex min-h-[52px] items-center gap-2 py-1', dragFrom === i && 'opacity-50')}
              >
                <span className="hidden cursor-grab text-ink-3 md:inline" title={t('compare.builder.drag')} aria-hidden>
                  <GripVertical size={16} />
                </span>
                <span aria-hidden className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ background: seriesVar(i) }} />
                <span aria-hidden className="text-xl leading-none">
                  {c.flag}
                </span>
                <span className="min-w-0 flex-1 truncate text-sm font-medium text-ink">{c.name}</span>
                <div className="flex items-center">
                  <button type="button" onClick={() => move(i, i - 1)} disabled={i === 0} className="tap grid place-items-center rounded-sm text-ink-2 hover:bg-surface-2 disabled:opacity-30" aria-label={t('compare.builder.moveUp', { name: c.name })}>
                    <ChevronUp size={16} aria-hidden />
                  </button>
                  <button type="button" onClick={() => move(i, i + 1)} disabled={i === chosen.length - 1} className="tap grid place-items-center rounded-sm text-ink-2 hover:bg-surface-2 disabled:opacity-30" aria-label={t('compare.builder.moveDown', { name: c.name })}>
                    <ChevronDown size={16} aria-hidden />
                  </button>
                  <button type="button" onClick={() => remove(c.slug)} className="tap grid place-items-center rounded-sm text-ink-3 hover:bg-surface-2 hover:text-down" aria-label={t('compare.builder.remove', { name: c.name })}>
                    <X size={16} aria-hidden />
                  </button>
                </div>
              </li>
            ))}
          </ol>
        )}
        <div className="mt-4 hidden flex-wrap items-center gap-3 md:flex">
          <button type="button" onClick={go} disabled={!canGo} className={cn('inline-flex h-10 items-center gap-2 rounded-sm px-4 text-sm font-medium', canGo ? 'bg-ink text-paper hover:bg-accent hover:text-accent-ink' : 'bg-surface-2 text-ink-3')}>
            {canGo ? t('compare.builder.goN', { n: selected.length }) : t('compare.builder.go')}
            <ArrowRight size={15} aria-hidden />
          </button>
          {!canGo ? <span className="text-sm text-ink-3">{t('compare.builder.needMore', { n: MIN_COMPARE_COUNTRIES - selected.length })}</span> : null}
          {selected.length ? (
            <button type="button" onClick={() => setSelected([])} className="inline-flex h-10 items-center rounded-sm px-3 text-sm text-ink-2 hover:bg-surface-2">
              {t('compare.builder.clear')}
            </button>
          ) : null}
        </div>
        {!canGo && selected.length ? <p className="mt-2 text-sm text-ink-3 md:hidden">{t('compare.builder.needMore', { n: MIN_COMPARE_COUNTRIES - selected.length })}</p> : null}
      </div>

      {/* Presets */}
      <section className="hairline mt-8 pt-6" aria-labelledby="presets-h">
        <h2 id="presets-h" className="display text-xl text-ink md:text-2xl">
          {t('compare.presets.title')}
        </h2>
        <p className="mt-1 text-sm text-ink-2">{t('compare.presets.sub')}</p>
        <ul className="mt-3 grid gap-x-8 sm:grid-cols-2 lg:grid-cols-3">
          {[...COMPARE_GROUP_PRESETS.map((p) => ({ id: p.id, label: t(`compare.preset.${p.id}` as 'compare.preset.g7'), hint: null as string | null, slugs: p.slugs })), ...(peerPreset ? [{ id: 'peers', label: t('compare.preset.peers', { name: 'Canada' }), hint: t('compare.preset.peersHint', { name: 'Canada' }), slugs: peerPreset }] : [])].map((p) => {
            const members = p.slugs.map((s) => bySlug.get(s)).filter((c): c is CountryLite => !!c);
            if (members.length < 2) return null;
            return (
              <li key={p.id} className="border-t border-rule">
                <div className="flex min-h-[64px] items-center gap-3 py-2.5">
                  <Link href={routes.compare(...members.map((m) => m.slug))} className="group min-w-0 flex-1">
                    <span className="flex items-baseline gap-2">
                      <span className="text-sm font-medium text-ink group-hover:text-accent">{p.label}</span>
                      <span className="tnum text-2xs text-ink-3" aria-label={t('compare.presets.count', { n: members.length })}>
                        <span aria-hidden className="mr-1.5">·</span>
                        {t('compare.presets.count', { n: members.length })}
                      </span>
                    </span>
                    <span className="mt-0.5 flex flex-wrap gap-x-1 text-base leading-tight" aria-hidden>
                      {members.map((m) => (
                        <span key={m.slug}>{m.flag}</span>
                      ))}
                    </span>
                    {p.hint ? <span className="block text-xs text-ink-3">{p.hint}</span> : null}
                  </Link>
                  <button
                    type="button"
                    onClick={() => setSelected(members.map((m) => m.slug))}
                    className="tap shrink-0 rounded-sm border border-rule px-2.5 text-xs text-ink-2 hover:border-accent hover:text-accent md:min-h-[32px]"
                    aria-label={`${p.label}: ${t('compare.builder.open')}`}
                  >
                    {t('compare.builder.open')}
                  </button>
                </div>
              </li>
            );
          })}
        </ul>

        <h3 className="eyebrow mt-8">{t('compare.presets.pairs')}</h3>
        <ul className="mt-2 grid gap-x-8 sm:grid-cols-2 lg:grid-cols-4">
          {COMPARE_PRESETS.map(([a, b]) => {
            const ca = bySlug.get(a);
            const cb = bySlug.get(b);
            if (!ca || !cb) return null;
            return (
              <li key={`${a}-${b}`} className="border-t border-rule">
                <Link href={routes.compare(a, b)} className="group flex min-h-[52px] items-center gap-2 py-2 text-sm">
                  <span aria-hidden className="text-lg leading-none">
                    {ca.flag}
                  </span>
                  <span className="truncate text-ink group-hover:text-accent">{ca.name}</span>
                  <span className="text-ink-3">{t('compare.vs')}</span>
                  <span aria-hidden className="text-lg leading-none">
                    {cb.flag}
                  </span>
                  <span className="truncate text-ink group-hover:text-accent">{cb.name}</span>
                  <ArrowRight size={14} aria-hidden className="ml-auto shrink-0 text-ink-3 group-hover:text-accent" />
                </Link>
              </li>
            );
          })}
        </ul>
      </section>

      <CountryPickerSheet open={sheet} onClose={() => setSheet(false)} countries={countries} exclude={exclude} onPick={add} title={t('compare.addCountry')} closeOnPick={false} />
    </div>
  );
}