// Global Search — command palette (⌘K). Searches across projects, meetings,
// documents, decisions, people. Renders window.CommandPalette.
(function () {
  const { useState, useEffect, useRef } = React;
  const IC = window.IC, D = window.DATA;

  function buildIndex() {
    const idx = [];
    D.projects.forEach((p) => idx.push({ group: "โครงการ", icon: "folder", title: p.name, sub: p.code + " · " + p.phaseTh, hay: (p.name + " " + p.code + " " + p.phaseTh + " " + p.owner).toLowerCase(), go: "project/" + p.id }));
    (D.meetingRecords || []).forEach((m) => idx.push({ group: "การประชุม", icon: "meet", title: m.title, sub: m.date + " · " + m.project, hay: (m.title + " " + m.project + " " + m.type).toLowerCase(), go: "meetings" }));
    (D.documents || []).forEach((d) => idx.push({ group: "เอกสาร", icon: "doc", title: d.name, sub: d.type + " · " + d.project, hay: (d.name + " " + d.project + " " + d.tags.join(" ")).toLowerCase(), go: "documents" }));
    (D.decisionLog || []).forEach((d) => idx.push({ group: "Decision", icon: "dec", title: d.change, sub: d.date + " · " + d.project, hay: (d.change + " " + d.project + " " + d.reason + " " + d.by).toLowerCase(), go: "decisions" }));
    (D.users || []).forEach((u) => idx.push({ group: "ผู้ใช้งาน", icon: "user", title: u.name, sub: u.title, hay: (u.name + " " + u.title + " " + u.email).toLowerCase(), go: "settings" }));
    return idx;
  }
  const INDEX = buildIndex();
  const QUICK = [
    { icon: "grid", title: "ไปที่ ภาพรวมองค์กร", go: "dashboard" },
    { icon: "trend", title: "อัปเดตโครงการ", go: "updates" },
    { icon: "gantt", title: "เปิด Timeline", go: "timeline" },
    { icon: "rep", title: "สร้างรายงาน", go: "reports" },
  ];

  window.CommandPalette = function CommandPalette() {
    const [open, setOpen] = useState(false);
    const [q, setQ] = useState("");
    const [sel, setSel] = useState(0);
    const inputRef = useRef(null);

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

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

    const results = q.trim()
      ? INDEX.filter((it) => it.hay.includes(q.trim().toLowerCase())).slice(0, 12)
      : [];
    const flat = q.trim() ? results : QUICK;

    const groups = {};
    if (q.trim()) results.forEach((r) => { (groups[r.group] = groups[r.group] || []).push(r); });

    const goTo = (it) => { setOpen(false); window.navigate(it.go); };

    const onKey = (e) => {
      if (e.key === "ArrowDown") { e.preventDefault(); setSel((s) => Math.min(s + 1, flat.length - 1)); }
      else if (e.key === "ArrowUp") { e.preventDefault(); setSel((s) => Math.max(s - 1, 0)); }
      else if (e.key === "Enter" && flat[sel]) { goTo(flat[sel]); }
    };

    if (!open) return null;
    let runningIdx = -1;
    return (
      <div className="cmdk-overlay" onClick={() => setOpen(false)}>
        <div className="cmdk" onClick={(e) => e.stopPropagation()}>
          <div className="cmdk-input">
            {IC.search}
            <input ref={inputRef} value={q} onChange={(e) => { setQ(e.target.value); setSel(0); }} onKeyDown={onKey}
              placeholder="ค้นหาโครงการ, ประชุม, เอกสาร, Decision, คน…" />
            <span className="kbd">ESC</span>
          </div>
          <div className="cmdk-body">
            {!q.trim() && (
              <div className="cmdk-grp">
                <div className="cmdk-grp-h">ทางลัด</div>
                {QUICK.map((it) => { runningIdx++; const i = runningIdx; return (
                  <button key={it.go} className={"cmdk-item" + (sel === i ? " on" : "")} onMouseEnter={() => setSel(i)} onClick={() => goTo(it)}>
                    <span className="cmdk-ic">{IC[it.icon]}</span><span className="cmdk-t">{it.title}</span><span className="cmdk-go">{IC.arrowR}</span>
                  </button>
                ); })}
              </div>
            )}
            {q.trim() && Object.keys(groups).length === 0 && (
              <div className="cmdk-empty">ไม่พบผลลัพธ์สำหรับ “{q}”</div>
            )}
            {q.trim() && Object.entries(groups).map(([g, items]) => (
              <div className="cmdk-grp" key={g}>
                <div className="cmdk-grp-h">{g}<span className="cmdk-grp-ct">{items.length}</span></div>
                {items.map((it) => { runningIdx++; const i = runningIdx; return (
                  <button key={i} className={"cmdk-item" + (sel === i ? " on" : "")} onMouseEnter={() => setSel(i)} onClick={() => goTo(it)}>
                    <span className="cmdk-ic">{IC[it.icon]}</span>
                    <span style={{ minWidth: 0, flex: 1 }}><span className="cmdk-t">{it.title}</span><span className="cmdk-sub">{it.sub}</span></span>
                    <span className="cmdk-go">{IC.arrowR}</span>
                  </button>
                ); })}
              </div>
            ))}
          </div>
          <div className="cmdk-foot">
            <span><span className="kbd">↑↓</span> เลื่อน</span>
            <span><span className="kbd">↵</span> เปิด</span>
            <span><span className="kbd">esc</span> ปิด</span>
          </div>
        </div>
      </div>
    );
  };
})();