// DOM Elements and Initialization
document.addEventListener('DOMContentLoaded', function () {
    const reindexButton = document.getElementById('askany-reindex-content');
    const connectTest = document.getElementById('askany-ai-connect-test');
    const settingsForm = document.getElementById('askany-settings-form');
    const apiProviderSelect = document.getElementById('askany_api_provider');

    const toggleApiKeyButton = document.getElementById('toggle-api-key');

    
    copyElements.forEach(element => {
        element.addEventListener('click', handleCopyClick);
    });


    // Handle provider change
    if (apiProviderSelect) {
        apiProviderSelect.addEventListener('change', handleProviderChange);
        // Trigger on page load
        handleProviderChange();
    }

    // Handle reindex button
    if (reindexButton) {
        reindexButton.addEventListener('click', handleReindex);
    }
    if (connectTest) {
        connectTest.addEventListener('click', testApiConnection);
    }

    // Handle settings form submission
    if (settingsForm) {
        settingsForm.addEventListener('submit', handleSubmit);
    }

    if (clearHistoryButton) {
        clearHistoryButton.addEventListener('click', handleClearHistory);
    }

    
    // hide position 
    if (floatingWidgetToggle && floatingWidgetOptions) {
        floatingWidgetToggle.addEventListener('change', function () {
            floatingWidgetOptions.style.display = this.checked ? '' : 'none';
        });
    }
    // hide shortcode fields 
    if (contactFormToggle && shortcodeFormFields) {
        contactFormToggle.addEventListener('change', function () {
            shortcodeFormFields.style.display = this.checked ? '' : 'none';
        });
    }

    // Handle avatar upload
    const uploadAvatarButton = document.getElementById('upload-avatar-button');
    if (uploadAvatarButton) {
        uploadAvatarButton.addEventListener('click', function (e) {
            e.preventDefault();

            // Check if wp.media is available
            if (typeof wp === 'undefined' || typeof wp.media === 'undefined') {
                console.error('WordPress media uploader is not available');
                // showNotice(askanyAdmin.i18n.mediaError, 'error');
                Toast.error(askanyAdmin.i18n.mediaError || 'WordPress media uploader is not available');
                return;
            }

            // Create the media frame with localized data
            const frame = wp.media({
                title: askanyAdmin.mediaUploader.title,
                button: askanyAdmin.mediaUploader.button,
                multiple: false,
                library: {
                    type: 'image'
                }
            });

            // When an image is selected, run a callback
            frame.on('select', function () {
                const attachment = frame.state().get('selection').first().toJSON();
                const avatarInput = document.getElementById('askany_assistant_avatar');
                if (avatarInput) {
                    avatarInput.value = attachment.url;

                    // Update preview
                    let previewDiv = document.querySelector('.avatar-preview');
                    if (!previewDiv) {
                        previewDiv = document.createElement('div');
                        previewDiv.className = 'avatar-preview';
                        previewDiv.style.marginTop = '10px';
                        uploadAvatarButton.parentNode.appendChild(previewDiv);
                    }
                    previewDiv.innerHTML = `<img src="${attachment.url}" alt="Assistant Avatar" style="max-width: 50px; max-height: 50px;" />`;
                }
            });

            // Open the modal
            frame.open();
        });
    }

});

