@props([
    'description' => '',
    'wireModel' => 'description',
])

@php
    $editorId = 'ckeditor_' . uniqid();
@endphp

<div
    wire:ignore
    x-data="ckeditorComponent('{{ $editorId }}', '{{ $wireModel }}')"
    x-init="init()"
>
    <textarea id="{{ $editorId }}">
        {!! $description !!}
    </textarea>
</div>

@once
@push('styles')
<link rel="stylesheet" href="https://cdn.ckeditor.com/4.22.1/full/contents.css">
@endpush

@push('scripts')
<script src="https://cdn.ckeditor.com/4.22.1/full/ckeditor.js"></script>

<script>
/**
 * GLOBAL Alpine Component
 */
window.ckeditorComponent = function (editorId, wireModel) {
    return {
        editor: null,

        init() {
            this.$nextTick(() => this.createEditor())
        },

        createEditor() {
            if (CKEDITOR.instances[editorId]) {
                CKEDITOR.instances[editorId].destroy(true)
            }

            const csrfToken =
                document.querySelector('meta[name="csrf-token"]')?.content || ''

            this.editor = CKEDITOR.replace(editorId, {
                extraPlugins: 'sourcearea,font,justify,colorbutton,uploadimage',
                removePlugins: 'easyimage,cloudservices',
                height: 400,
                allowedContent: true,

                uploadUrl: '/admin/upload-description-image?_token=' + csrfToken,
                fileTools_requestHeaders: {
                    'X-CSRF-TOKEN': csrfToken
                },

                toolbar: [
                    { name: 'document', items: ['Source', 'Preview'] },
                    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
                    { name: 'paragraph', items: ['NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight'] },
                    { name: 'insert', items: ['Image', 'Table'] },
                    { name: 'styles', items: ['Format', 'FontSize'] },
                    { name: 'colors', items: ['TextColor', 'BGColor'] },
                    { name: 'tools', items: ['Maximize'] }
                ]
            })

            // Initial value from Livewire
            this.editor.on('instanceReady', () => {
                this.editor.setData(@this.get(wireModel) || '')
            })

            // Sync editor → Livewire
            this.editor.on('change', () => {
                @this.set(wireModel, this.editor.getData())
            })
        }
    }
}
</script>
@endpush
@endonce