// Dynamic Menu Loader for Sky Art Shop
// Include this in all public pages to load menu from database

(function () {
  "use strict";

  // Load and render navigation menu from API
  async function loadNavigationMenu() {
    try {
      const response = await fetch("/api/menu");
      const data = await response.json();

      if (data.success && data.items && data.items.length > 0) {
        renderDesktopMenu(data.items);
        renderMobileMenu(data.items);
      }
    } catch (error) {
      console.error("Failed to load menu:", error);
      // Keep existing hardcoded menu as fallback
    }
  }

  function renderDesktopMenu(items) {
    const desktopMenuList = document.querySelector(".nav-menu-list");
    if (!desktopMenuList) return;

    desktopMenuList.innerHTML = items
      .map(
        (item) => `
      <li class="nav-item">
        <a href="${item.url}" class="nav-link">
          ${item.icon ? `<i class="bi ${item.icon}"></i> ` : ""}${item.label}
        </a>
      </li>
    `
      )
      .join("");

    // Set active state based on current page
    const currentPath = window.location.pathname;
    document.querySelectorAll(".nav-link").forEach((link) => {
      if (link.getAttribute("href") === currentPath) {
        link.classList.add("active");
      }
    });
  }

  function renderMobileMenu(items) {
    const mobileMenuList = document.querySelector(".mobile-menu-list");
    if (!mobileMenuList) return;

    mobileMenuList.innerHTML = items
      .map(
        (item) => `
      <li>
        <a href="${item.url}" class="mobile-link">
          ${item.icon ? `<i class="bi ${item.icon}"></i> ` : ""}${item.label}
        </a>
      </li>
    `
      )
      .join("");

    // Set active state for mobile menu
    const currentPath = window.location.pathname;
    document.querySelectorAll(".mobile-link").forEach((link) => {
      if (link.getAttribute("href") === currentPath) {
        link.classList.add("active");
      }
    });
  }

  // Load menu when DOM is ready
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", loadNavigationMenu);
  } else {
    loadNavigationMenu();
  }
})();