// Rumbo — Sidebar Navigation · v3 · Design System variables

const Nav = ({ active, setActive, theme, toggleTheme }) => {
  const items = [
    { id:'dashboard',    label:'Inicio',        icon:'home'       },
    { id:'accounts',     label:'Cuentas',       icon:'wallet'     },
    { id:'transactions', label:'Movimientos',   icon:'list'       },
    { id:'fixed',        label:'Gastos fijos',  icon:'calendar'   },
    { id:'budget',       label:'Presupuesto',   icon:'pieChart'   },
    { id:'debts',        label:'Deudas',        icon:'creditCard' },
    { id:'savings',      label:'Ahorros',       icon:'piggyBank'  },
    { id:'reports',      label:'Reportes',      icon:'chartBar'   },
  ];

  return (
    <nav style={{
      width: 228, minWidth: 228, height: '100vh',
      background: 'var(--surface)', borderRight: '1px solid var(--border)',
      display: 'flex', flexDirection: 'column', padding: '22px 0 16px',
      position: 'fixed', left: 0, top: 0, zIndex: 100,
      transition: 'background 0.22s ease',
    }}>
      {/* Logo */}
      <div style={{ display:'flex', alignItems:'center', gap:10, padding:'0 18px', marginBottom:28 }}>
        <BrandLogo size={32} />
        <div>
          <div style={{ fontSize:16, fontWeight:900, color:'var(--t1)', letterSpacing:'-0.3px' }}>Rumbo</div>
          <div style={{ fontSize:10, color:'var(--t5)', letterSpacing:'0.3px', textTransform:'uppercase' }}>finanzas personales</div>
        </div>
      </div>

      {/* Items */}
      <div style={{ display:'flex', flexDirection:'column', gap:2, padding:'0 10px', flex:1 }}>
        {items.map(item => {
          const isActive = active === item.id;
          return (
            <button key={item.id}
              onClick={() => setActive(item.id)}
              style={{
                display:'flex', alignItems:'center', gap:10,
                padding:'10px 12px', borderRadius:'var(--r-md)',
                background: isActive ? 'var(--accent-muted)' : 'none',
                border:'none', cursor:'pointer',
                fontSize:13, fontWeight: isActive ? 700 : 500,
                color: isActive ? 'var(--accent)' : 'var(--t4)',
                transition:'background 0.15s, color 0.15s',
                textAlign:'left', width:'100%', fontFamily:'var(--font)',
                position:'relative',
              }}
              onMouseEnter={e => { if (!isActive) { e.currentTarget.style.background='var(--surface-2)'; e.currentTarget.style.color='var(--t2)'; } }}
              onMouseLeave={e => { if (!isActive) { e.currentTarget.style.background='none'; e.currentTarget.style.color='var(--t4)'; } }}>
              {isActive && <div style={{ position:'absolute', left:0, top:'50%', transform:'translateY(-50%)', width:3, height:18, background:'var(--accent)', borderRadius:'0 3px 3px 0' }} />}
              <Icon name={item.icon} size={16} color={isActive?'var(--accent)':'var(--t5)'} />
              {item.label}
            </button>
          );
        })}
      </div>

      {/* (Antes había un widget "Tu Norte" duplicado — lo eliminé porque ya está en el hero del Dashboard.
          Mantenerlo acá generaba 3 lugares mostrando lo mismo y rompía la coherencia con mobile. */}

      {/* Footer */}
      <div style={{ padding:'0 10px', display:'flex', flexDirection:'column', gap:2 }}>
        <button onClick={toggleTheme}
          style={{ display:'flex', alignItems:'center', gap:8, padding:'9px 12px', background:'none', border:'none', cursor:'pointer', width:'100%', borderRadius:'var(--r-md)', fontFamily:'var(--font)', color:'var(--t4)', fontSize:13, fontWeight:500, transition:'background 0.15s' }}
          onMouseEnter={e=>e.currentTarget.style.background='var(--surface-2)'}
          onMouseLeave={e=>e.currentTarget.style.background='none'}>
          <Icon name={theme==='dark'?'sun':'moon'} size={15} color="var(--t5)" />
          {theme==='dark'?'Modo claro':'Modo oscuro'}
        </button>
        <button onClick={() => setActive('settings')}
          style={{ display:'flex', alignItems:'center', gap:8, padding:'9px 12px', background:'none', border:'none', cursor:'pointer', width:'100%', borderRadius:'var(--r-md)', fontFamily:'var(--font)', color:'var(--t4)', fontSize:13, fontWeight:500, transition:'background 0.15s' }}
          onMouseEnter={e=>e.currentTarget.style.background='var(--surface-2)'}
          onMouseLeave={e=>e.currentTarget.style.background='none'}>
          <Icon name="settings" size={15} color="var(--t5)" />
          Configuración
        </button>
      </div>
    </nav>
  );
};

Object.assign(window, { Nav });