document.addEventListener('DOMContentLoaded', () => {
    const scrollingMessageInput = document.getElementById('scrolling-message');
    const isClosedCheckbox = document.getElementById('is-closed-checkbox');
    const closedMessageField = document.getElementById('closed-message-field');
    const closedMessageTextarea = document.getElementById('closed-message');
    const passwordInput = document.getElementById('password');
    const saveButton = document.getElementById('save-button');
    const spinner = document.getElementById('spinner');
    const feedbackMessage = document.getElementById('feedback-message');

    let initialData = {};

    // --- UI Logic ---
    isClosedCheckbox.addEventListener('change', () => {
        closedMessageField.style.display = isClosedCheckbox.checked ? 'block' : 'none';
    });

    function checkForChanges() {
        const currentData = {
            message: scrollingMessageInput.value,
            isClosed: isClosedCheckbox.checked,
            closedMessage: closedMessageTextarea.value
        };
        const hasChanged = JSON.stringify(initialData) !== JSON.stringify(currentData);
        saveButton.disabled = !hasChanged;
    }

    [scrollingMessageInput, isClosedCheckbox, closedMessageTextarea].forEach(el => {
        el.addEventListener('input', checkForChanges);
        el.addEventListener('change', checkForChanges);
    });

    // --- Data Handling ---
    function loadInitialData() {
        fetch('update.json')
            .then(response => response.json())
            .then(data => {
                const update = data[0];
                initialData = { ...update }; // Store initial state
                scrollingMessageInput.value = update.message;
                isClosedCheckbox.checked = update.isClosed;
                closedMessageTextarea.value = update.closedMessage;
                isClosedCheckbox.dispatchEvent(new Event('change'));
                saveButton.disabled = true; // Start with button disabled
            })
            .catch(error => {
                console.error('Error loading initial data:', error);
                showFeedback('Error loading current status. Please check the console.', 'is-danger');
            });
    }

    function showFeedback(message, type) {
        feedbackMessage.textContent = message;
        feedbackMessage.className = `notification ${type}`;
        feedbackMessage.classList.remove('is-hidden');
        setTimeout(() => {
            feedbackMessage.classList.add('is-hidden');
        }, 5000);
    }

    saveButton.addEventListener('click', () => {
        const password = passwordInput.value;
        if (!password) {
            showFeedback('Please enter the password to save changes.', 'is-warning');
            return;
        }

        // Show loading state
        saveButton.disabled = true;
        spinner.style.display = 'inline-block';

        const newUpdateData = [
            {
                message: scrollingMessageInput.value,
                isClosed: isClosedCheckbox.checked,
                closedMessage: closedMessageTextarea.value
            }
        ];

        fetch('/api/update-status', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ password: password, data: newUpdateData }),
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                showFeedback('Success! The store status has been updated.', 'is-success');
                initialData = { ...newUpdateData[0] }; // Update initial state to current
                passwordInput.value = ''; // Clear password field
            } else {
                showFeedback(`Error: ${result.message}`, 'is-danger');
            }
        })
        .catch(error => {
            console.error('Error sending update:', error);
            showFeedback('An error occurred. Check the console and make sure the server is running.', 'is-danger');
        })
        .finally(() => {
            // Hide loading state
            spinner.style.display = 'none';
            // Re-enable button only if there are still changes (e.g. if save failed)
            checkForChanges();
        });
    });

    // Load the data when the page loads
    loadInitialData();
});