// js/components/widgets/UsersPanel.jsx
// [Wave v223.27 2026-05-19] Strategy MEDIUM — extraído em 4 widgets + 1 lib.
//
// Estrutura:
//   js/lib/users/calcs.js                    — calcHours/hoursByDay/buildUserStats/fmt
//   js/components/widgets/users/UsersHeader.jsx
//   js/components/widgets/users/UserCard.jsx
//   js/components/widgets/users/UsersLogTable.jsx
//
// regra_validacao_helpers_runtime_quando_ordem_scripts_uncertain — runtime check.
// regra_estender_bloco_refs_fail_loud — bloco agregado (1 mensagem + 1 Sentry).
//
// Deps runtime: ResetPasswordModal, SetMetaModal, EditUserModal, NewUserModal,
//               VendedorActivityCard (todos widgets globals via window).
(function() {
  'use strict';
  const {useState, useMemo, useEffect} = React;

  function UsersPanel({allUsers, activityLog, user, isUserOnline, formatLastSeen, sales, clients, metas, setMetas, metasBase, setMetasBase}){
    const[resetTarget,setResetTarget]=useState(null);
    const[metaTarget,setMetaTarget]=useState(null);
    const[editTarget,setEditTarget]=useState(null);
    const[showNew,setShowNew]=useState(false);
    const[filter,setFilter]=useState('todos');
    const[search,setSearch]=useState('');
    // [Wave 19 v224.0] state novos
    const[notesTarget,setNotesTarget]=useState(null);
    const[selectedIds,setSelectedIds]=useState(new Set());
    const[showHeatmap,setShowHeatmap]=useState(false);
    // [Wave 19.5 v224.1] view mode (detalhado/compacto) persistido
    const[viewMode,setViewMode]=useState(()=>{
      try { return localStorage.getItem('znx_users_view') || 'detalhado'; } catch(_){ return 'detalhado'; }
    });
    useEffect(()=>{ try { localStorage.setItem('znx_users_view', viewMode); } catch(_){} }, [viewMode]);

    const currentMonth = (new Date()).toISOString().slice(0,7);

    // [regra_validacao_helpers_runtime] runtime check lib + widgets
    const _lib = window.ZNX?.lib?.users;
    const _UsersHeader = window.ZNX?.widgets?.users?.UsersHeader;
    const _UserCard = window.ZNX?.widgets?.users?.UserCard;
    const _UsersLogTable = window.ZNX?.widgets?.users?.UsersLogTable;

    // Bloco refs+fail-loud agregado (regra_estender_bloco_refs_fail_loud)
    if(!_lib || !_UsersHeader || !_UserCard || !_UsersLogTable){
      const missing = [
        !_lib && 'lib.users',
        !_UsersHeader && 'widgets.users.UsersHeader',
        !_UserCard && 'widgets.users.UserCard',
        !_UsersLogTable && 'widgets.users.UsersLogTable'
      ].filter(Boolean).join(', ');
      if (typeof window.znxCaptureRpcError === 'function') {
        window.znxCaptureRpcError('UsersPanel_assets_missing', {
          missing,
          hint: 'Verificar js/lib/users/calcs.js + js/components/widgets/users/*.jsx carregaram'
        });
      }
      return <div style={{padding:20,color:'#DC2626',background:'#FEE2E2',borderRadius:8,margin:16}}>⚠️ Widget Usuários não carregou ({missing}). Recarregue a página.</div>;
    }

    const userStats = useMemo(()=>_lib.buildUserStats({allUsers, activityLog, isUserOnline, sales, metas, metasBase, currentMonth}),
      [allUsers, activityLog, isUserOnline, sales, metas, metasBase, currentMonth]);

    // [Wave 19 v224.0] Enrich userStats com KPIs estendidos + carga clientes + sparkline 6m + diasSemLogin
    const userStatsEnriched = useMemo(()=>{
      const out = {...userStats};
      (allUsers||[]).forEach(u=>{
        const s = {...(out[u.username] || {})};
        s.kpis = _lib.calcKpisExtendidos ? _lib.calcKpisExtendidos(u.name, sales, currentMonth) : {avgTicket:0,vendasPorDia:0,nfRate:0};
        s.cargaClientes = _lib.calcCargaClientes ? _lib.calcCargaClientes(u.name, clients || []) : {total:0,ativos30d:0};
        s.metaSparkline6m = u.role==='vendedor' ? (_lib.calcMetaSparkline6m ? _lib.calcMetaSparkline6m(u.name, sales, metas) : []) : [];
        s.diasSemLogin = _lib.calcDiasSemLogin ? _lib.calcDiasSemLogin(s.status?.lastSeen) : Infinity;
        out[u.username] = s;
      });
      return out;
    }, [userStats, allUsers, sales, clients, currentMonth, metas]);

    // [Wave 19 v224.0 F5] Toggle férias rápido
    async function handleToggleFerias(target){
      if (!window.sb) return;
      const newValue = target.is_on_duty === false; // toggle invertido
      try {
        const { error } = await window.sb.from('app_users').update({ is_on_duty: newValue }).eq('id', target.id);
        if (error) throw error;
        if (window.toast) window.toast(newValue ? '✅ '+(target.name||target.username)+' marcado como ATIVO' : '🏖️ '+(target.name||target.username)+' em férias/folga');
        if (window.Sentry) window.Sentry.addBreadcrumb({ category: 'users', message: 'toggle_ferias '+target.username+' → on_duty='+newValue, level: 'info' });
      } catch(e) {
        console.error('[Wave 19 v224.0] toggle férias fail:', e && e.message);
        if (window.toast) window.toast('❌ Erro ao alterar férias: '+(e && e.message));
        if (window.Sentry) window.Sentry.captureException(e, { tags: { ctx: 'toggle_ferias' } });
      }
    }

    // [Wave 19 v224.0 F11] Bulk update users
    async function handleBulkAction(action){
      if (!window.sb || selectedIds.size === 0) return;
      const idemKey = (window.crypto?.randomUUID?.()) || (Date.now()+'-'+Math.random());
      try {
        const { data, error } = await window.sb.rpc('bulk_update_users_v1', {
          payload: {
            user_ids: Array.from(selectedIds),
            action: action,
            idempotency_key: idemKey
          }
        });
        if (error) throw error;
        const count = (data && data.updated_count) || 0;
        if (window.toast) window.toast('✅ Bulk '+action+': '+count+' user(s) atualizado(s)');
        setSelectedIds(new Set());
      } catch(e) {
        console.error('[Wave 19 v224.0] bulk fail:', e && e.message);
        if (window.toast) window.toast('❌ Erro bulk: '+(e && e.message));
        if (window.Sentry) window.Sentry.captureException(e, { tags: { ctx: 'bulk_update_users' } });
      }
    }

    // [Wave 19 v224.0 F11] Export CSV
    function exportCsv(){
      const rows = [['username','nome','role','ativo','online','dias_sem_login','vendas_mes','total_mes','meta','pct_meta','comissao','ticket_medio','clientes_ativos_30d','em_ferias','admin_notes']];
      (allUsers||[]).forEach(u=>{
        const s = userStatsEnriched[u.username] || {};
        rows.push([
          u.username, u.name||'', u.role||'',
          u.active!==false ? 'sim' : 'nao',
          s.status?.online ? 'sim' : 'nao',
          s.diasSemLogin === Infinity ? '∞' : s.diasSemLogin,
          s.vendasMes || 0, s.totalVendasMes || 0, s.metaValor || 0,
          s.pctMeta!=null ? s.pctMeta.toFixed(0) : 0,
          s.comissaoBrl!=null ? s.comissaoBrl.toFixed(2) : 0,
          s.kpis?.avgTicket!=null ? s.kpis.avgTicket.toFixed(2) : 0,
          s.cargaClientes?.ativos30d || 0,
          u.is_on_duty === false ? 'sim' : 'nao',
          (u.admin_notes || '').replace(/"/g,'""').replace(/[\r\n]+/g,' ')
        ]);
      });
      const csv = rows.map(r=>r.map(c=>'"'+c+'"').join(',')).join('\n');
      const blob = new Blob([''+csv], {type:'text/csv;charset=utf-8'});
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = 'zaynex_users_'+new Date().toISOString().slice(0,10)+'.csv';
      a.click(); URL.revokeObjectURL(url);
      if (window.toast) window.toast('📤 CSV exportado · '+(allUsers||[]).length+' users');
    }

    const filteredUsers = useMemo(()=>{
      const lower = (search||'').toLowerCase().trim();
      return (allUsers||[]).filter(u=>{
        if(filter==='online' && !userStats[u.username]?.status?.online) return false;
        if(filter==='inativos' && u.active!==false) return false;
        if(filter!=='todos' && filter!=='online' && filter!=='inativos' && u.role!==filter) return false;
        if(lower && !((u.name||'').toLowerCase().includes(lower) || (u.username||'').toLowerCase().includes(lower))) return false;
        return true;
      });
    }, [allUsers, userStats, filter, search]);

    const summary = useMemo(()=>{
      const total = (allUsers||[]).length;
      const ativos = (allUsers||[]).filter(u=>u.active!==false).length;
      const online = Object.values(userStats).filter(s=>s.status?.online).length;
      const trabalhandoHoje = Object.values(userStats).filter(s=>s.firstLoginToday).length;
      const totalHorasHoje = Object.values(userStats).reduce((a,s)=>a+s.horasHoje,0);
      return {total, ativos, online, trabalhandoHoje, totalHorasHoje};
    }, [allUsers, userStats]);

    if(user?.role !== 'admin'){
      return <div className="page-content"><p>Acesso restrito ao administrador.</p></div>;
    }

    const logs = (activityLog||[]).filter(e=>e.action!=='heartbeat').slice(0,200);

    return(
      <div className="page-content">
        <_UsersHeader
          summary={summary}
          search={search}
          setSearch={setSearch}
          filter={filter}
          setFilter={setFilter}
          onNewUser={()=>setShowNew(true)}
          onExportCsv={exportCsv}
          onToggleHeatmap={()=>setShowHeatmap(v=>!v)}
          viewMode={viewMode}
          setViewMode={setViewMode}
          fmtHoras={_lib.fmtHoras}
        />

        {/* [Wave 19 v224.0 F11] Bulk actions toolbar sticky */}
        {selectedIds.size > 0 && (
          <div style={{position:'sticky',top:0,zIndex:50,background:'#1F2937',color:'#FFFFFF',padding:'10px 16px',borderRadius:8,marginBottom:12,display:'flex',justifyContent:'space-between',alignItems:'center',boxShadow:'0 2px 8px rgba(0,0,0,0.15)'}}>
            <div style={{fontSize:13,fontWeight:600}}>📋 {selectedIds.size} selecionado{selectedIds.size!==1?'s':''}</div>
            <div style={{display:'flex',gap:8}}>
              <button onClick={()=>handleBulkAction('activate')} style={{padding:'5px 12px',background:'#16A34A',color:'#FFFFFF',border:'none',borderRadius:5,fontSize:12,fontWeight:600,cursor:'pointer'}}>✅ Ativar</button>
              <button onClick={()=>handleBulkAction('deactivate')} style={{padding:'5px 12px',background:'#DC2626',color:'#FFFFFF',border:'none',borderRadius:5,fontSize:12,fontWeight:600,cursor:'pointer'}}>🚫 Desativar</button>
              <button onClick={()=>setSelectedIds(new Set())} style={{padding:'5px 12px',background:'transparent',color:'#9CA3AF',border:'1px solid #6B7280',borderRadius:5,fontSize:12,cursor:'pointer'}}>Cancelar</button>
            </div>
          </div>
        )}

        {/* [Wave 19 v224.0 F3] Heatmap presença toggleable */}
        {showHeatmap && window.ZNX?.widgets?.users?.PresenceHeatmap && (
          React.createElement(window.ZNX.widgets.users.PresenceHeatmap, {allUsers, activityLog})
        )}

        {/* [Wave 19.5 v224.1] View toggle detalhado (cards) vs compacto (tabela) */}
        {viewMode === 'detalhado' ? (
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(360px,1fr))',gap:14,marginBottom:24}}>
            {filteredUsers.map(u=>{
              const isSelected = selectedIds.has(u.id);
              return (
                <div key={u.username} style={{position:'relative'}}>
                  {/* Checkbox bulk select (top-left pra não colidir com action menu ⋯) */}
                  <input type="checkbox" checked={isSelected} onChange={e=>{
                    const next = new Set(selectedIds);
                    if (e.target.checked) next.add(u.id); else next.delete(u.id);
                    setSelectedIds(next);
                  }} title="Selecionar pra bulk action" style={{position:'absolute',top:10,left:10,zIndex:5,width:16,height:16,cursor:'pointer'}}/>
                  <_UserCard
                    u={u}
                    s={userStatsEnriched[u.username] || {}}
                    user={user}
                    onMeta={setMetaTarget}
                    onEdit={setEditTarget}
                    onReset={setResetTarget}
                    onToggleFerias={handleToggleFerias}
                    onNotes={setNotesTarget}
                    fmtHora={_lib.fmtHora}
                    fmtHoras={_lib.fmtHoras}
                    roleColor={_lib.roleColor}
                    fmt={window.fmt}
                    formatLastSeen={formatLastSeen}
                  />
                </div>
              );
            })}
          </div>
        ) : (
          <CompactView
            users={filteredUsers}
            stats={userStatsEnriched}
            selectedIds={selectedIds}
            setSelectedIds={setSelectedIds}
            onOpen={u=>setEditTarget(u)}
            onToggleFerias={handleToggleFerias}
            onNotes={setNotesTarget}
            roleColor={_lib.roleColor}
            fmtHoras={_lib.fmtHoras}
            fmt={window.fmt}
          />
        )}

        {filteredUsers.length===0 && (
          <div className="card" style={{padding:40,textAlign:'center',color:'#9CA3AF',fontSize:13,marginBottom:24}}>
            Nenhum usuário corresponde aos filtros.
          </div>
        )}

        <VendedorActivityCard allUsers={allUsers} user={user}/>

        <_UsersLogTable logs={logs}/>

        {resetTarget && <ResetPasswordModal user={user} target={resetTarget} onClose={()=>setResetTarget(null)}/>}
        {metaTarget && <SetMetaModal target={metaTarget} metas={metas} setMetas={setMetas} metasBase={metasBase} setMetasBase={setMetasBase} sales={sales} currentMonth={currentMonth} onClose={()=>setMetaTarget(null)}/>}
        {editTarget && <EditUserModal user={user} target={editTarget} onClose={()=>setEditTarget(null)}/>}
        {showNew && <NewUserModal onClose={()=>setShowNew(false)}/>}
        {/* [Wave 19 v224.0 F8] Modal Notas admin */}
        {notesTarget && window.ZNX?.widgets?.users?.AdminNotesModal && (
          React.createElement(window.ZNX.widgets.users.AdminNotesModal, {user, target: notesTarget, onClose: ()=>setNotesTarget(null)})
        )}
      </div>
    );
  }

  // [Wave 19.5 v224.1] CompactView — tabela alternativa ao grid de cards
  function CompactView({users, stats, selectedIds, setSelectedIds, onOpen, onToggleFerias, onNotes, roleColor, fmtHoras, fmt}){
    function toggleSel(id){
      const next = new Set(selectedIds);
      if(next.has(id)) next.delete(id); else next.add(id);
      setSelectedIds(next);
    }
    return (
      <div className="card" style={{padding:0,marginBottom:24,overflow:'hidden'}}>
        <div style={{overflowX:'auto'}}>
          <table style={{width:'100%',fontSize:12,borderCollapse:'collapse'}}>
            <thead>
              <tr style={{background:'#F9FAFB',borderBottom:'1px solid #E5E7EB'}}>
                <th style={{padding:'10px 8px',width:32}}>
                  <input type="checkbox"
                    onChange={e=>setSelectedIds(e.target.checked?new Set(users.map(u=>u.id)):new Set())}
                    checked={users.length>0 && selectedIds.size===users.length}/>
                </th>
                <th style={{padding:'10px 12px',textAlign:'left',color:'#374151',fontWeight:600}}>Nome</th>
                <th style={{padding:'10px 8px',color:'#374151',fontWeight:600,textAlign:'left'}}>Role</th>
                <th style={{padding:'10px 8px',color:'#374151',fontWeight:600,textAlign:'left'}}>Status</th>
                <th style={{padding:'10px 8px',color:'#374151',fontWeight:600,textAlign:'right'}}>Vendas mês</th>
                <th style={{padding:'10px 8px',color:'#374151',fontWeight:600,textAlign:'right'}}>% Meta</th>
                <th style={{padding:'10px 8px',color:'#374151',fontWeight:600,textAlign:'left'}}>Horas hoje</th>
                <th style={{padding:'10px 8px',color:'#374151',fontWeight:600,textAlign:'left'}}>Ações</th>
              </tr>
            </thead>
            <tbody>
              {users.map(u=>{
                const s = stats[u.username] || {};
                const onFerias = u.is_on_duty===false;
                const isOnline = s.status?.online;
                const dias = s.diasSemLogin != null ? s.diasSemLogin : Infinity;
                const alertaCritico = !onFerias && dias>=3 && dias!==Infinity;
                const statusColor = onFerias?'#D97706':alertaCritico?'#DC2626':isOnline?'#16A34A':'#9CA3AF';
                const statusText = onFerias?'🏖️ Férias':alertaCritico?('🚨 '+dias+'d'):isOnline?'🟢 Online':s.firstLoginToday?'⏱ Trabalhou':'⚪ Offline';
                return (
                  <tr key={u.username} style={{borderBottom:'1px solid #F3F4F6',borderLeft:'3px solid '+statusColor,opacity:u.active===false?0.5:1}}>
                    <td style={{padding:'8px',textAlign:'center'}}>
                      <input type="checkbox" checked={selectedIds.has(u.id)} onChange={()=>toggleSel(u.id)}/>
                    </td>
                    <td style={{padding:'8px 12px',fontWeight:600,color:'#111827',cursor:'pointer'}} onClick={()=>onOpen(u)}>
                      {u.name||u.username}
                      {u.admin_notes && <span title="Tem notas admin" style={{marginLeft:6,color:'#2563EB'}}>📝</span>}
                    </td>
                    <td style={{padding:'8px',color:roleColor(u.role),fontWeight:600,textTransform:'uppercase',fontSize:10}}>{u.role}</td>
                    <td style={{padding:'8px',color:statusColor,fontWeight:600,fontSize:11}}>{statusText}</td>
                    <td style={{padding:'8px',textAlign:'right',fontWeight:600,color:'#1F2937'}}>{u.role==='vendedor'?(typeof fmt==='function'?fmt(s.totalVendasMes||0):'R$ '+(s.totalVendasMes||0).toFixed(0)):'—'}</td>
                    <td style={{padding:'8px',textAlign:'right',color:s.atingiuMeta?'#16A34A':'#6B7280',fontWeight:600}}>{u.role==='vendedor'?(s.metaValor>0?(s.pctMeta.toFixed(0)+'%'):'—'):'—'}</td>
                    <td style={{padding:'8px',color:'#6B7280'}}>{fmtHoras(s.horasHoje||0)}</td>
                    <td style={{padding:'8px'}}>
                      <div style={{display:'flex',gap:4}}>
                        {onToggleFerias && (
                          <button onClick={()=>onToggleFerias(u)} title="Toggle férias" style={{background:'transparent',border:'1px solid #D97706',color:'#D97706',padding:'2px 6px',borderRadius:4,fontSize:11,cursor:'pointer'}}>{onFerias?'✅':'🏖️'}</button>
                        )}
                        {onNotes && (
                          <button onClick={()=>onNotes(u)} title="Notas admin" style={{background:'transparent',border:'1px solid #1D4ED8',color:'#1D4ED8',padding:'2px 6px',borderRadius:4,fontSize:11,cursor:'pointer'}}>📝</button>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.UsersPanel = UsersPanel;
  window.UsersPanel = UsersPanel;
})();