// CronoDato — Sidebar component
const Sidebar = ({ activeItem, onNav, collapsed }) => {
  const nav = [
    { id: 'dashboard', icon: 'layout-dashboard', label: 'Panel principal' },
    { id: 'facturas',  icon: 'file-text',         label: 'Facturas' },
    { id: 'planilla',  icon: 'table-2',            label: 'Mi planilla' },
    { id: 'reportes',  icon: 'bar-chart-2',        label: 'Reportes' },
  ];
  const bottom = [
    { id: 'integraciones', icon: 'plug',         label: 'Integraciones' },
    { id: 'ajustes',       icon: 'settings',     label: 'Ajustes' },
    { id: 'perfil',        icon: 'user-circle',  label: 'Mi perfil' },
  ];

  const Item = ({ item }) => {
    const active = activeItem === item.id;
    return (
      <div
        onClick={() => onNav(item.id)}
        style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: collapsed ? '10px 0' : '9px 12px',
          justifyContent: collapsed ? 'center' : 'flex-start',
          borderRadius: 6, cursor: 'pointer', marginBottom: 2,
          background: active ? '#047857' : 'transparent',
          color: active ? '#fff' : '#94A3B8',
          transition: 'background 150ms',
        }}
        onMouseEnter={e => { if (!active) e.currentTarget.style.background = '#1E293B'; }}
        onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}
        title={collapsed ? item.label : ''}
      >
        <i data-lucide={item.icon} style={{ width: 18, height: 18, flexShrink: 0 }}></i>
        {!collapsed && <span style={{ fontSize: 14, fontWeight: active ? 500 : 400 }}>{item.label}</span>}
      </div>
    );
  };

  return (
    <div style={{
      width: collapsed ? 64 : 240, flexShrink: 0, background: '#0F172A',
      display: 'flex', flexDirection: 'column', height: '100vh',
      transition: 'width 200ms cubic-bezier(0.16,1,0.3,1)', overflow: 'hidden',
    }}>
      {/* Logo */}
      <div style={{
        padding: collapsed ? '18px 0' : '18px 16px',
        display: 'flex', alignItems: 'center', justifyContent: collapsed ? 'center' : 'flex-start',
        gap: 10, borderBottom: '1px solid #1E293B', marginBottom: 8,
      }}>
        <CDLogo size={32} showName={!collapsed} nameColor="white" />
      </div>

      {/* Nav principal */}
      <div style={{ flex: 1, padding: '8px 10px', overflowY: 'auto' }}>
        {nav.map(item => <Item key={item.id} item={item} />)}

        {/* Separador Admin */}
        {window.__cronodatoRole === 'admin' && (
          <>
            {!collapsed && (
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#334155', padding: '12px 12px 6px', marginTop: 8 }}>
                Administración
              </div>
            )}
            <Item item={{ id: 'admin', icon: 'shield', label: 'Clientes' }} />
          </>
        )}
      </div>

      {/* Bottom */}
      <div style={{ padding: '8px 10px', borderTop: '1px solid #1E293B' }}>
        {bottom.map(item => <Item key={item.id} item={item} />)}
        {/* Avatar usuario */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: collapsed ? '10px 0' : '9px 12px',
          justifyContent: collapsed ? 'center' : 'flex-start', marginTop: 4,
          cursor: 'pointer',
        }}
          onClick={() => onNav('perfil')}
          title={collapsed ? 'Mi perfil' : ''}
        >
          <div style={{
            width: 28, height: 28, borderRadius: '50%', background: '#047857',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0, fontSize: 11, color: 'white', fontWeight: 700,
          }}>
            {window.__cronodatoUser ? window.__cronodatoUser.slice(0,2).toUpperCase() : 'U'}
          </div>
          {!collapsed && (
            <div>
              <div style={{ fontSize: 13, color: '#E2E8F0', fontWeight: 500 }}>
                {window.__cronodatoUser || 'Usuario'}
              </div>
              <div style={{ fontSize: 11, color: '#64748B' }}>
                {window.__cronodatoRole === 'admin' ? 'Administrador' : 'Cliente'}
              </div>
            </div>
          )}
        </div>
        {/* Cerrar sesión */}
        <div
          onClick={() => { window.__cronodatoRole = null; window.__cronodatoUser = null; onNav('logout'); }}
          style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: collapsed ? '10px 0' : '8px 12px',
            justifyContent: collapsed ? 'center' : 'flex-start',
            borderRadius: 6, cursor: 'pointer', color: '#475569',
            transition: 'color 150ms',
          }}
          onMouseEnter={e => e.currentTarget.style.color = '#94A3B8'}
          onMouseLeave={e => e.currentTarget.style.color = '#475569'}
          title={collapsed ? 'Cerrar sesión' : ''}
        >
          <i data-lucide="log-out" style={{ width: 16, height: 16 }}></i>
          {!collapsed && <span style={{ fontSize: 13 }}>Cerrar sesión</span>}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Sidebar });