// ⌘K command palette — real filtering, keyboard navigation, dispatches actions.

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

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

  const commands = React.useMemo(() => [
    { group: "Springen",
      items: [
        { id: "nav:dashboard",  label: "Dashboard",            icon: "home",       trail: "G D" },
        { id: "nav:anfragen",   label: "Anfragen",             icon: "inbox",      trail: "G A" },
        { id: "nav:bewohner",   label: "Bewohner",             icon: "users",      trail: "G B" },
        { id: "nav:visiten",    label: "Visiten",              icon: "stethoscope",trail: "G V" },
        { id: "nav:therapien",  label: "Therapien",            icon: "activity",   trail: "G T" },
        { id: "nav:rezepte",    label: "Rezepte",              icon: "pill",       trail: "G R" },
      ],
    },
    { group: "Aktionen",
      items: [
        { id: "new:anfrage",  label: "Neue Medikamentenanforderung", icon: "plus",     trail: "N" },
        { id: "new:visite",   label: "Visite planen",                icon: "calendar", trail: "V" },
        { id: "new:therapie", label: "Termin anlegen",                icon: "activity", trail: "T" },
      ],
    },
    { group: "Rolle wechseln",
      items: [
        { id: "portal:heim",     label: "Pflegeheim-Portal",   icon: "home",        trail: "" },
        { id: "portal:arzt",     label: "Arzt-Portal",         icon: "stethoscope", trail: "" },
        { id: "portal:apotheke", label: "Apotheken-Portal",    icon: "pill",        trail: "" },
        { id: "portal:therapeut",label: "Therapeuten-Portal",  icon: "activity",    trail: "" },
      ],
    },
    { group: "Bewohner",
      items: BEWOHNER.slice(0, 6).map(b => ({
        id: `bewohner:${b.id}`,
        label: b.name,
        sub: `${b.zimmer} · ${HEIMS.find(h => h.id === b.heim)?.name}`,
        icon: "user",
        trail: b.zimmer,
      })),
    },
  ], []);

  const filtered = React.useMemo(() => {
    if (!q.trim()) return commands;
    const needle = q.toLowerCase();
    return commands
      .map(g => ({ ...g, items: g.items.filter(it => it.label.toLowerCase().includes(needle) || (it.sub || "").toLowerCase().includes(needle)) }))
      .filter(g => g.items.length);
  }, [q, commands]);

  const flat = filtered.flatMap(g => g.items);

  React.useEffect(() => {
    if (!open) return;
    const h = (e) => {
      if (e.key === "Escape") { e.preventDefault(); onClose(); }
      else 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 item = flat[idx];
        if (item) { onRun(item.id); onClose(); }
      }
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [open, flat, idx]);

  if (!open) return null;
  let running = 0;
  return (
    <div className="overlay" onClick={onClose}>
      <div className="cmdk" onClick={(e) => e.stopPropagation()}>
        <input
          ref={inputRef}
          placeholder="Was möchtest du tun? z. B. 'neue Anfrage', 'Müller'…"
          value={q}
          onChange={(e) => { setQ(e.target.value); setIdx(0); }}
        />
        <div className="cmdk-list">
          {flat.length === 0 && <div className="cmdk-empty">Kein Ergebnis für „{q}"</div>}
          {filtered.map(g => (
            <div key={g.group}>
              <div className="cmdk-group-label">{g.group}</div>
              {g.items.map(it => {
                const i = running++;
                return (
                  <div
                    key={it.id}
                    className={`cmdk-item ${i === idx ? "active" : ""}`}
                    onMouseEnter={() => setIdx(i)}
                    onClick={() => { onRun(it.id); onClose(); }}
                  >
                    <Icon name={it.icon} size={14} />
                    <span>{it.label}</span>
                    {it.sub && <span style={{marginLeft: 6, color: "var(--fg-subtle)", fontSize: 11}}>{it.sub}</span>}
                    <span className="trail">{it.trail}</span>
                  </div>
                );
              })}
            </div>
          ))}
        </div>
        <div className="cmdk-foot">
          <span><span className="kbd">↵</span> öffnen</span>
          <span><span className="kbd">↑</span><span className="kbd">↓</span> navigieren</span>
          <span><span className="kbd">esc</span> schließen</span>
          <span style={{marginLeft: "auto", color: "var(--fg-subtle)"}}>MedLink Command</span>
        </div>
      </div>
    </div>
  );
};

window.CmdK = CmdK;