<?php
/**
 * Mesas / Tempo Médio — shell instantâneo.
 * KPIs 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-stopwatch me-2 text-accent"></i>Mesas</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<form method="get" action="/mesas/tempo-medio" 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"><strong>Tempo médio</strong> = quanto tempo, em média, cada mesa fica ocupada (da abertura ao fechamento). Útil para medir o giro das mesas.</div>

<!-- ── KPIs skeleton ─────────────────────────────────────────────────────── -->
<div class="pbi-kpi-grid mb-4" id="kpi-grid">
    <?php for ($i = 0; $i < 2; $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>

<!-- ── Tabela skeleton ───────────────────────────────────────────────────── -->
<div class="pbi-card" id="card-tempo">
    <div class="pbi-card-header d-flex justify-content-between">
        <span><i class="bi bi-stopwatch me-2"></i>Tempo por Mesa</span>
        <div class="pbi-hint" style="margin-top:0;flex-basis:100%">Tempo que cada mesa ficou ocupada. Verde = rápida, amarelo = acima de 1h, vermelho = acima de 2h.</div>
        <small class="text-muted" id="tempo-badge">
            <span class="pbi-skeleton d-inline-block" style="width:80px;height:.75rem;border-radius:3px">&nbsp;</span>
        </small>
    </div>
    <div id="tempo-body">
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>Mesa</th><th>Data</th>
                    <th>Abertura</th><th>Fechamento</th>
                    <th class="text-end">Tempo</th>
                    <th>Garçom</th>
                    <th class="text-end">Pessoas</th>
                    <th class="text-end">Total</th>
                </tr></thead>
                <tbody>
                <?php for ($i = 0; $i < 8; $i++): ?>
                <tr>
                    <?php $widths = [45, 70, 55, 65, 55, 110, 40, 75]; ?>
                    <?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_TEMPO = {
    dataIni: <?= json_encode($filtros['dataIni'] ?? '') ?>,
    dataFim: <?= json_encode($filtros['dataFim'] ?? '') ?>,
    actionUrl: '/mesas/tempo-medio'
};
</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.__MESAS_TEMPO.dataIni;
var fim = window.__MESAS_TEMPO.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 fmtMin(min) {
    min = parseInt(min) || 0;
    if (min >= 60) {
        var h = Math.floor(min / 60);
        var m = min % 60;
        return h + 'h' + (m > 0 ? String(m).padStart(2, '0') + 'min' : '');
    }
    return min + 'min';
}
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(mediaMin, qtd) {
    var html =
        '<div class="pbi-kpi-card">'
        + '<div class="pbi-kpi-label">Tempo Médio</div>'
        + '<div class="pbi-kpi-value text-accent">' + fmtMin(mediaMin) + '</div>'
        + '<div class="pbi-kpi-sub">por mesa</div>'
        + '</div>'
        + '<div class="pbi-kpi-card">'
        + '<div class="pbi-kpi-label">Mesas Analisadas</div>'
        + '<div class="pbi-kpi-value">' + fmtN(qtd, 0) + '</div>'
        + '</div>';
    document.getElementById('kpi-grid').innerHTML = html;
}

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

    if (!linhas.length) {
        document.getElementById('tempo-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 min = parseInt(r.MINUTOS || 0);
        var cls = min > 120 ? 'text-danger' : (min > 60 ? 'text-warning' : 'text-success');
        return '<tr>'
            + '<td>' + esc(r.COD_MESA || '—') + '</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 class="text-end fw-bold ' + cls + '">' + fmtMin(min) + '</td>'
            + '<td>' + esc(r.GARCOM || '—') + '</td>'
            + '<td class="text-end">' + parseInt(r.QTD_PESSOAS || 0) + '</td>'
            + '<td class="text-end">' + fmtR(r.TOTAL_ITENS) + '</td>'
            + '</tr>';
    }).join('');

    document.getElementById('tempo-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 class="text-end">Tempo</th><th>Garçom</th>'
        + '<th class="text-end">Pessoas</th><th class="text-end">Total</th>'
        + '</tr></thead>'
        + '<tbody>' + rows + '</tbody>'
        + '</table></div>';
}

window.addEventListener('DOMContentLoaded', function () {
    apiFetch('/api/mesas/tempo-medio' + qs)
        .then(function (d) {
            renderKpis(d.mediaMin || 0, (d.linhas || []).length);
            renderTempo(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('tempo-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>
