(() => {
const { Icon, Badge, Avatar } = window.TaskFlowDesignSystem_dd53c2;

/* Cari global: satu input di top bar untuk task, project, dokumen, dan user.
   Pencarian dibatasi 6 hasil per kelompok dan hanya jalan bila kata ≥ 2 huruf,
   sehingga tetap ringan meski data ribuan baris. */
function GlobalSearch({ tasks = [], isAdmin, meId, onOpenTask, onNavigate, onOpenDocument }) {
  const compact = useBreakpoint() !== "desktop";
  const [q, setQ] = React.useState("");
  const [open, setOpen] = React.useState(false);
  const box = React.useRef(null);
  React.useEffect(() => {
    const away = (e) => { if (box.current && !box.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", away);
    return () => document.removeEventListener("mousedown", away);
  }, []);
  const scope = React.useMemo(() => (isAdmin ? tasks : tasks.filter((t) => t.user === meId)), [tasks, isAdmin, meId]);
  const res = React.useMemo(() => {
    const s = q.trim().toLowerCase();
    if (s.length < 2) return null;
    const hit = (v) => String(v || "").toLowerCase().includes(s);
    const taskHits = scope.filter((t) => hit(t.type) || hit(t.category)).slice(0, 6);
    const projects = [...new Set(scope.filter((t) => t.project && hit(t.project)).map((t) => t.project))].slice(0, 4);
    const docs = scope.filter((t) => t.status === "done" && t.evidence && (hit(t.evidence.name) || hit(t.type))).slice(0, 4);
    const users = isAdmin ? USERS.filter((u) => hit(u.name) || hit(u.email) || hit(u.role)).slice(0, 4) : [];
    return { taskHits, projects, docs, users, total: taskHits.length + projects.length + docs.length + users.length };
  }, [q, scope, isAdmin]);

  const row = (key, icon, title, sub, right, onClick) => (
    <button key={key} type="button" onClick={() => { onClick(); setOpen(false); setQ(""); }}
      style={{ display: "flex", alignItems: "center", gap: 10, width: "100%", textAlign: "left", cursor: "pointer", padding: "9px 12px", border: "none", background: "transparent" }}>
      <span style={{ width: 28, height: 28, flex: "0 0 auto", borderRadius: "var(--radius-sm)", background: "var(--teal-50)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name={icon} size={14} color="var(--teal-600)" />
      </span>
      <span style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }}>
        <span style={{ font: "var(--fw-semibold) var(--fs-sm)/1.3 var(--font-body)", color: "var(--text-strong)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{title}</span>
        <span style={{ font: "var(--text-caption)", color: "var(--text-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{sub}</span>
      </span>
      {right}
    </button>
  );
  const group = (label) => (
    <span style={{ display: "block", padding: "8px 12px 4px", font: "var(--text-label)", color: "var(--text-faint)" }}>{label}</span>
  );

  return (
    <span ref={box} style={{ position: "relative", display: "inline-flex" }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 8, height: 38, padding: "0 12px", borderRadius: "var(--radius-pill)", background: "var(--surface-glass)", border: "1px solid var(--border-glass)" }}>
        <Icon name="search" size={15} color="var(--text-faint)" />
        <input value={q} onChange={(e) => { setQ(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)}
          placeholder="Cari task, project, dokumen…" aria-label="Cari global"
          style={{ width: compact ? 118 : 178, minWidth: 0, border: "none", outline: "none", background: "transparent", font: "var(--text-body-default)", color: "var(--text-strong)" }} />
        {q && <button type="button" onClick={() => { setQ(""); setOpen(false); }} aria-label="Bersihkan"
          style={{ border: "none", background: "transparent", cursor: "pointer", display: "inline-flex" }}><Icon name="x" size={14} color="var(--text-faint)" /></button>}
      </span>
      {open && res && (
        <div style={{ position: "absolute", top: 46, right: 0, width: compact ? "min(86vw,320px)" : 340, maxHeight: "min(400px,60dvh)", overflowY: "auto", zIndex: 120,
          background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-xl)", padding: "6px 0" }}>
          {res.total === 0 && <span style={{ display: "block", padding: "16px 14px", font: "var(--text-body-default)", color: "var(--text-muted)" }}>Tidak ada hasil untuk “{q}”.</span>}
          {res.taskHits.length > 0 && group("Task")}
          {res.taskHits.map((t) => row("t" + t.id, "clipboard-list", t.type, `${nameOf(t.user)} · target ${t.target}`,
            <Badge tone={t.status === "done" ? "leaf" : t.status === "revision" ? "coral" : "neutral"}>{t.status.replace(/_/g, " ")}</Badge>,
            () => onOpenTask && onOpenTask(t)))}
          {res.projects.length > 0 && group("Project")}
          {res.projects.map((p) => row("p" + p, "folder", p, `${scope.filter((t) => t.project === p).length} task`, null, () => onNavigate && onNavigate("tasks")))}
          {res.docs.length > 0 && group("Dokumen")}
          {res.docs.map((t) => row("d" + t.id, "file-text", t.evidence.name, `${t.type} · diterima ${t.done}`,
            t.signature ? <Badge tone="leaf" dot>TTD</Badge> : null, () => onOpenDocument && onOpenDocument(t)))}
          {res.users.length > 0 && group("User")}
          {res.users.map((u) => (
            <button key={"u" + u.id} type="button" onClick={() => { onNavigate && onNavigate("users"); setOpen(false); setQ(""); }}
              style={{ display: "flex", alignItems: "center", gap: 10, width: "100%", textAlign: "left", cursor: "pointer", padding: "9px 12px", border: "none", background: "transparent" }}>
              <Avatar src={avatarOf(u.id)} name={u.name} size={28} ring={false} />
              <span style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }}>
                <span style={{ font: "var(--fw-semibold) var(--fs-sm)/1.3 var(--font-body)", color: "var(--text-strong)" }}>{u.name}</span>
                <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>{u.email} · {u.role}</span>
              </span>
            </button>
          ))}
        </div>
      )}
    </span>
  );
}
Object.assign(window, { GlobalSearch });
})();