document.addEventListener('DOMContentLoaded', function() {
    // 1. Generic Media Uploader Integration
    const uploadButtons = document.querySelectorAll('.cloudi7-icg-upload-button');
    if (uploadButtons.length > 0) {
        uploadButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                
                const inputSelector = this.getAttribute('data-input');
                const previewSelector = this.getAttribute('data-preview');
                const input = document.querySelector(inputSelector);
                const previews = document.querySelectorAll(previewSelector);

                if (typeof wp !== 'undefined' && wp.media) {
                    const customUploader = wp.media({
                        title: 'Select Image',
                        button: {
                            text: 'Use this image'
                        },
                        multiple: false
                    }).on('select', function() {
                        const attachment = customUploader.state().get('selection').first().toJSON();
                        
                        if (input) input.value = attachment.url;
                        if (previews.length > 0) {
                            previews.forEach(preview => {
                                preview.innerHTML = `<img src="${attachment.url}" style="max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">`;
                            });
                        }

                        // Show remove button if exists in parent
                        const removeBtn = button.parentElement.querySelector('.cloudi7-icg-remove-button') || document.querySelector(`.cloudi7-icg-remove-button[data-input="${inputSelector}"]`);
                        if (removeBtn) removeBtn.style.display = 'inline-block';

                    }).open();
                }
            });
        });
    }

    // Handle Remove Image Buttons
    const removeButtons = document.querySelectorAll('.cloudi7-icg-remove-button');
    if (removeButtons.length > 0) {
        removeButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const inputSelector = this.getAttribute('data-input');
                const previewSelector = this.getAttribute('data-preview');
                const input = document.querySelector(inputSelector);
                const previews = document.querySelectorAll(previewSelector);

                if (input) input.value = '';
                if (previews.length > 0) {
                    previews.forEach(preview => {
                        const isLogo = preview.id.includes('logo');
                        const icon = isLogo ? 'dashicons-cloud-upload' : 'dashicons-admin-users';
                        const text = isLogo ? 'Click to upload logo' : 'No photo uploaded';
                        preview.innerHTML = `<div class="cloudi7-icg-logo-placeholder"><span class="dashicons ${icon}" style="font-size: 40px; width: 40px; height: 40px; color: #94a3b8;"></span><span style="color:#64748b;">${text}</span></div>`;
                    });
                }
                this.style.display = 'none';
            });
        });
    }

    // 2. Organization Type Dynamic Fields (Vanilla JS)
    const orgTypeSelector = document.getElementById('organization_type');
    if (orgTypeSelector) {
        const toggleOrgFields = function() {
            const selectedType = orgTypeSelector.value;
            const allOrgFieldGroups = document.querySelectorAll('.org-fields');
            
            allOrgFieldGroups.forEach(group => {
                group.style.display = 'none';
            });
            
            const selectedGroup = document.getElementById('fields-' + selectedType);
            if (selectedGroup) {
                selectedGroup.style.display = 'table-row-group';
            }
        };

        orgTypeSelector.addEventListener('change', toggleOrgFields);
        
        // Run on load
        toggleOrgFields();
    }
});
