document.addEventListener("DOMContentLoaded", () => {
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

    function resetCanvas() {
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    resetCanvas();

    ctx.strokeStyle = "white";  
    ctx.lineWidth = 20;
    ctx.lineCap = "round";

    let drawing = false;

    canvas.addEventListener("mousedown", (e) => {
        drawing = true;
        ctx.beginPath();
        ctx.moveTo(e.offsetX, e.offsetY);
    });

    canvas.addEventListener("mousemove", (e) => {
        if (!drawing) return;
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
    });

    canvas.addEventListener("mouseup", () => drawing = false);
    canvas.addEventListener("mouseleave", () => drawing = false);

    document.getElementById("clear-btn").addEventListener("click", () => {
        resetCanvas();
        document.getElementById("predicted-digit").innerText = "–";
    });

    document.getElementById("predict-btn").addEventListener("click", () => {
        const dataURL = canvas.toDataURL("image/png");

        fetch("/predict", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: "canvas_data=" + encodeURIComponent(dataURL)
        })
        .then(res => res.json())
        .then(data => {
            document.getElementById("predicted-digit").innerText =
                `${data.digit}`;
        });
    });
});