<?php
/**
 * Produtos / Histórico de Preços — shell instantâneo.
 */
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-tag me-2 text-accent"></i>Produtos</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<form method="get" action="/produtos/precos" class="pbi-filtro-barra mb-4 d-flex gap-2" id="form-precos">
    <input type="text" name="busca" value="<?= \App\Core\View::e($busca??'') ?>" placeholder="Buscar produto..." class="pbi-filtro-input form-control" style="max-width:380px;" id="input-busca">
    <button type="submit" class="pbi-btn-filtrar btn"><i class="bi bi-search me-1"></i>Buscar</button>
    <?php if (!empty($busca)): ?><a href="/produtos/precos" class="btn btn-sm btn-outline-secondary">Limpar</a><?php endif; ?>
</form>

<!-- ── Área de resultados ─────────────────────────────────────────────────── -->
<div id="precos-area">
<?php if (empty($busca)): ?>
<div class="pbi-card">
    <div class="p-5 text-center">
        <i class="bi bi-search text-muted" style="font-size:3rem"></i>
        <p class="mt-3 text-muted">Digite o nome de um produto para ver o histórico de preços.</p>
    </div>
</div>
<?php else: ?>
<!-- skeleton enquanto carrega -->
<div id="precos-loading" class="text-center py-5">
    <div class="spinner-border spinner-border-sm text-accent me-2" role="status"></div>
    <span class="text-muted">Buscando preços…</span>
</div>
<?php endif; ?>
</div>

<script>
window.__PRODUTOS_PRECOS = {
    busca: <?= json_encode($busca??'') ?>
};
</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 busca = window.__PRODUTOS_PRECOS.busca;
if (!busca) return; // sem busca, não carrega nada

function fmtR(v){return 'R$ '+parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2});}
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||'';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();
    });
}

function renderPrecos(linhas) {
    var area = document.getElementById('precos-area');

    if (!linhas.length) {
        area.innerHTML = '<div class="alert alert-warning">Nenhum produto encontrado para "'
            + esc(busca) + '".</div>';
        return;
    }

    var html = linhas.map(function(r){
        var preco  = parseFloat(r.PRECO_VENDA||0);
        var custo  = parseFloat(r.CUSTO_FINAL||0);
        var margem = preco > 0 ? (preco-custo)/preco*100 : 0;
        var mCls   = margem >= 30 ? 'text-success' : (margem > 0 ? 'text-warning' : 'text-danger');

        var hist = '';
        if (r.PRECO_ANT1) hist += '<tr><td>Anterior 1</td><td class="text-end">'+fmtR(r.PRECO_ANT1)+'</td><td>'+fmtData(r.DT_ANT1)+'</td></tr>';
        if (r.PRECO_ANT2) hist += '<tr><td>Anterior 2</td><td class="text-end">'+fmtR(r.PRECO_ANT2)+'</td><td>'+fmtData(r.DT_ANT2)+'</td></tr>';
        if (r.PRECO_ANT3) hist += '<tr><td>Anterior 3</td><td class="text-end">'+fmtR(r.PRECO_ANT3)+'</td><td>'+fmtData(r.DT_ANT3)+'</td></tr>';

        return '<div class="pbi-card mb-4">'
            + '<div class="pbi-card-header d-flex justify-content-between">'
            + '<span><i class="bi bi-tag me-2"></i>'+esc(r.DESCRICAO||'')
            + ' <small class="text-muted fw-normal">Cód: '+esc(String(r.COD_ITEM||''))+'</small></span>'
            + '<small class="text-muted">Cód: '+esc(String(r.COD_ITEM||''))+'</small></div>'
            + '<div class="p-3">'
            + '<div class="pbi-hint mb-2" style="margin-top:0"><strong>Custo Final</strong> = quanto você paga pelo produto. <strong>Margem</strong> = seu lucro sobre o preço de venda (verde = boa, vermelho = vendendo no prejuízo). Abaixo, os preços anteriores.</div>'
            + '<div class="row g-3">'
            + '<div class="col-md-3"><div class="pbi-kpi-card"><div class="pbi-kpi-label">Preço Atual</div>'
            + '<div class="pbi-kpi-value text-accent">'+fmtR(r.PRECO_VENDA||0)+'</div>'
            + '<div class="pbi-kpi-sub">'+fmtData(r.DT_ATUALIZACAO)+'</div></div></div>'
            + '<div class="col-md-3"><div class="pbi-kpi-card"><div class="pbi-kpi-label">Custo Final</div>'
            + '<div class="pbi-kpi-value">'+fmtR(r.CUSTO_FINAL||0)+'</div></div></div>'
            + '<div class="col-md-3"><div class="pbi-kpi-card"><div class="pbi-kpi-label">Custo Médio</div>'
            + '<div class="pbi-kpi-value">'+fmtR(r.CUSTO_MEDIO||0)+'</div></div></div>'
            + '<div class="col-md-3"><div class="pbi-kpi-card"><div class="pbi-kpi-label">Margem</div>'
            + '<div class="pbi-kpi-value '+mCls+'">'+margem.toLocaleString('pt-BR',{minimumFractionDigits:1,maximumFractionDigits:1})+'%</div></div></div>'
            + '</div>'
            + (hist ? '<table class="pbi-table mt-3"><thead><tr><th>Histórico</th><th class="text-end">Preço</th><th>Data</th></tr></thead><tbody>'+hist+'</tbody></table>' : '')
            + '</div></div>';
    }).join('');

    area.innerHTML = html;
}

window.addEventListener('DOMContentLoaded', function(){
    apiFetch('/api/produtos/precos?busca='+encodeURIComponent(busca))
        .then(function(d){renderPrecos(d.linhas||[]);})
        .catch(function(e){
            document.getElementById('precos-area').innerHTML=
                '<div class="alert alert-warning small">Erro: '+esc(e.message)+'</div>';
        });
});

})();
</script>
