// js/components/widgets/app/RaceBarVendedor.jsx
// [Wave 5 MINI 2026-05-17] Extraído de App.jsx L1295-1356 — refactor zero-lógica.
// Padrão: IIFE + window.ZNX.widgets.app.RaceBarVendedor namespace + props injection.
//
// SVG race bar no topbar pra vendedoras — mostra % da meta mensal + carro animado + bandeira.
// Render-only (read-only), gate `currentUser.role==='vendedor'` aplicado no caller (gate-fora pattern).
// BUG-FIX 20260506-v60 preservado: SVG flecha sem flip (carBounce só translateY no CSS).
//
// Props (validados FASE 1.5 = 4 props):
//   currentUser: object — usa .name pra lookup metas/metasBase
//   metas: object — { [sellerName]: number } meta mensal
//   metasBase: object — { [sellerName]: number } valor base já vendido (vendas antigas/manuais)
//   sales: array — usado em filter+reduce de saleFinalTotal mês corrente
//
// Deps runtime globals: fmt, isFaturada, saleFinalTotal (window.*).
(function() {
  'use strict';

  function RaceBarVendedor({currentUser, metas, metasBase, sales}){
    const now2=new Date();
    const cm2=`${now2.getFullYear()}-${String(now2.getMonth()+1).padStart(2,'0')}`;
    const meta2=metas[currentUser.name]||0;
    const base2=metasBase[currentUser.name]||0;
    const rev2Real=sales.filter(s=>s.sellerName===currentUser.name&&s.date?.startsWith(cm2)&&isFaturada(s)).reduce((a,s)=>a+saleFinalTotal(s),0);
    const rev2=rev2Real+base2;
    const pct2=meta2>0?Math.min(100,(rev2/meta2)*100):0;
    // cor muda conforme aproxima da meta
    const col2=pct2>=100?'#16A34A':pct2>=75?'#2563EB':pct2>=50?'#F59E0B':pct2>=25?'#EA580C':'#DC2626';
    const carPos=Math.max(2,Math.min(pct2,93));
    return(
      <div style={{flex:1,display:'flex',alignItems:'center',gap:12,paddingRight:12,minWidth:0}}>
        {/* % badge */}
        <div style={{flexShrink:0,minWidth:48,textAlign:'center'}}>
          <div style={{fontSize:18,fontWeight:900,color:meta2>0?col2:'#D1D5DB',lineHeight:1,transition:'color .5s'}}>{meta2>0?pct2.toFixed(1)+'%':'—'}</div>
          <div style={{fontSize:9,color:'#9CA3AF',fontWeight:600,letterSpacing:.5}}>DA META</div>
        </div>
        {/* Track */}
        <div style={{flex:1,position:'relative',height:36,minWidth:0}}>
          {/* Track base */}
          <div style={{position:'absolute',top:'50%',transform:'translateY(-50%)',left:0,right:22,height:10,background:'#F0F2F5',borderRadius:20,border:'1px solid #E4E7EC',overflow:'hidden'}}>
            {/* Milestones */}
            {[25,50,75].map(m=>(
              <div key={m} style={{position:'absolute',top:0,bottom:0,left:m+'%',width:1,background:'#D1D5DB',zIndex:1}}/>
            ))}
            {/* Fill */}
            {meta2>0&&<div style={{position:'absolute',top:0,left:0,height:'100%',width:pct2+'%',background:`linear-gradient(90deg,${col2}77,${col2})`,borderRadius:20,transition:'width 1.2s cubic-bezier(.34,1.56,.64,1)',boxShadow:`0 0 10px ${col2}55`}}/>}
          </div>
          {/* Car SVG flecha — [BUG-FIX 20260506-v60] DUPLICATA inline tirada — substituida emoji por SVG flecha apontando direita.
              Antes: emoji 🏎️ + scaleX(-1) inline + animacao carBounce sobrescrevia scaleX → carro apontava esquerda sempre.
              Agora: SVG sem flip + carBounce so translateY (CSS atualizado em index.html) — direcao 100% inequivoca. */}
          <div style={{position:'absolute',top:'50%',left:carPos+'%',transform:'translate(-50%,-50%)',transition:'left 1.2s cubic-bezier(.34,1.56,.64,1)',filter:meta2>0?`drop-shadow(0 0 5px ${col2}99)`:'grayscale(1) opacity(0.5)',animation:'carBounce .7s ease-in-out infinite alternate',userSelect:'none',zIndex:2,pointerEvents:'none'}}>
            <svg width="38" height="22" viewBox="0 0 38 22" style={{display:'block'}} aria-label="rumo à meta">
              <line x1="0" y1="10" x2="3" y2="10" stroke={col2} strokeWidth="2" strokeLinecap="round" opacity="0.4"/>
              <line x1="0" y1="13" x2="2" y2="13" stroke={col2} strokeWidth="2" strokeLinecap="round" opacity="0.55"/>
              <path d="M4 4 L4 18 L36 11 Z" fill={col2} stroke="#1B2A4A" strokeWidth="1" strokeLinejoin="round"/>
              <path d="M10 8 L18 11 L10 14 L13 11 Z" fill="#FFFFFF" opacity="0.85"/>
              <circle cx="33" cy="11" r="1.4" fill="#FEF08A" stroke="#FCD34D" strokeWidth="0.4"/>
              <circle cx="9" cy="19" r="2.2" fill="#1B2A4A" stroke="#FFFFFF" strokeWidth="0.4"/>
              <circle cx="9" cy="19" r="0.8" fill="#9CA3AF"/>
              <circle cx="26" cy="19" r="2.2" fill="#1B2A4A" stroke="#FFFFFF" strokeWidth="0.4"/>
              <circle cx="26" cy="19" r="0.8" fill="#9CA3AF"/>
            </svg>
          </div>
          {/* Flag */}
          <div style={{position:'absolute',top:'50%',right:0,transform:'translateY(-68%)',fontSize:20,lineHeight:1,userSelect:'none'}}>🏁</div>
        </div>
        {/* Rev info */}
        <div style={{flexShrink:0,textAlign:'right'}}>
          {meta2>0?(
            pct2>=100
              ?<span style={{fontSize:12,fontWeight:800,color:'#16A34A'}}>🎉 META BATIDA!</span>
              :<div>
                <div style={{fontSize:12,fontWeight:700,color:'#374151'}}>{fmt(rev2)}</div>
                <div style={{fontSize:10,color:'#9CA3AF'}}>meta {fmt(meta2)}</div>
              </div>
          ):<div style={{fontSize:11,color:'#9CA3AF'}}>Meta não definida</div>}
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.app = window.ZNX.widgets.app || {};
  window.ZNX.widgets.app.RaceBarVendedor = RaceBarVendedor;
})();