<?php
// Depto de Engenharia e Automação - Master Automação - Autor: Derlivon Silva
$nomeEmpresa = trim((string)($config['nome_empresa'] ?? ($config['empresa'] ?? '')));
$uri = parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH);
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= \App\Core\View::e($titulo ?? 'Tempo de Preparo — Cozinha') ?></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<style>
:root{
  --bg:#0a0e14; --bg2:#10151c; --card:#1a2230; --border:#2a3340;
  --txt:#f1f5f9; --muted:#94a3b8; --accent:#6366F1;
  --verde:#10b981; --amarelo:#f59e0b; --vermelho:#ef4444; --esquecido:#dc2626;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;min-height:100vh}
a{color:var(--accent);text-decoration:none}

.kds-topbar{display:flex;align-items:center;gap:1rem;padding:.85rem 1.2rem;background:var(--bg2);border-bottom:2px solid var(--border);position:sticky;top:0;z-index:50}
.kds-logo{display:flex;align-items:center;gap:.6rem;font-size:1.3rem;font-weight:800;color:var(--accent)}
.kds-logo i{font-size:1.6rem}
.kds-empresa{font-size:1rem;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kds-relogio{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums}
.kds-voltar{background:none;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:.5rem .9rem;font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem}
.kds-voltar:hover{background:var(--card);color:var(--txt)}

.kds-tabs{display:flex;gap:.3rem;padding:0 1.2rem;background:#131922;border-bottom:1px solid var(--border);overflow-x:auto}
.kds-tab{padding:.85rem 1.2rem;color:var(--muted);font-size:.95rem;border-bottom:3px solid transparent;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem}
.kds-tab:hover{color:var(--txt)}
.kds-tab.ativa{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

.kds-conteudo{padding:1.5rem 1.2rem}
.kds-cabec{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.kds-titulo{font-size:1.5rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.kds-subtitulo{color:var(--muted);font-size:.92rem;max-width:680px;margin-top:.3rem}

.kds-filtros{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}
.kds-filtro-field{display:flex;flex-direction:column;gap:.3rem}
.kds-filtro-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.kds-input{background:var(--card);border:1px solid var(--border);color:var(--txt);padding:.55rem .8rem;border-radius:8px;font-size:.95rem}
.kds-input:focus{outline:none;border-color:var(--accent)}
.kds-btn{background:var(--accent);color:#000;border:none;border-radius:8px;padding:.6rem 1.2rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem}
.kds-btn:hover{filter:brightness(1.1)}

.kds-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem;margin-bottom:1.5rem}
.kds-kpi{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;border-left:3px solid var(--accent)}
.kds-kpi-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.3rem}
.kds-kpi-valor{font-size:1.7rem;font-weight:800;line-height:1.1}
.kds-kpi-sub{font-size:.78rem;color:var(--muted);margin-top:.25rem}

.kds-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;margin-bottom:1rem}
.kds-card-head{display:flex;align-items:center;gap:.5rem;font-weight:700;margin-bottom:.8rem;font-size:1rem;color:var(--txt)}
.kds-card-head i{color:var(--accent)}
.kds-cols-2{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:1024px){.kds-cols-2{grid-template-columns:1fr 1fr}}

.kds-tabela{width:100%;border-collapse:collapse;font-size:.92rem}
.kds-tabela th{text-align:left;color:var(--muted);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:.6rem .5rem;border-bottom:1px solid var(--border)}
.kds-tabela td{padding:.55rem .5rem;border-bottom:1px solid #1a2230}
.kds-tabela tbody tr:hover{background:rgba(99,102,241,.06)}
.kds-tabela .num{text-align:right;font-variant-numeric:tabular-nums}
.kds-tabela small{color:var(--muted)}
.t-verde{color:var(--verde);font-weight:700}
.t-amarelo{color:var(--amarelo);font-weight:700}
.t-vermelho{color:var(--vermelho);font-weight:700}
.t-esquec{color:var(--esquecido);font-weight:800}

.kds-vazio{text-align:center;padding:2rem;color:var(--muted);font-size:.92rem}

.kds-grafico{height:380px}

.kds-rodape{text-align:center;padding:.6rem;font-size:.7rem;color:#475569;border-top:1px solid var(--border);background:#070a0e;margin-top:2rem}
</style>
</head>
<body>

<div class="kds-topbar">
    <div class="kds-logo"><i class="bi bi-fire"></i><span>Cozinha</span></div>
    <div class="kds-empresa"><?= \App\Core\View::e($nomeEmpresa) ?></div>
    <div class="kds-relogio" id="kdsRelogio">--:--:--</div>
</div>

<div class="kds-tabs">
    <a class="kds-tab" href="/cozinha/menu"><i class="bi bi-house-fill"></i> Início</a>
    <a class="kds-tab <?= $uri==='/cozinha'?'ativa':'' ?>" href="/cozinha"><i class="bi bi-display"></i> Painel da Cozinha</a>
    <a class="kds-tab <?= $uri==='/cozinha/avisos'?'ativa':'' ?>" href="/cozinha/avisos"><i class="bi bi-bell"></i> Avisos pro Garçom</a>
    <a class="kds-tab <?= $uri==='/cozinha/relatorio'?'ativa':'' ?>" href="/cozinha/relatorio"><i class="bi bi-stopwatch"></i> Tempo de Preparo</a>
    <a class="kds-tab <?= $uri==='/cozinha/links'?'ativa':'' ?>" href="/cozinha/links"><i class="bi bi-link-45deg"></i> Links e QR Code</a>
    <a class="kds-tab <?= $uri==='/cozinha/config'?'ativa':'' ?>" href="/cozinha/config"><i class="bi bi-sliders"></i> Configurar</a>
</div>

<div class="kds-conteudo">

    <div class="kds-cabec">
        <div>
            <div class="kds-titulo"><i class="bi bi-stopwatch"></i> Tempo de Preparo</div>
            <div class="kds-subtitulo">Relatório completo de cada prato finalizado: <b>quando entrou na cozinha</b>, <b>quando saiu</b>, e <b>quanto tempo levou</b>.</div>
        </div>
        <form method="get" action="/cozinha/relatorio" class="kds-filtros">
            <div class="kds-filtro-field">
                <label class="kds-filtro-label">De</label>
                <input type="date" name="data_ini" value="<?= \App\Core\View::e($filtros['dataIni'] ?? '') ?>" class="kds-input">
            </div>
            <div class="kds-filtro-field">
                <label class="kds-filtro-label">Até</label>
                <input type="date" name="data_fim" value="<?= \App\Core\View::e($filtros['dataFim'] ?? '') ?>" class="kds-input">
            </div>
            <button type="submit" class="kds-btn"><i class="bi bi-funnel"></i> Filtrar</button>
        </form>
    </div>

    <!-- Banner: como ler o relatorio -->
    <div class="kds-card" style="border-left:4px solid #6366F1;background:rgba(99,102,241,.08);padding:1rem 1.2rem;margin-bottom:1rem">
        <div style="display:flex;align-items:flex-start;gap:.7rem">
            <i class="bi bi-info-circle-fill" style="color:#a5b4fc;font-size:1.4rem;flex-shrink:0;margin-top:.1rem"></i>
            <div style="font-size:.92rem;line-height:1.6;color:#cbd5e1">
                <b style="color:#fff;font-size:.95rem">Como ler este relatório</b><br>
                <b style="color:#a5b4fc">⏱️ Tempo de preparo</b> = do momento que o garçom lança o pedido no PDV até a cozinha tocar <b style="color:#10b981">Pronto</b>.<br>
                <b style="color:#a5b4fc">📦 Tempo de balcão</b> = do <b style="color:#10b981">Pronto</b> da cozinha até o garçom passar e tocar <b>Retirei</b>.<br>
                <b style="color:#a5b4fc">📊 KPIs</b> mostram <b>médias e medianas</b> de todos os pratos no período. <b style="color:#a5b4fc">📈 Gráficos</b> destacam os mais lentos. <b style="color:#a5b4fc">📋 Tabela</b> embaixo lista cada prato individualmente.<br>
                <span style="color:var(--muted);font-size:.85rem">Pratos sem botão Pronto tocado não entram aqui — só finalizados.</span>
            </div>
        </div>
    </div>

    <!-- Legenda de cores -->
    <div class="kds-card" style="padding:.7rem 1rem;margin-bottom:1.4rem">
        <div style="display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;font-size:.85rem">
            <span style="font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:.78rem">🚦 Legenda de cores</span>
            <span><span style="display:inline-block;width:14px;height:14px;background:#10b981;border-radius:3px;vertical-align:middle;margin-right:.35rem"></span><b style="color:#10b981">Verde</b> — menos de 5 min</span>
            <span><span style="display:inline-block;width:14px;height:14px;background:#f59e0b;border-radius:3px;vertical-align:middle;margin-right:.35rem"></span><b style="color:#f59e0b">Amarelo</b> — 5 a 15 min</span>
            <span><span style="display:inline-block;width:14px;height:14px;background:#ef4444;border-radius:3px;vertical-align:middle;margin-right:.35rem"></span><b style="color:#ef4444">Vermelho</b> — 15 a 30 min</span>
            <span><span style="display:inline-block;width:14px;height:14px;background:#dc2626;border-radius:3px;vertical-align:middle;margin-right:.35rem"></span><b style="color:#dc2626">Esquecido</b> — passou de 30 min</span>
        </div>
    </div>

    <div class="kds-kpi-grid" id="kpiGrid">
        <div class="kds-kpi"><div class="kds-kpi-label">Carregando…</div><div class="kds-kpi-valor">—</div></div>
    </div>

    <div class="kds-cols-2">
        <div class="kds-card">
            <div class="kds-card-head"><i class="bi bi-bar-chart-fill"></i> Pratos mais lentos — top 15 por tempo médio</div>
            <div class="kds-hint" style="margin:0 0 .8rem 0">Tempo médio de preparo de cada prato. Os mais demorados aparecem em <b style="color:#ef4444">vermelho</b>. Útil pra identificar pratos que travam a cozinha.</div>
            <div id="chartProdutos" class="kds-grafico"></div>
        </div>
        <div class="kds-card">
            <div class="kds-card-head"><i class="bi bi-clock-history"></i> Tempo médio por hora do dia</div>
            <div class="kds-hint" style="margin:0 0 .8rem 0">Barra azul = tempo médio de preparo nessa hora. Linha verde = quantidade de pratos. <b>Picos da cozinha</b> aparecem como horas com muitos pratos e tempo maior.</div>
            <div id="chartHoras" class="kds-grafico"></div>
        </div>
    </div>

    <div class="kds-cols-2">
        <div class="kds-card">
            <div class="kds-card-head"><i class="bi bi-bar-chart-line"></i> Distribuição — quantos pratos em cada faixa de tempo</div>
            <div class="kds-hint" style="margin:0 0 .8rem 0">Mostra quantos pratos saíram em cada faixa. Bar saudável tem maioria entre 0-15 min.</div>
            <div id="chartFaixas" class="kds-grafico" style="height:300px"></div>
        </div>
        <div class="kds-card">
            <div class="kds-card-head"><i class="bi bi-tags-fill"></i> Por grupo de prato</div>
            <div class="kds-hint" style="margin:0 0 .7rem 0">Tempo médio de preparo por categoria. Útil pra ver se a cozinha é lenta em alguma ESTAÇÃO (chapa, fritadeira, sushi…).</div>
            <table class="kds-tabela">
                <thead><tr>
                    <th title="Categoria do prato no ERP">Grupo</th>
                    <th class="num" title="Quantos pratos desse grupo saíram">Pratos</th>
                    <th class="num" title="Tempo médio do lançamento até o Pronto">Tempo médio</th>
                </tr></thead>
                <tbody id="tbodyGrupos">
                    <tr><td colspan="3" class="kds-vazio">Carregando…</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="kds-cols-2">
        <div class="kds-card">
            <div class="kds-card-head"><i class="bi bi-person-vcard"></i> Por garçom — quem LANÇA os pedidos</div>
            <div class="kds-hint" style="margin:0 0 .7rem 0">Quem usa o PDV pra mandar pedido pra cozinha. O tempo médio AQUI não é culpa do garçom — mede só o preparo. Mostra quem traz mais movimento.</div>
            <table class="kds-tabela">
                <thead><tr>
                    <th title="Nome do garçom no ERP">Garçom</th>
                    <th class="num" title="Quantos pratos lançou pra cozinha">Pratos lançados</th>
                    <th class="num" title="Tempo médio de preparo dos pratos dele (mede a cozinha, não o garçom)">Tempo médio</th>
                </tr></thead>
                <tbody id="tbodyGarcons">
                    <tr><td colspan="3" class="kds-vazio">Carregando…</td></tr>
                </tbody>
            </table>
        </div>
        <div class="kds-card">
            <div class="kds-card-head"><i class="bi bi-hand-thumbs-up-fill"></i> Por garçom — quem RETIRA do balcão</div>
            <div class="kds-hint" style="margin:0 0 .7rem 0">Quem passa no balcão e toca <b>Retirei</b>. O tempo médio mostra a <b>agilidade dele</b> — quanto mais baixo, mais rápido busca o prato quando fica pronto.</div>
            <table class="kds-tabela">
                <thead><tr>
                    <th title="Garçom que tocou Retirei">Garçom</th>
                    <th class="num" title="Quantos pratos retirou do balcão">Pratos retirados</th>
                    <th class="num" title="Tempo médio entre o Pronto da cozinha e o Retirei dele. Menor = mais ágil">Espera média<br><small>(do pronto ao retirado)</small></th>
                </tr></thead>
                <tbody id="tbodyRetirantes">
                    <tr><td colspan="3" class="kds-vazio">Carregando…</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="kds-card">
        <div class="kds-card-head" style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem">
            <span><i class="bi bi-list-ul"></i> Detalhamento — cada prato individual no período</span>
            <small style="color:var(--muted);font-weight:400" id="badgeDetalhe">—</small>
        </div>
        <div class="kds-hint" style="margin:0 0 .8rem 0">
            Uma linha por prato. <b>Lançado às</b> = hora que entrou na cozinha. <b>Pronto às</b> = hora que ficou pronto. <b>Tempo total</b> = quanto demorou. <b>Retirado às</b> e <b>Tempo no balcão</b> só aparecem quando o garçom já tocou Retirei.
        </div>
        <div style="overflow-x:auto">
            <table class="kds-tabela">
                <thead><tr>
                    <th title="Mesa onde o pedido foi feito">Mesa</th>
                    <th title="Nome do prato no momento do lançamento">Prato</th>
                    <th title="Categoria do prato no ERP">Grupo</th>
                    <th title="Hora exata em que o garçom lançou o pedido no PDV">Lançado às</th>
                    <th title="Hora exata em que a cozinha tocou Pronto">Pronto às</th>
                    <th class="num" title="Tempo decorrido entre o lançamento e o Pronto">Tempo total</th>
                    <th title="Hora em que o garçom passou no balcão e tocou Retirei">Retirado às</th>
                    <th class="num" title="Tempo que o prato ficou esperando no balcão">Tempo no balcão</th>
                    <th title="Garçom que registrou o pedido">Lançado por</th>
                    <th title="Garçom que tocou Retirei no balcão">Retirado por</th>
                </tr></thead>
                <tbody id="tbodyDetalhe">
                    <tr><td colspan="10" class="kds-vazio">Carregando…</td></tr>
                </tbody>
            </table>
        </div>
    </div>

</div>

<div class="kds-rodape">
    Fire Sistemas &middot; Premium Express BI v<?= \App\Core\View::e(\App\Core\Versao::ATUAL) ?> &middot; Tempo de Preparo
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
(function(){
'use strict';
const filtros = {
    dataIni: <?= json_encode($filtros['dataIni'] ?? '') ?>,
    dataFim: <?= json_encode($filtros['dataFim'] ?? '') ?>,
};

const z = n => String(n).padStart(2,'0');
function tickRelogio(){
    const d = new Date();
    document.getElementById('kdsRelogio').textContent = z(d.getHours())+':'+z(d.getMinutes())+':'+z(d.getSeconds());
}
setInterval(tickRelogio, 1000);
tickRelogio();

const fmtMin = m => {
    if (m === null || m === undefined) return '—';
    const n = Math.round(parseFloat(m)*10)/10;
    if (n < 60) return n.toFixed(n >= 10 ? 0 : 1) + ' min';
    const h = Math.floor(n/60), r = Math.round(n%60);
    return h + 'h ' + (r<10?'0':'') + r + 'm';
};
const fmtInt = n => (n||0).toLocaleString('pt-BR');
const corPorMin = m => m >= 30 ? 't-esquec' : m >= 15 ? 't-vermelho' : m >= 5 ? 't-amarelo' : 't-verde';

function escape(s){
    if (s === null || s === undefined) return '';
    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c]);
}

function renderKpis(k){
    const grid = document.getElementById('kpiGrid');
    function kpi(lbl, val, sub) {
        return '<div class="kds-kpi"><div class="kds-kpi-label">'+escape(lbl)+'</div><div class="kds-kpi-valor">'+escape(val)+'</div>' + (sub?'<div class="kds-kpi-sub">'+escape(sub)+'</div>':'') + '</div>';
    }
    grid.innerHTML = [
        kpi('Pratos finalizados', fmtInt(k.qtd_finalizados), 'cozinha tocou Pronto neste período'),
        kpi('Tempo médio',        fmtMin(k.media_min),       'da entrada na cozinha até ficar pronto'),
        kpi('Mediana (p50)',      fmtMin(k.p50_min),         'metade dos pratos saiu em ATÉ esse tempo'),
        kpi('Pior caso (p90)',    fmtMin(k.p90_min),         '10% dos pratos passaram desse tempo (cauda longa)'),
        kpi('Recorde',            fmtMin(k.maior_min),       'maior tempo individual no período'),
    ].join('');
}

const ECHARTS_TEMA = {
    textStyle:{ color:'#94a3b8' },
    legend:{ textStyle:{ color:'#cbd5e1' } },
};

function corBar(min){
    return min >= 30 ? '#dc2626' : min >= 15 ? '#ef4444' : min >= 5 ? '#f59e0b' : '#10b981';
}

function renderProdutos(lista){
    const top = lista.slice(0, 15).reverse();
    const chart = echarts.init(document.getElementById('chartProdutos'), 'dark');
    chart.setOption({
        backgroundColor: 'transparent',
        textStyle:{ color:'#cbd5e1' },
        grid:{ left:8, right:30, top:10, bottom:10, containLabel:true },
        xAxis:{ type:'value', axisLabel:{ formatter:'{value} min', color:'#94a3b8' }, splitLine:{ lineStyle:{ color:'#1e293b' } } },
        yAxis:{ type:'category', data: top.map(t=>t.produto), axisLabel:{ width:170, overflow:'truncate', color:'#cbd5e1' } },
        tooltip:{ trigger:'axis', axisPointer:{type:'shadow'}, backgroundColor:'#1a2230', borderColor:'#2a3340', textStyle:{color:'#f1f5f9'},
            formatter: params => {
                const i = params[0].dataIndex;
                const it = top[i];
                return '<b>'+escape(it.produto)+'</b><br>Tempo médio: <b>'+fmtMin(it.media_min)+'</b><br>Mediana: '+fmtMin(it.p50_min)+'<br>Maior: '+fmtMin(it.maior_min)+'<br>Pedidos: '+fmtInt(it.qtd);
            }
        },
        series:[{
            type:'bar',
            data: top.map(t => ({ value: Math.round(t.media_min*10)/10, itemStyle:{ color: corBar(t.media_min) } })),
            label:{ show:true, position:'right', formatter: p => fmtMin(p.value), color:'#f1f5f9', fontWeight:'bold' }
        }]
    });
    window.addEventListener('resize', () => chart.resize());
}

function renderHoras(lista){
    const chart = echarts.init(document.getElementById('chartHoras'), 'dark');
    chart.setOption({
        backgroundColor: 'transparent',
        textStyle:{ color:'#cbd5e1' },
        grid:{ left:50, right:50, top:40, bottom:40 },
        xAxis:{ type:'category', data: lista.map(h => h.hora), axisLabel:{color:'#94a3b8'} },
        yAxis:[
            { type:'value', name:'Tempo médio', position:'left', axisLabel:{formatter:'{value} min', color:'#94a3b8'}, splitLine:{lineStyle:{color:'#1e293b'}} },
            { type:'value', name:'Pratos', position:'right', axisLabel:{color:'#94a3b8'}, splitLine:{show:false} }
        ],
        legend:{ data:['Tempo médio', 'Pratos'], top: 5, textStyle:{color:'#cbd5e1'} },
        tooltip:{ trigger:'axis', backgroundColor:'#1a2230', borderColor:'#2a3340', textStyle:{color:'#f1f5f9'} },
        series:[
            { name:'Tempo médio', type:'bar', yAxisIndex:0, data: lista.map(h => Math.round(h.media_min*10)/10), itemStyle:{ color:'#6366F1' } },
            { name:'Pratos', type:'line', yAxisIndex:1, smooth:true, data: lista.map(h => h.qtd), itemStyle:{ color:'#10b981' }, lineStyle:{ color:'#10b981' } }
        ]
    });
    window.addEventListener('resize', () => chart.resize());
}

function renderFaixas(lista){
    const chart = echarts.init(document.getElementById('chartFaixas'), 'dark');
    chart.setOption({
        backgroundColor: 'transparent',
        textStyle:{ color:'#cbd5e1' },
        grid:{ left:8, right:30, top:10, bottom:30, containLabel:true },
        xAxis:{ type:'category', data: lista.map(f => f.label), axisLabel:{color:'#cbd5e1'} },
        yAxis:{ type:'value', name:'Pratos', axisLabel:{color:'#94a3b8'}, splitLine:{lineStyle:{color:'#1e293b'}} },
        tooltip:{ trigger:'axis', backgroundColor:'#1a2230', borderColor:'#2a3340', textStyle:{color:'#f1f5f9'} },
        series:[{
            type:'bar',
            data: lista.map(f => ({ value: f.qtd, itemStyle:{ color: corBar(f.min) } })),
            label:{ show:true, position:'top', formatter:'{c}', color:'#f1f5f9' }
        }]
    });
    window.addEventListener('resize', () => chart.resize());
}

function renderGrupos(lista){
    const tbody = document.getElementById('tbodyGrupos');
    if (!lista.length) { tbody.innerHTML = '<tr><td colspan="3" class="kds-vazio">Sem dados no período</td></tr>'; return; }
    tbody.innerHTML = lista.map(g => '<tr><td><b>'+escape(g.grupo)+'</b></td><td class="num">'+fmtInt(g.qtd)+'</td><td class="num '+corPorMin(g.media_min)+'">'+fmtMin(g.media_min)+'</td></tr>').join('');
}

function renderGarcons(lista){
    const tbody = document.getElementById('tbodyGarcons');
    if (!lista.length) { tbody.innerHTML = '<tr><td colspan="3" class="kds-vazio">Sem dados no período</td></tr>'; return; }
    tbody.innerHTML = lista.map(g => '<tr><td><b>'+escape(g.garcom)+'</b></td><td class="num">'+fmtInt(g.qtd)+'</td><td class="num '+corPorMin(g.media_min)+'">'+fmtMin(g.media_min)+'</td></tr>').join('');
}

function renderRetirantes(lista){
    const tbody = document.getElementById('tbodyRetirantes');
    if (!lista.length) { tbody.innerHTML = '<tr><td colspan="3" class="kds-vazio">Sem retiradas registradas no período</td></tr>'; return; }
    tbody.innerHTML = lista.map(g => '<tr><td><b>'+escape(g.garcom)+'</b></td><td class="num">'+fmtInt(g.qtd)+'</td><td class="num">'+fmtMin(g.espera_media_min)+'</td></tr>').join('');
}

function fmtHora(s){
    if (!s) return '<span style="color:#475569">—</span>';
    // Aceita "2026-06-16 14:32:55" ou ISO
    const limpo = String(s).replace('T',' ');
    // Extrai HH:MM
    const m = limpo.match(/(\d{4}-\d{2}-\d{2})\s+(\d{2}):(\d{2})/);
    if (!m) return '<span style="color:#475569">—</span>';
    const dataHoje = new Date().toISOString().substring(0,10);
    const horaCurta = m[2] + ':' + m[3];
    // Se for hoje, só mostra HH:MM. Se for outro dia, mostra dia/mes HH:MM
    if (m[1] === dataHoje) return '<b style="color:#cbd5e1">'+horaCurta+'</b>';
    const partes = m[1].split('-');
    return '<b style="color:#cbd5e1">'+partes[2]+'/'+partes[1]+'</b> <span style="color:#94a3b8">'+horaCurta+'</span>';
}

function fmtTempoBalcao(d){
    if (!d.retirado_em || !d.data_pronto) return '<span style="color:#475569">—</span>';
    const tProto = new Date(d.data_pronto.replace('T',' ').replace(' ','T'));
    const tRet   = new Date(d.retirado_em.replace('T',' ').replace(' ','T'));
    if (isNaN(tProto.getTime()) || isNaN(tRet.getTime())) return '<span style="color:#475569">—</span>';
    const min = Math.max(0, Math.floor((tRet - tProto) / 60000));
    const classe = min >= 10 ? 't-vermelho' : min >= 5 ? 't-amarelo' : 't-verde';
    return '<span class="'+classe+'">'+fmtMin(min)+'</span>';
}

function renderDetalhe(lista){
    const tbody = document.getElementById('tbodyDetalhe');
    document.getElementById('badgeDetalhe').textContent = 'mostrando ' + lista.length + ' pratos (último por cima)';
    if (!lista.length) { tbody.innerHTML = '<tr><td colspan="10" class="kds-vazio">Sem finalizações no período</td></tr>'; return; }
    tbody.innerHTML = lista.map(d => {
        const garcom = (d.garcom || '').trim() || '<span style="color:#475569">(sem garçom)</span>';
        const retirante = (d.retirado_por || '').trim();
        const retiranteHtml = retirante ? '<b>'+escape(retirante)+'</b>' : '<span style="color:#475569">—</span>';
        return '<tr>'
            + '<td><b>'+escape(d.cod_mesa || '')+'</b></td>'
            + '<td>'+escape(d.produto || '')+'</td>'
            + '<td><small style="color:#94a3b8">'+escape(d.grupo || '')+'</small></td>'
            + '<td>'+fmtHora(d.data_lanc)+'</td>'
            + '<td>'+fmtHora(d.data_pronto)+'</td>'
            + '<td class="num '+corPorMin(d.tempo_min)+'">'+fmtMin(d.tempo_min)+'</td>'
            + '<td>'+fmtHora(d.retirado_em)+'</td>'
            + '<td class="num">'+fmtTempoBalcao(d)+'</td>'
            + '<td>'+(typeof garcom === 'string' && garcom.startsWith('<') ? garcom : '<b>'+escape(garcom)+'</b>')+'</td>'
            + '<td>'+retiranteHtml+'</td>'
            + '</tr>';
    }).join('');
}

async function carregar(){
    const qs = '?data_ini=' + encodeURIComponent(filtros.dataIni) + '&data_fim=' + encodeURIComponent(filtros.dataFim);
    try {
        const r = await fetch('/api/cozinha/relatorio' + qs, { credentials:'same-origin' });
        const j = await r.json();
        if (j.erro) { alert('Erro: ' + j.erro); return; }
        renderKpis(j.kpis);
        renderProdutos(j.ranking_produtos || []);
        renderHoras(j.por_hora || []);
        renderFaixas(j.faixas || []);
        renderGrupos(j.ranking_grupos || []);
        renderGarcons(j.ranking_garcons || []);
        renderRetirantes(j.ranking_retirantes || []);
        renderDetalhe(j.detalhe || []);
    } catch (e) {
        alert('Falha ao carregar relatorio: ' + e.message);
    }
}

document.addEventListener('DOMContentLoaded', carregar);
})();
</script>
</body>
</html>
