{{--
    RTF-editor partial
    Variabelen:
      $fieldName      — name-attribuut van de hidden input (bv. 'description')
      $initialContent — initiële HTML-inhoud (reeds gesanitiseerd / nl2br'd)
      $minHeight      — CSS min-height voor de editor (bv. '8rem')
--}}

{{-- Alpine-functie en CSS — slechts 1 keer per pagina laden --}}
@once

<script>
function richEditor() {
    return {
        content: '',
        linkMode: false,
        linkUrl: '',
        _savedRange: null,

        init() {
            this.content = this.$el.dataset.initial || '';
            this.$refs.editor.innerHTML = this.content;
        },

        run(cmd) {
            this.$refs.editor.focus();
            document.execCommand(cmd, false, null);
            this.sync();
        },

        on(cmd) {
            try { return document.queryCommandState(cmd); } catch (e) { return false; }
        },

        isLink() {
            try {
                const sel = window.getSelection();
                return !!sel.anchorNode?.parentElement?.closest('a');
            } catch (e) { return false; }
        },

        sync() {
            // Zorg dat alle links in een nieuw tabblad openen
            this.$refs.editor.querySelectorAll('a[href]').forEach(a => {
                if (!a.target) a.target = '_blank';
                if (!a.rel)    a.rel    = 'noopener noreferrer';
            });
            this.content = this.$refs.editor.innerHTML;
        },

        paste(e) {
            e.preventDefault();
            const html  = e.clipboardData.getData('text/html');
            const plain = e.clipboardData.getData('text/plain');

            if (html) {
                document.execCommand('insertHTML', false, this.cleanPaste(html));
            } else {
                document.execCommand('insertText', false, plain);
            }
            this.sync();
        },

        openLinkMode() {
            // Sla de huidige selectie op zodat we die na de toetsenbordinvoer kunnen herstellen
            const sel = window.getSelection();
            this._savedRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;

            // Als cursor al op een link staat, prefill de URL
            const anchor = sel.anchorNode?.parentElement?.closest('a');
            this.linkUrl = anchor ? anchor.getAttribute('href') : '';

            this.linkMode = !this.linkMode;

            if (this.linkMode) {
                this.$nextTick(() => this.$refs.linkInput?.focus());
            }
        },

        insertLink() {
            const raw = this.linkUrl.trim();
            if (!raw) { this.linkMode = false; return; }

            // Voeg protocol toe als het ontbreekt (geen mailto: of http/https)
            const url = /^(https?:|mailto:)/i.test(raw) ? raw : 'https://' + raw;

            this.$refs.editor.focus();

            // Herstel de opgeslagen selectie
            if (this._savedRange) {
                const sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(this._savedRange);
            }

            document.execCommand('createLink', false, url);
            this.sync();

            this.linkMode  = false;
            this.linkUrl   = '';
            this._savedRange = null;
        },

        removeLink() {
            this.$refs.editor.focus();
            if (this._savedRange) {
                const sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(this._savedRange);
            }
            document.execCommand('unlink', false, null);
            this.sync();
            this.linkMode  = false;
            this._savedRange = null;
        },

        cleanPaste(html) {
            const tmp = document.createElement('div');
            tmp.innerHTML = html;

            // 1. Verwijder gevaarlijke elementen
            tmp.querySelectorAll(
                'script,style,img,video,audio,iframe,form,input,select,textarea,' +
                'button,meta,link,object,embed,head,noscript'
            ).forEach(n => n.remove());

            // 2. Converteer style-gebaseerde spans naar semantische tags
            tmp.querySelectorAll('span,font').forEach(el => {
                const s  = el.style;
                const fw = (s.fontWeight || '').toString();
                const fi = s.fontStyle || '';
                const td = s.textDecoration || '';

                let inner = el.innerHTML;
                const isBold      = fw === 'bold' || (parseInt(fw) >= 600 && fw !== '');
                const isItalic    = fi === 'italic';
                const isUnderline = td.includes('underline');

                if (isBold)      inner = '<b>' + inner + '</b>';
                if (isItalic)    inner = '<i>' + inner + '</i>';
                if (isUnderline) inner = '<u>' + inner + '</u>';

                const frag = document.createRange().createContextualFragment(inner);
                el.replaceWith(frag);
            });

            // 3. Strip alle attributen — bewaar href op veilige <a>-elementen
            tmp.querySelectorAll('*').forEach(el => {
                if (el.tagName.toLowerCase() === 'a') {
                    const href = el.getAttribute('href') || '';
                    while (el.attributes.length) el.removeAttribute(el.attributes[0].name);
                    if (/^https?:|^mailto:/i.test(href)) {
                        el.setAttribute('href', href);
                        el.setAttribute('target', '_blank');
                        el.setAttribute('rel', 'noopener noreferrer');
                    } else {
                        // Onveilige href: unwrap de <a>, inhoud blijft
                        const p = el.parentNode;
                        if (p) { while (el.firstChild) p.insertBefore(el.firstChild, el); p.removeChild(el); }
                    }
                } else {
                    while (el.attributes.length) el.removeAttribute(el.attributes[0].name);
                }
            });

            // 4. Unwrap niet-toegelaten tags, inhoud blijft behouden
            const allowed = new Set(['a','b','strong','i','em','u','br','p','ul','ol','li']);
            Array.from(tmp.querySelectorAll('*')).reverse().forEach(el => {
                if (!allowed.has(el.tagName.toLowerCase())) {
                    const p = el.parentNode;
                    if (p) {
                        while (el.firstChild) p.insertBefore(el.firstChild, el);
                        p.removeChild(el);
                    }
                }
            });

            return tmp.innerHTML;
        }
    };
}
</script>
@endonce

{{-- Blade's {{ }} past zelf htmlspecialchars toe — geen extra php-escaping nodig. --}}
<div x-data="richEditor()"
     data-initial="{{ $initialContent ?? '' }}"
     class="mt-1">

    {{-- Werkbalk --}}
    <div class="flex flex-wrap items-center gap-0.5 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-t-lg"
         style="background:#f9fafb">
        <button type="button" @mousedown.prevent="run('bold')"
                :style="on('bold') ? 'background:#e0e7ff;color:#4338ca' : ''"
                class="px-2 py-0.5 rounded text-sm font-bold text-gray-600 hover:bg-indigo-50 transition"
                title="Vet (Ctrl+B)">B</button>
        <button type="button" @mousedown.prevent="run('italic')"
                :style="on('italic') ? 'background:#e0e7ff;color:#4338ca' : ''"
                class="px-2 py-0.5 rounded text-sm italic text-gray-600 hover:bg-indigo-50 transition"
                title="Cursief (Ctrl+I)">I</button>
        <button type="button" @mousedown.prevent="run('underline')"
                :style="on('underline') ? 'background:#e0e7ff;color:#4338ca' : ''"
                class="px-2 py-0.5 rounded text-sm underline text-gray-600 hover:bg-indigo-50 transition"
                title="Onderstrepen (Ctrl+U)">U</button>
        <span class="inline-block w-px h-4 mx-1" style="background:#d1d5db"></span>
        <button type="button" @mousedown.prevent="openLinkMode()"
                :style="linkMode || isLink() ? 'background:#e0e7ff;color:#4338ca' : ''"
                class="px-2 py-0.5 rounded text-sm text-gray-600 hover:bg-indigo-50 transition"
                title="Link invoegen / bewerken">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" 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>
        <span class="inline-block w-px h-4 mx-1" style="background:#d1d5db"></span>
        <button type="button" @mousedown.prevent="run('insertUnorderedList')"
                class="px-2 py-0.5 rounded text-sm text-gray-600 hover:bg-indigo-50 transition"
                title="Opsomming">• lijst</button>
        <button type="button" @mousedown.prevent="run('insertOrderedList')"
                class="px-2 py-0.5 rounded text-sm text-gray-600 hover:bg-indigo-50 transition"
                title="Genummerde lijst">1. lijst</button>
        <span class="inline-block w-px h-4 mx-1" style="background:#d1d5db"></span>
        <button type="button" @mousedown.prevent="run('removeFormat')"
                class="px-2 py-0.5 rounded text-xs text-gray-400 hover:bg-red-50 hover:text-red-500 transition"
                title="Opmaak wissen">✕</button>
    </div>

    {{-- URL-invoerbalk (verschijnt onder de werkbalk bij linkmodus) --}}
    <div x-show="linkMode"
         x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="opacity-0 -translate-y-1"
         x-transition:enter-end="opacity-100 translate-y-0"
         class="flex items-center gap-2 px-2 py-1.5 border border-t-0 border-gray-300 dark:border-gray-600"
         style="background:#f0f4ff;display:none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-indigo-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" 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>
        <input type="text"
               x-ref="linkInput"
               x-model="linkUrl"
               @keydown.enter.prevent="insertLink()"
               @keydown.escape.prevent="linkMode = false"
               placeholder="https://..."
               class="flex-1 min-w-0 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-indigo-400">
        <button type="button" @mousedown.prevent="insertLink()"
                class="shrink-0 px-3 py-1 text-sm font-medium bg-indigo-600 text-white rounded hover:bg-indigo-700 transition">
            {{ __('Apply') }}
        </button>
        <button type="button" @mousedown.prevent="removeLink()"
                class="shrink-0 px-2 py-1 text-sm text-red-500 hover:bg-red-50 rounded transition"
                title="{{ __('Remove link') }}">✕</button>
    </div>

    {{-- Bewerkingsgebied --}}
    <div x-ref="editor"
         contenteditable="true"
         @input="sync()"
         @paste="paste($event)"
         class="rtf-area block w-full border border-t-0 border-gray-300 dark:border-gray-600 rounded-b-lg bg-white dark:bg-gray-700 text-sm text-gray-900 dark:text-gray-100 px-3 py-2.5 focus:outline-none overflow-y-auto leading-relaxed"
         style="min-height:{{ $minHeight ?? '8rem' }}; max-height:28rem"></div>

    {{-- Hidden input voor form-submit — wordt gesynchroniseerd via Alpine reactivity --}}
    <input type="hidden" name="{{ $fieldName }}" x-bind:value="content">
</div>