// Primus IQ — minimalist sidebar (collapsible)

const PIcon = ({ name, size = 18, color = 'currentColor' }) => {
  const s = { stroke: color, fill: 'none', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const w = size, h = size;
  switch (name) {
    case 'plus':     return <svg width={w} height={h} viewBox="0 0 20 20"><path d="M10 4v12M4 10h12" {...s}/></svg>;
    case 'chat':     return <svg width={w} height={h} viewBox="0 0 20 20"><path d="M4 5.5A2 2 0 0 1 6 3.5h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-3.5 3v-3H6a2 2 0 0 1-2-2v-6Z" {...s}/></svg>;
    case 'folder':   return <svg width={w} height={h} viewBox="0 0 20 20"><path d="M3 6a2 2 0 0 1 2-2h3l1.6 1.8H15a2 2 0 0 1 2 2v6.7A2 2 0 0 1 15 16.5H5A2 2 0 0 1 3 14.5V6Z" {...s}/></svg>;
    case 'book':     return <svg width={w} height={h} viewBox="0 0 20 20"><path d="M4 4.5A1.5 1.5 0 0 1 5.5 3H10v14H5.5A1.5 1.5 0 0 1 4 15.5v-11ZM10 3h4.5A1.5 1.5 0 0 1 16 4.5v11A1.5 1.5 0 0 1 14.5 17H10V3Z" {...s}/></svg>;
    case 'trophy':   return <svg width={w} height={h} viewBox="0 0 20 20"><path d="M6 3.5h8v2.2a4 4 0 0 1-8 0V3.5Z" {...s}/><path d="M6 5H3.5v.8A3.2 3.2 0 0 0 6.8 9M14 5h2.5v.8A3.2 3.2 0 0 1 13.2 9M10 10v3.5M7.5 16.5h5M8.5 13.5h3" {...s}/></svg>;
    case 'search':   return <svg width={w} height={h} viewBox="0 0 20 20"><circle cx="9" cy="9" r="5.5" {...s}/><path d="M16.5 16.5 13.2 13.2" {...s}/></svg>;
    case 'apps':     return <svg width={w} height={h} viewBox="0 0 20 20"><rect x="3" y="3" width="6" height="6" rx="1.2" {...s}/><rect x="11" y="3" width="6" height="6" rx="1.2" {...s}/><rect x="3" y="11" width="6" height="6" rx="1.2" {...s}/><rect x="11" y="11" width="6" height="6" rx="1.2" {...s}/></svg>;
    case 'chev':     return <svg width={w} height={h} viewBox="0 0 20 20"><path d="M6 8l4 4 4-4" {...s}/></svg>;
    case 'star':     return <svg width={w} height={h} viewBox="0 0 20 20"><path d="M10 2.5l2.06 4.18 4.61.67-3.34 3.25.79 4.59L10 17.3 5.88 15.18l.79-4.59L3.33 7.35l4.61-.67L10 2.5Z" fill={color} stroke="none"/></svg>;
    case 'settings': return <svg width={w} height={h} viewBox="0 0 20 20"><circle cx="10" cy="10" r="2.5" {...s}/><path d="M16.5 10c0 .5-.05 1-.13 1.45l1.5 1.18-1.5 2.6-1.78-.7c-.7.6-1.5 1.05-2.4 1.3l-.27 1.9h-3l-.27-1.9c-.9-.25-1.7-.7-2.4-1.3l-1.78.7-1.5-2.6 1.5-1.18A8 8 0 0 1 3.5 10c0-.5.05-1 .13-1.45L2.13 7.37l1.5-2.6 1.78.7c.7-.6 1.5-1.05 2.4-1.3L8.08 2.3h3l.27 1.9c.9.25 1.7.7 2.4 1.3l1.78-.7 1.5 2.6-1.5 1.18c.08.45.13.95.13 1.45Z" {...s}/></svg>;
    case 'panel-left':  return <svg width={w} height={h} viewBox="0 0 20 20"><rect x="3" y="4" width="14" height="12" rx="2" {...s}/><path d="M8 4.5v11" {...s}/></svg>;
    case 'users':    return <svg width={w} height={h} viewBox="0 0 20 20"><circle cx="7.5" cy="7" r="2.6" {...s}/><path d="M2.8 16c0-2.5 2.1-4 4.7-4s4.7 1.5 4.7 4" {...s}/><path d="M13.4 5.1a2.5 2.5 0 0 1 0 4.8M14.6 16c0-2-1-3.4-2.6-4" {...s}/></svg>;
    default: return null;
  }
};

const PrimusMark = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" style={{ flexShrink: 0 }}>
    <defs>
      <linearGradient id="pm-bg" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#7A1C1C"/>
        <stop offset="100%" stopColor="#5B1414"/>
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="32" height="32" rx="8" fill="url(#pm-bg)"/>
    <text x="16" y="22" textAnchor="middle"
          fontFamily="Fraunces, Georgia, serif"
          fontWeight="600" fontSize="20" fill="white">P</text>
    <circle cx="24" cy="9" r="2.4" fill="#B68A3B"/>
  </svg>
);


