<?php
// admin/timer_bar.php
// requer que auth_guard.php já tenha sido incluído e definido $remaining
if (!isset($remaining)) { $remaining = 0; }
$logoutUrl = '/roulette-admin-v6/admin/logout.php';
?>
<div id="session-timer"
     style="position:fixed;right:12px;bottom:12px;background:#111827;color:#fff;border:1px solid #374151;border-radius:12px;padding:10px 12px;font:600 14px system-ui;z-index:9999;min-width:210px;box-shadow:0 10px 30px rgba(0,0,0,.35)">
  <!-- BOTÃO SAIR ACIMA DO TEXTO -->
  <button id="logout-now" type="button"
          style="display:block;width:100%;margin:0 0 8px 0;padding:10px 12px;border:0;border-radius:10px;font-weight:800;cursor:pointer;background:linear-gradient(180deg,#ef4444,#b91c1c);color:#fff">
    Sair
  </button>

  <div style="opacity:.9">Sessão expira em: <span id="session-remaining">—</span></div>
</div>

<script>
(function(){
  const logoutUrl = '<?= $logoutUrl ?>';
  const box  = document.getElementById('session-timer');
  const span = document.getElementById('session-remaining');
  const btn  = document.getElementById('logout-now');

  // Clique no botão Sair -> desloga imediatamente
  btn.addEventListener('click', function(e){
    e.preventDefault();
    window.location.href = logoutUrl + '?manual=1';
  });

  let t = <?= (int)$remaining ?>; // segundos
  function fmt(s){
    const m = Math.floor(s/60), r = s % 60;
    return String(m).padStart(2,'0') + ':' + String(r).padStart(2,'0');
  }
  function tick(){
    if (t <= 0){
      span.textContent = '00:00';
      // Auto-logout ao zerar
      window.location.href = logoutUrl + '?auto=1';
      return;
    }
    span.textContent = fmt(t);
    if (t <= 60) box.style.background = '#7f1d1d'; // alerta < 60s
    t--;
    setTimeout(tick, 1000);
  }
  span.textContent = fmt(t);
  setTimeout(tick, 1000);
})();
</script>