// js/components/widgets/comissao-admin/CommissionAdminKPIs.jsx
// [Wave 36 v224.17 NUCLEAR EXTRACT 2026-05-24] 4 KPI stat cards
// Extract LITERAL ComissaoAdmin L181-202
//
// Props:
//   - totals (obj) — {totalBrutas, totalLiquidas, totalComissao, totalPago, totalAPagar, batendo}
//   - merged (array) — pra count "X vendedoras"
//
// Deps lazy: window.fmtMoney
(function(){
  'use strict';
  function CommissionAdminKPIs(props){
    const fmtMoney = window.fmtMoney;
    if(typeof fmtMoney !== 'function'){
      console.error('[CommissionAdminKPIs] fmtMoney global ausente');
      return null;
    }
    const { totals, merged } = props;
    return (
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(160px, 1fr))',gap:10}}>
        <div className="stat-card" style={{borderLeft:'4px solid #2563EB'}}>
          <div className="stat-label">Vendas líquidas</div>
          <div className="stat-value" style={{color:'#2563EB',fontSize:20}}>{fmtMoney(totals.totalLiquidas)}</div>
          <div style={{fontSize:11,color:'#9CA3AF'}}>base do cálculo</div>
        </div>
        <div className="stat-card" style={{borderLeft:'4px solid #16A34A'}}>
          <div className="stat-label">Bateram meta</div>
          <div className="stat-value" style={{color:'#16A34A',fontSize:20}}>{totals.batendo}/{merged.length}</div>
          <div style={{fontSize:11,color:'#9CA3AF'}}>vendedoras 1%</div>
        </div>
        <div className="stat-card" style={{borderLeft:'4px solid #C8A951'}}>
          <div className="stat-label">Total comissão</div>
          <div className="stat-value" style={{color:'#C8A951',fontSize:20}}>{fmtMoney(totals.totalComissao)}</div>
          <div style={{fontSize:11,color:'#9CA3AF'}}>{(totals.totalLiquidas>0?(totals.totalComissao/totals.totalLiquidas*100):0).toFixed(2)}% do líquido</div>
        </div>
        <div className="stat-card" style={{borderLeft:'4px solid #EA580C'}}>
          <div className="stat-label">A pagar</div>
          <div className="stat-value" style={{color:'#EA580C',fontSize:20}}>{fmtMoney(totals.totalAPagar)}</div>
          <div style={{fontSize:11,color:'#9CA3AF'}}>R$ {totals.totalPago.toFixed(2)} já pago</div>
        </div>
      </div>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets['comissao-admin'] = window.ZNX.widgets['comissao-admin'] || {};
  window.ZNX.widgets['comissao-admin'].CommissionAdminKPIs = CommissionAdminKPIs;
  // [Wave 36 marker v224.17] confirma CommissionAdminKPIs executado
  window.CommissionAdminKPIs_v224_17_wave36 = true;
})();