document.addEventListener("DOMContentLoaded", () => {
  const panels = document.querySelectorAll(".panel-content");
  const menuIcon = document.getElementById("menu-icon");
  const mobileMenu = document.getElementById("mobile-menu");
  const topnavLinks = document.querySelector(".topnav-links").innerHTML;
  const modeIconImg = document.getElementById("mode-icon-img");

  function isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    );
  }

  panels.forEach((panel) => {
    const media = panel.getAttribute("data-media");
    const stillImage = media.replace(".gif", ".jpg"); 

    const imgElement = document.createElement("img");
    imgElement.src = stillImage;
    imgElement.style.maxWidth = "100%";
    imgElement.style.maxHeight = "100%";
    panel.appendChild(imgElement);

    if (!isMobile()) {
      panel.addEventListener("mouseenter", () => {
        imgElement.src = media;
      });

      panel.addEventListener("mouseleave", () => {
        imgElement.src = stillImage;
      });
    }

    // Event listener for click
    panel.addEventListener("click", () => {
      if (imgElement.src.includes(".jpg")) {
        imgElement.src = media;
      } else {
        imgElement.src = stillImage;
      }
    });
  });

  const backgroundMusic = document.getElementById("background-music");
  const unmuteIconImg = document.getElementById("unmute-icon-img");
  const muteIconImg = document.getElementById("mute-icon-img");

  backgroundMusic.muted = true;
  muteIconImg.style.display = "block"; 
  unmuteIconImg.style.display = "none"; 

  const songList = [
    "/media/audio/background_music1.mp3",
    "/media/audio/background_music2.mp3",
    "/media/audio/background_music3.mp3",
    "/media/audio/background_music4.mp3",
  ];
  let currentSongIndex = 0;

  function playSong(index) {
    backgroundMusic.src = songList[index];
    backgroundMusic.play();
  }

  window.toggleMusic = () => {
    if (backgroundMusic.muted) {
      backgroundMusic.muted = false;
      currentSongIndex = Math.floor(Math.random() * songList.length);
      playSong(currentSongIndex);
      muteIconImg.style.display = "none"; 
      unmuteIconImg.style.display = "block"; 
    } else {
      backgroundMusic.muted = true;
      backgroundMusic.pause();
      muteIconImg.style.display = "block"; 
      unmuteIconImg.style.display = "none"; 
    }
  };

  menuIcon.addEventListener("click", () => {
    if (
      mobileMenu.style.display === "none" ||
      mobileMenu.style.display === ""
    ) {
      mobileMenu.style.display = "flex";
      mobileMenu.innerHTML = topnavLinks;
    } else {
      mobileMenu.style.display = "none";
    }
  });

  window.toggleMode = () => {
    document.body.classList.toggle("dark-mode");
    document.querySelector(".topnav").classList.toggle("dark-mode");
    document.querySelectorAll(".topnav-links a").forEach((link) => {
      link.classList.toggle("dark-mode");
    });
    document.querySelectorAll(".panel").forEach((panel) => {
      panel.classList.toggle("dark-mode");
    });
    document
      .querySelectorAll(".panel-text-top, .panel-text-bottom")
      .forEach((text) => {
        text.classList.toggle("dark-mode");
      });
    document
      .querySelectorAll(".comic-details, .comic-title")
      .forEach((text) => {
        text.classList.toggle("dark-mode");
      });
    document.querySelector(".logo-text").classList.toggle("dark-mode");

    document.querySelector(".action-bar").classList.toggle("dark-mode");
    document.querySelectorAll(".action-bar img").forEach((icon) => {
      icon.classList.toggle("dark-mode");
    });

    mobileMenu.classList.toggle("dark-mode");

    if (document.body.classList.contains("dark-mode")) {
      modeIconImg.src = "/media/icons/dark-mode-icon.png";
      unmuteIconImg.src = "/media/icons/dark-unmute-icon.png";
      muteIconImg.src = "/media/icons/dark-mute-icon.png";
      document.getElementById("backward-icon-img").src =
        "/media/icons/dark-backward-icon.png";
      document.getElementById("forward-icon-img").src =
        "/media/icons/dark-forward-icon.png";
      menuIcon.querySelector("img").src = "/media/icons/dark-menu-icon.png"; 
    } else {
      modeIconImg.src = "/media/icons/light-mode-icon.png";
      unmuteIconImg.src = "/media/icons/unmute-icon.png";
      muteIconImg.src = "/media/icons/mute-icon.png";
      document.getElementById("backward-icon-img").src =
        "/media/icons/backward-icon.png";
      document.getElementById("forward-icon-img").src =
        "/media/icons/forward-icon.png";
      menuIcon.querySelector("img").src = "/media/icons/menu-icon.png"; 
    }
  };

  window.playNextSong = () => {
    currentSongIndex = (currentSongIndex + 1) % songList.length;
    playSong(currentSongIndex);
  };

  window.playPreviousSong = () => {
    currentSongIndex =
      (currentSongIndex - 1 + songList.length) % songList.length;
    playSong(currentSongIndex);
  };

  playSong(currentSongIndex);
});