// js/components/widgets/CashFlow30dCard.jsx
// [Wave 12B v223.35 20260520] Extraído de DashboardV2.jsx L391-416
// Card "💰 Cash Flow próximos 30 dias" — admin/financeiro only
//
// Props:
//   user, cashFlow30d ({aReceber, aPagar, saldo, qtdReceber, qtdPagar})
// Deps runtime: window.fmt
(function(){
  'use strict';

  function CashFlow30dCard(props){
    const { user, cashFlow30d={aReceber:0,aPagar:0,saldo:0,qtdReceber:0,qtdPagar:0} } = props;
    const fmt = typeof window.fmt === 'function' ? window.fmt : (v)=>String(v);

    if (user.role!=='admin' && user.role!=='financeiro') return null;

    return (
      <div className="card" style={{padding:14}}>
        <div style={{fontSize:11,color:'#9CA3AF',fontWeight:700,textTransform:'uppercase',letterSpacing:1.2,marginBottom:8}}>
          💰 Cash Flow — próximos 30 dias
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:6,fontSize:12}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <span style={{color:'#16A34A'}}>↗ A receber</span>
            <strong style={{color:'#16A34A',fontSize:14}}>{fmt(cashFlow30d.aReceber)}</strong>
          </div>
          <div style={{fontSize:10,color:'#9CA3AF',textAlign:'right',marginTop:-4}}>{cashFlow30d.qtdReceber} parcelas</div>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <span style={{color:'#DC2626'}}>↘ A pagar</span>
            <strong style={{color:'#DC2626',fontSize:14}}>-{fmt(cashFlow30d.aPagar)}</strong>
          </div>
          <div style={{fontSize:10,color:'#9CA3AF',textAlign:'right',marginTop:-4}}>{cashFlow30d.qtdPagar} contas</div>
          <div style={{borderTop:'1px solid #E5E7EB',marginTop:6,paddingTop:8,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <span style={{fontWeight:700,color:'#1B2A4A'}}>Saldo projetado</span>
            <strong style={{fontSize:18,fontWeight:800,color:cashFlow30d.saldo>=cashFlow30d.aPagar*0.1?'#16A34A':cashFlow30d.saldo>0?'#EA580C':'#DC2626'}}>
              {cashFlow30d.saldo>=0?'+':''}{fmt(cashFlow30d.saldo)} {cashFlow30d.saldo>=cashFlow30d.aPagar*0.1?'🟢':cashFlow30d.saldo>0?'🟠':'🔴'}
            </strong>
          </div>
        </div>
      </div>
    );
  }

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