// js/components/widgets/VendedorAbaComparacao.jsx
// [Wave 16 v223.42 20260520] Aba "Comparação" 2 vendedoras lado a lado
// Props: vendedoraAlvo (string default A), vendedorasList (array de strings), sales, quotes, periodDays
// Deps runtime: window.ZNX.lib.vendedorAnalise, window.fmt
(function(){
  'use strict';
  const {useState} = React;

  function MetricRow(p){
    const a = p.fmtFn ? p.fmtFn(p.valueA) : String(p.valueA);
    const b = p.fmtFn ? p.fmtFn(p.valueB) : String(p.valueB);
    return (
      <tr style={{borderBottom:'1px solid #F3F4F6'}}>
        <td style={{padding:'10px',fontWeight:500,color:'#374151'}}>{p.label}</td>
        <td style={{padding:'10px',textAlign:'right',fontWeight:700,color:'#1F2937'}}>{a}</td>
        <td style={{padding:'10px',textAlign:'center'}}>{p.deltaNode}</td>
        <td style={{padding:'10px',textAlign:'right',fontWeight:700,color:'#1F2937'}}>{b}</td>
      </tr>
    );
  }

  function deltaPill(v, suffix){
    if (v == null || isNaN(v)) return (<span style={{color:'#9CA3AF',fontSize:11}}>—</span>);
    const sign = v > 0 ? '+' : '';
    const color = v > 0 ? '#059669' : v < 0 ? '#DC2626' : '#6B7280';
    const bg = v > 0 ? '#D1FAE5' : v < 0 ? '#FEE2E2' : '#F3F4F6';
    return (<span style={{display:'inline-block',padding:'2px 8px',borderRadius:12,background:bg,color:color,fontSize:11,fontWeight:700}}>{sign}{v.toFixed(1)}{suffix||'%'}</span>);
  }

  function VendedorAbaComparacao(props){
    const lib = window.ZNX && window.ZNX.lib && window.ZNX.lib.vendedorAnalise;
    if (!lib || typeof lib.calcComparacao !== 'function') {
      if (window.Sentry && typeof window.Sentry.captureMessage === 'function') {
        try { window.Sentry.captureMessage('[Wave 16 v223.42] VendedorAbaComparacao missing lib', 'error'); } catch(e){}
      }
      console.error('[VendedorAbaComparacao] Dependências faltando: lib=', !!lib);
      return (<div style={{padding:20,color:'#B91C1C',background:'#FEE2E2',borderRadius:8}}>Erro: módulo de comparação não carregou. Recarregue a página (Ctrl+Shift+R).</div>);
    }

    const vendedoras = (props.vendedorasList || []).slice();
    const initialA = props.vendedoraAlvo || vendedoras[0] || '';
    const initialB = vendedoras.find(function(v){ return v!==initialA; }) || vendedoras[1] || '';
    const [sellerA, setSellerA] = useState(initialA);
    const [sellerB, setSellerB] = useState(initialB);
    const [periodDays, setPeriodDays] = useState(Number(props.periodDays || 30));

    if (vendedoras.length < 2) {
      return (<div style={{padding:20,color:'#6B7280'}}>É necessário ter pelo menos 2 vendedoras ativas para comparar.</div>);
    }

    const fmt = (typeof window.fmt === 'function') ? window.fmt : function(v){ return 'R$ '+Number(v||0).toFixed(2); };
    const data = lib.calcComparacao(props.sales||[], props.quotes||[], sellerA, sellerB, periodDays);

    return (
      <div>
        {/* Controles */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 200px',gap:12,marginBottom:20,alignItems:'end'}}>
          <div>
            <label style={{fontSize:12,fontWeight:600,color:'#6B7280',display:'block',marginBottom:4}}>Vendedora A</label>
            <select value={sellerA} onChange={function(e){ setSellerA(e.target.value); }} style={{width:'100%',padding:'8px 12px',border:'1px solid #D1D5DB',borderRadius:8,fontSize:14}}>
              {vendedoras.map(function(v){ return (<option key={'a-'+v} value={v}>{v}</option>); })}
            </select>
          </div>
          <div>
            <label style={{fontSize:12,fontWeight:600,color:'#6B7280',display:'block',marginBottom:4}}>Vendedora B</label>
            <select value={sellerB} onChange={function(e){ setSellerB(e.target.value); }} style={{width:'100%',padding:'8px 12px',border:'1px solid #D1D5DB',borderRadius:8,fontSize:14}}>
              {vendedoras.map(function(v){ return (<option key={'b-'+v} value={v}>{v}</option>); })}
            </select>
          </div>
          <div>
            <label style={{fontSize:12,fontWeight:600,color:'#6B7280',display:'block',marginBottom:4}}>Período</label>
            <select value={String(periodDays)} onChange={function(e){ setPeriodDays(Number(e.target.value)); }} style={{width:'100%',padding:'8px 12px',border:'1px solid #D1D5DB',borderRadius:8,fontSize:14}}>
              <option value="7">7 dias</option>
              <option value="30">30 dias</option>
              <option value="60">60 dias</option>
              <option value="90">90 dias</option>
              <option value="180">180 dias</option>
            </select>
          </div>
        </div>

        {sellerA === sellerB && (
          <div style={{padding:12,background:'#FEF3C7',border:'1px solid #FCD34D',borderRadius:8,color:'#92400E',marginBottom:16,fontSize:13}}>
            ⚠ Selecione duas vendedoras DIFERENTES para comparar.
          </div>
        )}

        {/* Tabela comparativa */}
        <div style={{background:'#fff',border:'1px solid #E5E7EB',borderRadius:12,padding:16}}>
          <table style={{width:'100%',fontSize:13,borderCollapse:'collapse'}}>
            <thead>
              <tr style={{borderBottom:'2px solid #E5E7EB',background:'#F9FAFB'}}>
                <th style={{textAlign:'left',padding:'10px',fontWeight:600,color:'#374151'}}>Métrica</th>
                <th style={{textAlign:'right',padding:'10px',fontWeight:700,color:'#1F2937'}}>{sellerA}</th>
                <th style={{textAlign:'center',padding:'10px',fontWeight:600,color:'#6B7280',width:120}}>Δ (A vs B)</th>
                <th style={{textAlign:'right',padding:'10px',fontWeight:700,color:'#1F2937'}}>{sellerB}</th>
              </tr>
            </thead>
            <tbody>
              <MetricRow label="Total de notas" valueA={data.a.notas} valueB={data.b.notas} deltaNode={deltaPill(data.deltas.notas)} />
              <MetricRow label="Notas faturadas" valueA={data.a.faturadas} valueB={data.b.faturadas} deltaNode={deltaPill(null)} />
              <MetricRow label="Valor faturado" valueA={data.a.valorFaturado} valueB={data.b.valorFaturado} deltaNode={deltaPill(data.deltas.valorFaturado)} fmtFn={fmt} />
              <MetricRow label="Ticket médio" valueA={data.a.ticketMedio} valueB={data.b.ticketMedio} deltaNode={deltaPill(data.deltas.ticketMedio)} fmtFn={fmt} />
              <MetricRow label="Orçamentos criados" valueA={data.a.orcamentos} valueB={data.b.orcamentos} deltaNode={deltaPill(null)} />
              <MetricRow label="Convertidos" valueA={data.a.convertidos} valueB={data.b.convertidos} deltaNode={deltaPill(null)} />
              <MetricRow label="Taxa de conversão" valueA={data.a.taxaConv.toFixed(1)+'%'} valueB={data.b.taxaConv.toFixed(1)+'%'} deltaNode={deltaPill(data.deltas.taxaConv, 'pp')} />
              <MetricRow label="Clientes únicos" valueA={data.a.clientesUnicos} valueB={data.b.clientesUnicos} deltaNode={deltaPill(data.deltas.clientesUnicos)} />
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.VendedorAbaComparacao = VendedorAbaComparacao;
  window.VendedorAbaComparacao = VendedorAbaComparacao;
})();