<?php
/**
 * Produtos / Curva ABC — shell instantâneo.
 */
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-bar-chart me-2 text-accent"></i>Produtos</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<form method="get" action="/produtos/curva-abc" class="pbi-filtro-barra mb-3">
    <div class="pbi-filtro-row">
        <div class="pbi-filtro-field"><label class="pbi-filtro-label">De</label>
            <input type="date" name="data_ini" value="<?= \App\Core\View::e($filtros['dataIni']??'') ?>" class="pbi-filtro-input form-control"></div>
        <div class="pbi-filtro-field"><label class="pbi-filtro-label">Até</label>
            <input type="date" name="data_fim" value="<?= \App\Core\View::e($filtros['dataFim']??'') ?>" class="pbi-filtro-input form-control"></div>
        <button type="submit" class="pbi-btn-filtrar btn"><i class="bi bi-funnel me-1"></i>Filtrar</button>
    </div>
</form>

<!-- ── KPIs skeleton ─────────────────────────────────────────────────────── -->
<div class="pbi-kpi-grid mb-4" id="kpi-grid">
    <?php for ($i = 0; $i < 5; $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-3" style="margin-top:0"><strong>Curva ABC</strong> classifica os produtos por importância no faturamento: <strong>A</strong> = poucos itens que dão a maior parte da venda; <strong>B</strong> = importância média; <strong>C</strong> = muitos itens de baixo impacto. Os % são calculados sobre o <strong>faturamento total real</strong> do período (todas as vendas, sem canceladas). <strong>Clique num card de classe (A/B/C)</strong> para filtrar a tabela só naquela classe.</div>

<!-- ── Gráficos (async) ──────────────────────────────────────────────────── -->
<div id="charts-area" class="row g-3 mb-4" style="display:none!important"></div>

<!-- ── Tabela (async) ────────────────────────────────────────────────────── -->
<div class="pbi-card" id="card-abc">
    <div class="pbi-card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span><i class="bi bi-bar-chart me-2"></i>Curva ABC de Produtos</span>
        <div class="d-flex align-items-center gap-2">
            <label class="small text-muted mb-0">Ordenar por</label>
            <select id="abc-ordem" class="form-select form-select-sm" style="width:auto">
                <option value="fat">Faturamento</option>
                <option value="lucro">Lucro (R$)</option>
                <option value="margem">Margem (%)</option>
            </select>
            <small class="text-muted" id="abc-badge">
                <span class="pbi-skeleton d-inline-block" style="width:80px;height:.75rem;border-radius:3px">&nbsp;</span>
            </small>
        </div>
        <div class="pbi-hint mb-2" style="margin-top:0;flex-basis:100%"><strong>Lucro</strong> = Faturamento − custo (CMV) no período. <strong>Margem</strong> = lucro ÷ faturamento. Ordene por <strong>Lucro</strong> p/ ver os que mais deram dinheiro (margem × volume). <strong>s/ custo</strong> = custo não preenchido (corrija na Saúde do Cadastro). <strong>% Acum.</strong> = soma acumulada por faturamento.</div>
    </div>
    <div id="abc-body">
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>#</th><th>Código</th><th>Produto</th><th>Un</th><th>Classe</th>
                    <th class="text-end">Qtd Vendida</th>
                    <th class="text-end">Faturamento</th>
                    <th class="text-end">% Fat.</th>
                    <th class="text-end">% Acum.</th>
                    <th class="text-end">Notas</th>
                </tr></thead>
                <tbody>
                <?php for ($i = 0; $i < 8; $i++): ?>
                <tr>
                    <?php foreach ([30,60,160,40,40,70,80,50,55,40] as $w): ?>
                    <td><span class="pbi-skeleton d-inline-block" style="width:<?= $w ?>px;height:.75rem;border-radius:3px">&nbsp;</span></td>
                    <?php endforeach; ?>
                </tr>
                <?php endfor; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
window.__PRODUTOS_ABC = {
    dataIni: <?= json_encode($filtros['dataIni']??'') ?>,
    dataFim: <?= json_encode($filtros['dataFim']??'') ?>
};
</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}
</style>

