// MY GENI — Phase 25 · #26 · ⌘K command palette.
//
// The header/sidebar search affordances advertised ⌘K but no chord existed.
// This palette searches the canonical objects (projects, decisions, people,
// clients) and navigates by hash route — the one productivity "delight"
// feature expected of a modern operating-system workspace.
function CommandPalette() {
  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState('');
  const [cursor, setCursor] = React.useState(0);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    function onKey(e) {
      if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
        e.preventDefault();
        setOpen(o => !o);
      }
      if (e.key === 'Escape') setOpen(false);
    }
    // Click delegation: the header search pill and sidebar "Jump to…" are
    // role="button" divs re-rendered on every route change — delegation on
    // document survives all of that without touching their markup.
    function onClick(e) {
      if (e.target.closest && e.target.closest('.header-search, .side-search')) {
        e.preventDefault();
        setOpen(true);
      }
    }
    function onRouteChange() { setOpen(false); }
    window.addEventListener('keydown', onKey);
    document.addEventListener('click', onClick);
    window.addEventListener('hashchange', onRouteChange);
    return () => {
      window.removeEventListener('keydown', onKey);
      window.removeEventListener('hashchange', onRouteChange);
      document.removeEventListener('click', onClick);
    };
  }, []);

  React.useEffect(() => {
    if (open) {
      setQuery('');
      setCursor(0);
      setTimeout(() => inputRef.current && inputRef.current.focus(), 0);
    }
  }, [open]);

  if (!open) return null;

  const data = window.MYGENI_DATA || {};
  const results = [];

  (data.projects || []).forEach(p => results.push({
    group: 'Projects', label: p.name, meta: p.code, href: '#/projects/' + p.id,
  }));
  (data.decisions || []).forEach(d => results.push({
    group: 'Decisions', label: d.title, meta: d.status, href: '#/decisions/dec/' + d.id,
  }));
  (window.MYGENI_PEOPLE ? window.MYGENI_PEOPLE.team() : []).forEach(p => results.push({
    group: 'People', label: p.displayName || p.name, meta: p.functionalRole, href: '#/clients',
  }));
  Object.values(data.clients || {}).forEach(c => results.push({
    group: 'Clients', label: c.name || c.short, meta: '', href: '#/clients',
  }));

  const q = query.trim().toLowerCase();
  const filtered = (q ? results.filter(r => (r.label + ' ' + r.meta + ' ' + r.group).toLowerCase().includes(q)) : results).slice(0, 9);

  function select(r) {
    if (r) location.hash = r.href;
    setOpen(false);
  }

  function onKeyDown(e) {
    if (e.key === 'ArrowDown') { e.preventDefault(); setCursor(c => Math.min(c + 1, filtered.length - 1)); }
    if (e.key === 'ArrowUp')   { e.preventDefault(); setCursor(c => Math.max(c - 1, 0)); }
    if (e.key === 'Enter')     { e.preventDefault(); select(filtered[cursor]); }
  }

  return (
    <div className="cmd-overlay" onClick={() => setOpen(false)}>
      <div className="cmd-palette" onClick={e => e.stopPropagation()}>
        <input
          ref={inputRef}
          value={query}
          onChange={e => { setQuery(e.target.value); setCursor(0); }}
          onKeyDown={onKeyDown}
          placeholder="Search projects, decisions, documents, people…"
          aria-label="Command palette search"
        />
        <div className="cmd-results">
          {filtered.length === 0 && <div className="cmd-empty">No matches for “{query}”</div>}
          {filtered.map((r, i) => (
            <button
              key={r.group + r.label + i}
              className={`cmd-result${i === cursor ? ' active' : ''}`}
              onMouseEnter={() => setCursor(i)}
              onClick={() => select(r)}
              type="button"
            >
              <span className="cmd-group mono">{r.group}</span>
              <span className="cmd-label truncate">{r.label}</span>
              <span className="cmd-meta truncate">{r.meta}</span>
            </button>
          ))}
        </div>
        <div className="cmd-footer">
          <kbd>↑↓</kbd> navigate · <kbd>↵</kbd> select · <kbd>esc</kbd> close
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CommandPalette });