/**
 * JCOGS Image Pro - Preset Editor JavaScript
 * ==========================================
 * Enhanced preset editor functionality with live preview system
 * 
 * @category   ExpressionEngine Add-on
 * @package    JCOGS Image Pro
 * @author     JCOGS Design <contact@jcogs.net>
 * @copyright  Copyright (c) 2021 - 2025 JCOGS Design
 * @license    https://jcogs.net/add-ons/license/jcogs_img_pro
 * @version    2.0.0
 * @link       https://JCOGS.net/
 * @since      Preset Editor Implementation
 */

// JCOGS Image Pro - Enhanced Preset Editor JavaScript
// Configuration will be set by the controller
window.jcogsImageProConfig = window.jcogsImageProConfig || {};

// Live Preview System
let currentPreviewImage = null;
let previewProcessingTimer = null;

// Debug logging (opt-in)
const __jcogsPresetEditorDebugEnabled = (() => {
    try {
        if (window.jcogsImageProConfig && window.jcogsImageProConfig.debugPresetEditor === true) {
            return true;
        }
        const params = new URLSearchParams(window.location.search);
        if (params.get('jcogs_img_pro_debug_preset') === '1') {
            return true;
        }
        return window.localStorage && window.localStorage.getItem('jcogs_img_pro_debug_preset') === '1';
    } catch (e) {
        return false;
    }
})();

function __jcogsPresetLog(...args) {
    if (__jcogsPresetEditorDebugEnabled) {
        // eslint-disable-next-line no-console
        console.log(...args);
    }
}

function __jcogsPresetWarn(...args) {
    if (__jcogsPresetEditorDebugEnabled) {
        // eslint-disable-next-line no-console
        console.warn(...args);
    }
}

