<?php
/**
 * Mesas / Histórico — shell instantâneo.
 * KPIs, gráficos e tabela 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-clock-history me-2 text-accent"></i>Mesas</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<form method="get" action="/mesas/historico" 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>

<div class="pbi-hint mb-3" style="margin-top:0">Resumo das mesas no período. <strong>Ticket Médio</strong> = valor médio gasto por mesa. Clique num card para ver os detalhes.</div>

<!-- ── 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>

<!-- ── Gráficos ───────────────────────────────────────────────────────────── -->
<div class="row g-3 mb-4">
    <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>Status das Mesas</div>
            <div class="pbi-hint mb-2" style="margin-top:0;padding:0 1rem">Quantas mesas foram fechadas (venda concluída), canceladas ou ainda estão abertas.</div>
            <div id="chartStatus" style="height:240px">
                <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-md-8">
        <div class="pbi-card h-100">
            <div class="pbi-card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-graph-up me-2"></i>Faturamento por Dia</span>
            </div>
            <div class="pbi-hint mb-2" style="margin-top:0;padding:0 1rem">Total faturado em mesas fechadas a cada dia do período.</div>
            <div id="chartFatDia" style="height:230px">
                <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 class="pbi-chart-hint"><i class="bi bi-cursor"></i>Clique numa barra para filtrar o histórico por aquele dia</div>
        </div>
    </div>
</div>

<!-- ── Tabela skeleton ───────────────────────────────────────────────────── -->
<div class="pbi-card" id="card-historico">
    <div class="pbi-card-header d-flex justify-content-between">
        <span><i class="bi bi-clock-history me-2"></i>Histórico de Mesas</span>
        <small class="text-muted" id="historico-badge">
            <span class="pbi-skeleton d-inline-block" style="width:80px;height:.75rem;border-radius:3px">&nbsp;</span>
        </small>
    </div>
    <div id="historico-body">
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>Mesa</th><th>Data</th>
                    <th>Abertura</th><th>Fechamento</th>
                    <th>Garçom</th>
                    <th class="text-end">Pessoas</th>
                    <th class="text-end">Total</th>
                    <th class="text-end">Desconto</th>
                    <th>Status</th>
                </tr></thead>
                <tbody>
                <?php for ($i = 0; $i < 8; $i++): ?>
                <tr>
                    <?php $widths = [45, 70, 55, 65, 120, 40, 75, 60, 65]; ?>
                    <?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>

<!-- ── Config injetada pelo PHP para o JS usar ──────────────────────────── -->
<script>
window.__MESAS_HIST = {
    dataIni: <?= json_encode($filtros['dataIni'] ?? '') ?>,
    dataFim: <?= json_encode($filtros['dataFim'] ?? '') ?>,
    actionUrl: '/mesas/historico'
};
</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.__MESAS_HIST.dataIni;
var fim = window.__MESAS_HIST.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();
        });
}

function renderKpis(kpis) {
    var dIni = ini, dFim = fim;
    var html =
        '<a href="/mesas/historico?data_ini=' + dIni + '&data_fim=' + dFim + '" class="pbi-kpi-card">'
        + '<div class="pbi-kpi-label">Mesas no Período</div>'
        + '<div class="pbi-kpi-value">' + fmtN(kpis.QTD_TOTAL || 0, 0) + '</div>'
        + '</a>'
        + '<a href="/mesas/historico?data_ini=' + dIni + '&data_fim=' + dFim + '&status=F" class="pbi-kpi-card">'
        + '<div class="pbi-kpi-label">Fechadas</div>'
        + '<div class="pbi-kpi-value text-success">' + fmtN(kpis.QTD_FECHADAS || 0, 0) + '</div>'
        + '</a>'
        + '<a href="/mesas/historico?data_ini=' + dIni + '&data_fim=' + dFim + '&status=C" class="pbi-kpi-card">'
        + '<div class="pbi-kpi-label">Canceladas</div>'
        + '<div class="pbi-kpi-value text-danger">' + fmtN(kpis.QTD_CANCELADAS || 0, 0) + '</div>'
        + '</a>'
        + '<a href="/mesas/por-garcom?data_ini=' + dIni + '&data_fim=' + dFim + '" class="pbi-kpi-card">'
        + '<div class="pbi-kpi-label">Faturamento</div>'
        + '<div class="pbi-kpi-value text-accent">' + fmtR(kpis.FATURAMENTO || 0) + '</div>'
        + '<div class="pbi-kpi-sub">ver por garçom →</div>'
        + '</a>'
        + '<a href="/mesas/tempo-medio?data_ini=' + dIni + '&data_fim=' + dFim + '" class="pbi-kpi-card">'
        + '<div class="pbi-kpi-label">Ticket Médio</div>'
        + '<div class="pbi-kpi-value">' + fmtR(kpis.TICKET_MEDIO || 0) + '</div>'
        + '<div class="pbi-kpi-sub">ver tempo médio →</div>'
        + '</a>';
    document.getElementById('kpi-grid').innerHTML = html;
}

function renderCharts(linhas, kpis) {
    // Agrega por dia
    var porDia = {};
    linhas.forEach(function(r) {
        if ((r.STATUS || '').trim() === 'F' && r.DATA_ABERTURA) {
            var d = String(r.DATA_ABERTURA).substring(0, 10);
            porDia[d] = (porDia[d] || 0) + parseFloat(r.TOTAL_ITENS || 0);
        }
    });
    var diasKeys = Object.keys(porDia).sort();
    var diasLab  = diasKeys.map(function(d){ return d.substring(8,10)+'/'+d.substring(5,7); });
    var diasFat  = diasKeys.map(function(d){ return Math.round(porDia[d]*100)/100; });

    var qtdF = parseInt(kpis.QTD_FECHADAS || 0);
    var qtdC = parseInt(kpis.QTD_CANCELADAS || 0);
    var qtdA = Math.max(0, parseInt(kpis.QTD_TOTAL || 0) - qtdF - qtdC);
    var ax = {color:'#64748b', fontSize:11};

    var totalMesas = qtdF + qtdC + qtdA;
    var cs = echarts.init(document.getElementById('chartStatus'));
    cs.setOption({backgroundColor:'transparent',
        title: pbiTotalDonut(totalMesas, '50%', '40%', String, 'Mesas'),
        tooltip:{trigger:'item',formatter:'{b}: {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:qtdF,name:'Fechadas',itemStyle:{color:'#16a34a'}},
                {value:qtdC,name:'Canceladas',itemStyle:{color:'#dc2626'}},
                {value:qtdA,name:'Abertas',itemStyle:{color:'#d97706'}}
            ].filter(function(d){return d.value>0;})}]});

    var cf = echarts.init(document.getElementById('chartFatDia'));
    cf.setOption({backgroundColor:'transparent',
        tooltip:{trigger:'axis',formatter:function(p){return p[0].name+': R$ '+p[0].data.toLocaleString('pt-BR',{minimumFractionDigits:2});}},
        xAxis:{type:'category',data:diasLab,axisLabel:Object.assign({},ax,{rotate:35})},
        yAxis:{type:'value',axisLabel:{color:ax.color,fontSize:ax.fontSize,formatter:function(v){return 'R$'+(v/1000).toFixed(0)+'k';}}},
        series:[{type:'bar',data:diasFat,itemStyle:{color:'#4f8ef7'},emphasis:{itemStyle:{color:'#3a6fd8'}},cursor:'pointer'}]});

    cf.on('click', function(p){
        var d = diasKeys[p.dataIndex];
        if (d) window.location.href = '/mesas/historico?data_ini=' + d + '&data_fim=' + d;
    });

    window.addEventListener('resize', function(){cs.resize(); cf.resize();});
}

function renderHistorico(linhas) {
    document.getElementById('historico-badge').textContent = linhas.length + ' registros';

    if (!linhas.length) {
        document.getElementById('historico-body').innerHTML =
            '<p class="text-center text-muted py-4">Nenhum registro encontrado no período.</p>';
        return;
    }

    var rows = linhas.map(function(r) {
        var status = (r.STATUS || '').trim();
        var badge = status === 'F'
            ? '<span class="pbi-badge pbi-badge-success">Fechada</span>'
            : (status === 'C'
                ? '<span class="pbi-badge pbi-badge-danger">Cancelada</span>'
                : '<span class="pbi-badge pbi-badge-warning">Aberta</span>');
        return '<tr>'
            + '<td><span class="fw-bold">' + esc(r.COD_MESA || '—') + '</span></td>'
            + '<td>' + fmtData(r.DATA_ABERTURA) + '</td>'
            + '<td>' + esc((r.HORA_ABERTURA || '—').substring(0, 5)) + '</td>'
            + '<td>' + esc((r.HORA_FECHAMENTO || '—').substring(0, 5)) + '</td>'
            + '<td>' + esc(r.GARCOM || '—') + '</td>'
            + '<td class="text-end">' + parseInt(r.QTD_PESSOAS || 0) + '</td>'
            + '<td class="text-end fw-bold">' + fmtR(r.TOTAL_ITENS) + '</td>'
            + '<td class="text-end text-warning">' + fmtR(r.DESCONTO) + '</td>'
            + '<td>' + badge + '</td>'
            + '</tr>';
    }).join('');

    document.getElementById('historico-body').innerHTML =
        '<div class="table-responsive">'
        + '<table class="pbi-table">'
        + '<thead><tr>'
        + '<th>Mesa</th><th>Data</th><th>Abertura</th><th>Fechamento</th>'
        + '<th>Garçom</th><th class="text-end">Pessoas</th>'
        + '<th class="text-end">Total</th><th class="text-end">Desconto</th><th>Status</th>'
        + '</tr></thead>'
        + '<tbody>' + rows + '</tbody>'
        + '</table></div>';
}

window.addEventListener('DOMContentLoaded', function () {
    apiFetch('/api/mesas/historico' + qs)
        .then(function (d) {
            renderKpis(d.kpis || {});
            renderCharts(d.linhas || [], d.kpis || {});
            renderHistorico(d.linhas || []);
        })
        .catch(function (e) {
            document.getElementById('kpi-grid').innerHTML =
                '<div class="alert alert-warning small"><i class="bi bi-exclamation-triangle me-2"></i>Erro KPIs: ' + esc(e.message) + '</div>';
            document.getElementById('historico-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>
