// js/components/widgets/users/PresenceHeatmap.jsx
// [Wave 19 v224.0 20260522] Heatmap calendário presença admin overview.
// Verde escuro = ≥2 logins · Verde claro = 1 login · Vermelho = faltou
(function(){
  'use strict';
  function PresenceHeatmap({allUsers, activityLog}){
    const today = new Date();
    const monthDays = 30; // últimos 30 dias rolling
    const days = [];
    for (let i = monthDays - 1; i >= 0; i--) {
      const d = new Date(today); d.setDate(d.getDate() - i); d.setHours(0,0,0,0);
      days.push(d);
    }
    // Pra cada user × cada dia: contar logins
    const sellers = (allUsers||[]).filter(function(u){ return u.active !== false && u.role !== 'admin'; }).slice(0, 20); // limit 20

    function getStatusForDay(username, day){
      const dayStart = day.getTime();
      const dayEnd = dayStart + 86400000;
      const logins = (activityLog||[]).filter(function(e){
        return e.username === username
          && e.action === 'login'
          && new Date(e.timestamp).getTime() >= dayStart
          && new Date(e.timestamp).getTime() < dayEnd;
      });
      if (logins.length === 0) return { color: '#FEE2E2', label: 'faltou' };
      if (logins.length >= 2) return { color: '#16A34A', label: logins.length + ' logins' };
      return { color: '#86EFAC', label: '1 login' };
    }

    return (
      <div className="card" style={{padding:14,marginBottom:24}}>
        <div style={{fontSize:13,fontWeight:700,color:'#1B2A4A',marginBottom:10}}>📅 Heatmap Presença · últimos 30 dias</div>
        <div style={{overflow:'auto',maxWidth:'100%'}}>
          <table style={{borderCollapse:'collapse',fontSize:10}}>
            <thead>
              <tr>
                <th style={{textAlign:'left',padding:'4px 8px',color:'#6B7280',fontWeight:600,position:'sticky',left:0,background:'#FFFFFF',minWidth:120}}>Vendedora</th>
                {days.map(function(d,i){
                  return <th key={i} style={{padding:'2px 1px',color:'#9CA3AF',fontWeight:400,minWidth:14,fontSize:8}}>{d.getDate()}</th>;
                })}
              </tr>
            </thead>
            <tbody>
              {sellers.map(function(u){
                return (
                  <tr key={u.username}>
                    <td style={{padding:'4px 8px',color:'#1F2937',fontWeight:600,position:'sticky',left:0,background:'#FFFFFF',whiteSpace:'nowrap',maxWidth:120,overflow:'hidden',textOverflow:'ellipsis'}}>{u.name||u.username}</td>
                    {days.map(function(d,i){
                      const s = getStatusForDay(u.username, d);
                      return <td key={i} title={(u.name||u.username)+' · '+d.toLocaleDateString('pt-BR')+' · '+s.label} style={{padding:0,minWidth:14,height:14,background:s.color,border:'1px solid #FFFFFF',cursor:'help'}}/>;
                    })}
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        <div style={{display:'flex',gap:12,marginTop:8,fontSize:10,color:'#6B7280'}}>
          <span><span style={{display:'inline-block',width:10,height:10,background:'#16A34A',borderRadius:2,verticalAlign:'middle',marginRight:4}}/>Trabalhou (≥2 logins)</span>
          <span><span style={{display:'inline-block',width:10,height:10,background:'#86EFAC',borderRadius:2,verticalAlign:'middle',marginRight:4}}/>Logou 1×</span>
          <span><span style={{display:'inline-block',width:10,height:10,background:'#FEE2E2',borderRadius:2,verticalAlign:'middle',marginRight:4}}/>Faltou</span>
        </div>
      </div>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.users = window.ZNX.widgets.users || {};
  window.ZNX.widgets.users.PresenceHeatmap = PresenceHeatmap;
})();