// js/components/widgets/regioes/MetricasUFPanel.jsx
// [Wave 20 v224.2 NUCLEAR] Métricas operacionais por UF
// Extraído de RegioesAnalytics.jsx:
//   - Mix marcas (L848-868) [C2]
//   - Logística (L870-902) [D2+D4]
//   - Clientes por UF (L904-924) [E1-4]
//   - Tempo retirada (L926-943) [C4]
//   - Devoluções placeholder (L946-951) [D3]
//   - Disclaimer privacy (L973-978)
(function() {
  'use strict';

  const C = {
    navy:'#1B2A4A', gold:'#B89840',
    blue:'#2563EB', blueSoft:'#EFF6FF',
    green:'#15803D',
    orange:'#EA580C',
    purple:'#7C3AED', purpleSoft:'#F3E8FF',
    gray:'#6B7280', grayLight:'#9CA3AF', graySoft:'#F8FAFC', grayBorder:'#E4E7EC',
    text:'#1C1C28'
  };

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

  function MetricasUFPanel({mixMarcasPorUf, logisticaPorUf, clientesPorUf, tempoRetiradaPorUf, isAdmin}){
    // [v224.55 FIX-PREV-23 2026-05-28] vars+check em render time
    const calcs = window.ZNX && window.ZNX.regioes && window.ZNX.regioes.calcs;
    const widgets = window.ZNX && window.ZNX.widgets;
    const _missing = [];
    if (!calcs) _missing.push('regioes.calcs');
    if (!widgets || !widgets.SectionHeader) _missing.push('SectionHeader');
    if (_missing.length) {
      const _msg = '[MetricasUFPanel] deps faltando: ' + _missing.join(', ');
      console.error(_msg);
      if (window.Sentry && typeof window.Sentry.captureMessage === 'function') {
        window.Sentry.captureMessage(_msg, 'error');
      }
    }
    const UF_NAMES = (calcs && calcs.UF_NAMES) || {};
    const SectionHeader = widgets && widgets.SectionHeader;
    const fmt = window.fmt || function(v){return 'R$ '+Number(v||0).toFixed(2);};
    return (
      <>
        {/* C2: Mix de marcas top 5 estados (L849-868) */}
        {mixMarcasPorUf && Object.keys(mixMarcasPorUf).length>0&&(
          <>
            <SectionHeader icon="🏷️" title="Marcas favoritas por estado" subtitle="Top 3 marcas dos top 5 estados"/>
            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(180px,1fr))',gap:14,marginBottom:8}}>
              {Object.entries(mixMarcasPorUf).map(function(entry){
                const uf = entry[0], marcas = entry[1];
                return (
                  <div key={uf} style={{background:'#fff',border:'1px solid '+C.grayBorder,borderRadius:10,padding:14}}>
                    <div style={{fontSize:13,fontWeight:800,color:C.navy,marginBottom:8}}>{uf} <span style={{fontSize:10,color:C.gray,fontWeight:400}}>{UF_NAMES[uf]}</span></div>
                    {marcas.length===0?<div style={{fontSize:11,color:C.gray}}>Sem dados</div>:
                      marcas.map(function(pair,i){
                        const m = pair[0], v = pair[1];
                        return (
                          <div key={m} style={{display:'flex',justifyContent:'space-between',fontSize:11,padding:'3px 0',borderBottom:i<marcas.length-1?'1px solid #F3F4F6':'none'}}>
                            <span style={{fontWeight:600,color:C.text}}>{i+1}. {m}</span>
                            <span style={{color:C.gold,fontWeight:600}}>{fmt(v)}</span>
                          </div>
                        );
                      })
                    }
                  </div>
                );
              })}
            </div>
          </>
        )}

        {/* D2 + D4: Logística por UF (L870-902) */}
        {logisticaPorUf && Object.keys(logisticaPorUf).length>0&&(
          <>
            <SectionHeader icon="📦" title="Logística por estado" subtitle="Tipo de envio + embalagem (top 10 estados)"/>
            <div style={{background:'#fff',border:'1px solid '+C.grayBorder,borderRadius:12,padding:18,marginBottom:8,overflowX:'auto'}}>
              <div style={{display:'grid',gridTemplateColumns:'80px 60px 1fr 1fr',gap:12,fontSize:11,fontWeight:700,color:C.gray,marginBottom:6,paddingBottom:6,borderBottom:'1px solid '+C.grayBorder,minWidth:600}}>
                <div>UF</div><div>Total</div><div>Tipo de envio</div><div>Embalagem (retirada)</div>
              </div>
              {Object.entries(logisticaPorUf).map(function(entry){
                const uf = entry[0], info = entry[1];
                return (
                  <div key={uf} style={{display:'grid',gridTemplateColumns:'80px 60px 1fr 1fr',gap:12,fontSize:11,padding:'6px 0',alignItems:'center',minWidth:600,borderBottom:'1px solid #F3F4F6'}}>
                    <div style={{fontWeight:700,color:C.navy}}>{uf}</div>
                    <div style={{color:C.text,fontWeight:600}}>{info.total}</div>
                    <div>
                      {Object.entries(info.tipos).filter(function(p){return p[1]>0;}).map(function(p){
                        const t = p[0], n = p[1];
                        return <span key={t} style={{display:'inline-block',padding:'2px 6px',background:'#F3F4F6',borderRadius:4,fontSize:10,marginRight:4,marginBottom:2}}>{t}: {n}</span>;
                      })}
                    </div>
                    <div>
                      {info.embs.Sacola+info.embs.Caixa===0?<span style={{color:C.gray,fontSize:10}}>—</span>:(
                        <>
                          {info.embs.Sacola>0&&<span style={{display:'inline-block',padding:'2px 6px',background:C.blueSoft,borderRadius:4,fontSize:10,marginRight:4,color:C.blue}}>🛍️ {info.embs.Sacola}</span>}
                          {info.embs.Caixa>0&&<span style={{display:'inline-block',padding:'2px 6px',background:C.purpleSoft,borderRadius:4,fontSize:10,color:C.purple}}>📦 {info.embs.Caixa}</span>}
                        </>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </>
        )}

        {/* E1+E2+E3+E4: Análise cliente por UF (L904-924) */}
        {clientesPorUf && Object.keys(clientesPorUf).length>0&&(
          <>
            <SectionHeader icon="👥" title="Clientes por estado" subtitle="LTV · recorrência · novos · em risco (histórico completo)"/>
            <div style={{background:'#fff',border:'1px solid '+C.grayBorder,borderRadius:12,padding:18,marginBottom:8,overflowX:'auto'}}>
              <div style={{display:'grid',gridTemplateColumns:'80px 80px 1fr 80px 80px 80px',gap:10,fontSize:11,fontWeight:700,color:C.gray,marginBottom:6,paddingBottom:6,borderBottom:'1px solid '+C.grayBorder,minWidth:680}}>
                <div>UF</div><div>Clientes</div><div>LTV médio</div><div>Recorrência</div><div>Novos 30d</div><div>Em risco</div>
              </div>
              {Object.entries(clientesPorUf).map(function(entry){
                const uf = entry[0], info = entry[1];
                return (
                  <div key={uf} style={{display:'grid',gridTemplateColumns:'80px 80px 1fr 80px 80px 80px',gap:10,fontSize:11,padding:'6px 0',alignItems:'center',minWidth:680,borderBottom:'1px solid #F3F4F6'}}>
                    <div style={{fontWeight:700,color:C.navy}}>{uf}</div>
                    <div style={{color:C.text}}>{info.totalClientes}</div>
                    <div style={{color:C.gold,fontWeight:600}}>{fmt(info.ltvMedio)}</div>
                    <div><span style={{color:info.taxaRecorrencia>=30?C.green:info.taxaRecorrencia>=15?C.blue:C.gray,fontWeight:600}}>{info.taxaRecorrencia.toFixed(0)}%</span></div>
                    <div style={{color:info.recem>0?C.green:C.gray,fontWeight:info.recem>0?700:400}}>{info.recem||'—'}</div>
                    <div style={{color:info.emRisco>0?C.orange:C.gray,fontWeight:info.emRisco>0?700:400}}>{info.emRisco||'—'}</div>
                  </div>
                );
              })}
            </div>
          </>
        )}

        {/* C4: Tempo de retirada (L926-943) */}
        {tempoRetiradaPorUf && Object.values(tempoRetiradaPorUf).some(function(v){return v!==null;})&&(
          <>
            <SectionHeader icon="⏱️" title="Tempo médio até pagamento" subtitle="Aproximação: tempo entre criação da venda e marcação como Paga"/>
            <div style={{background:'#fff',border:'1px solid '+C.grayBorder,borderRadius:12,padding:18,marginBottom:8}}>
              <div style={{display:'flex',flexWrap:'wrap',gap:10}}>
                {Object.entries(tempoRetiradaPorUf).filter(function(p){return p[1]!==null;}).sort(function(a,b){return a[1]-b[1];}).map(function(p){
                  const uf = p[0], horas = p[1];
                  return (
                    <div key={uf} style={{padding:'10px 14px',background:'#fff',border:'1px solid '+C.grayBorder,borderRadius:10,fontSize:12,minWidth:100}}>
                      <div style={{fontWeight:700,color:C.navy}}>{uf}</div>
                      <div style={{fontSize:14,fontWeight:800,color:horas<=2?C.green:horas<=24?C.blue:C.orange,marginTop:2}}>
                        {horas<1?Math.round(horas*60)+'min':horas<24?horas.toFixed(1)+'h':(horas/24).toFixed(1)+'d'}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </>
        )}

        {/* D3 placeholder devoluções (L946-951) */}
        <SectionHeader icon="↩️" title="Devoluções por estado" subtitle="Feature ativa quando houver primeira devolução registrada"/>
        <div style={{background:C.graySoft,border:'1px dashed '+C.grayBorder,borderRadius:12,padding:24,marginBottom:8,textAlign:'center'}}>
          <div style={{fontSize:24,marginBottom:6}}>📊</div>
          <div style={{fontSize:13,fontWeight:600,color:C.gray}}>Sem devoluções registradas no período</div>
          <div style={{fontSize:11,color:C.grayLight,marginTop:4}}>Quando começar a registrar devoluções, taxa por estado aparece aqui automaticamente</div>
        </div>

        {/* Disclaimer privacy pra vendedora (L973-978) */}
        {!isAdmin&&(
          <div style={{marginTop:16,padding:'10px 14px',background:C.blueSoft,border:'1px solid '+C.blue+'33',borderRadius:8,fontSize:11,color:C.blue,textAlign:'center'}}>
            🔒 Você está vendo apenas análise dos seus clientes. Dados consolidados do time são restritos ao admin (regra de privacy ZAYNEX).
          </div>
        )}
      </>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.regioes = window.ZNX.widgets.regioes || {};
  window.ZNX.widgets.regioes.MetricasUFPanel = MetricasUFPanel;
})();