/* global React, Logo, Icon, ICONS, Avatar */
const { useState } = React;

function Sidebar({ active, onNav, collapsed, onToggle, onLogout, user }) {
  const sections = [
    { lab: 'Workspace', items: [
      { id: 'home',     icon: 'home',      label: 'Início' },
      { id: 'projects', icon: 'folder',    label: 'Projetos' },
      { id: 'tasks',    icon: 'check',     label: 'Tarefas'  },
      { id: 'clients',  icon: 'users',     label: 'Clientes' },
      { id: 'calendar', icon: 'cal',       label: 'Agenda' },
      { id: 'messages', icon: 'msg',       label: 'Mensagens' },
    ]},
    { lab: 'Negócios', items: [
      { id: 'leads',     icon: 'pipeline',  label: 'Pipeline' },
      { id: 'finance',   icon: 'dollar',    label: 'Financeiro' },
      { id: 'budgets',   icon: 'briefcase', label: 'Orçamentos' },
      { id: 'briefings', icon: 'page',      label: 'Briefings' },
      { id: 'services',  icon: 'pkg',       label: 'Serviços' },
      { id: 'reports',   icon: 'chart',     label: 'Relatórios' },
    ]},
    { lab: 'Ferramentas', items: [
      { id: 'grid',       icon: 'grid', label: 'Grid de Preview'  },
      { id: 'calculator', icon: 'calc', label: 'Calculadora'      },
      { id: 'pages',      icon: 'bolt', label: 'Páginas públicas' },
    ]},
    { lab: 'Sistema', items: [
      { id: 'settings', icon: 'settings', label: 'Configurações' },
    ]},
  ];
  return (
    <aside style={{
      width: collapsed ? 72 : 248, height: '100%',
      background: 'var(--bg-surface)',
      borderRight: '1px solid var(--border-subtle)',
      padding: '18px 14px', display: 'flex', flexDirection: 'column', gap: 4,
      boxSizing: 'border-box', flexShrink: 0,
      transition: 'width 200ms ease',
      overflow: 'hidden',
    }}>
      <div style={{ padding: '6px 6px 14px', flexShrink: 0 }}><Logo size={32} withText={!collapsed} /></div>

      {/* área de navegação com scroll */}
      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', overflowX: 'hidden', display: 'flex', flexDirection: 'column', gap: 4,
        scrollbarWidth: 'thin', scrollbarColor: 'rgba(255,255,255,0.08) transparent' }}>
      {sections.map((s, idx) => (
        <React.Fragment key={idx}>
          {!collapsed && (
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 10, fontWeight: 700,
              textTransform: 'uppercase', letterSpacing: '0.08em',
              color: 'var(--fg-muted)', padding: '14px 12px 4px',
            }}>{s.lab}</div>
          )}
          {s.items.map(it => {
            const isActive = active === it.id;
            return (
              <div key={it.id} onClick={() => onNav(it.id)}
                className={isActive ? 'sb-item active' : 'sb-item'}
                style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  gap: 10, padding: '8px 12px', borderRadius: 8,
                  color: isActive ? 'var(--geek-blue-200)' : 'var(--fg-secondary)',
                  background: isActive ? 'var(--primary-soft)' : 'transparent',
                  fontSize: 13, fontWeight: 500, cursor: 'pointer',
                  position: 'relative', transition: 'all 160ms',
                }}>
                {isActive && <span style={{
                  position: 'absolute', left: -14, top: 8, bottom: 8, width: 3,
                  background: 'var(--primary)', borderRadius: '0 3px 3px 0',
                }} />}
                <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon d={ICONS[it.icon]} size={16} />
                  {!collapsed && it.label}
                </span>
                {!collapsed && it.count !== undefined && (
                  <span style={{
                    fontSize: 10,
                    background: isActive ? 'var(--primary)' : 'var(--bg-elevated)',
                    color: isActive ? '#fff' : 'var(--fg-secondary)',
                    padding: '1px 7px', borderRadius: 999, fontFamily: 'var(--font-mono)',
                  }}>{it.count}</span>
                )}
              </div>
            );
          })}
        </React.Fragment>
      ))}
      </div>

      {/* Botão compactar / expandir */}
      <button
        onClick={onToggle}
        title={collapsed ? 'Expandir sidebar' : 'Compactar sidebar'}
        onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-elevated)'; e.currentTarget.style.color = 'var(--fg-primary)'; }}
        onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--fg-muted)'; }}
        style={{
          display: 'flex', alignItems: 'center', gap: 8,
          justifyContent: collapsed ? 'center' : 'flex-end',
          width: '100%', padding: '8px 12px', marginBottom: 4,
          background: 'transparent', border: 'none', borderRadius: 8,
          color: 'var(--fg-muted)', cursor: 'pointer', transition: 'all 140ms',
          fontFamily: 'inherit', fontSize: 12, fontWeight: 500,
        }}
      >
        {!collapsed && <span>Compactar</span>}
        <svg viewBox="0 0 24 24" width={15} height={15} fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
          <path d={collapsed ? 'M9 18l6-6-6-6' : 'M15 18l-6-6 6-6'}/>
        </svg>
      </button>

      {!collapsed && (
        <div style={{
          padding: 12, borderRadius: 12, background: 'var(--bg-elevated)',
          display: 'flex', alignItems: 'center', gap: 10, marginTop: 12,
        }}>
          <Avatar name={user?.name || ''} size={32} src={user?.avatarUrl || null} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{user?.name || '…'}</div>
            <div style={{ fontSize: 11, color: 'var(--fg-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{user?.studio || user?.email || ''}</div>
          </div>
          <button onClick={onLogout} title="Sair da conta"
            onMouseEnter={e=>{ e.currentTarget.style.background='var(--bg-surface)'; e.currentTarget.style.color='var(--accent-danger,#FA541C)'; }}
            onMouseLeave={e=>{ e.currentTarget.style.background='transparent'; e.currentTarget.style.color='var(--fg-muted)'; }}
            style={{
              display:'inline-flex', alignItems:'center', justifyContent:'center',
              width:30, height:30, borderRadius:8, border:'none', cursor:'pointer',
              background:'transparent', color:'var(--fg-muted)', transition:'all 140ms',
            }}>
            <Icon d={ICONS.logout} size={16} />
          </button>
        </div>
      )}
      {collapsed && (
        <button onClick={onLogout} title="Sair da conta"
          style={{
            marginTop:12, padding:10, borderRadius:8, border:'none', cursor:'pointer',
            background:'transparent', color:'var(--fg-muted)', display:'flex', alignItems:'center', justifyContent:'center',
          }}>
          <Icon d={ICONS.logout} size={18} />
        </button>
      )}
    </aside>
  );
}
window.Sidebar = Sidebar;