<?php
// includes/nav.php
$currentPage = basename($_SERVER['PHP_SELF']);
$user = isset($user) ? $user : (isset($_SESSION['user_id']) ? getUserById($_SESSION['user_id']) : null);

$defaultAvatar = 'data:image/svg+xml;base64,' . base64_encode('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" rx="50" fill="#1e3a8a"/><text x="50" y="56" font-family="sans-serif" font-size="38" font-weight="700" fill="#bfdbfe" text-anchor="middle" dominant-baseline="middle">' . strtoupper(substr($user['name'] ?? 'U', 0, 1)) . '</text></svg>');
$avatarUrl = htmlspecialchars($user['avatar'] ?: $defaultAvatar);
?>
  <?php if ($user): ?>
  <div class="dashboard-layout">
  <!-- Mobile Top Bar -->
  <div class="mobile-header">
      <div class="mobile-brand">
        <a href="dashboard.php">
          <img src="<?= $baseDir ?>assets/img/logo-navbar-bright.png" alt="FamGateway" style="height:26px;width:auto;display:block;object-fit:contain;">
        </a>
      </div>
    <button class="mobile-menu-btn" onclick="openSidebar()">
      <i data-lucide="menu" style="width:22px;height:22px;"></i>
    </button>
  </div>

  <!-- Sidebar -->
  <aside class="sidebar" id="sidebar">
    <div class="sidebar-header">
      <div style="display:flex; justify-content:space-between; align-items:center;">
          <div class="sidebar-brand">
            <a href="dashboard.php">
              <img src="<?= $baseDir ?>assets/img/logo-navbar-bright.png" alt="FamGateway" style="height:26px;width:auto;display:block;object-fit:contain;">
            </a>
          </div>
        <button class="mobile-menu-btn" id="closeSidebarBtn" style="display:none;" onclick="closeSidebar()">
          <i data-lucide="x" style="width:20px;height:20px;"></i>
        </button>
      </div>
    </div>

    <nav class="sidebar-nav">
      <div class="sidebar-section-label">Main</div>
      <a href="<?= $baseDir ?>dashboard.php" class="sidebar-item <?= $currentPage === 'dashboard.php' ? 'active' : '' ?>">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg> Dashboard
      </a>
      <a href="<?= $baseDir ?>transactions.php" class="sidebar-item <?= $currentPage === 'transactions.php' ? 'active' : '' ?>">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-receipt"><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 17.5v-11"/></svg> Transactions
      </a>
      <a href="<?= $baseDir ?>payment-links.php" class="sidebar-item <?= $currentPage === 'payment-links.php' ? 'active' : '' ?>">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link-2"><path d="M9 17H7A5 5 0 0 1 7 7h2"/><path d="M15 7h2a5 5 0 1 1 0 10h-2"/><line x1="8" x2="16" y1="12" y2="12"/></svg> Payment Links
      </a>
      <a href="<?= $baseDir ?>api-keys.php" class="sidebar-item <?= $currentPage === 'api-keys.php' ? 'active' : '' ?>">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg> API Keys
      </a>
      <a href="<?= $baseDir ?>webhooks.php" class="sidebar-item <?= $currentPage === 'webhooks.php' ? 'active' : '' ?>">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send"><line x1="22" x2="11" y1="2" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg> Webhooks
      </a>

      <div class="sidebar-section-label">Settings</div>
      <a href="<?= $baseDir ?>integrations.php" class="sidebar-item <?= $currentPage === 'integrations.php' ? 'active' : '' ?>">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug-zap"><path d="m13 2-2 2.5h3L12 7"/><path d="M10 14v-3"/><path d="M14 14v-3"/><path d="M11 19c-1.7 0-3-1.3-3-3v-2h8v2c0 1.7-1.3 3-3 3Z"/><path d="M12 22v-3"/></svg> Integrations
      </a>
      <a href="<?= $baseDir ?>profile.php" class="sidebar-item <?= $currentPage === 'profile.php' ? 'active' : '' ?>">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-circle"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg> Profile
      </a>
      <a href="<?= $baseDir ?>docs.php" class="sidebar-item <?= $currentPage === 'docs.php' ? 'active' : '' ?>">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg> Documentation
      </a>



      <?php if (isAdminLoggedIn()): ?>
      <div class="sidebar-section-label">Admin</div>
      <a href="<?= $baseDir ?>admin/dashboard.php" class="sidebar-item <?= strpos($currentPage, 'admin') !== false ? 'active' : '' ?>">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg> Admin Panel
        <span class="sidebar-item-badge">Admin</span>
      </a>
      <?php endif; ?>
    </nav>

    <div class="sidebar-footer">
      <a href="<?= $baseDir ?>profile.php" class="sidebar-user-card">
        <img src="<?= $avatarUrl ?>" class="sidebar-avatar" alt="<?= htmlspecialchars($user['name']) ?>">
        <div style="overflow:hidden; min-width:0;">
          <div class="sidebar-user-name" style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"><?= htmlspecialchars($user['name']) ?></div>
          <div class="sidebar-user-role"><?= htmlspecialchars($user['email'] ?? 'User Account') ?></div>
        </div>
      </a>
      <a href="<?= $baseDir ?>logout.php" class="sidebar-logout">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg> Sign Out
      </a>
    </div>
  </aside>

  <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>

  <?php else: ?>
  <!-- Minimal topbar for logged-out pages -->
  <div style="position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:14px 28px; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-bottom:1px solid #e2e8f0;">
    <div style="display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; color:#0f172a;">
      <a href="<?= $baseDir ?>index.php" style="display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none;">
        <img src="<?= $baseDir ?>favicon.png" alt="FamGateway" style="width:28px;height:28px;object-fit:contain;display:block;">
        FamGateway
      </a>
    </div>
    <a href="<?= $baseDir ?>login.php" style="font-size:14px; font-weight:600; color:#2563eb;">Sign In →</a>
  </div>
  <?php endif; ?>

<script>
function openSidebar() {
  document.getElementById('sidebar').classList.add('open');
  document.getElementById('sidebarOverlay').style.display = 'block';
  if(document.getElementById('closeSidebarBtn')) document.getElementById('closeSidebarBtn').style.display = 'flex';
}
function closeSidebar() {
  document.getElementById('sidebar').classList.remove('open');
  document.getElementById('sidebarOverlay').style.display = 'none';
  if(document.getElementById('closeSidebarBtn')) document.getElementById('closeSidebarBtn').style.display = 'none';
}
</script>

<script>
/* Dashboard entrance animations — IntersectionObserver */
(function() {
  if (!window.IntersectionObserver) {
    /* Fallback: just show everything immediately */
    document.querySelectorAll('.dash-anim-up,.dash-anim-in,.dash-anim-right,.dash-stagger').forEach(function(el) {
      el.style.opacity = '1';
    });
    return;
  }
  var observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target); /* fire once only */
      }
    });
  }, { threshold: 0.08, rootMargin: '0px 0px -30px 0px' });

  /* Run after DOM is ready */
  function initObserver() {
    document.querySelectorAll(
      '.dash-anim-up, .dash-anim-in, .dash-anim-right, .dash-stagger'
    ).forEach(function(el) { observer.observe(el); });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initObserver);
  } else {
    initObserver();
  }
})();
</script>
