<?php
/**
 * Vendas / Mensais — shell instantâneo.
 * Faturamento/formas/metas carregam rápido; lucro/margem (pesado) entra em 2º plano.
 */
$anoSel = $anoSel ?? (int)date('Y');
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-calendar-month me-2 text-accent"></i>Vendas Mensais</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<!-- ── Seletor de ano ─────────────────────────────────────────────────────── -->
<div class="pbi-filtro-vendas mb-4">
    <div class="pbi-filtro-row align-items-center">
        <span class="pbi-filtro-label me-2">Ano:</span>
        <div class="pbi-periodo-tabs" id="anos-tabs">
            <?php foreach ($filtros['anos'] as $a): ?>
            <a href="/vendas/mensais?ano=<?= (int)$a ?>"
               class="pbi-tab-ano<?= $anoSel == (int)$a ? ' active' : '' ?>"
               onclick="setPeriodoSession(<?= (int)$a ?>, 0)"><?= (int)$a ?></a>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- ── KPIs ──────────────────────────────────────────────────────────────── -->
<div class="pbi-kpi-grid mb-3" id="kpi-grid">
    <?php for ($i = 0; $i < 6; $i++): ?>
    <div class="pbi-kpi-card">
        <div class="pbi-kpi-label pbi-skeleton" style="width:60%;height:.8rem;border-radius:4px">&nbsp;</div>
        <div class="pbi-kpi-value pbi-skeleton mt-2" style="width:80%;height:1.6rem;border-radius:4px">&nbsp;</div>
    </div>
    <?php endfor; ?>
</div>
<div class="pbi-hint mb-4" style="margin-top:0">
    <strong>Ticket Médio</strong> = faturamento ÷ nº de notas ·
    <strong>Lucro Bruto</strong> = faturamento − CMV (custo das mercadorias vendidas) ·
    <strong>Margem</strong> = lucro sobre o faturamento ·
    <strong>Crescimento</strong> = variação vs ano anterior ·
    <strong>Projeção</strong> = estimativa de fechamento do ano.
</div>

<!-- ── Evolução Mensal ───────────────────────────────────────────────────── -->
<div class="pbi-card mb-4">
    <div class="pbi-card-header"><i class="bi bi-bar-chart-line me-2 text-accent"></i>Evolução Mensal</div>
    <div class="pbi-card-body">
        <div class="pbi-hint mb-2" style="margin-top:0">
            Faturamento de cada mês de <strong id="lbl-ano">—</strong> (barras escuras) vs
            <strong id="lbl-anoant">—</strong> (barras claras). Linha laranja = ticket médio;
            linha tracejada = meta (quando cadastrada).
        </div>
        <div id="mensal-chart" style="height:300px;width:100%"></div>
        <div class="pbi-hint mt-2" id="mensal-resumo" style="margin-top:.6rem">&nbsp;</div>
    </div>
</div>

<!-- ── Aviso: CMV inconfiavel (oculto por padrao) ────────────────────────── -->
<div id="cmv-aviso" hidden class="pbi-card mb-4" style="border-left:4px solid #f59e0b">
    <div class="pbi-card-body" style="padding:16px 20px">
        <div style="display:flex;gap:14px;align-items:flex-start">
            <i class="bi bi-exclamation-triangle-fill" style="color:#f59e0b;font-size:24px;flex:0 0 auto;line-height:1.2"></i>
            <div style="flex:1">
                <strong style="color:#f59e0b;font-size:15.5px">Lucro e Margem não estão sendo mostrados neste mês</strong>
                <div style="color:var(--pbi-muted);font-size:13.5px;line-height:1.65;margin-top:6px">
                    Os números de <strong>custo das mercadorias</strong> que vieram do ERP Fire Sistemas
                    ficaram maiores que o próprio faturamento — isso não é real.
                    Pra não te passar Lucro/Margem errados, escondemos essas colunas e o gráfico.
                    O <strong>Faturamento continua 100% correto</strong>.
                </div>

                <details style="margin-top:12px">
                    <summary style="cursor:pointer;color:#f59e0b;font-weight:600;font-size:13.5px;list-style:none;display:inline-flex;align-items:center;gap:6px">
                        <i class="bi bi-chevron-right" style="transition:.2s"></i>
                        Ver por que isso acontece e como resolver
                    </summary>
                    <div style="color:var(--pbi-muted);font-size:13px;line-height:1.65;padding-top:10px;margin-top:6px;border-top:1px solid var(--pbi-border)">
                        <p style="margin:0 0 10px"><strong style="color:var(--pbi-text)">Por que acontece (típico em bar/distribuidora):</strong></p>
                        <ul style="margin:0 0 14px;padding-left:20px">
                            <li><strong>Produtos sem custo cadastrado</strong> — drinks, porções e combos compostos costumam não ter o custo unitário preenchido no ERP Fire Sistemas.</li>
                            <li><strong>Caixa lançada como unidade</strong> — caixa de cerveja entra com custo da caixa inteira em cada garrafa, em vez de dividir por 12 ou 24.</li>
                            <li><strong>Custo de compra inflado</strong> — quando a entrada da nota inclui ICMS + IPI + frete embutidos no custo unitário, o custo fica maior que o próprio preço de venda.</li>
                        </ul>

                        <p style="margin:0 0 10px"><strong style="color:var(--pbi-text)">Como resolver no ERP Fire Sistemas:</strong></p>
                        <ol style="margin:0 0 14px;padding-left:20px">
                            <li>Cadastro de Itens → preencher <strong>Custo Médio</strong> nos produtos mais vendidos.</li>
                            <li>Para caixas: ajustar a <strong>quantidade do fator de venda</strong> (12, 24, etc.) pra dividir o custo certo.</li>
                            <li>Ao lançar Nota de Entrada, conferir se o <strong>custo unitário</strong> está coerente com o preço de venda.</li>
                        </ol>

                        <p style="margin:0 0 6px"><strong style="color:var(--pbi-text)">Enquanto isso, pra acompanhar o resultado:</strong></p>
                        <ul style="margin:0;padding-left:20px">
                            <li><a href="/compras/compras-vendas" style="color:var(--pbi-accent)"><i class="bi bi-arrow-right-circle me-1"></i>Compras × Vendas</a> — mostra quanto entrou vs quanto saiu (não depende de custo unitário cadastrado).</li>
                            <li>O <strong>Faturamento mensal</strong> e o <strong>Ticket Médio</strong> nesta tela estão corretos.</li>
                        </ul>
                    </div>
                </details>
            </div>
        </div>
    </div>
