// js/components/widgets/pagamentos/PagamentosStatsCards.jsx
// [Wave 34 v224.15 NUCLEAR EXTRACT 2026-05-24] 4 stat cards + breakdown porTipo
// Extract LITERAL Pagamentos.jsx L163-195
//
// Props:
//   - totalGeral, totalPago, totalPendente (numbers)
//   - itemCount (number) — filtered.length
//   - porTipo (array) — [[tipo, valor], ...] sorted desc
//
// Deps lazy: window.fmt, window.PAGAMENTO_COLORS (global index.html L572)
(function(){
  'use strict';
  function PagamentosStatsCards(props){
    const fmt = window.fmt;
    const PAGAMENTO_COLORS = window.PAGAMENTO_COLORS || {};
    const { totalGeral, totalPago, totalPendente, itemCount, porTipo } = props;
    const cards = [
      {label:'Total do Período', value:totalGeral, color:'#374151', icon:'💳'},
      {label:'Pago',             value:totalPago,   color:'#16A34A', icon:'✅'},
      {label:'Pendente',         value:totalPendente, color:'#2563EB', icon:'⏳'},
      {label:'Itens',            value:itemCount,   color:'#2563EB', icon:'📋', isCount:true},
    ];
    return (
      <React.Fragment>
        {/* Summary [LITERAL L163-176] */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:16,marginBottom:24}}>
          {cards.map(function(c){
            return (
              <div key={c.label} className="stat-card">
                <div style={{fontSize:22,marginBottom:4}}>{c.icon}</div>
                <div className="stat-value" style={{color:c.color,fontSize:22}}>{c.isCount?c.value:fmt(c.value)}</div>
                <div className="stat-label">{c.label}</div>
              </div>
            );
          })}
        </div>

        {/* Type breakdown [LITERAL L179-195] */}
        {porTipo.length>0 && (
          <div className="card" style={{marginBottom:20,padding:'16px 20px'}}>
            <div style={{fontWeight:600,marginBottom:12,fontSize:14}}>Por Destinatário / Tipo</div>
            <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
              {porTipo.map(function(arr){
                const tipo = arr[0], val = arr[1];
                const color = PAGAMENTO_COLORS[tipo] || '#607d8b';
                return (
                  <div key={tipo} style={{background:'#F8FAFB',border:'1px solid '+color+'44',borderRadius:8,padding:'10px 16px',textAlign:'center',minWidth:120}}>
                    <div style={{fontSize:11,color:color,fontWeight:600,marginBottom:4}}>{tipo}</div>
                    <div style={{fontSize:16,fontWeight:700,color:'#374151'}}>{fmt(val)}</div>
                    <div style={{fontSize:10,color:'#6B7280'}}>{totalGeral>0?Math.round(val/totalGeral*100):0}%</div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </React.Fragment>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.pagamentos = window.ZNX.widgets.pagamentos || {};
  window.ZNX.widgets.pagamentos.PagamentosStatsCards = PagamentosStatsCards;
  // [Wave 34 marker v224.15] confirma PagamentosStatsCards executado
  window.PagamentosStatsCards_v224_15_wave34 = true;
})();