// Parameter search and filtering
function filterParameters() {
    const searchInput = document.getElementById('parameter-search');
    const categoryFilter = document.getElementById('category-filter');
    const parameterItems = document.querySelectorAll('.parameter-item');
    
    const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
    const selectedCategory = categoryFilter ? categoryFilter.value : '';
    
    parameterItems.forEach(item => {
        const paramName = item.dataset.name ? item.dataset.name.toLowerCase() : '';
        const paramCategory = item.dataset.category || '';
        
        const matchesSearch = paramName.includes(searchTerm);
        const matchesCategory = !selectedCategory || paramCategory === selectedCategory;
        
        if (matchesSearch && matchesCategory) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
}

// Live Preview Functions
function initializePreviewImage() {
    const originalImg = document.getElementById('original-preview');
    if (originalImg && originalImg.src && originalImg.style.display !== 'none') {
        // Image is already loaded from server, set as current preview
        currentPreviewImage = originalImg.src;
    }
}

function updatePreview() {
    if (!currentPreviewImage) return;
    
    const processedImg = document.getElementById('processed-preview');
    const processedPlaceholder = document.getElementById('processed-placeholder');
    const loadingIndicator = document.getElementById('preview-loading');
    const statusIndicator = document.getElementById('processing-status');
    
    // Show loading state
    if (processedImg) processedImg.style.display = 'none';
    if (processedPlaceholder) processedPlaceholder.style.display = 'none';
    if (loadingIndicator) loadingIndicator.style.display = 'flex';
    if (statusIndicator) {
        statusIndicator.textContent = 'Processing...';
        statusIndicator.className = 'status-indicator processing';
    }
    
    // Collect current preset parameters
    const presetData = collectPresetParameters();
    
    // Simulate processing time
    const startTime = Date.now();
    
    // Send to backend for processing
    processPreviewImage(presetData)
        .then(result => {
            const processingTime = Date.now() - startTime;
            displayProcessedImage(result, processingTime);
        })
        .catch(error => {
            console.error('Preview processing error:', error);
            showPreviewError();
        });
}

function collectPresetParameters() {
    // Use actual parameter values from configuration object (from database)
    // This ensures we send the exact values to the preview API, not display text
    const parameters = { ...(window.jcogsImageProConfig?.presetParameters || {}) };
    
    return parameters;
}

function collectParametersForDisplay() {
    // Collect parameter values from UI display for the "Applied Effects" summary
    // This reads from the display text shown to users
    const parameters = {};
    
    document.querySelectorAll('.parameter-item').forEach(item => {
        const name = item.dataset.name;
        const valueElement = item.querySelector('.parameter-value-display');
        
        if (name && valueElement) {
            let value = valueElement.textContent.trim();
            
            // Skip empty values
            if (!value || value === '(not set)' || value === '') {
                return;
            }
            
            parameters[name] = value;
        }
    });
    
    return parameters;
}

function processPreviewImage(presetData) {
    // Real AJAX implementation using the Preview endpoint
    return new Promise((resolve, reject) => {
        // Get current preview image file ID - try multiple sources
        let previewFileId = null;
        
        // First, try the file picker input
        const previewImagePicker = document.querySelector('input[name="preview_file_id"]');
        if (previewImagePicker && previewImagePicker.value) {
            previewFileId = parseInt(previewImagePicker.value);
        }
        
        // Fallback to configuration value
        if (!previewFileId && window.jcogsImageProConfig && window.jcogsImageProConfig.currentPreviewFileId) {
            previewFileId = window.jcogsImageProConfig.currentPreviewFileId;
        }
        
        // If still no preview file ID, let the backend handle default fallback
        __jcogsPresetLog('JCOGS Preview: Using preview file ID:', previewFileId);
        __jcogsPresetLog('JCOGS Preview: Preview URL:', window.jcogsImageProConfig.previewUrl);
        
        // Prepare request data
        const requestData = {
            parameters: presetData,
            preview_file_id: previewFileId,
            csrf_token: window.jcogsImageProConfig.csrfToken
        };
        
        __jcogsPresetLog('JCOGS Preview: Request data:', requestData);
        
        // Make AJAX request to preview endpoint
        fetch(window.jcogsImageProConfig.previewUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-Token': window.jcogsImageProConfig.csrfToken
            },
            body: JSON.stringify(requestData)
        })
        .then(response => {
            __jcogsPresetLog('JCOGS Preview: Response status:', response.status);
            __jcogsPresetLog('JCOGS Preview: Response headers:', response.headers);
            return response.json();
        })
        .then(data => {
            __jcogsPresetLog('JCOGS Preview: Response data:', data);
            if (data.status === 'success') {
                __jcogsPresetLog('JCOGS Preview: Successfully generated preview URL:', data.data.preview_url);
                resolve({
                    processedImage: data.data.preview_url + '&cb=' + data.data.cache_buster,
                    metadata: {
                        width: 'Processing...',
                        height: 'Processing...',
                        fileSize: 'Processing...',
                        processingTime: 'Live'
                    }
                });
            } else {
                console.error('JCOGS Preview: Backend error:', data.message);
                reject(new Error(data.message || 'Preview generation failed'));
            }
        })
        .catch(error => {
            console.error('JCOGS Preview: AJAX error:', error);
            reject(error);
        });
    });
}

function displayProcessedImage(result, processingTime) {
    const processedImg = document.getElementById('processed-preview');
    const originalImg = document.getElementById('original-preview');
    const loadingIndicator = document.getElementById('preview-loading');
    const statusIndicator = document.getElementById('processing-status');
    const metadataPanel = document.getElementById('preview-metadata');
    
    // Hide loading, show processed image
    if (loadingIndicator) loadingIndicator.style.display = 'none';
    if (processedImg) {
        processedImg.src = result.processedImage;
        processedImg.style.display = 'block';
        
        // When the processed image loads, get its dimensions
        processedImg.onload = function() {
            updateEnhancedMetadata(originalImg, processedImg, result.processedImage, processingTime);
        };
    }
    
    // Update status
    if (statusIndicator) {
        statusIndicator.textContent = 'Complete';
        statusIndicator.className = 'status-indicator complete';
    }
    
    // Show metadata panel
    if (metadataPanel) {
        metadataPanel.style.display = 'block';
    }
}

function showPreviewError() {
    const loadingIndicator = document.getElementById('preview-loading');
    const statusIndicator = document.getElementById('processing-status');
    const processedPlaceholder = document.getElementById('processed-placeholder');
    
    if (loadingIndicator) loadingIndicator.style.display = 'none';
    if (processedPlaceholder) {
        processedPlaceholder.innerHTML = `
            <i class="fas fa-exclamation-triangle"></i>
            <p>Processing failed</p>
            <button type="button" class="btn btn-sm btn-primary" onclick="updatePreview()">
                <i class="fas fa-redo"></i> Retry
            </button>
        `;
        processedPlaceholder.style.display = 'flex';
    }
    if (statusIndicator) {
        statusIndicator.textContent = 'Error';
        statusIndicator.className = 'status-indicator error';
    }
}

