@props([
    'name' => 'content',
    'label' => 'Contenu',
    'value' => '',
    'preset' => 'full', // 'minimal', 'text', 'full', 'custom'
    'plugins' => null,
    'toolbar' => null,
    'rows' => 10,          {{-- Valeur par défaut --}}
    'height' => 400,        {{-- Valeur TinyMCE --}}
    'allowImages' => false,
    'id' => 'tiny-'.random_int(100000, 999999),
    'required' => false,
    'showlabel' => "true",
])

@php
// Définir les presets
$presets = [
    'minimal' => [
        'plugins' => 'code',
        'toolbar' => 'bold italic underline | code',
        'allowImages' => false,
    ],
    'text' => [
        'plugins' => 'lists link code',
        'toolbar' => 'undo redo | blocks | bold italic underline | alignleft aligncenter alignright alignjustify | link code',
        'allowImages' => false,
    ],
    'standard' => [
        'plugins' => 'lists link table code',
        'toolbar' => 'undo redo | blocks | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table code',
        'allowImages' => false,
    ],
    'full' => [
        'plugins' => 'image link lists code table media',
        'toolbar' => 'undo redo | blocks | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist | image link media table | code',
        'allowImages' => true,
    ],
    'blog' => [
        'plugins' => 'image link lists code table media anchor',
        'toolbar' => 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | link image media | code',
        'allowImages' => true,
    ],
];

// Récupérer les options selon le preset ou utiliser les props personnalisées
if ($preset === 'custom') {
    $currentPlugins = $plugins ?? $presets['full']['plugins'];
    $currentToolbar = $toolbar ?? $presets['full']['toolbar'];
    $currentAllowImages = $allowImages;
} else {
    $presetConfig = $presets[$preset] ?? $presets['full'];
    $currentPlugins = $plugins ?? $presetConfig['plugins'];
    $currentToolbar = $toolbar ?? $presetConfig['toolbar'];
    $currentAllowImages = $allowImages && $presetConfig['allowImages'];
}
@endphp

@if($showlabel == "true")
<label for="{{ $id }}" class="form-label">{{ $label }} {!! $required ? '<span class="text-danger">*</span>' : '' !!}</label>
@endif
<textarea id="{{ $id }}" name="{{ $name }}" class="editor" data-preset="{{ $preset }}">{{ old($name, $value) }}</textarea>


@push('script')
<script src="https://cdn.tiny.cloud/1/oj4v7awldige0rgvkhbge6fjhxel3wfirmkv3m7nvayu8vqq/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Configuration de base
    const baseConfig = {
        height: {{ $height }},
        menubar: false,
        branding: false,
        content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.4; }',
        block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3; Header 4=h4; Header 5=h5; Header 6=h6;',
    };

    // Configuration spécifique pour ce composant
    const componentConfig = {
        selector: '#{{ $id }}',
        height: {{ $height }},
        plugins: '{{ $currentPlugins }}',
        toolbar: '{{ $currentToolbar }}',
        @if($currentAllowImages)
        automatic_uploads: true,
        images_upload_url: "{{ route('admin.tinymce.upload') }}",
        file_picker_types: 'image',
        image_advtab: true,
        image_caption: true,
        image_title: true,
        images_upload_handler: function(blobInfo) {
            return new Promise(function(resolve, reject) {
                let xhr = new XMLHttpRequest();
                xhr.open('POST', "{{ route('admin.tinymce.upload') }}");
                xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');

                xhr.onload = function() {
                    console.log('Upload response status:', xhr.status);
                    console.log('Upload response:', xhr.responseText);
                    
                    if (xhr.status !== 200) {
                        reject('HTTP Error: ' + xhr.status);
                        return;
                    }
                    
                    let json;
                    try {
                        json = JSON.parse(xhr.responseText);
                    } catch (e) {
                        reject('Invalid JSON response');
                        return;
                    }
                    
                    if (!json || typeof json.location != 'string') {
                        reject('Invalid JSON: ' + xhr.responseText);
                        return;
                    }
                    
                    resolve(json.location);
                };

                xhr.onerror = function() {
                    reject('Network error occurred');
                };

                let formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                xhr.send(formData);
            });
        },
        @endif
    };

    // Fusionner les configurations
    const finalConfig = Object.assign({}, baseConfig, componentConfig);
    
    // Initialiser TinyMCE
    tinymce.init(finalConfig);
});
</script>
@endpush