// js/components/widgets/gastos/DashboardTab.jsx
// [Wave Gastos FULL 2026-05-18 v223.22] Extraído de Gastos.jsx L821-904 (tab dashboard summary).
// Props (12): totalMes, mesAnteriorVal, variacaoVsMesAnt, porCategoria, totalPendente, filter,
//   filtered, ultimos6Meses, maxBar, CAT_COLORS, top5Beneficiarios, fmt.
// Padrão: IIFE + window.ZNX.widgets.gastos.DashboardTab.
(function() {
  'use strict';

  function DashboardTab({
    totalMes, mesAnteriorVal, variacaoVsMesAnt, porCategoria, totalPendente,
    filter, filtered, ultimos6Meses, maxBar, CAT_COLORS, top5Beneficiarios, fmt
  }) {
    return (
      <div>
        {/* Cards comparativo */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:20}}>
          <div className="card" style={{padding:14}}>
            <div style={{fontSize:11,color:'#9CA3AF',textTransform:'uppercase'}}>Mês atual</div>
            <div style={{fontSize:24,fontWeight:800,color:'#DC2626',marginTop:4}}>{fmt(totalMes)}</div>
            <div style={{fontSize:11,color:'#6B7280',marginTop:2}}>{filter.month}</div>
          </div>
          <div className="card" style={{padding:14}}>
            <div style={{fontSize:11,color:'#9CA3AF',textTransform:'uppercase'}}>Mês anterior</div>
            <div style={{fontSize:24,fontWeight:800,color:'#6B7280',marginTop:4}}>{fmt(mesAnteriorVal)}</div>
            <div style={{fontSize:11,color:variacaoVsMesAnt>0?'#DC2626':'#16A34A',marginTop:2,fontWeight:700}}>
              {mesAnteriorVal>0 ? `${variacaoVsMesAnt>0?'📈 +':'📉 '}${variacaoVsMesAnt.toFixed(1)}%` : '—'}
            </div>
          </div>
          <div className="card" style={{padding:14}}>
            <div style={{fontSize:11,color:'#9CA3AF',textTransform:'uppercase'}}>Maior categoria</div>
            <div style={{fontSize:16,fontWeight:700,marginTop:4}}>{porCategoria[0]?.[0] || '—'}</div>
            <div style={{fontSize:14,color:'#7C3AED',fontWeight:700}}>{fmt(porCategoria[0]?.[1] || 0)}</div>
          </div>
          <div className="card" style={{padding:14}}>
            <div style={{fontSize:11,color:'#9CA3AF',textTransform:'uppercase'}}>Pendentes</div>
            <div style={{fontSize:24,fontWeight:800,color:'#EA580C',marginTop:4}}>{fmt(totalPendente)}</div>
            <div style={{fontSize:11,color:'#6B7280',marginTop:2}}>{filtered.filter(g=>g.status==='Pendente').length} a pagar</div>
          </div>
        </div>

        {/* Evolução 6 meses + por categoria */}
        <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:20,marginBottom:20}}>
          <div className="card" style={{padding:18}}>
            <div style={{fontWeight:700,marginBottom:14,color:'#2563EB'}}>📈 Evolução últimos 6 meses</div>
            <div style={{display:'flex',alignItems:'flex-end',gap:10,height:180}}>
              {ultimos6Meses.map(({mes,val})=>{
                const h = val>0 ? Math.max(8, (val/maxBar)*160) : 4;
                const isCurrent = mes===filter.month;
                return(
                  <div key={mes} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:4}}>
                    <div style={{fontSize:10,color:'#6B7280',fontWeight:700}}>{fmt(val)}</div>
                    <div style={{width:'100%',height:h,background:isCurrent?'linear-gradient(180deg,#DC2626,#991B1B)':'linear-gradient(180deg,#7C3AED,#5B21B6)',borderRadius:'4px 4px 0 0',transition:'height .4s'}}/>
                    <div style={{fontSize:10,color:isCurrent?'#DC2626':'#9CA3AF',fontWeight:isCurrent?700:400}}>{mes.slice(5)}/{mes.slice(2,4)}</div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="card" style={{padding:18}}>
            <div style={{fontWeight:700,marginBottom:14,color:'#2563EB'}}>🏷️ Por Categoria ({filter.month})</div>
            {porCategoria.length===0 ? <div style={{color:'#9CA3AF',fontSize:13}}>Sem gastos</div> :
              porCategoria.map(([cat,val])=>{
                const pct = totalMes>0 ? Math.round(val/totalMes*100) : 0;
                const color = CAT_COLORS[cat]||'#607d8b';
                return(
                  <div key={cat} style={{marginBottom:10}}>
                    <div style={{display:'flex',justifyContent:'space-between',fontSize:12,marginBottom:3}}>
                      <span style={{display:'flex',alignItems:'center',gap:6}}><span style={{width:10,height:10,borderRadius:'50%',background:color}}/>{cat}</span>
                      <span style={{fontWeight:700}}>{fmt(val)} <span style={{color:'#9CA3AF',fontSize:10}}>({pct}%)</span></span>
                    </div>
                    <div style={{background:'#E5E7EB',borderRadius:4,height:5}}>
                      <div style={{width:pct+'%',height:'100%',background:color,borderRadius:4,transition:'width .4s'}}/>
                    </div>
                  </div>
                );
              })}
          </div>
        </div>

        {/* Top 5 beneficiários */}
        <div className="card" style={{padding:18}}>
          <div style={{fontWeight:700,marginBottom:14,color:'#2563EB'}}>🏆 Top 5 beneficiários do mês ({filter.month})</div>
          {top5Beneficiarios.length===0 ? <div style={{color:'#9CA3AF',fontSize:13}}>Sem dados</div> :
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              {top5Beneficiarios.map(([nome,val],i)=>(
                <div key={nome+i} style={{display:'flex',alignItems:'center',gap:12,padding:'8px 12px',background:'#F9FAFB',borderRadius:8}}>
                  <span style={{fontSize:18,fontWeight:800,color:'#7C3AED',minWidth:30}}>#{i+1}</span>
                  <span style={{flex:1,fontSize:13,fontWeight:600}}>{nome}</span>
                  <span style={{fontSize:14,fontWeight:700,color:'#DC2626'}}>{fmt(val)}</span>
                </div>
              ))}
            </div>
          }
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.gastos = window.ZNX.widgets.gastos || {};
  window.ZNX.widgets.gastos.DashboardTab = DashboardTab;
})();