/* global React, lecygne */
// =====================================================================
// Palette de recherche globale (Ctrl/Cmd+K) : clients, commandes,
// factures. La sélection navigue vers l'écran et pré-remplit sa
// recherche via ctx.navTo(route, term). Composant global : CommandPalette.
// =====================================================================

function CommandPalette({ open, onClose, navTo }) {
  const [q, setQ] = React.useState("");
  const [res, setRes] = React.useState([]);
  const [active, setActive] = React.useState(0);
  const [loading, setLoading] = React.useState(false);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (open) { setQ(""); setRes([]); setActive(0); setTimeout(() => inputRef.current && inputRef.current.focus(), 30); }
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    let alive = true;
    if (q.trim().length < 2) { setRes([]); return; }
    setLoading(true);
    const id = setTimeout(() => {
      lecygne.globalSearch(q).then((r) => { if (alive) { setRes(r); setActive(0); setLoading(false); } });
    }, 180);
    return () => { alive = false; clearTimeout(id); };
  }, [q, open]);

  function choose(r) { if (!r) return; navTo(r.route, r.term); onClose(); }

  function onKey(e) {
    if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => Math.min(a + 1, res.length - 1)); }
    else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); }
    else if (e.key === "Enter") { e.preventDefault(); choose(res[active]); }
    else if (e.key === "Escape") { onClose(); }
  }

  if (!open) return null;
  const icon = { client: "users", commande: "receipt", facture: "file" };

  return (
    <div className="modal-overlay" style={{ alignItems: "flex-start", paddingTop: "12vh" }} onClick={onClose}>
      <div className="palette" onClick={(e) => e.stopPropagation()}>
        <input ref={inputRef} className="palette-input" placeholder="Rechercher un client, une commande (n°), une facture…"
          value={q} onChange={(e) => setQ(e.target.value)} onKeyDown={onKey} />
        <div className="palette-results">
          {loading && <div className="palette-empty">Recherche…</div>}
          {!loading && q.trim().length >= 2 && !res.length && <div className="palette-empty">Aucun résultat.</div>}
          {!loading && q.trim().length < 2 && <div className="palette-empty">Tapez au moins 2 caractères.</div>}
          {res.map((r, i) => (
            <button key={i} className={"palette-item" + (i === active ? " active" : "")}
              onMouseEnter={() => setActive(i)} onClick={() => choose(r)}>
              <span className="ico"><Icon name={icon[r.type]} size={16} /></span>
              <span className="palette-label">{r.label}</span>
              <span className="palette-sub">{r.sub}</span>
            </button>
          ))}
        </div>
        <div className="palette-foot">↑↓ pour naviguer · Entrée pour ouvrir · Échap pour fermer</div>
      </div>
    </div>
  );
}