/* /assets/js/bridge/rte-editor.js */
(function () {
    const PluginName = 'bridge-rte-editor';
    const B = window.BridgeParts || (window.BridgeParts = {});

    const log = (type, message, color = '#94a3b8', logType = 'info', force = false) => {
        if (typeof B.log === 'function') {
            B.log(PluginName, `[${type}] ${message}`, color, logType, force);
        }
    };

        const execRteCommand = (rte, cmd, value, docOverride) => {
            try {
                if (rte && typeof rte.exec === 'function') {
                    rte.exec(cmd, value);
                    return true;
                }
            } catch {}
            try {
                const doc = docOverride
                    || rte?.doc
                    || rte?.el?.ownerDocument
                    || document;
                if (rte?.el && typeof rte.el.focus === 'function') {
                    rte.el.focus();
                }
                const ok = doc.execCommand(cmd, false, value);
                if (ok === false && cmd === 'insertText') {
                    doc.execCommand('insertHTML', false, String(value || '').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
                }
                return true;
            } catch {}
            return false;
        };

        const normalizeRteActionList = (editor, names) => {
            const cfg = editor.getConfig ? editor.getConfig() : {};
            cfg.richTextEditor = cfg.richTextEditor || {};
            const base = Array.isArray(cfg.richTextEditor.actions)
                ? cfg.richTextEditor.actions.slice()
                : ['bold', 'italic', 'underline', 'strikethrough', 'link'];
            names.forEach((name) => {
                const exists = base.some((item) => (typeof item === 'string' ? item === name : item && item.name === name));
                if (!exists) base.push(name);
            });
            cfg.richTextEditor.actions = base;
        };

        const ensureTextToolbarButton = (editor, component) => {
            if (!component || !component.is) return;
            const isTextLike = component.is('text') || component.is('button') || component.is('link');
            if (!isTextLike) return;
            const toolbar = (component.get && component.get('toolbar')) || [];
            if (toolbar.some((item) => item && item.command === 'bridge-open-richtext')) return;
            toolbar.push({
                label: '<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M4 20h4l10-10-4-4L4 16v4zm14.7-11.3c.4-.4.4-1 0-1.4l-2-2c-.4-.4-1-.4-1.4 0l-1.3 1.3 4 4 1.7-1.9z" fill="currentColor"/></svg>',
                attributes: { title: 'Richtext bearbeiten' },
                command: 'bridge-open-richtext',
            });
            component.set && component.set('toolbar', toolbar);
        };

        const openRichTextModal = (editor, component) => {
            if (!component || !component.is || !(component.is('text') || component.is('button') || component.is('link'))) {
                log('RTE', 'Bitte zuerst ein Text-Element auswaehlen.', '#888');
                return;
            }

            const modal = editor.Modal;
            if (!modal) return;
            if (editor.__bridgeRteModalOpen) return;
            editor.__bridgeRteModalOpen = true;
            editor.__bridgeRteAllowClose = false;
            let reopenGuard = false;
            const closeModal = () => {
                editor.__bridgeRteAllowClose = true;
                editor.__bridgeRteModalOpen = false;
                if (typeof modal.close === 'function') {
                    modal.close();
                } else {
                    const mdl = modal.getModel && modal.getModel();
                    if (mdl && typeof mdl.set === 'function') {
                        mdl.set('open', false);
                    } else if (modal.el) {
                        modal.el.style.display = 'none';
                    }
                }
            };

            if (!modal.__bridgeCloseLocked) {
                modal.__bridgeCloseLocked = true;
                modal.__bridgeOriginalClose = modal.close ? modal.close.bind(modal) : null;
                modal.close = function (...args) {
                    if (!editor.__bridgeRteModalOpen && typeof modal.__bridgeOriginalClose === 'function') {
                        return modal.__bridgeOriginalClose(...args);
                    }
                    if (editor.__bridgeRteAllowClose && typeof modal.__bridgeOriginalClose === 'function') {
                        editor.__bridgeRteAllowClose = false;
                        return modal.__bridgeOriginalClose(...args);
                    }
                    if (!editor.__bridgeRteModalOpen && !modal.__bridgeOriginalClose) {
                        const mdl = modal.getModel && modal.getModel();
                        if (mdl && typeof mdl.set === 'function') {
                            mdl.set('open', false);
                        } else if (modal.el) {
                            modal.el.style.display = 'none';
                        }
                    }
                    if (editor.__bridgeRteAllowClose && !modal.__bridgeOriginalClose) {
                        editor.__bridgeRteAllowClose = false;
                        const mdl = modal.getModel && modal.getModel();
                        if (mdl && typeof mdl.set === 'function') {
                            mdl.set('open', false);
                        } else if (modal.el) {
                            modal.el.style.display = 'none';
                        }
                    }
                };
            }

            const doc = document;
            const container = doc.createElement('div');
            container.style.display = 'flex';
            container.style.flexDirection = 'column';
            container.style.gap = '10px';
            container.style.height = '100%';
            container.style.minHeight = '360px';

            const toolbar = doc.createElement('div');
            toolbar.style.display = 'flex';
            toolbar.style.flexWrap = 'wrap';
            toolbar.style.gap = '6px';
            toolbar.style.alignItems = 'center';

            const content = doc.createElement('div');
            content.contentEditable = 'true';
            content.style.flex = '1';
            content.style.minHeight = '280px';
            content.style.border = '1px solid #cbd5f5';
            content.style.borderRadius = '6px';
            content.style.padding = '12px';
            content.style.background = '#ffffff';
            content.style.overflow = 'auto';
            content.style.fontFamily = 'Arial, sans-serif';
            content.style.fontSize = '14px';

            const initialHtml = (component.view && component.view.el && component.view.el.innerHTML)
                || (component.get && component.get('content'))
                || '';
            content.innerHTML = initialHtml;

            const addButton = (labelHtml, title, cmd, valueGetter) => {
                const btn = doc.createElement('button');
                btn.type = 'button';
                btn.innerHTML = labelHtml;
                btn.title = title;
                btn.style.padding = '4px 8px';
                btn.style.border = '1px solid #cbd5f5';
                btn.style.borderRadius = '4px';
                btn.style.background = '#f8fafc';
                btn.style.cursor = 'pointer';
                btn.addEventListener('click', () => {
                    content.focus();
                    const value = typeof valueGetter === 'function' ? valueGetter() : valueGetter;
                    if (value === null || value === undefined) return;
                    if (cmd === 'createLink' && !value) return;
                    execRteCommand(null, cmd, value, content.ownerDocument);
                });
                toolbar.appendChild(btn);
            };

            const addSelect = (options, title, onChange) => {
                const select = doc.createElement('select');
                select.title = title;
                select.style.padding = '4px 8px';
                select.style.border = '1px solid #cbd5f5';
                select.style.borderRadius = '4px';
                select.style.background = '#ffffff';
                options.forEach((opt) => {
                    const optEl = doc.createElement('option');
                    optEl.value = opt.value;
                    optEl.textContent = opt.label;
                    select.appendChild(optEl);
                });
                select.addEventListener('change', () => {
                    const value = select.value;
                    content.focus();
                    if (value) onChange(value);
                });
                toolbar.appendChild(select);
                return select;
            };

            const insertText = (text) => {
                content.focus();
                if (!execRteCommand(null, 'insertText', text)) {
                    execRteCommand(null, 'insertHTML', String(text).replace(/</g, '&lt;').replace(/>/g, '&gt;'));
                }
            };

            const icon = (path) => `<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="${path}" fill="currentColor"/></svg>`;
            addButton('<strong>B</strong>', 'Fett', 'bold');
            addButton('<em>I</em>', 'Kursiv', 'italic');
            addButton('<span style="text-decoration:underline">U</span>', 'Unterstrichen', 'underline');
            addButton('<span style="text-decoration:line-through">S</span>', 'Durchgestrichen', 'strikethrough');
            addButton(icon('M4 7h10v2H4zM4 11h16v2H4zM4 15h10v2H4z'), 'Liste (ungeordnet)', 'insertUnorderedList');
            addButton(icon('M4 7h14v2H4zM4 11h14v2H4zM4 15h14v2H4z') + '<span style="font-size:10px;margin-left:4px">1.</span>', 'Liste (geordnet)', 'insertOrderedList');
            addButton(icon('M4 7h10v2H4zM4 11h16v2H4zM4 15h12v2H4z'), 'Linksbundig', 'justifyLeft');
            addButton(icon('M5 7h14v2H5zM4 11h16v2H4zM5 15h14v2H5z'), 'Zentriert', 'justifyCenter');
            addButton(icon('M10 7h10v2H10zM4 11h16v2H4zM8 15h12v2H8z'), 'Rechtsbundig', 'justifyRight');
            addButton(icon('M4 7h16v2H4zM4 11h16v2H4zM4 15h16v2H4z'), 'Blocksatz', 'justifyFull');
            addButton('Link', 'Link einfuegen', 'createLink', () => prompt('Link-URL eingeben', 'https://'));
            addButton('Unlink', 'Link entfernen', 'unlink');
            addButton('Sub', 'Tiefgestellt', 'subscript');
            addButton('Sup', 'Hochgestellt', 'superscript');
            addButton('Einr.', 'Einzug', 'indent');
            addButton('Aus.', 'Ausruecken', 'outdent');
            addButton('Clear', 'Formatierung entfernen', 'removeFormat');

            const fontOptions = (B.RTE_FONTS && Array.isArray(B.RTE_FONTS) && B.RTE_FONTS.length)
                ? B.RTE_FONTS
                : [
                    { label: 'Arial', value: 'Arial, sans-serif' },
                    { label: 'Calibri', value: 'Calibri, sans-serif' },
                    { label: 'Cambria', value: 'Cambria, serif' },
                    { label: 'Georgia', value: 'Georgia, serif' },
                    { label: 'Tahoma', value: 'Tahoma, sans-serif' },
                    { label: 'Times New Roman', value: 'Times New Roman, serif' },
                    { label: 'Trebuchet MS', value: 'Trebuchet MS, sans-serif' },
                    { label: 'Verdana', value: 'Verdana, sans-serif' },
                ];
            addSelect([
                { label: 'Schriftart', value: '' },
                ...fontOptions,
            ], 'Schriftart', (value) => execRteCommand(null, 'fontName', value, content.ownerDocument));

            addSelect([
                { label: 'Groesse', value: '' },
                { label: '10px', value: '1' },
                { label: '12px', value: '2' },
                { label: '14px', value: '3' },
                { label: '16px', value: '4' },
                { label: '18px', value: '5' },
                { label: '24px', value: '6' },
                { label: '32px', value: '7' },
            ], 'Schriftgroesse', (value) => execRteCommand(null, 'fontSize', value, content.ownerDocument));

            const emojiBtn = doc.createElement('button');
            emojiBtn.type = 'button';
            emojiBtn.textContent = ':-)';
            emojiBtn.title = 'Emoticon einfuegen';
            emojiBtn.style.padding = '4px 8px';
            emojiBtn.style.border = '1px solid #cbd5f5';
            emojiBtn.style.borderRadius = '4px';
            emojiBtn.style.background = '#f8fafc';
            emojiBtn.style.cursor = 'pointer';
            emojiBtn.addEventListener('click', () => {
                const pick = prompt('Emoticon eingeben', ':)');
                if (pick) insertText(pick);
            });
            toolbar.appendChild(emojiBtn);

            container.appendChild(toolbar);
            container.appendChild(content);

            const actions = doc.createElement('div');
            actions.style.display = 'flex';
            actions.style.justifyContent = 'flex-end';
            actions.style.gap = '8px';

            const cancelBtn = doc.createElement('button');
            cancelBtn.type = 'button';
            cancelBtn.textContent = 'Abbrechen';
            cancelBtn.style.padding = '6px 12px';
            cancelBtn.style.border = '1px solid #cbd5f5';
            cancelBtn.style.borderRadius = '4px';
            cancelBtn.style.background = '#f8fafc';
            cancelBtn.style.cursor = 'pointer';
            cancelBtn.addEventListener('click', () => {
                closeModal();
            });

            const saveBtn = doc.createElement('button');
            saveBtn.type = 'button';
            saveBtn.textContent = 'Speichern';
            saveBtn.style.padding = '6px 12px';
            saveBtn.style.border = '1px solid #0ea5e9';
            saveBtn.style.borderRadius = '4px';
            saveBtn.style.background = '#0ea5e9';
            saveBtn.style.color = '#ffffff';
            saveBtn.style.cursor = 'pointer';
            saveBtn.addEventListener('click', () => {
                let html = String(content.innerHTML || '').trim();
                const isTextLike = component && component.is && (component.is('text') || component.is('button') || component.is('link'));
                if (!html) {
                    const fallbackText = String(content.textContent || '').trim();
                    if (fallbackText) {
                        html = fallbackText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    }
                }
                try {
                    if (!isTextLike && component.components) {
                        component.components(html);
                    }
                    if (component.set) {
                        component.set('content', html);
                        component.trigger && component.trigger('change:content');
                        component.trigger && component.trigger('change:components');
                    }
                    if (component.view && component.view.render) {
                        component.view.render();
                    }
                    if (editor && typeof editor.trigger === 'function') {
                        editor.trigger('component:update', component);
                    }
                } catch {}
                closeModal();
            });

            actions.appendChild(cancelBtn);
            actions.appendChild(saveBtn);
            container.appendChild(actions);

            modal.setTitle('Richtext Editor');
            modal.setContent(container);
            const mdl = modal.getModel && modal.getModel();
            if (mdl && typeof mdl.set === 'function') {
                mdl.set('closeOnEsc', false);
                mdl.set('closeOnClick', false);
            }
            if (typeof modal.onceClose === 'function') {
                modal.onceClose(() => {
                    editor.__bridgeRteModalOpen = false;
                    editor.__bridgeRteAllowClose = false;
                });
            }
            if (mdl && typeof mdl.on === 'function') {
                const handler = () => {
                    if (editor.__bridgeRteAllowClose) {
                        mdl.off && mdl.off('change:open', handler);
                        return;
                    }
                    if (!mdl.get('open') && !reopenGuard) {
                        reopenGuard = true;
                        mdl.set('open', true);
                        setTimeout(() => { reopenGuard = false; }, 0);
                    }
                };
                mdl.on('change:open', handler);
            }
            try {
                modal.open({ closeOnEsc: false, closeOnClick: false });
            } catch {
                modal.open();
            }

            const modalEl = modal.getEl ? modal.getEl() : modal.el;
            const closeBtn = modalEl && modalEl.querySelector ? modalEl.querySelector('.gjs-mdl-btn-close') : null;
            if (closeBtn && !closeBtn.__bridgeRteBound) {
                closeBtn.__bridgeRteBound = true;
                closeBtn.addEventListener('click', () => {
                    editor.__bridgeRteAllowClose = true;
                }, true);
            }
        };

        const setupRichTextEditor = (editor) => {
            if (!editor || !editor.RichTextEditor) return;
            const rte = editor.RichTextEditor;
            const icon = (path) => `<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="${path}" fill="currentColor"/></svg>`;
            const logRteBlur = (label, detail) => {
                const msg = `[RTE BLUR] ${label}${detail ? ' | ' + detail : ''}`;
                try { console.log(msg); } catch {}
                log('RTE BLUR', msg, '#888');
                try {
                    if (window.parent && window.parent !== window) {
                        window.parent.postMessage({ source: 'bridge-core', type: 'rte-blur', detail: msg }, '*');
                    }
                } catch {}
            };
            const resolveFontOptions = () => (B.RTE_FONTS && Array.isArray(B.RTE_FONTS) && B.RTE_FONTS.length)
                ? B.RTE_FONTS
                : [
                    { label: 'Arial', value: 'Arial, sans-serif' },
                    { label: 'Calibri', value: 'Calibri, sans-serif' },
                    { label: 'Cambria', value: 'Cambria, serif' },
                    { label: 'Georgia', value: 'Georgia, serif' },
                    { label: 'Tahoma', value: 'Tahoma, sans-serif' },
                    { label: 'Times New Roman', value: 'Times New Roman, serif' },
                    { label: 'Trebuchet MS', value: 'Trebuchet MS, sans-serif' },
                    { label: 'Verdana', value: 'Verdana, sans-serif' },
                ];

            const addAction = (name, icon, title, command, valueGetter) => {
                if (rte.get && rte.get(name)) return;
                rte.add(name, {
                    icon,
                    attributes: { title },
                    result: (rteInstance) => {
                        const value = typeof valueGetter === 'function' ? valueGetter() : valueGetter;
                        if (value === null || value === undefined) return;
                        if ((command === 'insertText' || command === 'fontName' || command === 'fontSize' || command === 'createLink') && !value) {
                            return;
                        }
                        execRteCommand(rteInstance, command, value);
                    },
                });
            };

            addAction('bridge-align-left', icon('M4 7h10v2H4zM4 11h16v2H4zM4 15h12v2H4z'), 'Linksbundig', 'justifyLeft');
            addAction('bridge-align-center', icon('M5 7h14v2H5zM4 11h16v2H4zM5 15h14v2H5z'), 'Zentriert', 'justifyCenter');
            addAction('bridge-align-right', icon('M10 7h10v2H10zM4 11h16v2H4zM8 15h12v2H8z'), 'Rechtsbundig', 'justifyRight');
            addAction('bridge-align-justify', icon('M4 7h16v2H4zM4 11h16v2H4zM4 15h16v2H4z'), 'Blocksatz', 'justifyFull');
            addAction('bridge-ul', icon('M4 7h10v2H4zM4 11h16v2H4zM4 15h10v2H4z'), 'Liste (ungeordnet)', 'insertUnorderedList');
            addAction('bridge-ol', icon('M4 7h16v2H4zM4 11h16v2H4zM4 15h16v2H4z'), 'Liste (geordnet)', 'insertOrderedList');
            addAction('bridge-emoji', ':-)', 'Emoticon einfuegen', 'insertText', () => prompt('Emoticon eingeben', ':)'));
            addAction('bridge-font-family', 'F', 'Schriftart', 'fontName', () => {
                const fonts = resolveFontOptions();
                const example = fonts.map((f) => f.label).slice(0, 5).join(', ');
                return prompt(`Schriftart (z.B. ${example})`, fonts[0]?.label || 'Arial');
            });
            addAction('bridge-font-size', 'Px', 'Schriftgroesse', 'fontSize', () => {
                const raw = prompt('Schriftgroesse in px (10-32)', '14');
                const val = Number(raw || 14);
                if (Number.isNaN(val)) return '3';
                const map = [
                    { px: 10, cmd: '1' },
                    { px: 12, cmd: '2' },
                    { px: 14, cmd: '3' },
                    { px: 16, cmd: '4' },
                    { px: 18, cmd: '5' },
                    { px: 24, cmd: '6' },
                    { px: 32, cmd: '7' },
                ];
                let best = map[0];
                map.forEach((entry) => {
                    if (Math.abs(entry.px - val) < Math.abs(best.px - val)) best = entry;
                });
                return best.cmd;
            });
            if (!(rte.get && rte.get('bridge-open-richtext'))) {
                rte.add('bridge-open-richtext', {
                    icon: '<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M4 20h4l10-10-4-4L4 16v4zm14.7-11.3c.4-.4.4-1 0-1.4l-2-2c-.4-.4-1-.4-1.4 0l-1.3 1.3 4 4 1.7-1.9z" fill="currentColor"/></svg>',
                    attributes: { title: 'Richtext Editor' },
                    result: () => {
                        const component = editor.getSelected && editor.getSelected();
                        openRichTextModal(editor, component);
                    },
                });
            }

            if (editor.Commands && editor.Commands.add) {
                editor.Commands.add('bridge-open-richtext', {
                    run(ed, sender, opts = {}) {
                        if (sender && sender.set) sender.set('active', 0);
                        const component = opts.component || ed.getSelected();
                        openRichTextModal(ed, component);
                    },
                });
            }

            normalizeRteActionList(editor, [
                'bridge-open-richtext',
                'bridge-font-family',
                'bridge-font-size',
                'bridge-align-left',
                'bridge-align-center',
                'bridge-align-right',
                'bridge-align-justify',
                'bridge-ul',
                'bridge-ol',
                'bridge-emoji',
                'bridge-placeholder',
            ]);

            const isTextLike = (model) => !!(model && model.is && (model.is('text') || model.is('button') || model.is('link')));
            let lastTextSelection = { id: null, ts: 0 };
            let lastTextComponent = null;
            editor.on('component:selected', (model) => {
                ensureTextToolbarButton(editor, model);
                if (!isTextLike(model)) return;
                const now = Date.now();
                if (lastTextSelection.id === model.cid && (now - lastTextSelection.ts) < 450) {
                    openRichTextModal(editor, model);
                }
                lastTextComponent = model;
                lastTextSelection = { id: model.cid, ts: now };
            });
            editor.on('component:deselected', (model) => {
                if (isTextLike(model)) {
                    lastTextComponent = model;
                }
            });
            editor.on('component:add', (model) => ensureTextToolbarButton(editor, model));
            editor.on('component:dblclick', (model) => {
                if (isTextLike(model)) {
                    openRichTextModal(editor, model);
                }
            });
            editor.on('canvas:frame:load', () => {
                const body = editor.Canvas && editor.Canvas.getBody && editor.Canvas.getBody();
                if (!body || body.__bridgeRteDblclickBound) return;
                body.__bridgeRteDblclickBound = true;
                body.addEventListener('dblclick', () => {
                    const selected = editor.getSelected && editor.getSelected();
                    if (isTextLike(selected)) {
                        openRichTextModal(editor, selected);
                    }
                }, true);
                const blurHandler = (evt) => {
                    const target = evt && evt.target;
                    if (!target) return;
                    const isEditable = !!(target.isContentEditable || (target.getAttribute && target.getAttribute('contenteditable') === 'true'));
                    if (!isEditable) return;
                    const selected = lastTextComponent || (editor.getSelected && editor.getSelected());
                    const selectedEl = selected && selected.view && selected.view.el;
                    if (selected && selectedEl && (selectedEl === target || selectedEl.contains(target))) {
                        const html = String(target.innerHTML || '').trim();
                        try {
                            const content = selected && selected.get ? selected.get('content') : '';
                            console.warn('[RTE BLUR DEBUG]', {
                                tag: target.tagName,
                                htmlLen: html.length,
                                contentLen: String(content || '').length,
                                modelType: selected && selected.get ? selected.get('type') : undefined,
                                modelId: selected && (selected.getId ? selected.getId() : selected.get && selected.get('id')),
                            });
                        } catch {}
                    }
                    let contentInfo = '';
                    try {
                        const content = selected && selected.get ? selected.get('content') : '';
                        contentInfo = String(content || '').trim() ? 'Content vorhanden' : 'Content leer';
                    } catch {}
                    logRteBlur('contenteditable blur', contentInfo);
                };
                body.addEventListener('blur', blurHandler, true);
                body.addEventListener('focusout', blurHandler, true);
            });
            editor.on('rte:disable', (model) => {
                const target = model || (editor.getSelected && editor.getSelected());
                if (!isTextLike(target)) return;
                const content = target && target.get ? target.get('content') : '';
                const msg = String(content || '').trim() ? 'Content vorhanden' : 'Content leer';
                logRteBlur('rte:disable fuer Text-Komponente', msg);
            });
        };

    B.setupRichTextEditor = setupRichTextEditor;
})();