const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "white";
ctx.lineWidth = 16;
ctx.lineCap = "round";

let drawing = false;

// 滑鼠事件
canvas.addEventListener("mousedown", (e) => {
    drawing = true;
    draw(e.clientX, e.clientY);
});
canvas.addEventListener("mouseup", () => {
    drawing = false;
    ctx.beginPath();
});
canvas.addEventListener("mousemove", (e) => {
    if (drawing) draw(e.clientX, e.clientY);
});

// 手機觸控事件
canvas.addEventListener("touchstart", (e) => {
    e.preventDefault();
    drawing = true;
    const touch = e.touches[0];
    draw(touch.clientX, touch.clientY);
});
canvas.addEventListener("touchmove", (e) => {
    e.preventDefault();
    if (drawing) {
        const touch = e.touches[0];
        draw(touch.clientX, touch.clientY);
    }
});
canvas.addEventListener("touchend", () => {
    drawing = false;
    ctx.beginPath();
});

// 共用繪圖函式
function draw(x, y) {
    const rect = canvas.getBoundingClientRect();
    ctx.lineTo(x - rect.left, y - rect.top);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x - rect.left, y - rect.top);
}

function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    document.getElementById("result").innerText = "";
}

function submit() {
    const image = canvas.toDataURL();
    fetch("/predict", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ image })
    })
    .then(res => res.json())
    .then(data => {
        const text = `辨識結果：${data.label}\n信心值：${(data.confidence * 100).toFixed(2)}%`;
        document.getElementById("result").innerText = text;
    });
}