{{--
    CKEditor Component
    Usage: <x-ckeditor wire:model="description" :value="$description" name="editor_name" />

    Props:
    - name: Unique identifier for editor (required)
    - value: Initial content (optional)
    - height: Editor height in pixels (default: 400)
    - wire:model: Livewire property to sync with
--}}

@props([
    'value' => '',
    'name' => 'editor_' . uniqid(),
    'height' => 400
])

<div wire:ignore>
    <textarea id="{{ $name }}" {{ $attributes->whereDoesntStartWith('wire:model') }}>{{ $value }}</textarea>
</div>

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

<script>
    // Store all editor instances
    window.ckeditorInstances = window.ckeditorInstances || {};

    /**
     * Initialize CKEditor with S3 upload support
     */
    function initCKEditor(elementId, livewireComponent, wireModel, height = 400) {
        // Destroy existing instance
        if (CKEDITOR.instances[elementId]) {
            CKEDITOR.instances[elementId].destroy(true);
        }

        const editor = CKEDITOR.replace(elementId, {
            // ✅ S3 Upload Configuration
            filebrowserUploadUrl: '{{ route("ckeditor.upload") }}',
            filebrowserUploadMethod: 'form',
            uploadUrl: '{{ route("ckeditor.upload") }}',
            imageUploadUrl: '{{ route("ckeditor.upload") }}',

            // Full plugin suite
            extraPlugins: 'uploadimage,image2,colorbutton,font,justify,tabletools,tableresize,liststyle,pagebreak,showblocks,pastefromword,codesnippet,smiley,specialchar',

            removePlugins: 'easyimage',

            // Full toolbar configuration
            toolbar: [
                { name: 'document', items: ['Source', '-', 'Save', 'Preview', 'Print', '-', 'Templates'] },
                { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
                { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'] },
                '/',
                { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
                { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
                { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
                { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'] },
                '/',
                { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
                { name: 'colors', items: ['TextColor', 'BGColor'] },
                { name: 'tools', items: ['Maximize', 'ShowBlocks'] }
            ],

            // Font options
            font_names:
                'Arial/Arial, Helvetica, sans-serif;' +
                'Times New Roman/Times New Roman, Times, serif;' +
                'Verdana/Verdana, Geneva, sans-serif;' +
                'Courier New/Courier New, Courier, monospace;' +
                'Georgia/Georgia, serif;' +
                'Tahoma/Tahoma, Geneva, sans-serif;' +
                'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
                'Impact/Impact, Charcoal, sans-serif;' +
                'Comic Sans MS/Comic Sans MS, cursive, sans-serif;' +
                'Lucida Sans/Lucida Sans, Geneva, sans-serif;' +
                'Helvetica/Helvetica, Arial, sans-serif;' +
                'Calibri/Calibri, sans-serif;' +
                'Cambria/Cambria, serif;' +
                'Palatino/Palatino Linotype, Book Antiqua, Palatino, serif',

            // Font sizes
            fontSize_sizes: '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;30/30px;32/32px;36/36px;48/48px;60/60px;72/72px',

            // Editor height
            height: height,

            // Code snippet theme
            codeSnippet_theme: 'monokai_sublime',

            // Allow all content
            allowedContent: true,
            extraAllowedContent: '*(*);*{*}',

            // Image settings
            image2_alignClasses: ['image-left', 'image-center', 'image-right'],
            image2_captionedClass: 'image-captioned',

            // Upload settings
            uploadImage_maxSize: 5242880, // 5MB
            uploadImage_acceptedTypes: /\.(jpg|jpeg|png|gif|webp)$/i,

            // CSRF token for uploads
            fileTools_requestHeaders: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        });

        // Store instance globally
        window.ckeditorInstances[elementId] = editor;

        // Set initial content
        editor.on('instanceReady', function() {
            const initialValue = livewireComponent.get(wireModel) || '';
            if (initialValue && initialValue !== editor.getData()) {
                editor.setData(initialValue);
            }
        });

        // Sync with Livewire on change
        editor.on('change', function() {
            const data = editor.getData();
            livewireComponent.set(wireModel, data);
        });

        // Sync on blur
        editor.on('blur', function() {
            const data = editor.getData();
            livewireComponent.set(wireModel, data);
        });
        return editor;
    }

    /**
     * Update editor content programmatically
     */
    function updateCKEditorContent(elementId, content) {
        if (window.ckeditorInstances[elementId]) {
            window.ckeditorInstances[elementId].setData(content);
        }
    }

    /**
     * Get editor content
     */
    function getCKEditorContent(elementId) {
        return window.ckeditorInstances[elementId] ?
               window.ckeditorInstances[elementId].getData() : '';
    }

    /**
     * Destroy editor instance
     */
    function destroyCKEditor(elementId) {
        if (window.ckeditorInstances[elementId]) {
            window.ckeditorInstances[elementId].destroy(true);
            delete window.ckeditorInstances[elementId];
        }
    }
</script>
@endpush
@endonce

@push('scripts')
<script>
    document.addEventListener('livewire:load', function() {
        // Initialize this specific editor
        initCKEditor('{{ $name }}', @this, '{{ $attributes->wire('model')->value() }}', {{ $height }});
    });

    // Listen for Livewire updates (for edit mode)
    document.addEventListener('livewire:load', function() {
        Livewire.on('refreshEditor_{{ $name }}', content => {
            updateCKEditorContent('{{ $name }}', content);
        });

        Livewire.on('resetEditor_{{ $name }}', () => {
            updateCKEditorContent('{{ $name }}', '');
        });
    });

    // Clean up on page navigation
    document.addEventListener('livewire:navigating', function() {
        destroyCKEditor('{{ $name }}');
    });
</script>
@endpush