// Ganti domain kamu di sini:
const baseURL = "https://gilbertclaus.pythonanywhere.com";

function playVideo(button) {
  const charName = button.textContent.trim();
  const videoPath = `${baseURL}/video/${encodeURIComponent("Ark ReCode")}/${encodeURIComponent(charName)}.mp4`;

    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);
    
    // Minta fullscreen setelah video ditambahkan ke halaman
    // video.addEventListener("loadedmetadata", () => {
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.webkitRequestFullscreen) { // Safari
      video.webkitRequestFullscreen();
    } else if (video.msRequestFullscreen) { // IE11
      video.msRequestFullscreen();
    }
    // });
}

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

  document.body.appendChild(notif);

  // Trigger fade-in
  requestAnimationFrame(() => {
      notif.style.opacity = 1;
  });

  // Auto-hide
  setTimeout(() => {
      notif.style.opacity = 0;
      setTimeout(() => {
          notif.remove();
      }, 500); // Tunggu animasi selesai
  }, duration);
}

function fetchData() {
    // Ambil elemen tombol karakter
    const input = document.getElementById("charName").value.trim();
    const charaBtns = document.querySelectorAll(".chara");

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

    if (input === "") {
        // Ambil status tombol pertama sebagai acuan
        const isHidden = charaBtns[0].style.display === "none" || charaBtns[0].style.display === "";

        // Toggle semua tombol
        charaBtns.forEach(btn => {
            btn.style.display = isHidden ? "inline-block" : "none";
        });

        // Cek apakah sedang bukan video Edalia
        const isSafe = !source.src.includes("Edalia");

        // Pilih URL video berdasarkan status tombol
        const newVideoURL = isSafe
            ? `${baseURL}/video/${encodeURIComponent("Ark ReCode - Edalia Skill")}.mp4`
            : `https://video.twimg.com/ext_tw_video/1892164405464629249/pu/vid/avc1/1280x720/cgW9XdNOX1DPI6Rq.mp4`;

        // Set dan muat ulang video
        source.src = newVideoURL;
        video.load();
        video.play();

    } else {
        showNotif(`Fungsi fetchData untuk karakter "${input}" belum diimplementasikan`);
    }
}

// Ambil daftar karakter dari server
window.onload = () => {
  fetch(`${baseURL}/list-videos`)
    .then(res => res.json())
    .then(data => {
      const container = document.getElementById("charButtons");

      // Urutkan nama-nama video secara alfabet
      const sortedNames = data.videos.sort((a, b) => a.localeCompare(b));

      sortedNames.forEach(name => {
        const btn = document.createElement("button");
        btn.textContent = name;
        btn.className = "chara";
        btn.onclick = function () {
          playVideo(this);
        };
        container.appendChild(btn);
      });
    })
    .catch(err => {
      showNotif("Gagal ambil daftar karakter dari server");
    });
};