// js/components/widgets/historico/ComportamentoPanel.jsx
// [Wave 22 v224.3 NUCLEAR] Comportamento de venda + heatmap horários de pico
// Extraído de HistoricoVendedor.jsx:
//   - Dias semana + Mix pagamento + Mix marcas (L808-866)
//   - Heatmap horários pico + turnos + pico por dia (L872-981)
(function(){
  'use strict';
  const COLORS = {
    navy:'#1B2A4A', gold:'#B89840', goldSoft:'#FEF9E7',
    blue:'#2563EB',
    green:'#15803D',
    red:'#DC2626',
    orange:'#EA580C',
    purple:'#7C3AED',
    gray:'#6B7280', graySoft:'#F8FAFC', 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 ComportamentoPanel({diasSemanaData, heatmapPico, mixPagamento, mixMarcas, HORAS_VISIVEIS, totalNotas}){
    // [v224.55 FIX-PREV-17 2026-05-28] vars+check em render time
    const calcs = window.ZNX && window.ZNX.historico && window.ZNX.historico.calcs;
    const widgets = window.ZNX && window.ZNX.widgets;
    const _missing = [];
    if(!calcs) _missing.push('historico.calcs');
    if(!widgets || !widgets.SectionHeader) _missing.push('SectionHeader');
    if(!widgets || !widgets.WeekdayBars) _missing.push('WeekdayBars');
    if(!widgets || !widgets.DonutChart) _missing.push('DonutChart');
    if(_missing.length){
      const _msg = '[ComportamentoPanel] deps faltando: ' + _missing.join(', ');
      console.error(_msg);
      if(window.Sentry && typeof window.Sentry.captureMessage === 'function'){
        window.Sentry.captureMessage(_msg, 'error');
      }
    }
    const WEEKDAYS = (calcs && calcs.WEEKDAYS) || ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'];
    const SectionHeader = widgets && widgets.SectionHeader;
    const WeekdayBars = widgets && widgets.WeekdayBars;
    const DonutChart = widgets && widgets.DonutChart;
    const fmt = window.fmt || function(v){return 'R$ '+Number(v||0).toFixed(2);};
    return (
      <>
        {/* DIAS SEMANA + MIX PAGAMENTO + MIX MARCAS (L808-866) */}
        {totalNotas>0 && (
          <>
            <SectionHeader icon="📊" title="Comportamento de venda" subtitle="Dia da semana, forma de pagamento, marcas"/>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14,marginBottom:8}}>
              {/* Dia da semana */}
              <div style={{background:'#fff',border:'1px solid '+COLORS.grayBorder,borderRadius:12,padding:18}}>
                <div style={{fontSize:11,color:COLORS.gray,fontWeight:600,textTransform:'uppercase',letterSpacing:0.5,marginBottom:10}}>Vendas por dia da semana</div>
                {WeekdayBars && <WeekdayBars data={diasSemanaData}/>}
              </div>
              {/* Mix pagamento */}
              <div style={{background:'#fff',border:'1px solid '+COLORS.grayBorder,borderRadius:12,padding:18}}>
                <div style={{fontSize:11,color:COLORS.gray,fontWeight:600,textTransform:'uppercase',letterSpacing:0.5,marginBottom:10}}>Mix de pagamento</div>
                {[
                  {label:'🔵 Pix', pct:mixPagamento.pix.pct, valor:mixPagamento.pix.valor, color:COLORS.blue},
                  {label:'💵 Dinheiro', pct:mixPagamento.cash.pct, valor:mixPagamento.cash.valor, color:COLORS.green},
                  {label:'📅 À prazo', pct:mixPagamento.prazo.pct, valor:mixPagamento.prazo.valor, color:COLORS.orange},
                  {label:'💳 Outros', pct:mixPagamento.outros.pct, valor:mixPagamento.outros.valor, color:COLORS.gray}
                ].filter(function(m){return m.valor>0;}).map(function(m,i){
                  return (
                    <div key={i} style={{marginBottom:10}}>
                      <div style={{display:'flex',justifyContent:'space-between',fontSize:11,marginBottom:3}}>
                        <span style={{fontWeight:600,color:COLORS.text}}>{m.label}</span>
                        <span style={{fontWeight:700,color:m.color}}>{m.pct.toFixed(0)}%</span>
                      </div>
                      <div style={{height:8,background:'#F3F4F6',borderRadius:4,overflow:'hidden'}}>
                        <div style={{width:m.pct+'%',height:'100%',background:m.color,borderRadius:4}}/>
                      </div>
                      <div style={{fontSize:10,color:COLORS.gray,marginTop:2,textAlign:'right'}}>{fmt(m.valor)}</div>
                    </div>
                  );
                })}
              </div>
              {/* Mix marcas (donut) */}
              <div style={{background:'#fff',border:'1px solid '+COLORS.grayBorder,borderRadius:12,padding:18}}>
                <div style={{fontSize:11,color:COLORS.gray,fontWeight:600,textTransform:'uppercase',letterSpacing:0.5,marginBottom:10}}>Mix de marcas</div>
                {mixMarcas.arr.length===0 ?
                  <div style={{fontSize:12,color:COLORS.gray}}>Sem dados</div>
                :
                  <div style={{display:'flex',gap:12,alignItems:'center'}}>
                    {DonutChart && <DonutChart data={mixMarcas.arr} total={mixMarcas.total}/>}
                    <div style={{flex:1,minWidth:0}}>
                      {mixMarcas.arr.slice(0,5).map(function(m,i){
                        const palette = [COLORS.gold, COLORS.blue, COLORS.purple, COLORS.green, COLORS.orange];
                        return (
                          <div key={m.marca} style={{display:'flex',alignItems:'center',gap:6,fontSize:11,marginBottom:4}}>
                            <span style={{width:8,height:8,borderRadius:'50%',background:palette[i%palette.length],flexShrink:0}}/>
                            <span style={{flex:1,minWidth:0,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',color:COLORS.text,fontWeight:500}}>{m.marca}</span>
                            <span style={{fontWeight:700,color:COLORS.text}}>{((m.valor/mixMarcas.total)*100).toFixed(0)}%</span>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                }
                {mixMarcas.concentracao>0 && (
                  <div style={{marginTop:10,paddingTop:10,borderTop:'1px solid '+COLORS.grayBorder,fontSize:11,color:COLORS.gray}}>
                    Top 3 marcas concentram <strong style={{color:mixMarcas.concentracao>=70?COLORS.orange:COLORS.text}}>{mixMarcas.concentracao.toFixed(0)}%</strong> do faturamento
                  </div>
                )}
              </div>
            </div>
          </>
        )}

        {/* HORÁRIOS DE PICO heatmap (L872-981) */}
        {heatmapPico && heatmapPico.totalComHora>0 && (
          <>
            <SectionHeader icon="🕐" title="Horários de pico" subtitle={'Quando você (ou o time) mais vende — baseado em '+heatmapPico.totalComHora+' vendas com hora registrada'}/>
            {/* Insights principais */}
            <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:14,marginBottom:14}}>
              {/* Card pico exato */}
              <div style={{background:'linear-gradient(135deg,'+COLORS.goldSoft+',#FFFBEB)',border:'1px solid '+COLORS.gold+'55',borderRadius:12,padding:18,display:'flex',alignItems:'center',gap:18}}>
                <div style={{fontSize:48}}>🔥</div>
                <div style={{flex:1}}>
                  <div style={{fontSize:11,color:COLORS.gold,fontWeight:700,textTransform:'uppercase',letterSpacing:0.5}}>Horário de pico</div>
                  <div style={{fontSize:20,fontWeight:900,color:COLORS.navy,marginTop:3}}>
                    {WEEKDAYS[heatmapPico.melhorDayHour.dow]} · {String(heatmapPico.melhorDayHour.hour).padStart(2,'0')}h–{String(heatmapPico.melhorDayHour.hour+1).padStart(2,'0')}h
                  </div>
                  <div style={{fontSize:12,color:COLORS.text,marginTop:3}}>
                    <strong>{heatmapPico.melhorDayHour.qty} venda{heatmapPico.melhorDayHour.qty>1?'s':''}</strong> nesse horário — <span style={{color:COLORS.gold,fontWeight:700}}>concentre presença/atendimento aqui</span>
                  </div>
                </div>
              </div>
              {/* Cards turnos */}
              <div style={{background:'#fff',border:'1px solid '+COLORS.grayBorder,borderRadius:12,padding:14}}>
                <div style={{fontSize:10,color:COLORS.gray,fontWeight:600,textTransform:'uppercase',letterSpacing:0.5,marginBottom:8}}>Distribuição por turno</div>
                {[
                  {label:'🌅 Manhã (8h–12h)', pct:heatmapPico.manha.pct, qty:heatmapPico.manha.qty, color:COLORS.blue},
                  {label:'☀️ Tarde (12h–18h)', pct:heatmapPico.tarde.pct, qty:heatmapPico.tarde.qty, color:COLORS.gold},
                  {label:'🌙 Noite (18h–22h)', pct:heatmapPico.noite.pct, qty:heatmapPico.noite.qty, color:COLORS.purple}
                ].concat(heatmapPico.foraComercial.qty>0?[{label:'🌃 Fora horário', pct:heatmapPico.foraComercial.pct, qty:heatmapPico.foraComercial.qty, color:COLORS.gray}]:[]).map(function(t,i){
                  return (
                    <div key={i} style={{marginBottom:6}}>
                      <div style={{display:'flex',justifyContent:'space-between',fontSize:11,marginBottom:2}}>
                        <span style={{fontWeight:600,color:COLORS.text}}>{t.label}</span>
                        <span style={{fontWeight:700,color:t.color}}>{t.pct.toFixed(0)}% · {t.qty}</span>
                      </div>
                      <div style={{height:6,background:'#F3F4F6',borderRadius:3,overflow:'hidden'}}>
                        <div style={{width:t.pct+'%',height:'100%',background:t.color,borderRadius:3}}/>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
            {/* Heatmap visual: 7 dias × 14 horas */}
            <div style={{background:'#fff',border:'1px solid '+COLORS.grayBorder,borderRadius:12,padding:18,marginBottom:8,overflowX:'auto'}}>
              <div style={{fontSize:10,color:COLORS.gray,fontWeight:600,textTransform:'uppercase',letterSpacing:0.5,marginBottom:10}}>Mapa de calor — vendas por dia × hora</div>
              <div style={{display:'grid',gridTemplateColumns:'40px repeat(14,1fr)',gap:3,fontSize:9,color:COLORS.gray,marginBottom:4,minWidth:480}}>
                <div></div>
                {HORAS_VISIVEIS.map(function(h){return <div key={h} style={{textAlign:'center',fontWeight:600}}>{String(h).padStart(2,'0')}h</div>;})}
              </div>
              {(function(){
                let maxCell = 0;
                for(let d=0;d<7;d++){
                  for(const h of HORAS_VISIVEIS){
                    if(heatmapPico.matrix[d][h]>maxCell) maxCell = heatmapPico.matrix[d][h];
                  }
                }
                if(maxCell===0) maxCell = 1;
                return WEEKDAYS.map(function(dlabel,dow){
                  return (
                    <div key={dow} style={{display:'grid',gridTemplateColumns:'40px repeat(14,1fr)',gap:3,marginBottom:3,minWidth:480}}>
                      <div style={{fontSize:11,fontWeight:700,color:COLORS.navy,display:'flex',alignItems:'center'}}>{dlabel}</div>
                      {HORAS_VISIVEIS.map(function(h){
                        const qty = heatmapPico.matrix[dow][h];
                        const intensity = qty/maxCell;
                        let bg = '#F3F4F6';
                        if(qty>0){
                          if(intensity>=0.8) bg = COLORS.gold;
                          else if(intensity>=0.5) bg = '#D4AF60';
                          else if(intensity>=0.25) bg = '#F0C674';
                          else bg = '#FFE5A0';
                        }
                        const isMax = dow===heatmapPico.melhorDayHour.dow && h===heatmapPico.melhorDayHour.hour;
                        return (
                          <div key={h} title={dlabel+' '+String(h).padStart(2,'0')+'h: '+qty+' venda'+(qty!==1?'s':'')}
                            style={{height:24,background:bg,borderRadius:3,display:'flex',alignItems:'center',justifyContent:'center',fontSize:9,fontWeight:700,color:qty>0?COLORS.navy:COLORS.gray,border:isMax?'2px solid '+COLORS.red:'none',cursor:'default',transition:'transform .15s'}}>
                            {qty>0?qty:''}
                          </div>
                        );
                      })}
                    </div>
                  );
                });
              })()}
              <div style={{marginTop:10,display:'flex',gap:10,fontSize:10,color:COLORS.gray,justifyContent:'center',alignItems:'center'}}>
                <span style={{display:'flex',alignItems:'center',gap:4}}><span style={{width:14,height:10,background:COLORS.gold,borderRadius:2}}/>Pico</span>
                <span style={{display:'flex',alignItems:'center',gap:4}}><span style={{width:14,height:10,background:'#F0C674',borderRadius:2}}/>Médio</span>
                <span style={{display:'flex',alignItems:'center',gap:4}}><span style={{width:14,height:10,background:'#FFE5A0',borderRadius:2}}/>Baixo</span>
                <span style={{display:'flex',alignItems:'center',gap:4}}><span style={{width:14,height:10,background:'#F3F4F6',borderRadius:2,border:'1px solid #E4E7EC'}}/>Sem vendas</span>
                <span style={{display:'flex',alignItems:'center',gap:4}}><span style={{width:14,height:10,background:COLORS.gold,border:'2px solid '+COLORS.red,borderRadius:2}}/>Pico absoluto</span>
              </div>
            </div>
            {/* Pico por dia */}
            {heatmapPico.picoPorDia.length>0 && (
              <div style={{background:'#fff',border:'1px solid '+COLORS.grayBorder,borderRadius:12,padding:18,marginBottom:8}}>
                <div style={{fontSize:10,color:COLORS.gray,fontWeight:600,textTransform:'uppercase',letterSpacing:0.5,marginBottom:10}}>Horário pico de cada dia</div>
                <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(140px,1fr))',gap:10}}>
                  {heatmapPico.picoPorDia.map(function(d){
                    return (
                      <div key={d.dow} style={{padding:10,background:COLORS.graySoft,borderRadius:8,border:'1px solid '+COLORS.grayBorder}}>
                        <div style={{fontSize:11,fontWeight:700,color:COLORS.navy}}>{d.label}</div>
                        <div style={{fontSize:13,fontWeight:800,color:COLORS.gold,marginTop:3}}>
                          {d.maxHour!==null?String(d.maxHour).padStart(2,'0')+'h–'+String(d.maxHour+1).padStart(2,'0')+'h':'—'}
                        </div>
                        <div style={{fontSize:10,color:COLORS.gray,marginTop:1}}>{d.maxQty} venda{d.maxQty>1?'s':''} · total {d.total} no dia</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.ComportamentoPanel = ComportamentoPanel;
})();