// CommandPalette.jsx — ⌘K modal.
function CommandPalette({ open, onClose, onAction }) {
  const [q, setQ] = React.useState("");
  const items = [
    ["nav",   "Go to Overview",     "home",     "go-overview", "G O"],
    ["nav",   "Go to Palettes",     "palette",  "go-palettes", "G P"],
    ["nav",   "Go to Components",   "layers",   "go-components","G C"],
    ["theme", "Switch theme: trust",   "circle", "theme-trust", null],
    ["theme", "Switch theme: harmony", "circle", "theme-harmony", null],
    ["theme", "Switch theme: spirit",  "circle", "theme-spirit", null],
    ["theme", "Toggle dark mode",      "moon",   "toggle-dark", "⌘ D"],
    ["action","New palette",        "plus",     "new-palette", "N"],
    ["action","Export tokens",      "arrow-up-right","export", null],
  ];
  const filtered = items.filter(([, label]) => label.toLowerCase().includes(q.toLowerCase()));
  const [active, setActive] = React.useState(0);

  React.useEffect(() => { if (open) setQ(""), setActive(0); }, [open]);
  React.useEffect(() => { setActive(0); }, [q]);

  function onKey(e) {
    if (e.key === "ArrowDown") { e.preventDefault(); setActive((i) => Math.min(filtered.length - 1, i + 1)); }
    if (e.key === "ArrowUp")   { e.preventDefault(); setActive((i) => Math.max(0, i - 1)); }
    if (e.key === "Enter")     { e.preventDefault(); const it = filtered[active]; if (it) onAction(it[3]); }
    if (e.key === "Escape")    { onClose(); }
  }

  const groups = {};
  filtered.forEach((it, idx) => {
    const g = it[0];
    (groups[g] ||= []).push({ ...it, idx });
  });

  return (
    <div className={"scrim" + (open ? " scrim--open" : "")} onClick={onClose}>
      <div className="cmdk" onClick={(e) => e.stopPropagation()}>
        <input
          className="cmdk__input"
          placeholder="Type a command or search…"
          value={q}
          autoFocus={open}
          onChange={(e) => setQ(e.target.value)}
          onKeyDown={onKey}
        />
        <div className="cmdk__list">
          {Object.entries(groups).map(([groupName, list]) => (
            <div key={groupName}>
              <div className="cmdk__group">{groupName === "nav" ? "Navigation" : groupName === "theme" ? "Themes" : "Actions"}</div>
              {list.map((it) => (
                <div
                  key={it[3]}
                  className={"cmdk__item" + (it.idx === active ? " cmdk__item--active" : "")}
                  onMouseEnter={() => setActive(it.idx)}
                  onClick={() => onAction(it[3])}
                >
                  <Icon name={it[2]} size={14} style={{ color: "var(--muted-foreground)" }}/>
                  <span>{it[1]}</span>
                  {it[4] && <kbd>{it[4]}</kbd>}
                </div>
              ))}
            </div>
          ))}
          {filtered.length === 0 && (
            <div className="muted" style={{ padding: "20px 12px", fontSize: 13 }}>No matches.</div>
          )}
        </div>
      </div>
    </div>
  );
}
window.CommandPalette = CommandPalette;