function updateMetadata(elementId, value) {
    const element = document.getElementById(elementId);
    if (element) {
        element.textContent = value;
    }
}

function updateEnhancedMetadata(originalImg, processedImg, processedUrl, processingTime) {
    // Get original image dimensions
    const originalWidth = originalImg ? originalImg.naturalWidth : 0;
    const originalHeight = originalImg ? originalImg.naturalHeight : 0;
    
    // Get processed image dimensions
    const processedWidth = processedImg ? processedImg.naturalWidth : 0;
    const processedHeight = processedImg ? processedImg.naturalHeight : 0;
    
    // Calculate size change
    let sizeChange = '--';
    if (originalWidth && originalHeight && processedWidth && processedHeight) {
        const originalPixels = originalWidth * originalHeight;
        const processedPixels = processedWidth * processedHeight;
        const changePercent = ((processedPixels - originalPixels) / originalPixels * 100).toFixed(1);
        const changeIcon = changePercent > 0 ? '↗' : changePercent < 0 ? '↘' : '→';
        sizeChange = `${changeIcon} ${Math.abs(changePercent)}%`;
    }
    
    // Collect applied effects from current parameters
    const appliedEffects = getAppliedEffects();
    
    // Update all metadata fields
    updateMetadata('original-size', originalWidth && originalHeight ? `${originalWidth} × ${originalHeight}` : '--');
    updateMetadata('processed-size', processedWidth && processedHeight ? `${processedWidth} × ${processedHeight}` : '--');
    updateMetadata('size-change', sizeChange);
    updateMetadata('processing-time', `${(processingTime / 1000).toFixed(2)}s`);
    updateMetadata('applied-effects', appliedEffects);
    
    // Update preview URL link
    const previewUrlElement = document.getElementById('preview-url');
    if (previewUrlElement && previewUrlElement.querySelector('a')) {
        previewUrlElement.querySelector('a').href = processedUrl;
        previewUrlElement.querySelector('a').textContent = 'Open Processed Image';
    }
    
    // Check if preview image is scaled down and show size warning
    checkAndShowSizeWarning(processedImg, processedUrl, processedWidth, processedHeight);
}

function checkAndShowSizeWarning(processedImg, processedUrl, actualWidth, actualHeight) {
    const sizeWarning = document.getElementById('preview-size-warning');
    const sizeWarningLink = document.getElementById('size-warning-link');
    
    if (!sizeWarning || !processedImg || !actualWidth || !actualHeight) {
        return;
    }
    
    // Get the displayed size of the preview image
    const displayedWidth = processedImg.offsetWidth;
    const displayedHeight = processedImg.offsetHeight;
    
    // Check if the actual image is significantly larger than what's displayed
    // Using a 10% threshold to avoid showing warning for small differences
    const isScaledDown = (actualWidth > displayedWidth * 1.1) || (actualHeight > displayedHeight * 1.1);
    
    if (isScaledDown) {
        // Update the warning link
        if (sizeWarningLink) {
            sizeWarningLink.href = processedUrl;
        }
        // Show the warning
        sizeWarning.classList.add('show');
    } else {
        // Hide the warning
        sizeWarning.classList.remove('show');
    }
}

