@props([
    'name'        => '',
    'id'          => null,
    'value'       => '',
    'placeholder' => 'Tell viewers about this content…',
    'class'       => '',
    'style'       => '',
    'minHeight'   => '110px',
])

@php
    $rid = $id ?: 'rte-' . \Illuminate\Support\Str::random(6);
@endphp

{{-- ── Shared CSS (once per page) ─────────────────────────────────────────── --}}
@once('rte-styles')
<style>
.rte-wrap { position: relative; }
.rte-source { display: none !important; }
.rte-toolbar {
    display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
    background: var(--bg-dark, #0f0f0f);
    border: 1px solid var(--border-color, #303030); border-bottom: none;
    border-radius: 8px 8px 0 0; padding: 5px 6px;
}
.rte-tbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: none; border-radius: 6px;
    background: none; color: var(--text-secondary, #aaa);
    font-size: 15px; cursor: pointer; transition: background .12s, color .12s; outline: none;
}
.rte-tbtn:hover { background: rgba(255,255,255,.08); color: var(--text-primary, #f1f1f1); }
.rte-tbtn.active { background: rgba(230,30,30,.18); color: var(--brand-red, #e61e1e); }
.rte-sep { width: 1px; height: 18px; background: var(--border-color, #303030); margin: 0 3px; flex-shrink: 0; }
.rte-editable {
    background: var(--bg-dark, #0f0f0f);
    border: 1px solid var(--border-color, #303030); border-radius: 0 0 8px 8px;
    padding: 10px 12px; color: var(--text-primary, #f1f1f1);
    font-size: 13px; line-height: 1.6; font-family: inherit;
    outline: none; overflow-y: auto; word-break: break-word;
}
.rte-editable:focus { border-color: var(--brand-red, #e61e1e); }
.rte-editable:empty::before { content: attr(data-placeholder); color: var(--text-secondary, #777); pointer-events: none; }
.rte-editable p { margin: 0 0 8px; }
.rte-editable p:last-child { margin-bottom: 0; }
.rte-editable h2 { font-size: 18px; font-weight: 700; margin: 4px 0 8px; }
.rte-editable h3 { font-size: 15px; font-weight: 700; margin: 4px 0 6px; }
.rte-editable ul, .rte-editable ol { margin: 0 0 8px; padding-left: 22px; }
.rte-editable blockquote { margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--border-color, #303030); color: var(--text-secondary, #aaa); }
.rte-editable a { color: #3ea6ff; }
.rte-editable a.action-btn, .rte-editable a.action-btn-primary, .rte-editable a.action-btn-danger {
    color: inherit; text-decoration: none;
}

/* inline popover (link / button / emoji) */
.rte-pop {
    position: absolute; z-index: 1090; min-width: 240px;
    background: var(--bg-secondary, #1e1e1e); border: 1px solid var(--border-color, #303030);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.55); padding: 10px;
}
.rte-pop[hidden] { display: none; }
.rte-pop label { display: block; font-size: 11px; color: var(--text-secondary, #aaa); margin: 0 0 4px; }
.rte-pop input[type=text] {
    width: 100%; box-sizing: border-box; background: var(--bg-dark, #0f0f0f);
    border: 1px solid var(--border-color, #303030); border-radius: 6px;
    padding: 7px 9px; color: var(--text-primary, #f1f1f1); font-size: 13px; outline: none; margin-bottom: 8px;
}
.rte-pop input[type=text]:focus { border-color: var(--brand-red, #e61e1e); }
.rte-pop-actions { display: flex; gap: 6px; justify-content: flex-end; }
.rte-pop-btn { border: none; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.rte-pop-btn.cancel { background: rgba(255,255,255,.08); color: var(--text-secondary, #aaa); }
.rte-pop-btn.ok { background: var(--brand-red, #e61e1e); color: #fff; }
.rte-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 180px; overflow-y: auto; }
.rte-emoji-grid button { border: none; background: none; font-size: 18px; line-height: 1; padding: 5px; border-radius: 6px; cursor: pointer; }
.rte-emoji-grid button:hover { background: rgba(255,255,255,.1); }
</style>
@endonce

{{-- ── Engine (once per page) ─────────────────────────────────────────────── --}}
@once('rte-script')
<script>
(function () {
    if (window.RTE) return;

    var EMOJI = ('😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 😉 😍 🥰 😘 😎 🤩 🥳 🤔 🤨 😐 😴 😭 😡 🥺 😱 '
        + '👍 👎 👏 🙌 🙏 💪 🔥 ✨ ⭐ 🌟 💯 ✅ ❌ ❓ ❗ ❤️ 🧡 💛 💚 💙 💜 🖤 💔 💕 💖 '
        + '🎉 🎊 🎁 🏆 🥇 ⚽ 🏀 🏈 🎵 🎶 🎬 📺 📱 💻 📷 🎤 🎮 🚀 🌍 ☀️ 🌙 ⚡ 💧 🍀').split(' ');

    function saveSel(ed) {
        var s = window.getSelection();
        if (s && s.rangeCount && ed.contains(s.anchorNode)) ed._range = s.getRangeAt(0).cloneRange();
    }
    function restoreSel(ed) {
        ed.focus();
        if (ed._range) {
            var s = window.getSelection();
            s.removeAllRanges();
            s.addRange(ed._range);
        }
    }
    function exec(ed, cmd, val) { restoreSel(ed); document.execCommand(cmd, false, val || null); sync(ed); }
    // Alignment must be emitted as CSS text-align (not the legacy align attribute,
    // which the server sanitizer strips), so toggle styleWithCSS just for these.
    function execAlign(ed, cmd) {
        restoreSel(ed);
        try { document.execCommand('styleWithCSS', false, true); } catch (e) {}
        document.execCommand(cmd, false, null);
        try { document.execCommand('styleWithCSS', false, false); } catch (e) {}
        sync(ed);
    }
    function sync(ed) {
        var src = ed._source;
        var html = ed.innerHTML.trim();
        if (html === '<br>' || html === '<div><br></div>' || html === '<p><br></p>') html = '';
        src.value = html;
        src.dispatchEvent(new Event('input', { bubbles: true }));
        src.dispatchEvent(new Event('change', { bubbles: true }));
    }

    function tbtn(icon, title, fn) {
        var b = document.createElement('button');
        b.type = 'button'; b.className = 'rte-tbtn'; b.title = title;
        b.innerHTML = '<i class="bi bi-' + icon + '"></i>';
        b.addEventListener('mousedown', function (e) { e.preventDefault(); });
        b.addEventListener('click', function (e) { e.preventDefault(); fn(e, b); });
        return b;
    }
    function sep() { var s = document.createElement('span'); s.className = 'rte-sep'; return s; }

    function buildPopover(wrap, ed) {
        var pop = document.createElement('div');
        pop.className = 'rte-pop'; pop.hidden = true;
        wrap.appendChild(pop);
        document.addEventListener('click', function (e) {
            if (!pop.hidden && !pop.contains(e.target) && !wrap.querySelector('.rte-toolbar').contains(e.target)) pop.hidden = true;
        });
        return pop;
    }
    function openPop(pop, anchorBtn, html) {
        pop.innerHTML = html;
        pop.hidden = false;
        var tb = anchorBtn.closest('.rte-toolbar');
        pop.style.top = (tb.offsetTop + tb.offsetHeight + 4) + 'px';
        pop.style.left = Math.min(anchorBtn.offsetLeft, tb.offsetWidth - 250) + 'px';
        var f = pop.querySelector('input[type=text]');
        if (f) setTimeout(function () { f.focus(); }, 10);
    }

    function linkForm(pop, ed, anchorBtn, asButton) {
        saveSel(ed);
        var sel = window.getSelection();
        var selText = (sel && ed.contains(sel.anchorNode)) ? sel.toString() : '';
        openPop(pop, anchorBtn,
            '<label>' + (asButton ? 'Button label' : 'Link text') + '</label>'
            + '<input type="text" class="rte-f-text" value="' + selText.replace(/"/g, '&quot;') + '" placeholder="' + (asButton ? 'Click here' : 'Text to show') + '">'
            + '<label>URL</label>'
            + '<input type="text" class="rte-f-url" placeholder="https://…">'
            + '<div class="rte-pop-actions"><button type="button" class="rte-pop-btn cancel">Cancel</button>'
            + '<button type="button" class="rte-pop-btn ok">Insert</button></div>');
        pop.querySelector('.cancel').onclick = function () { pop.hidden = true; };
        pop.querySelector('.ok').onclick = function () {
            var txt = pop.querySelector('.rte-f-text').value.trim();
            var url = pop.querySelector('.rte-f-url').value.trim();
            if (!url) { pop.querySelector('.rte-f-url').focus(); return; }
            if (!/^([a-z][a-z0-9+.\-]*:|\/|#)/i.test(url)) url = 'https://' + url;
            txt = txt || url;
            var esc = function (s) { return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); };
            var cls = asButton ? ' class="action-btn action-btn-primary"' : '';
            var a = '<a href="' + esc(url) + '" target="_blank"' + cls + '>' + esc(txt) + '</a>';
            restoreSel(ed);
            document.execCommand('insertHTML', false, a + (asButton ? '<span>&nbsp;</span>' : ''));
            sync(ed);
            pop.hidden = true;
        };
    }

    function emojiForm(pop, ed, anchorBtn) {
        saveSel(ed);
        var grid = '<div class="rte-emoji-grid">';
        for (var i = 0; i < EMOJI.length; i++) grid += '<button type="button" data-e="' + EMOJI[i] + '">' + EMOJI[i] + '</button>';
        grid += '</div>';
        openPop(pop, anchorBtn, grid);
        pop.querySelectorAll('.rte-emoji-grid button').forEach(function (b) {
            b.addEventListener('mousedown', function (e) { e.preventDefault(); });
            b.addEventListener('click', function () {
                restoreSel(ed);
                document.execCommand('insertText', false, b.dataset.e);
                sync(ed);
                pop.hidden = true;
            });
        });
    }

    window.RTE = {
        init: function (wrap) {
            if (!wrap || wrap.dataset.rteReady) return;
            var src = wrap.querySelector('.rte-source');
            if (!src) return;
            // Skip un-instantiated templates whose placeholders aren't filled in yet
            // (e.g. edit-__TPL__-desc / __DESCNAME__). Closed modals are aria-hidden
            // but must still init, so we only key off the placeholder marker here.
            var marker = (src.id || '') + '|' + (src.getAttribute('name') || '');
            if (marker.indexOf('__') !== -1) return;
            wrap.dataset.rteReady = '1';

            var toolbar = document.createElement('div');
            toolbar.className = 'rte-toolbar';

            var ed = document.createElement('div');
            ed.className = 'rte-editable';
            ed.contentEditable = 'true';
            ed.setAttribute('data-placeholder', src.getAttribute('placeholder') || '');
            ed.style.minHeight = wrap.dataset.minHeight || '110px';
            ed.innerHTML = src.value || '';
            ed._source = src;
            src._editable = ed;

            var pop = null;
            function P() { return pop || (pop = buildPopover(wrap, ed)); }

            toolbar.appendChild(tbtn('type-bold', 'Bold', function () { exec(ed, 'bold'); }));
            toolbar.appendChild(tbtn('type-italic', 'Italic', function () { exec(ed, 'italic'); }));
            toolbar.appendChild(tbtn('type-underline', 'Underline', function () { exec(ed, 'underline'); }));
            toolbar.appendChild(tbtn('type-strikethrough', 'Strikethrough', function () { exec(ed, 'strikeThrough'); }));
            toolbar.appendChild(sep());
            toolbar.appendChild(tbtn('type-h2', 'Heading', function () {
                var inH = document.queryCommandValue('formatBlock').toLowerCase();
                exec(ed, 'formatBlock', (inH === 'h2' || inH === '<h2>') ? 'p' : 'h2');
            }));
            toolbar.appendChild(tbtn('list-ul', 'Bulleted list', function () { exec(ed, 'insertUnorderedList'); }));
            toolbar.appendChild(tbtn('list-ol', 'Numbered list', function () { exec(ed, 'insertOrderedList'); }));
            toolbar.appendChild(tbtn('quote', 'Quote', function () { exec(ed, 'formatBlock', 'blockquote'); }));
            toolbar.appendChild(sep());
            toolbar.appendChild(tbtn('text-left', 'Align left', function () { execAlign(ed, 'justifyLeft'); }));
            toolbar.appendChild(tbtn('text-center', 'Align center', function () { execAlign(ed, 'justifyCenter'); }));
            toolbar.appendChild(tbtn('text-right', 'Align right', function () { execAlign(ed, 'justifyRight'); }));
            toolbar.appendChild(sep());
            toolbar.appendChild(tbtn('link-45deg', 'Insert link', function (e, b) { linkForm(P(), ed, b, false); }));
            toolbar.appendChild(tbtn('hand-index-thumb', 'Insert button link', function (e, b) { linkForm(P(), ed, b, true); }));
            toolbar.appendChild(tbtn('emoji-smile', 'Insert emoji', function (e, b) { emojiForm(P(), ed, b); }));
            toolbar.appendChild(sep());
            toolbar.appendChild(tbtn('eraser', 'Clear formatting', function () { exec(ed, 'removeFormat'); }));

            src.parentNode.insertBefore(toolbar, src);
            src.parentNode.insertBefore(ed, src);

            ed.addEventListener('input', function () { sync(ed); });
            ed.addEventListener('keyup', function () { saveSel(ed); });
            ed.addEventListener('mouseup', function () { saveSel(ed); });
            ed.addEventListener('blur', function () { saveSel(ed); sync(ed); });
            // Paste as plain text to avoid junk markup.
            ed.addEventListener('paste', function (e) {
                e.preventDefault();
                var t = (e.clipboardData || window.clipboardData).getData('text/plain');
                document.execCommand('insertText', false, t);
                sync(ed);
            });
            // Keep editor in sync if external code rewrites the textarea value.
            src.addEventListener('rte:refresh', function () { ed.innerHTML = src.value || ''; });

            var form = src.closest('form');
            if (form && !form.dataset.rteSubmitBound) {
                form.dataset.rteSubmitBound = '1';
                form.addEventListener('submit', function () {
                    form.querySelectorAll('.rte-editable').forEach(function (e2) { if (e2._source) sync(e2); });
                }, true);
            }
        },
        initAll: function (root) {
            (root || document).querySelectorAll('.rte-wrap:not([data-rte-ready])').forEach(function (w) { RTE.init(w); });
        }
    };

    // Auto-init any editor markup added later (modals, JS-cloned track rows).
    var mo = new MutationObserver(function (muts) {
        for (var i = 0; i < muts.length; i++) {
            for (var j = 0; j < muts[i].addedNodes.length; j++) {
                var n = muts[i].addedNodes[j];
                if (n.nodeType !== 1) continue;
                if (n.classList && n.classList.contains('rte-wrap')) RTE.init(n);
                if (n.querySelectorAll) n.querySelectorAll('.rte-wrap:not([data-rte-ready])').forEach(function (w) { RTE.init(w); });
            }
        }
    });
    function rteBoot() {
        RTE.initAll();
        if (document.body) mo.observe(document.body, { childList: true, subtree: true });
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', rteBoot);
    } else {
        rteBoot();
    }
}());
</script>
@endonce

{{-- ── Instance ───────────────────────────────────────────────────────────── --}}
<div class="rte-wrap {{ $class }}" data-min-height="{{ $minHeight }}" @if($style) style="{{ $style }}" @endif>
    <textarea class="rte-source"
              name="{{ $name }}"
              id="{{ $rid }}"
              placeholder="{{ $placeholder }}">{{ $value }}</textarea>
</div>