// js/components/widgets/comissao-vendedora/CommissionComparison.jsx
// [Wave 35 v224.16 NUCLEAR EXTRACT 2026-05-24] Comparação atual vs se bater meta
// Extract LITERAL ComissaoVendedora L140-179 (2 cenários: !atingiu mostra comparison · atingiu mostra trophy)
//
// Props:
//   - atingiu (bool)
//   - meta (number) — current.meta
//   - liquido (number) — scenarios.liquido
//   - comissaoSeBate, comissaoSeNaoBate, diferencaBater (numbers) — scenarios.*
//
// Deps lazy: window.fmtMoney
(function(){
  'use strict';
  function CommissionComparison(props){
    const fmtMoney = window.fmtMoney;
    if(typeof fmtMoney !== 'function'){
      console.error('[CommissionComparison] fmtMoney global ausente');
      return null;
    }
    const { atingiu, meta, liquido, comissaoSeBate, comissaoSeNaoBate, diferencaBater } = props;
    return (
      <React.Fragment>
        {/* [V4 motivacional L140-166] Comparação: ganho atual vs ganho se bater meta */}
        {!atingiu && meta > 0 && liquido > 0 && (
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginBottom:12}}>
            <div style={{background:'#FEF3C7',border:'2px solid #C8A95155',borderRadius:12,padding:'14px 16px'}}>
              <div style={{fontSize:11,color:'#92400E',textTransform:'uppercase',letterSpacing:1,fontWeight:700,marginBottom:4}}>
                💵 Sua comissão agora
              </div>
              <div style={{fontSize:24,fontWeight:800,color:'#92400E',fontVariantNumeric:'tabular-nums'}}>
                {fmtMoney(comissaoSeNaoBate)}
              </div>
              <div style={{fontSize:11,color:'#A16207',marginTop:2}}>
                0.5% sobre {fmtMoney(liquido)} (sem bater meta)
              </div>
            </div>
            <div style={{background:'linear-gradient(135deg, #16A34A15, #16A34A05)',border:'2px solid #16A34A55',borderRadius:12,padding:'14px 16px',position:'relative'}}>
              <div style={{fontSize:11,color:'#15803D',textTransform:'uppercase',letterSpacing:1,fontWeight:700,marginBottom:4}}>
                🎯 Se bater a meta
              </div>
              <div style={{fontSize:24,fontWeight:800,color:'#16A34A',fontVariantNumeric:'tabular-nums'}}>
                {fmtMoney(comissaoSeBate)}
              </div>
              <div style={{fontSize:11,color:'#15803D',marginTop:2,fontWeight:600}}>
                +{fmtMoney(diferencaBater)} a mais (1% sobre líquido)
              </div>
            </div>
          </div>
        )}

        {/* [V4 motivacional L168-179] Quando bateu — mostra só 1% confirmado */}
        {atingiu && (
          <div style={{background:'linear-gradient(135deg, #16A34A15, #16A34A05)',border:'2px solid #16A34A77',borderRadius:12,padding:'14px 18px',marginBottom:12,display:'flex',alignItems:'center',gap:14}}>
            <div style={{fontSize:32}}>🏆</div>
            <div style={{flex:1}}>
              <div style={{fontSize:13,fontWeight:700,color:'#16A34A'}}>Meta batida — comissão de 1% garantida!</div>
              <div style={{fontSize:11,color:'#15803D',marginTop:2}}>
                Você ganhou {fmtMoney(diferencaBater)} a mais por ter batido a meta (vs 0.5%).
              </div>
            </div>
          </div>
        )}
      </React.Fragment>
    );
  }
  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'].CommissionComparison = CommissionComparison;
  // [Wave 35 marker v224.16] confirma CommissionComparison executado
  window.CommissionComparison_v224_16_wave35 = true;
})();