jQuery(function($){
    // Ränge Editor
    let raw = $('#mcss_ranks_json').val();
    let ranks = [];
    try { ranks = JSON.parse(raw || '[]'); } catch(e) { ranks = []; }

    function renderRanks() {
        let container = $('#mcss-ranks-editor');
        container.empty();
        ranks.forEach(function(r, i){
            let row = $('<div class="mcss-rank-row" data-idx="'+i+'" style="display:flex;gap:8px;margin-bottom:8px;align-items:center;"></div>');
            row.append('<input class="mcss-rank-name" placeholder="Rangname" style="width:140px;" value="'+ (r.name || '') +'"/>');
            row.append('<input class="mcss-rank-groups" placeholder="LuckPerms Gruppen (kommagetrennt)" style="width:320px;" value="'+ (r.groups || '') +'"/>');
            row.append('<input class="mcss-rank-color" type="color" value="'+ (r.color || '#6c5ce7') +'" />');
            row.append('<button type="button" class="button mcss-remove-rank">Entfernen</button>');
            container.append(row);
        });
        container.append('<p><button type="button" id="mcss-add-rank" class="button">Rang hinzufügen</button></p>');
        syncRanks();
    }

    function syncRanks() {
        $('#mcss-ranks-editor .mcss-rank-row').each(function(i){
            ranks[i].name = $(this).find('.mcss-rank-name').val();
            ranks[i].groups = $(this).find('.mcss-rank-groups').val();
            ranks[i].color = $(this).find('.mcss-rank-color').val();
        });
        $('#mcss_ranks_json').val(JSON.stringify(ranks));
    }

    $(document).on('click', '#mcss-add-rank', function(){
        ranks.push({name:'Neuer Rang', groups:'', color:'#6c5ce7'});
        renderRanks();
    });
    $(document).on('click', '.mcss-remove-rank', function(){
        let idx = $(this).closest('.mcss-rank-row').data('idx');
        ranks.splice(idx, 1);
        renderRanks();
    });
    $(document).on('input', '.mcss-rank-name, .mcss-rank-groups, .mcss-rank-color', syncRanks);

    // Logo Uploader
    var mediaUploader;
    $('#mcss_upload_logo_button').on('click', function(e) {
        e.preventDefault();
        if (mediaUploader) { mediaUploader.open(); return; }
        mediaUploader = wp.media({
            title: 'Server Logo auswählen',
            button: { text: 'Als Logo verwenden' },
            multiple: false
        });
        mediaUploader.on('select', function() {
            var attachment = mediaUploader.state().get('selection').first().toJSON();
            $('#mcss_server_logo_id').val(attachment.id);
            $('#mcss_server_logo_url').val('');
            $('#mcss-logo-preview img').attr('src', attachment.url);
            $('#mcss_remove_logo_button').show();
        });
        mediaUploader.open();
    });

    $('#mcss_remove_logo_button').on('click', function() {
        $('#mcss_server_logo_id').val('0');
        $('#mcss_server_logo_url').val('');
        $('#mcss-logo-preview img').attr('src', '<?php echo MCSS_URL; ?>img/default-server-logo.png');
        $(this).hide();
    });

    $('#mcss_server_logo_url').on('input', function() {
        var url = $(this).val().trim();
        if (url) {
            $('#mcss-logo-preview img').attr('src', url);
            $('#mcss_server_logo_id').val('0');
            $('#mcss_remove_logo_button').show();
        }
    });

    renderRanks();
});