<?php
// includes/new_app_banner.php

$newAppUrl = $newAppUrl ?? (defined('RBE_V2_BASE_URL') ? RBE_V2_BASE_URL : 'https://CHANGE_ME_V2_HOST');
$roleParam = $role ?? 'user';

// Keep it simple: no auth tokens, no user IDs in the URL
$link = rtrim($newAppUrl, '/') . '/?src=legacy&role=' . urlencode((string)$roleParam);

// Optional: allow hiding via URL for support/debug
if (isset($_GET['hide_new_app_banner']) && $_GET['hide_new_app_banner'] == '1') {
    return;
}
?>

<div id="newAppBanner" class="newapp-banner" role="region" aria-label="New app banner" data-storage-key="rbe_newapp_banner_v1">
  <div class="newapp-banner__inner">
    <div class="newapp-banner__text">
      <strong>New Dashboard Preview (Beta)</strong>
      <span>Open the current RBE V2 application. Your current V1 dashboard stays unchanged.</span>
    </div>

    <div class="newapp-banner__actions">
      <a class="newapp-banner__btn" href="<?= htmlspecialchars($link) ?>" target="_blank" rel="noopener">
        Open new app
      </a>
      <button type="button" class="newapp-banner__close" aria-label="Dismiss banner">×</button>
    </div>
  </div>
</div>

<style>
  .newapp-banner {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: linear-gradient(90deg, #0b1f33, #0f2536);
    border-bottom: 1px solid rgba(126, 217, 87, 0.35);
    padding: 10px 12px;
  }
  .newapp-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .newapp-banner__text {
    color: #e8f4ff;
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
  }
  .newapp-banner__text strong {
    color: #7ed957;
    font-size: 14px;
    letter-spacing: 0.2px;
  }
  .newapp-banner__text span {
    font-size: 13px;
    opacity: 0.95;
  }
  .newapp-banner__actions {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .newapp-banner__btn {
    background: #7ed957;
    color: #0b1f33;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid rgba(0,0,0,0.15);
    white-space: nowrap;
  }
  .newapp-banner__btn:hover {
    filter: brightness(1.05);
  }
  .newapp-banner__close {
    background: transparent;
    color: #e8f4ff;
    border: 1px solid rgba(232, 244, 255, 0.25);
    border-radius: 10px;
    width: 38px;
    height: 34px;
    cursor: pointer;
    font-size: 20px;
    line-height: 20px;
  }
  .newapp-banner__close:hover {
    border-color: rgba(126, 217, 87, 0.45);
    color: #7ed957;
  }
</style>

<script>
(function () {
  const el = document.getElementById('newAppBanner');
  if (!el) return;

  const key = el.getAttribute('data-storage-key') || 'rbe_newapp_banner';

  try {
    const until = parseInt(localStorage.getItem(key) || '0', 10);
    if (until && Date.now() < until) {
      el.style.display = 'none';
      return;
    }
  } catch (e) {}

  const closeBtn = el.querySelector('.newapp-banner__close');
  if (!closeBtn) return;

  closeBtn.addEventListener('click', function () {
    el.style.display = 'none';
    try {
      const sevenDays = 7 * 24 * 60 * 60 * 1000;
      localStorage.setItem(key, String(Date.now() + sevenDays));
    } catch (e) {}
  });
})();
</script>



