// ============================================================================
// public/shell/sidebar.jsx — App sidebar with USER_NAV + ADMIN_NAV
// ----------------------------------------------------------------------------
// Uses the navigation config from app.jsx (USER_NAV / ADMIN_NAV) and the
// session context (current user, tenant, role) to render:
//   • Brand mark
//   • View switch (User ↔ Admin) — only shown if user has admin access
//   • Nav sections + items
//   • User pill at the bottom (avatar, name, email, logout)
//   • Collapse toggle
// ============================================================================

function Sidebar({ nav, route, go, view, setView, collapsed, setCollapsed, session, onLogout, canSwitchToAdmin }) {
  const user = session?.user;
  const tenant = session?.tenant;

  return (
    <aside className="sidebar">

      {/* Brand */}
      <div className="brand">
        <div className="brand-mark">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.4" strokeLinecap="round">
            <path d="M5 12h2l2-6 4 12 2-9 2 5h2"/>
          </svg>
        </div>
        <div className="brand-name">
          VoAIs Call
          <small>by Hidrogen</small>
        </div>
      </div>

      <div className="sidebar-scroll">

        {/* View switch — only when the user can actually access admin view */}
        {!collapsed && canSwitchToAdmin && (
          <div className="view-switch">
            <button className={view === "user"  ? "active" : ""} onClick={() => setView("user")}>User</button>
            <button className={view === "admin" ? "active" : ""} onClick={() => setView("admin")}>Admin</button>
          </div>
        )}

        {/* Nav sections */}
        {nav.map((section, si) => (
          <div key={si} className="nav-section">
            <div className="nav-label">{section.label}</div>
            {section.items.map((item) => (
              <div
                key={item.id}
                className={`nav-item ${route === item.id ? "active" : ""}`}
                onClick={() => go(item.id)}
                title={collapsed ? item.label : undefined}
              >
                <item.icon size={17}/>
                <span>{item.label}</span>
                {item.live && <span className="live-dot" style={{ marginLeft: "auto" }}/>}
                {item.badge && !item.live && <span className="badge-count">{item.badge}</span>}
              </div>
            ))}
          </div>
        ))}
      </div>

      {/* Foot: user pill + collapse toggle */}
      <div className="sidebar-foot">
        {!collapsed ? (
          <div style={{
            display: "flex", alignItems: "center", gap: 10,
            background: "var(--surface)", border: "1px solid var(--line)",
            padding: "8px 10px", borderRadius: "var(--r-md)", cursor: "pointer",
          }} title={user?.email || tenant?.name}>
            <Avatar name={user?.name || tenant?.name || "?"} size={28}/>
            <div style={{ flex: 1, minWidth: 0, lineHeight: 1.2 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                {user?.name || "—"}
              </div>
              <div style={{ fontSize: 10.5, color: "var(--ink-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                {tenant?.name || user?.email || ""}
              </div>
            </div>
            <button className="topbar-icon-btn" style={{ width: 28, height: 28, border: 0, background: "transparent" }} onClick={onLogout} title="Sign out">
              <I.logout size={14}/>
            </button>
          </div>
        ) : (
          <div className="nav-item" onClick={onLogout} title="Sign out"><I.logout size={17}/></div>
        )}

        <div className="nav-item" onClick={() => setCollapsed(!collapsed)} title={collapsed ? "Expand" : "Collapse"}>
          {collapsed ? <I.expand size={17}/> : <I.collapse size={17}/>}
          <span>Collapse</span>
        </div>
      </div>
    </aside>
  );
}

window.Sidebar = Sidebar;