<div>
    <style>
        [x-cloak] { display: none !important; }
    </style>

    <div
        x-data="quillEditorComponent()"
        x-init="init()"
        wire:ignore.self
        class="mb-4">
        <div wire:ignore>
            <div x-ref="editor">{!! \App\Helpers\StringHelper::sanitizeHtml($content) !!}</div>
        </div>
        
        <!-- Word and Character Counter Display -->
        <div class="mt-2 flex justify-between items-center text-sm text-theme-muted">
            <div class="flex space-x-4">
                <span x-text="wordCount + ' words'"></span>
                <span x-text="characterCount + ' characters'"></span>
            </div>
            <div class="text-right">
                <span 
                    x-text="(maxCharacters - characterCount) + ' ' + charactersRemainingText"
                    :class="{ 
                        'text-red-500': characterCount > maxCharacters,
                        'text-orange-500': characterCount > maxCharacters * 0.75,
                        'text-theme-muted': characterCount <= maxCharacters * 0.75
                    }">
                </span>
            </div>
        </div>
        
        @error('content')
            <div class="mt-1 text-sm text-red-500">
                {{ $message }}
            </div>
        @enderror
    </div>

    <script>
    function quillEditorComponent() {
        return {
            characterCount: 0,
            wordCount: 0,
            maxCharacters: {{ timebank_config('posts.content_max_input', 10000) }},
            charactersRemainingText: '{{ __('characters remaining') }}',
            quillInstance: null,

            init() {
                // Initialize counters with existing content
                const existingContent = this.$refs.editor.innerHTML;
                this.updateCounters(existingContent);

                // Initialize Quill editor
                this.$nextTick(() => {
                    this.initQuill();
                });

                // Listen to Livewire events for content updates
                Livewire.on('postLoaded', () => {
                    this.$wire.get('content').then(content => {
                        if (this.quillInstance) {
                            this.quillInstance.root.innerHTML = content || '<p><br></p>';
                            this.updateCounters(content || '');
                        }
                    });
                });
            },

            updateCounters(text) {
                const plainText = text.replace(/<[^>]*>/g, '').trim();
                this.characterCount = plainText.length;
                this.wordCount = plainText === '' ? 0 : plainText.split(/\s+/).length;
            },

            initQuill() {
                this.quillInstance = new Quill(this.$refs.editor, {
                    modules: {
                        toolbar: [
                            [{ header: [1, 2, false] }],
                            ['bold', 'italic', 'underline', 'strike'],
                            [{'list': 'ordered' }, {'list': 'bullet' }],
                            [{ 'align': [] }],
                            ['link', 'image', 'video'],
                            ['clean']
                        ]
                    },
                    theme: 'snow',
                });

                // Sync to Livewire on every change
                this.quillInstance.on('text-change', () => {
                    const content = this.quillInstance.root.innerHTML;
                    this.$wire.set('content', content, false);
                    this.updateCounters(content);
                });

                // Update counters with current content
                this.updateCounters(this.quillInstance.root.innerHTML);
            }
        };
    }
    </script>

</div>
