<?php
/**
 * Compras / Por Fornecedor — shell instantâneo.
 * Gráfico, KPIs e tabelas carregados via fetch() após o DOM pronto.
 * TTFB = tempo de render PHP (<10ms), sem nenhuma query Firebird aqui.
 */
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-building me-2 text-accent"></i>Compras</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<?php $actionUrl = '/compras/por-fornecedor'; include __DIR__ . '/_filtro.php'; ?>

<!-- ── Caixa de explicação ────────────────────────────────────────────────── -->
<div class="pbi-card mb-3" style="background:#f8fafc">
    <div style="padding:.75rem 1.25rem">
        <div class="mb-2"><strong>🏢 O que mostra esta tela:</strong> ranking dos seus fornecedores no período — quanto comprou de cada um, qual a fatia que representa do total, e quando foi a última compra. Útil pra negociar volume, identificar dependência e detectar fornecedor parado.</div>
        <div class="row g-2" style="font-size:.85rem">
            <div class="col-md-6"><strong>Top Fornecedores</strong> = os 5 onde você mais gastou</div>
            <div class="col-md-6"><strong>% do Total</strong> = peso de cada fornecedor no total comprado</div>
            <div class="col-md-6"><strong>Primeira / Última</strong> = data da primeira e última compra no período</div>
            <div class="col-md-6"><strong>Quantidade de Notas</strong> = quantas notas de entrada o fornecedor emitiu pra você</div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-lg-6">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-pie-chart me-2"></i>Top Fornecedores</div>
            <div class="pbi-hint mb-2" style="margin-top:0;padding:8px 12px 0">Os 5 fornecedores onde você mais gastou. A % mostra a fatia de cada um no total comprado.</div>
            <div id="chartFornec" style="height:280px">
                <div class="d-flex align-items-center justify-content-center h-100 text-muted small">
                    <div class="spinner-border spinner-border-sm me-2 text-accent"></div>Carregando…
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="pbi-kpi-grid" style="grid-template-columns:1fr 1fr;gap:.6rem" id="kpi-fornec">
            <?php for ($i = 0; $i < 4; $i++): ?>
            <div class="pbi-kpi-card">
                <div class="pbi-kpi-label pbi-skeleton" style="width:70%;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>
</div>

