// Sidebar — dark navy rail with phoenix mark, nav, live status, account.
const Sidebar = ({ active = 'afiliados', onNav, expandedMenu, onToggleMenu, conn = 'live', lastUpdate, open = false }) => {
  const [senhaModal, setSenhaModal] = React.useState(false);
  const _hhmm = lastUpdate ? lastUpdate.toLocaleTimeString('pt-BR',{hour:'2-digit',minute:'2-digit'}) : '—';
  const st = {
    live:       { dot:'#1F9D6B', label:'Tempo real',  sub:`Atualizado às ${_hhmm}` },
    connecting: { dot:'#9FB0C9', label:'Conectando…', sub:'buscando dados' },
    offline:    { dot:'#E0A100', label:'API offline',  sub:'Reconectando…' },
  }[conn] || { dot:'#9FB0C9', label:'—', sub:'' };
  const navBase = [
    { key:'visao',     label:'Visão geral', icon:'dashboard' },
    { key:'afiliados', label:'Afiliados',   icon:'users', submenu:[
      { key:'afiliados',   label:'Visão Geral',  icon:'users' },
      { key:'aov-tracker', label:'AOV Tracker',  icon:'chart' },
      { key:'dre-afiliados', label:'DRE Afiliados', icon:'chart' },
    ]},
    { key:'produtos',  label:'Produtos',    icon:'layers', submenu:[
      { key:'produtos',     label:'Visão Geral',           icon:'layers' },
      { key:'nichos',       label:'Nichos',                icon:'globe' },
      { key:'ab-test',      label:'Teste A/B',             icon:'chart' },
      { key:'funnel-track', label:'Funnel Sales Tracker',  icon:'trending' },
      { key:'eaglelabs-cr', label:'EagleLabs C/R',         icon:'refresh' },
    ]},
    { key:'canais',    label:'Canais',      icon:'chart', submenu:[
      { key:'canais',                 label:'Visão Geral',   icon:'chart' },
      { key:'canais-acompanhamento',  label:'Acompanhamento', icon:'cart' },
      { key:'canais-leads',           label:'Leads',          icon:'trending' },
      { key:'canais-leads-economics', label:'Leads & economics por oferta', icon:'dollar' },
    ]},
    { key:'reembolso',  label:'Reembolso',   icon:'refresh', submenu:[
      { key:'reembolso-calendario', label:'Calendário de Reembolso', icon:'calendar' },
      { key:'reembolso-geral', label:'Reembolso Geral', icon:'trending' },
    ]},
  ];
  // Administração agrupada num submenu (spec 2026-08-05); o filtro de permissões
  // abaixo esconde os filhos (e o grupo inteiro) de quem não pode ver.
  navBase.push({ key:'administracao', label:'Administração', icon:'settings', submenu:[
    { key:'usuarios',  label:'Usuários',            icon:'users' },
    { key:'perfis',    label:'Perfis e permissões', icon:'shield' },
    { key:'auditoria', label:'Auditoria',           icon:'list' },
  ]});
  // Filtra tudo pelas permissões do usuário (canNav espelha o backend).
  const canNav = (k) => window.FenixAuth?.canNav ? window.FenixAuth.canNav(k) : true;
  const nav = navBase
    .map(n => n.submenu ? { ...n, submenu: n.submenu.filter(s => canNav(s.key)) } : n)
    .filter(n => n.submenu ? n.submenu.length > 0 : canNav(n.key));
  return (
    <aside className={'sidebar' + (open ? ' open' : '')} style={sb.root}>
      <div style={sb.brand}>
        <img src="assets/mark-cream.png" alt="Fênix" style={{height:32}}/>
        <div>
          <div style={sb.brandName}>GRUPO&nbsp;FÊNIX</div>
        </div>
      </div>

      <nav style={sb.nav}>
        <div style={sb.navLabel}>Operação</div>
        {nav.map(n => {
          if (n.submenu) {
            const childKeys = n.submenu.map(s=>s.key);
            const parentActive = childKeys.includes(active);
            const expanded = expandedMenu === n.key || parentActive;
            return (
              <React.Fragment key={n.key}>
                <button onClick={()=>onToggleMenu&&onToggleMenu(n.key)}
                  style={{...sb.item, ...(parentActive?sb.itemOn:{})}}
                  onMouseEnter={e=>{if(!parentActive)e.currentTarget.style.background='rgba(255,255,255,.06)';}}
                  onMouseLeave={e=>{if(!parentActive)e.currentTarget.style.background='transparent';}}>
                  {parentActive && <span style={sb.activeBar}/>}
                  <Icon name={n.icon} size={19} color={parentActive?'#FD7119':'#9FB0C9'}/>
                  <span style={{color:parentActive?'#F6E9E0':'#C3D0E2', flex:1}}>{n.label}</span>
                  <Icon name={expanded?'chevronDown':'chevron'} size={15} color={parentActive?'#FD7119':'#7E92AE'}/>
                </button>
                {expanded && n.submenu.map(s => {
                  const son = s.key === active;
                  return (
                    <button key={s.key} onClick={()=>onNav&&onNav(s.key)}
                      style={{...sb.item, ...sb.subItem, ...(son?sb.itemOn:{})}}
                      onMouseEnter={e=>{if(!son)e.currentTarget.style.background='rgba(255,255,255,.06)';}}
                      onMouseLeave={e=>{if(!son)e.currentTarget.style.background='transparent';}}>
                      {son && <span style={sb.activeBar}/>}
                      <Icon name={s.icon} size={18} color={son?'#FD7119':'#9FB0C9'}/>
                      <span style={{color:son?'#F6E9E0':'#C3D0E2'}}>{s.label}</span>
                    </button>
                  );
                })}
              </React.Fragment>
            );
          }
          const on = n.key === active;
          return (
            <button key={n.key} onClick={()=>onNav&&onNav(n.key)}
              style={{...sb.item, ...(on?sb.itemOn:{})}}
              onMouseEnter={e=>{if(!on)e.currentTarget.style.background='rgba(255,255,255,.06)';}}
              onMouseLeave={e=>{if(!on)e.currentTarget.style.background='transparent';}}>
              {on && <span style={sb.activeBar}/>}
              <Icon name={n.icon} size={19} color={on?'#FD7119':'#9FB0C9'}/>
              <span style={{color:on?'#F6E9E0':'#C3D0E2'}}>{n.label}</span>
            </button>
          );
        })}
      </nav>

      <div style={sb.live}>
        <span style={{...sb.liveDot, background:st.dot,
          boxShadow: conn==='live' ? '0 0 0 3px rgba(31,157,107,.25)' : 'none'}}/>
        <div style={{flex:1}}>
          <div style={sb.liveLabel}>{st.label}</div>
          <div style={sb.liveSub}>{st.sub}</div>
        </div>
        {conn==='live'
          ? <Icon name="refresh" size={15} color="#6E83A3"/>
          : <Spinner color={conn==='offline'?'#E0A100':'#9FB0C9'} size={14}/>}
      </div>

      <div style={sb.footer}>
        <div style={sb.acct}>
          <div style={sb.acctAv}>
            {(window.FenixAuth?.user()?.nome || 'AD').slice(0,2).toUpperCase()}
          </div>
          <div style={{minWidth:0, flex:1}}>
            <div style={sb.acctName}>{window.FenixAuth?.user()?.nome || 'Admin'}</div>
            <div style={sb.acctRole}>{window.FenixAuth?.user()?.nivel || ''}</div>
          </div>
          <button onClick={()=>setSenhaModal(true)} title="Trocar minha senha"
            style={{background:'none', border:0, padding:4, cursor:'pointer', display:'flex'}}
            onMouseEnter={e=>{e.currentTarget.firstChild.style.stroke='#FD7119';}}
            onMouseLeave={e=>{e.currentTarget.firstChild.style.stroke='#6E83A3';}}>
            <Icon name="settings" size={17} color="#6E83A3"/>
          </button>
        </div>
      </div>
      {senhaModal && <MinhaSenhaModal onClose={()=>setSenhaModal(false)}/>}
    </aside>
  );
};

