// ============================================================================
// IMS — Shell: sidebar + masthead + role-aware nav
// ============================================================================

function Sidebar() {
  const { role, page, setPage, data, counts } = useApp();

  const isActive = (key) => page?.key === key;

  if (role === "admin") {
    return (
      <aside className="sidebar">
        <div className="brand">
          <div className="mark">i</div>
          <div className="wordmark">IMS</div>
          <div className="env">v0.9 · MVP</div>
        </div>
        <nav className="nav">
          <div className="nav-section">
            <div className="label">
              <span>Outreach Specialists</span>
              <span className="hint">OS</span>
            </div>
            <div className="nav-list">
              <div className={`nav-item ${isActive("os-unassigned") ? "active" : ""}`} onClick={() => setPage({ key: "os-unassigned" })}>
                <span>Unassigned</span>
                <span className={`nav-count ${counts.osUnassigned ? "hot" : ""}`}>{counts.osUnassigned}</span>
              </div>
              <div className={`nav-item ${isActive("os-in-progress") ? "active" : ""}`} onClick={() => setPage({ key: "os-in-progress" })}>
                <span>In Progress</span>
                <span className="nav-count">{counts.osInProgress}</span>
              </div>
              <div className={`nav-item ${isActive("os-assignments") ? "active" : ""}`} onClick={() => setPage({ key: "os-assignments" })}>
                <span>Assignments</span>
                <span className="nav-count">{counts.osAssignments}</span>
              </div>
              <div className={`nav-item ${isActive("os-payments") ? "active" : ""}`} onClick={() => setPage({ key: "os-payments" })}>
                <span>Payments</span>
                <span className="nav-count">{counts.osPayments}</span>
              </div>
            </div>
          </div>

          <div className="nav-section">
            <div className="label">
              <span>Collaboration Managers</span>
              <span className="hint">CM</span>
            </div>
            <div className="nav-list">
              <div className={`nav-item ${isActive("cm-unassigned") ? "active" : ""}`} onClick={() => setPage({ key: "cm-unassigned" })}>
                <span>Unassigned</span>
                <span className={`nav-count ${counts.cmUnassigned ? "hot" : ""}`}>{counts.cmUnassigned}</span>
              </div>
              <div className={`nav-item ${isActive("cm-in-progress") ? "active" : ""}`} onClick={() => setPage({ key: "cm-in-progress" })}>
                <span>Active</span>
                <span className="nav-count">{counts.cmInProgress}</span>
              </div>
              <div className={`nav-item ${isActive("cm-completed") ? "active" : ""}`} onClick={() => setPage({ key: "cm-completed" })}>
                <span>Completed</span>
                <span className={`nav-count ${counts.cmCompleted ? "hot" : ""}`}>{counts.cmCompleted}</span>
              </div>
              <div className={`nav-item ${isActive("cm-assignments") ? "active" : ""}`} onClick={() => setPage({ key: "cm-assignments" })}>
                <span>Assignments</span>
                <span className="nav-count">{counts.cmAssignments}</span>
              </div>
              <div className={`nav-item ${isActive("cm-payments") ? "active" : ""}`} onClick={() => setPage({ key: "cm-payments" })}>
                <span>Payments</span>
                <span className="nav-count">{counts.cmPayments}</span>
              </div>
            </div>
          </div>

          <div className="nav-section">
            <div className="label"><span>Campaigns</span></div>
            <div className="nav-list">
              <div className={`nav-item top-level ${isActive("campaigns") ? "active" : ""}`} onClick={() => setPage({ key: "campaigns" })}>
                <span>All Campaigns</span>
                <span className={`nav-count ${counts.campaigns ? "hot" : ""}`}>{counts.campaigns}</span>
              </div>
            </div>
          </div>

          <div className="nav-section">
            <div className="label"><span>People</span></div>
            <div className="nav-list">
              <div className={`nav-item ${isActive("people-os") ? "active" : ""}`} onClick={() => setPage({ key: "people-os" })}>
                <span>Outreach Specialists</span>
                <span className="nav-count">{counts.activeOS ?? data.outreachSpecialists.filter(s => !s.deletedAt).length}</span>
              </div>
              <div className={`nav-item ${isActive("people-cm") ? "active" : ""}`} onClick={() => setPage({ key: "people-cm" })}>
                <span>Collaboration Managers</span>
                <span className="nav-count">{counts.activeCM ?? data.collabManagers.filter(m => !m.deletedAt).length}</span>
              </div>
              <div className={`nav-item ${isActive("people-influencers") ? "active" : ""}`} onClick={() => setPage({ key: "people-influencers" })}>
                <span>Influencers</span>
                <span className="nav-count">DB</span>
              </div>
              <div className={`nav-item ${isActive("people-ve") ? "active" : ""}`} onClick={() => setPage({ key: "people-ve" })}>
                <span>Video Editors</span>
                <span className="nav-count">{(data.videoEditors || []).length}</span>
              </div>
            </div>
          </div>

          <div className="nav-section">
            <div className="label"><span>Tickets & Messages</span></div>
            <div className="nav-list">
              <div className={`nav-item top-level ${isActive("requests") ? "active" : ""}`} onClick={() => setPage({ key: "requests" })}>
                <span>Requests</span>
                <span className={`nav-count ${counts.requestsOpen ? "hot" : ""}`}>{counts.requests}</span>
              </div>
              <div className={`nav-item top-level ${isActive("inbox") ? "active" : ""}`} onClick={() => setPage({ key: "inbox" })}>
                <span>Inbox</span>
                <span className={`nav-count ${counts.inbox ? "hot" : ""}`}>{counts.inbox}</span>
              </div>
            </div>
          </div>
        </nav>
        <div className="sidebar-foot">
          <div className="row"><span>Next snapshot</span><span className="status">Fri · 14:00 UK</span></div>
          <div className={`nav-item top-level ${isActive("settings") ? "active" : ""}`} style={{ marginTop: 8 }} onClick={() => setPage({ key: "settings" })}>
            <Ic.gear /><span>Settings</span>
          </div>
        </div>
      </aside>
    );
  }

  // OS / CM
  const isOS = role === "outreach";
  const roleLabel = isOS ? "Outreach Specialist" : "Collaboration Mgr";
  const items = [
    { key: "inbox",        label: "Inbox",       count: counts.inbox,        hot: !!counts.inbox },
    { key: "in-progress",  label: isOS ? "In Progress" : "Active",  count: counts.myInProgress, extra: isOS && counts.announcements ? "chip" : null },
    ...(!isOS ? [{ key: "cm-completed", label: "Completed", count: counts.myCompleted }] : []),
    { key: "requests",     label: "Requests",    count: counts.myRequests },
    { key: "payments",     label: "Payments",    count: counts.myPayments },
  ];

  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="mark">i</div>
        <div className="wordmark">IMS</div>
      </div>
      <nav className="nav">
        <div className="nav-section">
          <div className="label"><span>{roleLabel}</span></div>
          <div className="nav-list">
            {items.map(it => (
              <div key={it.key} className={`nav-item top-level ${isActive(it.key) ? "active" : ""}`} onClick={() => setPage({ key: it.key })}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                  {it.label}
                  {it.extra === "chip" && <span className="pill" style={{ color: "var(--accent-2)", background: "var(--accent-bg)", borderColor: "transparent" }}>{counts.announcements} tasks</span>}
                </span>
                <span className={`nav-count ${it.hot ? "hot" : ""}`}>{it.count}</span>
              </div>
            ))}
          </div>
        </div>
      </nav>
      <div className="sidebar-foot">
        <div className="row"><span>Pending</span><span className="status">{counts.myInProgress} active</span></div>
        <div className="row"><span>Local</span><span>{isOS ? "IN · 18:32" : "PH · 22:02"}</span></div>
      </div>
    </aside>
  );
}