</div>
<style>
#cmv-aviso details[open] > summary > .bi-chevron-right { transform: rotate(90deg); }
#cmv-aviso summary::-webkit-details-marker { display:none }
</style>

<!-- ── Lucro e Margem por Mês (async) ────────────────────────────────────── -->
<div class="pbi-card mb-4" id="card-lucro-margem">
    <div class="pbi-card-header"><i class="bi bi-cash-stack me-2 text-accent"></i>Lucro e Margem por Mês</div>
    <div class="pbi-card-body">
        <div class="pbi-hint mb-2" style="margin-top:0">
            Barras = faturamento (verde) e <strong>CMV</strong> (vermelho, custo das mercadorias vendidas);
            linha = <strong>margem %</strong>. Mostra se vender mais está virando lucro.
        </div>
        <div id="lucro-chart" style="height:280px;width:100%"></div>
        <div class="pbi-hint mt-2" id="lucro-status" style="margin-top:.6rem">
            <i class="bi bi-hourglass-split"></i> Calculando lucro e margem do ano…
        </div>
    </div>
</div>
<style>
.no-cmv .col-cmv, .no-cmv .col-lucro, .no-cmv .col-margem { display:none !important }
</style>

<!-- ── Formas de Pagamento por Mês ───────────────────────────────────────── -->
<div class="pbi-card mb-4">
    <div class="pbi-card-header"><i class="bi bi-wallet2 me-2 text-accent"></i>Formas de Pagamento por Mês</div>
    <div class="pbi-card-body">
        <div class="pbi-hint mb-2" style="margin-top:0">
            Como o recebimento se divide a cada mês: <strong>dinheiro</strong> (verde),
            <strong>débito</strong> (azul) e <strong>crédito</strong> (laranja). Barras empilhadas = total do mês.
        </div>
        <div id="formas-chart" style="height:280px;width:100%"></div>
    </div>
</div>

<!-- ── Tabela detalhada ──────────────────────────────────────────────────── -->
<div class="pbi-card" id="card-mensais">
    <div class="pbi-card-header d-flex justify-content-between align-items-center flex-wrap">
        <span><i class="bi bi-table me-2"></i>Detalhamento Mensal</span>
        <span class="d-flex align-items-center gap-2">
            <small class="text-muted" id="mensais-badge">
                <span class="pbi-skeleton d-inline-block" style="width:70px;height:.75rem;border-radius:3px">&nbsp;</span>
            </small>
            <button class="btn btn-sm btn-outline-secondary" id="btn-csv" title="Exportar CSV"><i class="bi bi-filetype-csv"></i> CSV</button>
            <button class="btn btn-sm btn-outline-secondary" id="btn-print" title="Imprimir"><i class="bi bi-printer"></i></button>
        </span>
    </div>
    <div class="pbi-hint mb-2" style="margin-top:0;padding-left:1rem;padding-right:1rem">
        Clique num mês para ver <strong>top vendedores</strong> e <strong>formas de pagamento</strong> dele.
        <strong>vs mês ant.</strong> = vs mês anterior · <strong>vs ano ant.</strong> = mesmo mês do ano passado ·
        <strong>%Meta</strong> = quanto da meta foi atingido. <span style="color:#22c55e">▲</span>/<span style="color:#ef4444">▼</span>.
    </div>
    <div id="mensais-body">
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>Mês</th><th class="text-end">Notas</th><th class="text-end">Ticket</th>
                    <th class="text-end">Faturamento</th><th class="text-end col-cmv">CMV</th><th class="text-end col-lucro">Lucro</th>
                    <th class="text-end col-margem">Margem</th><th class="text-end">Meta</th><th class="text-end">%Meta</th>
                    <th class="text-end">vs mês ant.</th><th class="text-end">vs ano ant.</th><th style="width:90px">%</th>
                </tr></thead>
                <tbody>
                <?php for ($i = 0; $i < 8; $i++): ?>
                <tr><?php for ($c = 0; $c < 12; $c++): ?>
                    <td><span class="pbi-skeleton d-inline-block" style="width:50px;height:.75rem;border-radius:3px">&nbsp;</span></td>
                <?php endfor; ?></tr>
                <?php endfor; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
