// Load navbar HTML
async function loadNavbar() {
    const response = await fetch('../components/navbar.html');
    const html = await response.text();
    document.getElementById('navbar-placeholder').innerHTML = html;

    // After navbar loads, populate user info if logged in
    if (typeof loadUser === 'function') loadUser();
}

// Load user info for OAuth2 login
// Load user info for OAuth2 login
async function loadUser() {
  try {
    const response = await fetch('/api/auth/user', { credentials: 'include' });

    if (!response.ok) {
      // Not logged in or auth error
      window.USER_EMAIL = null;
      return;
    }

    const user = await response.json();

    if (!user || !user.email) {
      window.USER_EMAIL = null;
      return;
    }

    // Expose basic auth state globally for other scripts (e.g., subscriptions)
    window.USER_EMAIL = user.email;
    window.USER_NAME = user.name || "";

    // Update the navbar login section
    const loginSection = document.getElementById('login-section');
    if (loginSection) {
      const displayName = user.name || user.email;

      loginSection.innerHTML = `
        <div class="dropdown dropdown-hover">
          <a class="nav-link fw-bold dropdown-toggle d-flex align-items-center"
             href="#"
             id="userMenuLink"
             role="button"
             data-bs-toggle="dropdown"
             aria-expanded="false">
            <span class="me-1">${displayName}</span>
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenuLink">
            <li><a class="dropdown-item" href="../profile.html">My Profile</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="/auth/logout">Sign out</a></li>
          </ul>
        </div>
      `;

      // Optional: hover-open behavior for the dropdown, using Bootstrap
      const dropdown = loginSection.querySelector('.dropdown-hover');
      if (dropdown && typeof bootstrap !== 'undefined') {
        const toggle = dropdown.querySelector('.dropdown-toggle');
        const menu = dropdown.querySelector('.dropdown-menu');
        const bsDropdown = new bootstrap.Dropdown(toggle, { autoClose: true });
        let timeout;

        dropdown.addEventListener('mouseenter', () => {
          clearTimeout(timeout);
          bsDropdown.show();
        });

        dropdown.addEventListener('mouseleave', () => {
          timeout = setTimeout(() => bsDropdown.hide(), 200);
        });

        menu.addEventListener('mouseenter', () => clearTimeout(timeout));
        menu.addEventListener('mouseleave', () => {
          timeout = setTimeout(() => bsDropdown.hide(), 200);
        });
      }
    }

    // If the subscriptions page script is loaded, refresh its button labels
    if (typeof window.aaUpdateSubscriptionButtons === 'function') {
      try {
        window.aaUpdateSubscriptionButtons();
      } catch (e) {
        console.warn('Error updating subscription buttons after login state change', e);
      }
    }

    // 🔁 Handle post-login redirect back to the original page
    try {
      const redirectPath = window.localStorage.getItem('aa_post_login_redirect');
      if (redirectPath && redirectPath !== window.location.pathname) {
        window.localStorage.removeItem('aa_post_login_redirect');
        window.location.href = redirectPath;
      }
    } catch (e) {
      console.warn('Could not read/clear post-login redirect', e);
    }
  } catch (e) {
    console.error('Error loading user:', e);
    window.USER_EMAIL = null;
  }
}

// Initialize navbar
loadNavbar();