document.addEventListener("DOMContentLoaded", () => {
    const analyzeBtn = document.getElementById("analyze_btn");
    const loadingSpinner = document.getElementById("loading_spinner");
    const resultsSection = document.getElementById("results_section");

    const textInput = document.getElementById("text_input");
    const imageInput = document.getElementById("image_input");
    const audioInput = document.getElementById("audio_input");

    const finalPrediction = document.getElementById("final_prediction");

    const textChartCtx = document.getElementById('text_chart').getContext('2d');
    const imageChartCtx = document.getElementById('image_chart').getContext('2d');
    const audioChartCtx = document.getElementById('audio_chart').getContext('2d');

    let textChart, imageChart, audioChart;

    analyzeBtn.addEventListener("click", async () => {
        const text = textInput.value.trim();
        const imageFile = imageInput.files[0];
        const audioFile = audioInput.files[0];

        if (!text || !imageFile || !audioFile) {
            alert("Please provide text, an image, and an audio file.");
            return;
        }

        loadingSpinner.classList.remove("hidden");
        resultsSection.classList.add("hidden");
        analyzeBtn.disabled = true;

        const formData = new FormData();
        formData.append("text_input", text);
        formData.append("image_input", imageFile);
        formData.append("audio_input", audioFile);

        try {
            // ✅ Use relative path so it works in Hugging Face Space
            const response = await fetch("/predict", {
                method: "POST",
                body: formData,
            });

            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }

            const results = await response.json();
            updateUI(results);
        } catch (error) {
            console.error("Error during analysis:", error);
            alert("An error occurred while analyzing. Please check the console.");
        } finally {
            loadingSpinner.classList.add("hidden");
            analyzeBtn.disabled = false;
        }
    });

    function updateUI(results) {
        finalPrediction.textContent = results.final_prediction;

        const labels = Object.keys(results.final_probabilities);
        const textData = Object.values(results.text_probabilities);
        const imageData = Object.values(results.image_probabilities);
        const audioData = Object.values(results.audio_probabilities);

        textChart = createOrUpdateChart(textChart, textChartCtx, labels, textData, 'Text Probabilities');
        imageChart = createOrUpdateChart(imageChart, imageChartCtx, labels, imageData, 'Image Probabilities');
        audioChart = createOrUpdateChart(audioChart, audioChartCtx, labels, audioData, 'Audio Probabilities');

        resultsSection.classList.remove("hidden");
        resultsSection.scrollIntoView({ behavior: 'smooth' });
    }

    function createOrUpdateChart(chartInstance, context, labels, data, title) {
        if (chartInstance) chartInstance.destroy();

        return new Chart(context, {
            type: 'bar',
            data: {
                labels,
                datasets: [{
                    label: title,
                    data,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(199, 199, 199, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(199, 199, 199, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                maintainAspectRatio: false,
                indexAxis: 'y',
                scales: {
                    x: {
                        beginAtZero: true,
                        max: 1.0
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    }
});