/**
 * Enhanced QR Code Handler for WalletUpPro
 * - Supports advanced QR code styles and features
 * - Handles logo integration and processing
 * - Provides visual previews and live generation
 * - Manages downloads and clipboard operations
 */
(function($) {
    'use strict';
    
    // Main QR code handler object
    const WalletUpProQR = {
        init: function() {
            this.registerEventHandlers();
            this.initializeExistingQRs();
        },
        
        registerEventHandlers: function() {
            // Download event handlers
            $(document).on('click', '.walletup-qrcode-download', function(e) {
                e.preventDefault();
                
                const container = $(this).closest('.walletup-qrcode-container');
                const id = container.attr('id');
                const img = container.find('.walletup-qrcode-image');
                
                if (img.length) {
                    WalletUpProQR.downloadQRCode(img.attr('src'), id);
                }
            });
            
            // Generate event handlers
            $(document).on('click', '.walletup-qrcode-generate', function(e) {
                e.preventDefault();
                
                const container = $(this).closest('.walletup-qrcode-container');
                const id = container.attr('id');
                
                WalletUpProQR.generateQRCode(id);
            });
            
            // Copy event handlers
            $(document).on('click', '.walletup-qrcode-copy', function(e) {
                e.preventDefault();
                
                const container = $(this).closest('.walletup-qrcode-container');
                const id = container.attr('id');
                const dataInput = container.find('#' + id + '-data');
                
                if (dataInput.length) {
                    WalletUpProQR.copyToClipboard(dataInput.val());
                    
                    // Show feedback
                    const originalText = $(this).text();
                    $(this).text(walletUpQRCode.i18n.copied);
                    
                    setTimeout(() => {
                        $(this).text(originalText);
                    }, 2000);
                }
            });
            
            // Style selector handlers
            $(document).on('click', '.walletup-style-option', function(e) {
                const container = $(this).closest('.walletup-qrcode-container');
                const value = $(this).data('style');
                
                // Update hidden input
                container.find('.walletup-qrcode-style-input').val(value);
                
                // Update visual state
                container.find('.walletup-style-option').removeClass('selected');
                $(this).addClass('selected');
            });
            
            // Toggle sections
            $(document).on('click', '.walletup-toggle-advanced', function(e) {
                e.preventDefault();
                $(this).closest('.walletup-qrcode-advanced-options')
                    .find('.walletup-advanced-options-content')
                    .slideToggle(200);
                $(this).toggleClass('open');
            });
            
            $(document).on('click', '.walletup-toggle-logo', function(e) {
                e.preventDefault();
                $(this).closest('.walletup-qrcode-logo-options')
                    .find('.walletup-logo-options-content')
                    .slideToggle(200);
                $(this).toggleClass('open');
            });
            
            // Range input value display
            $(document).on('input', 'input[type="range"]', function() {
                const value = $(this).val();
                $(this).closest('.walletup-qrcode-field')
                    .find('.walletup-range-current-value')
                    .text(value);
            });
            
            // Logo preview on change
            $(document).on('change', '.walletup-qrcode-logo-input', function(e) {
                const file = e.target.files[0];
                const container = $(this).closest('.walletup-qrcode-container');
                
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        container.find('.walletup-logo-preview-container')
                            .show()
                            .find('.walletup-logo-preview-img')
                            .attr('src', e.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });
            
            // Logo punchout preview
            $(document).on('change', '.walletup-qrcode-logo-punchout', function() {
                const checked = $(this).prop('checked');
                const container = $(this).closest('.walletup-qrcode-container');
                
                if (checked) {
                    container.find('.walletup-logo-preview-container')
                        .addClass('walletup-logo-punchout-preview');
                } else {
                    container.find('.walletup-logo-preview-container')
                        .removeClass('walletup-logo-punchout-preview');
                }
            });
        },
        
        initializeExistingQRs: function() {
            // Initialize color pickers if Spectrum is available
            if ($.fn.spectrum) {
                $('.walletup-qrcode-color-input').spectrum({
                    type: 'component',
                    showInput: true,
                    showInitial: true,
                    allowEmpty: false,
                    preferredFormat: 'hex'
                });
                
                $('.walletup-qrcode-bg-input').spectrum({
                    type: 'component',
                    showInput: true,
                    showInitial: true,
                    allowEmpty: false,
                    preferredFormat: 'hex'
                });
            }
        },
        
        generateQRCode: function(containerId) {
            const container = $('#' + containerId);
            if (!container.length) return;
            // Get all input values
            const data = container.find('#' + containerId + '-data').val();
            
            if (!data) {
                this.showError(container, 'Please enter data to encode');
                return;
            }
            
            // Create form data
            const formData = new FormData();
            formData.append('action', 'walletup_live_qr_preview');
            formData.append('nonce', walletUpQRCode.nonce);
            formData.append('data', data);
            
            // Add basic settings
            const size = container.find('#' + containerId + '-size').val() || 'medium';
            const color = container.find('#' + containerId + '-color').val() || '#674FBF';
            const background = container.find('#' + containerId + '-background').val() || '#F4F4FF';
            const style = container.find('#' + containerId + '-style').val() || 'rounded';
            
            formData.append('size', size);
            formData.append('color', color);
            formData.append('background', background);
            formData.append('style', style);
            
            // Add advanced settings if available
            if (container.find('#' + containerId + '-error-level').length) {
                formData.append('errorLevel', container.find('#' + containerId + '-error-level').val() || 'high');
            }
            
            if (container.find('#' + containerId + '-margin').length) {
                formData.append('margin', container.find('#' + containerId + '-margin').val() || '10');
            }
            
            if (container.find('#' + containerId + '-opacity').length) {
                formData.append('opacity', container.find('#' + containerId + '-opacity').val() || '100');
            }
            
            if (container.find('#' + containerId + '-round-mode').length) {
                formData.append('roundMode', container.find('#' + containerId + '-round-mode').val() || 'margin');
            }
                        // Add these to the form data in the generateQRCode function
            if (container.find('#' + containerId + '-round-finder').length) {
                formData.append('roundFinderPatterns', container.find('#' + containerId + '-round-finder').prop('checked'));
            }

            // Add logo white border options
            if (container.find('#' + containerId + '-logo-border').length) {
                formData.append('logoWhiteBorder', container.find('#' + containerId + '-logo-border').prop('checked'));
                
                if (container.find('#' + containerId + '-border-size').length) {
                    formData.append('logoBorderSize', container.find('#' + containerId + '-border-size').val() || '2');
                }
            }

                        // Add logo if available
            const logoInput = container.find('#' + containerId + '-logo')[0];
            if (logoInput && logoInput.files.length > 0) {
                formData.append('logo', logoInput.files[0]);
                
                // Add logo settings if available
                if (container.find('#' + containerId + '-logo-size').length) {
                    formData.append('logoSize', container.find('#' + containerId + '-logo-size').val() || '20');
                }
                
                if (container.find('#' + containerId + '-logo-position').length) {
                    formData.append('logoPosition', container.find('#' + containerId + '-logo-position').val() || 'center');
                }
                
                if (container.find('#' + containerId + '-logo-punchout').length) {
                    formData.append('logoPunchout', container.find('#' + containerId + '-logo-punchout').prop('checked'));
                }
                
                if (container.find('#' + containerId + '-logo-aspect').length) {
                    formData.append('logoAspect', container.find('#' + containerId + '-logo-aspect').prop('checked'));
                }
            }
            
            // Show loading state
            const targetElement = container.find('#' + containerId + '-preview');
            this.showLoading(targetElement);
            
            // Send AJAX request
            $.ajax({
                url: walletUpQRCode.ajaxUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: (response) => {
                    if (response.success && response.data.qrImage) {
                        this.updateQRPreview(targetElement, response.data.qrImage, data);
                        container.find('.walletup-qrcode-download-container').show();
                    } else {
                        this.showError(targetElement, response.data?.message || 'Failed to generate QR code');
                    }
                },
                error: (xhr) => {
                    this.showError(targetElement, 'Network error: ' + xhr.statusText);
                }
            });
        },
        
        downloadQRCode: function(src, id) {
            // Create anchor element
            const link = document.createElement('a');
            link.href = src;
            
            // Generate filename
            const date = new Date().toISOString().slice(0, 10);
            link.download = 'qrcode-' + (id || 'walletup') + '-' + date + '.png';
            
            // Trigger download
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },
        
        copyToClipboard: function(text) {
            if (!text) return;
            
            // Use modern clipboard API if available
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(text).catch(err => {
                    console.error('Could not copy text: ', err);
                });
            } else {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = text;
                
                // Make the textarea out of viewport
                textArea.style.position = 'fixed';
                textArea.style.left = '-999999px';
                textArea.style.top = '-999999px';
                document.body.appendChild(textArea);
                
                textArea.focus();
                textArea.select();
                
                try {
                    document.execCommand('copy');
                } catch (err) {
                    console.error('Could not copy text: ', err);
                }
                
                document.body.removeChild(textArea);
            }
        },
        
        showLoading: function(element) {
            if (!element.length) return;
            
            element.html(
                '<div class="walletup-qrcode-loading">' +
                '<div class="walletup-loading"></div>' +
                walletUpQRCode.i18n.processing +
                '</div>'
            );
        },
        
        showError: function(element, message) {
            if (element.is('.walletup-qrcode-container')) {
                // If container, append error message
                element.append(
                    '<div class="walletup-qrcode-error">' +
                    message +
                    '</div>'
                );
                
                // Auto-remove after 5 seconds
                setTimeout(() => {
                    element.find('.walletup-qrcode-error').fadeOut(300, function() {
                        $(this).remove();
                    });
                }, 5000);
            } else {
                // If preview element, replace content
                element.html(
                    '<div class="walletup-qrcode-error">' +
                    '<span class="walletup-error-icon"></span>' +
                    message +
                    '</div>'
                );
            }
        },
        
        updateQRPreview: function(element, src, data) {
            const img = $('<img>', {
                'src': src,
                'alt': 'QR Code',
                'class': 'walletup-qrcode-image',
                'data-content': data
            });
            
            element.empty().append(img);
        }
    };
    
    // Initialize when document is ready
    $(document).ready(function() {
        WalletUpProQR.init();
    });
    
})(jQuery);