// ──────────────────────────────────────────────────────────────────────────────
// Item row
// ──────────────────────────────────────────────────────────────────────────────
const NavItem = ({ icon, label, active, onClick, collapsed }) => {
  const inner = (
    <button onClick={onClick} title={collapsed ? label : ''} style={{
      height: 40, width: '100%',
      padding: collapsed ? 0 : '0 12px',
      borderRadius: 10,
      background: active ? 'rgba(255,255,255,0.85)' : 'transparent',
      color: active ? 'var(--maroon)' : 'var(--ink-2)',
      border: 'none', cursor: 'pointer',
      display: 'flex', alignItems: 'center',
      justifyContent: collapsed ? 'center' : 'flex-start',
      gap: 13,
      fontSize: 13.5, fontWeight: active ? 600 : 500,
      fontFamily: 'inherit', textAlign: 'left',
      transition: 'background 0.15s, color 0.15s',
      boxShadow: active ? '0 1px 2px rgba(60,30,20,0.04)' : 'none',
    }}
    onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'rgba(255,255,255,0.5)'; }}
    onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}
    >
      <PIcon name={icon} size={18} color={active ? 'var(--maroon)' : 'var(--ink-2)'} />
      {!collapsed && <span style={{ flex: 1 }}>{label}</span>}
    </button>
  );
  return inner;
};

const sidebarSectionLabel = {
  fontSize: 10.5, fontWeight: 700, color: 'var(--mute)',
  letterSpacing: '0.08em', textTransform: 'uppercase',
  padding: '0 12px 8px', marginTop: 22,
};

const _relWhen = (iso) => {
  if (!iso) return '';
  const diff = Date.now() - new Date(iso).getTime();
  if (diff < 60000)     return 'now';
  if (diff < 3600000)   return `${Math.floor(diff / 60000)}m`;
  if (diff < 86400000)  return `${Math.floor(diff / 3600000)}h`;
  if (diff < 604800000) return `${Math.floor(diff / 86400000)}d`;
  return new Date(iso).toLocaleDateString('en-IN', { day: 'numeric', month: 'short' });
};

