document.addEventListener('DOMContentLoaded', function () {
    // Initially set button state to "Loading..."
    updateButtonState("Loading...");

    // Set an interval to check the API every second
    setInterval(checkAPIStatus, 1000); // 1000 ms = 1 second
});

// Function to update the button text based on the API state
function updateButtonState(status) {
    const button = document.getElementById('statusButton');
    
    if (status === "active") {
        button.innerHTML = "Stop Service";
        button.style.backgroundColor = "#FF6347"; // Red for stopping
        button.onclick = stopService;
    } else if (status === "inactive") {
        button.innerHTML = "Start Service";
        button.style.backgroundColor = "#32CD32"; // Green for starting
        button.onclick = startService;
    } else if (status === "failed") {
        button.innerHTML = "Service Failed!";
        button.style.backgroundColor = "#FF6347"; // Red for failed
        button.onclick = null;
    }else {
        button.innerHTML = "Unknown";
        button.style.backgroundColor = "#808080"; // Gray for error
        button.onclick = null;
    }
}

// Simulate API call and handle response
function checkAPIStatus() {
    // Replace with your actual API endpoint
    fetch('http://172.17.0.1:5000/status')
        .then(response => response.json())
        .then(data => {
            const apiStatus = data.Status;
            updateButtonState(apiStatus);
        })
        .catch(error => {
            console.error('Error fetching API status:', error);
            updateButtonState('error');
        });
}


// Function to start the service (this would make the API call to start it)
function startService() {
    console.log('Starting service...');
    // You can call an API to start the service here
}

// Function to stop the service (this would make the API call to stop it)
function stopService() {
    console.log('Stopping service...');
    // You can call an API to stop the service here
}