/**
 * Lightbox (képnagyító) funkció
 *
 * Ez a script felelős a képek nagyítása (lightbox) funkcióért a háttértár oldalon.
 * Kép kattintásra teljes képernyős nézetben mutatja meg, navigálás előző/következő
 * képek között, és billentyűzet támogatás.
 *
 * Funkciók:
 * - Képre kattintva teljes képernyős nézet
 * - Előző/következő kép navigáció (gombok és billentyűzet)
 * - Bezárás X gombbal, ESC billentyűvel vagy háttérre kattintással
 * - Smooth fade animáció képváltásnál
 *
 * 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.
 *
 * OSZTÁLY (CLASS) HASZNÁLATA:
 * Ez a kód JavaScript osztályt használ (class), ami egy modern módja annak, hogy
 * kapcsolódó adatokat és funkciókat együtt tartsunk. Az osztály mint egy "terv"
 * (blueprint), amiből példányokat (objects) készíthetünk.
 */

// ========== LIGHTBOX OSZTÁLY DEFINÍCIÓ ==========
// class: modern JavaScript objektum-orientált programozás
class Lightbox {
  // ========== KONSTRUKTOR (ÉPÍTŐ FÜGGVÉNY) ==========
  // A constructor automatikusan fut le, amikor új példányt hozunk létre
  // new Lightbox() hívásnál ez fut le először
  constructor() {
    this.currentIndex = 0;        // Jelenleg megjelenített kép indexe (0-tól indul)
    this.images = [];             // Összes kép adatainak tárolása (tömb)
    this.lightboxElement = null;  // Lightbox HTML elem referenciája
    this.init();                  // Inicializálás indítása
  }

  // ========== INICIALIZÁLÁS ==========
  // Ez a függvény beállítja a lightbox-ot: HTML létrehozás, képek gyűjtése, események
  init() {
    this.createLightboxHTML();   // Lightbox HTML struktúra létrehozása
    this.collectImages();        // Képek összegyűjtése az oldalról
    this.addEventListeners();    // Eseménykezelők (kattintás, billentyűzet) hozzáadása
  }

  // ========== LIGHTBOX HTML LÉTREHOZÁSA ==========
  // Dinamikusan hozzunk létre HTML struktúrát JavaScriptből
  createLightboxHTML() {
    // Template string (backtick `): többsoros szöveg változókkal
    const lightboxHTML = `
      <div id="imageLightbox" class="lightbox">
        <div class="lightbox-content">
          <button class="lightbox-close">&times;</button>
          <button class="lightbox-nav lightbox-prev">&#10094;</button>
          <button class="lightbox-nav lightbox-next">&#10095;</button>
          <img id="lightboxImage" src="" alt="">
          <div id="lightboxCaption" class="lightbox-caption"></div>
        </div>
      </div>
    `;

    // insertAdjacentHTML: HTML beszúrása a body végére
    document.body.insertAdjacentHTML('beforeend', lightboxHTML);

    // Lightbox elem referenciájának mentése későbbi használathoz
    this.lightboxElement = document.getElementById('imageLightbox');
  }

  // ========== KÉPEK ÖSSZEGYŰJTÉSE AZ OLDALRÓL ==========
  // Megkeresi az összes nagyítható képet és tárolja őket
  collectImages() {
    // Interface-item képek (SATA, NVMe, stb.)
    const interfaceImages = document.querySelectorAll('.interface-item-image img');

    // M.2 összehasonlító kép
    const m2ComparisonImage = document.querySelector('.m2-comparison-flex img');

    // Spread operátor (...): tömb elemeinek szétbontása
    // Array másolatot készítünk az interfaceImages NodeList-ből
    const allImages = [...interfaceImages];

    // Ha létezik M.2 kép, adjuk hozzá a tömbhöz
    if (m2ComparisonImage) {
      allImages.push(m2ComparisonImage);
    }

    // map(): tömb minden elemén végigmegy és átalakítja
    // Létrehozunk egy új tömböt objektumokkal (src, alt tulajdonságokkal)
    this.images = Array.from(allImages).map(img => ({
      src: img.src,   // Kép URL-je
      alt: img.alt    // Kép alternatív szövege (képaláíráshoz)
    }));

    // Kattintható osztály hozzáadása (CSS cursor pointer stílus)
    allImages.forEach(img => {
      img.classList.add('clickable-image');
    });
  }

