// js/components/widgets/AlertasCard.jsx
// [Wave 12A v223.34 20260520] Extraído de DashboardV2.jsx L411-451
// Card "Alertas Críticos" — contas atrasadas + stock zerado/acabando + aprovações pendentes
//
// Props: overduePay, overdueRec, noStock, acabando, pendingApprovals (arrays/numbers)
(function(){
  'use strict';

  function AlertasCard(props){
    const {
      overduePay=[], overdueRec=[], noStock=[], acabando=[], pendingApprovals=0
    } = props;

    return (
      <div className="card" style={{padding:14}}>
        <div style={{fontSize:11,color:'#9CA3AF',fontWeight:700,textTransform:'uppercase',letterSpacing:1.2,marginBottom:8}}>
          🚨 Alertas Críticos
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:6}}>
          {overduePay.length>0 ? (
            <div style={{display:'flex',alignItems:'center',gap:8,fontSize:12,color:'#DC2626',fontWeight:600}}>
              🔴 {overduePay.length} contas a pagar atrasadas
            </div>
          ):(
            <div style={{display:'flex',alignItems:'center',gap:8,fontSize:12,color:'#16A34A'}}>
              ✅ Nenhuma conta atrasada
            </div>
          )}
          {overdueRec.length>0 && (
            <div style={{display:'flex',alignItems:'center',gap:8,fontSize:12,color:'#EA580C'}}>
              🟠 {overdueRec.length} a receber atrasadas
            </div>
          )}
          {noStock.length>0 && (
            <div style={{display:'flex',alignItems:'center',gap:8,fontSize:12,color:'#DC2626'}}>
              🔴 {noStock.length} produtos zerados
            </div>
          )}
          {acabando.length>0 && (
            <div style={{display:'flex',alignItems:'center',gap:8,fontSize:12,color:'#EAB308'}}>
              🟡 {acabando.length} produtos acabando
            </div>
          )}
          {pendingApprovals>0 ? (
            <div style={{display:'flex',alignItems:'center',gap:8,fontSize:12,color:'#7C3AED',fontWeight:600}}>
              🟣 {pendingApprovals} aprovações pendentes
            </div>
          ):(
            <div style={{display:'flex',alignItems:'center',gap:8,fontSize:12,color:'#16A34A'}}>
              ✅ Nenhuma aprovação pendente
            </div>
          )}
        </div>
      </div>
    );
  }

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