// Session row in the main sidebar. Click opens; hover reveals star + delete.
const SidebarChatRow = ({ session, active, onOpen, onStar, onDelete }) => {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onClick={() => onOpen(session.session_id)}
      style={{
        height: 34, padding: '0 8px 0 12px', borderRadius: 9, cursor: 'pointer',
        background: active ? 'rgba(122,28,28,0.09)' : hovered ? 'rgba(255,255,255,0.5)' : 'transparent',
        display: 'flex', alignItems: 'center', gap: 8, width: '100%',
        transition: 'background 0.15s', flexShrink: 0,
      }}
    >
      {session.is_starred && <PIcon name="star" size={11} color="var(--gold)" />}
      <span style={{
        flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        fontSize: 13, fontWeight: active ? 600 : 500,
        color: active ? 'var(--maroon)' : 'var(--ink-2)',
      }}>{session.title || 'New chat'}</span>
      {hovered ? (
        <span style={{ display: 'flex', gap: 1, flexShrink: 0 }} onClick={e => e.stopPropagation()}>
          <button onClick={() => onStar(session.session_id)} title={session.is_starred ? 'Unstar' : 'Star'} style={sidebarRowBtn}>
            <PIcon name="star" size={12} color={session.is_starred ? 'var(--gold)' : 'var(--mute)'} />
          </button>
          <button onClick={() => onDelete(session.session_id)} title="Delete" style={sidebarRowBtn}>
            <svg width="12" height="12" viewBox="0 0 20 20" fill="none" stroke="var(--mute)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
              <path d="M4 6h12M8 6V4h4v2M7 6v9a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V6"/>
            </svg>
          </button>
        </span>
      ) : (
        <span style={{ fontSize: 11, color: 'var(--mute-2)', flexShrink: 0 }}>
          {_relWhen(session.last_message_at || session.created_at)}
        </span>
      )}
    </div>
  );
};

const sidebarRowBtn = {
  width: 22, height: 22, borderRadius: 5, border: 'none', background: 'transparent',
  cursor: 'pointer', display: 'grid', placeItems: 'center',
};

