/**
 * Keresési funkció az alkatreszek.html oldalhoz
 *
 * Ez a script valós idejű keresést biztosít az alkatrészek oldalon. Gépelés közben
 * szűri a kártyákat (CPU, GPU, RAM, stb.) a keresési kifejezés alapján.
 *
 * Funkciók:
 * - Valós idejű keresés (gépelés közben)
 * - Szűrés cím és leírás alapján
 * - "Nincs találat" üzenet megjelenítése
 * - Case-insensitive keresés (kis/nagybetű nem számít)
 *
 * 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 <input type="search">
 * elem önmagában is megérthető.
 */

// ========== ELEMEK KIVÁLASZTÁSA ==========
// A keresési form (form elem role="search" attribútummal)
const searchForm = document.querySelector('form[role="search"]');

// A keresési beviteli mező
const searchInput = document.getElementById('search-input');

// Összes alkatrész kártya (CPU, GPU, RAM, stb.)
// querySelectorAll: több elem kiválasztása, eredmény = NodeList (tömb-szerű)
const cards = document.querySelectorAll('.grid.three-cols .card');

// ========== FORM BEKÜLDÉS ESEMÉNY ==========
// Ha a felhasználó ENTER-t üt (form submit), ne töltse újra az oldalt
searchForm.addEventListener('submit', function(e) {
  // preventDefault: alapértelmezett működés megakadályozása
  // Form submit alapértelmezetten újratölti az oldalt - ezt akadályozzuk meg
  e.preventDefault();
  performSearch();  // Keresés végrehajtása
});

// ========== VALÓS IDEJŰ KERESÉS ==========
// Gépelés közben (input esemény) azonnal szűrjük a kártyákat
searchInput.addEventListener('input', function() {
  performSearch();
});

// ========== KERESÉS VÉGREHAJTÁSA ==========
// Ez a függvény végzi el a tényleges szűrést
function performSearch() {
  // ========== KERESÉSI KIFEJEZÉS ELŐKÉSZÍTÉSE ==========
  // toLowerCase(): kisbetűssé alakítás (case-insensitive kereséshez)
  // trim(): szóközök levágása a szöveg elejéről és végéről
  const searchTerm = searchInput.value.toLowerCase().trim();

  // ========== KÁRTYÁK SZŰRÉSE ==========
  // forEach: végigmegyünk minden kártyán
  cards.forEach(card => {
    // Kártya címének és leírásának lekérése
    // textContent: elem szöveges tartalma (HTML tagek nélkül)
    const title = card.querySelector('h3').textContent.toLowerCase();
    const description = card.querySelector('p').textContent.toLowerCase();

    // ========== TALÁLAT ELLENŐRZÉSE ==========
    // includes(): megnézi, hogy egy szöveg tartalmaz-e egy részsztringet
    // Ha üres a keresés VAGY a cím/leírás tartalmazza a keresési kifejezést
    if (searchTerm === '' || title.includes(searchTerm) || description.includes(searchTerm)) {
      // Kártya megjelenítése (style.display üres = alapértelmezett CSS)
      card.style.display = '';
    } else {
      // Kártya elrejtése
      card.style.display = 'none';
    }
  });

  // ========== TALÁLATOK SZÁMLÁLÁSA ==========
  // Array.from(): NodeList → valódi tömbé alakítás
  // filter(): szűrés - csak a látható kártyák maradnak
  const visibleCards = Array.from(cards).filter(card => card.style.display !== 'none');

  // ========== "NINCS TALÁLAT" ÜZENET KEZELÉSE ==========
  // getElementById: elem lekérése id alapján
  let noResultsMsg = document.getElementById('no-results-message');

  // Ha nincs találat ÉS van keresési kifejezés
  if (visibleCards.length === 0 && searchTerm !== '') {
    // Ha az üzenet még nem létezik, hozzuk létre
    if (!noResultsMsg) {
      // createElement: új HTML elem létrehozása JavaScriptből
      noResultsMsg = document.createElement('p');
      noResultsMsg.id = 'no-results-message';  // Egyedi azonosító

      // Inline stílusok beállítása
      noResultsMsg.style.textAlign = 'center';
      noResultsMsg.style.padding = '2rem';
      noResultsMsg.style.fontSize = '1.2rem';
      noResultsMsg.style.color = '#666';

      // insertAdjacentElement: elem beszúrása egy másik elem után
      // 'afterend': a grid után (testvérelem)
      document.querySelector('.grid.three-cols').insertAdjacentElement('afterend', noResultsMsg);
    }

    // Template string: szöveg változóval
    noResultsMsg.textContent = `Nincs találat a következőre: "${searchInput.value}"`;
    noResultsMsg.style.display = 'block';  // Megjelenítés
  } else if (noResultsMsg) {
    // Ha van találat, rejtsd el az üzenetet
    noResultsMsg.style.display = 'none';
  }
}
