'use client';
import { ArrowRight, Globe2, Rocket, Satellite, Search, X } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useEffect, useRef, useState } from 'react';
import { clientApi } from '@/lib/client-api';
import { cn } from '@/lib/cn';
import { routes } from '@/lib/site';
import type { SearchResult } from '@/lib/types';
import { useSearch } from './search-context';

const EXAMPLES = ['ISS', 'Starlink', '25544', '1998-067A', 'SpaceX', 'Canada', 'GPS', 'weather satellites', 'GEO'];

function Icon({ type }: { type: SearchResult['entity_type'] }) {
  const cls = 'size-4 shrink-0 text-ink-3';
  if (type === 'satellite') return <Satellite className={cls} aria-hidden />;
  if (type === 'launch' || type === 'launch_site') return <Rocket className={cls} aria-hidden />;
  return <Globe2 className={cls} aria-hidden />;
}

/** Command-palette style global search (⌘K or /). Same-origin API; keyboard navigable; mobile full-screen sheet. */
export function SearchDialog() {
  const { open, setOpen } = useSearch();
  const router = useRouter();
  const [q, setQ] = useState('');
  const [results, setResults] = useState<SearchResult[]>([]);
  const [shortcuts, setShortcuts] = useState<{ label: string; href: string }[]>([]);
  const [active, setActive] = useState(0);
  const [loading, setLoading] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (open) {
      setTimeout(() => inputRef.current?.focus(), 20);
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
      setQ('');
      setResults([]);
      setShortcuts([]);
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const term = q.trim();
    if (term.length < 1) {
      setResults([]);
      setShortcuts([]);
      return;
    }
    const ctrl = new AbortController();
    const t = setTimeout(async () => {
      setLoading(true);
      try {
        const res = await clientApi.search(term, 12, ctrl.signal);
        setResults(res.data.results);
        setShortcuts(res.data.shortcuts);
        setActive(0);
      } catch {
        /* aborted or unavailable */
      } finally {
        setLoading(false);
      }
    }, 140);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [q, open]);

  if (!open) return null;
  const items = [...shortcuts.map((s) => ({ href: s.href, title: s.label, subtitle: 'Filter', entity_type: 'filter' as const })), ...results];

  const onKey = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      setActive((a) => Math.min(a + 1, items.length - 1));
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setActive((a) => Math.max(a - 1, 0));
    } else if (e.key === 'Enter') {
      e.preventDefault();
      const it = items[active];
      if (it) {
        router.push(it.href);
        setOpen(false);
      } else if (q.trim()) {
        router.push(routes.search(q.trim()));
        setOpen(false);
      }
    } else if (e.key === 'Escape') {
      setOpen(false);
    }
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-start justify-center bg-black/60 backdrop-blur-sm md:pt-[12vh]" role="dialog" aria-modal="true" aria-label="Search SatelliteIndex" onClick={() => setOpen(false)}>
      <div className="panel flex h-[100dvh] w-full flex-col overflow-hidden md:h-auto md:max-h-[70vh] md:w-[640px] md:rounded-xl" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center gap-3 border-b border-rule px-4 py-3">
          <Search className="size-5 text-ink-3" aria-hidden />
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onKeyDown={onKey}
            placeholder="Search satellites, NORAD, COSPAR, operators, countries…"
            className="min-w-0 flex-1 bg-transparent text-[16px] text-ink placeholder:text-ink-3 focus:outline-none"
            autoComplete="off"
            spellCheck={false}
            aria-label="Search"
          />
          <button type="button" onClick={() => setOpen(false)} className="flex size-9 items-center justify-center rounded-md text-ink-3 hover:bg-plane-2 hover:text-ink" aria-label="Close search">
            <X className="size-5" aria-hidden />
          </button>
        </div>
        <div className="scrollbar-thin flex-1 overflow-y-auto">
          {q.trim() === '' ? (
            <div className="px-4 py-4">
              <p className="eyebrow mb-2">Try</p>
              <div className="flex flex-wrap gap-2">
                {EXAMPLES.map((ex) => (
                  <button key={ex} type="button" onClick={() => setQ(ex)} className="rounded-full border border-rule bg-plane-2 px-3 py-1.5 text-sm text-ink-2 hover:border-rule-strong hover:text-ink">
                    {ex}
                  </button>
                ))}
              </div>
              <p className="mt-6 text-xs text-ink-3">
                Press <kbd className="mono rounded border border-rule px-1">↵</kbd> for full results · <kbd className="mono rounded border border-rule px-1">esc</kbd> to close
              </p>
            </div>
          ) : items.length === 0 && !loading ? (
            <div className="px-4 py-8 text-center text-sm text-ink-3">No results for “{q}”. <Link href={routes.search(q)} onClick={() => setOpen(false)} className="link">Open full search</Link></div>
          ) : (
            <ul className="py-2">
              {items.map((it, i) => (
                <li key={`${it.entity_type}-${it.href}`}>
                  <Link
                    href={it.href}
                    onClick={() => setOpen(false)}
                    onMouseEnter={() => setActive(i)}
                    className={cn('flex min-h-[48px] items-center gap-3 px-4 py-2.5', i === active ? 'bg-plane-3' : 'hover:bg-plane-2')}
                  >
                    {it.entity_type === 'filter' ? <ArrowRight className="size-4 shrink-0 text-accent" aria-hidden /> : <Icon type={it.entity_type} />}
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-[15px] text-ink">{it.title}</span>
                      {it.subtitle && <span className="block truncate text-xs text-ink-3">{it.subtitle}</span>}
                    </span>
                    <span className="eyebrow hidden md:block">{it.entity_type.replace('_', ' ')}</span>
                  </Link>
                </li>
              ))}
              {q.trim() && (
                <li>
                  <Link href={routes.search(q.trim())} onClick={() => setOpen(false)} className="flex min-h-[44px] items-center gap-3 px-4 py-2 text-sm text-accent hover:bg-plane-2">
                    <Search className="size-4" aria-hidden /> All results for “{q.trim()}”
                  </Link>
                </li>
              )}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
}