document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("outputVideo").classList.add("hidden");
    document.getElementById("downloadBtn").style.visibility = "hidden";
});
document.getElementById('upload').addEventListener('change', async function(event) {
    event.preventDefault();
    const loader = document.getElementById("loader");
    const outputVideo = document.getElementById("outputVideo");
    const downloadBtn = document.getElementById("downloadBtn");
    let file = event.target.files[0];
    if (file) {
        let formData = new FormData();
        formData.append("file", file);
        loader.classList.remove("hidden");
        outputVideo.classList.add("hidden");
        document.getElementById("downloadBtn").style.visibility = "hidden";
        let response = await fetch('/upload/', { method: 'POST', body: formData });
        let result = await response.json();
        let user_id = result.user_id;  
        while (true) {
            let checkResponse = await fetch(`/check_video/${user_id}`);
            let checkResult = await checkResponse.json();
            if (checkResult.ready) break;
            await new Promise(resolve => setTimeout(resolve, 10000)); // Wait 10s before checking again
        }
        loader.classList.add("hidden");
        let videoUrl = `/video/${user_id}?t=${new Date().getTime()}`;
        outputVideo.src = videoUrl;
        outputVideo.load();
        outputVideo.play();
        outputVideo.setAttribute("crossOrigin", "anonymous");
        outputVideo.classList.remove("hidden");
        downloadBtn.href = videoUrl;
        document.getElementById("downloadBtn").style.visibility = "visible";
    }
});
document.getElementById('outputVideo').addEventListener('error', function() {
    console.log("⚠️ Video could not be played, showing download button instead.");
    document.getElementById('outputVideo').classList.add("hidden");
    document.getElementById("downloadBtn").style.visibility = "visible";
});

async function uploadAnimal() {
    const fileInput = document.getElementById('upload2');
    if (!fileInput.files.length) return alert("Upload an image first");
    // Upload and read image file
    const formData = new FormData();
    formData.append("file", fileInput.files[0]);
    // Handshake with FastAPI
    const res = await fetch("/animal/", {
      method: "POST",
      body: formData
    });
    // Error
    if (!res.ok) {
      alert("Failed to process animal detection.");
      return;
    }
    // Create image
    const blob = await res.blob();
    const imgURL = URL.createObjectURL(blob);
    document.getElementById("animal-result").innerHTML =
      `<p><b>Animal Detection Result:</b></p><img src="${imgURL}" width="640"/>`;
}

async function uploadTrash() {
    const fileInput = document.getElementById('upload3');
    if (!fileInput.files.length) return alert("Upload an image first");
    // Upload and read image file
    const formData = new FormData();
    formData.append("file", fileInput.files[0]);
    // Handshake with FastAPI
    const res = await fetch("/classification/", {
      method: "POST",
      body: formData
    });
    // Error
    if (!res.ok) {
      alert("Failed to process garbage classification.");
      return;
    }
    // Create image
    const blob = await res.blob();
    const imgURL = URL.createObjectURL(blob);
    document.getElementById("trash-result").innerHTML =
      `<p><b>Garbage Classification Result:</b></p><img src="${imgURL}" width="640"/>`;
  }