@props([
    'height' => '300px',
    'placeholder' => '',
    'editorId' => 'wysiwyg-editor-' . uniqid()
])

<div 
    x-data="{
        value: @entangle($attributes->wire('model')),
        editor: null,
        imageSelectedHandler: null,
        init() {
            tinymce.init({
                selector: '#{{ $editorId }}',
                license_key: 'gpl',
                height: '{{ $height }}',
                placeholder: '{{ $placeholder }}',
                menubar: false,
                branding: false,
                promotion: false,
                plugins: 'lists link',
                toolbar: 'undo redo | blocks | bold italic underline | bullist numlist | link mediaPicker | removeformat',
                block_formats: 'Paragraf=p;Başlık 2=h2;Başlık 3=h3;Başlık 4=h4',
                setup: (editor) => {
                    this.editor = editor;
                    
                    editor.on('init', () => {
                        editor.setContent(this.value || '');
                    });

                    editor.on('change keyup input', () => {
                        this.value = editor.getContent();
                    });

                    // Görsel Ekleme Özel Butonu
                    editor.ui.registry.addButton('mediaPicker', {
                        text: 'Görsel Ekle',
                        icon: 'image',
                        onAction: () => {
                            // Modal açılışı için Livewire eventi fırlat
                            Livewire.dispatch('open-media-picker', {
                                editorId: '{{ $editorId }}'
                            });
                        }
                    });
                }
            });

            this.$watch('value', (newVal) => {
                if (this.editor && this.editor.getContent() !== newVal) {
                    this.editor.setContent(newVal || '');
                }
            });

            // Medya modalından görsel seçildiğinde tetiklenir
            this.imageSelectedHandler = (e) => {
                if (e.detail.editorId === '{{ $editorId }}' && this.editor) {
                    this.editor.insertContent(`<img src='${e.detail.url}' alt='${e.detail.alt}' loading='lazy' />`);
                    this.editor.fire('change');
                }
            };
            window.addEventListener('image-selected', this.imageSelectedHandler);
        },
        destroy() {
            if (this.imageSelectedHandler) {
                window.removeEventListener('image-selected', this.imageSelectedHandler);
            }
            if (this.editor) {
                this.editor.remove();
            }
        }
    }"
    wire:ignore
    class="admin-wysiwyg-editor-wrapper"
>
    <textarea id="{{ $editorId }}" class="form-control wysiwyg-editor"></textarea>
</div>