function getAppliedEffects() {
    const effects = [];
    const parameters = collectPresetParameters();
    
    // DIMENSIONAL PARAMETERS - Size and dimension changes
    if (parameters.width && parameters.width !== '0') {
        effects.push(`Width: ${parameters.width}`);
    }
    
    if (parameters.height && parameters.height !== '0') {
        effects.push(`Height: ${parameters.height}`);
    }
    
    if (parameters.max) {
        effects.push(`Max: ${parameters.max}`);
    }
    
    if (parameters.max_width) {
        effects.push(`Max Width: ${parameters.max_width}`);
    }
    
    if (parameters.max_height) {
        effects.push(`Max Height: ${parameters.max_height}`);
    }
    
    if (parameters.min) {
        effects.push(`Min: ${parameters.min}`);
    }
    
    if (parameters.min_width) {
        effects.push(`Min Width: ${parameters.min_width}`);
    }
    
    if (parameters.min_height) {
        effects.push(`Min Height: ${parameters.min_height}`);
    }
    
    // TRANSFORMATIONAL PARAMETERS - Image modifications
    
    // Aspect Ratio
    if (parameters.aspect_ratio) {
        const ratio = parameters.aspect_ratio.replace('_', ':');
        effects.push(`Aspect Ratio: ${ratio}`);
    }
    
    // Fit behavior
    if (parameters.fit && parameters.fit !== 'none') {
        effects.push(`Fit: ${parameters.fit}`);
    }
    
    // Allow scale larger
    if (parameters.allow_scale_larger === 'yes') {
        effects.push('Scale Larger: Enabled');
    }
    
    // Crop
    if (parameters.crop && parameters.crop.startsWith('yes')) {
        effects.push('Crop');
    }
    
    // Border
    if (parameters.border && parameters.border !== '0' && parameters.border !== '0px') {
        effects.push(`Border: ${parameters.border}`);
    }
    
    // Background color
    if (parameters.bg_color && parameters.bg_color !== 'transparent') {
        effects.push(`BG Color: ${parameters.bg_color}`);
    }
    
    // Rounded corners
    if (parameters.rounded_corners && parameters.rounded_corners !== 'none' && parameters.rounded_corners !== '0') {
        effects.push(`Rounded: ${parameters.rounded_corners}`);
    }
    
    // Filters
    if (parameters.filter && parameters.filter !== 'none') {
        const filterParts = parameters.filter.split('|');
        const activeFilters = [];
        
        if (filterParts[0] && filterParts[0].split(':')[1] !== '0') activeFilters.push('Blur');
        if (filterParts[1] && filterParts[1].split(':')[1] !== '0') activeFilters.push('Brightness');
        if (filterParts[2] && filterParts[2].split(':')[1] !== '1') activeFilters.push('Smooth');
        
        if (activeFilters.length > 0) {
            effects.push(`Filters: ${activeFilters.join(', ')}`);
        }
    }
    
    // Quality settings
    if (parameters.quality && parameters.quality !== '90' && parameters.quality !== '100') {
        effects.push(`Quality: ${parameters.quality}%`);
    }
    
    if (parameters.png_quality) {
        effects.push(`PNG Quality: ${parameters.png_quality}`);
    }
    
    // Rotation
    if (parameters.rotate && parameters.rotate !== '0') {
        effects.push(`Rotate: ${parameters.rotate}°`);
    }
    
    // Flip
    if (parameters.flip && parameters.flip !== 'none') {
        effects.push(`Flip: ${parameters.flip}`);
    }
    
    // Auto sharpen
    if (parameters.auto_sharpen === 'yes') {
        effects.push('Auto Sharpen');
    }
    
    // Interlace
    if (parameters.interlace === 'yes') {
        effects.push('Interlace');
    }
    
    // Preload
    if (parameters.preload === 'yes') {
        effects.push('Preload');
    }
    
    // Text overlay
    if (parameters.text && parameters.text.trim() && !parameters.text.startsWith('|')) {
        effects.push('Text Overlay');
    }
    
    // Watermark
    if (parameters.watermark && parameters.watermark.trim() && !parameters.watermark.startsWith('|')) {
        effects.push('Watermark');
    }
    
    // Reflection
    if (parameters.reflection && parameters.reflection !== 'none' && parameters.reflection !== '0') {
        effects.push(`Reflection: ${parameters.reflection}`);
    }
    
    // Face detection
    if (parameters.face_crop_margin) {
        effects.push(`Face Crop: ${parameters.face_crop_margin}`);
    }
    
    if (parameters.face_detect_sensitivity) {
        effects.push(`Face Detect: ${parameters.face_detect_sensitivity}`);
    }
    
    // Fallback
    if (parameters.fallback_src) {
        effects.push('Fallback Image');
    }
    
    return effects.length > 0 ? effects.join(', ') : 'None';
}

// Event Listeners for Parameter Changes
function initializeParameterChangeListeners() {
    // Listen for parameter changes to trigger preview updates
    document.addEventListener('change', function(e) {
        if (e.target.closest('.quick-edit-form') || e.target.name === 'parameter_value') {
            // Debounce preview updates
            clearTimeout(previewProcessingTimer);
            previewProcessingTimer = setTimeout(updatePreview, 500);
        }
    });
    
    // Listen for parameter form submissions
    document.addEventListener('submit', function(e) {
        if (e.target.closest('.quick-edit-form')) {
            // Allow the form to submit normally, then update preview after page reload
            setTimeout(function() {
                if (window.location.pathname.includes('/presets/edit/')) {
                    updatePreview();
                }
            }, 1000);
        }
    });
}

