// CORE-10 · Global search  (route: globalSearch)
// Search across batches, orders, farmers, GPNs, leads.
const GlobalSearchPage = ({ tweaks }) => {
  const Ic = window.Icons;
  const toast = useToast();
  const MD = window.MD;
  const state = (tweaks && tweaks.searchState) || "results";

  const KIND_IC = { Requirement: "Procurement", Farmer: "Leaf", Order: "Orders", Batch: "Box", GPN: "Truck", User: "User", QC: "QC", Lead: "Handshake" };
  const SCOPES = ["All", "Requirements", "Farmers", "Orders", "Batches", "GPNs", "Users"];

  const [q, setQ] = useState(state === "empty" ? "xyz-no-match" : state === "typing" ? "" : "hass");
  const [scope, setScope] = useState("All");

  const results = useMemo(() => {
    if (!q.trim()) return [];
    return MD.SEARCH_INDEX.filter(r => `${r.id} ${r.title} ${r.meta} ${r.kind}`.toLowerCase().includes(q.toLowerCase()));
  }, [q]);

  // group by kind
  const groups = useMemo(() => {
    const g = {};
    results.forEach(r => { (g[r.kind] = g[r.kind] || []).push(r); });
    return g;
  }, [results]);

  const open = (r) => { if (r.link) window.location.href = r.link; else toast({ title: `${r.kind} · ${r.id}`, desc: r.title }); };
  const typing = q.trim().length === 0;

  return (
    <div className="page" style={{ maxWidth: 880 }}>
      <div className="page-head">
        <div><h1 className="page-title">Search</h1><div className="page-sub">Find requirements, farmers, orders, batches, GPNs, users &amp; leads</div></div>
      </div>

      <div className="gs-bar">
        <Ic.Search size={20}/>
        <input className="input" value={q === "xyz-no-match" ? "" : q} onChange={(e)=> setQ(e.target.value)} placeholder="Search anything across the platform…" autoFocus/>
      </div>

      <div className="gs-scope">
        {SCOPES.map(s => <button key={s} className={`proc-chip${scope === s ? " on" : ""}`} onClick={()=> setScope(s)}>{s}</button>)}
      </div>

      {typing ? (
        <div>
          <div className="gs-group-label">Recent searches</div>
          {["Mary Wairimu", "PR-2026-0184", "Crude oil hold"].map((r, i) => (
            <div key={i} className="gs-result" onClick={()=> setQ(r)}>
              <span className="gs-result-ic"><Ic.Clock size={16}/></span>
              <div style={{ flex: 1, minWidth: 0 }}><div className="nm">{r}</div></div>
              <Ic.ArrowRight size={15} style={{ color: "var(--muted-foreground)" }}/>
            </div>
          ))}
          <div className="gs-group-label" style={{ marginTop: 22 }}>Tips</div>
          <div className="muted" style={{ fontSize: 13, lineHeight: 1.7 }}>
            Press <span className="gs-kbd">⌘</span> <span className="gs-kbd">K</span> anywhere to search · Prefix with <span className="gs-kbd">PR-</span>, <span className="gs-kbd">SO-</span>, <span className="gs-kbd">GPN-</span> or <span className="gs-kbd">F-</span> to jump straight to a record.
          </div>
        </div>
      ) : results.length === 0 ? (
        <div style={{ padding: "56px 24px", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
          <div style={{ width: 56, height: 56, borderRadius: 15, background: "var(--muted)", color: "var(--muted-foreground)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Ic.Search size={26}/></div>
          <div><div style={{ fontSize: 17, fontWeight: 600 }}>No results for "{q === "xyz-no-match" ? "quarterly export forecast" : q}"</div><div className="muted" style={{ fontSize: 13, maxWidth: 380, margin: "5px auto 0", lineHeight: 1.5 }}>Check the spelling or try a record ID like PR-2026-0184, a farmer name, or a buyer.</div></div>
        </div>
      ) : (
        <div>
          <div className="muted" style={{ fontSize: 12.5, marginBottom: 4 }}>{results.length} results</div>
          {Object.entries(groups).map(([kind, rows]) => {
            const KI = Ic[KIND_IC[kind]] || Ic.Box;
            return (
              <div key={kind}>
                <div className="gs-group-label">{kind}s <span className="ct">{rows.length}</span></div>
                {rows.map(r => (
                  <div key={r.id} className="gs-result" onClick={()=> open(r)}>
                    <span className="gs-result-ic"><KI size={16}/></span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="nm">{r.title} <span className="id">· {r.id}</span></div>
                      <div className="mt">{r.meta}</div>
                    </div>
                    {r.link ? <span className="notif-link">Open <Ic.ArrowRight size={11}/></span> : <Ic.ArrowRight size={15} style={{ color: "var(--muted-foreground)" }}/>}
                  </div>
                ))}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { globalSearch: GlobalSearchPage });