document.addEventListener("DOMContentLoaded", () => {
  // Gestion des clics sur les vidéos
  const videoCards = document.querySelectorAll(".video-card");

  for (const videoCard of videoCards) {
    videoCard.addEventListener("click", function () {
      const videoId = this.dataset.videoId;
      if (videoId) {
        window.location.href = `video.php?id=${videoId}`;
      }
    });
  }
  // Gestion du bouton "Voir plus"
  const viewMoreBtn = document.querySelector(".view-more");
  if (viewMoreBtn) {
    viewMoreBtn.addEventListener("click", function () {
      const page = Number.parseInt(this.dataset.page);
      const categoryId =
        document.querySelector(".video-section").dataset.categoryId;

      // Changer le texte du bouton pendant le chargement
      this.textContent = "Chargement...";
      this.disabled = true;

      // Préparer les données avec token CSRF
      const formData = new FormData();
      formData.append('csrf_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
      
      // Faire la requête AJAX
      fetch(
        `ajax/load-more-videos.php?type=category&page=${page}&category=${categoryId}`,
        {
          method: 'POST',
          headers: {
            "X-Requested-With": "XMLHttpRequest",
          },
          body: formData
        }
      )
        .then((response) => response.json())
        .then((data) => {
          if (data.success) {
            // Ajouter les nouvelles vidéos à la grille
            const videoGrid = document.querySelector(".video-grid");
            const tempDiv = document.createElement("div");
            tempDiv.innerHTML = data.html;

            // Ajouter chaque vidéo à la grille
            while (tempDiv.firstChild) {
              videoGrid.appendChild(tempDiv.firstChild);
            }

            // Mettre à jour le numéro de page
            this.dataset.page = data.page + 1;

            // Réinitialiser le texte du bouton
            this.textContent = "Voir plus";
            this.disabled = false;

            // Si plus de vidéos à charger, masquer le bouton
            if (!data.hasMore) {
              this.style.display = "none";
            }

            // Initialiser les clics sur les nouvelles vidéos
            const cards = document.querySelectorAll(".video-card:not([data-click-initialized])")

            for (const card of cards) {
              card.setAttribute("data-click-initialized", "true");
              card.addEventListener("click", function () {
                const videoId = this.dataset.videoId;
                if (videoId) {
                  window.location.href = `video.php?id=${videoId}`;
                }
              });

            }
          } else {
            // Gérer l'erreur
            this.textContent = "Erreur lors du chargement";
            setTimeout(() => {
              this.textContent = "Voir plus";
              this.disabled = false;
            }, 2000);
          }
        })
        .catch((error) => {
          console.error("Erreur:", error);
          this.textContent = "Erreur lors du chargement";
          setTimeout(() => {
            this.textContent = "Voir plus";
            this.disabled = false;
          }, 2000);
        });
    });
  }
});