/**
 * Mobil menü működés - Elit Hardver weboldal
 *
 * Ez a script felelős a reszponzív navigációs menü működéséért mobil eszközökön.
 * Funkciók:
 * - Hamburger menü megnyitása/bezárása
 * - Dropdown (legördülő) almenük kezelése
 * - Háttér overlay (elsötétítés) kezelése
 * - Görgetés letiltása nyitott menü mellett
 *
 * FONTOS: Ez a script HTML5/CSS3 oktatáshoz nem szükséges, csak a jobb
 * felhasználói élmény érdekében került bele. A HTML és CSS működése ettől függetlenül
 * is megérthető.
 */

// DOMContentLoaded esemény: várjuk meg, amíg a HTML teljesen betöltődik
// Ez biztosítja, hogy minden HTML elem elérhető legyen a script futtatásakor
document.addEventListener('DOMContentLoaded', function() {

  // ========== ELEMEK KIVÁLASZTÁSA ==========
  // querySelector: egyetlen elemet keres CSS szelektor alapján
  // querySelectorAll: több elemet keres és visszaad egy listát

  const menuToggle = document.querySelector('.mobile-menu-toggle');  // Hamburger ikon (☰)
  const mainNav = document.querySelector('.main-nav');                // Fő navigációs menü
  const dropdownToggles = document.querySelectorAll('.has-dropdown'); // Összes dropdown szülő elem

  // ========== OVERLAY (HÁTTÉR ELSÖTÉTÍTÉS) LÉTREHOZÁSA ==========
  // createElement: új HTML elemet hoz létre JavaScriptből
  // Ez a félátlátszó fekete háttér, ami a menü mögött jelenik meg
  const overlay = document.createElement('div');
  overlay.className = 'mobile-menu-overlay';  // CSS osztály hozzáadása
  document.body.appendChild(overlay);         // Hozzáadás a body végéhez

  // ========== BEZÁRÁS GOMB LÉTREHOZÁSA ==========
  // Dinamikusan hozzunk létre egy X gombot a menü jobb felső sarkába
  const closeBtn = document.createElement('button');
  closeBtn.textContent = '×';  // X karakter (Unicode: szorzás jel)
  closeBtn.className = 'mobile-menu-close';
  closeBtn.setAttribute('aria-label', 'Menü bezárása');  // Akadálymentesség (screenreader-eknek)
  mainNav.appendChild(closeBtn);  // Hozzáadás a navigációs menühöz

  // ========== HAMBURGER MENÜ MEGNYITÁSA/BEZÁRÁSA ==========
  if (menuToggle) {
    // addEventListener: eseményfigyelő hozzáadása (itt: kattintás)
    menuToggle.addEventListener('click', function() {
      // toggle: hozzáadja az osztályt ha nincs, eltávolítja ha van
      this.classList.toggle('active');       // Hamburger ikon animáció
      mainNav.classList.toggle('active');    // Menü megjelenítése
      overlay.classList.toggle('active');    // Háttér elsötétítés

      // setAttribute: HTML attribútum beállítása (akadálymentesség)
      this.setAttribute('aria-expanded', this.classList.contains('active'));

      // Body görgetés letiltása nyitott menü esetén
      // Ternary operátor: feltétel ? igaz_eset : hamis_eset
      document.body.style.overflow = this.classList.contains('active') ? 'hidden' : '';
    });
  }

  // ========== MENÜ BEZÁRÁS FUNKCIÓ ==========
  // Ezt a funkciót több helyen is használjuk (bezárás gomb, overlay kattintás, ablak átméretezés)
  function closeMenu() {
    menuToggle.classList.remove('active');   // Hamburger ikon visszaállítás
    mainNav.classList.remove('active');      // Menü elrejtése
    overlay.classList.remove('active');      // Háttér elrejtése
    document.body.style.overflow = '';       // Görgetés engedélyezése újra

    // forEach: végigmegyünk minden dropdown elemen
    dropdownToggles.forEach(function(dropdown) {
      dropdown.classList.remove('active');   // Dropdown bezárása

      // Visszaállítjuk a + jelet minden dropdown gombon
      const btn = dropdown.querySelector('.dropdown-toggle-btn');
      if (btn) btn.innerHTML = '+';
    });
  }

  // ========== BEZÁRÁS GOMB ESEMÉNYKEZELŐ ==========
  if (closeBtn) {
    closeBtn.addEventListener('click', closeMenu);
  }

  // ========== OVERLAY KATTINTÁS ESEMÉNYKEZELŐ ==========
  // Ha a felhasználó a menün kívüli területre (háttérre) kattint, zárjuk be
  overlay.addEventListener('click', closeMenu);

  // ========== DROPDOWN MENÜK MŰKÖDÉSE MOBILON ==========
  // Minden dropdown szülő elemhez hozzáadunk egy + / - gombot
  dropdownToggles.forEach(function(dropdownParent) {
    const dropdownLink = dropdownParent.querySelector('a');  // Az "Alkatrészek" link

    if (dropdownLink) {
      // ========== TOGGLE GOMB LÉTREHOZÁSA ==========
      // Külön gomb a dropdown nyitásához/zárásához
      // Így a link továbbra is navigál, a gomb pedig nyit/zár
      const toggleBtn = document.createElement('button');
      toggleBtn.className = 'dropdown-toggle-btn';
      toggleBtn.setAttribute('aria-label', 'Almenü megnyitása/zárása');
      toggleBtn.innerHTML = '+';  // Kezdetben + jel (bezárt állapot)

      // A linket pozicionáljuk, hogy a gomb absolute pozícióval elhelyezhető legyen
      dropdownLink.style.position = 'relative';
      dropdownLink.appendChild(toggleBtn);  // Gomb hozzáadása a linkhez

      // ========== TOGGLE GOMB KATTINTÁS ESEMÉNY ==========
      toggleBtn.addEventListener('click', function(e) {
        // Csak mobilon (768px alatt) működjön a toggle
        if (window.innerWidth <= 768) {
          e.preventDefault();      // Link navigáció megakadályozása
          e.stopPropagation();     // Esemény buborékolás megállítása (ne kattintson a linkre is)

          // Dropdown ki/be kapcsolása
          dropdownParent.classList.toggle('active');

          // Ikon váltása: + → − vagy − → +
          // contains: megnézi, hogy az elem rendelkezik-e az osztállyal
          toggleBtn.innerHTML = dropdownParent.classList.contains('active') ? '−' : '+';
        }
      });
    }
  });

  // ========== ABLAK ÁTMÉRETEZÉS FIGYELÉSE ==========
  // Ha a felhasználó átméretezi az ablakot (vagy elforgatja a telefont),
  // és desktop nézetre vált, zárjuk be a mobil menüt
  window.addEventListener('resize', function() {
    if (window.innerWidth > 768) {  // 768px feletti szélesség = desktop nézet
      if (menuToggle) menuToggle.classList.remove('active');
      if (mainNav) mainNav.classList.remove('active');
      overlay.classList.remove('active');
      document.body.style.overflow = '';

      // Összes dropdown bezárása
      dropdownToggles.forEach(function(dropdown) {
        dropdown.classList.remove('active');
      });
    }
  });
});