// 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.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 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("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 {
        const name = document.getElementById("charName").value;
        alert(`Fungsi fetchData untuk karakter "${name}" belum diimplementasikan`);
    }
}

// Ambil daftar karakter dari server
window.onload = () => {
  fetch(`${baseURL}/list-videos`)
    .then(res => res.json())
    .then(data => {
      const container = document.getElementById("charButtons");
      data.videos.forEach(name => {
        const btn = document.createElement("button");
        btn.textContent = name;
        btn.className = "chara";
        btn.onclick = () => playVideo(name);
        container.appendChild(btn);
      });
    });
};