function initializeParameterSelection() {
    // Any parameter selection initialization code would go here
    console.log('JCOGS Image Pro: Parameter selection initialized');
}

// Functions called from HTML onclick handlers
function quickEditParameter(parameterName) {
    console.log('JCOGS Image Pro: Quick edit requested for parameter:', parameterName);
    
    // Find the parameter item by data-name attribute
    const paramItems = document.querySelectorAll('.parameter-item');
    let targetItem = null;
    
    paramItems.forEach(item => {
        const dataName = item.getAttribute('data-name');
        if (dataName === parameterName) {
            targetItem = item;
        }
    });
    
    if (!targetItem) {
        console.error('JCOGS Image Pro: Parameter not found:', parameterName);
        return;
    }
    
    // Toggle or show quick edit form
    const existingForm = targetItem.querySelector('.quick-edit-form');
    if (existingForm) {
        // Remove existing form and recreate it to ensure proper event listeners
        console.log('JCOGS Image Pro: Removing existing form to recreate with proper handlers');
        existingForm.remove();
    }
    
    // Create quick edit form
    const valueDisplay = targetItem.querySelector('.parameter-value-display');
    const currentValue = valueDisplay ? valueDisplay.textContent.trim() : '';
    
    console.log('JCOGS Image Pro: Creating new quick edit form for', parameterName, 'with value:', currentValue);
        
        const formHtml = `
            <div class="quick-edit-form" style="margin-top: 10px;" data-parameter="${parameterName}">
                <div class="input-group">
                    <input type="text" class="form-control" name="parameter_value" value="${currentValue}" placeholder="Enter value...">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary quick-edit-save">
                            <i class="fas fa-check"></i>
                        </button>
                        <button type="button" class="btn btn-default quick-edit-cancel">
                            <i class="fas fa-times"></i>
                        </button>
                    </span>
                </div>
            </div>
        `;
        
        targetItem.insertAdjacentHTML('beforeend', formHtml);
        
        // Add event listeners to the newly created buttons
        const newForm = targetItem.querySelector('.quick-edit-form[data-parameter="' + parameterName + '"]');
        const saveBtn = newForm.querySelector('.quick-edit-save');
        const cancelBtn = newForm.querySelector('.quick-edit-cancel');
        
        saveBtn.addEventListener('click', function() {
            saveQuickEdit(parameterName, this);
        });
        
        cancelBtn.addEventListener('click', function() {
            cancelQuickEdit(this);
        });
}

