/* ========== NAVIGATION CONSTANTS ========== */
const hamburger = document.getElementById("hamburger");
const sidebar = document.getElementById("sidebar");
const overlay = document.getElementById("overlay");
const nestedPanel = document.getElementById("nestedPanel");
const hamburgerIcon = hamburger.querySelector("i");

/* ========== STATE MANAGEMENT ========== */
let nestedMenuHistory = [];
let isMenuOpen = false;

/* ========== EVENT LISTENERS ========== */
hamburger.addEventListener("click", toggleMenu);
overlay.addEventListener("click", closeAllMenus);

/* ========== KEYBOARD SUPPORT ========== */
document.addEventListener("keydown", handleKeyboardNavigation);

/* ========== MENU FUNCTIONS ========== */
function toggleMenu() {
  isMenuOpen = !isMenuOpen;
  sidebar.classList.toggle("active");
  overlay.classList.toggle("active");
  hamburger.setAttribute("aria-expanded", isMenuOpen);
  // hamburgerIcon.classList.toggle("fa-bars-staggered");
  // hamburgerIcon.classList.toggle("fa-xmark");
  hamburgerIcon.classList.toggle("ri-menu-4-line");
  hamburgerIcon.classList.toggle("ri-close-line");
}

function openNestedMenu(event, menuId) {
  event.preventDefault();
  event.stopPropagation();

  // Hide all nested menus
  clearAllNestedMenus();

  // Show selected menu
  const selectedMenu = document.getElementById(menuId + "Menu");
  if (selectedMenu) {
    selectedMenu.style.display = "block";
  }

  // Track history for back navigation
  nestedMenuHistory.push(menuId);

  // Open nested panel
  nestedPanel.classList.add("active");
}

function closeNestedMenu() {
  nestedMenuHistory.pop();

  if (nestedMenuHistory.length === 0) {
    nestedPanel.classList.remove("active");
    clearAllNestedMenus();
  } else {
    const previousMenu = nestedMenuHistory[nestedMenuHistory.length - 1];
    clearAllNestedMenus();
    const previousMenuElement = document.getElementById(previousMenu + "Menu");
    if (previousMenuElement) {
      previousMenuElement.style.display = "block";
    }
  }
}

function closeAllMenus() {
  sidebar.classList.remove("active");
  overlay.classList.remove("active");
  nestedPanel.classList.remove("active");
  hamburger.setAttribute("aria-expanded", "false");
  nestedMenuHistory = [];
  isMenuOpen = false;
  clearAllNestedMenus();
}

function clearAllNestedMenus() {
  const menuIds = [
    "whoWeAreMenu",
    "whatWeDoMenu",
    "contactUsMenu",
    "leadershipMenu",
  ];
  menuIds.forEach((id) => {
    const element = document.getElementById(id);
    if (element) {
      element.style.display = "none";
    }
  });
}

/* ========== KEYBOARD NAVIGATION ========== */
function handleKeyboardNavigation(event) {
  if (event.key === "Escape") {
    closeAllMenus();
  }
}

/* ========== CLOSE MENU ON ITEM CLICK ========== */
const additionalMenuItems = document.querySelectorAll(
  ".additional-menu .submenu li"
);
additionalMenuItems.forEach((item) => {
  item.addEventListener("click", closeAllMenus);
});

/* ========== KEYBOARD ACCESSIBLE MENU ITEMS ========== */
const menuItems = document.querySelectorAll('[role="button"]');
menuItems.forEach((item) => {
  item.addEventListener("keydown", (e) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      item.click();
    }
  });
});

/* ========== BANNER SLIDER FUNCTIONALITY ========== */
let currentSlide = 0;
const sliderTrack = document.getElementById("sliderTrack");
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");
const sliderIndicators = document.getElementById("sliderIndicators");

// Only proceed with slider if it exists on this page
let totalSlides = 0;
const sliderItems = sliderTrack
  ? sliderTrack.querySelectorAll(".slider-item")
  : [];
if (sliderTrack) {
  totalSlides = sliderItems.length;
}

