// screen_browse.jsx — Browse by company (Tier-1 supplier / brand)
// Clicking a company card jumps to the Vulnerability ledger pre-filtered to that
// company (by supplier or OEM, matching the active pivot).
function Browse({ statusMap, onOpen, onNav }) {
  // Browse owns its own endpoint: per-company rollups, pivoted server-side.
  const { data, loading, error, refetch } = useApi((signal) => window.VCApi.browse(signal));
  const [pivot, setPivot] = useState("supplier"); // supplier | brand

  const companies = useMemo(() => {
    const list = (data && (pivot === "supplier" ? data.suppliers : data.brands)) || [];
    // "open" still honours client-side triage (localStorage): subtract any member
    // vulnerability the analyst has marked remediated/accepted.
    return list.map((c) => ({
      name: c.name,
      total: c.total || 0,
      sev: c.severity || { Critical: 0, High: 0, Medium: 0, Low: 0 },
      topEcu: c.topEcu,
      maxCvss: c.maxCvss || 0,
      open: (c.ids || []).filter((id) => {
        const s = (statusMap && statusMap[id]) || "new";
        return s !== "remediated" && s !== "accepted";
      }).length,
    }));
  }, [data, pivot, statusMap]);

  function openCompany(name) {
    onNav("ledger", { filter: { type: pivot, value: name } });
  }

  if (loading) return <PageLoading label="Loading companies…" />;
  if (error) return <PageError message={error} onRetry={refetch} />;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <span className="eyebrow">Browse</span>
          <h1 className="page-title">By company</h1>
          <p className="page-desc">Pivot the intelligence ledger by the supplier or OEM you're responsible for.</p>
        </div>
        <div className="page-head-aside">
          <div className="seg">
            <button className={"seg-btn" + (pivot === "supplier" ? " is-on" : "")} onClick={() => setPivot("supplier")}><Icon name="layers" size={14} />Suppliers</button>
            <button className={"seg-btn" + (pivot === "brand" ? " is-on" : "")} onClick={() => setPivot("brand")}><Icon name="car" size={14} />OEM</button>
          </div>
        </div>
      </div>

      {companies.length === 0 ? (
        <div className="card empty-card">
          <div className="empty">
            <Icon name="layers" size={26} />
            <p>No {pivot === "supplier" ? "suppliers" : "OEMs"} to show yet</p>
            <span className="empty-sub">Company rollups appear here once your tenant has SBOM matches to pivot on.</span>
          </div>
        </div>
      ) : (
      <div className="ent-grid">
        {companies.map((c) => {
          const total = c.total;
          return (
            <button key={c.name} className="entcard"
            onClick={() => openCompany(c.name)}
            title={`View ${c.total} vulnerabilities for ${c.name}`}>
              <div className="entcard-top">
                <span className="entcard-avatar">{c.name.split(" ").map((w) => w[0]).join("").slice(0, 2)}</span>
                <div className="entcard-id">
                  <span className="entcard-name">{c.name}</span>
                  <span className="entcard-meta">{c.topEcu}</span>
                </div>
                <span className="entcard-arrow"><Icon name="chevR" size={16} /></span>
              </div>
              <div className="entcard-stats">
                <div className="entcard-stat"><b>{total}</b><span>tracked</span></div>
                <div className="entcard-stat"><b className={c.open ? "is-warn" : ""}>{c.open}</b><span>open</span></div>
                <div className="entcard-stat"><b className="mono">{c.maxCvss.toFixed(1)}</b><span>max CVSS</span></div>
              </div>
              <div className="entcard-bar">
                {SEV_ORDER.map((s) => c.sev[s] > 0 &&
                <span key={s} className={"entcard-seg " + sevClass(s)} style={{ flex: c.sev[s] }} title={`${c.sev[s]} ${s}`} />
                )}
              </div>
              <div className="entcard-legend">
                {SEV_ORDER.filter((s) => c.sev[s] > 0).map((s) =>
                <span key={s} className="entcard-leg"><span className={"chip-dot " + sevClass(s)} />{c.sev[s]} {s}</span>
                )}
              </div>
            </button>);

        })}
      </div>
      )}
    </div>);

}
window.Browse = Browse;