function saveQuickEdit(parameterName, buttonElement) {
    console.log('JCOGS Image Pro: Save quick edit called', parameterName, buttonElement);
    
    // Ensure we have a valid DOM element
    if (!buttonElement || typeof buttonElement.closest !== 'function') {
        console.error('JCOGS Image Pro: Invalid button element passed to saveQuickEdit', buttonElement);
        return;
    }
    
    const form = buttonElement.closest('.quick-edit-form');
    if (!form) {
        console.error('JCOGS Image Pro: Could not find quick-edit-form');
        return;
    }
    
    const input = form.querySelector('input[name="parameter_value"]');
    if (!input) {
        console.error('JCOGS Image Pro: Could not find parameter_value input');
        return;
    }
    
    const newValue = input.value.trim();
    
    console.log('JCOGS Image Pro: Saving quick edit for', parameterName, '=', newValue);
    
    // Update the display
    const paramItem = form.closest('.parameter-item');
    const valueDisplay = paramItem.querySelector('.parameter-value-display');
    if (valueDisplay) {
        valueDisplay.textContent = newValue || '(not set)';
    }
    
    // Hide the form
    form.style.display = 'none';
    
    // Get values for debugging
    const presetId = getPresetId();
    const csrfToken = getCSRFToken();
    
    console.log('JCOGS Image Pro: Debug info:');
    console.log('  - Preset ID:', presetId);
    console.log('  - CSRF Token:', csrfToken);
    console.log('  - Parameter Name:', parameterName);
    console.log('  - Parameter Value:', newValue);
    
    // Create a temporary form to submit the parameter update
    const tempForm = document.createElement('form');
    tempForm.method = 'POST';
    tempForm.action = 'admin.php?/cp/addons/settings/jcogs_img_pro/presets/edit/' + presetId;
    tempForm.style.display = 'none';
    
    console.log('JCOGS Image Pro: Form action:', tempForm.action);
    
    // Add CSRF token
    const csrfInput = document.createElement('input');
    csrfInput.type = 'hidden';
    csrfInput.name = 'csrf_token';
    csrfInput.value = csrfToken;
    tempForm.appendChild(csrfInput);
    
    // Add parameter name
    const paramNameInput = document.createElement('input');
    paramNameInput.type = 'hidden';
    paramNameInput.name = 'quick_edit_parameter';
    paramNameInput.value = parameterName;
    tempForm.appendChild(paramNameInput);
    
    // Add parameter value
    const paramValueInput = document.createElement('input');
    paramValueInput.type = 'hidden';
    paramValueInput.name = 'quick_edit_value';
    paramValueInput.value = newValue;
    tempForm.appendChild(paramValueInput);
    
    console.log('JCOGS Image Pro: Form data being submitted:');
    console.log('  - csrf_token:', csrfToken);
    console.log('  - quick_edit_parameter:', parameterName);
    console.log('  - quick_edit_value:', newValue);
    
    // Use AJAX instead of form submission for better error handling
    const formData = new FormData();
    formData.append('csrf_token', csrfToken);
    formData.append('quick_edit_parameter', parameterName);
    formData.append('quick_edit_value', newValue);
    
    fetch('admin.php?/cp/addons/settings/jcogs_img_pro/presets/edit/' + presetId, {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: formData
    })
    .then(response => {
        if (response.ok) {
            // Success - reload the page to show updated data and any success messages
            window.location.reload();
        } else {
            // Error - try to get detailed error message
            return response.json().then(errorData => {
                const errorMessage = errorData.error || 'Failed to save parameter. Please check the value and try again.';
                showQuickEditError(paramItem, errorMessage);
            }).catch(() => {
                // Fallback if JSON parsing fails
                showQuickEditError(paramItem, 'Failed to save parameter. Please check the value and try again.');
            });
        }
    })
    .catch(error => {
        console.error('JCOGS Image Pro: AJAX error:', error);
        showQuickEditError(paramItem, 'Network error occurred. Please try again.');
    });
}

// Show quick edit error message
function showQuickEditError(paramItem, message) {
    // Remove any existing error messages
    const existingError = paramItem.querySelector('.quick-edit-error');
    if (existingError) {
        existingError.remove();
    }
    
    // Create error message element
    const errorDiv = document.createElement('div');
    errorDiv.className = 'quick-edit-error';
    errorDiv.style.cssText = `
        background: #ff6b6b;
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
        margin: 8px 0;
        font-size: 14px;
        border: 1px solid #ff5252;
    `;
    errorDiv.textContent = message;
    
    // Insert error message after the quick edit form
    const quickEditForm = paramItem.querySelector('.quick-edit-form');
    if (quickEditForm) {
        quickEditForm.parentNode.insertBefore(errorDiv, quickEditForm.nextSibling);
        
        // Error persists until user fixes the issue and resubmits
        // (No auto-dismiss - user needs to see and correct validation errors)
    }
}

// Helper functions
function getPresetId() {
    // Extract preset ID from URL or data attribute
    const url = window.location.href;
    const match = url.match(/\/presets\/edit\/(\d+)/);
    return match ? match[1] : null;
}

function getCSRFToken() {
    // Get CSRF token from meta tag or existing form
    const metaTag = document.querySelector('meta[name="csrf-token"]');
    if (metaTag) {
        return metaTag.getAttribute('content');
    }
    
    // Fallback: get from existing form
    const existingForm = document.querySelector('input[name="csrf_token"]');
    if (existingForm) {
        return existingForm.value;
    }
    
    return '';
}

function cancelQuickEdit(buttonElement) {
    console.log('JCOGS Image Pro: Cancel quick edit called', buttonElement);
    
    // Ensure we have a valid DOM element
    if (!buttonElement || typeof buttonElement.closest !== 'function') {
        console.error('JCOGS Image Pro: Invalid button element passed to cancelQuickEdit', buttonElement);
        return;
    }
    
    const form = buttonElement.closest('.quick-edit-form');
    if (form) {
        form.style.display = 'none';
        console.log('JCOGS Image Pro: Quick edit form hidden');
    } else {
        console.error('JCOGS Image Pro: Could not find quick-edit-form');
    }
}

