<?php
require_once __DIR__ . "/../../includes/db.php";

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$mesa  = (int)($_GET["mesa"] ?? 0);
$token = $_GET["token"] ?? "";

// força identificação do cliente
if (empty($_SESSION["cliente_id"])) {
  header("Location: " . BASE_URL . "/public/pedidos/identificar.php?mesa={$mesa}&token=" . urlencode($token));
  exit;
}
?>
<!doctype html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <title>Lanchonete • Cliente</title>

<style>
  :root{
    /* ===== Win10 Dark (Fluent/Mica-ish) ===== */
    --bg:#0f0f10;
    --card: rgba(32,32,34,.72);
    --card2: rgba(26,26,28,.62);
    --text:#f3f3f3;
    --muted: rgba(243,243,243,.70);
    --line: rgba(255,255,255,.12);

    --shadow: 0 18px 50px rgba(0,0,0,.45);
    --radius: 16px;

    --primary:#60cdff;
    --danger:#ff5a5f;
    --ok:#22c55e;
    --warn:#f59e0b;

    --btn: rgba(255,255,255,.06);
    --btnHover: rgba(255,255,255,.10);
    --chip: rgba(255,255,255,.06);
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    background: var(--bg);
    color: var(--text);
    min-height:100vh;
  }
  .wrap{
    width:min(860px, 100%);
    margin:0 auto;
    padding: 16px 14px 88px;
  }
  header{
    position: sticky;
    top:0;
    z-index: 20;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(15,15,16,.92) 70%, transparent);
    backdrop-filter: blur(8px);
  }
  .bar{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    background: rgba(32,32,34,.72);
    border:1px solid var(--line);
    border-radius: 18px;
    padding: 10px 12px;
    box-shadow: var(--shadow);
  }
  .brand{ display:flex; gap:10px; align-items:center; }
  .logo{
    width:42px;height:42px;border-radius: 14px;
    background: linear-gradient(135deg, rgba(96,205,255,1), rgba(43,136,216,1));
    display:grid; place-items:center;
    font-weight:950;
  }
  .brand h1{ font-size:16px; margin:0; }
  .muted{ color: var(--muted); font-size:12px; }
  .btn{
    border:1px solid var(--line);
    background: var(--btn);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 14px;
    cursor:pointer;
    font-weight: 900;
    transition:.15s;
    white-space:nowrap;
  }
  .btn:hover{ background: var(--btnHover); }

  .tabs{
    display:flex;
    gap:10px;
    margin: 14px 0 10px;
    overflow:auto;
    padding-bottom: 2px;
  }
  .tab{
    min-width: 150px;
    border:1px solid var(--line);
    background: var(--btn);
    color: var(--muted);
    padding: 10px 12px;
    border-radius: 14px;
    cursor:pointer;
    font-weight: 950;
    text-align:center;
    transition:.15s;
  }
  .tab.active{
    color: var(--text);
    background: rgba(96,205,255,.14);
    border-color: rgba(96,205,255,.35);
  }

  .panel{
    background: rgba(32,32,34,.72);
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
    margin-bottom: 12px;
  }
  .panelHead{
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(26,26,28,.82), rgba(26,26,28,.22));
  }
  .panelHead h2{ margin:0; font-size:16px; }
  .content{ padding: 14px; }

  .grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }
  @media (max-width: 680px){
    .grid{ grid-template-columns: 1fr; }
  }

  .prod{
    display:flex;
    gap: 10px;
    align-items:center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--btn);
  }
  .prod img{
    width: 84px;
    height: 84px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--line);
    background: rgba(0,0,0,.25);
    flex: 0 0 auto;
  }
  .prod .info{ flex:1; min-width: 0; }
  .prod .name{
    font-weight: 950;
    font-size: 14px;
    margin-bottom: 2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .prod .desc{
    color: var(--muted);
    font-size: 12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .prod .meta{
    display:flex;
    gap: 10px;
    align-items:center;
    margin-top: 8px;
    flex-wrap: wrap;
  }
  .chip{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--chip);
    font-weight: 900;
    font-size: 12px;
  }
  .addBtn{
    margin-left:auto;
    border: none;
    background: linear-gradient(135deg, rgba(96,205,255,1), rgba(43,136,216,1));
    color: #fff;
    padding: 10px 12px;
    border-radius: 14px;
    font-weight: 950;
    cursor:pointer;
    transition:.15s;
  }
  .addBtn:hover{ filter: brightness(1.05); }

  .addBtn{ position: relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
  .addQty{
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    display:none;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.28);
    font-weight: 950;
    font-size: 12px;
    line-height: 1;
  }

  .statusRow{
    display:flex;
    gap:10px;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
  }

  .totCard{
    flex: 1 1 240px;
    min-width: 220px;
    border: 1px solid var(--line);
    background: rgba(26,26,28,.62);
    border-radius: 16px;
    padding: 10px 12px;
    box-shadow: var(--shadow);
  }
  .totHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .totTitle{ font-weight: 950; font-size: 13px; }
  .totMain{ font-weight: 950; font-size: 20px; margin-top: 2px; }
  .totSub{ color: var(--muted); font-size: 12px; margin-top: 4px; line-height:1.25; }
  .totDot{ opacity:.55; padding:0 6px; }
  .callBtnInline{
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    white-space: nowrap;
    align-self:flex-start;
  }

  .cartResumo{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 14px;border:1px solid var(--line);border-radius:16px;
    background: rgba(255,255,255,.06);
  }
  .cartResumo b{font-size:18px;}

  .cartList{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
  .cartItem{
    display:flex; justify-content:space-between; gap:10px; align-items:center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--btn);
  }
  .cartItem .left{ min-width: 0; }
  .cartItem .title{ font-weight:950; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .cartItem .small{ color:var(--muted); font-size:12px; margin-top:3px; }
  .qty{ display:flex; gap:6px; align-items:center; }
  .qty button{
    width: 38px; height: 38px;
    border-radius: 12px;
    border:1px solid var(--line);
    background: var(--chip);
    color: var(--text);
    font-weight:950;
    cursor:pointer;
  }
  .qty .n{ min-width: 22px; text-align:center; font-weight:950; }

  .send{
    display:flex;
    gap: 10px;
    align-items:center;
    justify-content:space-between;
    margin-top: 12px;
  }
  .primary{
    border:none;
    background: linear-gradient(135deg, rgba(96,205,255,1), rgba(43,136,216,1));
    color:#fff;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 950;
    cursor:pointer;
    transition:.15s;
    width: 100%;
  }
  .primary:disabled{ opacity:.55; cursor:not-allowed; }

  .cartItem .thumb{
    width:52px; height:52px; border-radius: 14px;
    object-fit: cover;
    border:1px solid var(--line);
    background: rgba(0,0,0,.25);
    flex:0 0 auto;
  }
  .cartItem .leftRow{ display:flex; gap:10px; align-items:center; min-width:0; }
  .cartItem .actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px; }
  .linkBtn{
    border:1px solid var(--line);
    background: var(--chip);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 999px;
    cursor:pointer;
    font-weight: 900;
    font-size: 12px;
  }
  .linkBtn:disabled{ opacity:.55; cursor:not-allowed; }

  .cartDock{
    position: fixed;
    left:0; right:0;
    bottom: 78px;
    padding: 10px 14px;
    z-index: 45;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.60));
  }
  .cartDockIn{
    width:min(860px, 100%);
    margin:0 auto;
    display:flex;
    gap: 12px;
    align-items:center;
    justify-content:space-between;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(32,32,34,.72);
    box-shadow: var(--shadow);
  }
  .cartDockTotal{ font-weight: 950; font-size: 18px; }
  .cartDockBtn{ min-width: 140px; border-radius: 14px; padding: 12px 14px; }
  @media (min-width: 720px){ .cartDock{ bottom: 92px; } }

  .danger{
    border:none;
    background: var(--danger);
    color:#fff;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 950;
    cursor:pointer;
    transition:.15s;
    width: 100%;
  }

  .hidden{ display:none !important; }

  .modal{
    position: fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding: 18px;
    background: rgba(0,0,0,.60);
    z-index: 999;
  }
  .modal.show{ display:flex; }
  .modalCard{
    width: min(520px, 100%);
    background: rgba(32,32,34,.72);
    border:1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .modalHead{
    padding: 14px 14px 12px;
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background: linear-gradient(180deg, rgba(26,26,28,.82), rgba(26,26,28,.22));
  }
  .modalHead h3{ margin:0; font-size:16px; }
  .modalBody{ padding: 14px; color: var(--text); }
  .modalFoot{ padding: 12px 14px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
  .okBtn{
    border:none;
    background: linear-gradient(135deg, rgba(96,205,255,1), rgba(43,136,216,1));
    color:#fff;
    padding: 10px 12px;
    border-radius: 14px;
    font-weight: 950;
    cursor:pointer;
  }
  .warn{ color: var(--warn); font-weight:950; }
  .success{ color: var(--ok); font-weight:950; }

  .badge{
    display:inline-flex;
    gap: 8px;
    align-items:center;
    padding: 8px 10px;
    border-radius: 999px;
    border:1px solid var(--line);
    background: var(--chip);
    font-weight: 950;
    font-size: 12px;
  }
  .dot{ width:8px; height:8px; border-radius:50%; background: var(--muted); }
  .b-novo .dot{ background: var(--warn); }
  .b-aceito .dot{ background: rgba(96,205,255,.85); }
  .b-preparo .dot{ background: rgba(96,205,255,.85); }
  .b-entregue .dot{ background: var(--ok); }
  .b-cancel .dot{ background: var(--danger); }

  .cats{
    display:flex; gap:10px; flex-wrap:wrap;
    margin-bottom: 12px;
  }
  .catBtn{
    border:1px solid var(--line);
    background: var(--btn);
    color: var(--muted);
    padding: 8px 10px;
    border-radius: 999px;
    cursor:pointer;
    font-weight: 950;
    transition:.15s;
    font-size: 12px;
  }
  .catBtn.active{
    background: rgba(96,205,255,.14);
    border-color: rgba(96,205,255,.35);
    color: var(--text);
  }

  .bottomBar{
    position: fixed;
    left:0; right:0; bottom:0;
    padding: 10px 14px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.60));
    z-index: 40;
  }
  .bottomIn{
    width:min(860px, 100%);
    margin:0 auto;
    display:flex;
    gap: 10px;
    align-items:center;
    justify-content:space-between;
  }
  .callBtn{
    border:none;
    background: linear-gradient(135deg, rgba(245,158,11,1), rgba(180,83,9,1));
    color:#fff;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 950;
    cursor:pointer;
    transition:.15s;
    min-width: 170px;
  }
  .lastChip{
    flex:1;
    display:flex;
    align-items:center;
    gap:10px;
    padding: 12px 14px;
    border-radius: 14px;
    border:1px solid var(--line);
    background: rgba(32,32,34,.72);
    box-shadow: var(--shadow);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-weight: 950;
  }
  .lastChip .icon{
    width: 28px; height: 28px;
    border-radius: 10px;
    display:grid; place-items:center;
    background: var(--chip);
    border:1px solid var(--line);
    flex:0 0 auto;
  }
  .lastChip.cancel{ border-color: rgba(255,90,95,.35); background: rgba(255,90,95,.10); color: rgba(255,180,180,.95); }

  /* ===== Mobile (mantido; sem mudar layout) ===== */
  @media (max-width: 560px){
    .topActions{ flex-direction: column; }
    .totWrap{ flex-direction: column; }
    .totCard{ flex: 1 1 auto; min-width: 0; }
    .closeWrap{ width: 100%; }
    .closeWrap .btnEncerrar,
    .closeWrap button,
    .closeWrap a.btn{
      width: 100%;
      min-height: 52px;
    }
    .totMain{ font-size: 18px; }
    .totSub{ font-size: 12px; }
  }

  .totExtra{
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
  }
  .totExtra .badge{
    background: rgba(255,255,255,.08);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 700;
    white-space: nowrap;
  }
  .totHeadCol{ display:flex; flex-direction:column; gap:2px; }
  .totMeta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

  .tabs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .statusRow{ flex: 1 1 100%; }

  @media (max-width: 560px){
    .tabs{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:8px;
    }
    .tabs .tab,
    .tabs .callBtn{
      width:100%;
      justify-content:center;
    }
    .tabs .statusRow{
      grid-column: 1 / -1;
    }
  }
