const videoMap = {}; // name => url

function playVideo(button) {
  const charName = button.textContent.trim();
  const videoPath = videoMap[charName]; // Ambil dari map

  if (!videoPath) {
    showNotif(`Video untuk "${charName}" tidak ditemukan`);
    return;
  }

  const wrapper = document.getElementById("videoWrapper");
  wrapper.innerHTML = "";

  const video = document.createElement("video");
  video.src = videoPath;
  video.width = 360;
  video.controls = true;
  video.autoplay = true;
  video.loop = true;
  video.volume = 0.01;
  video.style.marginTop = "20px";
  wrapper.appendChild(video);

  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) {
    video.msRequestFullscreen();
  }
}

function showNotif(message, duration = 3000) {
  const notif = document.createElement("div");
  notif.className = "notif";
  notif.textContent = message;

  document.body.appendChild(notif);
  requestAnimationFrame(() => notif.style.opacity = 1);

  setTimeout(() => {
    notif.style.opacity = 0;
    setTimeout(() => notif.remove(), 500);
  }, duration);
}

function fetchData() {
  const input = document.getElementById("charName").value.trim();
  const charaBtns = document.querySelectorAll(".chara");

  const video = document.getElementById("bgVideo");
  const source = video.querySelector("source");

  if (input === "") {
    const isHidden = charaBtns[0].style.display === "none" || charaBtns[0].style.display === "";
    charaBtns.forEach(btn => {
      btn.style.display = isHidden ? "inline-block" : "none";
    });

    const isSafe = !source.src.includes("Edalia");
    const newVideoURL = isSafe
      ? videoMap["Ark ReCode - Edalia Skill"]
      : "https://video.twimg.com/ext_tw_video/1892164405464629249/pu/vid/avc1/1280x720/cgW9XdNOX1DPI6Rq.mp4";

    source.src = newVideoURL;
    video.load();
    video.play();
  } else {
    showNotif(`Fungsi fetchData untuk karakter "${input}" belum diimplementasikan`);
  }
}

// Ambil daftar karakter dan URL dari server
window.onload = () => {
  fetch("https://gilbertclaus.pythonanywhere.com/list-videos-ark-recode")
    .then(res => res.json())
    .then(data => {
      const container = document.getElementById("charButtons");

      // Simpan ke videoMap
      Object.entries(data).forEach(([name, url]) => {
        videoMap[name] = url;
      });

      // Urutkan nama-nama berdasarkan key
      const sortedNames = Object.keys(videoMap).sort((a, b) => a.localeCompare(b));
      sortedNames.forEach(name => {
        if (!name.includes("Skill") && !name.includes("Sex")) {
          const btn = document.createElement("button");
          btn.textContent = name.split("-").pop();
          btn.className = "chara";
          btn.onclick = function () {
            playVideo(this);
          };
          container.appendChild(btn);
        }
      });      
    })
    .catch(err => {
      showNotif("Gagal ambil daftar karakter dari server");
    });
};