// Sidebar.jsx — Cortex GTM Engineering sidebar (ticketing model)
const GTM_MENU = [
  { id: 'Home',       label: 'Overview',        icon: 'HouseIcon' },
  { id: 'Inbox',      label: 'Inbox',           icon: 'TrayIcon', badge: () => TICKETS.filter(t => t.status === 'progress' || t.status === 'triage').length },
  { id: 'Intake',     label: 'New requests',    icon: 'PaperPlaneIcon', badge: () => TICKETS.filter(t => t.status === 'triage').length },
  { id: 'Playbooks',  label: 'Playbooks',       icon: 'BookOpenIcon' },
];

const GTM_VIEWS = [
  { id: 'view-all',      label: 'All tickets',       icon: 'BinocularsIcon', filter: () => true },
  { id: 'view-mine',     label: 'My tickets',        icon: 'UserCircleIcon', filter: (t) => t.owner === 'LR' },
  { id: 'view-progress', label: 'In progress',       icon: 'GitBranchIcon',  filter: (t) => t.status === 'progress' },
  { id: 'view-triage',   label: 'Triage',            icon: 'TrayIcon',       filter: (t) => t.status === 'triage' },
  { id: 'view-shipped',  label: 'Shipped',           icon: 'RocketLaunchIcon', filter: (t) => t.status === 'shipped' },
  { id: 'view-done',     label: 'Done',              icon: 'CheckCircleIcon', filter: (t) => t.status === 'done' },
];
function Sidebar({ current, onNavigate, view, onSelectView, onOpenCommandPalette, onNewRequest }) {
  const inFlight = TICKETS.filter(t => t.status === 'progress').length;
  const blocked = TICKETS.filter(t => t.status === 'progress' && t.risks && t.risks.some(r => r.level === 'high')).length;
  return (
    <aside className="sidebar">
      <div className="sb-top">
        <div className="sb-tenant">
          <div className="sb-mark"><CortexMark size={18} /></div>
          <div style={{ minWidth: 0 }}>
            <div className="sb-co">Cortex · GTM Eng</div>
            <div className="sb-tenantcode">gtmeng.prod</div>
          </div>
          <Icon name="CaretUpDownIcon" size={14} className="sb-caret" />
        </div>
        <button type="button" className="sb-search" onClick={onOpenCommandPalette}>
          <Icon name="MagnifyingGlassIcon" size={14} weight="bold" />
          <span>Find a ticket…</span>
          <span className="k">⌘K</span>
        </button>
      </div>

      <div className="sb-nav">
        <button type="button" className="sb-new-req" onClick={onNewRequest}>
          <Icon name="PlusIcon" size={13} weight="bold" />
          New request
        </button>
        {GTM_MENU.map(item => {
          const active = current === item.id;
          const n = item.badge ? item.badge() : null;
          return (
            <div key={item.id} className={`sb-item ${active ? 'active' : ''}`} onClick={() => onNavigate(item.id)}>
              <Icon name={item.icon} size={18} weight={active ? 'fill' : 'regular'} />
              <span>{item.label}</span>
              {n ? <span className="sb-count">{n}</span> : null}
            </div>
          );
        })}

        <div className="sb-views">
          <div className="sb-section-label">Views</div>
          {GTM_VIEWS.map(v => {
            const active = current === 'Inbox' && view === v.id;
            const n = TICKETS.filter(v.filter).length;
            return (
              <div key={v.id} className={`sb-item sb-view ${active ? 'active' : ''}`} onClick={() => { onNavigate('Inbox'); onSelectView && onSelectView(v.id); }}>
                <Icon name={v.icon} size={14} />
                <span>{v.label}</span>
                <span className="sb-count">{n}</span>
              </div>
            );
          })}
        </div>

        <div className="sb-views">
          <div className="sb-section-label">Requester</div>
          {TEAMS.map(t => {
            const n = TICKETS.filter(x => x.requester === t.id && x.status !== 'done').length;
            if (n === 0) return null;
            return (
              <div key={t.id} className="sb-item sb-view" onClick={() => { onNavigate('Inbox'); onSelectView && onSelectView('team-' + t.id); }}>
                <span className="sb-team-dot" style={{ background: t.color }} />
                <span>{t.label}</span>
                <span className="sb-count">{n}</span>
              </div>
            );
          })}
        </div>
      </div>

      <div className="sb-bottom">
        <div className="sb-status">
          <span className="dot" />
          <span>{inFlight} in flight · {blocked} blocked</span>
        </div>
        <div className="sb-user">
          <Avatar initials="JD" n={1} size={28} />
          <div style={{ minWidth: 0 }}>
            <div className="name">Joe DeVille</div>
            <div className="role">GTM Engineer</div>
          </div>
          <Icon name="CaretUpDownIcon" size={14} style={{ marginLeft: 'auto', color: 'rgba(255,255,255,.4)' }} />
        </div>
      </div>
    </aside>
  );
}
Object.assign(window, { Sidebar, GTM_VIEWS });