function refreshPreview() {
    __jcogsPresetLog('JCOGS Image Pro: Manual preview refresh requested');
    updatePreview();
}

// Make sure the function is globally accessible
window.refreshPreview = refreshPreview;
window.quickEditParameter = quickEditParameter;

// Search and Filter Event Listeners
function initializeSearchAndFilter() {
    const searchInput = document.getElementById('parameter-search');
    const categoryFilter = document.getElementById('category-filter');
    
    if (searchInput) {
        searchInput.addEventListener('input', filterParameters);
    }
    
    if (categoryFilter) {
        categoryFilter.addEventListener('change', filterParameters);
    }
}

// Add Parameter Modal Initialization
function initializeAddParameterModal() {
    const parameterSelect = document.getElementById('parameter-select');
    const confirmBtn = document.getElementById('confirm-add-parameter');
    
    if (parameterSelect && confirmBtn) {
        // Handle parameter selection to enable/disable Add Parameter button
        parameterSelect.addEventListener('change', function(e) {
            __jcogsPresetLog('JCOGS Image Pro: Parameter selected:', e.target.value);
            
            if (e.target.value && e.target.value !== '') {
                confirmBtn.disabled = false;
                __jcogsPresetLog('JCOGS Image Pro: Add Parameter button enabled');
            } else {
                confirmBtn.disabled = true;
                __jcogsPresetLog('JCOGS Image Pro: Add Parameter button disabled');
            }
        });
        
        __jcogsPresetLog('JCOGS Image Pro: Add Parameter modal initialized');
    } else {
        __jcogsPresetLog('JCOGS Image Pro: Add Parameter modal elements not found');
    }
}

// Main Initialization
document.addEventListener('DOMContentLoaded', function() {
    if (window.__jcogsPresetEditorInitialised) {
        return;
    }
    window.__jcogsPresetEditorInitialised = true;

    __jcogsPresetLog('JCOGS Image Pro: Initializing preset editor...');
    
    // Initialize with default preview image if available
    initializePreviewImage();
    
    // Initialize all component systems
    initializeParameterSelection();
    initializeParameterChangeListeners();
    initializeSearchAndFilter();
    initializeAddParameterModal();
    
    // Initialize ExpressionEngine's file picker for preview file field
    initializeFilePicker();
    
    // Auto-trigger initial preview if we have parameters
    const parameterItems = document.querySelectorAll('.parameter-item');
    if (parameterItems.length > 0) {
        if (!window.__jcogsPresetInitialPreviewScheduled) {
            window.__jcogsPresetInitialPreviewScheduled = true;
            __jcogsPresetLog('JCOGS Image Pro: Found ' + parameterItems.length + ' parameters, triggering initial preview...');
            setTimeout(updatePreview, 1500); // Give everything time to load
        }
    }
    
    __jcogsPresetLog('JCOGS Image Pro: Preset editor initialization complete.');
});

/**
 * Initialize ExpressionEngine's File Picker
 * 
 * EE's file picker requires manual initialization for custom forms.
 * This function triggers EE's FilePicker binding for the preview file field.
 */
