// js/components/widgets/vendas/SalesCardsBar.jsx
// [Wave 26 v224.7 NUCLEAR] Banner faixa fórmula + 7 cards faturamento (HOJE + MÊS · UX honest)
// Extraído de Vendas.jsx L457-525 (literal · zero mudança lógica · Wave 18.5 v223.46/47)
(function(){
  'use strict';

  function SalesCardsBar(props){
    const fmt = window.fmt || function(v){return 'R$ '+Number(v||0).toFixed(2);};
    const {cardsData, userCanSeeCards} = props;
    if(!userCanSeeCards || !cardsData) return null;
    const {
      _periodLabel, _periodSubLabel, _isToday,
      dailyRevenueV, monthRevenueV,
      dailyPixV, dailyCashV, dailyCreditAppliedV, dailyNFTaxV,
      monthPixV, monthCashV, monthCreditAppliedV, monthNFTaxV,
      dailyDiscountV, dailyVendasTotalBrutoV, monthVendasTotalBrutoV,
      todaySalesV, monthSalesV
    } = cardsData;

    return (
      <>
        {/* Faixa fórmula visual discreta (L458-471) */}
        <div style={{fontSize:11,color:'#6B7280',padding:'8px 14px',marginBottom:10,background:'#F9FAFB',border:'1px solid #E5E7EB',borderRadius:8,fontFamily:'monospace',display:'flex',gap:8,flexWrap:'wrap',justifyContent:'center'}}>
          <span><strong style={{color:'#1F2937'}}>Vendas Total</strong> {fmt(dailyVendasTotalBrutoV)}</span>
          <span style={{color:'#9CA3AF'}}>=</span>
          <span><strong style={{color:'#15803D'}}>Caixa Líquido</strong> {fmt(dailyRevenueV)}</span>
          <span style={{color:'#9CA3AF'}}>+</span>
          <span><strong style={{color:'#7C3AED'}}>Crédito</strong> {fmt(dailyCreditAppliedV)}</span>
          <span style={{color:'#9CA3AF'}}>+</span>
          <span><strong style={{color:'#DC2626'}}>NF</strong> {fmt(dailyNFTaxV)}</span>
          {dailyDiscountV>0 && <>
            <span style={{color:'#9CA3AF'}}>+</span>
            <span><strong style={{color:'#EA580C'}}>Desc</strong> {fmt(dailyDiscountV)}</span>
          </>}
          <span style={{color:'#9CA3AF',marginLeft:8,fontStyle:'italic'}}>· {_isToday?'hoje':_periodSubLabel}</span>
        </div>

        {/* Grid 7 cards · 2 linhas (4 + 3) */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:10}}>
          {/* Card 1 — Vendas TOTAL bruto */}
          <div className="stat-card" style={{padding:'14px 18px',border:'2px solid #1F293733',background:'linear-gradient(135deg,#F3F4F6,#E5E7EB)'}} title="Valor TOTAL que clientes pagaram hoje (inclui crédito + NF tax + descontos)">
            <div style={{fontSize:11,color:'#1F2937',fontWeight:600,marginBottom:4}}>📊 Vendas Total {_periodLabel}</div>
            <div style={{fontSize:22,fontWeight:800,color:'#1F2937'}}>{fmt(dailyVendasTotalBrutoV)}</div>
            <div style={{fontSize:10,color:'#6B7280',marginTop:4,paddingTop:4,borderTop:'1px dashed #D1D5DB'}}>Mês: <strong>{fmt(monthVendasTotalBrutoV)}</strong></div>
          </div>
          {/* Card 2 — Caixa Líquido */}
          <div className="stat-card" style={{padding:'14px 18px',border:'2px solid #15803D33',background:'linear-gradient(135deg,#F0FDF4,#DCFCE7)'}} title="Quanto entrou de NOVO em caixa hoje (já deduzido crédito + NF + descontos)">
            <div style={{fontSize:11,color:'#15803D',fontWeight:600,marginBottom:4}}>💰 Caixa Líquido {_periodLabel}</div>
            <div style={{fontSize:22,fontWeight:800,color:'#15803D'}}>{fmt(dailyRevenueV)}</div>
            <div style={{fontSize:10,color:'#6B7280',marginTop:4,paddingTop:4,borderTop:'1px dashed #BBF7D0'}}>{todaySalesV.length} venda{todaySalesV.length!==1?'s':''} · Mês: <strong>{fmt(monthRevenueV)}</strong></div>
          </div>
          {/* Card 3 — Ticket Médio */}
          <div className="stat-card" style={{padding:'14px 18px',border:'1px solid #E5E7EB'}} title="Caixa Líquido ÷ número de vendas">
            <div style={{fontSize:11,color:'#6B7280',fontWeight:600,marginBottom:4}}>🎯 Ticket Médio {_periodLabel}</div>
            <div style={{fontSize:22,fontWeight:800,color:'#374151'}}>{todaySalesV.length>0?fmt(dailyRevenueV/todaySalesV.length):'—'}</div>
            <div style={{fontSize:10,color:'#6B7280',marginTop:4,paddingTop:4,borderTop:'1px dashed #E5E7EB'}}>Mês: <strong>{monthSalesV.length>0?fmt(monthRevenueV/monthSalesV.length):'—'}</strong></div>
          </div>
          {/* Card 4 — Pix bruto */}
          <div className="stat-card" style={{padding:'14px 18px',border:'1px solid #2563EB33',background:'linear-gradient(135deg,#EFF6FF,#DBEAFE)'}} title="Valor BRUTO entrada no método Pix (inclui crédito + NF se aplicado)">
            <div style={{fontSize:11,color:'#1D4ED8',fontWeight:600,marginBottom:4}}>💳 Pix {_periodLabel}</div>
            <div style={{fontSize:22,fontWeight:800,color:'#1D4ED8'}}>{fmt(dailyPixV)}</div>
            <div style={{fontSize:10,color:'#6B7280',marginTop:4,paddingTop:4,borderTop:'1px dashed #BFDBFE'}}>Mês: <strong>{fmt(monthPixV)}</strong></div>
          </div>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12,marginBottom:16}}>
          {/* Card 5 — Dinheiro bruto */}
          <div className="stat-card" style={{padding:'14px 18px',border:'1px solid #16A34A33',background:'linear-gradient(135deg,#F0FDF4,#DCFCE7)'}} title="Valor BRUTO entrada em dinheiro físico">
            <div style={{fontSize:11,color:'#15803D',fontWeight:600,marginBottom:4}}>💵 Dinheiro {_periodLabel}</div>
            <div style={{fontSize:22,fontWeight:800,color:'#15803D'}}>{fmt(dailyCashV)}</div>
            <div style={{fontSize:10,color:'#6B7280',marginTop:4,paddingTop:4,borderTop:'1px dashed #BBF7D0'}}>Mês: <strong>{fmt(monthCashV)}</strong></div>
          </div>
          {/* Card 6 — Crédito Aplicado */}
          <div className="stat-card" style={{padding:'14px 18px',border:'1px solid #7C3AED33',background:'linear-gradient(135deg,#F5F3FF,#EDE9FE)'}} title="Saldo de crédito acumulado dos clientes aplicado em vendas (NÃO é entrada nova em caixa)">
            <div style={{fontSize:11,color:'#7C3AED',fontWeight:600,marginBottom:4}}>🎁 Crédito Aplicado {_periodLabel}</div>
            <div style={{fontSize:22,fontWeight:800,color:'#7C3AED'}}>{fmt(dailyCreditAppliedV)}</div>
            <div style={{fontSize:10,color:'#6B7280',marginTop:4,paddingTop:4,borderTop:'1px dashed #DDD6FE'}}>Mês: <strong>{fmt(monthCreditAppliedV)}</strong></div>
          </div>
          {/* Card 7 — NF Tax */}
          <div className="stat-card" style={{padding:'14px 18px',border:'1px solid #DC262633',background:'linear-gradient(135deg,#FEF2F2,#FEE2E2)'}} title="Imposto 5% adicionado nas vendas com Nota Fiscal · repassado ao governo · NÃO é receita ZAYNEX">
            <div style={{fontSize:11,color:'#DC2626',fontWeight:600,marginBottom:4}}>📋 NF Tax {_periodLabel}</div>
            <div style={{fontSize:22,fontWeight:800,color:'#DC2626'}}>{fmt(dailyNFTaxV)}</div>
            <div style={{fontSize:10,color:'#6B7280',marginTop:4,paddingTop:4,borderTop:'1px dashed #FECACA'}}>Mês: <strong>{fmt(monthNFTaxV)}</strong></div>
          </div>
        </div>
      </>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.vendas = window.ZNX.widgets.vendas || {};
  window.ZNX.widgets.vendas.SalesCardsBar = SalesCardsBar;
  window.SalesCardsBar_v224_7_wave26 = true;
})();