// js/components/widgets/regioes/BrazilMapPanel.jsx
// [Wave 20 v224.2 NUCLEAR] BrazilTileMap SVG + Drill-down UF
// Extraído de RegioesAnalytics.jsx:
//   - BrazilTileMap (L114-149)
//   - MiniBar (L152-158) — exposto via window.ZNX.widgets.regioes.MiniBar
//   - Drill-down UF (L621-668 do bloco "selectedUf && ufDrilldown ? ... : ...")
// Deps runtime: window.ZNX.regioes.calcs (UF_NAMES, TILE_LAYOUT, fmtMes) + window.fmt
(function() {
  'use strict';

  // Paleta cores local (subset de C do original L29-38)
  const C = {
    navy:'#1B2A4A', gold:'#B89840', goldSoft:'#FEF9E7',
    blue:'#2563EB', blueSoft:'#EFF6FF',
    green:'#15803D', greenSoft:'#DCFCE7',
    orange:'#EA580C',
    purple:'#7C3AED',
    gray:'#6B7280', grayLight:'#9CA3AF', grayBorder:'#E4E7EC',
    text:'#1C1C28'
  };

  // [v224.73 + v224.55] vars+check MOVED to component body
  function BrazilTileMap({statsByUf, onUfClick, selectedUf}){
    const calcs = window.ZNX && window.ZNX.regioes && window.ZNX.regioes.calcs;
    if (!calcs) {
      const _msg = '[BrazilMapPanel v224.73] window.ZNX.regioes.calcs faltando';
      console.error(_msg);
      if (window.Sentry && typeof window.Sentry.captureMessage === 'function') {
        window.Sentry.captureMessage(_msg, 'error');
      }
    }
    const UF_NAMES = (calcs && calcs.UF_NAMES) || {};
    const TILE_LAYOUT = (calcs && calcs.TILE_LAYOUT) || {};
    const fmtMes = (calcs && calcs.fmtMes) || function(m){return m;};
    const max = Math.max.apply(null, Object.values(statsByUf||{}).map(function(s){return s.receita||0;}).concat([1]));
    function getColor(uf){
      const stat = statsByUf[uf];
      if(!stat||stat.receita<=0) return '#F3F4F6';
      const pct = stat.receita / max;
      if(pct >= 0.8) return C.gold;
      if(pct >= 0.5) return '#D4AF60';
      if(pct >= 0.25) return '#F0C674';
      if(pct >= 0.1) return '#FFE5A0';
      return '#FFF4D0';
    }
    const cols = 9, rows = 9;
    const tileW = 42, tileH = 36;
    const W = cols * tileW, H = rows * tileH;
    return(
      <svg viewBox={'0 0 '+W+' '+H} style={{width:'100%',maxWidth:520,display:'block',margin:'0 auto'}}>
        {Object.entries(TILE_LAYOUT).map(function(entry){
          const uf = entry[0];
          const r = entry[1][0], c = entry[1][1];
          const x = c * tileW, y = r * tileH;
          const stat = statsByUf[uf];
          const isSelected = selectedUf===uf;
          const fillColor = getColor(uf);
          const txtColor = stat&&stat.receita>0 ? C.navy : C.grayLight;
          return(
            <g key={uf} onClick={function(){onUfClick&&onUfClick(uf);}} style={{cursor:onUfClick?'pointer':'default'}}>
              <rect x={x+2} y={y+2} width={tileW-4} height={tileH-4} rx={4} fill={fillColor} stroke={isSelected?C.navy:'#E4E7EC'} strokeWidth={isSelected?2:0.8}/>
              <text x={x+tileW/2} y={y+tileH/2-2} fontSize={11} fontWeight={700} fill={txtColor} textAnchor="middle" dominantBaseline="middle">{uf}</text>
              {stat&&stat.receita>0&&(
                <text x={x+tileW/2} y={y+tileH/2+9} fontSize={7.5} fill={C.navy} textAnchor="middle" dominantBaseline="middle">{(stat.receita/1000).toFixed(0)}k</text>
              )}
            </g>
          );
        })}
      </svg>
    );
  }

  // Mini bar horizontal (copia LITERAL L152-158)
  function MiniBar({pct,color}){
    return(
      <div style={{flex:1,height:6,background:'#F3F4F6',borderRadius:3,overflow:'hidden'}}>
        <div style={{width:Math.min(100,pct)+'%',height:'100%',background:color||C.blue,borderRadius:3}}/>
      </div>
    );
  }

  // Drill-down UF — extract literal de L622-668 (ramo "selectedUf && ufDrilldown")
  function UFDrilldownContent({selectedUf, ufDrilldown, mes, isAdmin, onClose}){
    // [v224.85 FIX 2026-05-30] BUG ESCOPO: UF_NAMES + fmtMes eram declarados em BrazilTileMap (irmã)
    //   → ReferenceError "UF_NAMES is not defined" quando admin clicava num estado
    //   → tela branca em Análise Regional + Venda Direta + Histórico Regional
    // regra_validacao_helpers_runtime_quando_ordem_scripts_uncertain: cada função lê suas próprias deps
    const calcs = window.ZNX && window.ZNX.regioes && window.ZNX.regioes.calcs;
    if (!calcs && window.Sentry && typeof window.Sentry.captureMessage === 'function') {
      window.Sentry.captureMessage('[UFDrilldownContent v224.85] window.ZNX.regioes.calcs faltando', 'error');
    }
    const UF_NAMES = (calcs && calcs.UF_NAMES) || {};
    const fmtMes = (calcs && calcs.fmtMes) || function(m){return m;};

    if(!selectedUf || !ufDrilldown){
      // estado empty L663-668
      return (
        <div style={{textAlign:'center',padding:'40px 20px',color:C.gray}}>
          <div style={{fontSize:36,marginBottom:8}}>👈</div>
          <div style={{fontSize:13,fontWeight:600}}>Clique em um estado no mapa</div>
          <div style={{fontSize:11,marginTop:4}}>pra ver detalhes completos: marcas, margem, clientes, vendedoras</div>
        </div>
      );
    }
    const fmt = window.fmt || function(v){return 'R$ '+Number(v||0).toFixed(2);};
    return (
      <div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
          <div>
            <div style={{fontSize:18,fontWeight:800,color:C.navy}}>{UF_NAMES[selectedUf]} <span style={{fontSize:12,color:C.gold}}>({selectedUf})</span></div>
            <div style={{fontSize:11,color:C.gray}}>Detalhes do estado em {fmtMes(mes)}</div>
          </div>
          <button onClick={onClose} style={{background:'none',border:'1px solid '+C.grayBorder,borderRadius:6,padding:'4px 10px',fontSize:11,color:C.gray,cursor:'pointer'}}>× Fechar</button>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginBottom:14}}>
          <div><div style={{fontSize:10,color:C.gray,fontWeight:600,textTransform:'uppercase'}}>Receita</div><div style={{fontSize:18,fontWeight:800,color:C.gold}}>{fmt(ufDrilldown.stats.receita)}</div></div>
          <div><div style={{fontSize:10,color:C.gray,fontWeight:600,textTransform:'uppercase'}}>Vendas</div><div style={{fontSize:18,fontWeight:800,color:C.navy}}>{ufDrilldown.stats.vendas}</div></div>
          <div><div style={{fontSize:10,color:C.gray,fontWeight:600,textTransform:'uppercase'}}>Clientes</div><div style={{fontSize:18,fontWeight:800,color:C.text}}>{ufDrilldown.stats.clientes}</div></div>
          <div><div style={{fontSize:10,color:C.gray,fontWeight:600,textTransform:'uppercase'}}>Ticket Médio</div><div style={{fontSize:18,fontWeight:800,color:C.blue}}>{ufDrilldown.stats.vendas>0?fmt(ufDrilldown.stats.receita/ufDrilldown.stats.vendas):'—'}</div></div>
        </div>
        {ufDrilldown.margem&&ufDrilldown.margem.receita>0&&(
          <div style={{padding:'8px 12px',background:C.greenSoft,border:'1px solid '+C.green+'33',borderRadius:8,fontSize:12,marginBottom:10}}>
            <strong style={{color:C.green}}>Margem: {ufDrilldown.margem.margem.toFixed(1)}%</strong> · Lucro: {fmt(ufDrilldown.margem.lucro)}
          </div>
        )}
        {ufDrilldown.mix&&ufDrilldown.mix.length>0&&(
          <div style={{marginBottom:10}}>
            <div style={{fontSize:10,color:C.gray,fontWeight:600,textTransform:'uppercase',marginBottom:4}}>Top Marcas</div>
            {ufDrilldown.mix.map(function(pair,i){
              const m = pair[0], v = pair[1];
              return (<div key={m} style={{fontSize:12,padding:'2px 0',display:'flex',justifyContent:'space-between'}}><span>{i+1}. {m}</span><span style={{color:C.gold,fontWeight:600}}>{fmt(v)}</span></div>);
            })}
          </div>
        )}
        {ufDrilldown.clientes&&(
          <div style={{padding:'8px 12px',background:C.blueSoft,borderRadius:8,fontSize:11,color:C.text}}>
            LTV médio <strong>{fmt(ufDrilldown.clientes.ltvMedio)}</strong> · Recorrência <strong>{ufDrilldown.clientes.taxaRecorrencia.toFixed(0)}%</strong>
            {ufDrilldown.clientes.recem>0&&<span> · {ufDrilldown.clientes.recem} novos 30d</span>}
            {ufDrilldown.clientes.emRisco>0&&<span style={{color:C.orange}}> · {ufDrilldown.clientes.emRisco} em risco</span>}
          </div>
        )}
        {isAdmin&&ufDrilldown.vendedoras&&ufDrilldown.vendedoras.length>0&&(
          <div style={{marginTop:10,paddingTop:10,borderTop:'1px solid '+C.grayBorder}}>
            <div style={{fontSize:10,color:C.purple,fontWeight:700,textTransform:'uppercase',marginBottom:4}}>Vendedoras (admin)</div>
            {ufDrilldown.vendedoras.map(function(v){
              return (<div key={v.nome} style={{fontSize:11,padding:'2px 0',display:'flex',justifyContent:'space-between'}}><span>{v.nome}</span><span style={{color:C.gold}}>{fmt(v.receita)} · {v.vendas}v</span></div>);
            })}
          </div>
        )}
      </div>
    );
  }

  // Componente principal: mapa + drill-down lado-a-lado (L611-670)
  function BrazilMapPanel({statsByUf, selectedUf, setSelectedUf, ufDrilldown, mes, isAdmin}){
    return (
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:18,marginBottom:8,alignItems:'start'}}>
        <div style={{background:'#fff',border:'1px solid '+C.grayBorder,borderRadius:12,padding:18}}>
          <BrazilTileMap statsByUf={statsByUf} onUfClick={function(uf){setSelectedUf(selectedUf===uf?null:uf);}} selectedUf={selectedUf}/>
          <div style={{marginTop:8,display:'flex',gap:8,fontSize:10,color:C.gray,justifyContent:'center'}}>
            <span style={{display:'flex',alignItems:'center',gap:4}}><span style={{width:14,height:10,background:C.gold,borderRadius:2}}/>Top</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:'#FFF4D0',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>
          </div>
        </div>
        <div style={{background:'#fff',border:'1px solid '+C.grayBorder,borderRadius:12,padding:18}}>
          <UFDrilldownContent selectedUf={selectedUf} ufDrilldown={ufDrilldown} mes={mes} isAdmin={isAdmin} onClose={function(){setSelectedUf(null);}}/>
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.regioes = window.ZNX.widgets.regioes || {};
  window.ZNX.widgets.regioes.BrazilMapPanel = BrazilMapPanel;
  window.ZNX.widgets.regioes.MiniBar = MiniBar; // exposto pra outros panels
})();