// js/components/widgets/VendaKPIsCards.jsx
// [Wave 15 v223.40 20260520] Extraído de VendaTimeline.jsx L233-270
// Grid 4-5 KPI cards (Total Líquido, Desconto, Lucro, Pagamento, Credit)
// Privacy: vendedor NÃO vê stat card "Lucro"
//
// Props: sale, kpis ({itemsCount, bruto, liquido, desconto, lucro, margem, credit}), user
// Deps runtime: window.fmtMoney (ou window.fmt fallback)
(function(){
  'use strict';

  function VendaKPIsCards(props){
    const sale = props.sale;
    const kpis = props.kpis || {};
    const user = props.user;
    const fmtMoney = typeof window.fmtMoney === 'function' ? window.fmtMoney
                   : typeof window.fmt === 'function' ? window.fmt
                   : function(v){ return 'R$ '+Number(v||0).toFixed(2); };

    if (!sale) return null;
    // Defensive: kpis pode chegar parcial em render inicial
    const itemsCount = kpis.itemsCount || 0;
    const liquido = kpis.liquido || 0;
    const desconto = kpis.desconto || 0;
    const bruto = kpis.bruto || 0;
    const lucro = kpis.lucro || 0;
    const margem = kpis.margem || 0;
    const credit = kpis.credit || 0;

    return (
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(160px, 1fr))',gap:12,marginBottom:18}}>
        <div className="stat-card">
          <div className="stat-label">Total Líquido</div>
          <div className="stat-value gold">{fmtMoney(liquido)}</div>
          <div style={{fontSize:11,color:'#6B7280'}}>{itemsCount} item{itemsCount===1?'':'s'}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Desconto</div>
          <div className="stat-value" style={{color:desconto>0?'#EA580C':'#9CA3AF'}}>
            {fmtMoney(desconto)}
          </div>
          <div style={{fontSize:11,color:'#6B7280'}}>
            {bruto>0 ? ((desconto/bruto*100).toFixed(1)+'%') : '0%'} do bruto
          </div>
        </div>
        {user && user.role !== 'vendedor' && (
          <div className="stat-card">
            <div className="stat-label">Lucro</div>
            <div className="stat-value" style={{color:lucro>0?'#16A34A':'#DC2626'}}>{fmtMoney(lucro)}</div>
            <div style={{fontSize:11,color:'#6B7280'}}>Margem: {margem.toFixed(1)}%</div>
          </div>
        )}
        <div className="stat-card">
          <div className="stat-label">Pagamento</div>
          <div className="stat-value" style={{fontSize:18,color:sale.paymentStatus==='Pago'?'#16A34A':'#EA580C'}}>
            {sale.paymentStatus || '—'}
          </div>
          <div style={{fontSize:11,color:'#6B7280'}}>{sale.paymentMethod || '—'}</div>
        </div>
        {credit > 0 && (
          <div className="stat-card" style={{borderLeft:'4px solid #2563EB'}}>
            <div className="stat-label">Crédito Aplicado</div>
            <div className="stat-value" style={{color:'#2563EB'}}>{fmtMoney(credit)}</div>
            <div style={{fontSize:11,color:'#6B7280'}}>desconto do cliente</div>
          </div>
        )}
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.VendaKPIsCards = VendaKPIsCards;
  window.VendaKPIsCards = VendaKPIsCards;
})();