jQuery(document).ready(function($) {
    // Medienbibliothek für neues Teammitglied
    var newTeamcardFrame;
    
    $('#new-teamcard-bild-button').on('click', function(e) {
        e.preventDefault();
        
        if (newTeamcardFrame) {
            newTeamcardFrame.open();
            return;
        }
        
        newTeamcardFrame = wp.media({
            title: 'Bild auswählen',
            button: { text: 'Verwenden' },
            multiple: false
        });
        
        newTeamcardFrame.on('select', function() {
            var attachment = newTeamcardFrame.state().get('selection').first().toJSON();
            $('#new-teamcard-bild-id').val(attachment.id);
            $('#new-teamcard-bild-vorschau').attr('src', attachment.url).show();
        });
        
        newTeamcardFrame.open();
    });
    
    // Medienbibliothek für vorhandene Teammitglieder
    var teamcardFrame;
    
    $(document).on('click', '.teamcard-bild-button', function(e) {
        e.preventDefault();
        
        var button = $(this);
        var teamcardId = button.data('id');
        
        if (teamcardFrame) {
            teamcardFrame.open();
            return;
        }
        
        teamcardFrame = wp.media({
            title: 'Bild auswählen',
            button: { text: 'Verwenden' },
            multiple: false
        });
        
        teamcardFrame.on('select', function() {
            var attachment = teamcardFrame.state().get('selection').first().toJSON();
            
            $.ajax({
                url: teamcard_data.ajax_url,
                type: 'POST',
                data: {
                    action: 'update_teamcard_image',
                    id: teamcardId,
                    bild_id: attachment.id,
                    nonce: teamcard_data.nonce
                },
                success: function(response) {
                    if (response.success) {
                        var container = button.siblings('.image-preview-container');
                        container.html('<img src="' + response.data.bild_url + '" class="teamcard-bild-vorschau">');
                        showMessage('Bild erfolgreich aktualisiert', 'success');
                    }
                }
            });
        });
        
        teamcardFrame.open();
    });
    
    // Neues Teammitglied hinzufügen
    $('#add-teamcard-button').on('click', function() {
        var name = $('#new-teamcard-name').val();
        var funktion = $('#new-teamcard-funktion').val();
        var zustaendigkeit = $('#new-teamcard-zustaendigkeit').val();
        var bildId = $('#new-teamcard-bild-id').val();
        
        if (!name) {
            showMessage('Bitte gib einen Namen ein', 'error');
            return;
        }
        
        $.ajax({
            url: teamcard_data.ajax_url,
            type: 'POST',
            data: {
                action: 'add_teamcard',
                name: name,
                funktion: funktion,
                zustaendigkeit: zustaendigkeit,
                bild_id: bildId,
                nonce: teamcard_data.nonce
            },
            success: function(response) {
                if (response.success) {
                    var bildHtml = '';
                    if (response.data.bild_url) {
                        bildHtml = '<img src="' + response.data.bild_url + '" class="teamcard-bild-vorschau">';
                    }
                    
                    var newRow = '<tr data-id="' + response.data.id + '" class="teamcard-item">' +
                        '<td class="teamcard-bild">' +
                        '<div class="image-preview-container">' + bildHtml + '</div>' +
                        '<button type="button" class="button teamcard-bild-button" data-id="' + response.data.id + '">Bild ändern</button>' +
                        '</td>' +
                        '<td><div class="editable" data-field="title" data-id="' + response.data.id + '">' + name + '</div></td>' +
                        '<td><div class="editable" data-field="funktion" data-id="' + response.data.id + '">' + funktion + '</div></td>' +
                        '<td><div class="editable" data-field="zustaendigkeit" data-id="' + response.data.id + '">' + zustaendigkeit + '</div></td>' +
                        '<td><button type="button" class="button button-small teamcard-delete" data-id="' + response.data.id + '">Löschen</button></td>' +
                        '</tr>';
                    
                    $('#teamcard-list').append(newRow);
                    
                    // Formular zurücksetzen
                    $('#new-teamcard-name').val('');
                    $('#new-teamcard-funktion').val('');
                    $('#new-teamcard-zustaendigkeit').val('');
                    $('#new-teamcard-bild-id').val('');
                    $('#new-teamcard-bild-vorschau').attr('src', '').hide();
                    
                    showMessage('Teammitglied erfolgreich hinzugefügt', 'success');
                } else {
                    showMessage(response.data.message, 'error');
                }
            }
        });
    });
    
    // Inline-Bearbeitung
    $(document).on('click', '.editable', function() {
        var element = $(this);
        var currentText = element.text();
        
        element.html('<input type="text" class="inline-edit" value="' + currentText + '">');
        element.find('input').focus().select();
    });
    
    $(document).on('blur', '.inline-edit', function() {
        var input = $(this);
        var element = input.parent();
        var newValue = input.val();
        var field = element.data('field');
        var id = element.data('id');
        
        $.ajax({
            url: teamcard_data.ajax_url,
            type: 'POST',
            data: {
                action: 'update_teamcard',
                id: id,
                field: field,
                value: newValue,
                nonce: teamcard_data.nonce
            },
            success: function(response) {
                if (response.success) {
                    element.text(newValue);
                    showMessage('Erfolgreich aktualisiert', 'success');
                }
            }
        });
    });
    
    $(document).on('keypress', '.inline-edit', function(e) {
        if (e.which === 13) {
            $(this).blur();
        }
    });
    
    // Teammitglied löschen
    $(document).on('click', '.teamcard-delete', function() {
        if (!confirm('Möchtest du dieses Teammitglied wirklich löschen?')) {
            return;
        }
        
        var button = $(this);
        var id = button.data('id');
        
        $.ajax({
            url: teamcard_data.ajax_url,
            type: 'POST',
            data: {
                action: 'delete_teamcard',
                id: id,
                nonce: teamcard_data.nonce
            },
            success: function(response) {
                if (response.success) {
                    button.closest('tr').remove();
                    showMessage('Teammitglied erfolgreich gelöscht', 'success');
                } else {
                    showMessage(response.data.message, 'error');
                }
            }
        });
    });
    
    // Drag & Drop Sortierung
    $('#teamcard-list').sortable({
        handle: 'td:first',
        placeholder: 'ui-state-highlight',
        update: function(event, ui) {
            var order = [];
            $('.teamcard-item').each(function() {
                order.push($(this).data('id'));
            });
            
            $.ajax({
                url: teamcard_data.ajax_url,
                type: 'POST',
                data: {
                    action: 'update_teamcard_order',
                    order: order,
                    nonce: teamcard_data.nonce
                },
                success: function(response) {
                    if (response.success) {
                        showMessage('Reihenfolge erfolgreich aktualisiert', 'success');
                    }
                }
            });
        }
    });
    
    // Hilfsfunktion für Nachrichten
    function showMessage(message, type) {
        var messageElement = $('#teamcard-message');
        messageElement.removeClass('notice-success notice-error').addClass('notice-' + type);
        messageElement.html('<p>' + message + '</p>').show();
        
        setTimeout(function() {
            messageElement.fadeOut();
        }, 3000);
    }
});