/* global React */
const { useState, useEffect, useRef } = React;

function CmdK({ open, setOpen, setRoute }) {
  const [q, setQ] = useState("");
  const inputRef = useRef(null);

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

  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        setOpen((o) => !o);
      }
      if (e.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [setOpen]);

  const results = [
    { sec: "Suggestions · Canvas thinks you want to…" },
    { k: "ask", l: '"How mature is refillable luxury in EU5?"', sub: "Asks Predictor + surfaces Chorus + drafts brief block", go: "predictor" },
    { k: "ask", l: '"Why did Good Girl sentiment rise overnight?"', sub: "Opens Analyst · Pulse, grouped by driver", go: "analyst" },
    { k: "ask", l: '"What would Gen-Z pay for the new refill?"', sub: "Runs 3 personas in Chorus", go: "strategist" },
    { k: "ask", l: '"What did Dior ship in Italy yesterday?"', sub: "Opens Analyst · Looking Glass", go: "analyst" },
    { k: "ask", l: '"Which ingredients are cooling in fragrance?"', sub: "Opens Predictor · Materia", go: "predictor" },
    { sec: "Rooms" },
    { k: "nav", l: "Home", sub: "Morning brief · today's signals", go: "home" },
    { k: "nav", l: "Analyst", sub: "Pulse · Looking Glass · Ledger · Postscript", go: "analyst" },
    { k: "nav", l: "Strategist", sub: "Chorus · Briefs", go: "strategist" },
    { k: "nav", l: "Predictor", sub: "Spate · Materia", go: "predictor" },
    { sec: "Modules" },
    { k: "nav", l: "Pulse — social listener", sub: "Analyst room · module 01", go: "analyst" },
    { k: "nav", l: "Looking Glass — competitive benchmark", sub: "Analyst room · module 02", go: "analyst" },
    { k: "nav", l: "Ledger — pricing intelligence", sub: "Analyst room · module 03", go: "analyst" },
    { k: "nav", l: "Postscript — campaign debrief", sub: "Analyst room · module 04", go: "analyst" },
    { k: "nav", l: "Chorus — persona lab", sub: "Strategist room · module 05", go: "strategist" },
    { k: "nav", l: "Spate — trend forecasting", sub: "Predictor room · module 07", go: "predictor" },
    { k: "nav", l: "Materia — ingredients radar", sub: "Predictor room · module 08", go: "predictor" },
    { k: "nav", l: "Good Girl Refill brief", sub: "In progress · 6 blocks", go: "briefs" },
    { sec: "Actions" },
    { k: "act", l: "Draft a new brief from today's signals", sub: "Uses the 3 signals from Home" },
    { k: "act", l: "Compose morning brief for a different brand", sub: "JPG, Rabanne, Nina Ricci, Prada Beauty…" },
  ];

  const filtered = q
    ? results.filter((r) => r.sec || (r.l + (r.sub || "")).toLowerCase().includes(q.toLowerCase()))
    : results;

  if (!open) return null;
  return (
    <div className="cmd-overlay" onClick={() => setOpen(false)}>
      <div className="cmd" onClick={(e) => e.stopPropagation()}>
        <div className="cmd-input">
          <span className="chev">▲</span>
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Ask Canvas anything — or jump to a room…"
          />
          <span className="kbd">ESC</span>
        </div>
        <div className="cmd-list">
          {filtered.map((r, i) =>
            r.sec ? (
              <div key={i} className="cmd-sec">{r.sec}</div>
            ) : (
              <div
                key={i}
                className="cmd-item"
                onClick={() => { if (r.go) { setRoute(r.go); setOpen(false); } }}
              >
                <div className="ic">{r.k === "ask" ? "▲" : r.k === "nav" ? "→" : "·"}</div>
                <div className="body">
                  <div className="l">{r.l}</div>
                  <div className="s">{r.sub}</div>
                </div>
                <div className="rk">{r.k === "ask" ? "ASK CANVAS" : r.k === "nav" ? "JUMP" : "ACTION"}</div>
              </div>
            )
          )}
        </div>
        <div className="cmd-foot">
          <span>↑↓ navigate</span>
          <span>↵ open</span>
          <span>⌘K close</span>
          <span style={{ marginLeft: "auto" }}>Canvas · Haiku agent</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CmdK });