<?php /* views/partials/topbar.php — botões dinâmicos via white label */ ?>
<?php
  require_once __DIR__ . '/_wl_bootstrap.php';

  $WL_SYS = wl_system();
  $topbarButtons = $WL_SYS['topbar_buttons'] ?? [];

  $userName = isset($_SESSION['user']['name']) ? trim((string)$_SESSION['user']['name']) : 'Usuário';
  $userRole = isset($_SESSION['user']['role']) ? trim((string)$_SESSION['user']['role']) : 'user';
  $userInitial = strtoupper(mb_substr($userName, 0, 1, 'UTF-8') ?: 'U');

  $pageTitle = isset($title) && $title !== '' ? $title : 'Dashboard';
?>
<style>
  /* Topbar usa cores do white label do sistema */
  .tb {
    height: 64px;
    background: linear-gradient(180deg, var(--sb1, #211843), var(--sb1, #211843));
    color: #e5e7eb;
    border: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.6);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
  }
  .tb-title {
    display:flex; align-items:center; gap:10px;
    font-weight:700; letter-spacing:.2px;
  }
  .tb-title .tb-dot {
    width:10px; height:10px; border-radius:999px;
    background: linear-gradient(180deg, var(--sb-brand, #6ee7ff), var(--sb-brand2, #7c3aed));
    box-shadow: 0 0 12px color-mix(in srgb, var(--sb-brand2, #7c3aed) 50%, transparent);
  }
  .tb-right { display:flex; align-items:center; gap:14px; }
  .tb-user {
    display:flex; align-items:center; gap:10px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 6px 10px;
  }
  .tb-avatar {
    width:32px; height:32px; border-radius: 999px;
    background: linear-gradient(135deg, var(--sb-brand2, #7c3aed), var(--sb-brand, #6ee7ff));
    display:grid; place-items:center;
    color:#0b1020; font-size:.9rem; font-weight:800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  }
  .tb-user .tb-name { font-size:.95rem; font-weight:600; line-height:1.1; color:#fff; }
  .tb-user .tb-role { font-size:.75rem; color:#9aa4b2; line-height:1.1; }
  .tb-sep {
    width:1px; height:28px; background: rgba(148,163,184,.16);
    margin: 0 4px;
  }

  /* Botão dinâmico: usa cores inline (style="..."), CSS só dá estrutura */
  .tb-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 14px; border-radius:999px; text-decoration:none;
    font-weight:700; letter-spacing:.2px;
    border:0; cursor:pointer;
    transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
    white-space: nowrap;
  }
  .tb-btn:hover { transform:translateY(-1px); filter:brightness(1.05); }
  .tb-btn .tb-btn-text { display: inline; }

  /* ===== Botão Hamburger ===== */
  .tb-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    cursor: pointer;
    color: #e5e7eb !important;
    transition: background 0.2s;
    flex-shrink: 0;
    padding: 0;
  }
  .tb-hamburger:hover {
    background: rgba(255, 255, 255, 0.14) !important;
  }
  .tb-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  /* ===== Tablet ===== */
  @media (max-width: 1024px) {
    .tb-hamburger { display: flex !important; }
    .tb-sep { display: none !important; }
    .tb-right { gap: 8px; }
    .tb-btn { padding: 6px 12px; font-size: .85rem; }
  }

  /* ===== Mobile ===== */
  @media (max-width: 640px) {
    .tb { padding: 0 10px !important; }
    .tb-title h1 { font-size: 0.85rem !important; }
    .tb-user .tb-name { display: none; }
    .tb-user { padding: 4px 6px !important; }
    .tb-right { gap: 6px; }
    .tb-btn { padding: 6px 10px !important; gap: 4px; }
    .tb-btn .tb-btn-text { font-size: 0.75rem; }
    /* No mobile, se tiver mais de 1 botão, esconde os extras */
    .tb-right .tb-btn:nth-of-type(n+2) { display: none; }
  }
</style>

<header class="tb">
  <div class="tb-left">
    <button class="tb-hamburger" id="sbToggle" type="button" aria-label="Abrir menu">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <line x1="3" y1="6" x2="21" y2="6"/>
        <line x1="3" y1="12" x2="21" y2="12"/>
        <line x1="3" y1="18" x2="21" y2="18"/>
      </svg>
    </button>
    <div class="tb-title">
      <span class="tb-dot"></span>
      <h1 style="margin:0;font-size:1rem;"><?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?></h1>
    </div>
  </div>
  <div class="tb-right">
    <?php foreach ($topbarButtons as $btn):
      $btnUrl   = $btn['url'];
      $btnLabel = $btn['label'];
      $bg       = $btn['bg']   ?? '#6ee7ff';
      $bg2      = $btn['bg2']  ?? '#7c3aed';
      $textColor= $btn['text'] ?? '#0b1020';
      $isExternal = preg_match('#^https?://#i', $btnUrl);
      $shadowRgba = 'rgba(124,58,237,.35)'; // fallback
    ?>
      <a href="<?= htmlspecialchars($btnUrl, ENT_QUOTES, 'UTF-8') ?>"
         <?= $isExternal ? 'target="_blank" rel="noopener noreferrer"' : '' ?>
         class="tb-btn"
         style="background: linear-gradient(90deg, <?= htmlspecialchars($bg, ENT_QUOTES, 'UTF-8') ?>, <?= htmlspecialchars($bg2, ENT_QUOTES, 'UTF-8') ?>);
                color: <?= htmlspecialchars($textColor, ENT_QUOTES, 'UTF-8') ?>;
                box-shadow: 0 8px 20px color-mix(in srgb, <?= htmlspecialchars($bg2, ENT_QUOTES, 'UTF-8') ?> 35%, transparent);">
        <span class="tb-btn-text"><?= htmlspecialchars($btnLabel, ENT_QUOTES, 'UTF-8') ?></span>
      </a>
    <?php endforeach; ?>

    <div class="tb-user">
      <div class="tb-avatar"><?= htmlspecialchars($userInitial, ENT_QUOTES, 'UTF-8') ?></div>
      <div class="tb-name"><?= htmlspecialchars($userName, ENT_QUOTES, 'UTF-8') ?></div>
    </div>
  </div>
</header>
