document.addEventListener('DOMContentLoaded', function () {
    const titleInput = document.getElementById('site_title');
    const descriptionInput = document.getElementById('site_description');
    const toneCheckboxes = document.querySelectorAll('.tone-checkbox');
    const continueButton = document.getElementById('continue-button');

    function updateButtonState() {
        if (!titleInput || !descriptionInput || !continueButton) return;
        const hasTitle = titleInput.value.trim().length > 0;
        const hasDescription = descriptionInput.value.trim().length > 0;
        const anyToneChecked = Array.from(toneCheckboxes).some(cb => cb.checked);

        continueButton.disabled = !(hasTitle && hasDescription && anyToneChecked);
    }

    updateButtonState();

    if (titleInput) titleInput.addEventListener('input', updateButtonState);
    if (descriptionInput) descriptionInput.addEventListener('input', updateButtonState);
    if (toneCheckboxes.length) toneCheckboxes.forEach(cb => cb.addEventListener('change', updateButtonState));

    const greenButtons = document.querySelectorAll(".green-button");
    greenButtons.forEach(button => {
        button.addEventListener("click", function(e) {
            this.innerHTML = `<img src="${swpanel_ai_data.pluginUrl}../admin/assets/img/loader_points_white.svg" alt="Loading...">`;
        });
    });
    const blueButtons = document.querySelectorAll(".blue-button");
    blueButtons.forEach(button => {
        button.addEventListener("click", function(e) {
            this.innerHTML = `<img src="${swpanel_ai_data.pluginUrl}../admin/assets/img/loader_points_white.svg" alt="Loading...">`;
        });
    });
    const whiteButtons = document.querySelectorAll(".white-button");
    whiteButtons.forEach(button => {
        button.addEventListener("click", function(e) {
            this.innerHTML = `<img src="${swpanel_ai_data.pluginUrl}../admin/assets/img/loader_points_blue.svg" alt="Loading...">`;
        });
    });
});
