document.getElementById("uploadForm").addEventListener("submit", async (e) => {
    e.preventDefault();

    const fileInput = document.getElementById("excelFile");
    const promptInput = document.getElementById("prompt");
    const visualizationImage = document.getElementById("visualizationImage");
    const generatedCodeElement = document.getElementById("generatedCode");
    const loadingElement = document.getElementById("loading");
    const errorElement = document.getElementById("error");

    visualizationImage.src = "";
    visualizationImage.classList.remove("loaded");
    generatedCodeElement.textContent = "";
    errorElement.textContent = "";
    errorElement.classList.add("hidden");

    loadingElement.classList.remove("hidden");

    try {
        const uploadFormData = new FormData();
        uploadFormData.append("file", fileInput.files[0]);

        const uploadResponse = await fetch("/upload/", {
            method: "POST",
            body: uploadFormData,
        });

        if (!uploadResponse.ok) {
            const errorData = await uploadResponse.json();
            throw new Error(`File upload failed: ${errorData.detail || 'Unknown error'}`);
        }

        const uploadResult = await uploadResponse.json();
        console.log("✅ File uploaded:", uploadResult);

        const visFormData = new FormData();
        visFormData.append("filename", uploadResult.filename);
        visFormData.append("prompt", promptInput.value);

        const visResponse = await fetch("/generate-visualization/", {
            method: "POST",
            body: visFormData,
        });

        if (!visResponse.ok) {
            const errorData = await visResponse.json();
            throw new Error(`Visualization generation failed: ${errorData.detail || 'Unknown error'}`);
        }

        const result = await visResponse.json();
        console.log("🔹 Response from API:", result);

        if (result.plot_url) {
            visualizationImage.src = result.plot_url;  // Relative URL works in Spaces
            visualizationImage.onload = () => {
                visualizationImage.classList.add("loaded");
            };
            generatedCodeElement.textContent = result.generated_code;
        } else {
            throw new Error("No plot URL received.");
        }
    } catch (error) {
        console.error("Error:", error);
        errorElement.textContent = `An error occurred: ${error.message}`;
        errorElement.classList.remove("hidden");
    } finally {
        loadingElement.classList.add("hidden");
    }
});