@props([
    'recordtype',
    'fieldid',
    'recordid' => null,
    'value' => ''
])

<div x-data="{
        recordValue: '',
        originalValue: '',
        editing: false,
        editorInitialized: false,
        editorId: 'rich-text-editor-{{ $recordid }}-{{ $fieldid }}',

        init() {
            const value = @js($value);
            this.recordValue = value || '';
            this.originalValue = this.recordValue;
        },

        async initializeEditor() {
            if (this.editorInitialized) return;

            try {
                // Wait for modal to render completely
                await new Promise(resolve => setTimeout(resolve, 300));

                if (window.TiptapFormEditors && typeof window.TiptapFormEditors.initializeAll === 'function') {
                    // Find the specific container for this editor
                    const container = document.querySelector(`[data-field-id='${this.editorId}']`);
                    if (container && !container.hasAttribute('data-initialized')) {
                        // Initialize this specific editor
                        window.TiptapFormEditors.initializeEditor(container);

                        // Set content after editor is ready
                        setTimeout(() => {
                            try {
                                if (this.recordValue && window.TiptapFormEditors.setEditorContent) {
                                    window.TiptapFormEditors.setEditorContent(this.editorId, this.recordValue);
                                }
                            } catch (error) {
                                console.warn('Error setting initial content:', error);
                            }
                        }, 200);
                    }

                    this.editorInitialized = true;
                }
            } catch (error) {
                console.error('Error initializing rich text editor:', error);
            }
        },

        async destroyEditor() {
            if (!this.editorInitialized) return;

            try {
                // Check if the editor still exists in the TiptapFormEditors map
                if (window.TiptapFormEditors &&
                    window.TiptapFormEditors.editors &&
                    window.TiptapFormEditors.editors.has(this.editorId)) {

                    // Small delay to ensure any pending operations complete
                    await new Promise(resolve => setTimeout(resolve, 50));

                    // Check if the container still exists in DOM before unmounting
                    const container = document.querySelector(`[data-field-id='${this.editorId}']`);
                    if (container && container.hasAttribute('data-initialized')) {
                        window.TiptapFormEditors.destroyEditor(this.editorId);
                    } else {
                        // If container is gone, just remove from the editors map
                        window.TiptapFormEditors.editors.delete(this.editorId);
                    }
                }
            } catch (error) {
                console.warn('Error destroying editor:', error);
                // Force cleanup from the map if there was an error
                if (window.TiptapFormEditors && window.TiptapFormEditors.editors) {
                    window.TiptapFormEditors.editors.delete(this.editorId);
                }
            } finally {
                this.editorInitialized = false;
            }
        },

        async getEditorContent() {
            try {
                if (window.TiptapFormEditors &&
                    typeof window.TiptapFormEditors.getEditorContent === 'function') {
                    return window.TiptapFormEditors.getEditorContent(this.editorId);
                }
            } catch (error) {
                console.warn('Error getting editor content:', error);
            }
            return this.recordValue;
        },

        async startEdit() {
            this.originalValue = this.recordValue;
            this.editing = true;

            // Initialize editor after Alpine has updated the DOM
            this.$nextTick(async () => {
                await this.initializeEditor();
            });
        },
        async saveField() {
            try {
                // Get content from editor
                const editorContent = await this.getEditorContent();
                if (editorContent !== null && editorContent !== undefined) {
                    this.recordValue = editorContent;
                }

                let success = true;

                if ('{{ $recordid ?? '' }}') {
                    success = await $wire.updatefield(
                        '{{ $recordid }}',
                        '{{ $recordtype }}',
                        'rich_text',
                        '{{ $fieldid }}',
                        this.recordValue,
                        null
                    );
                } else {
                    {{-- $wire.setFormValue('{{ $fieldid }}', this.recordValue); --}}
                }

                if (success) {
                    this.editing = false;
                    this.originalValue = this.recordValue;
                    await this.destroyEditor();
                } else {
                    alert('Field was not able to save. Please try again.');
                }

                return success;
            } catch (error) {
                console.error('Error saving rich text field:', error);
                alert('An error occurred while saving. Please try again.');
                return false;
            }
        },

        async cancelEdit() {
            console.log('143');
            await this.destroyEditor();
            this.recordValue = this.originalValue;
            this.editing = false;
        },

        getPreviewText() {
            if (!this.recordValue) return '--';

            // Strip HTML tags for preview
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = this.recordValue;
            const textContent = tempDiv.textContent || tempDiv.innerText || '';

            // Truncate for preview
            return textContent.length > 100 ? textContent.substring(0, 100) + '...' : textContent;
        }
    }"
    x-init="init"
    x-cloak
    wire:key="rich-text-{{ $recordid }}-{{ $fieldid }}-{{ md5($value) }}"
    class="flex items-center space-x-3 relative">

    <!-- Preview Mode -->
    <div x-show="!editing" class="flex items-center space-x-3 w-full">
        <!-- Rich Text Preview -->
        <div class="rich-text-preview text-sm relative max-h-[20px] overflow-hidden cursor-pointer hover:bg-gray-50 transition-colors flex-grow"
             @click="startEdit()">
            <div class="tiptap-wrapper">
                <span x-text="getPreviewText()"></span>
            </div>
            <!-- Fade-out gradient overlay -->
            <div class="absolute bottom-0 left-0 right-0 h-4  pointer-events-none"></div>
        </div>

        <!-- Edit button -->
        <button @click="startEdit()" class="text-gray-500 hover:text-gray-700 transition-colors flex-shrink-0">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd" d="M11.32 6.176H5c-1.105 0-2 .949-2 2.118v10.588C3 20.052 3.895 21 5 21h11c1.105 0 2-.948 2-2.118v-7.75l-3.914 4.144A2.46 2.46 0 0 1 12.81 16l-2.681.568c-1.75.37-3.292-1.263-2.942-3.115l.536-2.839c.097-.512.335-.983.684-1.352l2.914-3.086Z" clip-rule="evenodd"/>
                <path fill-rule="evenodd" d="M19.846 4.318a2.148 2.148 0 0 0-.437-.692 2.014 2.014 0 0 0-.654-.463 1.92 1.92 0 0 0-1.544 0 2.014 2.014 0 0 0-.654.463l-.546.578 2.852 3.02.546-.579a2.14 2.14 0 0 0 .437-.692 2.244 2.244 0 0 0 0-1.635ZM17.45 8.721 14.597 5.700 9.82 10.76a.54.54 0 0 0-.137.27l-.536 2.84c-.07.37.239.696.588.622l2.682-.567a.492.492 0 0 0 .255-.145l4.778-5.06Z" clip-rule="evenodd"/>
            </svg>
        </button>
    </div>
    <input type="hidden"
           :id="'hidden-' + editorId"
           name="{{ $fieldid }}"
           x-model="recordValue" />

    <!-- Rich Text Modal -->
    <div x-show="editing"
         x-cloak
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
         {{-- @click.self="cancelEdit()" --}}
         @keydown.escape.window="cancelEdit()">

        <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 transform scale-95"
             x-transition:enter-end="opacity-100 transform scale-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 transform scale-100"
             x-transition:leave-end="opacity-0 transform scale-95"
             @click.stop>

            <!-- Modal Header -->
            <div class="flex items-center justify-between p-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Edit Rich Text Field</h3>
                <button @click="cancelEdit()" class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            <!-- Modal Body -->
            <div class="p-6 max-h-[calc(90vh-140px)] overflow-y-auto">
                <!-- TiptapEditor Container -->
                <div class="tiptap-field-wrapper"
                     :data-field-id="editorId"
                     :data-content="recordValue"
                     data-required="false"
                     data-max-length="50000"
                     data-placeholder="Enter your content...">

                    <!-- Loading placeholder that will be replaced by TiptapEditor -->
                    <div class="border border-gray-300 rounded-lg p-4 min-h-[400px] bg-gray-50 flex items-center justify-center">
                        <div class="text-center">
                            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-500 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            <div class="text-gray-500 mt-2">Loading rich text editor...</div>
                        </div>
                    </div>
                </div>

                <!-- Hidden input for form compatibility -->

            </div>

            <!-- Modal Footer -->
            <div class="flex items-center justify-end space-x-3 p-4 border-t border-gray-200 bg-gray-50">
                <button @click="cancelEdit()"
                        type="button"
                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                    Cancel
                </button>
                <button @click="saveField()"
                        type="button"
                        class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                    <span x-show="!$wire.loading">Save Changes</span>
                    <span x-show="$wire.loading" class="flex items-center">
                        <svg class="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Saving...
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>