// js/components/widgets/users/UsersHeader.jsx
// [Wave v223.27 2026-05-19] Header search+filter+button extraído de UsersPanel.
// [Wave 19.5 v224.1 2026-05-22] UPGRADE: stats hero · filter chips · view toggle
(function(){
  'use strict';
  function UsersHeader({summary, search, setSearch, filter, setFilter, onNewUser, onExportCsv, onToggleHeatmap, viewMode, setViewMode, fmtHoras}){
    const filterOptions = [
      {value:'todos',label:'Todos',color:'#6B7280'},
      {value:'vendedor',label:'Vendedores',color:'#2563EB'},
      {value:'admin',label:'Admins',color:'#7C3AED'},
      {value:'financeiro',label:'Financeiro',color:'#16A34A'},
      {value:'estoquista',label:'Estoquista',color:'#EA580C'},
      {value:'online',label:'🟢 Online',color:'#16A34A'},
      {value:'inativos',label:'🚫 Inativos',color:'#DC2626'}
    ];

    return (
      <div style={{marginBottom:20}}>
        {/* Linha 1: Título + Summary + Actions */}
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:14,flexWrap:'wrap',gap:12}}>
          <div>
            <h2 style={{margin:0,fontSize:22,color:'#111827',fontWeight:800}}>👥 Equipe ZAYNEX</h2>
            <div style={{fontSize:12,color:'#6B7280',marginTop:4,display:'flex',gap:14,flexWrap:'wrap'}}>
              <span><strong style={{color:'#111827'}}>{summary.ativos}/{summary.total}</strong> ativos</span>
              <span>🟢 <strong style={{color:'#16A34A'}}>{summary.online}</strong> online</span>
              <span>⏱ <strong style={{color:'#2563EB'}}>{summary.trabalhandoHoje}</strong> trabalhando hoje</span>
              <span>📊 <strong>{fmtHoras(summary.totalHorasHoje)}</strong> totais</span>
            </div>
          </div>
          <div style={{display:'flex',gap:6,alignItems:'center'}}>
            {onExportCsv && <button onClick={onExportCsv} title="Exportar CSV" style={btnSecondary('#6B7280')}>📤 CSV</button>}
            {onToggleHeatmap && <button onClick={onToggleHeatmap} title="Heatmap presença" style={btnSecondary('#7C3AED')}>📅 Heatmap</button>}
            <button onClick={onNewUser} style={{padding:'8px 16px',background:'#16A34A',color:'#FFFFFF',border:'none',borderRadius:6,fontSize:13,fontWeight:700,cursor:'pointer'}}>+ Novo usuário</button>
          </div>
        </div>

        {/* Linha 2: Search + view toggle */}
        <div style={{display:'flex',gap:10,alignItems:'center',marginBottom:12,flexWrap:'wrap'}}>
          <input type="text" placeholder="🔍 buscar nome ou usuário..." value={search} onChange={e=>setSearch(e.target.value)} style={{flex:1,minWidth:220,padding:'8px 14px',border:'1px solid #D1D5DB',borderRadius:8,fontSize:13}}/>
          {setViewMode && (
            <div style={{display:'flex',background:'#F3F4F6',borderRadius:8,padding:3,gap:2}}>
              <button onClick={()=>setViewMode('detalhado')} style={{padding:'6px 12px',border:'none',background:viewMode==='detalhado'?'#FFFFFF':'transparent',color:viewMode==='detalhado'?'#111827':'#6B7280',borderRadius:6,fontSize:12,fontWeight:600,cursor:'pointer',boxShadow:viewMode==='detalhado'?'0 1px 2px rgba(0,0,0,0.08)':'none'}}>🃏 Cards</button>
              <button onClick={()=>setViewMode('compacto')} style={{padding:'6px 12px',border:'none',background:viewMode==='compacto'?'#FFFFFF':'transparent',color:viewMode==='compacto'?'#111827':'#6B7280',borderRadius:6,fontSize:12,fontWeight:600,cursor:'pointer',boxShadow:viewMode==='compacto'?'0 1px 2px rgba(0,0,0,0.08)':'none'}}>📋 Tabela</button>
            </div>
          )}
        </div>

        {/* Linha 3: Filter chips */}
        <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
          {filterOptions.map(opt=>(
            <button key={opt.value} onClick={()=>setFilter(opt.value)} style={{
              padding:'5px 12px',
              background:filter===opt.value?opt.color:'#FFFFFF',
              color:filter===opt.value?'#FFFFFF':opt.color,
              border:'1px solid '+opt.color+'44',
              borderRadius:20,
              fontSize:11,fontWeight:600,cursor:'pointer',
              transition:'all 0.15s'
            }}>{opt.label}</button>
          ))}
        </div>
      </div>
    );
  }

  function btnSecondary(color){
    return {
      padding:'8px 14px',background:'#FFFFFF',color:color,
      border:'1px solid '+color+'44',borderRadius:6,
      fontSize:12,fontWeight:600,cursor:'pointer'
    };
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.users = window.ZNX.widgets.users || {};
  window.ZNX.widgets.users.UsersHeader = UsersHeader;
})();