function Masthead({ crumbs, actions, onTweaks, tweaksOpen }) {
  const { role } = useApp();
  const { data, activePersonId } = useApp();
  const osPerson = data?.outreachSpecialists?.find(s => s.id === activePersonId) || data?.outreachSpecialists?.[0];
  const cmPerson = data?.collabManagers?.find(m => m.id === activePersonId) || data?.collabManagers?.[0];
  const userInfo = role === "admin"
    ? { initials: "FK", who: "Farah K.", role: "Admin" }
    : role === "outreach"
    ? { initials: osPerson?.initials || "OS", who: osPerson?.name || "Outreach Specialist", role: "Outreach Specialist" }
    : { initials: cmPerson?.initials || "CM", who: cmPerson?.name || "Collaboration Manager", role: "Collab Manager" };
  return (
    <div className="masthead">
      <div className="masthead-left">
        <div className="crumbs">
          {crumbs.map((c, i) => (
            <React.Fragment key={i}>
              <span className={i === crumbs.length - 1 ? "cur" : ""}>{c}</span>
              {i < crumbs.length - 1 && <span className="sep">/</span>}
            </React.Fragment>
          ))}
        </div>
      </div>
      <div className="masthead-right">
        <div className="live-pulse"><span className="dot"></span><span>Live · UK 14:02</span></div>
        {actions}
        {onTweaks && (
          <button className="btn sm ghost" onClick={onTweaks} style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", opacity: tweaksOpen ? 1 : 0.6 }}>
            ⚙ Role
          </button>
        )}
        <div className="user-chip">
          <div className="initials">{userInfo.initials}</div>
          <div className="who-block">
            <div className="who">{userInfo.who}</div>
            <div className="role">{userInfo.role}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

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