  // ========== ESEMÉNYKEZELŐK HOZZÁADÁSA ==========
  // Kattintások, billentyűzet, navigáció kezelése
  addEventListeners() {
    // ========== KÉP KATTINTÁS ESEMÉNYEK ==========
    // Minden interface-item képre eseménykezelő
    document.querySelectorAll('.interface-item-image img').forEach((img, index) => {
      // Arrow function: () => automatikusan megőrzi a 'this' értéket
      img.addEventListener('click', () => this.openLightbox(index));
    });

    // M.2 összehasonlító kép kattintás
    const m2ComparisonImage = document.querySelector('.m2-comparison-flex img');
    if (m2ComparisonImage) {
      // Az M.2 kép indexe az interface képek után következik
      const m2Index = document.querySelectorAll('.interface-item-image img').length;
      m2ComparisonImage.addEventListener('click', () => this.openLightbox(m2Index));
    }

    // ========== BEZÁRÁS GOMB ==========
    document.querySelector('.lightbox-close').addEventListener('click', () => this.closeLightbox());

    // ========== NAVIGÁCIÓS GOMBOK ==========
    document.querySelector('.lightbox-prev').addEventListener('click', () => this.prevImage());
    document.querySelector('.lightbox-next').addEventListener('click', () => this.nextImage());

    // ========== HÁTTÉRRE KATTINTÁS BEZÁRÁS ==========
    this.lightboxElement.addEventListener('click', (e) => {
      // e.target: az elem, amire konkrétan kattintottak
      // Ha a lightbox háttérre kattintottak (nem a képre), zárjuk be
      if (e.target === this.lightboxElement) {
        this.closeLightbox();
      }
    });

    // ========== BILLENTYŰZET NAVIGÁCIÓ ==========
    document.addEventListener('keydown', (e) => {
      // Ha a lightbox nincs megjelenítve, ne tegyünk semmit
      if (!this.lightboxElement.style.display || this.lightboxElement.style.display === 'none') return;

      // switch: több feltétel kezelése (mint sok if-else)
      switch(e.key) {
        case 'Escape':      // ESC billentyű - bezárás
          this.closeLightbox();
          break;
        case 'ArrowLeft':   // Bal nyíl - előző kép
          this.prevImage();
          break;
        case 'ArrowRight':  // Jobb nyíl - következő kép
          this.nextImage();
          break;
      }
    });
  }

  // ========== LIGHTBOX MEGNYITÁSA ==========
  // index: melyik képet jelenítse meg
  openLightbox(index) {
    this.currentIndex = index;
    const image = this.images[index];

    // Kép és képaláírás beállítása
    document.getElementById('lightboxImage').src = image.src;
    document.getElementById('lightboxCaption').textContent = image.alt;

    // Lightbox megjelenítése
    this.lightboxElement.style.display = 'block';

    // Oldal görgetésének letiltása (háttér ne görgessen)
    document.body.style.overflow = 'hidden';

    // Navigációs gombok frissítése (ha csak 1 kép van, ne mutassa őket)
    this.updateNavigationButtons();
  }

  // ========== LIGHTBOX BEZÁRÁSA ==========
  closeLightbox() {
    this.lightboxElement.style.display = 'none';
    document.body.style.overflow = 'auto'; // Görgetés újra engedélyezése
  }

  // ========== ELŐZŐ KÉP ==========
  prevImage() {
    if (this.currentIndex > 0) {
      // Ha nem az első képnél vagyunk, lépjünk egyet vissza
      this.currentIndex--;
    } else {
      // Ha az elsőnél vagyunk, ugorjunk az utolsóra (körkörös navigáció)
      this.currentIndex = this.images.length - 1;
    }
    this.updateImage();  // Kép frissítése
  }

  // ========== KÖVETKEZŐ KÉP ==========
  nextImage() {
    if (this.currentIndex < this.images.length - 1) {
      // Ha nem az utolsó képnél vagyunk, lépjünk egyet előre
      this.currentIndex++;
    } else {
      // Ha az utolsónál vagyunk, ugorjunk az elsőre (körkörös navigáció)
      this.currentIndex = 0;
    }
    this.updateImage();  // Kép frissítése
  }

  // ========== KÉP FRISSÍTÉSE ANIMÁCIÓVAL ==========
  updateImage() {
    const image = this.images[this.currentIndex];
    const imgElement = document.getElementById('lightboxImage');

    // ========== FADE OUT ANIMÁCIÓ ==========
    // Kép átlátszóvá tétele (opacity: 1 → 0)
    imgElement.style.opacity = '0';

    // setTimeout: kódrészlet futtatása késleltetéssel (ms-ban)
    setTimeout(() => {
      // 200ms után cseréljük ki a képet (amikor már átlátszó)
      imgElement.src = image.src;
      document.getElementById('lightboxCaption').textContent = image.alt;

      // ========== FADE IN ANIMÁCIÓ ==========
      // Kép láthatóvá tétele (opacity: 0 → 1)
      imgElement.style.opacity = '1';
    }, 200);

    this.updateNavigationButtons();
  }

  // ========== NAVIGÁCIÓS GOMBOK FRISSÍTÉSE ==========
  // Ha csak 1 kép van, ne mutassuk a nyilakat
  updateNavigationButtons() {
    const prevBtn = document.querySelector('.lightbox-prev');
    const nextBtn = document.querySelector('.lightbox-next');

    if (this.images.length <= 1) {
      // Egyetlen kép esetén rejtsd el a navigációt
      prevBtn.style.display = 'none';
      nextBtn.style.display = 'none';
    } else {
      // Több kép esetén mutasd a navigációt
      prevBtn.style.display = 'flex';
      nextBtn.style.display = 'flex';
    }
  }
}

// ========== LIGHTBOX INICIALIZÁLÁSA ==========
// Várjuk meg, amíg a DOM betöltődik, majd hozzunk létre egy Lightbox példányt
document.addEventListener('DOMContentLoaded', () => {
  // new Lightbox(): új példány létrehozása az osztályból
  // Ez automatikusan meghívja a constructor()-t és az init()-et
  new Lightbox();
});