</style>

</head>
<body>
<div class="wrap">
  <header>
    <div class="bar">
      <div class="brand">
        <div class="logo">🍔</div>
        <div>
          <h1>Cliente</h1>
          <div class="muted" id="clienteInfo">Mesa <?= (int)$mesa ?> • Sessão</div>
        </div>
      </div>
      <button class="btn" onclick="irParaContaFechada()">Encerrar</button>
    </div>
  <div class="totCard">
    <div class="totHead">
      <div class="totHeadCol">
        <div class="totTitle">🧾 Mesa (fatura atual)</div>

        <!-- wrapper flex -->
        <div class="totMeta">
          <div class="muted" style="font-size:12px">Atualizado</div>

          <!-- nova div ao lado -->
          <div class="totExtra" id="mesaExtra">
            <!-- badges / infos -->
          </div>
        </div>
      </div>
    </div>

    <div class="totMain" id="vMesaTotal">R$ 0,00</div>
    <div class="totSub">
      Fatura: <span class="money" id="vMesaFatura">R$ 0,00</span><span class="totDot">•</span>
      Avulsos: <span class="money" id="vMesaAvulsos">R$ 0,00</span><span class="totDot">•</span>
      Descontado: <span class="money" id="vMesaDescontado">R$ 0,00</span>
    </div>
  </div>
  <div class="totCard">
  <div class="totHead">
      <div class="totHeadCol">
        <div class="totTitle">👤 Sua sessão</div>

        <!-- wrapper flex -->
        <div class="totMeta">
          <div class="muted" style="font-size:12px">Somente você</div>

          <!-- nova div ao lado -->
          <div class="totExtra" id="sessaoExtra">
            <!-- infos da sessão -->
          </div>
        </div>
      </div>
    </div>

    <div class="totMain" id="vSessaoTotal">R$ 0,00</div>
    <div class="totSub">
      Pedidos: <span class="money" id="vSessaoPedidos">R$ 0,00</span><span class="totDot">•</span>
      Avulsos: <span class="money" id="vSessaoAvulsos">R$ 0,00</span><span class="totDot">•</span>
      Descontado: <span class="money" id="vSessaoDescontado">R$ 0,00</span>
    </div>
  </div>



    <div class="tabs"></div>
      <div id="ultimoStatus" class="lastChip" style="display:none;">
        <span class="icon">🧾</span>
        Último: —
      </div>
      <div class="tabs">
        <button class="tab active" id="tabBtn_menu" onclick="showTab('menu')">🍽️ Cardápio</button>
        <button class="tab" id="tabBtn_cart" onclick="showTab('cart')">🛒 Carrinho</button>
        <button class="tab" id="tabBtn_status" onclick="showTab('status')">📦 Pedidos</button>
        <button class="callBtn callBtnInline"  onclick="chamarGarcom()">🛎️ Chamar garçom</button>
        <div class="statusRow"></div>  
      </div>
    <!-- PENDENTE (aguardando autorização) -->
    <div class="panel hidden" id="pendingPanel">
      <div class="panelHead">
        <h2>🔐 Aguardando autorização</h2>
        <div class="muted">A mesa está ocupada. Alguém que já está na mesa precisa permitir sua entrada.</div>
      </div>
      <div class="content">
        <div style="margin-bottom:12px; border:1px solid var(--line); background:var(--card2); border-radius:16px; padding:12px">
          <div style="font-weight:900; margin-bottom:6px">Seu pedido de entrada foi enviado.</div>
          <div class="muted">Assim que for autorizado, esta tela será liberada automaticamente.</div>
        </div>
        <button class="btn" style="border:none;background:var(--danger);color:#fff" onclick="sairEVoltar()">Sair</button>
      </div>
    </div>

    <!-- MENU -->
    <div class="panel" id="tab_menu">
      <div class="panelHead">
        <h2>Cardápio</h2>
        <div class="muted">Escolha a categoria e toque em + para adicionar</div>
      </div>
      <div class="content">
        <div id="cats" class="cats"></div>
        <div id="menu" class="grid"><div class="muted">Carregando menu…</div></div>
      </div>
    </div>

    <!-- CARRINHO -->
    <div class="panel hidden" id="tab_cart">
      <div class="panelHead">
        <h2>Carrinho</h2>
        <div class="muted">Revise antes de enviar</div>
      </div>
      <div class="content">
        <div id="cartResumo" class="cartResumo" style="margin-bottom:10px; display:none"></div>
        <ul id="carrinho" class="cartList"></ul>

        <div class="send">
          <button class="btn" id="btnLimpar" onclick="limparCarrinho()" style="width:100%;">Limpar</button>
          <button class="primary" id="btnEnviar" onclick="enviarPedido()">Enviar pedido</button>
        </div>
      </div>
    </div>

    <!-- STATUS -->
    <div class="panel hidden" id="tab_status">
      <div class="panelHead">
        <h2>Status do pedido</h2>
        <hr>
        <div id="statusPedidos" class="muted">Carregando…</div>
      </div>
      <div class="content">
        <!-- Solicitações de entrada (só aparece para quem está ATIVO) -->
        <div id="entradaSolicWrap" class="hidden" style="margin-bottom:12px; border:1px solid var(--line); background:var(--card2); border-radius:16px; padding:12px">
          <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px">
            <div>
              <div style="font-weight:950">🔐 Solicitações de entrada</div>
              <div class="muted">Apenas quem está na mesa pode autorizar</div>
            </div>
            <button class="btn" onclick="atualizarSolicitacoes(true)">Atualizar</button>
          </div>
          <div id="entradaSolicList"></div>
        </div>
      </div>
    </div>
  </header>

  
  <!-- Dock fixo do carrinho (mobile) -->
  
    
  

