'use client';
import { Clock, CornerDownLeft, Search, X } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { t } from '@/i18n';
import { clientApi } from '@/lib/client-api';
import { cn } from '@/lib/cn';
import { routes } from '@/lib/site';
import type { SearchHit, SearchHitType } from '@/lib/types';
import { BottomSheet } from '@/components/data/bottom-sheet';
import { useSearch } from './search-context';

const RECENT_KEY = 'ca-recent-searches';
const MAX_RECENT = 8;

function hrefFor(h: SearchHit): string {
  if (h.url) return h.url;
  const slug = h.slug ?? h.id;
  switch (h.type) {
    case 'country':
      return routes.country(slug);
    case 'indicator':
      return routes.indicator(slug);
    case 'topic':
      return routes.indicators(slug);
    case 'region':
      return routes.region(slug);
    case 'source':
      return routes.source(h.id);
    default:
      return '/';
  }
}

function loadRecent(): SearchHit[] {
  try {
    const raw = localStorage.getItem(RECENT_KEY);
    return raw ? (JSON.parse(raw) as SearchHit[]) : [];
  } catch {
    return [];
  }
}
function saveRecent(h: SearchHit) {
  try {
    const cur = loadRecent().filter((x) => !(x.type === h.type && x.id === h.id));
    localStorage.setItem(RECENT_KEY, JSON.stringify([h, ...cur].slice(0, MAX_RECENT)));
  } catch {
    /* ignore */
  }
}

const TYPE_ORDER: string[] = ['action', 'country', 'country_topic', 'country_indicator', 'indicator', 'topic', 'region', 'source'];

/**
 * Global search (⌘K / "/" / tab bar). Debounced `/api/v1/search?q=`, grouped hits with type chips, keyboard
 * navigation, recent searches in localStorage. Full-screen sheet on mobile, centred panel on desktop.
 */
