<?php
declare(strict_types=1);

require_once __DIR__ . "/../includes/session_staff.php";
require_staff(null);

$s     = staff_current();
$perms = $s['perms'] ?? [];
$role = (string)($s['role'] ?? '');

$links = [
  'balcao' => [APP_BASE . "/balcao/", "Balcão", "🛒"],
  'garcom' => [APP_BASE . "/garcom/", "Garçom", "🍽️"],
  'cartao' => [APP_BASE . "/cartao/", "Cartão", "💳"],
  'caixa'  => [APP_BASE . "/caixa/",  "Caixa",  "🧾"],  
];
// ✅ Administrativo (somente ADMIN)
if ($role === 'ADMIN') {
  $links['admin'] = [APP_BASE . "/admin/", "Administrativo", "🛠️"];
  if (!in_array('admin', $perms, true)) $perms[] = 'admin';
}


function h($s){ return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }

// ✅ Logo central (480x480)
// ✅ Logo central (480x480)
$logoRel = APP_BASE . "/assets/logo-480.png";
$logoFs  = __DIR__ . "/assets/logo-480.png";
$hasLogo = is_file($logoFs);

// ✅ Imagem ao lado do PDV (240x48) - opcional
$brandRel = APP_BASE . "/assets/brand-240x48.png";
$brandFs  = __DIR__ . "/assets/brand-240x48.png";
$hasBrand = is_file($brandFs);

