// Lumen — App shell: sidebar, topbar, layout

function Sidebar({ role, screen, onNavigate }) {
  const sections = {
    student: [
      { title: "Learn", items: [
        { id: "student", label: "My courses", icon: "home", count: 4 },
        { id: "catalog", label: "Browse catalog", icon: "globe" },
        { id: "player", label: "Continue: Office hours #1", icon: "play" },
        { id: "quiz", label: "Quizzes", icon: "quiz", count: 2 },
      ]},
      { title: "Community", items: [
        { id: "discuss", label: "Discussions", icon: "chat", count: 12, disabled: true },
        { id: "bookmarks", label: "Saved", icon: "bookmark", disabled: true },
      ]},
    ],
    instructor: [
      { title: "Studio", items: [
        { id: "instructor", label: "Overview", icon: "home" },
        { id: "instructor-students", label: "Students", icon: "users" },
        { id: "instructor-revenue", label: "Revenue", icon: "cash" },
        { id: "builder", label: "Course builder", icon: "layers" },
      ]},
      { title: "Catalog", items: [
        { id: "courses", label: "My courses", icon: "book", count: 6 },
        { id: "catalog", label: "Browse catalog", icon: "globe" },
      ]},
      { title: "Marketing", items: [
        { id: "marketing", label: "Landing pages", icon: "edit", disabled: true },
        { id: "campaigns", label: "Email campaigns", icon: "send", disabled: true },
      ]},
    ],
    admin: [
      { title: "Org", items: [
        { id: "admin", label: "Analytics", icon: "bar" },
        { id: "admin-cohorts", label: "Cohorts", icon: "users" },
        { id: "admin-billing", label: "Billing", icon: "cash" },
      ]},
      { title: "Catalog", items: [
        { id: "courses", label: "All courses", icon: "book", count: 24 },
      ]},
    ],
  };

  return (
    <aside className="sidebar">
      <div className="sidebar__brand">
        <div className="sidebar__logo">L</div>
        <div className="sidebar__brandname">Lumen</div>
        <div className="sidebar__role">{role}</div>
      </div>

      {sections[role].map((sec, i) => (
        <div className="sidebar__section" key={i}>
          <div className="sidebar__title">{sec.title}</div>
          {sec.items.map(item => (
            <div key={item.id}
                 className={`navitem ${screen === item.id ? "navitem--active" : ""}`}
                 onClick={() => !item.disabled && onNavigate(item.id)}
                 style={{ opacity: item.disabled ? .55 : 1, cursor: item.disabled ? "default" : "pointer" }}>
              {React.createElement(I[item.icon], { className: "navitem__icon", size: 16 })}
              <span>{item.label}</span>
              {item.count != null && <span className="navitem__count">{item.count}</span>}
            </div>
          ))}
        </div>
      ))}

      <div className="sidebar__foot">
        <div className="avatar avatar--sm">{role === "instructor" ? "MK" : role === "admin" ? "DA" : "HY"}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
            {role === "instructor" ? "Mara Klein" : role === "admin" ? "Devon Avery" : "Hana Yusuf"}
          </div>
          <div style={{ fontSize: 11, color: "var(--ink-3)" }}>
            {role === "instructor" ? "Studio · Pro" : role === "admin" ? "Org admin" : "Member"}
          </div>
        </div>
        <button className="btn btn--ghost btn--sm btn--icon"><I.cog size={14}/></button>
      </div>
    </aside>
  );
}

function Topbar({ crumbs, right, search }) {
  return (
    <div className="topbar">
      <div className="topbar__crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span style={{ color: "var(--ink-4)" }}>/</span>}
            {i === crumbs.length - 1 ? <strong>{c}</strong> : <span>{c}</span>}
          </React.Fragment>
        ))}
      </div>
      {search && (
        <div className="search" style={{ marginLeft: "auto", marginRight: 12 }}>
          <I.search size={14}/>
          <input placeholder={search}/>
          <span className="kbd">⌘K</span>
        </div>
      )}
      <div className="row" style={{ gap: 6 }}>
        <button className="btn btn--ghost btn--sm btn--icon" title="Notifications"><I.bell size={16}/></button>
        {right}
      </div>
    </div>
  );
}

window.Sidebar = Sidebar;
window.Topbar = Topbar;