// Sidebar + Topbar shell layout for Seeding Hub dashboard.
// Sidebar: 3 nav groups (Operate/Configure/System), collapsible.
// Topbar: breadcrumbs + search visual.

const Sidebar = ({ active, onNavigate, collapsed, onToggleCollapsed, currentUser }) => {
  const isAdmin = currentUser?.role === "admin";

  const groups = [
    {
      label: "Operate",
      items: [
        { id: "dashboard", label: "Dashboard", icon: I.Home },
        { id: "sessions", label: "Active Sessions", icon: I.Radio },
        { id: "events", label: "Event Stream", icon: I.Activity },
      ],
    },
    {
      label: "Configure",
      items: [
        { id: "bots", label: "Bots", icon: I.Bot },
        { id: "configs", label: "Bot Configs", icon: I.Workflow },
        { id: "groups", label: "Groups & Channels", icon: I.MessagesSquare },
        { id: "ai", label: "AI Rewrite", icon: I.Sparkles },
      ],
    },
    {
      label: "System",
      items: [
        { id: "auth", label: "Auth & 2FA", icon: I.Key },
        // Admin-only nav items
        ...(isAdmin ? [{ id: "users", label: "Users", icon: I.Users }] : []),
        { id: "proxies", label: "Proxies", icon: I.Server },
        { id: "settings", label: "Settings", icon: I.Settings },
      ],
    },
  ];

  return (
    <aside className={`sidebar ${collapsed ? "collapsed" : ""}`}>
      <div className="sidebar-head">
        <div className="brand-mark">S</div>
        <div className="brand-text">Seeding Hub</div>
      </div>

      <div className="nav">
        {groups.map((g) => (
          <div className="nav-group" key={g.label}>
            <div className="nav-section-label">{g.label}</div>
            {g.items.map((it) => {
              const Ic = it.icon;
              return (
                <button
                  key={it.id}
                  className={`nav-item ${active === it.id ? "active" : ""}`}
                  onClick={() => onNavigate(it.id)}
                  title={collapsed ? it.label : undefined}
                >
                  <Ic className="icon" />
                  <span className="nav-item-label">{it.label}</span>
                </button>
              );
            })}
          </div>
        ))}
      </div>

      <div className="sidebar-foot">
        <button
          className="nav-item"
          onClick={onToggleCollapsed}
          title={collapsed ? "Expand" : "Collapse"}
        >
          {collapsed ? <I.ChevronsRight className="icon" /> : <I.ChevronsLeft className="icon" />}
          <span className="nav-item-label">Collapse</span>
        </button>
      </div>
    </aside>
  );
};

const Topbar = ({ crumbs = [], currentUser, onLogout }) => (
  <header className="topbar">
    <div className="crumbs">
      {crumbs.map((c, i) => (
        <React.Fragment key={i}>
          {i > 0 && <I.ChevronRight className="sep" size={12} />}
          <span className={i === crumbs.length - 1 ? "current" : ""}>{c}</span>
        </React.Fragment>
      ))}
    </div>
    <div className="topbar-actions">
      <div className="search">
        <I.Search className="icon" />
        <input className="input" placeholder="Search…" readOnly />
      </div>
      {currentUser && (
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontSize: 12, color: "var(--fg-3)" }}>{currentUser.name}</span>
          {currentUser.role === "admin" && (
            <span className="badge" style={{ fontSize: 10, padding: "2px 6px" }}>Admin</span>
          )}
          <button
            className="btn ghost sm"
            onClick={onLogout}
            title="Sign out"
            style={{ fontSize: 12 }}
          >
            Sign out
          </button>
        </div>
      )}
    </div>
  </header>
);

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