/* ============================================================
   beedle dataroom — app shell (sidebar + topbar + view-as)
   ============================================================ */
function ViewAs({ role, setRole, roles }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, []);
  return (
    <div className="viewas" ref={ref}>
      <button className="viewas-btn" onClick={() => setOpen(o => !o)}>
        <Icon name="eye" size={15} className="eye" />
        <span style={{ textAlign: "left" }}>
          <span className="t">{T("Viewing as")}</span><br /><span className="r">{role.name}</span>
        </span>
        <Avatar role={role} size={26} />
        <Icon name="chevD" size={14} className="eye" />
      </button>
      {open && (
        <div className="menu">
          <div className="mh">{T("Preview access — switch role")}</div>
          {roles.map((r, i) => {
            const sel = r.uid === role.uid;
            return (
              <button key={r.uid || r.id + "_" + i} className={"menu-item" + (sel ? " sel" : "")} onClick={() => { setRole(r.uid); setOpen(false); }}>
                <Avatar role={r} size={34} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="nm">{r.name} {r.admin && <span className="pill pill-gold" style={{ padding: "1px 7px" }}>{T("Admin")}</span>}</div>
                  <div className="ds">{r.desc}</div>
                  <div className="menu-keys">
                    {r.keyring.map(g => {
                      const dot = g.indexOf(".");
                      const key = dot === -1 ? g : g.slice(0, dot);
                      const mode = dot === -1 ? "view" : g.slice(dot + 1);
                      const meta = KEYS[key];
                      return (
                        <span key={g} className={"pill" + (meta && meta.tone ? " pill-" + meta.tone : "")}>
                          {(meta ? meta.label : key)} · {mode}
                        </span>
                      );
                    })}
                  </div>
                </div>
                {sel && <Icon name="check" size={16} className="ck" sw={2.4} />}
              </button>
            );
          })}
          <div style={{ fontSize: 11.5, color: "var(--ink-3)", padding: "8px 10px 4px", lineHeight: 1.5 }}>
            {T("The room only shows what a member’s keyring unlocks. Switch roles to preview their view.")}
          </div>
        </div>
      )}
    </div>
  );
}

function Sidebar({ company, role, sections, docs, active, onNav, onLogout, onOpenDoc, onForecasterRequest }) {
  const navList = sections;
  // Virtual section: documents added in the last week, surfaced for direct
  // access with the section they live in. recentlyAddedDocs() lives in recent.js.
  const recent = (typeof recentlyAddedDocs === "function")
    ? recentlyAddedDocs(docs.filter(d => canSee(d, role)), { limit: 6 })
    : [];
  return (
    <aside className="sidebar">
      <div className="sb-brand">
        <Brand company={company} size={27} />
        <div className="sb-company">
          <span className={"sb-logo" + (company.logo ? " has-img" : "")}>{company.logo ? <img src={company.logo} alt="" /> : <Icon name="heart" size={20} />}</span>
          <div>
            <div className="nm">{company.name}</div>
            <div className="ds">{company.room}</div>
          </div>
        </div>
      </div>
      <nav className="sb-nav scroll">
        <button className={"nav-item" + (active === null ? " active" : "")} onClick={() => onNav(null)}>
          <span className="ico"><Icon name="grid" size={16} /></span>
          <span className="lbl">{T("All sections")}</span>
        </button>
        {recent.length > 0 && (
          <React.Fragment>
            <div className="sb-section-label">{T("Recently added")}</div>
            {recent.map(d => {
              const sec = navList.find(s => s.id === d.section);
              return (
                <button key={d.id} className="nav-item recent-item" onClick={() => onOpenDoc && onOpenDoc(d)} title={d.name}>
                  <span className="ico" style={sec ? { background: shade(sec.color, 52), color: sec.color } : {}}>
                    <Icon name={sec ? sec.icon : "file"} size={16} />
                  </span>
                  <span className="lbl">
                    <span className="recent-name">{d.name}</span>
                    {sec && <span className="recent-sec">{sec.name}</span>}
                  </span>
                </button>
              );
            })}
          </React.Fragment>
        )}
        <div className="sb-section-label">{T("Sections")}</div>
        {navList.map(s => {
          const locked = role.admin && s.key !== "all";
          const count = docs.filter(d => d.section === s.id && canSee(d, role)).length;
          return (
            <button key={s.id} className={"nav-item" + (active === s.id ? " active" : "")} onClick={() => onNav(s.id)}>
              <span className="ico" style={active === s.id ? {} : { background: shade(s.color, 52), color: s.color }}>
                <Icon name={s.icon} size={16} />
              </span>
              <span className="lbl">{s.name}</span>
              {locked ? <span className="lock"><Icon name="lock" size={13} /></span> : <span className="cnt">{count}</span>}
            </button>
          );
        })}
        {(() => {
          // The Forecaster is a keyed tool: forecaster.view+ opens it; forecaster.list
          // shows the link but routes to a Request-access prompt; none hides it.
          const fRank = accessMode({ key: "forecaster" }, role, { kind: "forecast" });
          if (fRank < MODE_RANK.list) return null;
          const canOpen = fRank >= MODE_RANK.view;
          return (
            <React.Fragment>
              <div className="sb-section-label">{T("Tools")}</div>
              <a className="nav-item" href={canOpen ? "beedle Forecaster.html" : undefined} style={{ textDecoration: "none", cursor: "pointer" }}
                onClick={(e) => { if (!canOpen) { e.preventDefault(); onForecasterRequest && onForecasterRequest(); } }}>
                <span className="ico" style={{ background: "#E7F7FD", color: "#0E97C6" }}><Icon name={canOpen ? "chart" : "lock"} size={16} /></span>
                <span className="lbl">{T("Financial Forecaster")}</span>
                {canOpen
                  ? <span className="pill pill-blue" style={{ padding: "1px 7px", fontSize: 10 }}>{T("New")}</span>
                  : <span className="lock"><Icon name="lock" size={13} /></span>}
              </a>
            </React.Fragment>
          );
        })()}
      </nav>
      <div className="sb-foot">
        <div className="user-chip">
          <Avatar role={role} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="nm">{role.name}</div>
            <div className="rl">{role.admin ? T("Admin") : T("Member")}</div>
          </div>
          <button onClick={onLogout} title={T("Sign out")} style={{ background: "none", border: 0, padding: 4, cursor: "pointer", display: "grid", placeItems: "center", color: "var(--ink-4)" }}>
            <Icon name="logout" size={16} />
          </button>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ crumbs, role, setRole, roles, canPreview, query, setQuery }) {
  return (
    <header className="topbar">
      <nav className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <Icon name="chevR" size={14} className="sep" />}
            {c.onClick ? <button onClick={c.onClick}>{c.label}</button> : <span className="cur">{c.label}</span>}
          </React.Fragment>
        ))}
      </nav>
      <div className="search">
        <Icon name="search" size={16} />
        <input placeholder={T("Search documents…")} value={query} onChange={e => setQuery(e.target.value)} />
      </div>
      <LangToggle />
      {canPreview && <ViewAs role={role} setRole={setRole} roles={roles} />}
    </header>
  );
}

Object.assign(window, { Sidebar, Topbar, ViewAs });