// js/components/widgets/historico/ConversaoPipelinePanel.jsx
// [Wave 22 v224.3 NUCLEAR] Conversão de orçamentos + Pipeline aberto
// Extraído de HistoricoVendedor.jsx L753-803 (literal)
(function(){
  'use strict';
  const COLORS = {
    blue:'#2563EB',
    gold:'#B89840',
    green:'#15803D',
    red:'#DC2626',
    orange:'#EA580C',
    gray:'#6B7280', grayBorder:'#E4E7EC',
    text:'#1C1C28'
  };

  // [v224.73 + v224.55] vars+check MOVED to component body
  function ConversaoPipelinePanel({conversaoInfo, vendedoraAlvo, clients}){
    const widgets = window.ZNX && window.ZNX.widgets;
    const SectionHeader = widgets && widgets.SectionHeader;
    if(!SectionHeader){
      const _msg = '[ConversaoPipelinePanel v224.73] SectionHeader faltando';
      console.error(_msg);
      if(window.Sentry && typeof window.Sentry.captureMessage === 'function'){
        window.Sentry.captureMessage(_msg, 'error');
      }
    }
    const fmt = window.fmt || function(v){return 'R$ '+Number(v||0).toFixed(2);};
    if(!conversaoInfo) return null;
    if(conversaoInfo.totalCriados<=0 && conversaoInfo.pipeline.length<=0) return null;
    return (
      <>
        <SectionHeader icon="🔄" title="Conversão de Orçamentos" subtitle="Quanto vira venda, quanto demora, pipeline aberto"/>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1.2fr',gap:14,marginBottom:8}}>
          {/* Conversão stats */}
          <div style={{background:'#fff',border:'1px solid '+COLORS.grayBorder,borderRadius:12,padding:18}}>
            <div style={{textAlign:'center',marginBottom:14}}>
              <div style={{fontSize:11,color:COLORS.gray,fontWeight:600,textTransform:'uppercase',letterSpacing:0.5}}>Taxa de conversão</div>
              <div style={{fontSize:36,fontWeight:900,color:conversaoInfo.taxa>=70?COLORS.green:conversaoInfo.taxa>=50?COLORS.blue:COLORS.orange,lineHeight:1.1,marginTop:4}}>{conversaoInfo.taxa.toFixed(1)}%</div>
              <div style={{fontSize:12,color:COLORS.gray,marginTop:4}}>{conversaoInfo.convertidos} de {conversaoInfo.totalCriados} orçamentos viraram venda</div>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,paddingTop:14,borderTop:'1px solid '+COLORS.grayBorder}}>
              <div>
                <div style={{fontSize:10,color:COLORS.gray,fontWeight:600,textTransform:'uppercase'}}>Tempo médio</div>
                <div style={{fontSize:18,fontWeight:800,color:COLORS.text,marginTop:2}}>{conversaoInfo.tempoMedio>0?conversaoInfo.tempoMedio.toFixed(1)+' dias':'—'}</div>
              </div>
              <div>
                <div style={{fontSize:10,color:COLORS.gray,fontWeight:600,textTransform:'uppercase'}}>Cancelados</div>
                <div style={{fontSize:18,fontWeight:800,color:conversaoInfo.cancelados>0?COLORS.red:COLORS.gray,marginTop:2}}>{conversaoInfo.cancelados}</div>
              </div>
            </div>
          </div>
          {/* Pipeline */}
          <div style={{background:'#fff',border:'1px solid '+COLORS.grayBorder,borderRadius:12,padding:18}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:10}}>
              <div>
                <div style={{fontSize:11,color:COLORS.gray,fontWeight:600,textTransform:'uppercase',letterSpacing:0.5}}>Pipeline aberto</div>
                <div style={{fontSize:13,color:COLORS.text,marginTop:2}}>{conversaoInfo.pipeline.length} orçamentos · <strong style={{color:COLORS.gold}}>{fmt(conversaoInfo.valorPipeline)}</strong></div>
              </div>
            </div>
            {conversaoInfo.pipeline.length===0 ?
              <div style={{textAlign:'center',color:COLORS.gray,fontSize:12,padding:20}}>Nenhum orçamento aberto agora</div>
            :
              <div style={{maxHeight:200,overflow:'auto'}}>
                {conversaoInfo.pipeline.map(function(q){
                  const c = (clients||[]).find(function(x){return String(x.id)===String(q.clientId);});
                  return (
                    <div key={q.id} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'7px 0',borderBottom:'1px solid #F3F4F6',fontSize:12}}>
                      <div style={{flex:1,minWidth:0}}>
                        <div style={{fontWeight:600,color:COLORS.text,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{q.number||'?'} · {(c && c.name)||'Cliente'}</div>
                        <div style={{fontSize:10,color:COLORS.gray,marginTop:1}}>{q.status} · {q.date||'?'}</div>
                      </div>
                      <div style={{fontWeight:700,color:COLORS.gold,marginLeft:10}}>{fmt(q.total||0)}</div>
                    </div>
                  );
                })}
              </div>
            }
          </div>
        </div>
      </>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.historico = window.ZNX.widgets.historico || {};
  window.ZNX.widgets.historico.ConversaoPipelinePanel = ConversaoPipelinePanel;
})();