window.__VENDAS = {
    anoSel:  <?= (int)$anoSel ?>,
    actionUrl: '/vendas/mensais'
};
</script>

<style>
@keyframes pbi-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.pbi-skeleton { background:var(--pbi-border,#e2e8f0); animation:pbi-pulse 1.4s ease-in-out infinite; pointer-events:none; color:transparent!important; }
tr.mes-row { cursor:pointer; }
tr.mes-row:hover { background:var(--pbi-surface-2,rgba(0,0,0,.03)); }
.mes-drill td { background:var(--pbi-surface-2,rgba(0,0,0,.03)); }
</style>

<script src="/assets/js/echarts.min.js"></script>
<script>
(function () {
'use strict';

var anoSel   = parseInt(window.__VENDAS.anoSel);
var anoAnt   = anoSel - 1;
var anoAtual = new Date().getFullYear();
var mesAtual = new Date().getMonth() + 1;

var nomeMeses  = ['','Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
var abrevMeses = ['','Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];

var chartEvol=null, chartLucro=null, chartFormas=null;
var ST = { linhas:[], prev:[], formas:[], metas:{}, cmv:[], ano:anoSel };

function fmtR(v){ return 'R$ '+parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2}); }
function fmtRk(v){ v=parseFloat(v||0); if(v>=1e6) return 'R$'+(v/1e6).toFixed(1)+'M'; if(v>=1e3) return 'R$'+(v/1e3).toFixed(0)+'k'; return 'R$'+v.toFixed(0); }
function fmtN(v,d){ d=d===undefined?0:d; return parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:d,maximumFractionDigits:d}); }
function esc(s){ var d=document.createElement('div'); d.textContent=s==null?'':String(s); return d.innerHTML; }
function pad2(n){ return (n<10?'0':'')+n; }
function getCssVar(n){ return getComputedStyle(document.documentElement).getPropertyValue(n).trim(); }
function apiFetch(url){ return fetch(url,{credentials:'same-origin'}).then(function(r){ if(!r.ok) return r.json().then(function(e){throw new Error(e.erro||'HTTP '+r.status);}); return r.json(); }); }
function showErr(id,msg){ var el=document.getElementById(id); if(el) el.innerHTML='<div class="px-3 py-3 alert alert-warning small"><i class="bi bi-exclamation-triangle me-2"></i>'+esc(msg)+'</div>'; }
function delta(pct){ if(pct===null||pct===undefined||!isFinite(pct)) return '<span class="text-muted">—</span>'; var up=pct>=0; return '<span style="color:'+(up?'#22c55e':'#ef4444')+';font-weight:600">'+(up?'▲':'▼')+' '+fmtN(Math.abs(pct),1)+'%</span>'; }
function mapMes(arr){ var m={}; (arr||[]).forEach(function(l){ m[parseInt(l.MES||0)]=l; }); return m; }
function metaDe(m){ return parseFloat((ST.metas&&(ST.metas[m]!==undefined?ST.metas[m]:ST.metas[String(m)]))||0); }

function atualizarAnosAbas(anos, ano){
    var c=document.getElementById('anos-tabs'); if(!c) return;
    c.innerHTML=anos.map(function(a){ a=parseInt(a); var cls=(a===parseInt(ano))?' active':''; return '<a href="/vendas/mensais?ano='+a+'" class="pbi-tab-ano'+cls+'" onclick="setPeriodoSession('+a+',0)">'+a+'</a>'; }).join('');
}

function renderKpis(){
    var linhas=ST.linhas, prev=ST.prev, ano=ST.ano;
    var totFat=0, totQtd=0; linhas.forEach(function(l){ totFat+=parseFloat(l.TOTAL||0); totQtd+=parseInt(l.QTD_NOTAS||0); });
    var prevTot=prev.reduce(function(s,l){return s+parseFloat(l.TOTAL||0);},0);
    var ticket=totQtd>0?totFat/totQtd:0;
    var cresc=prevTot>0?(totFat-prevTot)/prevTot*100:null;
    var ehAtual=(ano===anoAtual);
    var proj=(ehAtual&&mesAtual>0)?totFat/mesAtual*12:null;
    var metaAno=0; for(var m=1;m<=12;m++) metaAno+=metaDe(m);
    var pctMeta=metaAno>0?totFat/metaAno*100:null;

    var cards=[];
    cards.push({l:'Faturamento '+ano, v:fmtR(totFat), c:'text-accent'});
    cards.push({l:'Total de Notas', v:fmtN(totQtd,0), c:''});
    cards.push({l:'Ticket Médio', v:fmtR(ticket), c:''});
    cards.push({l:'Lucro Bruto '+ano, v:'<span id="kpi-lucro" style="opacity:.5">…</span>', c:''});
    cards.push({l:'Margem '+ano, v:'<span id="kpi-margem" style="opacity:.5">…</span>', c:''});
    cards.push({l:'Crescimento vs '+anoAnt, v: cresc===null?'—':((cresc>=0?'+':'')+fmtN(cresc,1)+'%'), c: cresc===null?'':(cresc>=0?'text-success':'text-danger')});
    if(pctMeta!==null) cards.push({l:'% da Meta '+ano, v:fmtN(pctMeta,1)+'%', c: pctMeta>=100?'text-success':(pctMeta>=70?'':'text-danger')});
    if(proj!==null) cards.push({l:'Projeção '+ano+' (estim.)', v:fmtR(proj), c:''});

    document.getElementById('kpi-grid').innerHTML = cards.map(function(d){
        return '<div class="pbi-kpi-card"><div class="pbi-kpi-label">'+esc(d.l)+'</div><div class="pbi-kpi-value '+d.c+'">'+d.v+'</div></div>';
    }).join('');
}

function renderEvol(){
    var lA=document.getElementById('lbl-ano'), lB=document.getElementById('lbl-anoant');
    if(lA) lA.textContent=ST.ano; if(lB) lB.textContent=anoAnt;
    var el=document.getElementById('mensal-chart'); if(!el||typeof echarts==='undefined') return;
    if(!chartEvol) chartEvol=echarts.init(el);
    var cur=mapMes(ST.linhas), prev=mapMes(ST.prev);
    var eixo=[],sCur=[],sPrev=[],sTk=[],sMeta=[]; var temMeta=false;
    for(var m=1;m<=12;m++){ eixo.push(abrevMeses[m]);
        sCur.push(cur[m]?parseFloat(cur[m].TOTAL||0):0);
        sPrev.push(prev[m]?parseFloat(prev[m].TOTAL||0):0);
        sTk.push(cur[m]?parseFloat(cur[m].TICKET_MEDIO||0):0);
        var mt=metaDe(m); if(mt>0) temMeta=true; sMeta.push(mt>0?mt:null);
    }
    var muted=getCssVar('--pbi-muted')||'#64748b', accent=getCssVar('--pbi-accent')||'#3b82f6';
    var series=[
        {name:''+ST.ano,type:'bar',data:sCur,barMaxWidth:20,itemStyle:{color:accent,borderRadius:[4,4,0,0]}},
        {name:''+anoAnt,type:'bar',data:sPrev,barMaxWidth:20,itemStyle:{color:'rgba(148,163,184,0.55)',borderRadius:[4,4,0,0]}},
        {name:'Ticket Médio',type:'line',yAxisIndex:1,data:sTk,smooth:true,symbol:'circle',symbolSize:6,lineStyle:{color:'#f59e0b',width:2.5},itemStyle:{color:'#f59e0b'}}
    ];
    var legend=[''+ST.ano,''+anoAnt,'Ticket Médio'];
    if(temMeta){ series.push({name:'Meta',type:'line',data:sMeta,connectNulls:true,symbol:'none',lineStyle:{color:'#a855f7',width:2,type:'dashed'},itemStyle:{color:'#a855f7'}}); legend.push('Meta'); }
    chartEvol.setOption({
        backgroundColor:'transparent',
        tooltip:{trigger:'axis',axisPointer:{type:'shadow'},formatter:function(ps){var s='<b>'+ps[0].name+'</b><br/>';ps.forEach(function(p){if(p.value!=null)s+=p.marker+' '+p.seriesName+': <b>'+fmtR(p.value)+'</b><br/>';});return s;}},
        legend:{data:legend,textStyle:{color:muted},top:0},
        grid:{left:8,right:55,top:34,bottom:6,containLabel:true},
        xAxis:{type:'category',data:eixo,axisLabel:{color:muted,fontSize:11},axisLine:{lineStyle:{color:muted}}},
        yAxis:[{type:'value',axisLabel:{color:muted,fontSize:10,formatter:fmtRk},splitLine:{lineStyle:{color:'rgba(128,128,128,0.12)'}}},
               {type:'value',position:'right',axisLabel:{color:muted,fontSize:10,formatter:fmtRk},splitLine:{show:false}}],
        series:series
    },true);
    var resumo=document.getElementById('mensal-resumo');
    if(resumo&&ST.linhas.length){ var melhor=null,pior=null; ST.linhas.forEach(function(l){ if(!melhor||parseFloat(l.TOTAL||0)>parseFloat(melhor.TOTAL||0))melhor=l; if(!pior||parseFloat(l.TOTAL||0)<parseFloat(pior.TOTAL||0))pior=l; });
        resumo.innerHTML='<i class="bi bi-trophy-fill" style="color:#f59e0b"></i> <strong>Melhor mês:</strong> '+esc(nomeMeses[parseInt(melhor.MES)]||'')+' ('+fmtR(melhor.TOTAL)+') &nbsp;·&nbsp; <i class="bi bi-arrow-down-circle" style="color:#ef4444"></i> <strong>Pior mês:</strong> '+esc(nomeMeses[parseInt(pior.MES)]||'')+' ('+fmtR(pior.TOTAL)+')';
    }
}

function renderFormas(){
    var el=document.getElementById('formas-chart'); if(!el||typeof echarts==='undefined') return;
    if(!chartFormas) chartFormas=echarts.init(el);
    var fm=mapMes(ST.formas); var eixo=[],din=[],deb=[],cred=[];
    for(var m=1;m<=12;m++){ eixo.push(abrevMeses[m]); var x=fm[m]||{}; din.push(parseFloat(x.dinheiro||0)); deb.push(parseFloat(x.debito||0)); cred.push(parseFloat(x.credito||0)); }
    var muted=getCssVar('--pbi-muted')||'#64748b';
    chartFormas.setOption({
        backgroundColor:'transparent',
        tooltip:{trigger:'axis',axisPointer:{type:'shadow'},formatter:function(ps){var s='<b>'+ps[0].name+'</b><br/>',t=0;ps.forEach(function(p){s+=p.marker+' '+p.seriesName+': <b>'+fmtR(p.value)+'</b><br/>';t+=parseFloat(p.value||0);});return s+'<hr style="margin:3px 0;opacity:.3"/>Total: <b>'+fmtR(t)+'</b>';}},
        legend:{data:['Dinheiro','Débito','Crédito'],textStyle:{color:muted},top:0},
        grid:{left:8,right:16,top:34,bottom:6,containLabel:true},
        xAxis:{type:'category',data:eixo,axisLabel:{color:muted,fontSize:11},axisLine:{lineStyle:{color:muted}}},
        yAxis:{type:'value',axisLabel:{color:muted,fontSize:10,formatter:fmtRk},splitLine:{lineStyle:{color:'rgba(128,128,128,0.12)'}}},
        series:[
            {name:'Dinheiro',type:'bar',stack:'f',data:din,itemStyle:{color:'#22c55e'}},
            {name:'Débito',type:'bar',stack:'f',data:deb,itemStyle:{color:'#3b82f6'}},
            {name:'Crédito',type:'bar',stack:'f',data:cred,itemStyle:{color:'#f97316'},barMaxWidth:26}
        ]
    },true);
}

function renderTabela(){
    var linhas=ST.linhas, prev=mapMes(ST.prev), cur=mapMes(ST.linhas), ano=ST.ano;
    document.getElementById('mensais-badge').textContent=linhas.length+' meses';
    if(!linhas.length){ document.getElementById('mensais-body').innerHTML='<div class="pbi-card-body text-center text-muted py-5"><i class="bi bi-inbox fs-2"></i><p class="mt-2">Nenhuma venda em '+ano+'.</p></div>'; return; }
    var totFat=linhas.reduce(function(s,l){return s+parseFloat(l.TOTAL||0);},0);
    var totQtd=linhas.reduce(function(s,l){return s+parseInt(l.QTD_NOTAS||0);},0);
    var ticketMed=totQtd>0?totFat/totQtd:0;
    var prevTot=ST.prev.reduce(function(s,l){return s+parseFloat(l.TOTAL||0);},0);
    var crescAno=prevTot>0?(totFat-prevTot)/prevTot*100:null;

    var rows=linhas.map(function(l){
        var m=parseInt(l.MES||0), val=parseFloat(l.TOTAL||0);
        var pct=totFat>0?val/totFat*100:0, barW=Math.min(100,Math.round(pct*10)/10);
        var antVal=cur[m-1]?parseFloat(cur[m-1].TOTAL||0):null;
        var mom=(antVal!==null&&antVal>0)?(val-antVal)/antVal*100:null;
        var yVal=prev[m]?parseFloat(prev[m].TOTAL||0):null;
        var yoy=(yVal!==null&&yVal>0)?(val-yVal)/yVal*100:null;
        var meta=metaDe(m), pctMeta=meta>0?val/meta*100:null;
        return '<tr class="mes-row" data-mes="'+m+'">'
            +'<td class="fw-semibold"><i class="bi bi-chevron-right small me-1" style="opacity:.5"></i>'+(nomeMeses[m]||('Mês '+m))+'</td>'
            +'<td class="text-end text-muted">'+fmtN(l.QTD_NOTAS,0)+'</td>'
            +'<td class="text-end">'+fmtR(l.TICKET_MEDIO)+'</td>'
            +'<td class="text-end fw-semibold text-accent">'+fmtR(val)+'</td>'
            +'<td class="text-end cmv-cell col-cmv" data-mes="'+m+'"><span class="text-muted">…</span></td>'
            +'<td class="text-end lucro-cell col-lucro" data-mes="'+m+'"><span class="text-muted">…</span></td>'
            +'<td class="text-end margem-cell col-margem" data-mes="'+m+'"><span class="text-muted">…</span></td>'
            +'<td class="text-end text-muted">'+(meta>0?fmtR(meta):'—')+'</td>'
            +'<td class="text-end">'+(pctMeta===null?'<span class="text-muted">—</span>':('<span style="color:'+(pctMeta>=100?'#22c55e':(pctMeta>=70?getCssVar("--pbi-text"):"#ef4444"))+';font-weight:600">'+fmtN(pctMeta,0)+'%</span>'))+'</td>'
            +'<td class="text-end">'+delta(mom)+'</td>'
            +'<td class="text-end">'+delta(yoy)+'</td>'
            +'<td><div class="pbi-progress"><div class="pbi-progress-bar" style="width:'+barW+'%"></div></div><small class="text-muted">'+fmtN(pct,1)+'%</small></td>'
            +'</tr>';
    }).join('');

    document.getElementById('mensais-body').innerHTML=
        '<div class="table-responsive"><table class="pbi-table" id="tbl-mensais">'
        +'<thead><tr><th>Mês</th><th class="text-end">Notas</th><th class="text-end">Ticket</th>'
        +'<th class="text-end">Faturamento</th><th class="text-end col-cmv">CMV</th><th class="text-end col-lucro">Lucro</th>'
        +'<th class="text-end col-margem">Margem</th><th class="text-end">Meta</th><th class="text-end">%Meta</th>'
        +'<th class="text-end">vs mês ant.</th><th class="text-end">vs ano ant.</th><th style="width:90px">%</th></tr></thead>'
        +'<tbody>'+rows+'</tbody>'
        +'<tfoot><tr class="pbi-table-total"><td><strong>Total '+esc(String(ano))+'</strong></td>'
        +'<td class="text-end"><strong>'+fmtN(totQtd,0)+'</strong></td>'
        +'<td class="text-end"><strong>'+fmtR(ticketMed)+'</strong></td>'
        +'<td class="text-end text-accent"><strong>'+fmtR(totFat)+'</strong></td>'
        +'<td class="text-end col-cmv" id="foot-cmv"><span class="text-muted">…</span></td>'
        +'<td class="text-end col-lucro" id="foot-lucro"><span class="text-muted">…</span></td>'
        +'<td class="text-end col-margem" id="foot-margem"><span class="text-muted">…</span></td>'
        +'<td></td><td></td><td class="text-end">—</td><td class="text-end">'+delta(crescAno)+'</td><td></td></tr></tfoot>'
        +'</table></div>';

    // clique = drill-down
    Array.prototype.forEach.call(document.querySelectorAll('tr.mes-row'), function(tr){
        tr.addEventListener('click', function(){ drill(parseInt(tr.getAttribute('data-mes')), tr); });
    });
}

/* ── Lucro/Margem indisponivel (ERP nao grava custo direito) ─────────────── */
function desabilitarCmv(){
    // 1) Esconde as colunas da tabela (CSS .no-cmv .col-* { display:none })
    var tbl=document.getElementById('tbl-mensais'); if(tbl) tbl.classList.add('no-cmv');
    var anyTbl=document.querySelector('#mensais-body table'); if(anyTbl) anyTbl.classList.add('no-cmv');
    // 2) Esconde o card "Lucro e Margem por Mes" inteiro
    var card=document.getElementById('card-lucro-margem'); if(card) card.style.display='none';
    // 3) Esconde os KPIs Lucro Bruto e Margem (cards inteiros pra nao deixar buraco)
    ['kpi-lucro','kpi-margem'].forEach(function(id){
        var el=document.getElementById(id); if(!el) return;
        var card=el.closest('.pbi-kpi-card'); if(card) card.style.display='none';
    });
    // 4) Mostra o aviso amarelo no topo
    var av=document.getElementById('cmv-aviso'); if(av) av.hidden=false;
    // 5) Limpa o status que ficaria com "Calculando..."
    var st=document.getElementById('lucro-status'); if(st) st.innerHTML='';
}

/* ── Lucro/Margem (2º plano) ──────────────────────────────────────────────── */
function patchMargem(){
    var cmvMap=mapMes(ST.cmv);
    var totFat=0,totCmv=0;
    // células da tabela
    Array.prototype.forEach.call(document.querySelectorAll('.cmv-cell'), function(td){
        var m=parseInt(td.getAttribute('data-mes')); var d=cmvMap[m];
        var lin=mapMes(ST.linhas)[m]; var fat=lin?parseFloat(lin.TOTAL||0):0;
        if(!d){ td.innerHTML='<span class="text-muted">—</span>'; return; }
        var cmv=parseFloat(d.CMV||0); var lucro=fat-cmv; var marg=fat>0?lucro/fat*100:0;
        totFat+=fat; totCmv+=cmv;
        td.innerHTML=fmtR(cmv);
        var lc=document.querySelector('.lucro-cell[data-mes="'+m+'"]'); if(lc) lc.innerHTML='<span style="color:#22c55e;font-weight:600">'+fmtR(lucro)+'</span>';
        var mc=document.querySelector('.margem-cell[data-mes="'+m+'"]'); if(mc) mc.innerHTML='<span style="font-weight:600">'+fmtN(marg,1)+'%</span>';
    });
    var totLucro=totFat-totCmv, totMarg=totFat>0?totLucro/totFat*100:0;
    var fc=document.getElementById('foot-cmv'); if(fc) fc.innerHTML='<strong>'+fmtR(totCmv)+'</strong>';
    var fl=document.getElementById('foot-lucro'); if(fl) fl.innerHTML='<strong style="color:#22c55e">'+fmtR(totLucro)+'</strong>';
    var fmg=document.getElementById('foot-margem'); if(fmg) fmg.innerHTML='<strong>'+fmtN(totMarg,1)+'%</strong>';
    var kl=document.getElementById('kpi-lucro'); if(kl){ kl.textContent=fmtR(totLucro); kl.style.opacity=1; kl.parentElement.classList.add('text-success'); }
    var km=document.getElementById('kpi-margem'); if(km){ km.textContent=fmtN(totMarg,1)+'%'; km.style.opacity=1; }
    renderLucroChart();
    var st=document.getElementById('lucro-status');
    if(st) st.innerHTML='Lucro bruto do ano: <strong style="color:#22c55e">'+fmtR(totLucro)+'</strong> · Margem média: <strong>'+fmtN(totMarg,1)+'%</strong>';
}

function renderLucroChart(){
    var el=document.getElementById('lucro-chart'); if(!el||typeof echarts==='undefined') return;
    if(!chartLucro) chartLucro=echarts.init(el);
    var cmvMap=mapMes(ST.cmv), curMap=mapMes(ST.linhas);
    var eixo=[],sFat=[],sCmv=[],sMarg=[];
    for(var m=1;m<=12;m++){ var d=cmvMap[m], lin=curMap[m]; if(!d&&!lin) { eixo.push(abrevMeses[m]); sFat.push(0); sCmv.push(0); sMarg.push(null); continue; }
        var fat=lin?parseFloat(lin.TOTAL||0):(d?parseFloat(d.FAT||0):0);
        var cmv=d?parseFloat(d.CMV||0):0; var marg=fat>0?(fat-cmv)/fat*100:null;
        eixo.push(abrevMeses[m]); sFat.push(fat); sCmv.push(cmv); sMarg.push(marg);
    }
    var muted=getCssVar('--pbi-muted')||'#64748b';
    chartLucro.setOption({
        backgroundColor:'transparent',
        tooltip:{trigger:'axis',axisPointer:{type:'shadow'},formatter:function(ps){var s='<b>'+ps[0].name+'</b><br/>';ps.forEach(function(p){ if(p.value==null) return; var v=(p.seriesName==='Margem')?fmtN(p.value,1)+'%':fmtR(p.value); s+=p.marker+' '+p.seriesName+': <b>'+v+'</b><br/>'; });return s;}},
        legend:{data:['Faturamento','CMV','Margem'],textStyle:{color:muted},top:0},
        grid:{left:8,right:48,top:34,bottom:6,containLabel:true},
        xAxis:{type:'category',data:eixo,axisLabel:{color:muted,fontSize:11},axisLine:{lineStyle:{color:muted}}},
        yAxis:[{type:'value',axisLabel:{color:muted,fontSize:10,formatter:fmtRk},splitLine:{lineStyle:{color:'rgba(128,128,128,0.12)'}}},
               {type:'value',position:'right',max:100,axisLabel:{color:muted,fontSize:10,formatter:'{value}%'},splitLine:{show:false}}],
        series:[
            {name:'Faturamento',type:'bar',data:sFat,barMaxWidth:18,itemStyle:{color:'#22c55e',borderRadius:[3,3,0,0]}},
            {name:'CMV',type:'bar',data:sCmv,barMaxWidth:18,itemStyle:{color:'#ef4444',borderRadius:[3,3,0,0]}},
            {name:'Margem',type:'line',yAxisIndex:1,data:sMarg,connectNulls:true,smooth:true,symbol:'circle',symbolSize:6,lineStyle:{color:'#a855f7',width:2.5},itemStyle:{color:'#a855f7'}}
        ]
    },true);
}

/* ── Drill-down ───────────────────────────────────────────────────────────── */
function drill(m, tr){
    var existe=tr.nextElementSibling;
    if(existe && existe.classList.contains('mes-drill')){ existe.parentNode.removeChild(existe); return; }
    // fecha outros
    Array.prototype.forEach.call(document.querySelectorAll('tr.mes-drill'), function(d){ d.parentNode.removeChild(d); });
    var det=document.createElement('tr'); det.className='mes-drill';
    det.innerHTML='<td colspan="12" class="small"><i class="bi bi-hourglass-split"></i> Carregando '+esc(nomeMeses[m]||'')+'…</td>';
    tr.parentNode.insertBefore(det, tr.nextSibling);

    var ini=ST.ano+'-'+pad2(m)+'-01';
    var lastDay=new Date(ST.ano, m, 0).getDate();
    var fim=ST.ano+'-'+pad2(m)+'-'+pad2(lastDay);
    var fm=mapMes(ST.formas)[m]||{dinheiro:0,debito:0,credito:0};

    apiFetch('/api/vendas/por-vendedor?data_ini='+ini+'&data_fim='+fim).then(function(d){
        var linhas=(d.linhas||d||[]); if(!Array.isArray(linhas)) linhas=[];
        linhas=linhas.slice().sort(function(a,b){return parseFloat(b.TOTAL||b.total||0)-parseFloat(a.TOTAL||a.total||0);}).slice(0,5);
        var vend = linhas.length ? linhas.map(function(v,i){
            var nome=v.VENDEDOR||v.vendedor||'—', tot=parseFloat(v.TOTAL||v.total||0), q=parseInt(v.QTD_NOTAS||v.qtd_notas||0);
            return '<div class="d-flex justify-content-between" style="padding:2px 0"><span>'+(i+1)+'. '+esc(nome)+' <span class="text-muted">('+fmtN(q,0)+' notas)</span></span><strong>'+fmtR(tot)+'</strong></div>';
        }).join('') : '<div class="text-muted">Sem dados de vendedores neste mês.</div>';
        var tot=fm.dinheiro+fm.debito+fm.credito;
        function lin(lbl,v,cor){ var p=tot>0?v/tot*100:0; return '<div class="d-flex justify-content-between" style="padding:2px 0"><span><span style="display:inline-block;width:9px;height:9px;border-radius:2px;background:'+cor+';margin-right:6px"></span>'+lbl+'</span><span><strong>'+fmtR(v)+'</strong> <span class="text-muted">('+fmtN(p,0)+'%)</span></span></div>'; }
        det.innerHTML='<td colspan="12"><div class="row g-3 py-2">'
            +'<div class="col-12 col-md-6"><div class="fw-semibold mb-1"><i class="bi bi-trophy me-1 text-accent"></i>Top vendedores · '+esc(nomeMeses[m]||'')+'</div>'+vend+'</div>'
            +'<div class="col-12 col-md-6"><div class="fw-semibold mb-1"><i class="bi bi-wallet2 me-1 text-accent"></i>Formas de pagamento</div>'
            + lin('Dinheiro',fm.dinheiro,'#22c55e') + lin('Débito',fm.debito,'#3b82f6') + lin('Crédito',fm.credito,'#f97316') +'</div>'
            +'</div></td>';
    }).catch(function(e){ det.innerHTML='<td colspan="12" class="text-muted small">Não foi possível carregar o detalhe ('+esc(e.message)+'). Formas: dinheiro '+fmtR(fm.dinheiro)+' · débito '+fmtR(fm.debito)+' · crédito '+fmtR(fm.credito)+'.</td>'; });
}

/* ── Exportar CSV / Imprimir ──────────────────────────────────────────────── */
function exportCsv(){
    var cmvMap=mapMes(ST.cmv), prev=mapMes(ST.prev), cur=mapMes(ST.linhas);
    var head=['Mes','Notas','Ticket Medio','Faturamento','CMV','Lucro','Margem %','Meta','% Meta','vs mes ant %','vs ano ant %','% do ano'];
    var totFat=ST.linhas.reduce(function(s,l){return s+parseFloat(l.TOTAL||0);},0);
    var linhasCsv=[head.join(';')];
    ST.linhas.forEach(function(l){
        var m=parseInt(l.MES||0), val=parseFloat(l.TOTAL||0);
        var d=cmvMap[m], cmv=d?parseFloat(d.CMV||0):'', lucro=d?(val-cmv):'', marg=(d&&val>0)?(val-cmv)/val*100:'';
        var antVal=cur[m-1]?parseFloat(cur[m-1].TOTAL||0):null, mom=(antVal&&antVal>0)?(val-antVal)/antVal*100:'';
        var yVal=prev[m]?parseFloat(prev[m].TOTAL||0):null, yoy=(yVal&&yVal>0)?(val-yVal)/yVal*100:'';
        var meta=metaDe(m), pctMeta=meta>0?val/meta*100:'';
        var pct=totFat>0?val/totFat*100:0;
        function n(x){ return x===''||x===null?'':String(parseFloat(x).toFixed(2)).replace('.',','); }
        linhasCsv.push([nomeMeses[m]||m, l.QTD_NOTAS||0, n(l.TICKET_MEDIO), n(val), n(cmv), n(lucro), n(marg), n(meta), n(pctMeta), n(mom), n(yoy), n(pct)].join(';'));
    });
    var blob=new Blob(["﻿"+linhasCsv.join('\r\n')],{type:'text/csv;charset=utf-8'});
    var a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='vendas-mensais-'+ST.ano+'.csv'; document.body.appendChild(a); a.click(); document.body.removeChild(a);
}

window.addEventListener('resize', function(){ if(chartEvol)chartEvol.resize(); if(chartLucro)chartLucro.resize(); if(chartFormas)chartFormas.resize(); });

window.addEventListener('DOMContentLoaded', function(){
    var btnCsv=document.getElementById('btn-csv'); if(btnCsv) btnCsv.addEventListener('click', exportCsv);
    var btnPr=document.getElementById('btn-print'); if(btnPr) btnPr.addEventListener('click', function(){ window.print(); });

    Promise.all([
        apiFetch('/api/vendas/mensais?ano='+anoSel),
        apiFetch('/api/vendas/mensais?ano='+anoAnt).catch(function(){return {linhas:[]};})
    ]).then(function(res){
        var dCur=res[0]||{}, dPrev=res[1]||{};
        ST.linhas=dCur.linhas||[]; ST.prev=dPrev.linhas||[]; ST.formas=dCur.formasMes||[]; ST.metas=dCur.metas||{}; ST.ano=dCur.anoSel||anoSel;
        renderKpis(); renderEvol(); renderFormas(); renderTabela();
        if(dCur.anos&&dCur.anos.length) atualizarAnosAbas(dCur.anos, ST.ano);
        // 2º plano: lucro/margem (pesado, cacheado)
        apiFetch('/api/vendas/mensais-margem?ano='+ST.ano).then(function(dm){
            ST.cmv=(dm&&dm.cmv)||[];
            // Backend marca confiavel=false quando o ERP grava CUSTO_FINAL ruim
            // (CMV total >= faturamento, ou >50% dos meses com CMV>=FAT).
            if(dm && dm.confiavel === false){ desabilitarCmv(); return; }
            patchMargem();
        }).catch(function(e){
            var st=document.getElementById('lucro-status'); if(st) st.innerHTML='<span class="text-muted">Lucro/margem indisponível ('+esc(e.message)+').</span>';
            Array.prototype.forEach.call(document.querySelectorAll('.cmv-cell,.lucro-cell,.margem-cell'), function(td){ td.innerHTML='<span class="text-muted">—</span>'; });
            var kl=document.getElementById('kpi-lucro'), km=document.getElementById('kpi-margem'); if(kl){kl.textContent='—';kl.style.opacity=1;} if(km){km.textContent='—';km.style.opacity=1;}
        });
    }).catch(function(e){ showErr('kpi-grid','Erro ao carregar: '+e.message); showErr('mensais-body','Erro: '+e.message); });
});

})();
</script>