<!-- ── Tabela Por Fornecedor skeleton ────────────────────────────────────── -->
<div class="pbi-card mb-4" id="card-fornecedor">
    <div class="pbi-card-header d-flex justify-content-between">
        <span><i class="bi bi-building me-2"></i>Por Fornecedor</span>
        <small class="text-muted" id="fornecedor-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;padding:8px 12px 0">Quanto você comprou de cada fornecedor. % do Total = peso no total comprado; Primeira/Última = datas da primeira e da última compra no período.</div>
    <div id="fornecedor-body">
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>#</th><th>Fornecedor</th>
                    <th class="text-end">Quantidade de Notas</th>
                    <th class="text-end">Total Comprado</th>
                    <th class="text-end">% do Total</th>
                    <th class="text-center" title="Curva ABC: A=80% do total; B=80-95%; C=resto">Curva</th>
                    <th>Primeira</th><th>Última</th>
                </tr></thead>
                <tbody>
                <?php for ($i = 0; $i < 8; $i++): ?>
                <tr>
                    <?php $widths = [25, 160, 65, 90, 55, 30, 70, 70]; ?>
                    <?php foreach ($widths 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>

<!-- ── Card: Itens Mais Comprados skeleton ───────────────────────────────── -->
<div class="pbi-card" id="card-itens">
    <div class="pbi-card-header d-flex justify-content-between">
        <span><i class="bi bi-box-seam me-2"></i>Itens Mais Comprados</span>
        <small class="text-muted" id="itens-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;padding:8px 12px 0">Produtos mais comprados no periodo. Qtd Total = unidades compradas; Valor Total = quanto gastou; Preco Medio = media paga por unidade.</div>
    <div id="itens-body">
        <div class="px-3 py-4 text-center text-muted">
            <div class="spinner-border spinner-border-sm text-accent me-2" role="status"></div>
            <span style="font-size:.85rem">Carregando itens…</span>
        </div>
    </div>
</div>

<!-- ── Config injetada pelo PHP para o JS usar ──────────────────────────── -->
<script>
window.__COMPRAS_FORNEC = {
    dataIni: <?= json_encode($filtros['dataIni']) ?>,
    dataFim: <?= json_encode($filtros['dataFim']) ?>,
    actionUrl: <?= json_encode($actionUrl) ?>
};
</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 src="/assets/js/echarts.min.js"></script>
<script>
(function () {
'use strict';

var ini = window.__COMPRAS_FORNEC.dataIni;
var fim = window.__COMPRAS_FORNEC.dataFim;
var qs  = '?data_ini=' + encodeURIComponent(ini) + '&data_fim=' + encodeURIComponent(fim);

function fmtR(v) {
    return 'R$ ' + parseFloat(v || 0).toLocaleString('pt-BR', {minimumFractionDigits:2, maximumFractionDigits:2});
}
function fmtN(v, d) {
    d = d === undefined ? 0 : d;
    return parseFloat(v || 0).toLocaleString('pt-BR', {minimumFractionDigits:d, maximumFractionDigits:d});
}
function fmtData(s) {
    if (!s) return '—';
    return s.substring(8, 10) + '/' + s.substring(5, 7) + '/' + s.substring(0, 4);
}
function esc(s) {
    var d = document.createElement('div');
    d.textContent = s == null ? '' : String(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();
        });
}

// Curva ABC a partir de array de valores (já ordenado DESC).
// Acumula até 80% = A; 80-95% = B; resto = C.
// Depto de Engenharia e Automação - Master Automação - Autor: Derlivon Silva
function calcABC(valores) {
    var total = valores.reduce(function(s,v){return s+v;},0);
    if (total <= 0) return valores.map(function(){return 'C';});
    var acum = 0;
    return valores.map(function(v){
        acum += v;
        var pct = acum / total * 100;
        if (pct <= 80) return 'A';
        if (pct <= 95) return 'B';
        return 'C';
    });
}
function curvaBadge(curva) {
    if (curva === 'A') return '<span style="background:#dcfce7;color:#15803d;border:1px solid #86efac;border-radius:4px;padding:1px 6px;font-size:.7rem;font-weight:700">A</span>';
    if (curva === 'B') return '<span style="background:#fef9c3;color:#a16207;border:1px solid #fde047;border-radius:4px;padding:1px 6px;font-size:.7rem;font-weight:700">B</span>';
    return '<span style="background:#f1f5f9;color:#475569;border:1px solid #cbd5e1;border-radius:4px;padding:1px 6px;font-size:.7rem;font-weight:700">C</span>';
}

function renderFornecedor(linhas, anos) {
    // KPIs — Quick win 3: incluir cards de concentração Top1 e Top3
    var totalCompras = linhas.reduce(function(s, r) { return s + parseFloat(r.TOTAL || 0); }, 0);
    var top1Val = linhas.length ? parseFloat(linhas[0].TOTAL || 0) : 0;
    var top3Val = linhas.slice(0,3).reduce(function(s,r){return s+parseFloat(r.TOTAL||0);},0);
    var pctTop1 = totalCompras > 0 ? top1Val / totalCompras * 100 : 0;
    var pctTop3 = totalCompras > 0 ? top3Val / totalCompras * 100 : 0;
    var top1Nome = linhas.length ? esc((linhas[0].FORNECEDOR || '').substring(0,22)) : '—';
    var concCls  = pctTop1 > 50 ? 'text-danger' : pctTop1 > 30 ? 'text-warning' : 'text-success';

    document.getElementById('kpi-fornec').innerHTML =
        '<div class="pbi-kpi-card">'
        + '<div class="pbi-kpi-label">Fornecedores</div>'
        + '<div class="pbi-kpi-value">' + fmtN(linhas.length, 0) + '</div>'
        + '</div>'
        + '<div class="pbi-kpi-card">'
        + '<div class="pbi-kpi-label">Total Comprado</div>'
        + '<div class="pbi-kpi-value text-accent">' + fmtR(totalCompras) + '</div>'
        + '</div>'
        + '<div class="pbi-kpi-card">'
        + '<div class="pbi-kpi-label">Concentração Top 1</div>'
        + '<div class="pbi-kpi-value ' + concCls + '">' + fmtN(pctTop1,1) + '%</div>'
        + '<div class="pbi-kpi-sub" style="font-size:.72rem;color:var(--pbi-muted,#64748b)">' + top1Nome + '</div>'
        + '</div>'
        + '<div class="pbi-kpi-card">'
        + '<div class="pbi-kpi-label">Concentração Top 3</div>'
        + '<div class="pbi-kpi-value">' + fmtN(pctTop3,1) + '%</div>'
        + '<div class="pbi-kpi-sub" style="font-size:.72rem;color:var(--pbi-muted,#64748b)">3 maiores juntos</div>'
        + '</div>';

    // Atualiza abas de anos
    if (anos && anos.length) {
        var actionUrl = window.__COMPRAS_FORNEC.actionUrl;
        var anoAtual = parseInt(ini.substring(0, 4));
        var container = document.querySelector('.pbi-periodo-tabs');
        if (container) {
            var html = anos.map(function(a) {
                a = parseInt(a);
                var ini2 = a + '-01-01', fim2 = a + '-12-31';
                var cls = (a === anoAtual) ? ' active' : '';
                return '<a href="' + actionUrl + '?data_ini=' + ini2 + '&data_fim=' + fim2 + '" '
                     + 'class="pbi-tab-ano' + cls + '" '
                     + 'onclick="setPeriodoSession(' + a + ', 0)">' + a + '</a>';
            }).join('');
            container.innerHTML = html;
        }
    }

    // Badge
    document.getElementById('fornecedor-badge').textContent = linhas.length + ' fornecedores';

    // Tabela
    if (!linhas.length) {
        document.getElementById('fornecedor-body').innerHTML =
            '<p class="text-center text-muted py-4">Nenhum dado encontrado no período.</p>';
    } else {
        // Quick win 3: Curva ABC — calculada sobre TOTAL de cada fornecedor
        var valoresABC = linhas.map(function(r){ return parseFloat(r.TOTAL || 0); });
        var curvas = calcABC(valoresABC);

        var rows = linhas.map(function(r, i) {
            var pct = totalCompras > 0
                ? (parseFloat(r.TOTAL || 0) / totalCompras * 100).toLocaleString('pt-BR', {minimumFractionDigits:1, maximumFractionDigits:1}) + '%'
                : '—';
            return '<tr>'
                + '<td class="text-muted">' + (i + 1) + '</td>'
                + '<td>' + esc(r.FORNECEDOR || '—') + '</td>'
                + '<td class="text-end">' + fmtN(r.QTD_NOTAS, 0) + '</td>'
                + '<td class="text-end fw-bold">' + fmtR(r.TOTAL) + '</td>'
                + '<td class="text-end">' + pct + '</td>'
                + '<td class="text-center">' + curvaBadge(curvas[i]) + '</td>'
                + '<td>' + fmtData(r.PRIMEIRA_COMPRA) + '</td>'
                + '<td>' + fmtData(r.ULTIMA_COMPRA) + '</td>'
                + '</tr>';
        }).join('');
        document.getElementById('fornecedor-body').innerHTML =
            '<div class="table-responsive">'
            + '<table class="pbi-table">'
            + '<thead><tr><th>#</th><th>Fornecedor</th>'
            + '<th class="text-end">Quantidade de Notas</th><th class="text-end">Total Comprado</th>'
            + '<th class="text-end">% do Total</th>'
            + '<th class="text-center" title="Curva ABC: A=80% do total; B=80-95%; C=resto">Curva</th>'
            + '<th>Primeira</th><th>Última</th>'
            + '</tr></thead><tbody>' + rows + '</tbody></table></div>';
    }

    // Gráfico
    var top5 = linhas.slice(0, 5);
    var pieData = top5.map(function(r) {
        return {value: Math.round(parseFloat(r.TOTAL || 0) * 100) / 100, name: (r.FORNECEDOR || '—').substring(0, 20)};
    });
    var c = echarts.init(document.getElementById('chartFornec'));
    c.setOption({
        backgroundColor: 'transparent',
        title: pbiTotalDonut(totalCompras, '50%', '40%'),
        tooltip: {trigger: 'item'},
        legend: { type: 'scroll', orient: 'horizontal', bottom: 0, left: 'center', textStyle: { fontSize: 10, color: (getComputedStyle(document.documentElement).getPropertyValue('--pbi-text')||'').trim() || '#1e293b' }, itemWidth: 11, itemHeight: 11, pageIconSize: 9 },
        series: [{type: 'pie', radius: ['42%', '64%'], center: ['50%','40%'], data: pieData,
            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 }}]
    });
    window.addEventListener('resize', function() { c.resize(); });
}

function renderItens(itens) {
    document.getElementById('itens-badge').textContent = itens.length + ' itens';

    if (!itens.length) {
        document.getElementById('itens-body').innerHTML =
            '<p class="text-center text-muted py-4">Nenhum item encontrado.</p>';
        return;
    }

    var rows = itens.map(function(r, i) {
        return '<tr>'
            + '<td class="text-muted">' + (i + 1) + '</td>'
            + '<td class="text-muted" style="white-space:nowrap">' + esc(r.COD_ITEM || '—') + '</td>'
            + '<td class="fw-semibold">' + esc(r.DESCRICAO || '—') + '</td>'
            + '<td class="text-end">' + fmtN(r.QTD_TOTAL, 1) + '</td>'
            + '<td class="text-end fw-bold">' + fmtR(r.VALOR_TOTAL) + '</td>'
            + '<td class="text-end">' + fmtR(r.PRECO_MEDIO) + '</td>'
            + '<td class="text-end">' + parseInt(r.QTD_NOTAS || 0) + '</td>'
            + '</tr>';
    }).join('');

    document.getElementById('itens-body').innerHTML =
        '<div class="table-responsive">'
        + '<table class="pbi-table">'
        + '<thead><tr><th>#</th><th>Código</th><th>Produto</th>'
        + '<th class="text-end">Qtd Total</th><th class="text-end">Valor Total</th>'
        + '<th class="text-end">Preço Médio</th><th class="text-end">Notas</th>'
        + '</tr></thead><tbody>' + rows + '</tbody></table></div>';
}

window.addEventListener('DOMContentLoaded', function () {
    apiFetch('/api/compras/por-fornecedor' + qs)
        .then(function (d) {
            renderFornecedor(d.linhas || [], d.anos || []);
            renderItens(d.itens || []);
        })
        .catch(function (e) {
            document.getElementById('fornecedor-body').innerHTML =
                '<div class="px-3 py-3 alert alert-warning small"><i class="bi bi-exclamation-triangle me-2"></i>' + esc(e.message) + '</div>';
            document.getElementById('itens-body').innerHTML =
                '<div class="px-3 py-3 alert alert-warning small"><i class="bi bi-exclamation-triangle me-2"></i>' + esc(e.message) + '</div>';
        });
});

})();
</script>
