const socket = io();

document.addEventListener("DOMContentLoaded", function () {
    const storeForm = document.getElementById("store-form");
    const phoneInput = document.getElementById("phone-input");
    const retrieveButton = document.getElementById("retrieve-button");
    const configForm = document.getElementById("config-form");

    if (storeForm) {
        storeForm.addEventListener("submit", function (event) {
            event.preventDefault();
            const formData = new FormData(storeForm);
            fetch("/store", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(Object.fromEntries(formData))
            })
            .then(response => response.json())
            .then(data => alert(data.message || "Error"));
        });
    }

    if (retrieveButton) {
        retrieveButton.addEventListener("click", function () {
            const phone = phoneInput.value;
            fetch(`/retrieve?phone=${encodeURIComponent(phone)}`)
            .then(response => response.json())
            .then(data => {
                console.log(data);
                alert(JSON.stringify(data));
            });
        });
    }

    if (configForm) {
        configForm.addEventListener("submit", function (event) {
            event.preventDefault();
            const formData = new FormData(configForm);
            fetch("/config", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(Object.fromEntries(formData))
            })
            .then(response => response.json())
            .then(data => alert(data.message || "Error"));
        });
    }

    socket.on("update", function (data) {
        console.log("Live update:", data);
        alert(data.message);
    });
});