<script>
(function(){
'use strict';

var ini = window.__PRODUTOS_ABC.dataIni;
var fim = window.__PRODUTOS_ABC.dataFim;
var qs  = '?data_ini='+encodeURIComponent(ini)+'&data_fim='+encodeURIComponent(fim);
var _linhas = [], _filtroCls = null;

function fmtR(v){return 'R$ '+parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2});}
function fmtN(v,d){return parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:d||0,maximumFractionDigits:d||0});}
function fmtP(v){return parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:1,maximumFractionDigits:1})+'%';}
function esc(s){var d=document.createElement('div');d.textContent=s||'';return d.innerHTML;}
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();
    });
}

// Monta/refaz a tabela conforme o filtro de classe (_filtroCls). null = todas.
var _MAXSHOW = 1000; // teto de linhas renderizadas (a contagem dos cards usa o total)
function margemTxt(r){
    // CMV<=0 com faturamento>0 = custo nao informado (margem "100%" falsa)
    if ((r.CMV||0) <= 0 && (r.FATURAMENTO||0) > 0)
        return '<span class="text-muted" title="Custo nao informado — corrija na Saude do Cadastro">s/ custo</span>';
    var m = parseFloat(r.MARGEM_PERC||0);
    var cls = m < 0 ? 'text-danger fw-bold' : (m < 15 ? 'text-warning' : 'text-success');
    return '<span class="'+cls+'">'+fmtP(m)+'</span>';
}

function renderTabela() {
    var dados = _filtroCls ? _linhas.filter(function(r){return r.CLASSE===_filtroCls;}) : _linhas.slice();
    var ord = (document.getElementById('abc-ordem')||{}).value || 'fat';
    if (ord === 'lucro')       dados = dados.slice().sort(function(a,b){ return (b.LUCRO||0)-(a.LUCRO||0); });
    else if (ord === 'margem') dados = dados.slice().sort(function(a,b){ return (b.MARGEM_PERC||0)-(a.MARGEM_PERC||0); });
    var total = dados.length;
    var mostra = dados.slice(0, _MAXSHOW);
    var badge = document.getElementById('abc-badge');
    badge.innerHTML = total + ' itens'
        + (total > _MAXSHOW ? ' <span class="text-muted">(mostrando '+_MAXSHOW+')</span>' : '')
        + (_filtroCls ? ' · <strong>Classe '+_filtroCls+'</strong> <a href="#" id="abc-limpar" class="ms-1">limpar filtro</a>' : '');

    if (!mostra.length) {
        document.getElementById('abc-body').innerHTML =
            '<p class="text-center text-muted py-4">Nenhum produto'+(_filtroCls?' na Classe '+_filtroCls:'')+'.</p>';
    } else {
        var rows = mostra.map(function(r, i){
            var badgeCls = r.CLASSE==='A' ? 'pbi-badge-success'
                         : (r.CLASSE==='B' ? 'pbi-badge-warning' : '');
            return '<tr>'
                + '<td class="text-muted">'+(i+1)+'</td>'
                + '<td class="fw-semibold">'+esc(r.COD_ITEM||'')+'</td>'
                + '<td>'+esc((r.DESCRICAO||'').substring(0,40))+'</td>'
                + '<td><span class="badge bg-secondary">'+esc(r.COD_UNIDADE||'-')+'</span></td>'
                + '<td><span class="pbi-badge '+badgeCls+'">'+esc(r.CLASSE||'')+'</span></td>'
                + '<td class="text-end">'+fmtN(r.QTD_TOTAL||0,1)+'</td>'
                + '<td class="text-end fw-bold">'+fmtR(r.FATURAMENTO||0)+'</td>'
                + '<td class="text-end">'+fmtR(r.LUCRO||0)+'</td>'
                + '<td class="text-end">'+margemTxt(r)+'</td>'
                + '<td class="text-end">'+fmtP(r.PERC_FAT||0)+'</td>'
                + '<td class="text-end">'+fmtP(r.PERC_ACUM||0)+'</td>'
                + '<td class="text-end">'+parseInt(r.QTD_NOTAS||0)+'</td>'
                + '</tr>';
        }).join('');
        document.getElementById('abc-body').innerHTML =
            '<div class="table-responsive"><table class="pbi-table">'
            + '<thead><tr><th>#</th><th>Código</th><th>Produto</th><th>Un</th><th>Classe</th>'
            + '<th class="text-end">Qtd Vendida</th><th class="text-end">Faturamento</th>'
            + '<th class="text-end">Lucro</th><th class="text-end">Margem</th>'
            + '<th class="text-end">% Fat.</th><th class="text-end">% Acum.</th><th class="text-end">Notas</th>'
            + '</tr></thead><tbody>'+rows+'</tbody></table></div>';
    }

    var lk = document.getElementById('abc-limpar');
    if (lk) lk.addEventListener('click', function(e){ e.preventDefault(); setFiltroCls(null); });
}

