// js/components/widgets/historico/AlertasRankPanel.jsx
// [Wave 22 v224.3 NUCLEAR] Alertas inteligentes + destaques + rankings detalhados
// Extraído de HistoricoVendedor.jsx:
//   - Alertas (concentração + VIPs sumidos + emRisco) L986-1044
//   - Destaques do mês (produto + marca + cliente campeão) L1049-1070
//   - Rankings detalhados (prodRank + mixMarcas + clienteRank) L1075-1096 [RankCard runtime]
(function(){
  'use strict';
  const COLORS = {
    navy:'#1B2A4A', gold:'#B89840', goldSoft:'#FEF9E7',
    blue:'#2563EB',
    red:'#DC2626', redSoft:'#FEE2E2',
    orange:'#EA580C', orangeSoft:'#FFEDD5',
    gray:'#6B7280', grayBorder:'#E4E7EC',
    text:'#1C1C28'
  };

  // [v224.73 + v224.55] vars+check MOVED to component body
  function AlertasRankPanel({alertas, prodRank, clienteRank, mixMarcas, totalNotas}){
    const widgets = window.ZNX && window.ZNX.widgets;
    const SectionHeader = widgets && widgets.SectionHeader;
    if(!SectionHeader){
      const _msg = '[AlertasRankPanel 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);};
    return (
      <>
        {/* ALERTAS INTELIGENTES (L986-1044) */}
        {alertas && (alertas.vipsSumidos.length>0 || alertas.concentracaoTopCliente>=30 || alertas.emRisco.length>0) && (
          <>
            <SectionHeader icon="⚠️" title="Alertas inteligentes" subtitle="Atenção nesses pontos pra não perder vendas"/>
            <div style={{marginBottom:8}}>
              {/* Concentração risco */}
              {alertas.concentracaoTopCliente>=30 && (
                <div style={{background:COLORS.orangeSoft,border:'1px solid '+COLORS.orange+'55',borderRadius:10,padding:'12px 16px',marginBottom:8,display:'flex',alignItems:'center',gap:12}}>
                  <span style={{fontSize:18}}>📊</span>
                  <div style={{flex:1}}>
                    <div style={{fontSize:13,fontWeight:700,color:COLORS.orange}}>Concentração de risco em 1 cliente</div>
                    <div style={{fontSize:12,color:COLORS.text,marginTop:2}}><strong>{alertas.top1Nome}</strong> representa <strong>{alertas.concentracaoTopCliente.toFixed(0)}%</strong> das vendas do mês ({fmt(alertas.top1Mes)}). Diversifique pra não depender de 1 só cliente.</div>
                  </div>
                </div>
              )}
              {/* VIPs sumidos */}
              {alertas.vipsSumidos.length>0 && (
                <div style={{background:COLORS.redSoft,border:'1px solid '+COLORS.red+'55',borderRadius:10,padding:'14px 16px',marginBottom:8}}>
                  <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
                    <span style={{fontSize:18}}>👑</span>
                    <span style={{fontSize:13,fontWeight:700,color:COLORS.red}}>Top clientes sumiram ({alertas.vipsSumidos.length})</span>
                  </div>
                  {alertas.vipsSumidos.map(function(v){
                    return (
                      <div key={v.id} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'6px 0',borderBottom:'1px solid rgba(220,38,38,0.1)',fontSize:12}}>
                        <div>
                          <div style={{fontWeight:600,color:COLORS.text}}>{v.name}</div>
                          <div style={{fontSize:10,color:COLORS.gray,marginTop:1}}>Total histórico: {fmt(v.total)} {v.phone&&<span style={{marginLeft:6}}>📱 {v.phone}</span>}</div>
                        </div>
                        <div style={{fontWeight:800,color:COLORS.red}}>{v.dias}d sem comprar</div>
                      </div>
                    );
                  })}
                </div>
              )}
              {/* Em risco geral */}
              {alertas.emRisco.length>0 && (
                <div style={{background:COLORS.goldSoft,border:'1px solid '+COLORS.gold+'55',borderRadius:10,padding:'14px 16px',marginBottom:8}}>
                  <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
                    <span style={{fontSize:18}}>⏰</span>
                    <span style={{fontSize:13,fontWeight:700,color:COLORS.gold}}>Clientes que precisam atenção ({alertas.emRisco.length})</span>
                  </div>
                  <div style={{maxHeight:240,overflow:'auto'}}>
                    {alertas.emRisco.slice(0,10).map(function(r,i){
                      const urgente = r.dias>=31, alerta = r.dias>=15;
                      const c = urgente?COLORS.red:alerta?COLORS.orange:COLORS.gold;
                      return (
                        <div key={r.name+i} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'6px 0',borderBottom:'1px solid rgba(184,152,64,0.15)',fontSize:12}}>
                          <div style={{flex:1,minWidth:0}}>
                            <div style={{fontWeight:600,color:COLORS.text,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{r.name}</div>
                            <div style={{fontSize:10,color:COLORS.gray,marginTop:1}}>Total já comprado: {fmt(r.total)}{r.phone&&<span style={{marginLeft:6}}>📱 {r.phone}</span>}</div>
                          </div>
                          <div style={{fontWeight:800,color:c,marginLeft:10,whiteSpace:'nowrap'}}>{r.dias}d</div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
            </div>
          </>
        )}

        {/* DESTAQUES DO MÊS (L1049-1070) */}
        {totalNotas>0 && prodRank && mixMarcas && clienteRank && (
          <>
            <SectionHeader icon="🌟" title="Destaques do mês"/>
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14,marginBottom:8}}>
              <div style={{background:'#fff',border:'1px solid '+COLORS.gold+'55',borderRadius:10,padding:'14px 18px'}}>
                <div style={{fontSize:10,color:COLORS.gray,textTransform:'uppercase',letterSpacing:1,marginBottom:6}}>🥇 Produto Campeão</div>
                <div style={{fontSize:14,fontWeight:700,color:COLORS.navy}}>{(prodRank[0] && prodRank[0].nome) || '—'}</div>
                <div style={{fontSize:12,color:COLORS.gray,marginTop:4}}>{(prodRank[0] && prodRank[0].qty)||0} peças · {fmt((prodRank[0] && prodRank[0].valor)||0)}</div>
              </div>
              <div style={{background:'#fff',border:'1px solid '+COLORS.gold+'55',borderRadius:10,padding:'14px 18px'}}>
                <div style={{fontSize:10,color:COLORS.gray,textTransform:'uppercase',letterSpacing:1,marginBottom:6}}>🏆 Marca Líder</div>
                <div style={{fontSize:14,fontWeight:700,color:COLORS.navy}}>{(mixMarcas.top3[0] && mixMarcas.top3[0].marca) || '—'}</div>
                <div style={{fontSize:12,color:COLORS.gray,marginTop:4}}>{(mixMarcas.top3[0] && mixMarcas.top3[0].qty)||0} peças · {fmt((mixMarcas.top3[0] && mixMarcas.top3[0].valor)||0)}</div>
              </div>
              <div style={{background:'#fff',border:'1px solid '+COLORS.gold+'55',borderRadius:10,padding:'14px 18px'}}>
                <div style={{fontSize:10,color:COLORS.gray,textTransform:'uppercase',letterSpacing:1,marginBottom:6}}>👑 Melhor Cliente</div>
                <div style={{fontSize:14,fontWeight:700,color:COLORS.navy}}>{(clienteRank[0] && clienteRank[0].nome) || '—'}</div>
                <div style={{fontSize:12,color:COLORS.gray,marginTop:4}}>{(clienteRank[0] && clienteRank[0].notas)||0} nota{((clienteRank[0] && clienteRank[0].notas)||0)>1?'s':''} · {fmt((clienteRank[0] && clienteRank[0].valor)||0)}</div>
              </div>
            </div>
          </>
        )}

        {/* RANKINGS DETALHADOS (L1075-1096) — usa RankCard runtime global */}
        {totalNotas>0 && typeof RankCard!=='undefined' && (
          <>
            <SectionHeader icon="📋" title="Rankings detalhados"/>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:16,marginBottom:24}}>
              <RankCard
                title="Produtos Mais Vendidos" icon="📦" color={COLORS.blue}
                rows={prodRank.map(function(r){var n=Object.assign({},r);n.qtyFmt=r.qty+' un.';n.valorFmt=fmt(r.valor);return n;})}
                cols={[{k:'pos',label:'#'},{k:'nome',label:'Produto'},{k:'qtyFmt',label:'Qtd',right:true,orange:true,bold:true},{k:'valorFmt',label:'Total',right:true,gold:true}]}
              />
              <RankCard
                title="Marcas Mais Vendidas" icon="🏷️" color={COLORS.blue}
                rows={mixMarcas.arr.map(function(r){var n=Object.assign({},r);n.qtyFmt=r.qty+' un.';n.valorFmt=fmt(r.valor);return n;})}
                cols={[{k:'pos',label:'#'},{k:'marca',label:'Marca'},{k:'qtyFmt',label:'Peças',right:true,orange:true,bold:true},{k:'valorFmt',label:'Total',right:true,gold:true}]}
              />
              <RankCard
                title="Clientes Mais Atendidos" icon="👤" color={COLORS.blue}
                rows={clienteRank.map(function(r){var n=Object.assign({},r);n.notasFmt=r.notas+' nota'+(r.notas>1?'s':'');n.valorFmt=fmt(r.valor);return n;})}
                cols={[{k:'pos',label:'#'},{k:'nome',label:'Cliente'},{k:'notasFmt',label:'Notas',right:true,orange:true},{k:'valorFmt',label:'Total',right:true,gold:true,bold:true}]}
              />
            </div>
          </>
        )}
      </>
    );
  }

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