/* Command palette — Cmd+K */

const CmdK = ({ open, onClose, onNavigate }) => {
  const [q, setQ] = useState("");
  const [idx, setIdx] = useState(0);
  const inputRef = useRef(null);

  useEffect(() => {
    if (open) {
      setQ(""); setIdx(0);
      setTimeout(() => inputRef.current?.focus(), 10);
    }
  }, [open]);

  const filtered = useMemo(() => {
    const s = q.trim().toLowerCase();
    if (!s) return COMMAND_PALETTE;
    return COMMAND_PALETTE.filter((c) => c.label.toLowerCase().includes(s) || c.group.toLowerCase().includes(s));
  }, [q]);

  const grouped = useMemo(() => {
    const g = {};
    filtered.forEach((c) => { (g[c.group] ||= []).push(c); });
    return g;
  }, [filtered]);

  const flat = filtered;

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + 1, flat.length - 1)); }
      else if (e.key === "ArrowUp") { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
      else if (e.key === "Enter") { e.preventDefault(); const c = flat[idx]; if (c?.page) { onNavigate(c.page); onClose(); } else { onClose(); } }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, flat, idx, onNavigate, onClose]);

  if (!open) return null;

  let runningIdx = -1;
  return (
    <div className="modal-backdrop" onClick={onClose} style={{ alignItems: "flex-start", paddingTop: 100 }}>
      <div className="modal" style={{ width: 580 }} onClick={(e) => e.stopPropagation()}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", borderBottom: "1px solid var(--border-subtle)" }}>
          <Icon name="search" />
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => { setQ(e.target.value); setIdx(0); }}
            placeholder="Tapez une commande, un produit, un fournisseur…"
            style={{ flex: 1, background: "transparent", border: "none", outline: "none", fontSize: 14, color: "var(--text)" }}
          />
          <span className="kbd">ESC</span>
        </div>
        <div style={{ maxHeight: 380, overflow: "auto", padding: "6px 0" }}>
          {Object.entries(grouped).map(([group, items]) => (
            <div key={group}>
              <div style={{ padding: "6px 14px 4px", fontSize: 10.5, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 500 }}>{group}</div>
              {items.map((c) => {
                runningIdx++;
                const active = runningIdx === idx;
                return (
                  <div key={c.id}
                       onMouseEnter={() => setIdx(filtered.indexOf(c))}
                       onClick={() => { if (c.page) onNavigate(c.page); onClose(); }}
                       style={{
                         display: "flex", alignItems: "center", gap: 10,
                         padding: "8px 14px", margin: "0 6px", borderRadius: 6,
                         background: active ? "var(--bg-3)" : "transparent",
                         cursor: "pointer", fontSize: 13
                       }}>
                    <Icon name={c.icon} size={14} />
                    <span style={{ flex: 1 }}>{c.label}</span>
                    {c.shortcut && <span className="kbd">{c.shortcut}</span>}
                  </div>
                );
              })}
            </div>
          ))}
          {filtered.length === 0 && (
            <div style={{ padding: 24, textAlign: "center", color: "var(--text-dim)", fontSize: 13 }}>
              Aucun résultat pour <span className="mono">"{q}"</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

window.CmdK = CmdK;