@props([
    'name' => 'conteudo',
    'label' => 'Conteúdo',
    'placeholder' => 'Digite o conteúdo...',
    'value' => '',
    'required' => false,
    'rows' => 10,
    'helpText' => 'Use @{{ variavel }} para inserir variáveis dinâmicas que serão preenchidas ao usar este texto',
])

<div>
    <label for="{{ $name }}" class="block text-sm font-medium text-white mb-1">
        {{ $label }}
        @if ($required)
            <span class="text-red-500">*</span>
        @endif
    </label>

    <textarea 
        id="{{ $name }}" 
        name="{{ $name }}"
        placeholder="{{ $placeholder }}"
        class="w-full @error($name) border-red-500 @enderror"
        {{ $required ? 'required' : '' }}>{{ old($name, $value) }}</textarea>

    @if ($helpText)
        <p class="text-xs text-white mt-2">{{ $helpText }}</p>
    @endif

    @error($name)
        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
    @enderror

    <!-- Slot para adicionar elementos após o editor (ex: VariableButtons) -->
    {{ $slot }}
</div>

<!-- TinyMCE Script -->
<script src="https://cdn.tiny.cloud/1/{{ config('services.tinymce.api_key') }}/tinymce/6/tinymce.min.js"
    referrerpolicy="origin"></script>
<script src="{{ asset('js/tinymce-plugins/exportdocx.js') }}"></script>
<script src="{{ asset('js/tinymce-plugins/contextualmenu.js') }}"></script>
<script>
    let tinyEditor;
    tinymce.init({
        selector: '#{{ $name }}',
        plugins: 'advlist anchor autolink charmap codesample emoticons fullscreen image link lists media pagebreak searchreplace table visualblocks wordcount exportdocx contextualmenu code',
        toolbar: 'fullscreen code | undo redo | exportdocx | blocks fontfamily fontsize | bold italic underline strikethrough removeformat | link image media table | align lineheight numlist bullist indent outdent | pagebreak | emoticons charmap ',
        height: 700,
        language: 'pt_BR',
        menubar: 'file edit view insert format tools table help',
        branding: false,
        lists_indent_on_tab: true,
        content_style: 'body { font-family:Arial,sans-serif; font-size:12px } ol { counter-reset: item; list-style: none; padding-left: 2.2em; } ol li { display: block; position: relative; } ol li::before { content: counters(item, ".") ". "; counter-increment: item; position: absolute; left: -2.2em; width: 2em; text-align: right; }',
        contextmenu: 'link image insertvariavel formatparagrafo inserirtabela copiarstilo limparformatacao expandirtexto resumirtexto reviasrtexto traducaotexto',
        setup: function (editor) {
            tinyEditor = editor;
            
            // Adicionar item customizado ao menu de contexto
            editor.ui.registry.addMenuItem('insertvariavel', {
                text: '📌 Inserir Variável',
                icon: 'insert-character',
                onAction: function () {
                    mostrarModalVariaveis();
                }
            });
            
            editor.on('change', function () {
                editor.save();
            });
        }
    });

    // Modal para inserir variáveis
    function inserirVariavelNoEditor(variable) {
        if (!variable || !tinyEditor) {
            return;
        }

        tinyEditor.execCommand('mceInsertContent', false, variable);
        tinyEditor.focus();
    }

    function mostrarModalVariaveis() {
        const variaveisContainer = document.querySelector('.variable-buttons');
        if (variaveisContainer) {
            // Criar um modal simples
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: white;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 10px 40px rgba(0,0,0,0.3);
                z-index: 10000;
                max-height: 80vh;
                overflow-y: auto;
                max-width: 600px;
            `;
            
            modal.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <h3 style="margin: 0; color: #333;">Inserir Variável</h3>
                    <button onclick="this.closest('[style*=position]').remove()" style="background: none; border: none; font-size: 20px; cursor: pointer;">×</button>
                </div>
                <div class="overflow-y-auto" id="variavel-modal-content"></div>
            `;
            
            document.body.appendChild(modal);
            
            // Copiar os botões de variáveis para o modal
            const varButtons = variaveisContainer.cloneNode(true);
            document.getElementById('variavel-modal-content').appendChild(varButtons);
            
            // Re-registrar os event listeners para os novos botões
            modal.querySelectorAll('.insert-variable').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const variable = this.getAttribute('data-variable');
                    inserirVariavelNoEditor(variable);
                    modal.remove();
                });
            });
            
            // Fechar ao clicar fora
            const overlay = document.createElement('div');
            overlay.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 9999;
            `;
            overlay.addEventListener('click', function() {
                modal.remove();
                overlay.remove();
            });
            document.body.appendChild(overlay);
        }
    }

    // Inserir variáveis no editor
    document.querySelectorAll('.insert-variable').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const variable = this.getAttribute('data-variable');
            inserirVariavelNoEditor(variable);
        });
    });
</script>