// js/components/widgets/TopVendedorasCard.jsx
// [Wave 12A v223.34 20260520] Extraído de DashboardV2.jsx L453-481
// Card "Top 3 Vendedoras (mês)" — ranking pódio com totals
//
// Props: topVendedoras (array de {name, total, count})
// Deps runtime: window.fmt
(function(){
  'use strict';

  function TopVendedorasCard(props){
    const { topVendedoras=[] } = props;
    const fmt = typeof window.fmt === 'function' ? window.fmt : (v)=>String(v);

    return (
      <div className="card" style={{padding:14}}>
        <div style={{fontSize:11,color:'#9CA3AF',fontWeight:700,textTransform:'uppercase',letterSpacing:1.2,marginBottom:8}}>
          🏆 Top 3 Vendedoras (mês)
        </div>
        {topVendedoras.length===0 ? (
          <div style={{fontSize:12,color:'#9CA3AF',fontStyle:'italic',padding:'8px 0'}}>Nenhuma venda este mês</div>
        ):(
          <div style={{display:'flex',flexDirection:'column',gap:6}}>
            {topVendedoras.map((v,i)=>{
              const medal=['🥇','🥈','🥉'][i];
              return(
                <div key={v.name} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'6px 10px',background:i===0?'#FEF3C7':'#F9FAFB',borderRadius:6}}>
                  <div style={{display:'flex',alignItems:'center',gap:6,fontSize:12}}>
                    <span>{medal}</span>
                    <strong style={{color:'#1B2A4A'}}>{v.name}</strong>
                  </div>
                  <div style={{textAlign:'right'}}>
                    <div style={{fontSize:13,fontWeight:700,color:'#16A34A'}}>{fmt(v.total)}</div>
                    <div style={{fontSize:10,color:'#9CA3AF'}}>{v.count} vendas</div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    );
  }

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