<?php
// Depto de Engenharia e Automação - Master Automação - Autor: Derlivon Silva
$nomeEmpresa = trim((string)($config['nome_empresa'] ?? ($config['empresa'] ?? '')));
$garcomNome = trim((string)($garcomNome ?? ''));
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#0a0e14">
<title>Meus Pedidos — <?= \App\Core\View::e($garcomNome ?: 'Garçom') ?></title>
<link rel="manifest" href="data:application/manifest+json,<?= urlencode(json_encode([
    'name' => 'Meus Pedidos - ' . ($garcomNome ?: 'Garçom'),
    'short_name' => 'Meus Pedidos',
    'start_url' => $_SERVER['REQUEST_URI'],
    'display' => 'standalone',
    'background_color' => '#0a0e14',
    'theme_color' => '#10b981',
])) ?>">
<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:#10b981; --urgente:#ef4444; --novo:#fbbf24;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;min-height:100vh;user-select:none;overscroll-behavior:none}

.mc-topbar{
  display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;background:var(--bg2);
  border-bottom:2px solid var(--border);position:sticky;top:0;z-index:50
}
.mc-logo{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;font-weight:800;color:var(--accent)}
.mc-logo i{font-size:1.4rem}
.mc-nome{font-size:1rem;color:#fff;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-relogio{font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}

.mc-banner-id{
  padding:.6rem 1rem;background:rgba(16,185,129,.15);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.5rem;font-size:.92rem
}
.mc-banner-id b{color:var(--accent)}

.mc-acoes{padding:.6rem 1rem;background:#131922;border-bottom:1px solid var(--border);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.mc-btn{
  background:rgba(245,158,11,.15);border:2px solid var(--novo);color:var(--novo);
  border-radius:8px;padding:.5rem .8rem;font-size:.85rem;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;gap:.4rem
}
.mc-btn.ativo{background:rgba(16,185,129,.15);border-color:var(--accent);color:var(--accent)}
.mc-btn.cinza{background:transparent;border-color:var(--border);color:var(--muted)}
.mc-resumo{margin-left:auto;font-size:.85rem;color:var(--muted)}
.mc-resumo b{color:#fff;font-size:1.05rem}

.mc-lista{padding:.8rem;display:flex;flex-direction:column;gap:.8rem}

.mc-card{
  background:linear-gradient(135deg,#1a2230 0%,#1e3a2e 100%);
  border:3px solid var(--accent);border-radius:14px;padding:1rem;
  display:flex;flex-direction:column;gap:.5rem;
  box-shadow:0 0 18px rgba(16,185,129,.2);
  animation:apareceu .35s ease-out
}
@keyframes apareceu { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
.mc-card.urgente{
  background:linear-gradient(135deg,#1a2230 0%,#3d1a1a 100%);
  border-color:var(--urgente);box-shadow:0 0 24px rgba(239,68,68,.4);
  animation:piscar 1.2s ease-in-out infinite
}
@keyframes piscar {
  0%,100%{box-shadow:0 0 24px rgba(239,68,68,.4)}
  50%{box-shadow:0 0 36px rgba(239,68,68,.8)}
}

.mc-cabec{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.mc-mesa{font-size:1rem;font-weight:800;background:rgba(255,255,255,.12);padding:.2rem .6rem;border-radius:6px}
.mc-tempo{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}
.mc-card.urgente .mc-tempo{color:#fecaca}

.mc-prato{
  font-size:1.3rem;font-weight:700;line-height:1.15;
  background:rgba(0,0,0,.25);padding:.6rem .7rem;border-radius:8px
}
.mc-qtd{display:inline-block;background:rgba(255,255,255,.15);font-weight:800;padding:.05rem .35rem;border-radius:4px;font-size:1.1rem;margin-right:.3rem}
.mc-obs{font-size:.9rem;color:var(--novo);background:rgba(245,158,11,.12);padding:.35rem .5rem;border-radius:6px;border-left:3px solid var(--novo)}

.mc-btn-retirar{
  background:var(--accent);color:#000;border:none;border-radius:10px;
  padding:1rem;font-size:1.25rem;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  text-transform:uppercase;letter-spacing:.5px;margin-top:.3rem
}
.mc-btn-retirar:active{transform:scale(.96)}
.mc-card.urgente .mc-btn-retirar{background:#fecaca;color:#7f1d1d}

.mc-vazio{
  text-align:center;padding:3rem 1rem;color:var(--muted)
}
.mc-vazio i{font-size:5rem;color:#3b4252;display:block;margin-bottom:1rem}
.mc-vazio h2{font-size:1.5rem;color:#cbd5e1;margin-bottom:.4rem;font-weight:700}
.mc-vazio p{font-size:1rem}

.mc-toast{
  position:fixed;bottom:1rem;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--accent);color:#000;padding:.7rem 1.3rem;border-radius:10px;
  font-size:1rem;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.5);
  transition:transform .25s ease-out;z-index:200
}
.mc-toast.show{transform:translateX(-50%) translateY(0)}

.mc-rodape{text-align:center;padding:.5rem;font-size:.7rem;color:#475569;border-top:1px solid var(--border);background:#070a0e;margin-top:1rem}

.mc-config{
  padding:2rem 1rem;text-align:center;color:var(--muted)
}
.mc-config h1{font-size:1.4rem;color:#fff;margin-bottom:.5rem}
.mc-config p{font-size:1rem;margin-bottom:1.2rem;line-height:1.5}
.mc-config select{
  background:var(--card);border:2px solid var(--accent);color:#fff;
  padding:.8rem 1rem;border-radius:10px;font-size:1.05rem;width:100%;max-width:340px
}
.mc-config button{
  background:var(--accent);color:#000;border:none;border-radius:10px;
  padding:.9rem 1.4rem;font-size:1.1rem;font-weight:800;cursor:pointer;
  margin-top:1rem;width:100%;max-width:340px
}
</style>
</head>
<body>

<?php if (!$garcomNome): ?>
<!-- Setup — sem garçom na URL, mostra seletor pra escolher -->
<div class="mc-config">
    <h1><i class="bi bi-person-circle"></i> Quem é você?</h1>
    <p>Escolha seu nome — esta tela vai ficar salva no seu celular e mostrar só os pratos que <b>você</b> lançou.</p>
    <select id="selectGarcom">
        <option value="">Carregando…</option>
    </select>
    <button onclick="entrar()"><i class="bi bi-box-arrow-in-right"></i> Entrar</button>
</div>
<script>
async function carregarLista(){
    try {
        const r = await fetch('/api/cozinha/garcons', { credentials:'same-origin' });
        const j = await r.json();
        const sel = document.getElementById('selectGarcom');
        sel.innerHTML = '<option value="">— escolha seu nome —</option>' +
            (j.garcons || []).map(g => '<option value="'+encodeURIComponent(g.NOME)+'">'+g.NOME+'</option>').join('');
    } catch(e){ alert('Erro ao carregar lista: ' + e.message); }
}
function entrar(){
    const v = document.getElementById('selectGarcom').value;
    if (!v) { alert('Escolha seu nome.'); return; }
    window.location.href = '/cozinha/meu?garcom=' + v;
}
carregarLista();
</script>
<?php else: ?>
<!-- Tela do garçom — filtra avisos pelo nome -->
<div class="mc-topbar">
    <div class="mc-logo"><i class="bi bi-person-badge-fill"></i><span>Meus Pedidos</span></div>
    <div class="mc-nome"><?= \App\Core\View::e($garcomNome) ?></div>
    <div class="mc-relogio" id="mcRelogio">--:--</div>
</div>

<div class="mc-banner-id">
    <i class="bi bi-info-circle-fill" style="color:var(--accent)"></i>
    <span>Você verá aqui só os pratos que <b><?= \App\Core\View::e($garcomNome) ?></b> lançou. Bipe + vibração quando ficarem prontos.</span>
</div>

<div class="mc-acoes">
    <button class="mc-btn" id="btnSom" onclick="ativarSom(true)">
        <i class="bi bi-volume-up-fill"></i> <span id="btnSomTxt">Ativar som</span>
    </button>
    <button class="mc-btn cinza" id="btnNotif" onclick="pedirNotif()">
        <i class="bi bi-bell-fill"></i> <span id="btnNotifTxt">Ativar push</span>
    </button>
    <button class="mc-btn cinza" onclick="window.location.href='/cozinha/meu'" title="Trocar de garçom">
        <i class="bi bi-arrow-repeat"></i>
    </button>
    <div class="mc-resumo">Aguardando: <b id="mcTotal">—</b></div>
</div>

<div class="mc-lista" id="mcLista">
    <div class="mc-vazio"><i class="bi bi-hourglass"></i><h2>Aguardando…</h2></div>
</div>

<div class="mc-toast" id="mcToast">OK</div>

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

<script>
'use strict';
const GARCOM = <?= json_encode($garcomNome) ?>;
const POLLING_MS = 5000;
let avisosAtuais = [];
let bloqueado = new Set();
const jaAvisei = new Map();
const RE_ALERTA_MS = 30000;

const audioCtx = (window.AudioContext || window.webkitAudioContext) ? new (window.AudioContext || window.webkitAudioContext)() : null;
let audioHabilitado = false;
function umBeep(freq, dur, atraso){
    if (!audioCtx) return;
    const t0 = audioCtx.currentTime + atraso;
    const o = audioCtx.createOscillator(); const g = audioCtx.createGain();
    o.connect(g); g.connect(audioCtx.destination);
    o.type='sine'; o.frequency.value=freq;
    g.gain.setValueAtTime(0.0001, t0);
    g.gain.exponentialRampToValueAtTime(0.95, t0+0.02);
    g.gain.exponentialRampToValueAtTime(0.0001, t0+dur);
    o.start(t0); o.stop(t0+dur+.05);
}
function alertaCompleto(produto, mesa){
    if (audioCtx) {
        if (audioCtx.state === 'suspended') audioCtx.resume().catch(()=>{});
        try {
            umBeep(880,.35,0); umBeep(1320,.35,.4); umBeep(880,.5,.8);
        } catch(e){}
    }
    if (navigator.vibrate) try { navigator.vibrate([500,200,500,200,800]); } catch(e){}
    // Web Notification — funciona com tela bloqueada (Android)
    if (window.Notification && Notification.permission === 'granted') {
        try {
            const n = new Notification('🔔 Prato pronto!', {
                body: 'Mesa ' + (mesa||'?') + ' — ' + (produto||'pedido'),
                icon: '/favicon.ico',
                tag: 'kds-' + Date.now(),
                requireInteraction: true,
                vibrate: [500, 200, 500]
            });
            setTimeout(() => n.close(), 15000);
        } catch(e){}
    }
}
function ativarSom(testar){
    if (!audioCtx) return;
    if (audioCtx.state === 'suspended') audioCtx.resume().catch(()=>{});
    audioHabilitado = true;
    document.getElementById('btnSom').classList.add('ativo');
    document.getElementById('btnSomTxt').textContent = 'Som ativo';
    if (testar) alertaCompleto('Teste','99');
}
window.ativarSom = ativarSom;
['click','touchstart','keydown'].forEach(ev => {
    document.addEventListener(ev, () => { if (!audioHabilitado) ativarSom(false); }, { passive:true });
});

function pedirNotif(){
    if (!window.Notification) { toast('Push não suportado neste navegador'); return; }
    Notification.requestPermission().then(p => {
        if (p === 'granted') {
            document.getElementById('btnNotif').classList.add('ativo');
            document.getElementById('btnNotifTxt').textContent = 'Push ativo';
            toast('Push ativo');
        } else {
            toast('Push negado — ative em ajustes');
        }
    });
}
window.pedirNotif = pedirNotif;
if (window.Notification && Notification.permission === 'granted') {
    document.getElementById('btnNotif').classList.add('ativo');
    document.getElementById('btnNotifTxt').textContent = 'Push ativo';
}

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

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

function toast(msg){
    const t = document.getElementById('mcToast');
    t.textContent = msg;
    t.classList.add('show');
    setTimeout(() => t.classList.remove('show'), 1800);
}

function chaveDe(a){ return a.cod_empresa+'|'+a.cod_abertura+'|'+a.cod_lanc; }

function tempoPronto(seg){
    if (seg < 60) return seg + ' seg';
    const m = Math.floor(seg/60), s = seg%60;
    return m + 'm ' + (s<10?'0':'') + s + 's';
}

function cardHtml(a){
    const urgente = a.seg_pronto > 120;
    const obs = (a.observacao || '').trim();
    const qtd = parseFloat(a.qtd) || 1;
    const qtdLbl = qtd >= 1 ? Math.round(qtd) : qtd.toFixed(2);
    const chave = chaveDe(a);
    return `
        <div class="mc-card ${urgente?'urgente':''}" data-key="${chave}">
            <div class="mc-cabec">
                <span class="mc-mesa"><i class="bi bi-grid-3x3-gap-fill"></i> Mesa ${escape(a.cod_mesa)}</span>
                <span class="mc-tempo">${tempoPronto(a.seg_pronto||0)}</span>
            </div>
            <div class="mc-prato"><span class="mc-qtd">${qtdLbl}x</span>${escape(a.produto)}</div>
            ${obs ? `<div class="mc-obs">${escape(obs)}</div>` : ''}
            <button class="mc-btn-retirar" onclick="retirar(${a.cod_empresa},${a.cod_abertura},${a.cod_lanc},this)">
                <i class="bi bi-check2-circle"></i> Retirei
            </button>
        </div>
    `;
}

function render(){
    const lista = document.getElementById('mcLista');
    const visiveis = avisosAtuais.filter(a => !bloqueado.has(chaveDe(a)));
    document.getElementById('mcTotal').textContent = visiveis.length;
    if (!visiveis.length) {
        lista.innerHTML = '<div class="mc-vazio"><i class="bi bi-emoji-smile"></i><h2>Nada pra retirar</h2><p>Quando a cozinha tocar Pronto num pedido seu, aparece aqui.</p></div>';
        return;
    }
    lista.innerHTML = visiveis.map(cardHtml).join('');
}

async function carregar(){
    try {
        const r = await fetch('/api/cozinha/avisos-pendentes', { credentials:'same-origin', cache:'no-store' });
        const j = await r.json();
        // FILTRA SO PELO GARCOM DESTA TELA
        const meus = (j.avisos || []).filter(a => (a.garcom||'').trim() === GARCOM);

        const novasChaves = new Set(meus.map(chaveDe));
        const agora = Date.now();
        let temNovo = false, temAtrasado = false, primeiroNovo = null;
        meus.forEach(a => {
            const k = chaveDe(a);
            if (!jaAvisei.has(k) && !bloqueado.has(k)) {
                temNovo = true;
                if (!primeiroNovo) primeiroNovo = a;
            }
            const ult = jaAvisei.get(k);
            if (ult && (agora-ult) > RE_ALERTA_MS && !bloqueado.has(k)) {
                temAtrasado = true;
                if (!primeiroNovo) primeiroNovo = a;
            }
        });

        avisosAtuais = meus;
        render();

        if ((temNovo || temAtrasado) && primeiroNovo) {
            alertaCompleto(primeiroNovo.produto, primeiroNovo.cod_mesa);
            meus.forEach(a => jaAvisei.set(chaveDe(a), agora));
        }
        Array.from(jaAvisei.keys()).forEach(k => { if (!novasChaves.has(k)) jaAvisei.delete(k); });
    } catch (e) { /* silencioso — celular pode estar com pouco sinal */ }
}

async function retirar(codEmpresa, codAbertura, codLanc, btn){
    const chave = codEmpresa+'|'+codAbertura+'|'+codLanc;
    if (bloqueado.has(chave)) return;
    bloqueado.add(chave);
    if (btn) { btn.disabled = true; btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Retirando…'; }
    try {
        const r = await fetch('/api/cozinha/marcar-retirado', {
            method:'POST',
            headers:{'Content-Type':'application/json'},
            credentials:'same-origin',
            body:JSON.stringify({cod_empresa:codEmpresa, cod_abertura:codAbertura, cod_lanc:codLanc, retirado_por:GARCOM})
        });
        const j = await r.json();
        if (!r.ok || j.erro) throw new Error(j.erro || 'Falha');
        const card = document.querySelector(`.mc-card[data-key="${chave}"]`);
        if (card) {
            card.style.transition = 'opacity .3s, transform .3s';
            card.style.opacity = '0'; card.style.transform = 'scale(.9)';
            setTimeout(() => render(), 300);
        }
        toast('Retirado');
        setTimeout(carregar, 400);
    } catch (e) {
        bloqueado.delete(chave);
        if (btn) { btn.disabled = false; btn.innerHTML = '<i class="bi bi-check2-circle"></i> Retirei'; }
        toast('Erro: ' + e.message);
    }
}
window.retirar = retirar;

// Wake Lock
if ('wakeLock' in navigator) navigator.wakeLock.request('screen').catch(()=>{});

carregar();
setInterval(carregar, POLLING_MS);
</script>
<?php endif; ?>

</body>
</html>
