let chartInstance = null;

document.getElementById("fileInput").addEventListener("change", function () {
    let file = this.files[0];
    if (!file) return;

    let reader = new FileReader();

    reader.onload = function (e) {
        let text = e.target.result.trim();
        let lines = text.split(/\r?\n/);

        // Parse to float, ignore non-numeric
        let values = [];
        for (let line of lines) {
            let v = parseFloat(line.trim());
            if (!isNaN(v)) values.push(v);
        }

        if (values.length === 0) {
            alert("No numeric data found in CSV");
            return;
        }

        // Show first 10 values in left panel
        document.getElementById("dataPreview").textContent =
            values.slice(0, 10).join("\n");

        // Call backend for prediction
        fetch("/predict", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ data: values })
        })
        .then(res => res.json())
.then(res => {
    if (res.error) {
        alert("Error from server: " + res.error);
        return;
    }

    // RIGHT PANEL predictions
    document.getElementById("lastValue").textContent = res.last.toFixed(6);
    document.getElementById("nextPred").textContent = res.next.toFixed(6);

    let future = res.future;
    document.getElementById("futurePreds").textContent =
        future.map(v => v.toFixed(6)).join("\n");

    // LEFT PANEL MSE — ADD HERE
    document.getElementById("trainMSE").textContent = res.train_mse.toFixed(6);
    document.getElementById("testMSE").textContent = res.test_mse.toFixed(6);

    // GRAPH
    drawGraph(future);
})

        .catch(err => {
            console.error(err);
            alert("Error calling backend");
        });
    };

    reader.readAsText(file);
});


function drawGraph(data) {
    const ctx = document.getElementById("forecastChart").getContext("2d");

    if (chartInstance) {
        chartInstance.destroy();
    }

    chartInstance = new Chart(ctx, {
        type: "line",
        data: {
            labels: data.map((_, i) => i + 1),
            datasets: [{
                label: "Predicted Workload",
                data: data,
                borderColor: "#1e88e5",
                fill: false,
                tension: 0.3
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: { title: { display: true, text: "Steps Ahead" } },
                y: { title: { display: true, text: "Workload" } }
            }
        }
    });
}