// ──────────────────────────────────────────────────────────────────────────────
// Sidebar
// ──────────────────────────────────────────────────────────────────────────────
const BellIcon = ({ size = 18, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 20 20" fill="none"
    stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M10 2.5a5.5 5.5 0 0 1 5.5 5.5c0 3 .9 4.5 1.5 5.5H3c.6-1 1.5-2.5 1.5-5.5A5.5 5.5 0 0 1 10 2.5Z"/>
    <path d="M8 15.5a2 2 0 0 0 4 0"/>
  </svg>
);

const NotificationPanel = ({ notifications, onClose, onManage, onMarkAllRead }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const handler = (e) => {
      if (ref.current && !ref.current.contains(e.target) && !e.target.closest('#notif-bell-btn')) {
        onClose();
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const typeIcon = (type) => {
    if (type === 'join_request') return '🙋';
    if (type === 'join_approved') return '✅';
    if (type === 'join_rejected') return '❌';
    if (type === 'project_invite') return '📩';
    return '🔔';
  };

  return (
    <div ref={ref} style={{
      position: 'absolute', bottom: '100%', left: 0, right: 0, marginBottom: 8,
      background: 'white', border: '1px solid var(--line-2)', borderRadius: 14,
      boxShadow: '0 12px 40px rgba(26,22,20,0.16)', zIndex: 40,
      maxHeight: 420, display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      <div style={{
        padding: '12px 16px', borderBottom: '1px solid var(--line)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)' }}>Notifications</span>
        {notifications.some(n => !n.is_read) && (
          <button onClick={onMarkAllRead} style={{
            background: 'none', border: 'none', cursor: 'pointer',
            fontSize: 11, color: 'var(--maroon)', fontWeight: 600, fontFamily: 'inherit',
          }}>Mark all read</button>
        )}
      </div>
      <div className="pi-thin-scroll" style={{ overflowY: 'auto', flex: 1 }}>
        {notifications.length === 0 ? (
          <div style={{ padding: '32px 16px', textAlign: 'center', fontSize: 13, color: 'var(--mute)' }}>
            No notifications yet
          </div>
        ) : notifications.map(n => (
          <div key={n.id} style={{
            padding: '12px 16px', borderBottom: '1px solid var(--line)',
            background: n.is_read ? 'transparent' : 'var(--maroon-wash)',
            display: 'flex', flexDirection: 'column', gap: 6,
          }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
              <span style={{ fontSize: 14, flexShrink: 0, marginTop: 1 }}>{typeIcon(n.notification_type)}</span>
              <span style={{ fontSize: 12.5, color: 'var(--ink)', lineHeight: 1.45, flex: 1 }}>{n.message}</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 10.5, color: 'var(--mute-2)' }}>
                {new Date(n.created_at).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}
              </span>
              {n.notification_type === 'join_request' && (
                <button onClick={() => { onManage(n); onClose(); }} style={{
                  padding: '4px 10px', borderRadius: 6, fontSize: 11, fontWeight: 600,
                  background: 'var(--maroon)', color: 'white', border: 'none',
                  cursor: 'pointer', fontFamily: 'inherit',
                }}>Manage →</button>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const PrimusSidebar = ({ active, setRoute, collapsed, setCollapsed, currentUser, onLogout, notifications = [], unreadCount = 0, onManageJoinRequest, onMarkAllRead, onOpenNotifications,
                         chatSessions = [], activeChatId = null, onNewChat, onSelectChat, onStarChat, onDeleteChat, mobileOpen }) => {
  const [settingsOpen, setSettingsOpen] = React.useState(false);
  const [notifOpen, setNotifOpen] = React.useState(false);

  const displayName = currentUser?.full_name || 'You';
  const initials = displayName.split(' ').filter(Boolean).map(w => w[0].toUpperCase()).slice(0, 2).join('');
  const designation = currentUser?.designation
    ? currentUser.designation.split(' ').map(w => w[0].toUpperCase() + w.slice(1)).join(' ')
    : 'Primus Partners';

  const w = collapsed ? 68 : 264;

  return (
    <aside className={`pi-sidebar ${mobileOpen ? 'mobile-open' : ''}`} style={{
      width: w, minWidth: w, height: '100%',
      background: 'linear-gradient(180deg, var(--bg-sidebar-2) 0%, var(--bg-sidebar) 100%)',
      borderRight: '1px solid var(--line)',
      display: 'flex', flexDirection: 'column',
      padding: collapsed ? '20px 10px 14px' : '20px 14px 14px',
      transition: 'width 0.22s ease, padding 0.22s ease',
      position: 'relative',
      zIndex: 5,
    }}>
      {/* Header */}
      <div style={{
        display: 'flex', alignItems: 'center',
        justifyContent: collapsed ? 'center' : 'space-between',
        padding: collapsed ? '0' : '0 4px',
        marginBottom: collapsed ? 12 : 20,
        gap: 8,
        flexDirection: collapsed ? 'column' : 'row',
      }}>
        {!collapsed && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <PrimusMark size={26} />
            <span className="wordmark" style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-0.005em', color: 'var(--maroon)' }}>
              Primus IQ
            </span>
          </div>
        )}
        {collapsed && <PrimusMark size={30} />}
        <button onClick={() => setCollapsed(!collapsed)} title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
          style={{
            width: collapsed ? 38 : 28, height: 28, borderRadius: 8,
            background: 'transparent',
            border: 'none',
            cursor: 'pointer',
            display: 'grid', placeItems: 'center',
            color: 'var(--mute)',
            transition: 'background 0.15s, color 0.15s',
            marginTop: collapsed ? 4 : 0,
          }}
          onMouseEnter={e => { e.currentTarget.style.background = 'rgba(122,28,28,0.06)'; e.currentTarget.style.color = 'var(--maroon)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--mute)'; }}
        >
          <PIcon name="panel-left" size={17} />
        </button>
      </div>

      {/* New chat */}
      <button onClick={() => (onNewChat ? onNewChat() : setRoute('chat'))} title={collapsed ? 'New chat' : ''} style={{
        height: 40, width: '100%',
        padding: collapsed ? 0 : '0 12px',
        borderRadius: 11,
        background: 'var(--maroon)', color: 'white',
        border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center',
        justifyContent: collapsed ? 'center' : 'flex-start',
        gap: 13,
        fontSize: 13.5, fontWeight: 600, fontFamily: 'inherit',
        boxShadow: '0 2px 8px rgba(122,28,28,0.16)',
        marginBottom: 10,
        transition: 'all 0.15s',
      }}
      onMouseEnter={e => e.currentTarget.style.background = 'var(--maroon-deep)'}
      onMouseLeave={e => e.currentTarget.style.background = 'var(--maroon)'}
      >
        <PIcon name="plus" size={18} color="white" />
        {!collapsed && 'New chat'}
      </button>

      {/* Scroll region — nav + chat history, starts right after New chat (Claude-style) */}
      <div className="pi-thin-scroll" style={{
        flex: 1, minHeight: 0, overflowY: 'auto', overflowX: 'hidden',
        display: 'flex', flexDirection: 'column', paddingRight: 4, marginRight: -4,
      }}>
        {/* Primary nav — generous spacing between items */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          <NavItem icon="chat"   label="Chat"         active={active === 'chat'}    onClick={() => setRoute('chat')} collapsed={collapsed}/>
          <NavItem icon="folder" label="Projects"     active={active === 'projects' || active === 'project-detail'} onClick={() => setRoute('projects')} collapsed={collapsed}/>
          <NavItem icon="book"   label="Library"      active={active === 'library'} onClick={() => setRoute('library')} collapsed={collapsed}/>
          <NavItem icon="search" label="Search"       active={active === 'search'}  onClick={() => setRoute('search')} collapsed={collapsed}/>
          <NavItem icon="apps"   label="Applications" active={active === 'apps' || active.startsWith('app-')} onClick={() => setRoute('apps')} collapsed={collapsed}/>
          <NavItem icon="trophy" label="Leaderboard"  active={active === 'leaderboard'} onClick={() => setRoute('leaderboard')} collapsed={collapsed}/>
        </div>

        {/* Chat history — real sessions, grouped Starred / Recent */}
        {!collapsed && (() => {
          const starred = chatSessions.filter(s => s.is_starred);
          const recent  = chatSessions.filter(s => !s.is_starred);
          const openChat = (id) => { onSelectChat && onSelectChat(id); };
          const rowProps = { active: null, onOpen: openChat, onStar: onStarChat, onDelete: onDeleteChat };
          return (
            <>
              {starred.length > 0 && (
                <>
                  <div style={sidebarSectionLabel}>Starred</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                    {starred.map(s => (
                      <SidebarChatRow key={s.session_id} session={s} {...rowProps} active={s.session_id === activeChatId} />
                    ))}
                  </div>
                </>
              )}
              <div style={sidebarSectionLabel}>Recent</div>
              {recent.length === 0 && starred.length === 0 ? (
                <div style={{ padding: '4px 12px', fontSize: 12, color: 'var(--mute-2)' }}>No chats yet</div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  {recent.map(s => (
                    <SidebarChatRow key={s.session_id} session={s} {...rowProps} active={s.session_id === activeChatId} />
                  ))}
                </div>
              )}
            </>
          );
        })()}
      </div>

      {/* Notification bell */}
      <div style={{ position: 'relative', marginTop: 8 }}>
        {notifOpen && !collapsed && (
          <NotificationPanel
            notifications={notifications}
            onClose={() => setNotifOpen(false)}
            onManage={(n) => { onManageJoinRequest && onManageJoinRequest(n); }}
            onMarkAllRead={() => { onMarkAllRead && onMarkAllRead(); setNotifOpen(false); }}
          />
        )}
        <button id="notif-bell-btn" onClick={() => setNotifOpen(o => { const next = !o; if (next && onOpenNotifications) onOpenNotifications(); return next; })} title="Notifications" style={{
          width: '100%', height: 36, borderRadius: 10,
          background: notifOpen ? 'rgba(255,255,255,0.85)' : 'transparent',
          border: '1px solid', borderColor: notifOpen ? 'var(--line-2)' : 'transparent',
          cursor: 'pointer', display: 'flex', alignItems: 'center',
          justifyContent: collapsed ? 'center' : 'flex-start',
          gap: 12, padding: collapsed ? 0 : '0 12px',
          color: 'var(--ink-2)', fontFamily: 'inherit', fontSize: 13.5, fontWeight: 500,
          transition: 'background 0.15s',
          position: 'relative',
        }}
        onMouseEnter={e => { if (!notifOpen) e.currentTarget.style.background = 'rgba(255,255,255,0.5)'; }}
        onMouseLeave={e => { if (!notifOpen) e.currentTarget.style.background = 'transparent'; }}
        >
          <div style={{ position: 'relative', flexShrink: 0 }}>
            <BellIcon size={18} color={unreadCount > 0 ? 'var(--maroon)' : 'var(--ink-2)'} />
            {unreadCount > 0 && (
              <span style={{
                position: 'absolute', top: -4, right: -4,
                width: 14, height: 14, borderRadius: 7,
                background: 'var(--maroon)', color: 'white',
                fontSize: 8, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{unreadCount > 9 ? '9+' : unreadCount}</span>
            )}
          </div>
          {!collapsed && <span style={{ flex: 1, textAlign: 'left' }}>Notifications</span>}
          {!collapsed && unreadCount > 0 && (
            <span style={{
              padding: '1px 6px', borderRadius: 999,
              background: 'var(--maroon)', color: 'white',
              fontSize: 10, fontWeight: 700,
            }}>{unreadCount > 9 ? '9+' : unreadCount}</span>
          )}
        </button>
      </div>

      {/* User pod */}
      <div style={{ position: 'relative', marginTop: 8 }}>
        {settingsOpen && !collapsed && (
          <div style={{
            position: 'absolute', bottom: '100%', left: 0, right: 0, marginBottom: 6,
            background: 'white', border: '1px solid var(--line-2)', borderRadius: 10,
            boxShadow: '0 8px 24px rgba(26,22,20,0.12)', overflow: 'hidden', zIndex: 20,
          }}>
            <button onClick={() => { setSettingsOpen(false); setRoute('profile'); }} style={settingItemStyle}>
              Edit profile
            </button>
            <div style={{ height: 1, background: 'var(--line)' }} />
            <button onClick={() => { setSettingsOpen(false); onLogout && onLogout(); }} style={{ ...settingItemStyle, color: 'var(--maroon)' }}>
              Sign out
            </button>
          </div>
        )}
        <div onClick={() => !collapsed && setSettingsOpen(o => !o)} style={{
          padding: collapsed ? 6 : 10,
          borderRadius: 12,
          background: settingsOpen ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.6)',
          border: '1px solid var(--line)',
          display: 'flex', alignItems: 'center',
          justifyContent: collapsed ? 'center' : 'flex-start',
          gap: 10,
          cursor: 'pointer', transition: 'background 0.15s',
        }}
        onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.85)'}
        onMouseLeave={e => { if (!settingsOpen) e.currentTarget.style.background = 'rgba(255,255,255,0.6)'; }}
        title={collapsed ? displayName : ''}
        >
          <div style={{
            width: 30, height: 30, borderRadius: 15,
            background: 'linear-gradient(135deg, var(--maroon), var(--maroon-deep))',
            color: 'white', display: 'grid', placeItems: 'center',
            fontSize: 11, fontWeight: 700, flexShrink: 0,
          }}>{initials}</div>
          {!collapsed && (
            <>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, color: 'var(--ink)', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{displayName}</div>
                <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--mute)' }}>{designation}</div>
              </div>
              <PIcon name="settings" size={14} color="var(--mute)" />
            </>
          )}
        </div>
      </div>
    </aside>
  );
};

const settingItemStyle = {
  width: '100%', padding: '9px 14px', background: 'transparent', border: 'none',
  cursor: 'pointer', textAlign: 'left', fontSize: 12, fontFamily: 'inherit',
  color: 'var(--ink)', transition: 'background 0.12s',
  display: 'block',
};

Object.assign(window, { PrimusSidebar, PIcon, NavItem, PrimusMark, SidebarChatRow, BellIcon, NotificationPanel, settingItemStyle });
