/* ===== Scope selection side ===== */
function ScopePanel({ scopeTab, setScopeTab, expanded, toggleExpand, selected, toggleSelect, selCount, search, setSearch }) {
  const data = SCOPE_DATA[scopeTab];

  // determine checkbox state for a group from its leaves/children selection
  const leafIds = [];
  data.tree.forEach((g) =>
    (g.children || []).forEach((c) =>
      (c.leaves || []).forEach((lf, i) => leafIds.push(`${c.id}:${i}`))
    )
  );

  function groupState(child) {
    const ids = (child.leaves || []).map((_, i) => `${child.id}:${i}`);
    if (ids.length === 0) return "none";
    const on = ids.filter((id) => selected[id]).length;
    if (on === 0) return "none";
    if (on === ids.length) return "all";
    return "indet";
  }

  // ---- search across all levels, with auto-expand of matching branches ----
  const term = (search || "").trim().toLowerCase();
  const searching = term.length > 0;
  const inc = (s) => s.toLowerCase().includes(term);

  const groupViews = data.tree.map((grp) => {
    const groupMatch = searching && inc(grp.name);
    const children = (grp.children || []).map((child) => {
      const childMatch = searching && inc(child.name);
      const leaves = (child.leaves || [])
        .map((lf, i) => ({ lf, i }))
        .filter(({ lf }) => !searching || groupMatch || childMatch || inc(lf.name));
      const visible = !searching || groupMatch || childMatch || leaves.length > 0;
      return { child, childMatch, leaves, visible };
    });
    const visibleChildren = children.filter((c) => c.visible);
    const visible = !searching || groupMatch || visibleChildren.length > 0;
    return { grp, groupMatch, children, visibleChildren, visible };
  }).filter((g) => g.visible);

  return (
    <div className="fade-in">
      <div className="scope-tabs">
        {[["portfolio", "Portfolio"], ["product", "Product"], ["riskfactor", "Risk Factor"]].map(([k, lbl]) => (
          <button key={k} className={"scope-tab" + (scopeTab === k ? " on" : "")} onClick={() => setScopeTab(k)}>
            {lbl}<span className="cnt">{SCOPE_DATA[k].count}</span>
          </button>
        ))}
        <div style={{ marginLeft: "auto", position: "relative", display: "flex", alignItems: "center" }}>
          <Icon name="search" size={15} style={{ position: "absolute", left: 11, color: "var(--muted-2)" }} />
          <input
            className="txt" placeholder="Search hierarchy…" value={search}
            onChange={(e) => setSearch(e.target.value)}
            style={{ height: 38, width: 210, paddingLeft: 34, fontSize: 13 }}
          />
        </div>
      </div>

      <div className="tree-wrap">
        <div className="tree-scroll">
          <table className="tree">
            <thead>
              <tr>
                {data.cols.map((c, i) => (
                  <th key={c} className={i > 0 ? "col-div" : ""}>
                    <div className="th-inner">
                      <span>{c}</span>
                      <span className="th-tools">
                        <Icon name="funnel" size={13} sw={1.6} />
                        <Icon name="dots" size={13} sw={1.6} />
                      </span>
                    </div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {groupViews.length === 0 && (
                <tr><td colSpan={data.cols.length}>
                  <div className="row-cell" style={{ textAlign: "center", color: "var(--muted)", padding: "28px 12px" }}>
                    No hierarchy nodes match “{search}”
                  </div>
                </td></tr>
              )}
              {groupViews.map(({ grp, children, visibleChildren }) => {
                const gOpen = searching ? true : expanded[grp.id];
                const childList = searching ? visibleChildren : children;
                return (
                  <React.Fragment key={grp.id}>
                    <tr>
                      <td>
                        <div className="row-cell grouped-cell">
                          <button className={"tw-toggle" + (gOpen ? " open" : "")} onClick={() => toggleExpand(grp.id)}>
                            <Icon name="chevRight" size={14} />
                          </button>
                          <span className="grp-name">{grp.name}<span className="cnt">({fmtNum(grp.count)})</span></span>
                        </div>
                      </td>
                      <td colSpan={data.cols.length - 1}></td>
                    </tr>
                    {gOpen && childList.map(({ child, leaves }) => {
                      const cOpen = searching ? leaves.length > 0 : expanded[child.id];
                      const gs = groupState(child);
                      const ids = (child.leaves || []).map((_, i) => `${child.id}:${i}`);
                      const setAll = () => {
                        const target = gs !== "all";
                        ids.forEach((id) => toggleSelect(id, target));
                      };
                      return (
                        <React.Fragment key={child.id}>
                          <tr>
                            <td>
                              <div className="row-cell grouped-cell lvl-1">
                                <button className={"tw-toggle" + (cOpen ? " open" : "")} onClick={() => toggleExpand(child.id)} disabled={!child.leaves || !child.leaves.length}>
                                  {child.leaves && child.leaves.length ? <Icon name="chevRight" size={14} /> : <span style={{ width: 14, display: "inline-block" }} />}
                                </button>
                                <span className={"cb" + (gs === "all" ? " checked" : gs === "indet" ? " indet" : "")} onClick={setAll}>
                                  {gs === "all" && <Icon name="check" size={11} sw={3} />}
                                  {gs === "indet" && <span style={{ width: 8, height: 2, background: "#fff", borderRadius: 1 }} />}
                                </span>
                                <span className="grp-name" style={{ fontWeight: 600 }}>{child.name}<span className="cnt">({fmtNum(child.count)})</span></span>
                              </div>
                            </td>
                            <td colSpan={data.cols.length - 1}></td>
                          </tr>
                          {cOpen && leaves.map(({ lf, i }) => {
                            const id = `${child.id}:${i}`;
                            const on = !!selected[id];
                            return (
                              <tr key={id}>
                                <td>
                                  <div className="row-cell grouped-cell lvl-2">
                                    <span className={"cb" + (on ? " checked" : "")} onClick={() => toggleSelect(id)}>
                                      {on && <Icon name="check" size={11} sw={3} />}
                                    </span>
                                    <span className="leaf-name">{lf.name}</span>
                                  </div>
                                </td>
                                <td><div className="row-cell">{lf.name}</div></td>
                                <td><div className="row-cell">{lf.ch}</div></td>
                                <td><div className="row-cell muted-cell">{lf.ft}</div></td>
                                <td><div className="row-cell muted-cell">{lf.tc}</div></td>
                                <td><div className="row-cell muted-cell">{lf.st}</div></td>
                                <td><div className="row-cell muted-cell">{lf.td}</div></td>
                              </tr>
                            );
                          })}
                        </React.Fragment>
                      );
                    })}
                  </React.Fragment>
                );
              })}
            </tbody>
          </table>
        </div>
        <div className="tree-foot">
          <span>{searching ? `${groupViews.length} group${groupViews.length === 1 ? "" : "s"} match “${search}”` : `${data.tree.length} top-level groups · ${fmtNum(data.count)} books in scope`}</span>
          <span className="sel-pill">{selCount} risk factor{selCount === 1 ? "" : "s"} selected</span>
        </div>
      </div>
    </div>
  );
}
window.ScopePanel = ScopePanel;