const LOCAL_SERVER_URL = "http://127.0.0.1:5001/motor_control";

function sendMotorCommand(motor, value) {
    console.log(`Sending to ${motor}: ${value}`);
    fetch(LOCAL_SERVER_URL, {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({ motor, value })
    }).then(res => res.text()).then(txt => {
        console.log("✅ Server response:", txt);
    }).catch(err => {
        console.error("❌ Fetch error:", err);
    });
}

function bindSliders() {
    for (let i = 0; i < 6; i++) {
        const wrapper = document.getElementById("motor_" + i);
        if (!wrapper) {
            console.warn(`motor_${i} not found`);
            continue;
        }
        const slider = wrapper.querySelector("input[type=range]");
        if (!slider) {
            console.warn(`No slider in motor_${i}`);
            continue;
        }

        slider.addEventListener("input", () => {
            sendMotorCommand("motor_" + i, parseFloat(slider.value));
        });

        console.log(`✅ Bound slider for motor_${i}`);
    }
}

window.addEventListener("load", () => {
    console.log("🚀 External JS loaded");
    const retry = setInterval(() => {
        if (document.querySelectorAll("input[type=range]").length >= 6) {
            bindSliders();
            clearInterval(retry);
        }
    }, 500);
});