jQuery(document).ready(function($) {
    // Variables to store parsed data
    let parsedData = null;
    let yamlFields = [];
    
    // Parse Markdown URL
    $('#parse-markdown-url').on('click', function() {
        const url = $('#markdown-url').val();
        
        if (!url) {
            showMessage('error', markdownParserWp.i18n.parseError + ': ' + 'URL ist leer');
            return;
        }
        
        // Show loading message
        showMessage('info', markdownParserWp.i18n.loading);
        
        // Send AJAX request
        $.ajax({
            url: markdownParserWp.ajaxUrl,
            type: 'POST',
            data: {
                action: 'parse_markdown_url',
                nonce: markdownParserWp.nonce,
                url: url
            },
            success: function(response) {
                if (response.success) {
                    // Hide message
                    hideMessage();
                    
                    // Store parsed data
                    parsedData = response.data;
                    
                    // Display JSON and Markdown content
                    $('#json-content').text(parsedData.json);
                    $('#markdown-content').text(parsedData.markdown);
                    
                    // Show results and create post sections
                    $('#markdown-parser-wp-results').show();
                    $('#markdown-parser-wp-create-post').show();
                    
                    // Extract YAML fields for field mapping
                    extractYamlFields(parsedData.metadata);
                    populateYamlFieldSelects();
                    
                    // Set default field mappings
                    setDefaultFieldMappings();
                    
                    // Update field previews
                    updateAllFieldPreviews();
                } else {
                    showMessage('error', markdownParserWp.i18n.parseError + ': ' + response.data.message);
                }
            },
            error: function() {
                showMessage('error', markdownParserWp.i18n.parseError);
            }
        });
    });
    
    // Extract YAML fields recursively
    function extractYamlFields(obj, prefix = '') {
        for (const key in obj) {
            if (obj.hasOwnProperty(key)) {
                const value = obj[key];
                const fieldPath = prefix ? prefix + '.' + key : key;
                
                if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
                    // Recurse into nested objects
                    extractYamlFields(value, fieldPath);
                } else {
                    // Add field path to list
                    yamlFields.push(fieldPath);
                }
            }
        }
    }
    
    // Populate YAML field selects
    function populateYamlFieldSelects() {
        $('.yaml-field-select').each(function() {
            const select = $(this);
            select.empty();
            
            // Add empty option
            select.append($('<option>', {
                value: '',
                text: '-- Feld auswählen --'
            }));
            
            // Add options for each YAML field
            yamlFields.forEach(function(field) {
                select.append($('<option>', {
                    value: field,
                    text: field
                }));
            });
        });
    }
    
    // Set default field mappings
    function setDefaultFieldMappings() {
        const defaultMappings = {
            'post_title': ['title', 'name'],
            'post_excerpt': ['summary', 'description'],
            'post_date': ['datePublished'],
            'post_name': ['url'],
            'post_tag': ['keywords']
        };
        
        // Clear existing field mappings
        $('#field-mapping-container').empty();
        
        // Add default mappings
        for (const wpField in defaultMappings) {
            const yamlFieldOptions = defaultMappings[wpField];
            let yamlField = '';
            
            // Find first matching YAML field
            for (let i = 0; i < yamlFieldOptions.length; i++) {
                if (yamlFields.includes(yamlFieldOptions[i])) {
                    yamlField = yamlFieldOptions[i];
                    break;
                }
            }
            
            // Add field mapping row
            addFieldMappingRow(wpField, yamlField);
        }
    }
    
    // Add field mapping row
    function addFieldMappingRow(wpField = '', yamlField = '') {
        const row = $(`
            <div class="field-mapping-row">
                <div class="field-mapping-wp">
                    <label>WordPress-Feld</label>
                    <select name="wp_field[]" class="wp-field-select">
                        <option value="post_title" ${wpField === 'post_title' ? 'selected' : ''}>Titel</option>
                        <option value="post_excerpt" ${wpField === 'post_excerpt' ? 'selected' : ''}>Auszug</option>
                        <option value="post_date" ${wpField === 'post_date' ? 'selected' : ''}>Datum</option>
                        <option value="post_name" ${wpField === 'post_name' ? 'selected' : ''}>Slug</option>
                        <option value="post_author" ${wpField === 'post_author' ? 'selected' : ''}>Autor</option>
                        <option value="post_tag" ${wpField === 'post_tag' ? 'selected' : ''}>Schlagwörter</option>
                    </select>
                </div>
                <div class="field-mapping-yaml">
                    <label>YAML/JSON-Feld</label>
                    <select name="yaml_field[]" class="yaml-field-select"></select>
                </div>
                <div class="field-mapping-preview">
                    <label>Vorschau</label>
                    <div class="field-preview"></div>
                </div>
                <div class="field-mapping-actions">
                    <button type="button" class="button remove-field-mapping">Entfernen</button>
                </div>
            </div>
        `);
        
        // Add row to container
        $('#field-mapping-container').append(row);
        
        // Populate YAML field select
        const yamlSelect = row.find('.yaml-field-select');
        yamlSelect.empty();
        
        // Add empty option
        yamlSelect.append($('<option>', {
            value: '',
            text: '-- Feld auswählen --'
        }));
        
        // Add options for each YAML field
        yamlFields.forEach(function(field) {
            yamlSelect.append($('<option>', {
                value: field,
                text: field,
                selected: field === yamlField
            }));
        });
        
        // Add event listeners
        row.find('.yaml-field-select').on('change', function() {
            updateFieldPreview(row);
        });
        
        row.find('.remove-field-mapping').on('click', function() {
            row.remove();
        });
        
        // Update preview
        updateFieldPreview(row);
    }
    
    // Add field mapping button
    $('#add-field-mapping').on('click', function() {
        addFieldMappingRow();
    });
    
    // Update field preview
    function updateFieldPreview(row) {
        const yamlField = row.find('.yaml-field-select').val();
        const previewElement = row.find('.field-preview');
        
        if (!yamlField || !parsedData) {
            previewElement.text('');
            return;
        }
        
        // Show loading
        previewElement.text('Laden...');
        
        // Get preview via AJAX
        $.ajax({
            url: markdownParserWp.ajaxUrl,
            type: 'POST',
            data: {
                action: 'get_field_mapping_preview',
                nonce: markdownParserWp.nonce,
                url: $('#markdown-url').val(),
                yaml_field: yamlField
            },
            success: function(response) {
                if (response.success) {
                    previewElement.text(response.data.preview);
                } else {
                    previewElement.text('Fehler: ' + response.data.message);
                }
            },
            error: function() {
                previewElement.text('Fehler beim Laden der Vorschau');
            }
        });
    }
    
    // Update all field previews
    function updateAllFieldPreviews() {
        $('.field-mapping-row').each(function() {
            updateFieldPreview($(this));
        });
    }
    
    // Create post
    $('#create-post').on('click', function() {
        const url = $('#markdown-url').val();
        
        if (!url) {
            showMessage('error', 'URL ist leer');
            return;
        }
        
        // Get options
        const options = {
            post_type: $('#post-type').val(),
            post_status: $('#post-status').val(),
            category_id: $('#category-id').val(),
            import_images: $('#import-images').is(':checked')
        };
        
        // Get field mappings
        const fieldMapping = [];
        $('.field-mapping-row').each(function() {
            const wpField = $(this).find('.wp-field-select').val();
            const yamlField = $(this).find('.yaml-field-select').val();
            
            if (wpField && yamlField) {
                fieldMapping.push({
                    wp_field: wpField,
                    yaml_field: yamlField
                });
            }
        });
        
        // Show loading message
        showMessage('info', markdownParserWp.i18n.loading);
        
        // Send AJAX request
        $.ajax({
            url: markdownParserWp.ajaxUrl,
            type: 'POST',
            data: {
                action: 'create_post_from_markdown',
                nonce: markdownParserWp.nonce,
                url: url,
                post_type: options.post_type,
                post_status: options.post_status,
                category_id: options.category_id,
                import_images: options.import_images,
                field_mapping: fieldMapping
            },
            success: function(response) {
                if (response.success) {
                    showMessage('success', response.data.message);
                } else {
                    showMessage('error', markdownParserWp.i18n.createError + ': ' + response.data.message);
                }
            },
            error: function() {
                showMessage('error', markdownParserWp.i18n.createError);
            }
        });
    });
    
    // Tab navigation
    $('.markdown-parser-wp-tab-button').on('click', function() {
        const tab = $(this).data('tab');
        
        // Update active tab button
        $('.markdown-parser-wp-tab-button').removeClass('active');
        $(this).addClass('active');
        
        // Update active tab content
        $('.markdown-parser-wp-tab-content').removeClass('active');
        $('.markdown-parser-wp-tab-content[data-tab="' + tab + '"]').addClass('active');
    });
    
    // Copy buttons
    $('#copy-json').on('click', function() {
        copyToClipboard($('#json-content').text());
        showMessage('success', 'JSON in Zwischenablage kopiert');
    });
    
    $('#copy-markdown').on('click', function() {
        copyToClipboard($('#markdown-content').text());
        showMessage('success', 'Markdown in Zwischenablage kopiert');
    });
    
    // Download buttons
    $('#download-json').on('click', function() {
        downloadText($('#json-content').text(), 'metadata.json', 'application/json');
    });
    
    $('#download-markdown').on('click', function() {
        downloadText($('#markdown-content').text(), 'content.md', 'text/markdown');
    });
    
    // Helper functions
    function showMessage(type, message) {
        const messageElement = $('#markdown-parser-wp-message');
        messageElement.removeClass('error info success');
        messageElement.addClass(type);
        messageElement.html(message);
        messageElement.show();
    }
    
    function hideMessage() {
        $('#markdown-parser-wp-message').hide();
    }
    
    function copyToClipboard(text) {
        const textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
    }
    
    function downloadText(text, filename, mimeType) {
        const blob = new Blob([text], { type: mimeType });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }
});