<div class="bottomBar">
    <div class="bottomIn">
      
    </div>
</div>
</div>

<!-- Modal App -->
<div class="modal" id="appModal" aria-hidden="true">
  <div class="modalCard">
    <div class="modalHead">
      <h3 id="appModalTitle">Mensagem</h3>
      <button class="btn" onclick="closeAppModal()">✕</button>
    </div>
    <div class="modalBody" id="appModalMsg"></div>
    <div class="modalFoot">
      <button class="btn" id="appModalCancel" onclick="appModalCancel()" style="display:none">Cancelar</button>
      <button class="okBtn" id="appModalOk" onclick="appModalOk()">OK</button>
    </div>
  </div>
</div>

<script>
function showTab(t){
  ["menu","cart","status"].forEach(x=>{
    document.getElementById("tab_"+x).classList.toggle("hidden", x!==t);
    document.getElementById("tabBtn_"+x).classList.toggle("active", x===t);
  });
  if(t==="cart") renderCarrinho();
  updateCartUIBits();
  if(t==="status") atualizarStatus();
}

let itens = [];
let produtosMap = {};
let contaIdAtual = null;
let participanteStatus = null; // ATIVO | PENDENTE | ...
let podeAutorizar = false;
let __solicTimer = null;
let __entradaTimer = null;

let menuRaw = [];
let categorias = [];
let categoriaAtiva = "";
const CAT_TODOS = "__TODOS__";

/**
 * ✅ REGRA DEFINIDA POR VOCÊ:
 * <img src="/lanchonete/public/pedidos/fotos/" + foto_do_banco>
 * foto_do_banco = "xburger.png"
 */
const FOTO_DIR = "/lanchonete/public/pedidos/fotos/";
const FALLBACK_FOTO = FOTO_DIR + "vazio.png";

function money(v){ return "R$ " + Number(v||0).toFixed(2).replace(".",","); }

const CART_STORE_KEY = "cart_mesa_<?= (int)$mesa ?>"; // sessionStorage
let orderLocked = false; // bloqueia edição durante envio