function initializeFilePicker() {
    __jcogsPresetLog('JCOGS Image Pro: Initializing file picker...');
    
    // EE7's file picker uses React components loaded via combo_load
    // Since our custom page doesn't load the React file picker bundle,
    // we need to use EE's modal system directly
    
    if (typeof jQuery === 'undefined' || typeof $ === 'undefined') {
        console.error('JCOGS Image Pro: jQuery not available!');
        return;
    }
    
    __jcogsPresetLog('JCOGS Image Pro: Setting up file picker via EE modal system...');
    
    try {
        // Find all the file picker trigger buttons
        var $chooseExisting = $('.preview-file-management .js-dropdown-toggle:contains("Choose Existing")');
        var $uploadNew = $('.preview-file-management .js-dropdown-toggle:contains("Upload New")');
        
        __jcogsPresetLog('JCOGS Image Pro: Found Choose Existing buttons:', $chooseExisting.length);
        __jcogsPresetLog('JCOGS Image Pro: Found Upload New buttons:', $uploadNew.length);
        
        if ($chooseExisting.length === 0 && $uploadNew.length === 0) {
            __jcogsPresetWarn('JCOGS Image Pro: No file picker buttons found');
            return;
        }
        
        // Function to open EE's file picker modal (using EE's modal system)
        var openFilePicker = function() {
            console.log('JCOGS Image Pro: Opening file picker modal');
            
            // Build the file picker URL
            var pickerUrl = EE.BASE + '?/cp/addons/settings/filepicker/modal';
            pickerUrl += '&requested_directory=all';
            pickerUrl += '&field_upload_locations=all';
            pickerUrl += '&type=list';
            pickerUrl += '&hasFilters=1';
            pickerUrl += '&hasUpload=1';
            
            // Use EE's modal system (rel="modal-file")
            // EE loads content via AJAX into .modal-file
            var $modal = $('.modal-wrap.modal-file');
            
            if ($modal.length === 0) {
                console.error('JCOGS Image Pro: Modal container not found');
                return;
            }
            
            console.log('JCOGS Image Pro: Loading file picker into modal...');
            
            // Show modal
            $modal.removeClass('hidden').show();
            $('.overlay, .app-overlay').addClass('modal-open');
            
            // Load content
            $.ajax({
                url: pickerUrl,
                type: 'GET',
                dataType: 'html',
                success: function(html) {
                    console.log('JCOGS Image Pro: File picker content loaded');
                    $modal.find('.box.container').html(html);
                    
                    // Set up click handlers for file selection
                    setupFileSelection();
                },
                error: function(xhr, status, error) {
                    console.error('JCOGS Image Pro: Failed to load file picker:', error);
                    $modal.find('.box.container').html(
                        '<div class="app-notice app-notice---error">' +
                        '<p>Failed to load file picker. Please try again.</p>' +
                        '</div>'
                    );
                }
            });
        };
        
        // Function to set up file selection handlers in the modal
        var setupFileSelection = function() {
            console.log('JCOGS Image Pro: Setting up file selection handlers');
            
            // Listen for file selection in the modal
            // EE's file picker uses various methods depending on view type
            $(document).off('click.jcogs-file-select').on('click.jcogs-file-select', '.modal-file .filepicker-item', function(e) {
                e.preventDefault();
                
                var $item = $(this);
                var fileId = $item.data('id') || $item.find('[data-id]').data('id');
                
                if (fileId) {
                    console.log('JCOGS Image Pro: File selected, ID:', fileId);
                    updateFileField({ file_id: fileId });
                    closeModal();
                } else {
                    console.warn('JCOGS Image Pro: Could not determine file ID from clicked item');
                }
            });
        };
        
        // Function to close the modal
        var closeModal = function() {
            console.log('JCOGS Image Pro: Closing file picker modal');
            $('.modal-wrap.modal-file').addClass('hidden').hide();
            $('.overlay, .app-overlay').removeClass('modal-open');
            $(document).off('click.jcogs-file-select');
        };
        
        // Set up close button
        $(document).off('click.jcogs-modal-close').on('click.jcogs-modal-close', '.modal-file .m-close', function(e) {
            e.preventDefault();
            closeModal();
        });
        
        // Function to update the file field when a file is selected
        var updateFileField = function(fileData) {
            console.log('JCOGS Image Pro: Updating file field with:', fileData);
            
            var $hiddenInput = $('input[name="preview_file_id"]');
            if ($hiddenInput.length > 0) {
                var fileId = fileData.file_id || fileData.id;
                $hiddenInput.val(fileId);
                console.log('JCOGS Image Pro: Updated hidden input to:', fileId);
                
                // Trigger a preview refresh
                if (typeof window.refreshPreview === 'function') {
                    window.refreshPreview();
                }
            }
        };
        
        // Attach click handlers to the buttons
        $chooseExisting.off('click.jcogs-filepicker').on('click.jcogs-filepicker', function(e) {
            e.preventDefault();
            e.stopPropagation();
            console.log('JCOGS Image Pro: Choose Existing clicked');
            openFilePicker();
            return false;
        });
        
        $uploadNew.off('click.jcogs-filepicker').on('click.jcogs-filepicker', function(e) {
            e.preventDefault();
            e.stopPropagation();
            console.log('JCOGS Image Pro: Upload New clicked');
            openFilePicker();
            return false;
        });
        
        console.log('JCOGS Image Pro: File picker handlers installed successfully');
        
    } catch (error) {
        console.error('JCOGS Image Pro: Error setting up file picker:', error);
    }
}
