// Sidebar — navigation for HCM Atica
const NAV_ITEMS = [
  { id: 'dashboard', label: 'Inicio', icon: 'IconHome', badge: null },
  { id: 'profile', label: 'Mi Perfil', icon: 'IconUsers', badge: null },
  { id: 'employees', label: 'Empleados', icon: 'IconUsers', badge: '847', hiddenForRoles: ['nuevo', 'jefe'] },
  { id: 'solicitudes-personal', label: 'Solicitudes de personal', icon: 'IconUsers', badge: null, hiddenForRoles: ['nuevo'] },
  { id: 'recruit', label: 'Reclutamiento', icon: 'IconSearch', badge: '12', hiddenForRoles: ['nuevo', 'jefe'] },
  { id: 'onboarding', label: 'Onboarding', icon: 'IconRocket', badge: '4' },
  { id: 'orgchart', label: 'Organigrama', icon: 'IconSitemap', badge: null },
  { id: 'docs', label: 'Documentos', icon: 'IconDoc', badge: null },
  { id: 'training', label: 'Formación y desarrollo', icon: 'IconBook', badge: null },
  { id: 'performance', label: 'Desempeño', icon: 'IconStar', badge: null, badgeV2: true },
  // { id: 'sst', label: 'SST', icon: 'IconShield', badge: '7', hiddenForRoles: ['nuevo'] }, // oculto del sidebar — módulo/contenido intacto (sst.jsx, ruta 'sst' en app.jsx)
  // { id: 'salud-ocupacional', label: 'Salud ocupacional', icon: 'IconShield', badge: null, hiddenForRoles: ['nuevo'] }, // oculto del sidebar — módulo/contenido intacto (sst-salud-ocupacional.jsx, ruta 'salud-ocupacional' en app.jsx)
  // { id: 'gestion-riesgo', label: 'Gestión del riesgo', icon: 'IconAlert', badge: null, hiddenForRoles: ['nuevo'] }, // oculto del sidebar — módulo/contenido intacto (sst-gestion-riesgo.jsx, ruta 'gestion-riesgo' en app.jsx)
  // { id: 'estrategico', label: 'Estratégica', icon: 'IconArrowUpRight', badge: null, hiddenForRoles: ['nuevo'], badgeV2: true }, // oculto del sidebar — módulo/contenido intacto (sst-estrategico.jsx, ruta 'estrategico' en app.jsx)
  { id: 'epp', label: 'Dotación y EPP', icon: 'IconShirt', badge: null, hiddenForRoles: ['nuevo', 'jefe'] },
  { id: 'time-off', label: 'Gestión de ausencias', icon: 'IconCalendar', badge: null },
  { id: 'comms', label: 'Comunicaciones', icon: 'IconMegaphone', badge: null },
  { id: 'benefits', label: 'Beneficios', icon: 'IconGift', badge: null, badgeV2: true },
  { id: 'wellness', label: 'Bienestar', icon: 'IconHeart', badge: null },
  { id: 'reports', label: 'Reportes', icon: 'IconBarChart', badge: null, hiddenForRoles: ['nuevo', 'jefe'] },
  { id: 'automation', label: 'Motor de Automatización', icon: 'IconZap', badge: null, hiddenForRoles: ['nuevo', 'jefe'], badgeV2: true },
];

// Persona activa por rol — mismo mapeo conceptual que DASH_ROLE_META en
// dashboard.jsx (Gestión Humana / Jefe / Colaborador), aquí solo para el
// avatar y nombre del pie del sidebar.
const SIDEBAR_USER_META = {
  admin: { initials: 'CR', name: 'Carolina Restrepo',   role: 'Gestión Humana · Sede Cali' },
  jefe:  { initials: 'LM', name: 'Luis Miguel Marín',   role: 'Jefe · Líder de Aprovechamiento' },
  nuevo: { initials: 'AM', name: 'Andrés Felipe Mejía', role: 'Colaborador · Operario de Clasificación' },
};

const Sidebar = ({ active, setActive, collapsed, setCollapsed, currentRole }) => {
  const ICONS = {
    IconHome, IconUsers, IconSearch, IconRocket, IconDoc, IconBook,
    IconStar, IconShield, IconShirt, IconCalendar, IconMegaphone,
    IconGift, IconBarChart, IconSettings, IconZap, IconHeart, IconSitemap,
    IconAlert, IconArrowUpRight,
  };
  const visibleNavItems = NAV_ITEMS.filter(
    (item) => !(item.hiddenForRoles || []).includes(currentRole)
  );
  return (
    <aside className="sidebar">
      <div className="brand">
        <AticaTile size={32} />
        {!collapsed && (
          <div className="brand-name">
            <span className="brand-word">Atica SOMOS</span> <small>Gestión humana</small>
          </div>
        )}
        {!collapsed && (
          <button className="collapse-btn" onClick={() => setCollapsed(true)} title="Colapsar">
            <IconChevronLeft size={18} />
          </button>
        )}
      </div>

      <nav className="nav">
        {!collapsed && <div className="nav-section">Operación</div>}
        {visibleNavItems.map((item) => {
          const Ico = ICONS[item.icon];
          return (
            <div
              key={item.id}
              className={`nav-item ${active === item.id ? 'active' : ''}`}
              onClick={() => setActive(item.id)}
              title={item.label}
            >
              <Ico size={18} />
              <span>{item.label}</span>
              {item.badgeV2 && !collapsed && <span className="nav-badge-v2">v2</span>}
              {item.badge && <span className="badge">{item.badge}</span>}
            </div>
          );
        })}
        <div className="nav-divider" />
        {!collapsed && <div className="nav-section">Sistema</div>}
        <div
          className={`nav-item ${active === 'portal' ? 'active' : ''}`}
          onClick={() => setActive('portal')}
          title={collapsed ? 'Portal del colaborador' : undefined}
        >
          <IconRocket size={18} />
          <span>Portal colaborador</span>
        </div>
        <div
          className={`nav-item ${active === 'design' ? 'active' : ''}`}
          onClick={() => setActive('design')}
          title={collapsed ? 'Sistema de diseño' : undefined}
        >
          <IconStar size={18} />
          <span>Sistema de diseño</span>
        </div>
        <div
          className={`nav-item ${active === 'settings' ? 'active' : ''}`}
          onClick={() => setActive('settings')}
          title={collapsed ? 'Configuración' : undefined}
        >
          <IconSettings size={18} />
          <span>Configuración</span>
        </div>
      </nav>

      <div className="user-card" title={collapsed ? SIDEBAR_USER_META[currentRole]?.name || SIDEBAR_USER_META.admin.name : undefined}>
        <div className="avatar">{(SIDEBAR_USER_META[currentRole] || SIDEBAR_USER_META.admin).initials}</div>
        {!collapsed && (
          <div className="user-meta">
            <div className="name">{(SIDEBAR_USER_META[currentRole] || SIDEBAR_USER_META.admin).name}</div>
            <div className="role">{(SIDEBAR_USER_META[currentRole] || SIDEBAR_USER_META.admin).role}</div>
          </div>
        )}
        {!collapsed && (
          <button
            className="collapse-btn"
            onClick={(e) => { e.stopPropagation(); setCollapsed(false); }}
            style={{ display: 'none' }}
          />
        )}
      </div>

      {collapsed && (
        <button
          className="collapse-btn"
          onClick={() => setCollapsed(false)}
          style={{ margin: '0 auto 14px', width: 32, height: 32 }}
          title="Expandir"
        >
          <IconChevronRight size={18} />
        </button>
      )}
    </aside>
  );
};

window.Sidebar = Sidebar;