// Initialize slider indicators
function initializeIndicators() {
  sliderIndicators.innerHTML = "";
  for (let i = 0; i < totalSlides; i++) {
    const dot = document.createElement("button");
    dot.classList.add("slider-dot");
    if (i === 0) dot.classList.add("active");
    dot.setAttribute("aria-label", `Go to slide ${i + 1}`);
    dot.addEventListener("click", () => goToSlide(i));
    sliderIndicators.appendChild(dot);
  }
}

// Update slider position
function updateSliderPosition() {
  sliderTrack.style.transform = `translateX(-${currentSlide * 100}%)`;
  updateIndicators();
}

// Update active indicator
function updateIndicators() {
  const dots = document.querySelectorAll(".slider-dot");
  dots.forEach((dot, index) => {
    if (index === currentSlide) {
      dot.classList.add("active");
    } else {
      dot.classList.remove("active");
    }
  });
}

// Go to specific slide
function goToSlide(index) {
  currentSlide = (index + totalSlides) % totalSlides;
  updateSliderPosition();
}

// Previous slide
function prevSlide() {
  currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
  updateSliderPosition();
}

// Next slide
function nextSlide() {
  currentSlide = (currentSlide + 1) % totalSlides;
  updateSliderPosition();
}

// Event listeners for arrow buttons
prevBtn.addEventListener("click", prevSlide);
nextBtn.addEventListener("click", nextSlide);

// Keyboard navigation for slider
document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowLeft") prevSlide();
  if (e.key === "ArrowRight") nextSlide();
});

// Initialize slider
initializeIndicators();
updateSliderPosition();

// Auto-advance slider every 5 seconds (optional)
let autoSlideInterval = setInterval(nextSlide, 3000);

// Pause auto-slide on hover
const bannerSlider = document.querySelector(".banner-slider");
bannerSlider.addEventListener("mouseenter", () => {
  clearInterval(autoSlideInterval);
});

// Resume auto-slide when mouse leaves
bannerSlider.addEventListener("mouseleave", () => {
  autoSlideInterval = setInterval(nextSlide, 5000);
});

let headerEl = document.querySelector("header");

window.addEventListener("scroll", () => {
  if (!headerEl) return;

  const scrollPosition = window.scrollY || document.documentElement.scrollTop;

  if (scrollPosition >= 80) {
    if (!headerEl.classList.contains("header-bg-shadow")) {
      headerEl.classList.add("header-bg-shadow");
    }
  } else {
    if (headerEl.classList.contains("header-bg-shadow")) {
      headerEl.classList.remove("header-bg-shadow");
    }
  }
});

// ------------------------------
// showcase
/* ========== PHILOSOPHY SECTION TAB SWITCHING ========== */
function switchPhilosophyTab(tabName) {
  // Hide all philosophy items
  const allItems = document.querySelectorAll(".category-item");
  allItems.forEach((item) => {
    item.classList.remove("active");
  });

  // Remove active class from all tabs
  const allTabs = document.querySelectorAll(".category-tab");
  allTabs.forEach((tab) => {
    tab.classList.remove("active");
  });

  // Show selected item
  const selectedItem = document.querySelector(`[data-content="${tabName}"]`);
  if (selectedItem) {
    selectedItem.classList.add("active");
  }

  // Add active class to clicked tab
  const selectedTab = document.querySelector(`[data-tab="${tabName}"]`);
  if (selectedTab) {
    selectedTab.classList.add("active");
  }
}

// Add keyboard navigation for tabs
const philosophyTabs = document.querySelectorAll(".category-tab");
philosophyTabs.forEach((tab, index) => {
  tab.addEventListener("keydown", (e) => {
    if (e.key === "ArrowLeft") {
      const prevIndex =
        (index - 1 + philosophyTabs.length) % philosophyTabs.length;
      philosophyTabs[prevIndex].click();
      philosophyTabs[prevIndex].focus();
    } else if (e.key === "ArrowRight") {
      const nextIndex = (index + 1) % philosophyTabs.length;
      philosophyTabs[nextIndex].click();
      philosophyTabs[nextIndex].focus();
    }
  });
});
