// ==================== Shell: sidebar + topbar ====================

function Sidebar({ view, onNavigate, savedView, onSavedView, counts }) {
  return (
    <aside className="sidebar">
      <div className="sidebar__group">
        <div className="sidebar__label">Workspace</div>
        <div className={cx("navitem", view === "inbox" && "navitem--active")} onClick={() => onNavigate("inbox")}>
          <Icon name="inbox" size={15} /> Lead Inbox
          <span className="navitem__count">{counts.inbox}</span>
        </div>
        <div className={cx("navitem", view === "kanban" && "navitem--active")} onClick={() => onNavigate("kanban")}>
          <Icon name="kanban" size={15} /> Attorney Capacity
        </div>
        <div className={cx("navitem", view === "analytics" && "navitem--active")} onClick={() => onNavigate("analytics")}>
          <Icon name="chart" size={15} /> Analytics
        </div>
        <div className={cx("navitem", view === "askdb" && "navitem--active")} onClick={() => onNavigate("askdb")}>
          <Icon name="chat" size={15} /> Ask the database
        </div>
        <div className={cx("navitem", view === "settings" && "navitem--active")} onClick={() => onNavigate("settings")}>
          <Icon name="gear" size={15} /> Settings
        </div>
      </div>

      <div className="sidebar__group">
        <div className="sidebar__label">Saved views</div>
        {[
          { id: "all",         label: "All leads",             count: counts.inbox },
          { id: "hot",         label: "Hot — this week",       count: counts.hot },
          { id: "unassigned",  label: "Unassigned candidates", count: counts.unassigned },
          { id: "redflags",    label: "Red-flag review queue", count: counts.redflags },
          { id: "mine",        label: "Assigned to me",        count: counts.mine },
          { id: "stale",       label: "Stale > 72h",           count: counts.stale },
        ].map(v => (
          <div key={v.id}
               className={cx("saved-view", savedView === v.id && "saved-view--active")}
               onClick={() => onSavedView(v.id)}>
            <Icon name="dot" size={10} />
            <span>{v.label}</span>
            <span className="saved-view__count">{v.count}</span>
          </div>
        ))}
      </div>

      <div className="sidebar__group">
        <div className="sidebar__label">Team</div>
        {APP_DATA.TEAM.slice(0,4).map(u => (
          <div key={u.id} className="saved-view">
            <Avatar user={u} size={18} />
            <span style={{fontSize:12}}>{u.name}</span>
          </div>
        ))}
      </div>

      <div className="sidebar__footer">
        <div className="sidebar__me">
          <Avatar user={APP_DATA.TEAM[0]} size={24} />
          <div>
            <div>{APP_DATA.TEAM[0].name}</div>
            <small>Admin · m.rowan@usvi-advisory.com</small>
          </div>
        </div>
      </div>
    </aside>
  );
}

function TopBar({ crumbs, onShortcuts }) {
  return (
    <>
      <div className="brand">
        <div className="brand__mark" />
        <div className="brand__name">SL Tech</div>
        <div className="brand__sub">Staff</div>
      </div>
      <div className="topbar">
        <div className="topbar__crumbs">
          {crumbs.map((c, i) => (
            <React.Fragment key={i}>
              {i > 0 && <Icon name="chevron" size={12} />}
              <span className={i === crumbs.length - 1 ? "topbar__crumb-current" : ""}>{c}</span>
            </React.Fragment>
          ))}
        </div>
        <div className="topbar__spacer" />
        <div className="topbar__search">
          <Icon name="search" size={14} />
          <input placeholder="Search leads, companies, notes…" />
          <div className="topbar__kbd"><Kbd>⌘</Kbd><Kbd>K</Kbd></div>
        </div>
        <div className="topbar__actions">
          <button className="btn btn--ghost" onClick={onShortcuts} title="Keyboard shortcuts">
            <Icon name="keyboard" size={14} /> Shortcuts
          </button>
          <button className="btn">
            <Icon name="download" size={13} /> Export
          </button>
          <button className="btn btn--primary">
            <Icon name="plus" size={13} /> New lead
          </button>
        </div>
      </div>
    </>
  );
}

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