@props([
    'name' => 'content',
    'value' => '',
    'config' => 'default',
    'height' => null,
    'placeholder' => '',
    'required' => false,
    'disabled' => false,
    'class' => '',
    'id' => null
])

@php
    $editorId = $id ?? 'tinymce-' . Str::random(8);
    $editorClass = 'tinymce-editor ' . $class;
    
    // Get TinyMCE service
    $tinymceService = app(\App\Services\TinyMCEService::class);
    $editorConfig = $tinymceService->getConfig($config);
    
    // Override selector and height if provided
    $editorConfig['selector'] = '#' . $editorId;
    if ($height) {
        $editorConfig['height'] = $height;
    }
    if ($placeholder) {
        $editorConfig['placeholder'] = $placeholder;
    }
@endphp

<!-- TinyMCE CDN -->
@once
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
@endonce

<!-- Editor Textarea -->
<textarea 
    id="{{ $editorId }}"
    name="{{ $name }}"
    class="{{ $editorClass }}"
    @if($placeholder) placeholder="{{ $placeholder }}" @endif
    @if($required) required @endif
    @if($disabled) disabled @endif
    {{ $attributes }}
>{{ old($name, $value) }}</textarea>

<!-- TinyMCE Initialization Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    tinymce.init({!! json_encode($editorConfig, JSON_UNESCAPED_SLASHES) !!});
});

// File picker callback function
function tinymceFilePickerCallback(callback, value, meta) {
    // Create file input
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    
    // Set accept attribute based on file type
    if (meta.filetype === 'image') {
        input.setAttribute('accept', 'image/*');
    } else if (meta.filetype === 'media') {
        input.setAttribute('accept', 'video/*,audio/*');
    } else {
        input.setAttribute('accept', '*/*');
    }
    
    input.onchange = function() {
        var file = this.files[0];
        
        if (!file) return;
        
        var reader = new FileReader();
        
        reader.onload = function() {
            // For images, we can use data URL directly
            if (meta.filetype === 'image') {
                callback(reader.result, {
                    alt: file.name,
                    title: file.name
                });
            } else {
                // For other files, you might want to upload to server
                // This is a basic implementation using data URLs
                callback(reader.result, {
                    text: file.name,
                    title: file.name
                });
            }
        };
        
        reader.onerror = function() {
            alert('Error reading file');
        };
        
        reader.readAsDataURL(file);
    };
    
    input.click();
}
</script>

@error($name)
    <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
@enderror