function applyChartBoardTheme() {
    const el = document.documentElement;
    const pref = el.getAttribute('data-cb-theme-pref') || 'light';
    let resolved = pref;
    if (pref === 'system') {
        resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }
    if (resolved !== 'dark') {
        resolved = 'light';
    }
    el.setAttribute('data-cb-theme', resolved);
    el.setAttribute('data-bs-theme', resolved);
    try {
        localStorage.setItem('cb-theme-pref', pref);
    } catch (e) {
        /* ignore */
    }
}

function showToast(message, type = 'success') {
    // Placeholder helper for Phase 1 base setup.
    console.log(`[${type}] ${message}`);
}

document.addEventListener('DOMContentLoaded', function () {
    applyChartBoardTheme();
    try {
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
            if ((document.documentElement.getAttribute('data-cb-theme-pref') || '') === 'system') {
                applyChartBoardTheme();
            }
        });
    } catch (e) {
        /* ignore */
    }

    const testButtons = document.querySelectorAll('[data-ds-test-btn]');
    testButtons.forEach(function (button) {
        button.addEventListener('click', async function () {
            const form = button.closest('form');
            if (!form) {
                return;
            }

            const resultContainer = form.querySelector('[data-ds-test-result]');
            const url = button.getAttribute('data-test-url');
            if (!url) {
                return;
            }

            const originalLabel = button.innerHTML;
            button.disabled = true;
            button.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Testing...';

            if (resultContainer) {
                resultContainer.innerHTML = '';
            }

            try {
                const response = await fetch(url, {
                    method: 'POST',
                    body: new FormData(form),
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                });

                const result = await response.json();
                const isSuccess = !!result.success;
                const message = result.message || (isSuccess ? 'Connection successful.' : 'Connection failed.');

                if (resultContainer) {
                    resultContainer.innerHTML = '<div class="alert mb-0 ' + (isSuccess ? 'alert-success' : 'alert-danger') + '">' + message + '</div>';
                }
            } catch (error) {
                if (resultContainer) {
                    resultContainer.innerHTML = '<div class="alert alert-danger mb-0">Connection test failed due to a network error.</div>';
                }
            } finally {
                button.disabled = false;
                button.innerHTML = originalLabel;
            }
        });
    });

    const proofRefreshButton = document.querySelector('[data-proof-refresh-btn]');
    if (proofRefreshButton) {
        proofRefreshButton.addEventListener('click', async function () {
            const proofUrl = proofRefreshButton.getAttribute('data-proof-url');
            const proofContainer = document.querySelector('[data-proof-content]');
            if (!proofUrl || !proofContainer) {
                return;
            }

            const originalLabel = proofRefreshButton.innerHTML;
            proofRefreshButton.disabled = true;
            proofRefreshButton.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Refreshing...';

            try {
                const response = await fetch(proofUrl, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                });
                const result = await response.json();
                if (result && result.success && typeof result.html === 'string') {
                    proofContainer.innerHTML = result.html;
                } else {
                    showToast(result.message || 'Unable to refresh proof.', 'error');
                }
            } catch (error) {
                showToast('Unable to refresh proof due to a network error.', 'error');
            } finally {
                proofRefreshButton.disabled = false;
                proofRefreshButton.innerHTML = originalLabel;
            }
        });
    }
});