'use client';

import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useRef, useState } from 'react';
import { fmt } from '@/lib/format';
import { pressureColor } from '@/lib/pressure';
import type { SearchResult } from '@/lib/types';

const TYPE_LABEL: Record<SearchResult['type'], string> = { country: 'Country', region: 'Region', asn: 'ASN', service: 'Service', target: 'Target', incident: 'Incident' };

/** ⌘K search over /api/v1/search — countries, regions, ASNs, services, targets, incidents. */
export function Search() {
  const [open, setOpenState] = useState(false);
  const [q, setQ] = useState('');
  const [found, setFound] = useState<{ q: string; results: SearchResult[] }>({ q: '', results: [] });
  const [active, setActive] = useState(0);
  const router = useRouter();
  const inputRef = useRef<HTMLInputElement>(null);
  const results = q.trim() && found.q === q.trim() ? found.results : [];
  const loading = Boolean(q.trim()) && found.q !== q.trim();

  // open/close is an event: reset query + results here, not in an effect
  const setOpen = useCallback((next: boolean | ((o: boolean) => boolean)) => {
    setOpenState((o) => {
      const v = typeof next === 'function' ? next(o) : next;
      if (!v) {
        setQ('');
        setFound({ q: '', results: [] });
      } else setTimeout(() => inputRef.current?.focus(), 10);
      return v;
    });
  }, []);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setOpen((o) => !o);
      } else if (e.key === 'Escape') setOpen(false);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [setOpen]);

  useEffect(() => {
    const s = q.trim();
    if (!open || !s) return;
    const ctrl = new AbortController();
    const t = setTimeout(() => {
      fetch(`/api/v1/search?q=${encodeURIComponent(s)}`, { signal: ctrl.signal })
        .then((r) => (r.ok ? r.json() : { results: [] }))
        .then((d: { results?: SearchResult[] }) => {
          setFound({ q: s, results: d.results ?? [] });
          setActive(0);
        })
        .catch(() => {});
    }, 120);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [q, open]);

  const go = useCallback(
    (r: SearchResult | undefined) => {
      if (!r) return;
      setOpen(false);
      router.push(r.href);
    },
    [router, setOpen],
  );

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="inline-flex h-7 items-center gap-2 rounded-[4px] border border-line px-2 text-[11px] text-ink-2 hover:border-line-2 hover:text-ink"
        aria-label="Search (Command K)"
      >
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
          <circle cx="11" cy="11" r="7" />
          <path d="m20 20-3.5-3.5" />
        </svg>
        <span className="hidden sm:inline">Search</span>
        <kbd className="num hidden rounded-[2px] border border-line px-1 text-[9.5px] text-ink-3 sm:inline">⌘K</kbd>
      </button>
      {open && (
        <div className="fixed inset-0 z-[100] flex items-start justify-center bg-bg/80 px-3 pt-[12vh]" onClick={() => setOpen(false)} role="presentation">
          <div role="dialog" aria-modal="true" aria-label="Search" className="panel w-full max-w-[560px] overflow-hidden" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center gap-2 border-b border-line px-3">
              <span className="text-ink-3" aria-hidden="true">
                /
              </span>
              <input
                ref={inputRef}
                value={q}
                onChange={(e) => setQ(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    setActive((a) => Math.min(results.length - 1, a + 1));
                  } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    setActive((a) => Math.max(0, a - 1));
                  } else if (e.key === 'Enter') go(results[active]);
                }}
                placeholder="Country, region, AS number, service, hostname, incident…"
                className="h-11 w-full bg-transparent text-[14px] text-ink placeholder:text-ink-3 focus:outline-none"
                aria-activedescendant={results[active] ? `sr-${active}` : undefined}
              />
              {loading && <span className="text-[10px] text-ink-3">…</span>}
            </div>
            <ul role="listbox" className="max-h-[50vh] overflow-y-auto">
              {results.map((r, i) => (
                <li
                  key={`${r.type}-${r.id}`}
                  id={`sr-${i}`}
                  role="option"
                  aria-selected={i === active}
                  onMouseEnter={() => setActive(i)}
                  onClick={() => go(r)}
                  className={`flex cursor-pointer items-center gap-3 px-3 py-2 text-[13px] ${i === active ? 'bg-panel-2' : ''}`}
                >
                  <span className="label w-16 shrink-0">{TYPE_LABEL[r.type]}</span>
                  <span className="flex-1 truncate text-ink">{r.label}</span>
                  {r.pressure != null && (
                    <span className="num text-xs" style={{ color: pressureColor(r.pressure) }}>
                      {fmt(r.pressure)}
                    </span>
                  )}
                </li>
              ))}
              {q.trim() && !loading && results.length === 0 && <li className="px-3 py-6 text-center text-xs text-ink-3">No match in the observatory.</li>}
              {!q.trim() && <li className="px-3 py-4 text-xs text-ink-3">Type to search. ↑↓ to move, ⏎ to open, esc to close.</li>}
            </ul>
          </div>
        </div>
      )}
    </>
  );
}