// ================================================================
// Sidebar — Portfolio
// ================================================================

const Sidebar = ({ collapsed, onToggleCollapse, currentScreen, onNavigate, onAgentClick, onOpenSettings, agents, activeAgentId }) => {
  const navItems = [
    { id: 'home', icon: 'home',           label: 'Home' },
    { id: 'chat', icon: 'message-square', label: 'Ask me anything', badge: null },
  ];

  return (
    <aside className="sidebar" data-collapsed={collapsed}>
      <div className="sidebar-brand">
        <div className="brand-mark">S</div>
        {!collapsed && (
          <div className="brand-name">Sai <em>Krishna</em></div>
        )}
        <button className="sidebar-toggle" onClick={onToggleCollapse} title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}>
          <Icon name="panel-left" />
        </button>
      </div>

      {navItems.map(item => (
        <div
          key={item.id}
          className="nav-item"
          data-active={currentScreen === item.id}
          onClick={() => onNavigate(item.id)}
        >
          <Icon name={item.icon} />
          <span className="nav-label">{item.label}</span>
          {item.badge && <span className="nav-badge">{item.badge}</span>}
        </div>
      ))}

      <div className="sidebar-section-label">Expertise</div>
      <div className="agents-list">
        {agents.map(agent => (
          <div
            key={agent.id}
            className="agent-row"
            onClick={() => onAgentClick(agent)}
          >
            <div className="agent-avatar" style={{ background: agent.color }}>
              {agent.initial}
              <div className={`agent-status-dot ${
                activeAgentId === agent.id ? 'thinking' :
                ['mulesoft', 'salesforce', 'ai'].includes(agent.id) ? 'active' : 'idle'
              }`} />
            </div>
            <div className="agent-meta">
              <div className="agent-name">{agent.name}</div>
              <div className="agent-status">{agent.role}</div>
            </div>
          </div>
        ))}
      </div>

    </aside>
  );
};

window.Sidebar = Sidebar;