// Aplica/alterna o filtro de classe ao clicar num card de KPI.
function setFiltroCls(c) {
    _filtroCls = (_filtroCls === c) ? null : c;
    renderTabela();
    document.querySelectorAll('.kpi-cls').forEach(function(el){
        var on = el.dataset.cls === _filtroCls;
        el.style.boxShadow = on ? '0 0 0 3px var(--pbi-accent,#e91e8c)55' : '';
        el.style.transform = on ? 'translateY(-2px)' : '';
    });
    // leva a tabela à vista quando filtra
    if (_filtroCls) document.getElementById('card-abc').scrollIntoView({behavior:'smooth', block:'nearest'});
}

function renderAbc(kpis, linhas) {
    var qtdA = linhas.filter(function(r){return r.CLASSE==='A';}).length;
    var qtdB = linhas.filter(function(r){return r.CLASSE==='B';}).length;
    var qtdC = linhas.filter(function(r){return r.CLASSE==='C';}).length;
    var fatA = linhas.filter(function(r){return r.CLASSE==='A';}).reduce(function(s,r){return s+parseFloat(r.FATURAMENTO||0);},0);
    var fatB = linhas.filter(function(r){return r.CLASSE==='B';}).reduce(function(s,r){return s+parseFloat(r.FATURAMENTO||0);},0);
    var fatC = linhas.filter(function(r){return r.CLASSE==='C';}).reduce(function(s,r){return s+parseFloat(r.FATURAMENTO||0);},0);

    // KPIs
    document.getElementById('kpi-grid').innerHTML =
        '<div class="pbi-kpi-card"><div class="pbi-kpi-label">Produtos Vendidos</div>'
        + '<div class="pbi-kpi-value">'+fmtN(kpis.PRODUTOS_VENDIDOS||0,0)+'</div></div>'
        + '<div class="pbi-kpi-card"><div class="pbi-kpi-label">Faturamento</div>'
        + '<div class="pbi-kpi-value text-accent">'+fmtR(kpis.FATURAMENTO||0)+'</div></div>'
        + '<div class="pbi-kpi-card kpi-cls" data-cls="A" style="border-color:#22c55e;cursor:pointer"><div class="pbi-kpi-label">Classe A</div>'
        + '<div class="pbi-kpi-value text-success">'+qtdA+' produtos</div>'
        + '<div class="pbi-kpi-sub">70% faturamento · clique p/ ver</div></div>'
        + '<div class="pbi-kpi-card kpi-cls" data-cls="B" style="border-color:#f59e0b;cursor:pointer"><div class="pbi-kpi-label">Classe B</div>'
        + '<div class="pbi-kpi-value text-warning">'+qtdB+' produtos</div>'
        + '<div class="pbi-kpi-sub">20% faturamento · clique p/ ver</div></div>'
        + '<div class="pbi-kpi-card kpi-cls" data-cls="C" style="border-color:#6b7280;cursor:pointer"><div class="pbi-kpi-label">Classe C</div>'
        + '<div class="pbi-kpi-value text-muted">'+qtdC+' produtos</div>'
        + '<div class="pbi-kpi-sub">10% faturamento · clique p/ ver</div></div>';

    // Tabela (filtrável pelos cards de classe)
    _linhas = linhas;
    _filtroCls = null;
    renderTabela();
    document.querySelectorAll('.kpi-cls').forEach(function(el){
        el.addEventListener('click', function(){ setFiltroCls(el.dataset.cls); });
    });

    if (!linhas.length) return;

    // Gráficos
    if (typeof echarts !== 'undefined') {
        var area = document.getElementById('charts-area');
        area.style.removeProperty('display');
        area.innerHTML =
            '<div class="col-md-4"><div class="pbi-card h-100">'
            + '<div class="pbi-card-header"><i class="bi bi-pie-chart me-2"></i>Distribuição ABC'
            + '<div class="pbi-hint mb-2" style="margin-top:0">Quanto cada classe (A, B, C) representa do faturamento total.</div></div>'
            + '<div id="chartAbcPie" style="height:260px"></div></div></div>'
            + '<div class="col-md-8"><div class="pbi-card h-100">'
            + '<div class="pbi-card-header"><i class="bi bi-bar-chart me-2"></i>Top 15 — Faturamento + Curva Acumulada'
            + '<div class="pbi-hint mb-2" style="margin-top:0">Os 15 produtos que mais venderam. A linha mostra o faturamento somado item a item. Clique numa barra para ver o histórico de preços.</div></div>'
            + '<div id="chartAbcBar" style="height:260px"></div></div></div>';

        var top15  = linhas.slice(0,15);
        var labels = top15.map(function(r){return (r.DESCRICAO||'').substring(0,22);});
        var fats15 = top15.map(function(r){return Math.round(parseFloat(r.FATURAMENTO||0)*100)/100;});
        var acum15 = top15.map(function(r){return Math.round(parseFloat(r.PERC_ACUM||0)*10)/10;});
        var cores  = top15.map(function(r){return r.CLASSE==='A'?'#16a34a':(r.CLASSE==='B'?'#d97706':'#6b7280');});
        var ax     = {color:'#64748b',fontSize:10};

        var totalAbcPie = fatA + fatB + fatC;
        var cp = echarts.init(document.getElementById('chartAbcPie'));
        cp.setOption({backgroundColor:'transparent',
            title: pbiTotalDonut(totalAbcPie, '50%', '40%'),
            tooltip:{trigger:'item',formatter:'{b}: R$ {c} ({d}%)'},
            legend:{type:'scroll',orient:'horizontal',bottom:0,left:'center',textStyle:{fontSize:10,color:'#475569'},itemWidth:11,itemHeight:11,pageIconSize:9},
            series:[{type:'pie',radius:['42%','64%'],center:['50%','40%'],label:{show:true,position:'inside',formatter:function(p){return p.percent>=6?Math.round(p.percent)+'%':'';},fontSize:10,fontWeight:700,color:'#fff'},emphasis:{scale:true,scaleSize:6},
                data:[
                    {value:Math.round(fatA*100)/100,name:'Classe A',itemStyle:{color:'#16a34a'}},
                    {value:Math.round(fatB*100)/100,name:'Classe B',itemStyle:{color:'#d97706'}},
                    {value:Math.round(fatC*100)/100,name:'Classe C',itemStyle:{color:'#6b7280'}}
                ]}]});

        var cb = echarts.init(document.getElementById('chartAbcBar'));
        cb.setOption({backgroundColor:'transparent',
            tooltip:{trigger:'axis'},
            legend:{data:['Faturamento','% Acum.'],textStyle:{color:'#475569'}},
            xAxis:{type:'category',data:labels,axisLabel:{color:ax.color,fontSize:ax.fontSize,rotate:35}},
            yAxis:[
                {type:'value',name:'R$',axisLabel:{color:ax.color,fontSize:ax.fontSize,formatter:function(v){return 'R$'+(v/1000).toFixed(0)+'k';}}},
                {type:'value',name:'%',axisLabel:{color:ax.color,fontSize:ax.fontSize},max:100,splitLine:{show:false}}
            ],
            series:[
                {name:'Faturamento',type:'bar',data:fats15,
                    itemStyle:{color:function(p){return cores[p.dataIndex]||'#4f8ef7';}},cursor:'pointer'},
                {name:'% Acum.',type:'line',yAxisIndex:1,data:acum15,
                    lineStyle:{color:'#4f8ef7'},symbol:'circle',symbolSize:5,itemStyle:{color:'#4f8ef7'}}
            ]});

        cb.on('click',function(p){
            if(p.seriesName==='Faturamento'){
                var nome=labels[p.dataIndex];
                if(nome) window.location.href='/produtos/precos?busca='+encodeURIComponent(nome.split(' ').slice(0,3).join(' '));
            }
        });

        window.addEventListener('resize',function(){cp.resize();cb.resize();});
    }
}

var _ordemEl = document.getElementById('abc-ordem');
if (_ordemEl) _ordemEl.addEventListener('change', function(){ if (_linhas.length) renderTabela(); });

window.addEventListener('DOMContentLoaded', function(){
    var p1 = apiFetch('/api/produtos/kpis'+qs);
    var p2 = apiFetch('/api/produtos/curva-abc'+qs);
    Promise.all([p1, p2])
        .then(function(results){
            renderAbc(results[0].kpis||{}, results[1].linhas||[]);
        })
        .catch(function(e){
            document.getElementById('abc-body').innerHTML=
                '<div class="px-3 py-3 alert alert-warning small">Erro: '+esc(e.message)+'</div>';
        });
});

})();
</script>
