// Command Palette (⌘K)
function CommandPalette({ open, onClose, onNavigate, onAction }) {
  const [query, setQuery] = useState("");
  const [sel, setSel] = useState(0);
  const inputRef = useRef(null);

  useEffect(() => {
    if (open) {
      setQuery("");
      setSel(0);
      setTimeout(() => inputRef.current && inputRef.current.focus(), 30);
    }
  }, [open]);

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return Data.cmdkItems;
    return Data.cmdkItems.filter((it) => it.title.toLowerCase().includes(q) || it.group.toLowerCase().includes(q));
  }, [query]);

  // Group
  const grouped = useMemo(() => {
    const g = {};
    filtered.forEach((it) => {
      if (!g[it.group]) g[it.group] = [];
      g[it.group].push(it);
    });
    return g;
  }, [filtered]);

  // Flat list for keyboard nav
  const flat = filtered;

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") { onClose(); return; }
      if (e.key === "ArrowDown") { e.preventDefault(); setSel((s) => Math.min(s + 1, flat.length - 1)); }
      if (e.key === "ArrowUp")   { e.preventDefault(); setSel((s) => Math.max(s - 1, 0)); }
      if (e.key === "Enter")     { e.preventDefault(); pick(flat[sel]); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, flat, sel]);

  const pick = (item) => {
    if (!item) return;
    if (item.to) onNavigate(item.to);
    else if (item.action) onAction(item.action);
    onClose();
  };

  if (!open) return null;
  let idx = -1;
  return (
    <div className="cmdk-overlay" onClick={onClose}>
      <div className="cmdk" onClick={(e) => e.stopPropagation()}>
        <div className="cmdk-input-wrap">
          <i className="fas fa-search"></i>
          <input
            ref={inputRef}
            className="cmdk-input"
            placeholder="Buscar telas, ações, configurações…"
            value={query}
            onChange={(e) => { setQuery(e.target.value); setSel(0); }}
          />
          <span className="kbd-key">ESC</span>
        </div>
        <div className="cmdk-list">
          {Object.keys(grouped).length === 0 && (
            <div className="empty"><i className="fas fa-search"></i><p>Nenhum resultado para "{query}"</p></div>
          )}
          {Object.entries(grouped).map(([group, items]) => (
            <div className="cmdk-group" key={group}>
              <div className="cmdk-group-label">{group}</div>
              {items.map((it) => {
                idx++;
                const isSel = idx === sel;
                const myIdx = idx;
                return (
                  <div
                    key={it.title}
                    className={"cmdk-item" + (isSel ? " selected" : "")}
                    onMouseEnter={() => setSel(myIdx)}
                    onClick={() => pick(it)}
                  >
                    <span className="ci-icon"><i className={"fas " + it.icon}></i></span>
                    <span>{it.title}</span>
                    {it.to && <span className="ci-sub"><i className="fas fa-arrow-right"></i></span>}
                  </div>
                );
              })}
            </div>
          ))}
        </div>
        <div className="cmdk-foot">
          <span><span className="kbd">↑↓</span> navegar</span>
          <span><span className="kbd">↵</span> selecionar</span>
          <span><span className="kbd">esc</span> fechar</span>
        </div>
      </div>
    </div>
  );
}

window.CommandPalette = CommandPalette;