const { useState, useEffect, useRef } = React;

function SearchOverlay({ onClose, onNavigate }) {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const [selected, setSelected] = useState(0);
  const inputRef = useRef(null);
  const debounceRef = useRef(null);

  useEffect(() => {
    inputRef.current?.focus();
    function onKey(e) {
      if (e.key === 'Escape') onClose();
    }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  useEffect(() => {
    setSelected(0);
    if (!query.trim()) { setResults([]); return; }
    clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(async () => {
      setLoading(true);
      try {
        const res = await fetch('/api/search?q=' + encodeURIComponent(query.trim()));
        setResults(await res.json());
      } catch {}
      setLoading(false);
    }, 250);
  }, [query]);

  function handleKey(e) {
    if (e.key === 'ArrowDown') { e.preventDefault(); setSelected(s => Math.min(s + 1, results.length - 1)); }
    if (e.key === 'ArrowUp') { e.preventDefault(); setSelected(s => Math.max(s - 1, 0)); }
    if (e.key === 'Enter' && results[selected]) {
      onNavigate('#/wiki/' + results[selected].slug);
      onClose();
    }
  }

  function go(slug) {
    onNavigate('#/wiki/' + slug);
    onClose();
  }

  return (
    <div className="search-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="search-box">
        <div className="search-input-wrap">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
          <input
            ref={inputRef}
            className="search-input"
            type="text"
            placeholder="Search pages…"
            value={query}
            onChange={e => setQuery(e.target.value)}
            onKeyDown={handleKey}
          />
          {loading && <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>…</span>}
        </div>

        {results.length > 0 && (
          <div className="search-results">
            {results.map((r, i) => (
              <div
                key={r.slug}
                className={'search-result' + (i === selected ? ' selected' : '')}
                onClick={() => go(r.slug)}
              >
                <div className="search-result-title">{r.title}</div>
                <div className="search-result-slug">{r.slug}</div>
                {r.context && <div className="search-result-context">{r.context}</div>}
              </div>
            ))}
          </div>
        )}

        {query && !loading && results.length === 0 && (
          <div className="search-empty">No results for "{query}"</div>
        )}

        {!query && (
          <div className="search-empty" style={{ paddingTop: 20, paddingBottom: 20 }}>
            Type to search all pages
          </div>
        )}

        <div className="search-hint">
          <span><kbd>↑↓</kbd> navigate</span>
          <span><kbd>↵</kbd> open</span>
          <span><kbd>Esc</kbd> close</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SearchOverlay });