<?php
// Depto de Engenharia e Automação - Master Automação - Autor: Derlivon Silva
$pollingSeg   = (int)($cfg_kds['polling_segundos'] ?? 10);
$amareloMin   = (int)($cfg_kds['amarelo_min']      ?? 5);
$vermelhoMin  = (int)($cfg_kds['vermelho_min']     ?? 15);
$esquecidoMin = (int)($cfg_kds['esquecido_min']    ?? 30);
$nomeEmpresa  = trim((string)($config['nome_empresa'] ?? ($config['empresa'] ?? '')));
?>
<!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">
<title><?= \App\Core\View::e($titulo ?? 'Painel da Cozinha') ?></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<style>
:root{
  --verde:#10b981; --amarelo:#f59e0b; --vermelho:#ef4444; --esquecido:#dc2626;
  --bg:#0a0e14; --bg2:#10151c; --card:#1a2230; --border:#2a3340;
  --txt:#f1f5f9; --muted:#94a3b8;
}
*{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;overscroll-behavior:none}
body{padding:0;min-height:100vh;user-select:none}

/* ===== TOPBAR ===== */
.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:#6366F1}
.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.4rem;font-weight:700;font-variant-numeric:tabular-nums;color:#fff}
.kds-status{display:flex;align-items:center;gap:.4rem;font-size:.95rem;color:var(--muted)}
.kds-status .dot{width:10px;height:10px;border-radius:50%;background:var(--verde);box-shadow:0 0 8px var(--verde)}
.kds-status.off .dot{background:var(--vermelho);box-shadow:0 0 8px var(--vermelho)}
.kds-som{
  background:rgba(245,158,11,.15);border:2px solid var(--amarelo);color:var(--amarelo);
  border-radius:10px;padding:.5rem .85rem;font-size:.9rem;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  animation:kdsSomAtenc 1.8s ease-in-out infinite
}
.kds-som.ativo{background:rgba(16,185,129,.15);border-color:var(--verde);color:var(--verde);animation:none}
@keyframes kdsSomAtenc {
  0%,100%{ box-shadow: 0 0 0 0 rgba(245,158,11,.6) }
  50%   { box-shadow: 0 0 0 6px rgba(245,158,11,0) }
}
.kds-sair{background:none;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:.5rem .8rem;font-size:.9rem;cursor:pointer}
.kds-sair:hover{background:var(--card);color:var(--txt)}

/* ===== USUARIO BAR ===== */
.kds-usuario{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem 1.2rem;background:#131922;border-bottom:1px solid var(--border);
  font-size:.95rem;color:var(--muted)
}
.kds-usuario input{
  background:#0a0e14;border:1px solid var(--border);color:#fff;
  padding:.4rem .7rem;border-radius:6px;font-size:.95rem;width:160px
}
.kds-usuario .resumo{margin-left:auto;display:flex;gap:1.5rem;font-size:.9rem}
.kds-usuario .resumo b{color:#fff;font-size:1.05rem;font-weight:700}

/* ===== GRID DE CARDS ===== */
.kds-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1rem;padding:1rem
}
@media(min-width:1100px){
  .kds-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.2rem;padding:1.2rem}
}

