{{-- Content Editor with Image Upload Toolbar --}}
<div class="bg-white rounded-xl shadow-sm p-6" x-data="contentEditor()">
    <label for="{{ $editorId ?? 'content' }}" class="block text-sm font-medium text-umami-text mb-1">
        {{ $label ?? 'Contenuto (HTML)' }}
    </label>

    {{-- Toolbar --}}
    <div
        class="flex flex-wrap items-center gap-2 mb-2 p-2 bg-gray-50 rounded-lg border border-umami-border">
        {{-- Image Upload --}}
        <button type="button" @click="$refs.contentImage.click()"
            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md bg-white border border-umami-border text-umami-text hover:bg-umami-light transition-colors"
            :disabled="uploading" title="Inserisci immagine nel contenuto">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            <span x-show="!uploading">Immagine</span>
            <span x-show="uploading" x-cloak>Caricamento...</span>
        </button>
        <input type="file" x-ref="contentImage" accept="image/*" class="hidden" @change="uploadContentImage">

        {{-- Quick HTML Tags --}}
        <button type="button" @click="wrapSelection('h2')"
            class="px-2.5 py-1.5 text-sm font-bold rounded-md bg-white border border-umami-border text-umami-text hover:bg-umami-light transition-colors"
            title="Titolo H2">
            H2
        </button>
        <button type="button" @click="wrapSelection('h3')"
            class="px-2.5 py-1.5 text-sm font-bold rounded-md bg-white border border-umami-border text-umami-text hover:bg-umami-light transition-colors"
            title="Titolo H3">
            H3
        </button>
        <button type="button" @click="wrapSelection('strong')"
            class="px-2.5 py-1.5 text-sm font-bold rounded-md bg-white border border-umami-border text-umami-text hover:bg-umami-light transition-colors"
            title="Grassetto">
            B
        </button>
        <button type="button" @click="wrapSelection('em')"
            class="px-2.5 py-1.5 text-sm italic rounded-md bg-white border border-umami-border text-umami-text hover:bg-umami-light transition-colors"
            title="Corsivo">
            I
        </button>
        <button type="button" @click="insertAtCursor('<a href=&quot;&quot;>', '</a>')"
            class="px-2.5 py-1.5 text-sm rounded-md bg-white border border-umami-border text-umami-accent hover:bg-umami-light transition-colors"
            title="Link">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
            </svg>
        </button>
        <button type="button" @click="insertAtCursor('<p>', '</p>')"
            class="px-2.5 py-1.5 text-sm rounded-md bg-white border border-umami-border text-umami-text hover:bg-umami-light transition-colors"
            title="Paragrafo">
            &para;
        </button>

        {{-- Upload status --}}
        <span x-show="uploadError" x-cloak x-text="uploadError" class="text-red-500 text-xs ml-2"></span>
        <span x-show="uploadSuccess" x-cloak class="text-green-600 text-xs ml-2">Immagine inserita!</span>
    </div>

    {{-- Textarea --}}
    <textarea name="{{ $editorId ?? 'content' }}" id="{{ $editorId ?? 'content' }}" rows="20" required x-ref="editor"
        class="form-input w-full rounded-lg border-umami-border focus:border-umami-accent focus:ring-umami-accent font-mono text-sm">{{ old($editorId ?? 'content', $content ?? '') }}</textarea>
    @error($editorId ?? 'content') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
</div>

@push('scripts')
    <script>
        function contentEditor() {
            return {
                uploading: false,
                uploadError: '',
                uploadSuccess: false,

                async uploadContentImage(event) {
                    const file = event.target.files[0];
                    if (!file) return;

                    // Validate client-side
                    if (!file.type.startsWith('image/')) {
                        this.uploadError = 'Il file deve essere un\'immagine.';
                        return;
                    }
                    if (file.size > 4 * 1024 * 1024) {
                        this.uploadError = 'L\'immagine non deve superare 4MB.';
                        return;
                    }

                    this.uploading = true;
                    this.uploadError = '';
                    this.uploadSuccess = false;

                    const formData = new FormData();
                    formData.append('image', file);

                    try {
                        const response = await fetch('{{ route("admin.posts.upload-image") }}', {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'Accept': 'application/json',
                            },
                            body: formData,
                        });

                        if (!response.ok) {
                            const data = await response.json();
                            throw new Error(data.message || 'Errore durante il caricamento.');
                        }

                        const data = await response.json();

                        // Insert image HTML at cursor position
                        const imgHtml = `\n<figure>\n    <img src="${data.url}" alt="${file.name.replace(/\.[^/.]+$/, '')}" class="rounded-lg" />\n</figure>\n`;
                        this.insertTextAtCursor(imgHtml);

                        this.uploadSuccess = true;
                        setTimeout(() => this.uploadSuccess = false, 3000);
                    } catch (error) {
                        this.uploadError = error.message || 'Errore durante il caricamento.';
                    } finally {
                        this.uploading = false;
                        event.target.value = ''; // Reset file input
                    }
                },

                wrapSelection(tag) {
                    const textarea = this.$refs.editor;
                    const start = textarea.selectionStart;
                    const end = textarea.selectionEnd;
                    const selectedText = textarea.value.substring(start, end) || 'testo';

                    const before = textarea.value.substring(0, start);
                    const after = textarea.value.substring(end);
                    const wrapped = `<${tag}>${selectedText}</${tag}>`;

                    textarea.value = before + wrapped + after;
                    textarea.focus();
                    textarea.selectionStart = start + tag.length + 2;
                    textarea.selectionEnd = start + tag.length + 2 + selectedText.length;

                    // Trigger change event for any listeners
                    textarea.dispatchEvent(new Event('input'));
                },

                insertAtCursor(openTag, closeTag) {
                    const textarea = this.$refs.editor;
                    const start = textarea.selectionStart;
                    const end = textarea.selectionEnd;
                    const selectedText = textarea.value.substring(start, end) || '';

                    const before = textarea.value.substring(0, start);
                    const after = textarea.value.substring(end);

                    textarea.value = before + openTag + selectedText + closeTag + after;
                    textarea.focus();

                    const cursorPos = start + openTag.length + selectedText.length;
                    textarea.selectionStart = cursorPos;
                    textarea.selectionEnd = cursorPos;

                    textarea.dispatchEvent(new Event('input'));
                },

                insertTextAtCursor(text) {
                    const textarea = this.$refs.editor;
                    const start = textarea.selectionStart;
                    const before = textarea.value.substring(0, start);
                    const after = textarea.value.substring(start);

                    textarea.value = before + text + after;
                    textarea.focus();

                    const newPos = start + text.length;
                    textarea.selectionStart = newPos;
                    textarea.selectionEnd = newPos;

                    textarea.dispatchEvent(new Event('input'));
                },
            };
        }
    </script>
@endpush