?>
<!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>Painel</title>

  <style>
    :root{
      /* ===== Win10 Dark-ish ===== */
      --bg:#0f0f10;
      --bg2:#0a0a0b;

      --text:#f3f3f3;
      --muted: rgba(243,243,243,.70);

      --card: rgba(32,32,34,.72);
      --card2: rgba(26,26,28,.62);

      --input: rgba(18,18,20,.78);

      --line: rgba(255,255,255,.12);
      --line2: rgba(255,255,255,.08);

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

      --accent:#60cdff;
      --accent2:#2b88d8;

      --ok:#22c55e;
      --warn:#f59e0b;
      --danger:#ff5a5f;

      --tap: 48px;
    }

    *{ box-sizing:border-box }
    html,body{ height:100% }
    body{
      margin:0;
      font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
      color:var(--text);
      background: var(--bg);
      min-height:100vh;
     s

      overflow-x:hidden;
    }
    a{ color:inherit }

    .wrap{ max-width:1100px; margin:0 auto; padding:14px 14px 28px; }

    /* ===== Topbar ===== */
    .topbar{
      position:sticky; top:0; z-index:50;
      padding:10px 0;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      background: rgba(15,15,16,.92);
      border-bottom: 1px solid var(--line2);
    }
    .topbar-inner{
      max-width:1100px;
      margin:0 auto;
      padding:0 14px;
      display:flex;
      align-items:center;
      gap:12px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 190px;
    }
    .brand-badge{
      width:40px;height:40px;border-radius:14px;
      background: rgba(255,255,255,.06);
      border:1px solid var(--line);
      box-shadow: 0 12px 28px rgba(0,0,0,.35);
      display:grid;place-items:center;
      font-weight:900;
      color: rgba(243,243,243,.95);
      flex: 0 0 auto;
    }

    .brand-img{
      width:240px;
      height:48px;
      object-fit:contain;
      display:block;
      filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
      opacity:.95;
      max-width: 34vw;
    }

    .spacer{ flex:1 }

    .user{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      background: rgba(255,255,255,.04);
      border:1px solid var(--line2);
      border-radius: 999px;
      box-shadow: 0 10px 26px rgba(0,0,0,.25);
      max-width: 55vw;
    }
    .user .dot{
      width:10px;height:10px;border-radius:999px;background:var(--ok);
      box-shadow: 0 0 0 4px rgba(34,197,94,.12);
    }
    .user .txt{ min-width:0; line-height:1.1 }
    .user .txt .name{
      font-weight:850;
      font-size:13px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .user .txt .role{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

    .btn{
      height: var(--tap);
      padding:0 14px;
      display:inline-flex;
      align-items:center;
      gap:10px;
      border-radius: 14px;
      border:1px solid var(--line2);
      background: rgba(255,255,255,.05);
      text-decoration:none;
      color:var(--text);
      cursor:pointer;
      user-select:none;
      transition: transform .08s ease, border-color .12s ease, background .12s ease;
      white-space:nowrap;
    }
    .btn:hover{ background: rgba(255,255,255,.08); border-color: rgba(96,205,255,.22) }
    .btn:active{ transform: translateY(1px) }

    .btn-ghost{
      background: transparent;
      border-color: transparent;
    }
    .btn-ghost:hover{ background: rgba(255,255,255,.06); border-color: var(--line2) }

    .hamb{
      width: var(--tap);
      padding:0;
      display:none;
      justify-content:center;
      border-radius: 14px;
    }

    /* ===== Desktop menu ===== */
    .menu{
      display:flex;
      align-items:center;
      gap:8px;
    }

    /* ===== Mobile drawer ===== */
    .drawer-backdrop{
      position:fixed; inset:0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display:none;
      z-index:80;
    }
    .drawer{
      position:fixed;
      top:0; right:0;
      height:100%;
      width:min(420px, 92vw);
      background: rgba(18,18,20,.92);
      border-left: 1px solid var(--line2);
      box-shadow: -18px 0 55px rgba(0,0,0,.55);
      transform: translateX(105%);
      transition: transform .16s ease;
      z-index:90;
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .drawer.open{ transform: translateX(0) }
    .drawer-backdrop.open{ display:block }

    .drawer-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:10px 10px;
      border:1px solid var(--line2);
      border-radius: 16px;
      background: rgba(255,255,255,.04);
    }

    .drawer-links{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding-top:6px;
    }
    .drawer-links a{
      padding:14px 14px;
      border-radius: 16px;
      border:1px solid var(--line2);
      background: rgba(255,255,255,.05);
      text-decoration:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    .drawer-links a:hover{ border-color: rgba(96,205,255,.22) }

    /* ===== Single centered block ===== */
    .center{
      min-height: calc(100vh - 92px);
      display:grid;
      place-items:center;
      padding: 18px 0 28px;
    }

    .card{
      width: min(480px, 92vw);
      background: rgba(32,32,34,.70);
      border:1px solid var(--line2);
      border-radius: 26px;
      box-shadow: var(--shadow);
      padding:18px;
      overflow:hidden;
      position:relative;
    }
    .card:before{ display:none;
      content:"";
      position:absolute;
      inset:-70px -80px auto auto;
      width:240px;height:240px;
      background: radial-gradient(circle at 30% 30%, rgba(96,205,255,.26), transparent 62%);
      filter: blur(2px);
      transform: rotate(10deg);
      pointer-events:none;
    }
    .card h1{ margin:0; font-size:18px; letter-spacing:.2px }
    .card p{ margin:6px 0 0; color:var(--muted); font-size:13px }

    .logoWrap{ display:grid; place-items:center; padding:14px 0 2px; }
    .logoBox{
      width: min(320px, 86vw);
      aspect-ratio: 1 / 1;
      border-radius: 26px;
      border: 1px dashed rgba(255,255,255,.22);
      background: rgba(255,255,255,.03);
      display:grid;
      place-items:center;
      position:relative;
      overflow:hidden;
    }
    .logoBox img{
      width:100%;
      height:100%;
      object-fit: contain;
      display:block;
    }
    .logoHint{
      position:absolute;
      inset:auto 14px 14px 14px;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 16px;
      padding:10px 12px;
      font-size:12px;
      color: rgba(243,243,243,.88);
      line-height:1.25;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .logoHint code{
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      padding: 1px 6px;
      border-radius: 10px;
      color: rgba(243,243,243,.92);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 11px;
    }

    .footer{
      margin-top:14px;
      color: rgba(243,243,243,.55);
      font-size:12px;
      text-align:center;
    }

    @media (max-width: 860px){
      .menu{ display:none; }
      .hamb{ display:inline-flex; }
      .brand{ min-width: 0; }
      .user{ display:none; }
      .brand-img{ max-width: 48vw; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; scroll-behavior:auto !important; }
    }
  </style>
</head>

<body>
  <header class="topbar">
    <div class="topbar-inner">
      <div class="brand">
        <div class="brand-badge">PDV</div>

        <?php if ($hasBrand): ?>
          <img class="brand-img" src="<?=h($brandRel)?>" alt="Marca">
        <?php else: ?>
          <div style="line-height:1.05">
            <div style="font-weight:900;font-size:14px">Painel</div>
          </div>
        <?php endif; ?>
      </div>

      <nav class="menu" aria-label="Menu">
        <?php foreach($links as $key=>$info):
          if (!in_array($key, $perms, true)) continue;
          [$url,$label,$ico] = $info;
        ?>
          <a class="btn btn-ghost" href="<?=h($url)?>" target="_blank"><?=$ico?> <?=h($label)?></a>
        <?php endforeach; ?>
      </nav>

      <div class="spacer"></div>

      <div class="user" title="Usuário logado">
        <span class="dot" aria-hidden="true"></span>
        <div class="txt">
          <div class="name"><?=h($s['nome'] ?? '')?></div>
          <div class="role"><?=h($s['role'] ?? '')?></div>
        </div>
      </div>

      <a class="btn" href="<?=h(APP_BASE . '/logout.php')?>">Sair</a>

      <button class="btn hamb" id="btnMenu" type="button" aria-label="Abrir menu" aria-controls="drawer" aria-expanded="false">☰</button>
    </div>
  </header>

  <!-- Mobile drawer -->
  <div class="drawer-backdrop" id="backdrop" tabindex="-1" aria-hidden="true"></div>
  <aside class="drawer" id="drawer" aria-label="Menu mobile">
    <div class="drawer-head">
      <div style="display:flex;align-items:center;gap:10px;min-width:0">
        <div class="brand-badge" style="width:38px;height:38px;border-radius:14px">PDV</div>
        <div style="min-width:0">
          <div style="font-weight:900;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"><?=h($s['nome'] ?? '')?></div>
          <div style="font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis"><?=h($s['role'] ?? '')?></div>
        </div>
      </div>
      <button class="btn" id="btnClose" type="button" aria-label="Fechar menu">✕</button>
    </div>

    <div class="drawer-links">
      <?php foreach($links as $key=>$info):
        if (!in_array($key, $perms, true)) continue;
        [$url,$label,$ico] = $info;
      ?>
        <a href="<?=h($url)?>">
          <span><?=$ico?> <?=h($label)?></span>
          <span style="opacity:.7">›</span>
        </a>
      <?php endforeach; ?>
      <a href="<?=h(APP_BASE . '/logout.php')?>" style="border-color: rgba(255,90,95,.25);">
        <span>🚪 Sair</span><span style="opacity:.7">›</span>
      </a>
    </div>

    <div style="margin-top:auto; padding:12px 6px; color:rgba(243,243,243,.55); font-size:12px">
      Dica: toque fora do menu para fechar.
    </div>
  </aside>

  <main class="wrap">
    <section class="center">
      <div class="card">
        <div class="logoWrap">
          <div class="logoBox">
            <?php if ($hasLogo): ?>
              <img src="<?=h($logoRel)?>" alt="Logo">
            <?php else: ?>
              <div style="text-align:center; padding:18px; color:rgba(243,243,243,.85)">
                <div style="font-size:44px; line-height:1">🖼️</div>
                <div style="margin-top:10px; font-weight:900">Sem logo</div>
                <div style="margin-top:6px; font-size:12px; color:var(--muted)">Adicione uma imagem 480×480 e ela aparecerá aqui.</div>
              </div>
            <?php endif; ?>
          </div>
        </div>
        <?php if (!$hasBrand): ?>
        <?php endif; ?>
      </div>
    </section>

    <div class="footer">© <?=date('Y')?> • Painel</div>
  </main>

  <script>
    (function(){
      const btnMenu = document.getElementById('btnMenu');
      const btnClose = document.getElementById('btnClose');
      const drawer = document.getElementById('drawer');
      const backdrop = document.getElementById('backdrop');

      function openDrawer(){
        backdrop.classList.add('open');
        drawer.classList.add('open');
        btnMenu?.setAttribute('aria-expanded', 'true');
      }
      function closeDrawer(){
        backdrop.classList.remove('open');
        drawer.classList.remove('open');
        btnMenu?.setAttribute('aria-expanded', 'false');
      }

      btnMenu?.addEventListener('click', openDrawer);
      btnClose?.addEventListener('click', closeDrawer);
      backdrop?.addEventListener('click', closeDrawer);
      document.addEventListener('keydown', (e)=>{
        if (e.key === 'Escape') closeDrawer();
      });
    })();
  </script>
</body>
</html>