export function SearchDialog() {
  const { open, setOpen } = useSearch();
  const router = useRouter();
  const [q, setQ] = useState('');
  const [hits, setHits] = useState<SearchHit[]>([]);
  const [state, setState] = useState<'idle' | 'loading' | 'error'>('idle');
  const [recent, setRecent] = useState<SearchHit[]>([]);
  const [active, setActive] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);
  const abortRef = useRef<AbortController | null>(null);

  useEffect(() => {
    if (open) {
      setRecent(loadRecent());
      setTimeout(() => inputRef.current?.focus(), 30);
    } else {
      setQ('');
      setHits([]);
      setState('idle');
      setActive(0);
    }
  }, [open]);

  useEffect(() => {
    const term = q.trim();
    abortRef.current?.abort();
    if (term.length < 1) {
      setHits([]);
      setState('idle');
      return;
    }
    const ctrl = new AbortController();
    abortRef.current = ctrl;
    setState('loading');
    const timer = setTimeout(async () => {
      try {
        const res = await clientApi.search(term, 14, ctrl.signal);
        if (ctrl.signal.aborted) return;
        setHits(res.hits);
        setActive(0);
        setState('idle');
      } catch (e) {
        if ((e as Error).name === 'AbortError') return;
        setState('error');
      }
    }, 160);
    return () => clearTimeout(timer);
  }, [q]);

  const list = useMemo(() => {
    const src = q.trim() ? hits : recent;
    return [...src].sort((a, b) => Number(b.type === 'action') - Number(a.type === 'action') || (q.trim() ? b.score - a.score : 0) || TYPE_ORDER.indexOf(a.type) - TYPE_ORDER.indexOf(b.type));
  }, [hits, recent, q]);

  const go = useCallback(
    (h: SearchHit) => {
      saveRecent(h);
      setOpen(false);
      router.push(hrefFor(h));
    },
    [router, setOpen],
  );

  const onKey = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      setActive((a) => Math.min(list.length - 1, a + 1));
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setActive((a) => Math.max(0, a - 1));
    } else if (e.key === 'Enter') {
      const h = list[active];
      if (h) go(h);
    }
  };

  const clearRecent = () => {
    try {
      localStorage.removeItem(RECENT_KEY);
    } catch {
      /* ignore */
    }
    setRecent([]);
  };

  return (
    <BottomSheet
      open={open}
      onClose={() => setOpen(false)}
      side="full"
      labelledBy="search-title"
      title={
        <div className="relative flex items-center">
          <Search size={16} aria-hidden className="absolute left-2 text-ink-3" />
          <input
            ref={inputRef}
            id="search-title"
            type="search"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onKeyDown={onKey}
            placeholder={t('search.placeholder')}
            aria-label={t('nav.search')}
            aria-controls="search-results"
            aria-activedescendant={list[active] ? `hit-${list[active].type}-${list[active].id}` : undefined}
            autoComplete="off"
            enterKeyHint="go"
            className="h-10 w-full rounded-sm border border-rule bg-paper pl-8 pr-8 text-base outline-none placeholder:text-ink-3 focus:border-accent"
          />
          {q ? (
            <button type="button" onClick={() => setQ('')} className="absolute right-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>
      }
    >
      <div className="text-sm">
        {!q.trim() && recent.length > 0 ? (
          <div className="mb-1 flex items-center justify-between text-2xs text-ink-3">
            <span className="inline-flex items-center gap-1">
              <Clock size={11} aria-hidden /> {t('search.recent')}
            </span>
            <button type="button" onClick={clearRecent} className="min-h-[32px] px-1 hover:text-ink">
              {t('search.clear')}
            </button>
          </div>
        ) : null}
        {!q.trim() ? (
          <div className={cn('text-ink-3', recent.length === 0 ? 'py-6 text-center' : 'pb-3')}>
            {recent.length === 0 ? <p>{t('search.start')}</p> : null}
            <p className={cn('flex flex-wrap items-center gap-1.5 text-xs', recent.length === 0 ? 'mt-3 justify-center' : '')}>
              <span>{t('search.examples')}</span>
              {(['compare', 'rank', 'indicatorCountry', 'indicatorGroup'] as const).map((k) => {
                const ex = t(`search.example.${k}` as 'search.example.compare');
                return (
                  <button key={k} type="button" onClick={() => setQ(ex)} className="inline-flex min-h-[32px] items-center rounded-sm border border-rule px-2 font-mono text-2xs text-ink-2 hover:border-accent hover:text-accent">
                    {ex}
                  </button>
                );
              })}
            </p>
          </div>
        ) : null}
        {state === 'error' ? <p className="py-6 text-center text-down">{t('search.error')}</p> : null}
        {q.trim() && state !== 'error' && state !== 'loading' && list.length === 0 ? <p className="py-6 text-center text-ink-3">{t('search.empty', { q: q.trim() })}</p> : null}
        <ul id="search-results" role="listbox" aria-label={t('nav.search')} className="divide-y divide-rule">
          {list.map((h, i) => (
            <li key={`${h.type}-${h.id}`} id={`hit-${h.type}-${h.id}`} role="option" aria-selected={i === active}>
              <button
                type="button"
                onClick={() => go(h)}
                onMouseEnter={() => setActive(i)}
                className={cn('flex min-h-[48px] w-full items-center gap-3 rounded-sm px-2 py-2 text-left', i === active ? 'bg-surface-2' : 'hover:bg-surface-2/60')}
              >
                <span aria-hidden className="w-6 text-center text-lg leading-none">
                  {h.type === 'action' ? <span className="text-accent">→</span> : h.country?.flag ?? ''}
                </span>
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-ink">{h.name}</span>
                  {h.hint ? <span className="block truncate text-xs text-ink-3">{h.hint}</span> : null}
                </span>
                <TypeChip type={h.type} />
                {i === active ? <CornerDownLeft size={14} aria-hidden className="hidden text-ink-3 md:block" /> : null}
              </button>
            </li>
          ))}
        </ul>
        <p className="mt-3 hidden text-2xs text-ink-3 md:block">{t('search.hint')}</p>
        <div aria-live="polite" className="sr-only">
          {state === 'loading' ? t('search.loading') : q.trim() ? t('search.results', { n: list.length }) : ''}
        </div>
      </div>
    </BottomSheet>
  );
}

const CHIP_TYPE: Record<string, SearchHitType> = { country: 'country', indicator: 'indicator', topic: 'topic', region: 'region', source: 'source', country_topic: 'topic', country_indicator: 'indicator', action: 'action' };
export function TypeChip({ type }: { type: SearchHitType | string }) {
  const key = CHIP_TYPE[type] ?? 'country';
  return <span className={cn('shrink-0 rounded-xs border px-1.5 py-0.5 text-2xs uppercase tracking-wide', key === 'action' ? 'border-accent bg-accent-soft text-accent' : 'border-rule text-ink-3')}>{t(`search.type.${key}` as 'search.type.country')}</span>;
}