/**
 * Armchair Brigade — Navigation & Account Dropdown Controller
 */
(function () {
  'use strict';

  function initNav() {
    const nav = document.getElementById('siteNav');
    const toggle = document.getElementById('navToggle');
    const links = document.getElementById('navLinks');
    const dropdown = document.getElementById('navAccountDropdown');
    const dropdownToggle = document.getElementById('accountDropdownToggle');
    const dropdownMenu = document.getElementById('accountDropdownMenu');
    const signoutBtn = document.getElementById('nav-item-signout');

    /* 1. Navbar scroll styling */
    if (nav) {
      const handleScroll = () => {
        nav.classList.toggle('scrolled', window.scrollY > 10);
      };
      window.addEventListener('scroll', handleScroll, { passive: true });
      handleScroll();
    }

    /* 2. Mobile hamburger menu */
    if (toggle && links) {
      toggle.addEventListener('click', (e) => {
        e.stopPropagation();
        const isOpen = links.classList.toggle('open');
        toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
      });
    }

    /* 3. Account Dropdown Menu */
    if (dropdown && dropdownToggle && dropdownMenu) {
      let closeTimeout = null;

      const openMenu = () => {
        if (closeTimeout) clearTimeout(closeTimeout);
        dropdown.classList.add('is-open');
        dropdownToggle.setAttribute('aria-expanded', 'true');
      };

      const closeMenu = () => {
        if (closeTimeout) clearTimeout(closeTimeout);
        dropdown.classList.remove('is-open');
        dropdownToggle.setAttribute('aria-expanded', 'false');
      };

      const toggleMenu = () => {
        if (dropdown.classList.contains('is-open')) {
          closeMenu();
        } else {
          openMenu();
        }
      };

      // Click to toggle
      dropdownToggle.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        toggleMenu();
      });

      // Desktop hover support
      dropdown.addEventListener('mouseenter', () => {
        if (window.innerWidth > 768) {
          openMenu();
        }
      });

      dropdown.addEventListener('mouseleave', () => {
        if (window.innerWidth > 768) {
          closeTimeout = setTimeout(closeMenu, 180);
        }
      });

      // Click outside to close
      document.addEventListener('click', (e) => {
        if (!dropdown.contains(e.target)) {
          closeMenu();
        }
      });

      // Keyboard accessibility (WCAG / a11y)
      dropdown.addEventListener('keydown', (e) => {
        const menuItems = Array.from(dropdownMenu.querySelectorAll('[role="menuitem"]'));
        const currentIndex = menuItems.indexOf(document.activeElement);

        if (e.key === 'Escape') {
          closeMenu();
          dropdownToggle.focus();
        } else if (e.key === 'ArrowDown') {
          e.preventDefault();
          if (!dropdown.classList.contains('is-open')) {
            openMenu();
            menuItems[0]?.focus();
          } else {
            const nextIndex = (currentIndex + 1) % menuItems.length;
            menuItems[nextIndex]?.focus();
          }
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          if (dropdown.classList.contains('is-open')) {
            const prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
            menuItems[prevIndex]?.focus();
          }
        } else if (e.key === 'Tab' && dropdown.classList.contains('is-open')) {
          if (e.shiftKey && document.activeElement === menuItems[0]) {
            closeMenu();
          } else if (!e.shiftKey && document.activeElement === menuItems[menuItems.length - 1]) {
            closeMenu();
          }
        }
      });
    }

    /* 4. Signout Action */
    if (signoutBtn) {
      signoutBtn.addEventListener('click', (e) => {
        e.preventDefault();
        showToast('Signed out successfully. Returning to Home...');
        setTimeout(() => {
          window.location.href = 'index.html';
        }, 1200);
      });
    }
  }

  /* Toast Notification Helper */
  function showToast(message) {
    let toast = document.getElementById('siteToast');
    if (!toast) {
      toast = document.createElement('div');
      toast.id = 'siteToast';
      toast.className = 'site-toast';
      document.body.appendChild(toast);
    }
    toast.innerHTML = `
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--gold-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
        <polyline points="22 4 12 14.01 9 11.01"></polyline>
      </svg>
      <span>${message}</span>
    `;
    toast.classList.add('show');
    setTimeout(() => {
      toast.classList.remove('show');
    }, 3200);
  }

  window.showToast = showToast;

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initNav);
  } else {
    initNav();
  }
})();