{{-- HTML Editor with Toolbar + Preview --}}
<div class="bg-white rounded-xl shadow-sm p-6" x-data="adHtmlEditor()">
    <label for="body" class="block text-sm font-medium text-umami-text mb-1">
        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">
        {{-- 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>
        <button type="button" @click="insertAtCursor('<div class=&quot;&quot;>', '</div>')"
            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="Div">
            DIV
        </button>
        <button type="button" @click="insertAtCursor('<img src=&quot;&quot; alt=&quot;&quot; class=&quot;w-full h-auto rounded-lg&quot; />', '')"
            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="Immagine">
            <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>
        </button>

        <div class="flex-1"></div>

        {{-- Preview Toggle --}}
        <button type="button" @click="showPreview = !showPreview"
            class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors"
            :class="showPreview ? 'bg-umami-accent text-white' : 'bg-white border border-umami-border text-umami-text hover:bg-umami-light'"
            title="Anteprima HTML">
            <svg class="w-4 h-4 inline-block mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>
            Anteprima
        </button>
    </div>

    {{-- Textarea --}}
    <textarea name="body" id="body" rows="16" 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"
        x-show="!showPreview">{{ old('body', $content ?? '') }}</textarea>

    {{-- Preview Panel --}}
    <div x-show="showPreview" x-cloak
        class="mt-0 p-6 border border-umami-border rounded-lg bg-gray-50 min-h-[300px] prose max-w-none overflow-auto"
        x-html="$refs.editor.value">
    </div>

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

    <p class="text-xs text-umami-gray mt-2">
        Puoi inserire qualsiasi codice HTML: banner, immagini, embed, iframe, ecc.
        Usa le classi Tailwind CSS per lo stile.
    </p>
</div>

@push('scripts')
    <script>
        function adHtmlEditor() {
            return {
                showPreview: false,

                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;
                    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'));
                },
            };
        }
    </script>
@endpush