jQuery(document).ready(function($) {
    const showPlayerLabelCheckbox = $('#mementor_tts_show_player_label');
    const labelTextInput = $('#mementor_tts_player_label');
    const labelPositionSelect = $('#mementor_tts_player_label_position');
    const labelMarginInput = $('#mementor_tts_player_label_margin');
    const labelSizeInput = $('#mementor_tts_player_label_size');
    const labelWeightSelect = $('#mementor_tts_player_label_weight');
    const labelColorInput = $('#mementor_tts_player_label_color');
    const labelColorText = labelColorInput.next('.mementor-tts-color-text');
    const labelSettings = $('.label-settings');

    // Remove any inline display:none style
    labelSettings.removeAttr('style');

    function updatePreviewLabel() {
        const isVisible = showPlayerLabelCheckbox.prop('checked');
        
        // Remove any existing labels
        $('.mementor-tts-preview-player .mementor-tts-player-label').remove();
        $('.mementor-tts-player-label').hide();

        if (isVisible) {
            const text = labelTextInput.val() || 'Listen to the audio';
            const position = labelPositionSelect.val() || 'center';
            const margin = labelMarginInput.val() || '10';
            const size = labelSizeInput.val() || '14';
            const weight = labelWeightSelect.val() || '400';
            const color = labelColorInput.val() || '#1d2327';

            // Create and add new label for preview
            const previewPlayer = $('.mementor-tts-preview-player');
            const newLabel = $('<div>', {
                'class': 'mementor-tts-player-label text-' + position,
                'text': text,
                'css': {
                    'margin-bottom': margin + 'px',
                    'font-size': size + 'px',
                    'font-weight': weight,
                    'color': color,
                    'display': 'block'
                }
            });
            previewPlayer.find('.mementor-tts-player').before(newLabel);

            // Show all player labels
            $('.mementor-tts-player-label').show();
        }
    }

    // Event Listeners
    showPlayerLabelCheckbox.on('change', updatePreviewLabel);
    labelTextInput.on('input', updatePreviewLabel);
    labelPositionSelect.on('change', updatePreviewLabel);
    labelMarginInput.on('input', updatePreviewLabel);
    labelSizeInput.on('input', updatePreviewLabel);
    labelWeightSelect.on('change', updatePreviewLabel);

    // Handle color input changes
    labelColorInput.on('input', function() {
        labelColorText.val(this.value.toUpperCase());
        updatePreviewLabel();
    });

    // Handle color text input changes
    labelColorText.removeAttr('readonly').on('input', function() {
        const value = this.value;
        // Only update if it's a valid hex color
        if (/^#[0-9A-F]{6}$/i.test(value)) {
            labelColorInput.val(value.toUpperCase());
            updatePreviewLabel();
        }
    });

    // Initialize on page load
    updatePreviewLabel();
});
