@props([
    'description' => '',
    'wireModel' => 'description',
    'title' => 'Full Description',
    'height' => '400',  // Default height, can be overridden
])

@php
    // Use json_encode to safely pass the description into JavaScript.
    $escapedDescription = json_encode($description);
    $editorId = 'ckeditor_' . uniqid();
@endphp

<div
    x-data="seoEditor('{{ $editorId }}', '{{ $wireModel }}', {!! $escapedDescription !!}, {{ $height }})"
    x-init="init()"
    x-on:load-editor.window="loadContent($event.detail)"
    class="col-md-12 my-2">

    <div class="col-md-12" wire:ignore>
        <label class="form-label">{{ $title }} *</label>
        <textarea id="{{ $editorId }}" x-ref="editor"></textarea>
    </div>

    <div>
        <input type="hidden" wire:model.defer="{{ $wireModel }}" class="form-control @error('{{ $wireModel }}') is-invalid @enderror">
        @error('{{ $wireModel }}')
            <small class="invalid-feedback mt-1">{{ $message }}</small>
        @enderror
    </div>
</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>
        function seoEditor(editorId, wireModel, initialValue = '', height = 400) {
            return {
                editor: null,

                init() {
                    this.$nextTick(() => {
                        this.initEditor(initialValue);
                    });
                },

                initEditor(content = '') {
                    if (CKEDITOR.instances[editorId]) {
                        CKEDITOR.instances[editorId].destroy(true);
                    }

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

                    this.editor = CKEDITOR.replace(editorId, {
                        extraPlugins: 'sourcearea,font,justify,colorbutton,panelbutton,floatpanel,uploadimage',
                        removePlugins: 'easyimage,cloudservices',
                        toolbar: [
                            { name: 'document', items: ['Source','Preview','Print'] },
                            { name: 'clipboard', items: ['Cut','Copy','Paste','Undo','Redo'] },
                            { name: 'basicstyles', items: ['Bold','Italic','Underline','Strike','RemoveFormat'] },
                            { name: 'paragraph', items: ['NumberedList','BulletedList','JustifyLeft','JustifyCenter','JustifyRight'] },
                            { name: 'links', items: ['Link','Unlink'] },
                            { name: 'insert', items: ['Image','Table','HorizontalRule'] },
                            { name: 'styles', items: ['Format','Font','FontSize'] },
                            { name: 'colors', items: ['TextColor','BGColor'] },
                            { name: 'tools', items: ['Maximize'] }
                        ],
                        filebrowserUploadUrl: '/admin/upload-description-image?_token=' + csrfToken,
                        filebrowserUploadMethod: 'form',
                        uploadUrl: '/admin/upload-description-image?_token=' + csrfToken,
                        fileTools_requestHeaders: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        height: height,
                        allowedContent: true,
                        contentsCss: ['https://cdn.ckeditor.com/4.22.1/full/contents.css'],
                        linkShowTargetTab: true,
                        linkAllowedDomains: []
                    });

                    this.editor.on('instanceReady', () => {
                        let value = content ?? @this.get(wireModel) ?? '';
                        this.editor.setData(value);
                    });

                    this.editor.on('change', () => {
                        @this.set(wireModel, this.editor.getData());
                    });

                    this.editor.on('blur', () => {
                        @this.set(wireModel, this.editor.getData());
                    });

                    this.editor.on('fileUploadRequest', function(evt) {
                        var fileLoader = evt.data.fileLoader;
                        var xhr = fileLoader.xhr;
                        var formData = new FormData();

                        xhr.open('POST', '/admin/upload-description-image', true);
                        formData.append('_token', csrfToken);
                        formData.append('upload', fileLoader.file, fileLoader.fileName);

                        xhr.send(formData);
                        evt.stop();
                    });

                    this.editor.on('fileUploadResponse', function(evt) {
                        evt.stop();
                        var xhr = evt.data.fileLoader.xhr;
                        var response = JSON.parse(xhr.responseText);

                        if (response.uploaded) {
                            evt.data.url = response.url;
                        } else {
                            evt.data.message = 'Upload failed';
                            evt.cancel();
                        }
                    });

                    if (this.$refs.editor) {
                        this.$refs.editor.loadContent = (data) => {
                            this.initEditor(data);
                        };
                    }
                },

                loadContent(data) {
                    if (this.editor) {
                        this.editor.setData(data || '');
                    } else {
                        this.initEditor(data);
                    }
                }
            };
        }
    </script>
@endpush
@endonce