// js/components/widgets/app/TopBar.jsx
// [Wave 5 MEDIUM 2026-05-16] Extraído de App.jsx L1268-1312 — refactor zero-lógica.
// Padrão: IIFE + window.ZNX.widgets.app.TopBar namespace + props injection.
//
// Header sticky topo da app — contém:
// - RaceBarVendedor (gate role==='vendedor', acesso via window pra evitar prop drilling)
// - ApprovalBell (typeof check global)
// - Sync chip (online/syncing/offline/connecting)
// - Version chip (ZNX_SYSTEM_VERSION global)
// - OfflineIndicator (window check)
// - User avatar + name + role
// - Perfil button → setPage('perfil')
// - Logout button → logout()
//
// Props (validados FASE 1.5 = 8 props):
//   currentUser: object — usa role/name pra gate + avatar/info
//   metas: object — passa pra RaceBarVendedor
//   metasBase: object — passa pra RaceBarVendedor
//   sales: array — passa pra RaceBarVendedor
//   clients: array — passa pra ApprovalBell
//   syncStatus: string — 'online'|'syncing'|'offline'|'connecting'
//   setPage: setter — botão Perfil
//   logout: fn — botão Sair
//
// Deps runtime globals: RaceBarVendedor (window.ZNX.widgets.app.RaceBarVendedor),
// ApprovalBell (typeof check), ZNX_SYSTEM_VERSION (global), OfflineIndicator (window check),
// Icon (global componente).
(function() {
  'use strict';

  function TopBar({currentUser, metas, metasBase, sales, clients, syncStatus, setPage, logout}){
    const RaceBarVendedor = window.ZNX?.widgets?.app?.RaceBarVendedor;
    // [RG7 ONDA-N3 v218.16] OfflineIndicator carregado via window — usar variável local pra JSX limpo
    const OfflineIndicatorComp=typeof window.OfflineIndicator==='function'?window.OfflineIndicator:null;
    return (
      <div style={{background:'#fff',borderBottom:'1px solid #E4E7EC',display:'flex',alignItems:'center',padding:'0 28px',gap:12,position:'sticky',top:0,zIndex:100,minHeight:56}}>
        {/* [Wave 5 MINI 2026-05-17] Racing bar vendedor extraído pra widgets/app/RaceBarVendedor.jsx */}
        {currentUser.role==='vendedor' && RaceBarVendedor && (
          <RaceBarVendedor
            currentUser={currentUser}
            metas={metas}
            metasBase={metasBase}
            sales={sales}
          />
        )}
        <div style={{display:'flex',alignItems:'center',gap:8,marginLeft:'auto',flexShrink:0}}>
          {/* [Onda 4b sistema 4] Sino de aprovações */}
          {typeof ApprovalBell!=='undefined'&&<ApprovalBell user={currentUser} clients={clients}/>}
          {/* [v224.126 NUCLEAR] sino de notificações de ORC (workflow status) */}
          {window.ZNX&&window.ZNX.widgets&&window.ZNX.widgets.quotes&&window.ZNX.widgets.quotes.QuoteNotificationBell&&React.createElement(window.ZNX.widgets.quotes.QuoteNotificationBell,{user:currentUser})}
          {/* Fase 5 — Indicador de sincronização */}
          <div style={{display:'flex',alignItems:'center',gap:6,padding:'4px 10px',background:'#F8FAFC',border:'1px solid #E4E7EC',borderRadius:12,fontSize:11,fontWeight:600,marginRight:4}} title="Status de sincronização com outros usuários">
            <span style={{width:8,height:8,borderRadius:'50%',background:syncStatus==='online'?'#16A34A':syncStatus==='syncing'?'#F59E0B':syncStatus==='offline'?'#DC2626':'#9CA3AF',animation:syncStatus==='syncing'?'metaPulse 0.8s ease-in-out infinite':'none',display:'inline-block'}}/>
            <span style={{color:'#374151'}}>{syncStatus==='online'?'Sincronizado':syncStatus==='syncing'?'Sincronizando…':syncStatus==='offline'?'Offline':'Conectando…'}</span>
          </div>
          {/* [VERSIONING v104 20260507] Chip versão ao lado do Sincronizado.
              [v218.7.1 ROLLBACK] Versão dinâmica com useState dentro de IIFE quebrava
              "Rendered more hooks than during the previous render" → tela travada.
              Voltado pro chip estático. Banner amarelo (que NÃO usa hooks) continua
              ativo no index.html via _znxCheckServerVersion. */}
          <div style={{display:'flex',alignItems:'center',padding:'4px 10px',background:'linear-gradient(135deg,#FEF9E7,#FFFBEB)',border:'1px solid #C8A95155',borderRadius:12,fontSize:11,fontWeight:700,marginRight:4,color:'#92700A',fontFamily:'ui-monospace, "SF Mono", Menlo, monospace',letterSpacing:'0.4px'}} title="Versão do sistema instalada nesta sessão">
            {ZNX_SYSTEM_VERSION}
          </div>
          {/* [RG7 ONDA-N3 v218.16 20260513] Chip offline queue — invisível quando online + queue=0 */}
          {OfflineIndicatorComp && <div style={{marginRight:4}}><OfflineIndicatorComp /></div>}
          <div style={{display:'flex',alignItems:'center',gap:8,marginRight:4}}>
            <div style={{width:32,height:32,borderRadius:'50%',background:'linear-gradient(135deg,#2563EB,#1B2A4A)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:12,fontWeight:800,color:'#fff',flexShrink:0}}>
              {(currentUser.name||'U').charAt(0).toUpperCase()}
            </div>
            <div>
              <div style={{fontSize:12,fontWeight:700,color:'#1C1C28',lineHeight:1.2}}>{currentUser.name}</div>
              <div style={{fontSize:10,color:'#9CA3AF',textTransform:'capitalize'}}>{currentUser.role}</div>
            </div>
          </div>
          <button onClick={()=>setPage('perfil')} style={{background:'#F8FAFC',border:'1px solid #E4E7EC',borderRadius:8,padding:'6px 12px',fontSize:11,fontWeight:600,color:'#374151',cursor:'pointer',display:'flex',alignItems:'center',gap:5}}>
            👤 Perfil
          </button>
          <button onClick={logout} style={{background:'#FEF2F2',border:'1px solid #FECACA',borderRadius:8,padding:'6px 12px',fontSize:11,fontWeight:600,color:'#DC2626',cursor:'pointer',display:'flex',alignItems:'center',gap:5}}>
            <Icon n="logout" size={11}/> Sair
          </button>
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.app = window.ZNX.widgets.app || {};
  window.ZNX.widgets.app.TopBar = TopBar;
})();