@props([
    'placeholder' => 'Escribe tu comentario...',
    'maxLength' => 5000,
    'allowImages' => true,
    'allowAttachments' => true,
    'ticketId' => null,
    'value' => ''
])

<div x-data="commentEditor({
    placeholder: '{{ $placeholder }}',
    maxLength: {{ $maxLength }},
    allowImages: {{ $allowImages ? 'true' : 'false' }},
    allowAttachments: {{ $allowAttachments ? 'true' : 'false' }},
    ticketId: {{ $ticketId ?? 'null' }},
    initialContent: `{{ addslashes($value) }}`
})" 
     class="comment-editor bg-white border border-gray-300 rounded-lg focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500">
    
    <!-- Toolbar -->
    <div class="border-b border-gray-200 px-3 py-2">
        <x-tickets.comments.editor-toolbar />
    </div>

    <!-- Editor Area -->
    <div class="relative px-4 py-3 min-h-[120px] max-h-[300px] overflow-y-auto">
        <div x-ref="editorElement" class="prose prose-sm max-w-none min-h-[80px]">
            <!-- El editor se inicializará aquí via JavaScript -->
        </div>
        
        <!-- Placeholder -->
        <div x-show="!content" class="absolute top-3 left-4 text-gray-400 pointer-events-none">
            {{ $placeholder }}
        </div>
    </div>

    <!-- Footer -->
    <div class="px-4 py-2 border-t border-gray-200 bg-gray-50 flex justify-between items-center">
        <!-- Contador -->
        <div class="text-sm" 
             :class="characterCount > maxLength ? 'text-red-500' : 'text-gray-500'">
            <span x-text="characterCount"></span>/<span x-text="maxLength"></span> caracteres
        </div>

        <!-- Botones de acción -->
        <div class="flex items-center space-x-2">
            @if($allowImages)
            <x-tickets.comments.editor-image-handler />
            @endif

            @if($allowAttachments)
            <x-tickets.comments.editor-attachments />
            @endif
        </div>
    </div>

    <!-- Preview -->
    <x-tickets.comments.editor-preview />
</div>

<script>
function commentEditor(config) {
    return {
        editor: null,
        content: config.initialContent,
        characterCount: 0,
        images: [],
        attachments: [],
        uploading: false,

        async init() {
            // Cargar Tiptap dinámicamente
            const { Editor } = await import('@tiptap/core');
            const { StarterKit } = await import('@tiptap/starter-kit');
            const { Image } = await import('@tiptap/extension-image');

            this.editor = new Editor({
                element: this.$refs.editorElement,
                extensions: [
                    StarterKit.configure({
                        heading: false,
                        codeBlock: false,
                        blockquote: false,
                    }),
                    Image.configure({
                        HTMLAttributes: {
                            class: 'editor-image max-w-full h-auto rounded',
                        },
                    }),
                ],
                content: this.content,
                onUpdate: ({ editor }) => {
                    this.content = editor.getHTML();
                    this.characterCount = editor.getText().length;
                    this.$dispatch('editor-update', {
                        content: this.content,
                        text: editor.getText(),
                        images: this.images,
                        attachments: this.attachments
                    });
                },
                onCreate: ({ editor }) => {
                    this.characterCount = editor.getText().length;
                },
            });
        },

        // Métodos de formato
        toggleBold() {
            this.editor.chain().focus().toggleBold().run();
        },

        toggleItalic() {
            this.editor.chain().focus().toggleItalic().run();
        },

        toggleStrike() {
            this.editor.chain().focus().toggleStrike().run();
        },

        toggleBulletList() {
            this.editor.chain().focus().toggleBulletList().run();
        },

        toggleOrderedList() {
            this.editor.chain().focus().toggleOrderedList().run();
        },

        // Upload de imágenes
        async uploadImage(file) {
            this.uploading = true;
            
            try {
                const formData = new FormData();
                formData.append('image', file);
                formData.append('ticket_id', config.ticketId);

                const response = await fetch('/api/upload/image', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: formData,
                });

                const data = await response.json();

                if (data.success) {
                    // Insertar imagen en el editor
                    this.editor.chain().focus().setImage({ 
                        src: data.url,
                        alt: data.original_name
                    }).run();

                    this.images.push({
                        id: data.id,
                        url: data.url,
                        name: data.original_name,
                        path: data.path
                    });

                    this.$dispatch('image-uploaded', data);
                }
            } catch (error) {
                console.error('Error uploading image:', error);
                this.$dispatch('upload-error', { type: 'image', error: error.message });
            } finally {
                this.uploading = false;
            }
        },

        // Upload de archivos
        async uploadAttachment(file) {
            try {
                const formData = new FormData();
                formData.append('file', file);
                formData.append('ticket_id', config.ticketId);

                const response = await fetch('/api/upload/attachment', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: formData,
                });

                const data = await response.json();

                if (data.success) {
                    this.attachments.push({
                        id: data.id,
                        name: data.original_name,
                        size: file.size,
                        url: data.url,
                        path: data.path,
                        mime_type: file.type
                    });

                    this.$dispatch('attachment-uploaded', data);
                }
            } catch (error) {
                console.error('Error uploading attachment:', error);
                this.$dispatch('upload-error', { type: 'attachment', error: error.message });
            }
        },

        // Remover archivos
        removeAttachment(index) {
            const attachment = this.attachments[index];
            this.attachments.splice(index, 1);
            this.$dispatch('attachment-removed', attachment);
        },

        // Obtener datos para enviar
        getData() {
            return {
                content: this.content,
                images: this.images,
                attachments: this.attachments
            };
        },

        // Limpiar editor
        clear() {
            this.editor.commands.clearContent();
            this.images = [];
            this.attachments = [];
            this.characterCount = 0;
        },

        // Destruir
        destroy() {
            if (this.editor) {
                this.editor.destroy();
            }
        }
    };
}
</script>

<style>
.editor-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0.5rem 0;
}

.ProseMirror {
    outline: none;
    min-height: 80px;
}

.ProseMirror p {
    margin: 0;
    line-height: 1.6;
}

.ProseMirror ul, .ProseMirror ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.ProseMirror-focused {
    outline: none;
}
</style>