(() => {
  const loginButton = document.querySelector('#auth-login-button');
  const profileLink = document.querySelector('#auth-profile-link');
  const adminLink = document.querySelector('#auth-admin-link');
  const session = document.querySelector('#auth-session');
  const username = document.querySelector('#auth-username');
  const token = localStorage.getItem('linklogAccessToken');

  const menu = document.querySelector('#auth-menu');
  const menuToggle = document.querySelector('.menu-toggle');
  const logoutButton = document.querySelector('#logout-button');

  if (!loginButton || !profileLink || !adminLink || !session || !username || !menu || !menuToggle || !logoutButton) return;

  menuToggle.addEventListener('click', () => {
    const isOpen = !menu.classList.contains('hidden');
    menu.classList.toggle('hidden', isOpen);
    menuToggle.setAttribute('aria-expanded', String(!isOpen));
  });

  function showSignedOut() {
    loginButton.classList.remove('hidden');
    profileLink.classList.add('hidden');
    adminLink.classList.add('hidden');
    session.classList.add('hidden');
    logoutButton.classList.add('hidden');
  }

  function showSignedIn(user) {
    loginButton.classList.add('hidden');
    profileLink.classList.remove('hidden');
    adminLink.classList.toggle('hidden', !user.is_admin);
    session.classList.remove('hidden');
    logoutButton.classList.remove('hidden');
    username.textContent = user.username || '';
    username.href = `/${encodeURIComponent(user.username || '')}/`;
  }

  if (!token) {
    showSignedOut();
    return;
  }

  fetch(`/api/auth/me?token=${encodeURIComponent(token)}`)
    .then((response) => {
      if (!response.ok) throw new Error('Session expired');
      return response.json();
    })
    .then(showSignedIn)
    .catch(() => {
      localStorage.removeItem('linklogAccessToken');
      showSignedOut();
    });
})();