// js/components/widgets/HistoricoVendedor.jsx
// [Wave 22 v224.3 NUCLEAR EXTRACT 2026-05-23] 1121L → ~330L (-70%)
// 6 widgets extraídos · ZERO mudança lógica:
//   - js/lib/historico/calcs.js (17 factories + 9 helpers + 2 constantes)
//   - widgets/historico/EvolucaoChartFull.jsx (SVG chart + MiniSparkline)
//   - widgets/historico/RankingMetaPanel.jsx (ranking + minhaPosicao + metaInfo + comissão)
//   - widgets/historico/ConversaoPipelinePanel.jsx (conversão + pipeline)
//   - widgets/historico/ComportamentoPanel.jsx (dias semana + heatmap pico + mix pgto + mix marcas)
//   - widgets/historico/AlertasRankPanel.jsx (alertas + destaques + rankings detalhados)
//
// Este arquivo agora é ORQUESTRADOR: hooks (useMemo wrappers) + render dos 5 panels + 4 abas.
//
// [REWRITE v26.5.105 — 2026-05-07] histórico features intactas:
//   A1+A4 ranking · B1+B2 evolução · C1+C2+C4 meta + comissão · D1+D3 conversão + pipeline
//   E1+E3 dia semana + mix pgto · G1+G3 mix marcas + concentração · H1+H3 alertas
// [Wave 16 v223.42 20260520] TabBar 4 abas (Visão Geral + Diário + Comparação + Clientes)
//
// Deps runtime globals: fmt, fmtDate, saleFinalTotal, isFaturada, nid, extractBrand
(function(){
  'use strict';
  const {useState, useMemo} = React;

  // Paleta cores local (pra header + filtros + abas)
  const COLORS = {
    navy:'#1B2A4A', gold:'#B89840',
    blue:'#2563EB', blueSoft:'#EFF6FF',
    gray:'#6B7280', grayBorder:'#E4E7EC',
    text:'#1C1C28'
  };

  // [Wave 22 v224.3 + v224.55 2026-05-28] vars+check MOVED to component body (preventivo)
  // regra_validacao_helpers_runtime_quando_ordem_scripts_uncertain

  function HistoricoVendedor({sales, products, clients, user, quotes, metas, metasBase, metasEmpresa, allUsers, receivables}){
    // [v224.55 FIX-PREV-12 2026-05-28] vars+check em render time
    // regra_estender_bloco_refs_fail_loud — 1 bloco agregado
    const calcs = window.ZNX && window.ZNX.historico && window.ZNX.historico.calcs;
    const widgets = window.ZNX && window.ZNX.widgets;
    const histW = widgets && widgets.historico;
    const SectionHeader = widgets && widgets.SectionHeader;
    const KpiCard = widgets && widgets.KpiCard;
    const Tabs = widgets && widgets.Tabs;
    const VendedorAbaDiario = window.ZNX && window.ZNX.components && window.ZNX.components.VendedorAbaDiario;
    const VendedorAbaComparacao = window.ZNX && window.ZNX.components && window.ZNX.components.VendedorAbaComparacao;
    const VendedorAbaClientes = window.ZNX && window.ZNX.components && window.ZNX.components.VendedorAbaClientes;
    const _missing = [];
    if(!calcs) _missing.push('historico.calcs');
    if(!histW || !histW.EvolucaoChartFull) _missing.push('EvolucaoChartFull');
    if(!histW || !histW.RankingMetaPanel) _missing.push('RankingMetaPanel');
    if(!histW || !histW.ConversaoPipelinePanel) _missing.push('ConversaoPipelinePanel');
    if(!histW || !histW.ComportamentoPanel) _missing.push('ComportamentoPanel');
    if(!histW || !histW.AlertasRankPanel) _missing.push('AlertasRankPanel');
    if(!SectionHeader) _missing.push('SectionHeader');
    if(!KpiCard) _missing.push('KpiCard');
    if(!Tabs) _missing.push('Tabs');
    // abas Diário/Comparação/Clientes são opcionais (fallback inline)
    if(_missing.length){
      const _msg = '[HistoricoVendedor v224.3] widgets faltando: ' + _missing.join(', ');
      console.error(_msg);
      if(window.Sentry && typeof window.Sentry.captureMessage === 'function'){
        window.Sentry.captureMessage(_msg, 'error');
      }
    }
    const [activeTab, setActiveTab] = useState('overview');
    const now = new Date();
    const [mes, setMes] = useState(now.getFullYear()+'-'+String(now.getMonth()+1).padStart(2,'0'));
    const [busca, setBusca] = useState('');
    const isAdmin = user.role==='admin';

    // ── HOOKS WRAPPERS (delegam pra calcs — ZERO lógica nova) ──
    const vendedoras = useMemo(function(){return calcs.computeVendedoras(sales, allUsers);}, [sales, allUsers]);
    const vendedoraAlvo = useMemo(function(){return calcs.computeVendedoraAlvo(isAdmin, busca, user.name);}, [isAdmin, busca, user.name]);

    const salesDoMes = useMemo(function(){return calcs.computeSalesDoMes(sales, mes, vendedoraAlvo);}, [sales, mes, vendedoraAlvo]);
    const salesMesAnterior = useMemo(function(){return calcs.computeSalesMesAnterior(sales, mes, vendedoraAlvo);}, [sales, mes, vendedoraAlvo]);

    // KPIs inline (simples reduce)
    const totalNotas = salesDoMes.length;
    const totalValor = salesDoMes.reduce(function(s,v){return s+calcs.saleNet(v);}, 0);
    const ticketMedio = totalNotas ? totalValor/totalNotas : 0;
    const totalItens = salesDoMes.reduce(function(s,v){return s+(v.items||[]).reduce(function(a,i){return a+(Number(i.qty)||0);},0);}, 0);
    const prevNotas = salesMesAnterior.length;
    const prevValor = salesMesAnterior.reduce(function(s,v){return s+calcs.saleNet(v);}, 0);
    const prevTicket = prevNotas ? prevValor/prevNotas : 0;
    const prevItens = salesMesAnterior.reduce(function(s,v){return s+(v.items||[]).reduce(function(a,i){return a+(Number(i.qty)||0);},0);}, 0);

    const rankingVendedoras = useMemo(function(){return calcs.computeRankingVendedoras(sales, mes, allUsers);}, [sales, mes, allUsers]);
    const minhaPosicao = useMemo(function(){return calcs.computeMinhaPosicao(rankingVendedoras, vendedoraAlvo);}, [rankingVendedoras, vendedoraAlvo]);
    const evolucao6m = useMemo(function(){return calcs.computeEvolucao6m(sales, vendedoraAlvo, now.getFullYear(), now.getMonth());}, [sales, vendedoraAlvo, now.getFullYear(), now.getMonth()]);
    const metaInfo = useMemo(function(){return calcs.computeMetaInfo(vendedoraAlvo, metas, metasEmpresa, mes, totalValor, user.username, user.role, sales);}, [vendedoraAlvo, metas, metasEmpresa, mes, totalValor, user.username, user.role, sales]);
    const conversaoInfo = useMemo(function(){return calcs.computeConversaoInfo(quotes, vendedoraAlvo, mes);}, [quotes, vendedoraAlvo, mes]);
    const diasSemanaData = useMemo(function(){return calcs.computeDiasSemanaData(salesDoMes);}, [salesDoMes]);

    // HORAS_VISIVEIS array fixo (8h-21h)
    const HORAS_VISIVEIS = useMemo(function(){
      const a = [];
      for(let h=8;h<=21;h++) a.push(h);
      return a;
    }, []);

    const heatmapPico = useMemo(function(){return calcs.computeHeatmapPico(salesDoMes);}, [salesDoMes]);
    const mixPagamento = useMemo(function(){return calcs.computeMixPagamento(salesDoMes);}, [salesDoMes]);
    const mixMarcas = useMemo(function(){return calcs.computeMixMarcas(salesDoMes, products);}, [salesDoMes, products]);
    const alertas = useMemo(function(){return calcs.computeAlertas(sales, clients, vendedoraAlvo, salesDoMes);}, [sales, clients, vendedoraAlvo, salesDoMes]);
    const prodRank = useMemo(function(){return calcs.computeProdRank(salesDoMes, products);}, [salesDoMes, products]);
    const clienteRank = useMemo(function(){return calcs.computeClienteRank(salesDoMes, clients);}, [salesDoMes, clients]);
    const mesesDisp = useMemo(function(){return calcs.computeMesesDisp(sales, now.getFullYear(), now.getMonth());}, [sales, now.getFullYear(), now.getMonth()]);

    const fmt = window.fmt || function(v){return 'R$ '+Number(v||0).toFixed(2);};

    return (
      <div>
        {/* TabBar 4 abas (L524-537) */}
        {Tabs && (
          <div style={{marginBottom:16}}>
            <Tabs
              tabs={[
                {id:'overview', label:'Visão Geral'},
                {id:'diario', label:'Diário'},
                {id:'comparacao', label:'Comparação'},
                {id:'clientes', label:'Clientes'}
              ]}
              active={activeTab}
              onChange={setActiveTab}
            />
          </div>
        )}

        {/* ABA OVERVIEW */}
        {activeTab === 'overview' && (
          <>
            {/* HEADER (L540-563) */}
            <div className="page-header" style={{flexWrap:'wrap',gap:12}}>
              <div>
                <div className="page-title">Histórico do Vendedor</div>
                <div style={{fontSize:12,color:COLORS.gray,marginTop:2}}>
                  Performance completa · {calcs.fmtMes(mes)}
                  {vendedoraAlvo && <span style={{marginLeft:8}}>· {vendedoraAlvo}</span>}
                </div>
              </div>
              <div style={{display:'flex',gap:10,alignItems:'center',flexWrap:'wrap'}}>
                {isAdmin && (
                  <div style={{position:'relative'}}>
                    <input value={busca} onChange={function(e){setBusca(e.target.value);}} placeholder="🔍 Buscar vendedora..." list="vd-list"
                      style={{width:220,paddingLeft:12,paddingRight:12,fontSize:13,background:'#fff',border:'1px solid '+COLORS.blue+'66',borderRadius:8,color:COLORS.text,height:38}}/>
                    <datalist id="vd-list">{vendedoras.map(function(v){return <option key={v} value={v}/>;})}</datalist>
                  </div>
                )}
                {typeof SmartSelect!=='undefined'?
                  <SmartSelect width={150} value={mes} onChange={setMes} options={mesesDisp.map(function(m){return {value:m,label:calcs.fmtMes(m)};})}/>:
                  <select value={mes} onChange={function(e){setMes(e.target.value);}} style={{padding:'8px 12px',border:'1px solid '+COLORS.grayBorder,borderRadius:8,fontSize:13}}>
                    {mesesDisp.map(function(m){return <option key={m} value={m}>{calcs.fmtMes(m)}</option>;})}
                  </select>
                }
              </div>
            </div>

            {isAdmin && busca && (
              <div style={{marginBottom:16,padding:'8px 14px',background:COLORS.blueSoft,border:'1px solid '+COLORS.blue+'44',borderRadius:8,fontSize:13,color:COLORS.blue,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                <span>Vendedora selecionada: <strong>{busca}</strong> — {salesDoMes.length} venda{salesDoMes.length!==1?'s':''} no mês</span>
                <button onClick={function(){setBusca('');}} style={{background:'none',border:'none',color:COLORS.gray,cursor:'pointer',fontSize:18,lineHeight:1}}>×</button>
              </div>
            )}

            {/* KPIs (L575-580) */}
            <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:18}}>
              <KpiCard label="Notas Emitidas" value={totalNotas} prev={prevNotas}/>
              <KpiCard label="Valor Total" value={totalValor} prev={prevValor} isCurrency/>
              <KpiCard label="Ticket Médio" value={ticketMedio} prev={prevTicket} isCurrency/>
              <KpiCard label="Peças Vendidas" value={totalItens} prev={prevItens}/>
            </div>

            {/* RankingMetaPanel — ranking + minhaPosicao + metaInfo + comissão */}
            {histW && histW.RankingMetaPanel && (
              <histW.RankingMetaPanel
                rankingVendedoras={rankingVendedoras}
                minhaPosicao={minhaPosicao}
                metaInfo={metaInfo}
                vendedoraAlvo={vendedoraAlvo}
                isAdmin={isAdmin}
                mes={mes}
              />
            )}

            {/* EvolucaoChart 6 meses (L724-748) */}
            <SectionHeader icon="📈" title="Evolução dos últimos 6 meses" subtitle="Faturamento mês a mês — mês atual em destaque"/>
            <div style={{background:'#fff',border:'1px solid '+COLORS.grayBorder,borderRadius:12,padding:18,marginBottom:8}}>
              {histW && histW.EvolucaoChartFull && <histW.EvolucaoChartFull data={evolucao6m} color={COLORS.blue}/>}
              {(function(){
                const atual = (evolucao6m[evolucao6m.length-1] && evolucao6m[evolucao6m.length-1].valor) || 0;
                const anterior = (evolucao6m[evolucao6m.length-2] && evolucao6m[evolucao6m.length-2].valor) || 0;
                const mesesComDado = evolucao6m.filter(function(d){return d.valor>0;}).length;
                if(mesesComDado<=1){
                  return (
                    <div style={{textAlign:'center',marginTop:8,fontSize:12,color:COLORS.gray,fontStyle:'italic'}}>
                      💡 Histórico desde {(evolucao6m.find(function(d){return d.valor>0;}) && evolucao6m.find(function(d){return d.valor>0;}).label)||'Mai'}/{new Date().getFullYear()} — gráfico ganha forma com o tempo
                    </div>
                  );
                }
                if(anterior<=0) return null;
                const variacao = ((atual-anterior)/anterior)*100;
                return (
                  <div style={{textAlign:'center',marginTop:8,fontSize:13,color:COLORS.gray}}>
                    {variacao>=0?'📈':'📉'} <strong style={{color:calcs.pctColor(variacao)}}>{calcs.fmtPct(variacao)}</strong> vs mês anterior
                  </div>
                );
              })()}
            </div>

            {/* ConversaoPipelinePanel */}
            {histW && histW.ConversaoPipelinePanel && (
              <histW.ConversaoPipelinePanel
                conversaoInfo={conversaoInfo}
                vendedoraAlvo={vendedoraAlvo}
                clients={clients}
              />
            )}

            {/* ComportamentoPanel — dias semana + heatmap + mix pgto + mix marcas */}
            {histW && histW.ComportamentoPanel && (
              <histW.ComportamentoPanel
                diasSemanaData={diasSemanaData}
                heatmapPico={heatmapPico}
                mixPagamento={mixPagamento}
                mixMarcas={mixMarcas}
                HORAS_VISIVEIS={HORAS_VISIVEIS}
                totalNotas={totalNotas}
              />
            )}

            {/* AlertasRankPanel — alertas + destaques + rankings detalhados */}
            {histW && histW.AlertasRankPanel && (
              <histW.AlertasRankPanel
                alertas={alertas}
                prodRank={prodRank}
                clienteRank={clienteRank}
                mixMarcas={mixMarcas}
                totalNotas={totalNotas}
              />
            )}
          </>
        )}

        {/* ABAS Diário / Comparação / Clientes */}
        {activeTab === 'diario' && VendedorAbaDiario && (
          <VendedorAbaDiario vendedoraAlvo={vendedoraAlvo} sales={sales} periodDays={30}/>
        )}
        {activeTab === 'comparacao' && VendedorAbaComparacao && (
          <VendedorAbaComparacao vendedoraAlvo={vendedoraAlvo} vendedorasList={vendedoras} sales={sales} quotes={quotes} periodDays={30}/>
        )}
        {activeTab === 'clientes' && VendedorAbaClientes && (
          <VendedorAbaClientes vendedoraAlvo={vendedoraAlvo} sales={sales} clients={clients} periodDays={90}/>
        )}
      </div>
    );
  }

  // ── EXPORT ────────────────────────────────────────────────────────
  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.HistoricoVendedor = HistoricoVendedor;
  window.HistoricoVendedor = HistoricoVendedor;
  window.ZNX.refactor_phase_5_loaded = window.ZNX.refactor_phase_5_loaded || {};
  window.ZNX.refactor_phase_5_loaded.HistoricoVendedor = true;
  window.ZNX.refactor_phase_5_loaded.HistoricoVendedor_v223_42_wave16 = true;
  // [Wave 22 marker v224.3] confirma extract executado
  window.HistoricoVendedor_v224_3_wave22 = true;
})();