/* Search — ⌘K command palette over the docs index (window.EQ_SEARCH).
 * Client-side substring match with highlighting + full keyboard nav.
 * Exports window.SearchPalette. */

function highlight(text, q) {
  if (!q) return text;
  const i = text.toLowerCase().indexOf(q.toLowerCase());
  if (i < 0) return text;
  return (<React.Fragment>
    {text.slice(0, i)}<mark>{text.slice(i, i+q.length)}</mark>{text.slice(i+q.length)}
  </React.Fragment>);
}

function SearchPalette({ open, onClose, onSelect }) {
  const [q, setQ] = React.useState('');
  const [active, setActive] = React.useState(0);
  const inputRef = React.useRef(null);
  const listRef = React.useRef(null);

  const results = React.useMemo(() => {
    const idx = window.EQ_SEARCH || [];
    const query = q.trim().toLowerCase();
    if (!query) return idx.filter(e => e.sectionId === null); // pages when empty
    return idx.filter(e =>
      e.title.toLowerCase().includes(query) ||
      e.snippet.toLowerCase().includes(query) ||
      e.crumb.toLowerCase().includes(query)
    ).slice(0, 24);
  }, [q]);

  React.useEffect(() => { setActive(0); }, [q]);
  React.useEffect(() => {
    if (open) { setQ(''); setActive(0);
      requestAnimationFrame(() => inputRef.current && inputRef.current.focus()); }
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') { e.preventDefault(); onClose(); }
      else if (e.key === 'ArrowDown') { e.preventDefault(); setActive(a => Math.min(a+1, results.length-1)); }
      else if (e.key === 'ArrowUp') { e.preventDefault(); setActive(a => Math.max(a-1, 0)); }
      else if (e.key === 'Enter') { e.preventDefault(); const r = results[active]; if (r) { onSelect(r); onClose(); } }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, results, active]);

  React.useEffect(() => {
    if (!listRef.current) return;
    const el = listRef.current.querySelector('.palette__item--active');
    if (el) { const p = listRef.current;
      const top = el.offsetTop, bot = top + el.offsetHeight;
      if (top < p.scrollTop) p.scrollTop = top - 8;
      else if (bot > p.scrollTop + p.clientHeight) p.scrollTop = bot - p.clientHeight + 8; }
  }, [active]);

  if (!open) return null;

  // group results by their `group`
  const groups = {};
  results.forEach((r,i) => { (groups[r.group] = groups[r.group] || []).push([r,i]); });

  return (
    <div className="palette__scrim" onMouseDown={onClose}>
      <div className="palette" onMouseDown={e => e.stopPropagation()}>
        <div className="palette__inputrow">
          <window.EqIcon name="search" size={18} />
          <input ref={inputRef} className="palette__input" placeholder="Search the documentation…"
            value={q} onChange={e => setQ(e.target.value)} />
          <span className="palette__esc">Esc</span>
        </div>
        <div className="palette__results" ref={listRef}>
          {results.length === 0
            ? <div className="palette__empty">No matches for “{q}”.</div>
            : Object.entries(groups).map(([g, items]) => (
                <div key={g}>
                  <div className="palette__grouphd">{g}</div>
                  {items.map(([r,i]) => (
                    <button key={r.pageId+'#'+(r.sectionId||'')} data-i={i}
                      className={`palette__item ${i===active?'palette__item--active':''}`}
                      onMouseEnter={() => setActive(i)}
                      onClick={() => { onSelect(r); onClose(); }}>
                      <span className="palette__crumb">{r.crumb}</span>
                      <span className="palette__title">{highlight(r.title, q.trim())}</span>
                      <span className="palette__snippet">{r.snippet}</span>
                    </button>
                  ))}
                </div>
              ))}
        </div>
        <div className="palette__foot">
          <span><kbd>↑↓</kbd>navigate</span>
          <span><kbd>↵</kbd>open</span>
          <span><kbd>esc</kbd>dismiss</span>
        </div>
      </div>
    </div>
  );
}
window.SearchPalette = SearchPalette;