.kds-card{
  background:var(--card);border:2px solid var(--border);border-radius:14px;
  padding:1rem;display:flex;flex-direction:column;gap:.55rem;
  transition:transform .15s,border-color .25s,background .25s;
  position:relative;overflow:hidden
}
.kds-card.verde     {border-color:var(--verde)}
.kds-card.amarelo   {border-color:var(--amarelo);box-shadow:0 0 0 1px var(--amarelo) inset}
.kds-card.vermelho  {border-color:var(--vermelho);box-shadow:0 0 0 2px var(--vermelho) inset,0 0 20px rgba(239,68,68,.2)}
.kds-card.esquecido {border-color:var(--esquecido);background:linear-gradient(135deg,#1a2230 0%,#3d1a1a 100%);animation:piscarRed 1.5s ease-in-out infinite}
@keyframes piscarRed{
  0%,100%{box-shadow:0 0 0 2px var(--vermelho) inset,0 0 24px rgba(239,68,68,.45)}
  50%    {box-shadow:0 0 0 4px var(--vermelho) inset,0 0 36px rgba(239,68,68,.7)}
}

.kds-card-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.kds-mesa{font-size:.95rem;font-weight:700;background:rgba(99,102,241,.18);color:#a5b4fc;padding:.2rem .55rem;border-radius:6px;letter-spacing:.5px}
.kds-tempo{
  font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1
}
.kds-card.verde     .kds-tempo{color:var(--verde)}
.kds-card.amarelo   .kds-tempo{color:var(--amarelo)}
.kds-card.vermelho  .kds-tempo{color:var(--vermelho)}
.kds-card.esquecido .kds-tempo{color:#fecaca}

.kds-produto{font-size:1.45rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.kds-qtd-badge{display:inline-block;background:rgba(255,255,255,.08);color:#fff;font-weight:800;padding:.15rem .5rem;border-radius:5px;font-size:1.1rem;margin-right:.4rem}
.kds-grupo{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.kds-obs{
  font-size:1.05rem;line-height:1.3;color:#fbbf24;background:rgba(245,158,11,.12);
  padding:.45rem .65rem;border-radius:6px;border-left:3px solid #f59e0b;
  font-weight:600
}
.kds-garcom{display:flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--muted)}
.kds-lancou{
  display:flex;align-items:center;gap:.45rem;
  font-size:1.05rem;color:#cbd5e1;
  background:rgba(99,102,241,.13);
  padding:.45rem .7rem;border-radius:8px;
  border-left:3px solid #6366F1
}
.kds-lancou i{color:#a5b4fc;font-size:1.1rem}
.kds-lancou b{color:#fff;font-weight:700}
.kds-foot{display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:.4rem}

.kds-btn-pronto{
  background:var(--verde);color:#000;border:none;border-radius:10px;
  padding:.9rem 1rem;font-size:1.2rem;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;text-transform:uppercase;letter-spacing:.5px;
  box-shadow:0 4px 16px rgba(16,185,129,.35);
  transition:transform .1s,filter .2s
}
.kds-btn-pronto:hover{filter:brightness(1.1)}
.kds-btn-pronto:active{transform:scale(.96)}
.kds-card.esquecido .kds-btn-pronto{background:#fecaca;color:#7f1d1d}

.kds-vazio{
  grid-column:1/-1;text-align:center;padding:5rem 1rem;color:var(--muted)
}
.kds-vazio i{font-size:4rem;color:#3b4252;display:block;margin-bottom:.8rem}
.kds-vazio h2{font-size:1.6rem;font-weight:600;color:#94a3b8;margin-bottom:.4rem}
.kds-vazio p{font-size:1.05rem}

/* Toast feedback */
.kds-toast{
  position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--verde);color:#000;padding:.85rem 1.5rem;border-radius:10px;
  font-size:1.1rem;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .25s ease-out;z-index:200;display:flex;align-items:center;gap:.5rem
}
.kds-toast.show{transform:translateX(-50%) translateY(0)}
.kds-toast.erro{background:var(--vermelho);color:#fff}

/* Rodapé Master Automação */
.kds-rodape{
  text-align:center;padding:.6rem;font-size:.7rem;color:#475569;
  border-top:1px solid var(--border);background:#070a0e
}

/* ===== SPLASH BOOT (Master Automação) ===== */
.kds-splash{
  position:fixed;inset:0;background:linear-gradient(180deg,#0a0e14 0%,#1a2230 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:9999;transition:opacity .6s ease-out
}
.kds-splash.fade{opacity:0;pointer-events:none}
.kds-splash-titulo{font-size:2.4rem;font-weight:800;color:#6366F1;text-align:center;letter-spacing:-.02em;line-height:1.1}
.kds-splash-sub{font-size:1.1rem;color:#94a3b8;margin-top:.7rem;text-align:center;max-width:540px}
.kds-splash-empresa{font-size:1.4rem;color:#a5b4fc;margin-top:1.4rem;font-weight:600}
.kds-splash-creditos{
  position:absolute;bottom:1.5rem;left:0;right:0;text-align:center;
  font-size:.85rem;color:#475569;line-height:1.5
}
.kds-splash-creditos b{color:#6366F1}
.kds-splash-loader{
  width:50px;height:50px;border:4px solid #1e293b;border-top-color:#6366F1;
  border-radius:50%;animation:spin 1s linear infinite;margin-top:2rem
}
@keyframes spin{to{transform:rotate(360deg)}}
</style>
</head>
<body>

<!-- SPLASH BOOT (4 segundos - regra global Master Automacao) -->
<div class="kds-splash" id="kdsSplash">
    <div class="kds-splash-titulo">Painel da Cozinha</div>
    <div class="kds-splash-sub">Acompanhe os pedidos em tempo real e toque em <b>PRONTO</b> quando o prato sair</div>
    <?php if ($nomeEmpresa): ?>
        <div class="kds-splash-empresa"><?= \App\Core\View::e($nomeEmpresa) ?></div>
    <?php endif; ?>
    <div class="kds-splash-loader"></div>
    <div class="kds-splash-creditos">
        Depto de Engenharia e Automacao<br>
        <b>Master Automacao</b> &middot; Responsavel: Derlivon Silva<br>
        Premium Express BI v<?= \App\Core\View::e(\App\Core\Versao::ATUAL) ?> &middot; distribuido por Fire Sistemas
    </div>
</div>

<!-- TOPBAR -->
<div class="kds-topbar">
    <div class="kds-logo">
        <i class="bi bi-fire"></i>
        <span>Cozinha</span>
    </div>
    <?php if ($nomeEmpresa): ?>
        <div class="kds-empresa"><?= \App\Core\View::e($nomeEmpresa) ?></div>
    <?php else: ?>
        <div class="kds-empresa"></div>
    <?php endif; ?>
    <div class="kds-status" id="kdsStatus">
        <span class="dot"></span><span id="kdsStatusTxt">Conectado</span>
    </div>
    <button class="kds-som" id="kdsSom" onclick="ativarSomCozinha(true)" title="Ativar som dos avisos">
        <i class="bi bi-volume-up-fill"></i>
        <span id="kdsSomTxt">Ativar som</span>
    </button>
    <div class="kds-relogio" id="kdsRelogio">--:--:--</div>
</div>

<!-- BARRA INFO -->
<div class="kds-usuario">
    <i class="bi bi-egg-fried"></i>
    <span>Cozinha — toque em PRONTO quando o prato sair</span>
    <div class="resumo">
        <span>Na fila: <b id="kdsTotal">—</b></span>
        <span>Saíram hoje: <b id="kdsHoje">—</b></span>
    </div>
</div>

<!-- GRID -->
<div class="kds-grid" id="kdsGrid">
    <div class="kds-vazio">
        <i class="bi bi-hourglass"></i>
        <h2>Carregando pedidos…</h2>
    </div>
</div>

<!-- TOAST -->
<div class="kds-toast" id="kdsToast"><i class="bi bi-check-circle-fill"></i><span id="kdsToastTxt">OK</span></div>

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

<script>
const POLLING_MS   = <?= $pollingSeg * 1000 ?>;
const AMARELO_MIN  = <?= $amareloMin ?>;
const VERMELHO_MIN = <?= $vermelhoMin ?>;
const ESQUECIDO_MIN= <?= $esquecidoMin ?>;

// Estado
let filaAtual = [];
let finalizadosSessao = 0;
let bloqueado = new Set();   // chaves que estamos finalizando agora
let ultimoFetchOk = true;
// ── Alerta sonoro forte (WebAudio + vibração) — igual ao display dos garçons ─
const audioCtx = (window.AudioContext || window.webkitAudioContext) ? new (window.AudioContext || window.webkitAudioContext)() : null;
let audioHabilitado = false;
function umBeep(freq, durSeg, atrasoSeg){
  if (!audioCtx) return;
  const t0 = audioCtx.currentTime + atrasoSeg;
  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 + durSeg);
  o.start(t0); o.stop(t0 + durSeg + 0.05);
}
function alertaCompleto(){
  if (!audioCtx) return;
  if (audioCtx.state === 'suspended') audioCtx.resume().catch(()=>{});
  try {
    umBeep(880,  0.35, 0.00);
    umBeep(1320, 0.35, 0.40);
    umBeep(880,  0.50, 0.80);
  } catch(e){}
  if (navigator.vibrate) { try { navigator.vibrate([400, 150, 400, 150, 600]); } catch(e){} }
}
const beep = { play: alertaCompleto };  // mantém compat com chamada antiga
function ativarSomCozinha(tocarTeste){
  if (!audioCtx) return;
  if (audioCtx.state === 'suspended') audioCtx.resume().catch(()=>{});
  audioHabilitado = true;
  const btn = document.getElementById('kdsSom');
  if (btn) {
    btn.classList.add('ativo');
    document.getElementById('kdsSomTxt').textContent = 'Som ativo';
  }
  if (tocarTeste) alertaCompleto();
}
window.ativarSomCozinha = ativarSomCozinha;
['click','touchstart','keydown'].forEach(ev => {
  document.addEventListener(ev, () => { if (!audioHabilitado) ativarSomCozinha(false); }, { once:false, passive:true });
});

// SPLASH
window.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    const s = document.getElementById('kdsSplash');
    s.classList.add('fade');
    setTimeout(()=>s.remove(), 700);
  }, 4000);

  // Restaura contador local do dia
  const hoje = new Date().toISOString().slice(0,10);
  const stored = JSON.parse(localStorage.getItem('kds_hoje') || '{}');
  if (stored.dia === hoje) { finalizadosSessao = stored.qtd || 0; }
  else { localStorage.setItem('kds_hoje', JSON.stringify({dia:hoje, qtd:0})); }
  document.getElementById('kdsHoje').textContent = finalizadosSessao;

  // Mantém tela acordada se suportado (Wake Lock API)
  if ('wakeLock' in navigator) {
    navigator.wakeLock.request('screen').catch(()=>{});
  }

  carregarFila();
  setInterval(carregarFila, POLLING_MS);
  setInterval(atualizarRelogio, 1000);
  setInterval(atualizarTimers, 5000);   // recalcula minutos sem esperar refetch
  atualizarRelogio();
});

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

function toast(msg, erro=false){
  const t = document.getElementById('kdsToast');
  document.getElementById('kdsToastTxt').textContent = msg;
  t.classList.toggle('erro', erro);
  t.classList.add('show');
  setTimeout(()=>t.classList.remove('show'), 2200);
}

function setStatus(ok){
  ultimoFetchOk = ok;
  document.getElementById('kdsStatus').classList.toggle('off', !ok);
  document.getElementById('kdsStatusTxt').textContent = ok ? 'Conectado' : 'Sem conexao';
}

async function carregarFila(){
  try {
    const r = await fetch('/api/cozinha/fila', { credentials:'same-origin', cache:'no-store' });
    if (!r.ok) throw new Error('HTTP ' + r.status);
    const j = await r.json();
    setStatus(true);

    // Detecta novos itens pra tocar beep
    const novasChaves = new Set(j.fila.map(f => chaveDe(f)));
    const antigasChaves = new Set(filaAtual.map(f => chaveDe(f)));
    let temNovo = false;
    novasChaves.forEach(k => { if (!antigasChaves.has(k)) temNovo = true; });

    filaAtual = j.fila;
    renderFila();
    // Toca SEMPRE que aparece pedido novo (inclusive o primeiro)
    if (temNovo) { try { alertaCompleto(); } catch(e){} }
  } catch (e) {
    setStatus(false);
  }
}

function chaveDe(item){
  return item.COD_EMPRESA + '|' + item.COD_ABERTURA + '|' + item.COD_LANC;
}

function renderFila(){
  const grid = document.getElementById('kdsGrid');
  const fila = filaAtual.filter(f => !bloqueado.has(chaveDe(f)));
  document.getElementById('kdsTotal').textContent = fila.length;

  if (!fila.length) {
    grid.innerHTML = `
      <div class="kds-vazio">
        <i class="bi bi-emoji-smile"></i>
        <h2>Fila zerada</h2>
        <p>Sem pedidos pendentes na cozinha.</p>
      </div>`;
    return;
  }

  grid.innerHTML = fila.map(item => cardHtml(item)).join('');
}

function cardHtml(item){
  const cor = item.SEMAFORO || 'verde';
  const min = item.MIN_NA_FILA || 0;
  const tempo = formatarTempo(min);
  const obs = (item.OBSERVACAO || '').trim();
  const obs2 = (item.OBS2 || '').trim();
  const obsCombinada = [obs, obs2].filter(Boolean).join(' · ');
  const qtd = parseFloat(item.QTD) || 1;
  const qtdLabel = qtd >= 1 ? Math.round(qtd) : qtd.toFixed(2);
  const garcomNome = (item.GARCOM || '').trim();
  const garcomCod = item.COD_GARCOM || '';
  // Fallback: se nao tem nome no cadastro, mostra "Garcom #N"
  const garcom = garcomNome || (garcomCod ? 'Garcom #' + garcomCod : '');
  const grupo = (item.GRUPO || '').trim();
  const chave = chaveDe(item);

  return `
    <div class="kds-card ${cor}" data-key="${chave}">
      <div class="kds-card-head">
        <span class="kds-mesa"><i class="bi bi-grid-3x3-gap-fill"></i> Mesa ${escape(item.COD_MESA)}</span>
        <span class="kds-tempo" data-mov="${item.DATAHORAMOV}">${tempo}</span>
      </div>
      ${garcom ? `<div class="kds-lancou"><i class="bi bi-person-fill"></i> Lançado por <b>${escape(garcom)}</b></div>` : ''}
      <div class="kds-produto">
        <span class="kds-qtd-badge">${qtdLabel}x</span>${escape(item.PRODUTO)}
      </div>
      ${grupo ? `<div class="kds-grupo">${escape(grupo)}</div>` : ''}
      ${obsCombinada ? `<div class="kds-obs"><i class="bi bi-chat-square-text-fill"></i> ${escape(obsCombinada)}</div>` : ''}
      <div class="kds-foot">
        <button class="kds-btn-pronto" onclick="finalizar(${item.COD_EMPRESA}, ${item.COD_ABERTURA}, ${item.COD_LANC}, this)">
          <i class="bi bi-check2-circle"></i> Pronto
        </button>
      </div>
    </div>
  `;
}

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

// Recalcula minutos no client a cada 5s sem precisar de refetch
function atualizarTimers(){
  document.querySelectorAll('.kds-card').forEach(card => {
    const el = card.querySelector('.kds-tempo');
    if (!el) return;
    const mov = el.getAttribute('data-mov');
    if (!mov) return;
    const t = new Date(mov.replace(' ', 'T'));
    const min = Math.floor((Date.now() - t.getTime())/60000);
    el.textContent = formatarTempo(min);
    const novo = min >= ESQUECIDO_MIN ? 'esquecido'
               : min >= VERMELHO_MIN  ? 'vermelho'
               : min >= AMARELO_MIN   ? 'amarelo'
                                       : 'verde';
    card.classList.remove('verde','amarelo','vermelho','esquecido');
    card.classList.add(novo);
  });
}

async function finalizar(codEmpresa, codAbertura, codLanc, btn){
  const chave = codEmpresa + '|' + codAbertura + '|' + codLanc;

  // Bloqueia clique duplo
  if (bloqueado.has(chave)) return;
  bloqueado.add(chave);
  if (btn) {
    btn.disabled = true;
    btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Salvando…';
  }

  try {
    const r = await fetch('/api/cozinha/finalizar', {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      credentials:'same-origin',
      body:JSON.stringify({cod_empresa:codEmpresa, cod_abertura:codAbertura, cod_lanc:codLanc})
    });
    const j = await r.json();
    if (!r.ok || j.erro) throw new Error(j.erro || 'Falha ao salvar');

    // Remove o card visualmente
    const card = document.querySelector(`.kds-card[data-key="${chave}"]`);
    if (card) {
      card.style.transition = 'opacity .3s, transform .3s';
      card.style.opacity = '0';
      card.style.transform = 'scale(.9)';
      setTimeout(()=>{ card.remove(); }, 300);
    }

    finalizadosSessao++;
    document.getElementById('kdsHoje').textContent = finalizadosSessao;
    const hoje = new Date().toISOString().slice(0,10);
    localStorage.setItem('kds_hoje', JSON.stringify({dia:hoje, qtd:finalizadosSessao}));

    const mins = j.registro ? j.registro.tempo_min : null;
    const garcom = j.registro && j.registro.garcom ? ' — Avisando ' + j.registro.garcom : '';
    toast((mins!==null ? `Pronto em ${mins} min` : 'Pronto registrado') + garcom);

    // Atualiza fila em seguida pra pegar novos pedidos
    setTimeout(carregarFila, 600);
  } catch (e) {
    bloqueado.delete(chave);
    if (btn) { btn.disabled = false; btn.innerHTML = '<i class="bi bi-check2-circle"></i> Pronto'; }
    toast(e.message || 'Erro ao finalizar', true);
  }
}

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

</body>
</html>