const sb = {
  root:{ width:248, flex:'none', background:'var(--fenix-navy)', display:'flex', flexDirection:'column',
    height:'100%', borderRight:'1px solid #0A2348' },
  brand:{ display:'flex', alignItems:'center', gap:11, padding:'22px 20px 20px', borderBottom:'1px solid #0A2348' },
  brandName:{ font:'800 14px/1 var(--font-display)', letterSpacing:'.02em', color:'#F6E9E0' },
  brandSub:{ font:'500 11px/1.2 var(--font-sans)', color:'#7E92AE', marginTop:4 },
  nav:{ display:'flex', flexDirection:'column', gap:2, padding:'14px 12px' },
  navLabel:{ font:'700 10px/1 var(--font-sans)', letterSpacing:'.14em', textTransform:'uppercase', color:'#536684', padding:'4px 12px 10px' },
  item:{ position:'relative', display:'flex', alignItems:'center', gap:12, padding:'10px 12px',
    border:0, background:'transparent', borderRadius:'var(--r-md)', cursor:'pointer',
    font:'600 14px/1 var(--font-sans)', textAlign:'left', transition:'background .15s' },
  itemOn:{ background:'rgba(253,113,25,.12)' },
  activeBar:{ position:'absolute', left:-12, top:8, bottom:8, width:3, borderRadius:3, background:'#FD7119' },
  subItem:{ paddingLeft:34 },   // mesmo tamanho dos itens principais, só recuado (subcategoria)
  live:{ margin:'auto 14px 12px', display:'flex', alignItems:'center', gap:10, padding:'11px 13px',
    background:'#0A2348', borderRadius:'var(--r-md)', border:'1px solid #16315C' },
  liveDot:{ width:8, height:8, borderRadius:'50%', background:'#1F9D6B', boxShadow:'0 0 0 3px rgba(31,157,107,.25)', flex:'none' },
  liveLabel:{ font:'700 12px/1 var(--font-sans)', color:'#E3ECF7' },
  liveSub:{ font:'500 11px/1.3 var(--font-mono)', color:'#7E92AE', marginTop:3 },
  footer:{ borderTop:'1px solid #0A2348', padding:'12px 14px' },
  acct:{ display:'flex', alignItems:'center', gap:11 },
  acctAv:{ width:34, height:34, borderRadius:'50%', background:'#303880', color:'#F6E9E0',
    font:'700 12px/1 var(--font-sans)', display:'flex', alignItems:'center', justifyContent:'center', flex:'none' },
  acctName:{ font:'700 13px/1 var(--font-sans)', color:'#E3ECF7', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' },
  acctRole:{ font:'500 11px/1.3 var(--font-sans)', color:'#7E92AE', marginTop:3 },
};

window.Sidebar = Sidebar;