function escapeHtml(s){
  return String(s??"").replace(/[&<>"']/g, m=>({ "&":"&amp;","<":"&lt;",">":"&gt;","\"":"&quot;","'":"&#039;" }[m]));
}
function escapeJs(s){ return String(s??"").replace(/\\/g,"\\\\").replace(/'/g,"\\'").replace(/\n/g," "); }

function getCartQtd(prodId){
  const f = itens.find(x=>x.produto_id===prodId);
  return f ? Number(f.qtd||0) : 0;
}


function updateMenuQty(prodId){
  const el = document.getElementById("mq_"+prodId);
  if(!el) return;
  const q = getCartQtd(prodId);
  if(q>0){
    el.style.display = "inline-flex";
    el.textContent = String(q);
  }else{
    el.style.display = "none";
    el.textContent = "";
  }
}

function getCartTotal(){
  return itens.reduce((acc,it)=>{
    const p = produtosMap[it.produto_id] || {};
    return acc + (Number(p.preco||0) * Number(it.qtd||0));
  }, 0);
}
function getCartCount(){
  return itens.reduce((a,x)=>a+Number(x.qtd||0),0);
}
function updateCartUIBits(){
  // badge na aba carrinho
  const n = getCartCount();
  const btn = document.getElementById("tabBtn_cart");
  if(btn){
    btn.textContent = n>0 ? `🛒 Carrinho (${n})` : "🛒 Carrinho";
  }

  // total no resumo e dock
  const total = getCartTotal();
  const resumo = document.getElementById("cartResumo");
  if(resumo){
    if(n>0){
      resumo.style.display = "";
      resumo.innerHTML = `<div><div class="muted" style="font-size:12px">Total do carrinho</div><b>${money(total)}</b></div>
                          <div class="muted" style="font-size:12px">${n} item(ns)</div>`;
    }else{
      resumo.style.display = "none";
      resumo.innerHTML = "";
    }
  }

  const dock = document.getElementById("cartDock");
  const dockTotal = document.getElementById("cartDockTotal");
  const dockSend = document.getElementById("cartDockSend");
  // mostra dock somente quando estiver na aba carrinho e tiver itens
  const cartTabVisible = !document.getElementById("tab_cart").classList.contains("hidden");
  if(dock){
    dock.classList.toggle("hidden", !(cartTabVisible && n>0));
  }
  if(dockTotal) dockTotal.textContent = money(total);
  if(dockSend) dockSend.disabled = (n===0 || orderLocked);

  // botões
  const sendBtn = document.getElementById("btnEnviar");
  const clearBtn = document.getElementById("btnLimpar");
  if(sendBtn) sendBtn.disabled = (n===0 || orderLocked);
  if(clearBtn) clearBtn.disabled = (n===0 || orderLocked);
}

function saveCart(){
  try{
    const payload = { conta_id: contaIdAtual, itens };
    sessionStorage.setItem(CART_STORE_KEY, JSON.stringify(payload));
  }catch(e){}
}
function loadCart(){
  try{
    const raw = sessionStorage.getItem(CART_STORE_KEY);
    if(!raw) return;
    const j = JSON.parse(raw);
    if(j && j.conta_id && contaIdAtual && Number(j.conta_id) !== Number(contaIdAtual)) return; // não mistura contas
    if(j && Array.isArray(j.itens)){
      itens = j.itens
        .map(x=>({ produto_id:Number(x.produto_id||0), qtd:Number(x.qtd||0), obs:String(x.obs||"") }))
        .filter(x=>x.produto_id>0 && x.qtd>0);
    }
  }catch(e){}
}

function limparCarrinho(){
  if(orderLocked) return;
  if(itens.length===0) return;
  showConfirmModal("Limpar carrinho?", `Isso removerá todos os itens selecionados.`, ()=>{
    const ids = itens.map(x=>Number(x.produto_id||0));
    itens = [];
    saveCart();
    updateCartUIBits();
    ids.forEach(id=>{ if(id>0) updateMenuQty(id); });
    renderCarrinho();
  }, { okText:"Limpar", variant:"warn" });
}


function statusBadge(s){
  if(!s) return "";
  const st = String(s||"").trim().toUpperCase();
  if(st==='NOVO')       return `<span class="badge b-novo"><span class="dot"></span>Novo</span>`;
  if(st==='ACEITO')     return `<span class="badge b-aceito"><span class="dot"></span>Pedido aceito</span>`;
  if(st==='EM_PREPARO') return `<span class="badge b-preparo"><span class="dot"></span>Em preparo</span>`;
  if(st==='ENTREGUE')   return `<span class="badge b-entregue"><span class="dot"></span>Entregue</span>`;
  if(st==='CANCELADO' || st==='RECUSADO') return `<span class="badge b-cancel"><span class="dot"></span>Cancelado</span>`;
  return `<span class="badge"><span class="dot"></span>${escapeHtml(s)}</span>`;
}

// ===== Motivo de cancelamento/recusa =====
function extrairMotivoDoPedido(p){
  if(!p) return "";
  // tenta vários nomes comuns que podem vir do backend
  const cand = [
    p.recusado_motivo,
    p.motivo_recusa,
    p.motivo_cancelamento,
    p.motivo,
    p.cancelamento_motivo
  ].filter(Boolean);
  return cand.length ? String(cand[0]) : "";
}

// ===== Motivo de cancelamento/recusa (cache) =====
const recusaMotivoCache = new Map(); // pedido_id -> {motivo, ts}
async function fetchRecusaMotivo(pedidoId){
  const id = Number(pedidoId||0);
  if(!id) return "";
  const now = Date.now();
  const cached = recusaMotivoCache.get(id);
  // cache por 2 minutos
  if(cached && (now - cached.ts) < 120000) return cached.motivo || "";
  try{
    const r = await fetch('api.php?action=recusa_motivo&pedido_id='+encodeURIComponent(id), {credentials:'same-origin'});
    const j = await r.json();
    const motivo = (j && j.ok && j.motivo) ? String(j.motivo) : "";
    recusaMotivoCache.set(id, {motivo, ts: now});
    return motivo;
  }catch(e){
    return "";
  }
}

async function preencherMotivoRecusa(pedidoId){
  const id = Number(pedidoId||0);
  if(!id) return;
  const el = document.getElementById('motivoRecusa_'+id);
  if(!el) return;
  const motivo = await fetchRecusaMotivo(id);
  if(motivo){
    el.innerHTML = `Motivo: <b>${escapeHtml(motivo)}</b>`;
    el.style.display = '';
  } else {
    el.textContent = 'Cancelado.';
    el.style.display = '';
  }
}


async function carregarCliente(){
  try{
    const r = await fetch('api.php?action=me', {credentials:'same-origin'});
    const out = await r.json();

    contaIdAtual = out.conta_id || null;
    participanteStatus = out.participante_status || null;
    podeAutorizar = !!out.pode_autorizar;

    document.getElementById("clienteInfo").textContent =
      `Mesa <?= (int)$mesa ?> • ` + (participanteStatus === "ATIVO" ? "Sessão ativa" : "Aguardando autorização");
  }catch(e){
    document.getElementById("clienteInfo").textContent = `Mesa <?= (int)$mesa ?> • Sessão`;
  }

  aplicarGate();
}

function setHidden(id, hidden){
  const el = document.getElementById(id);
  if(!el) return;
  el.classList.toggle("hidden", !!hidden);
}

function aplicarGate(){
  const tabs = document.querySelector(".tabs");
  const isAtivo = (participanteStatus === "ATIVO" || participanteStatus === null); // null = fallback (caso antigo)
  setHidden("pendingPanel", isAtivo);

  // painéis principais
  setHidden("tab_menu", !isAtivo);
  setHidden("tab_cart", !isAtivo);
  setHidden("tab_status", !isAtivo);

  if(tabs) tabs.style.display = isAtivo ? "" : "none";

  if(!isAtivo){
    // para timers normais
    if(__solicTimer){ clearInterval(__solicTimer); __solicTimer = null; }
    if(__entradaTimer){ clearInterval(__entradaTimer); __entradaTimer = null; }

    // inicia polling de autorização
    __entradaTimer = setInterval(async ()=>{
      try{
        const r = await fetch("api.php?action=status_entrada", {credentials:"same-origin"});
        const j = await r.json();
        const st = (j && j.status) ? String(j.status) : "";
        if(st === "ATIVO"){
          window.location.reload();
        } else if(st === "NEGADO" || st === "SAIU"){
          showAppModal("Seu pedido de entrada foi recusado.", {title:"Acesso negado", variant:"warn"});
          clearInterval(__entradaTimer); __entradaTimer = null;
        }
      }catch(e){}
    }, 2500);

    return;
  }

  // ATIVO: inicia polling de solicitações de entrada
  atualizarSolicitacoes(false);
  if(!__solicTimer){
    __solicTimer = setInterval(()=>atualizarSolicitacoes(false), 4000);
  }
}

/* monta a URL da foto do produto exatamente no padrão definido */
function imgSrcFromProduto(p){
  let f = (p && p.foto) ? String(p.foto).trim() : "";
  if(!f) return FALLBACK_FOTO;

  // se alguém cadastrou errado com caminho, limpamos para manter o padrão
  f = f.replace(/^\/+/, "");
  if (f.toLowerCase().startsWith("fotos/")) f = f.substring(6);
  if (f.toLowerCase().startsWith("public/pedidos/fotos/")) f = f.split("/").pop();

  if(!f) return FALLBACK_FOTO;

  return FOTO_DIR + f;
}

async function carregarMenu(){
  try{
    const r = await fetch('api.php?action=menu', {credentials:'same-origin'});
    const out = await r.json();
    if(!out.ok) throw new Error(out.error||"Erro ao carregar menu");
    menuRaw = out.produtos || [];

    produtosMap = {};
    menuRaw.forEach(p=>{ produtosMap[p.id]=p; });

    // categorias (inclui "Todos")
    const set = new Set(menuRaw.map(p=>String(p.categoria || "Geral")));
    categorias = [CAT_TODOS, ...Array.from(set).sort((a,b)=>a.localeCompare(b))];
    categoriaAtiva = categorias[0];

    renderCategorias();
    renderMenu();
    updateCartUIBits();
  }catch(e){
    document.getElementById("menu").innerHTML = `<div class="muted">Falha ao carregar cardápio.</div>`;
  }
}

function renderCategorias(){
  const cats = document.getElementById("cats");
  cats.innerHTML = categorias.map(c=>{
    const label = (c===CAT_TODOS ? "Todos" : c);
    const active = (c===categoriaAtiva) ? "active" : "";
    return `<button class="catBtn ${active}" onclick="setCategoria('${escapeJs(c)}')">${escapeHtml(label)}</button>`;
  }).join("");
}

function setCategoria(cat){
  categoriaAtiva = cat;
  renderCategorias();
  renderMenu();
}

function renderMenu(){
  const el = document.getElementById("menu");
  const arr = menuRaw.filter(p=>{
    if(categoriaAtiva === CAT_TODOS) return true;
    return String(p.categoria||"Geral") === categoriaAtiva;
  });

  if(arr.length===0){
    el.innerHTML = `<div class="muted">Nenhum produto nessa categoria.</div>`;
    return;
  }

  el.innerHTML = arr.map(p=>{
    const img = imgSrcFromProduto(p);
    const q = getCartQtd(Number(p.id));
    return `
      <div class="prod">
        <img src="${img}" alt="">
        <div class="info">
          <div class="name">${escapeHtml(p.nome)}</div>
          <div class="desc">${escapeHtml(p.descricao||"")}</div>
          <div class="meta">
            <span class="chip">${money(p.preco)}</span>
            <button class="addBtn" onclick="addItem(${Number(p.id)})">＋<span class="addQty" id="mq_${Number(p.id)}" style="display:${q>0?'inline-flex':'none'}">${q>0? q:''}<\/span></button>
          </div>
        </div>
      </div>
    `;
  }).join("");
}

function addItem(prodId){
  if(orderLocked){
    showAppModal("Aguarde: pedido em envio. Você poderá editar novamente em instantes.", {title:"Aguarde", variant:"warn"});
    return;
  }
  const p = produtosMap[prodId];
  if(!p) return;
  const found = itens.find(x=>x.produto_id===prodId);
  if(found) found.qtd = Number(found.qtd||0) + 1;
  else itens.push({produto_id:prodId, qtd:1, obs:""});
  saveCart();
  updateCartUIBits();
  updateMenuQty(prodId);
  // se o carrinho estiver aberto, atualiza; senão mantém no cardápio
  if(!document.getElementById("tab_cart").classList.contains("hidden")) renderCarrinho();
} 

function renderCarrinho(){
  updateCartUIBits();
  const el = document.getElementById("carrinho");
  const n = getCartCount();

  if(n===0){
    el.innerHTML = `<div class="muted">Carrinho vazio.</div>`;
    updateCartUIBits();
    return;
  }

  el.innerHTML = itens.map((it, idx)=>{
    const p = produtosMap[it.produto_id] || {};
    const img = imgSrcFromProduto(p);
    const total = (Number(p.preco||0) * Number(it.qtd||0));
    const obs = String(it.obs||"").trim();

    return `
      <li class="cartItem">
        <div class="left" style="flex:1; min-width:0">
          <div class="leftRow">
            <img class="thumb" src="${img}" alt="">
            <div style="min-width:0; flex:1">
              <div class="title">${escapeHtml(p.nome||"Produto")}</div>
              <div class="small">${money(p.preco)} • Total: <b>${money(total)}</b></div>
              <div class="actions">
                <button class="linkBtn" ${orderLocked?'disabled':''} onclick="editObs(${idx})">✍️ Obs</button>
                <button class="linkBtn" ${orderLocked?'disabled':''} onclick="removerItem(${idx})">🗑 Remover</button>
                ${obs ? `<span class="muted" style="font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px">Obs: ${escapeHtml(obs)}</span>` : ``}
              </div>
            </div>
          </div>
        </div>
        <div class="qty">
          <button ${orderLocked?'disabled':''} onclick="chgQtd(${idx},-1)">−</button>
          <div class="n">${Number(it.qtd||0)}</div>
          <button ${orderLocked?'disabled':''} onclick="chgQtd(${idx},+1)">+</button>
        </div>
      </li>
    `;
  }).join("");
  updateCartUIBits();
}

function chgQtd(i, delta){
  if(orderLocked){
    showAppModal("Aguarde: pedido em envio. Você poderá editar novamente em instantes.", {title:"Aguarde", variant:"warn"});
    return;
  }
  if(!itens[i]) return;
  const prodId = Number(itens[i].produto_id||0);

  itens[i].qtd = Math.max(0, Number(itens[i].qtd||0) + delta);
  if(itens[i].qtd<=0) itens.splice(i,1);

  saveCart();
  updateCartUIBits();
  if(prodId>0) updateMenuQty(prodId);
  renderCarrinho();
}

function removerItem(idx){
  if(orderLocked) return;
  if(!itens[idx]) return;
  const p = produtosMap[itens[idx].produto_id] || {};
  showConfirmModal("Remover item?", `Remover <b>${escapeHtml(p.nome||"produto")}</b> do carrinho?`, ()=>{
    const prodId = Number(itens[idx]?.produto_id||0);
    itens.splice(idx,1);
    saveCart();
    updateCartUIBits();
    if(prodId>0) updateMenuQty(prodId);
    renderCarrinho();
  }, {okText:"Remover", variant:"warn", html:true});
}

function editObs(idx){
  if(orderLocked) return;
  const it = itens[idx];
  if(!it) return;
  const p = produtosMap[it.produto_id] || {};
  const current = String(it.obs||"");

  const html = `
    <div style="margin-bottom:8px"><b>${escapeHtml(p.nome||"Produto")}</b></div>
    <div class="muted" style="margin-bottom:10px">Adicione uma observação (ex.: sem cebola, pouco gelo).</div>
    <textarea id="obsInput" style="width:100%;min-height:110px;resize:vertical;border:1px solid var(--line);border-radius:14px;background:var(--card2);color:var(--text);padding:10px;outline:none" placeholder="Digite aqui...">${escapeHtml(current)}</textarea>
  `;
  showConfirmModal("Observação do item", html, ()=>{
    const ta = document.getElementById("obsInput");
    it.obs = ta ? String(ta.value||"").trim() : "";
    saveCart();
    renderCarrinho();
    showAppModal("Observação salva.", {title:"✅ Ok", variant:"success", autoCloseMs: 900});
  }, { okText:"Salvar", cancelText:"Cancelar", html:true });
}

async function enviarPedido(){
  if(orderLocked) return;
  if(!contaIdAtual){
    showAppModal("Conta não encontrada. Reidentifique-se.", {title:"Erro", variant:"warn"});
    return;
  }
  if(itens.length===0) return;

  const total = getCartTotal();
  const qtd = getCartCount();

  const resumo = `
    <div class="muted" style="margin-bottom:10px">Confirme para enviar o pedido.</div>
    <div style="display:flex;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--card2);margin-bottom:10px">
      <div>
        <div class="muted" style="font-size:12px">Itens</div>
        <div style="font-weight:950">${qtd}</div>
      </div>
      <div style="text-align:right">
        <div class="muted" style="font-size:12px">Total</div>
        <div style="font-weight:950;font-size:18px">${money(total)}</div>
      </div>
    </div>
    <div class="muted" style="font-size:12px">Depois de enviar, você pode fazer um novo pedido adicionando mais itens.</div>
  `;

  showConfirmModal("Enviar pedido?", resumo, ()=>enviarPedidoReal(), { okText:"Confirmar envio", cancelText:"Cancelar", html:true });
}

async function enviarPedidoReal(){
  if(orderLocked) return;
  const btn = document.getElementById("btnEnviar");
  const dockSend = document.getElementById("cartDockSend");

  orderLocked = true;
  updateCartUIBits();

  if(btn){
    btn.disabled = true;
    btn.textContent = "Enviando...";
  }
  if(dockSend){
    dockSend.disabled = true;
    dockSend.textContent = "Enviando...";
  }

  try{
    const r = await fetch('api.php?action=criar_pedido', {
      method:'POST',
      credentials:'same-origin',
      headers:{ 'Content-Type':'application/json' },
      body: JSON.stringify({ conta_id: contaIdAtual, itens })
    });
    const out = await r.json();
    if(!out.ok){
      showAppModal(out.error || "Não foi possível enviar.", {title:"Erro", variant:"danger"});
      if(out.pending){ window.location.reload(); }
      return;
    }

    // ✅ limpa carrinho após enviar
    const ids = itens.map(x=>Number(x.produto_id||0));
    itens = [];
    saveCart();
    updateCartUIBits();
    ids.forEach(id=>{ if(id>0) updateMenuQty(id); });
    renderCarrinho();
    showAppModal("Pedido enviado com sucesso!", {title:"✅ Sucesso", variant:"success", autoCloseMs: 1400});
    showTab("status");
  }catch(e){
    showAppModal(String(e?.message||e), {title:"Erro", variant:"danger"});
  }finally{
    orderLocked = false;
    updateCartUIBits();
    if(btn){
      btn.disabled = false;
      btn.textContent = "Enviar pedido";
    }
    if(dockSend){
      dockSend.disabled = false;
      dockSend.textContent = "Enviar";
    }
  }
}

async function chamarGarcom(){
  if(!contaIdAtual){
    showAppModal("Conta não encontrada. Reidentifique-se.", {title:"Erro", variant:"warn"});
    return;
  }
  try{
    const r = await fetch('api.php?action=chamar_garcom', {
      method:'POST',
      credentials:'same-origin',
      headers:{ 'Content-Type':'application/json' },
      body: JSON.stringify({ mesa: <?= (int)$mesa ?>, conta_id: contaIdAtual })
    });
    const out = await r.json();
    if(!out.ok){
      showAppModal(out.error || "Não foi possível chamar.", {title:"Erro", variant:"danger"});
      return;
    }
    showAppModal("Chamado enviado! Aguarde o garçom.", {title:"🛎️ Garçom", variant:"success", autoCloseMs: 1600});
  }catch(e){
    showAppModal(String(e?.message||e), {title:"Erro", variant:"danger"});
  }
}

// ===== Modal App (com confirm/cancel) =====
let __appModalAutoTimer = null;
let __appModalOkFn = null;
let __appModalCancelFn = null;

function showAppModal(message, opts = {}){
  const modal = document.getElementById('appModal');
  const titleEl = document.getElementById('appModalTitle');
  const msgEl = document.getElementById('appModalMsg');
  const okBtn = document.getElementById('appModalOk');
  const cancelBtn = document.getElementById('appModalCancel');

  const {
    title = 'Mensagem',
    variant = 'info', // info | success | warn | danger
    okText = 'OK',
    cancelText = 'Cancelar',
    showCancel = false,
    onOk = null,
    onCancel = null,
    autoCloseMs = 0,
    html = false
  } = opts || {};

  titleEl.textContent = title;
  if(html) msgEl.innerHTML = String(message ?? '');
  else msgEl.textContent = String(message ?? '');

  okBtn.textContent = okText;

  __appModalOkFn = (typeof onOk === "function") ? onOk : null;
  __appModalCancelFn = (typeof onCancel === "function") ? onCancel : null;

  if(cancelBtn){
    cancelBtn.textContent = cancelText;
    cancelBtn.style.display = showCancel ? "" : "none";
  }

  msgEl.classList.remove("warn","success");
  if(variant === "warn") msgEl.classList.add("warn");
  if(variant === "success") msgEl.classList.add("success");

  modal.classList.add('show');
  modal.setAttribute('aria-hidden','false');

  if(__appModalAutoTimer){ clearTimeout(__appModalAutoTimer); __appModalAutoTimer = null; }
  if(autoCloseMs && autoCloseMs > 0){
    __appModalAutoTimer = setTimeout(()=>closeAppModal(), autoCloseMs);
  }
}

function appModalOk(){
  const fn = __appModalOkFn;
  closeAppModal();
  if(fn) try{ fn(); }catch(e){}
}
function appModalCancel(){
  const fn = __appModalCancelFn;
  closeAppModal();
  if(fn) try{ fn(); }catch(e){}
}

function showConfirmModal(title, message, onConfirm, opts={}){
  const { okText="OK", cancelText="Cancelar", variant="info", html=false } = opts||{};
  showAppModal(message, {
    title,
    variant,
    okText,
    cancelText,
    showCancel: true,
    onOk: onConfirm,
    onCancel: ()=>{},
    html
  });
}

function closeAppModal(){
  const modal = document.getElementById('appModal');
  if(!modal) return;
  if(__appModalAutoTimer){ clearTimeout(__appModalAutoTimer); __appModalAutoTimer = null; }
  __appModalOkFn = null;
  __appModalCancelFn = null;
  modal.classList.remove('show');
  modal.setAttribute('aria-hidden','true');
}

// ESC fecha modal
document.addEventListener('keydown', (e)=>{
  if(e.key === 'Escape') closeAppModal();
});

// ===== Modal Boas-vindas =====
const MESA_NUM = <?= (int)$mesa ?>;

function maybeShowBoasVindas(){
  const key = `bemvindo_mesa_${MESA_NUM}`;
  if(localStorage.getItem(key)) return;
  localStorage.setItem(key, "1");
  showAppModal(`Bem-vindo(a)! Você está na mesa ${MESA_NUM}. Para fechar a fatura, dirija-se ao balcão.`, {title:"🍔 Bem-vindo!", variant:"success"});
}

// ====== Solicitações de entrada (autorização) ======
async function atualizarSolicitacoes(force){
  if(!podeAutorizar || !contaIdAtual) {
    const wrap = document.getElementById("entradaSolicWrap");
    if(wrap) wrap.classList.add("hidden");
    return;
  }
  try{
    const r = await fetch("api.php?action=solicitacoes_entrada", {credentials:"same-origin"});
    const j = await r.json();
    const rows = (j && j.solicitacoes) ? j.solicitacoes : [];
    const wrap = document.getElementById("entradaSolicWrap");
    const list = document.getElementById("entradaSolicList");
    if(!wrap || !list) return;

    if(!Array.isArray(rows) || rows.length === 0){
      wrap.classList.add("hidden");
      list.innerHTML = "";
      return;
    }

    wrap.classList.remove("hidden");
    list.innerHTML = rows.map(x=>{
      const nome = escapeHtml(x.nome || "Cliente");
      const cel  = escapeHtml(x.celular || "");
      const when = escapeHtml(x.solicitado_em || "");
      return `
        <div style="display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px; border-top:1px solid var(--line)">
          <div>
            <div style="font-weight:900">${nome} <span class="muted" style="font-weight:700">${cel}</span></div>
            <div class="muted" style="font-size:12px">Solicitado em: ${when}</div>
          </div>
          <div style="display:flex; gap:8px; flex-wrap:wrap">
            <button class="btn" style="border:none;background:var(--primary);color:#fff" onclick="aprovarEntrada(${Number(x.id)})">Autorizar</button>
            <button class="btn" onclick="recusarEntrada(${Number(x.id)})">Recusar</button>
          </div>
        </div>
      `;
    }).join("");
  }catch(e){
    // silencioso
  }
}

async function aprovarEntrada(id){
  try{
    const r = await fetch("api.php?action=aprovar_entrada", {
      method:"POST",
      credentials:"same-origin",
      headers:{ "Content-Type":"application/json" },
      body: JSON.stringify({ participante_id: id })
    });
    const j = await r.json();
    if(!j.ok){
      showAppModal(j.error || "Erro ao autorizar.", {title:"Erro", variant:"danger"});
      return;
    }
    atualizarSolicitacoes(true);
  }catch(e){
    showAppModal(String(e?.message || e), {title:"Erro", variant:"danger"});
  }
}

async function recusarEntrada(id){
  try{
    const r = await fetch("api.php?action=recusar_entrada", {
      method:"POST",
      credentials:"same-origin",
      headers:{ "Content-Type":"application/json" },
      body: JSON.stringify({ participante_id: id })
    });
    const j = await r.json();
    if(!j.ok){
      showAppModal(j.error || "Erro ao recusar.", {title:"Erro", variant:"danger"});
      return;
    }
    atualizarSolicitacoes(true);
  }catch(e){
    showAppModal(String(e?.message || e), {title:"Erro", variant:"danger"});
  }
}

async function sairEVoltar(){
  try{ await fetch('api.php?action=logout', { credentials:'same-origin' }); }catch(e){}
  window.location.href = `identificar.php?mesa=<?= (int)$mesa ?>&token=<?= urlencode($token) ?>`;
}

async function atualizarStatus(){
  if(!contaIdAtual){
    document.getElementById("statusPedidos").innerHTML = `<div class="muted">Conta não encontrada.</div>`;
    return;
  }
  try{
    const r = await fetch('api.php?action=status_pedidos&conta_id='+encodeURIComponent(contaIdAtual), {credentials:'same-origin'});
    const out = await r.json();

    if(!out.ok){
      if(out.force_reidentify){
        showAppModal(out.error || "Sessão inválida. Escaneie o QRCode novamente.", {title:"Sessão", variant:"warn"});
      } else {
        document.getElementById("statusPedidos").innerHTML = `<div class="muted">${escapeHtml(out.error||"Erro")}</div>`;
      }
      return;
    }

    const pedidos = out.pedidos || [];
    const contaStatus = out.conta_status || "";

    // ===== Totais (Mesa x Sua Sessão) =====
    try{
      const tMesa = (out.totais && out.totais.mesa) ? out.totais.mesa : {};
      const tSess = (out.totais && out.totais.sessao) ? out.totais.sessao : {};

      const setTxt = (id, val)=>{ const el=document.getElementById(id); if(el) el.textContent = val; };

      setTxt("vMesaFatura", money(tMesa.fatura));
      setTxt("vMesaAvulsos", money(tMesa.avulsos));
      setTxt("vMesaDescontado", money(tMesa.descontado));
      setTxt("vMesaTotal", money(tMesa.total));

      setTxt("vSessaoPedidos", money(tSess.pedidos));
      setTxt("vSessaoAvulsos", money(tSess.avulsos));
      setTxt("vSessaoDescontado", money(tSess.descontado));
      setTxt("vSessaoTotal", money(tSess.total));
    }catch(_e){}

    if(contaStatus && contaStatus !== "ABERTA"){
      document.getElementById("statusPedidos").innerHTML = `<div class="muted">Conta fechada.</div>`;
      return;
    }

    if(pedidos.length === 0){
      document.getElementById("statusPedidos").innerHTML = `<div class="muted">Você ainda não fez pedidos.</div>`;
      renderUltimoStatus(null);
      return;
    }

    const html = pedidos.map(p=>{
      return `
        <div style="padding:10px; border-top:1px solid var(--line)">
          <div style="display:flex; justify-content:space-between; gap:10px; align-items:center">
            <div style="font-weight:950">Pedido #${Number(p.pedido_id)}</div>
            ${statusBadge(p.status)}
          </div>
          <div class="muted" style="margin-top:4px; font-size:12px">
            Total: <b>${money(p.total)}</b>
          </div>
          ${(() => {
            const st = String(p.status||"").trim().toUpperCase();
            if(st==="CANCELADO" || st==="RECUSADO"){
              {
              const m = extrairMotivoDoPedido(p);
              if(m){
                return `<div class="muted" style="margin-top:6px; font-size:12px">Motivo: <b>${escapeHtml(m)}</b></div>`;
              }
              return `<div class="muted" id="motivoRecusa_${Number(p.pedido_id)}" style="margin-top:6px; font-size:12px; display:none">Carregando motivo…</div>`;
            }
            }
            return "";
          })()}
        </div>
      `;
    }).join("");

    document.getElementById("statusPedidos").innerHTML = `
      <div style="border:1px solid var(--line); border-radius:16px; overflow:hidden; background: var(--btn)">
        ${html}
      </div>
    `;

    const last = getLastPedido(pedidos);

    // ✅ se houver cancelados/recusados, buscar motivo e preencher (cache evita excesso)
    try{
      pedidos.forEach(p=>{
        const st = String(p.status||"").trim().toUpperCase();
        if(st==="CANCELADO" || st==="RECUSADO"){
          const m = extrairMotivoDoPedido(p);
          if(!m) preencherMotivoRecusa(p.pedido_id);
        }
      });
    }catch(_e){}
    renderUltimoStatus(last);

  } catch(e){
    document.getElementById("statusPedidos").innerHTML = `<div class="muted">Erro ao carregar status.</div>`;
  }
}

async function irParaContaFechada(){
  try{
    await fetch('api.php?action=logout', { credentials:'same-origin' });
  }catch(e){}
  window.location.href = `conta_fechada.php?mesa=<?= (int)$mesa ?>&token=<?= urlencode($token) ?>`;
}


(async ()=>{
  await carregarCliente();
  if(participanteStatus && participanteStatus !== "ATIVO"){
    return;
  }
  // ✅ restaura carrinho da sessão (se existir)
  loadCart();
  updateCartUIBits();

  maybeShowBoasVindas();
  await carregarMenu();
  renderCarrinho(); // caso já tenha itens restaurados

  atualizarStatus();
  setInterval(atualizarStatus, 3000);
})();

function getLastPedido(pedidos){
  if(!Array.isArray(pedidos) || pedidos.length === 0) return null;
  return pedidos.slice().sort((a,b)=>{
    const sa = (a.sessao_seq ?? -1);
    const sb = (b.sessao_seq ?? -1);
    if(sa !== sb) return sa - sb;
    return (Number(a.pedido_id||0) - Number(b.pedido_id||0));
  }).at(-1);
}

let ultimoStatusTimer = null;

function renderUltimoStatus(pedido){
  const el = document.getElementById("ultimoStatus");
  if(!el) return;

  // limpa timer anterior (se status atualizar rápido)
  if (ultimoStatusTimer) {
    clearTimeout(ultimoStatusTimer);
    ultimoStatusTimer = null;
  }

  if(!pedido){
    el.style.display = "none";
    return;
  }

  const st  = String(pedido.status || "");
  const stUp = String(st||"").trim().toUpperCase();
  const seq = Number(pedido.pedido_id || 0);

  let icon="🧾", text="Pedido", cls="";
  if(stUp === "NOVO"){ cls="novo"; icon="🕒"; text="Aguardando"; }
  else if(stUp === "ACEITO"){ cls="aceito"; icon="👍"; text="Aceito"; }
  else if(stUp === "EM_PREPARO"){ cls="preparo"; icon="🍳"; text="Em preparo"; }
  else if(stUp === "ENTREGUE"){ cls="entregue"; icon="✅"; text="Entregue"; }
  else if(stUp === "CANCELADO" || stUp === "RECUSADO"){ cls="cancel"; icon="⛔"; text="Cancelado"; }

  el.style.display = "block";
  el.innerHTML = `
    <span class="lastChip ${cls}">
      <span class="icon">${icon}</span>
      ${text} <span style="opacity:.8">•</span> Último: Pedido #${seq}
      ${(() => {
        const stUp = String(st||"").trim().toUpperCase();
        if(stUp==="CANCELADO" || stUp==="RECUSADO"){
          const cached = recusaMotivoCache.get(seq);
          const motivo = cached && cached.motivo ? cached.motivo : "";
          return `<div class="muted" id="lastMotivoRecusa" style="margin-top:6px; font-size:12px">` +
                 (motivo ? `Motivo: <b>${escapeHtml(motivo)}</b>` : `Buscando motivo…`) +
                 `</div>`;
        }
        return "";
      })()}
    </span>
  `;

  // se for cancelado/recusado, buscar motivo e atualizar chip
  try{
    const stUp = String(st||"").trim().toUpperCase();
    if((stUp==="CANCELADO" || stUp==="RECUSADO")){
      fetchRecusaMotivo(seq).then(mot=>{
        const elMot = document.getElementById("lastMotivoRecusa");
        if(elMot){
          if(mot) elMot.innerHTML = `Motivo: <b>${escapeHtml(mot)}</b>`;
          else elMot.textContent = "Cancelado.";
        }
      });
    }
  }catch(_e){}

  // ✅ some após 5 segundos
  ultimoStatusTimer = setTimeout(() => {
    el.style.display = "none";
  }, 5000);
}

</script>
</body>
</html>