// js/components/widgets/metas-admin/MetasAdminCard.jsx
// [Wave 41 v224.22 NUCLEAR EXTRACT 2026-05-25] Card individual vendedor + meta progress
// Extract LITERAL MetasAdmin.jsx L68-122 (lógica + render card)
//
// Props:
//   - vendedor (obj) — {id, name, username}
//   - metas, metasBase (obj maps)
//   - sales (array), currentMonth (string)
//   - extraUsers (array) — pra detectar isExtra (mostra botão remove)
//   - calcs (obj) — vem do main · usa calcs.calcVendedorMetrics
//   - onEdit(vendedor, meta, base) — abre modal edit
//   - onRemoveExtra(id) — soft delete
//
// Deps lazy: window.fmt
(function(){
  'use strict';
  function MetasAdminCard(props){
    const fmt = window.fmt;
    if(typeof fmt !== 'function'){
      console.error('[MetasAdminCard] fmt global ausente');
      return null;
    }
    const { vendedor: v, metas, metasBase, sales, currentMonth, extraUsers, calcs, onEdit, onRemoveExtra } = props;
    if(!calcs || typeof calcs.calcVendedorMetrics !== 'function'){
      console.error('[MetasAdminCard] calcs.calcVendedorMetrics ausente');
      return null;
    }
    const m = calcs.calcVendedorMetrics(v, metas, metasBase, sales, currentMonth);
    const isExtra = extraUsers.some(function(u){return u.id === v.id;});
    return (
      <div style={{background:'#F8FAFB',border:'1px solid #E4E7EC',borderRadius:10,padding:14}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:8}}>
          <div>
            <div style={{fontWeight:700,fontSize:14}}>{v.name}</div>
            <div style={{fontSize:11,color:'#9CA3AF'}}>@{v.username}</div>
          </div>
          <div style={{display:'flex',gap:6,alignItems:'center'}}>
            {isExtra && <button className="btn-danger btn-sm" style={{fontSize:10,padding:'2px 6px'}} onClick={function(){onRemoveExtra(v.id);}}>✕</button>}
          </div>
        </div>
        <div style={{marginBottom:8}}>
          <div style={{display:'flex',justifyContent:'space-between',fontSize:12,marginBottom:4}}>
            <span style={{color:'#9CA3AF'}}>Meta: <strong style={{color:'#374151'}}>{m.meta>0?fmt(m.meta):'Não definida'}</strong></span>
            <span style={{color:m.barC,fontWeight:700}}>{m.meta>0?m.pct.toFixed(0)+'%':'—'}</span>
          </div>
          {m.meta>0 && (
            <div style={{background:'#E5E7EB',borderRadius:4,height:6,overflow:'hidden'}}>
              <div style={{height:'100%',background:m.barC,borderRadius:4,width:m.pct+'%',transition:'width .4s'}}/>
            </div>
          )}
          <div style={{fontSize:11,color:'#9CA3AF',marginTop:4}}>Vendido: <span style={{color:'#2563EB'}}>{fmt(m.vRev)}</span> · {m.vSales.length} nota{m.vSales.length!==1?'s':''}</div>
        </div>
        {m.meta>0 && (
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:10}}>
            <div style={{background:'#fff',border:'1px solid #E4E7EC',borderRadius:8,padding:'8px 10px',textAlign:'center'}}>
              <div style={{fontSize:10,color:'#9CA3AF',marginBottom:2}}>Faltando</div>
              <div style={{fontSize:13,fontWeight:800,color:m.faltando>0?'#DC2626':'#16A34A'}}>{m.faltando>0?fmt(m.faltando):'🎉 Batida!'}</div>
            </div>
            <div style={{background:'#fff',border:'1px solid #E4E7EC',borderRadius:8,padding:'8px 10px',textAlign:'center'}}>
              <div style={{fontSize:10,color:'#9CA3AF',marginBottom:2}}>Precisa/dia</div>
              <div style={{fontSize:13,fontWeight:800,color:m.porDia>0?'#2563EB':'#16A34A'}}>{m.porDia>0?fmt(m.porDia):'—'}</div>
            </div>
          </div>
        )}
        <button className="btn-outline btn-sm" style={{width:'100%',fontSize:12}} onClick={function(){onEdit(v, m.meta, m.base);}}>
          {m.meta>0?'Editar Meta':'Definir Meta'}
        </button>
      </div>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets['metas-admin'] = window.ZNX.widgets['metas-admin'] || {};
  window.ZNX.widgets['metas-admin'].MetasAdminCard = MetasAdminCard;
  // [Wave 41 marker v224.22]
  window.MetasAdminCard_v224_22_wave41 = true;
})();