'use client';
import { Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Download, Plus, Share2, SlidersHorizontal, X } from 'lucide-react';
import { usePathname, useRouter } from 'next/navigation';
import { useCallback, useEffect, useRef, useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { COMPARE_TABS, MAX_COMPARE_COUNTRIES, MIN_COMPARE_COUNTRIES, compareQuery, type CompareState, type CompareTab } from '@/lib/compare-state';
import { routes } from '@/lib/site';
import { COMPARE_UI_MODES, type CompareUiMode, type CountryLite } from '@/lib/types-compare';
import { seriesVar } from '@/components/charts/palette';
import { BottomSheet } from '@/components/data/bottom-sheet';
import { CountryPickerSheet } from './country-picker';

export const COMPARE_MIN_YEAR = 1960;

/**
 * Sticky controls of /compare/[...slugs]: country chips (remove, reorder, add), view tabs and — for chart
 * tabs — year range, value mode, log toggle, CSV download and share. Every change is written to the URL
 * (`router.replace`, no scroll jump); country changes rewrite the path (`router.push`).
 */
export function CompareControls({ countries, allCountries, state, maxYear, downloadHref }: { countries: CountryLite[]; allCountries: CountryLite[]; state: CompareState; maxYear: number; downloadHref: string | null }) {
  const router = useRouter();
  const pathname = usePathname();
  const [picker, setPicker] = useState(false);
  const [options, setOptions] = useState(false);
  const [copied, setCopied] = useState(false);
  const [dragFrom, setDragFrom] = useState<number | null>(null);
  const tabsRef = useRef<HTMLDivElement>(null);
  const slugs = countries.map((c) => c.slug);
  const exclude = new Set(slugs);
  const chartsTab = state.tab !== 'snapshot';

  useEffect(() => {
    const el = tabsRef.current?.querySelector<HTMLElement>('[aria-selected="true"]');
    el?.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'instant' as ScrollBehavior });
  }, [state.tab]);

  const setState = useCallback(
    (patch: Partial<CompareState>) => {
      router.replace(`${pathname}${compareQuery({ ...state, ...patch })}`, { scroll: false });
    },
    [router, pathname, state],
  );
  const setCountries = (next: string[]) => {
    router.push(`${routes.compare(...next)}${compareQuery(state)}`, { scroll: false });
  };
  const move = (from: number, to: number) => {
    if (to < 0 || to >= slugs.length || from === to) return;
    const next = [...slugs];
    const [it] = next.splice(from, 1);
    next.splice(to, 0, it!);
    setCountries(next);
  };
  const remove = (slug: string) => {
    if (slugs.length <= MIN_COMPARE_COUNTRIES) return;
    setCountries(slugs.filter((s) => s !== slug));
  };
  const add = (c: CountryLite) => {
    if (slugs.length >= MAX_COMPARE_COUNTRIES) return;
    setCountries([...slugs, c.slug]);
  };
  const share = async () => {
    const url = window.location.href;
    try {
      if (navigator.share) {
        await navigator.share({ title: document.title, url });
        return;
      }
      await navigator.clipboard.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch {
      /* cancelled */
    }
  };

  const years: number[] = [];
  for (let y = maxYear; y >= COMPARE_MIN_YEAR; y--) years.push(y);
  const canRemove = slugs.length > MIN_COMPARE_COUNTRIES;
  const full = slugs.length >= MAX_COMPARE_COUNTRIES;

  const rangeAndMode = (
    <>
      <fieldset className="flex items-center gap-1.5">
        <legend className="sr-only">{t('compare.range')}</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('compare.range.from')}</span>
          <select value={state.from ?? ''} onChange={(e) => setState({ from: e.target.value ? Number(e.target.value) : null })} className="tnum bg-transparent text-ink outline-none" aria-label={t('compare.range.from')}>
            <option value="">{t('compare.range.all')}</option>
            {years.map((y) => (
              <option key={y} value={y} disabled={state.to != null && y > state.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('compare.range.to')}</span>
          <select value={state.to ?? ''} onChange={(e) => setState({ to: e.target.value ? Number(e.target.value) : null })} className="tnum bg-transparent text-ink outline-none" aria-label={t('compare.range.to')}>
            <option value="">{t('compare.range.all')}</option>
            {years.map((y) => (
              <option key={y} value={y} disabled={state.from != null && y < state.from}>
                {y}
              </option>
            ))}
          </select>
        </label>
      </fieldset>
      <div role="radiogroup" aria-label={t('compare.valueMode')} className="flex flex-wrap gap-1">
        {COMPARE_UI_MODES.map((m: CompareUiMode) => (
          <button key={m} type="button" role="radio" aria-checked={state.mode === m} onClick={() => setState({ mode: m })} title={t(`compare.mode.hint.${m}` as 'compare.mode.hint.pct')} className={cn('inline-flex h-11 items-center rounded-sm border px-2.5 text-sm md:h-9 md:px-2', state.mode === m ? 'border-ink bg-ink text-paper' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>
            {t(`compare.mode.${m}` as 'compare.mode.absolute')}
          </button>
        ))}
      </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 md:px-2', state.log ? 'border-ink text-ink' : 'border-rule text-ink-2')}>
        <input type="checkbox" checked={state.log} onChange={(e) => setState({ log: e.target.checked })} className="accent-[var(--accent)]" />
        {t('compare.log')}
      </label>
    </>
  );

  const actions = (
    <>
      {downloadHref ? (
        <a href={downloadHref} download className="inline-flex h-11 items-center gap-1.5 rounded-sm border border-rule px-2.5 text-sm text-ink-2 hover:border-rule-strong hover:text-ink md:h-9 md:px-2">
          <Download size={14} aria-hidden />
          <span className="hidden sm:inline">{t('compare.download')}</span>
          <span className="sm:hidden">CSV</span>
        </a>
      ) : null}
      <button type="button" onClick={share} className="inline-flex h-11 items-center gap-1.5 rounded-sm border border-rule px-2.5 text-sm text-ink-2 hover:border-rule-strong hover:text-ink md:h-9 md:px-2" aria-live="polite">
        {copied ? <Check size={14} aria-hidden className="text-up" /> : <Share2 size={14} aria-hidden />}
        {copied ? t('compare.copied') : t('compare.share')}
      </button>
    </>
  );

  return (
    <div className="sticky top-[52px] z-20 -mx-4 border-b border-rule bg-paper/95 backdrop-blur supports-[backdrop-filter]:bg-paper/85 sm:-mx-6 md:top-[56px]">
      {/* Row 1: country chips */}
      <div className="flex items-center gap-2 px-4 pt-2 sm:px-6">
        <ul className="scrollbar-none flex min-w-0 flex-1 gap-1.5 overflow-x-auto py-0.5" aria-label={t('compare.legend')}>
          {countries.map((c, i) => (
            <li
              key={c.slug}
              className={cn('group/chip shrink-0', dragFrom === i && 'opacity-50')}
              draggable
              onDragStart={() => setDragFrom(i)}
              onDragOver={(e) => e.preventDefault()}
              onDrop={() => {
                if (dragFrom != null) move(dragFrom, i);
                setDragFrom(null);
              }}
              onDragEnd={() => setDragFrom(null)}
            >
              <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 shrink-0 rounded-full" style={{ background: seriesVar(i) }} />
                <span aria-hidden>{c.flag}</span>
                <span className="max-w-[8rem] truncate text-ink md:max-w-[11rem]">{c.name}</span>
                <span className="hidden items-center md:flex">
                  <button type="button" onClick={() => move(i, i - 1)} disabled={i === 0} className="grid h-9 w-6 place-items-center text-ink-3 hover:text-ink disabled:opacity-25" aria-label={t('compare.builder.moveUp', { name: c.name })}>
                    <ChevronLeft size={13} aria-hidden />
                  </button>
                  <button type="button" onClick={() => move(i, i + 1)} disabled={i === countries.length - 1} className="grid h-9 w-6 place-items-center text-ink-3 hover:text-ink disabled:opacity-25" aria-label={t('compare.builder.moveDown', { name: c.name })}>
                    <ChevronRight size={13} aria-hidden />
                  </button>
                </span>
                <button type="button" onClick={() => remove(c.slug)} disabled={!canRemove} className="grid h-11 w-9 place-items-center text-ink-3 hover:text-down disabled:opacity-25 md:h-9 md:w-7" aria-label={t('compare.removeCountry', { name: c.name })}>
                  <X size={14} aria-hidden />
                </button>
              </span>
            </li>
          ))}
          <li className="shrink-0">
            <button type="button" onClick={() => setPicker(true)} disabled={full} className={cn('inline-flex h-11 items-center gap-1 rounded-sm border border-dashed px-2.5 text-sm md:h-9', full ? 'border-rule text-ink-3' : 'border-rule-strong text-ink-2 hover:border-accent hover:text-accent')} aria-label={t('compare.addCountry')}>
              <Plus size={14} aria-hidden />
              {t('compare.add')}
            </button>
          </li>
        </ul>
        <button type="button" onClick={() => setOptions(true)} className="inline-flex h-11 shrink-0 items-center gap-1.5 rounded-sm border border-rule px-2.5 text-sm text-ink-2 md:hidden" aria-label={t('compare.options')}>
          <SlidersHorizontal size={15} aria-hidden />
          <span className="sr-only sm:not-sr-only">{t('compare.options')}</span>
        </button>
      </div>

      {/* Row 2: tabs */}
      <div ref={tabsRef} role="tablist" aria-label={t('compare.tabs')} className="scrollbar-none mt-1 flex gap-0.5 overflow-x-auto px-4 sm:px-6">
        {COMPARE_TABS.map((tab: CompareTab) => {
          const active = state.tab === tab;
          return (
            <button
              key={tab}
              type="button"
              role="tab"
              aria-selected={active}
              onClick={() => setState({ tab, indicator: tab === state.tab ? state.indicator : null })}
              className={cn('relative inline-flex h-11 shrink-0 items-center px-3 text-sm md:h-10', active ? 'font-medium text-ink' : 'text-ink-2 hover:text-ink')}
            >
              {t(`compare.tab.${tab}` as 'compare.tab.snapshot')}
              {active ? <span aria-hidden className="absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-ink" /> : null}
            </button>
          );
        })}
      </div>

      {/* Row 3 (md+): range · mode · log · download · share */}
      <div className="hidden flex-wrap items-center gap-2 border-t border-rule px-4 py-1.5 sm:px-6 md:flex">
        {chartsTab ? rangeAndMode : null}
        <div className="ml-auto flex items-center gap-2">{actions}</div>
      </div>

      <CountryPickerSheet open={picker} onClose={() => setPicker(false)} countries={allCountries} exclude={exclude} onPick={add} />

      <BottomSheet open={options} onClose={() => setOptions(false)} side="center" title={t('compare.options')}>
        <div className="space-y-5">
          <div>
            <div className="eyebrow mb-1.5">{t('compare.legend')}</div>
            <ol className="divide-y divide-rule border-y border-rule">
              {countries.map((c, i) => (
                <li key={c.slug} className="flex min-h-[48px] items-center gap-2">
                  <span aria-hidden className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ background: seriesVar(i) }} />
                  <span aria-hidden className="text-lg leading-none">
                    {c.flag}
                  </span>
                  <span className="min-w-0 flex-1 truncate text-sm text-ink">{c.name}</span>
                  <button type="button" onClick={() => move(i, i - 1)} disabled={i === 0} className="tap grid place-items-center text-ink-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 === countries.length - 1} className="tap grid place-items-center text-ink-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)} disabled={!canRemove} className="tap grid place-items-center text-ink-3 hover:text-down disabled:opacity-30" aria-label={t('compare.removeCountry', { name: c.name })}>
                    <X size={16} aria-hidden />
                  </button>
                </li>
              ))}
            </ol>
            <button type="button" onClick={() => { setOptions(false); setPicker(true); }} disabled={full} className="mt-2 inline-flex h-11 items-center gap-1 rounded-sm border border-dashed border-rule-strong px-3 text-sm text-ink-2 disabled:opacity-40">
              <Plus size={14} aria-hidden />
              {t('compare.addCountry')}
            </button>
          </div>
          {chartsTab ? (
            <div>
              <div className="eyebrow mb-1.5">{t('compare.range')} · {t('compare.valueMode')}</div>
              <div className="flex flex-wrap gap-2">{rangeAndMode}</div>
            </div>
          ) : null}
          <div className="flex flex-wrap gap-2">{actions}</div>
        </div>
      </BottomSheet>
    </div>
  );
}