// js/components/widgets/comissao-vendedora/CommissionMainCard.jsx
// [Wave 35 v224.16 NUCLEAR EXTRACT 2026-05-24] Header KPI grande + progress bar 7-cor
// Extract LITERAL ComissaoVendedora L82-138
//
// Props:
//   - current (obj) — vendas_liquidas, meta, period_month, period_year,
//                     comissao_brl, comissao_pct, pct_meta, atingiu_meta
//   - atingiu (bool) — current.atingiu_meta
//   - pctMeta (number) — current.pct_meta
//   - faltando (number) — calcs.calcFaltando output
//
// Deps lazy: window.fmtMoney, ZNX.lib['comissao-vendedora'].calcs.{monthName, barColor}
(function(){
  'use strict';
  function CommissionMainCard(props){
    const fmtMoney = window.fmtMoney;
    const calcs = window.ZNX && window.ZNX.lib && window.ZNX.lib['comissao-vendedora'] && window.ZNX.lib['comissao-vendedora'].calcs;
    if(!calcs || typeof fmtMoney !== 'function'){
      console.error('[CommissionMainCard] deps faltando: calcs='+!!calcs+', fmtMoney='+!!fmtMoney);
      return null;
    }
    const { current, atingiu, pctMeta, faltando } = props;
    const barColor = calcs.barColor(pctMeta, atingiu);
    return (
      <div style={{
        background:atingiu ? 'linear-gradient(135deg, #16A34A12, #16A34A04)' : 'linear-gradient(135deg, #C8A95110, #C8A95103)',
        border:'2px solid '+(atingiu ? '#16A34A55' : '#C8A95155'),
        borderRadius:14,
        padding:'18px 22px',
        marginBottom:12,
        boxShadow:'0 2px 10px '+(atingiu ? '#16A34A20' : '#C8A95115'),
      }}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:14,flexWrap:'wrap'}}>
          <div>
            <div style={{fontSize:11,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1.2,fontWeight:700,marginBottom:4}}>
              💰 Sua comissão — {calcs.monthName(current.period_month)}/{current.period_year}
            </div>
            <div style={{fontSize:34,fontWeight:800,color:atingiu?'#16A34A':'#C8A951',letterSpacing:'-0.02em',lineHeight:1}}>
              {fmtMoney(current.comissao_brl)}
            </div>
            <div style={{fontSize:12,color:'#6B7280',marginTop:6}}>
              {atingiu ? (
                <span style={{color:'#16A34A',fontWeight:600}}>🎯 Meta batida! Comissão de {(current.comissao_pct*100).toFixed(1)}%</span>
              ) : (
                <span>Comissão atual: {(current.comissao_pct*100).toFixed(1)}% (bate meta = 1.0%)</span>
              )}
            </div>
          </div>
          <div style={{textAlign:'right',minWidth:140}}>
            <div style={{fontSize:11,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,fontWeight:600}}>Meta do mês</div>
            <div style={{fontSize:18,fontWeight:700,color:'#1B2A4A',fontVariantNumeric:'tabular-nums'}}>
              {fmtMoney(current.meta)}
            </div>
            <div style={{fontSize:11,color:'#6B7280',marginTop:2}}>
              {pctMeta.toFixed(1)}% atingido
            </div>
          </div>
        </div>

        {/* Progress bar */}
        <div style={{marginTop:14}}>
          <div style={{height:10,background:'#F3F4F6',borderRadius:5,overflow:'hidden',position:'relative'}}>
            <div style={{
              width:Math.min(100, pctMeta)+'%',
              height:'100%',
              background:'linear-gradient(90deg, '+barColor+', '+barColor+'DD)',
              transition:'width .5s',
              borderRadius:5,
            }}/>
            {pctMeta > 100 && (
              <div style={{position:'absolute',top:0,right:4,fontSize:10,color:'#FFF',fontWeight:700,lineHeight:'10px'}}>+{(pctMeta-100).toFixed(0)}%</div>
            )}
          </div>
          <div style={{display:'flex',justifyContent:'space-between',marginTop:5,fontSize:11,color:'#6B7280'}}>
            <span>{fmtMoney(current.vendas_liquidas)} vendido</span>
            <span>{atingiu ? '✅ Meta ultrapassada' : 'Faltam '+fmtMoney(faltando)}</span>
          </div>
        </div>
      </div>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets['comissao-vendedora'] = window.ZNX.widgets['comissao-vendedora'] || {};
  window.ZNX.widgets['comissao-vendedora'].CommissionMainCard = CommissionMainCard;
  // [Wave 35 marker v224.16] confirma CommissionMainCard executado
  window.CommissionMainCard_v224_16_wave35 = true;
})();