// Simple markup inserter module
(function(global){
    console.log('markup_inserter.js loaded');
    function insertAtCursor(el, text){
        if(!el) return;
        const start = el.selectionStart || 0;
        const end = el.selectionEnd || 0;
        const val = el.value || '';
        el.value = val.slice(0, start) + text + val.slice(end);
        el.selectionStart = el.selectionEnd = start + text.length;
        el.focus();
    }

    function createToolbar(){
        const wrap = document.createElement('div');
        wrap.className = 'd-flex gap-2 mb-2 markup-inserter-toolbar';
        const group = document.createElement('div');
        group.className = 'btn-group';
        const makeBtn = function(type, text){
            const b = document.createElement('button');
            b.type = 'button'; b.className = 'btn btn-sm btn-outline-secondary markup-insert-button';
            b.dataset.type = type; b.textContent = text; return b;
        };
        group.appendChild(makeBtn('case','Insert case'));
        group.appendChild(makeBtn('finding','Insert finding'));
        group.appendChild(makeBtn('displayset','Insert displayset'));
        const hint = document.createElement('div'); hint.className='flex-fill text-muted small align-self-center'; hint.textContent='Use the buttons to insert markup like [[case:123]]';
        wrap.appendChild(group); wrap.appendChild(hint);
        return wrap;
    }

    function attachToolbarToTextarea(textarea){
        if(!textarea) return null;
        // avoid double attaching
        if(textarea._markupToolbarAttached) return null;
        console.log('Attaching markup toolbar to textarea', textarea);
        const toolbar = createToolbar();
        textarea.parentNode.insertBefore(toolbar, textarea);
        toolbar.querySelectorAll('.markup-insert-button').forEach(function(btn){
            btn.addEventListener('click', function(){
                const t = btn.dataset.type;
                // Respect explicit dataset provided by the widget or page meta only
                var detectedCase = textarea && textarea.dataset && textarea.dataset.currentCase ? textarea.dataset.currentCase : (document.getElementById('current-case-meta') ? document.getElementById('current-case-meta').getAttribute('data-current-case') : null);
                if(t === 'case'){
                    openCasePicker(textarea);
                } else if(t === 'finding'){
                    openFindingPicker(textarea, detectedCase);
                } else if(t === 'displayset'){
                    openDisplaysetPicker(textarea, detectedCase);
                }
            });
        });
        textarea._markupToolbarAttached = true;
        return toolbar;
    }

    function initForNames(names){
        if(!Array.isArray(names)) return;
        document.addEventListener('DOMContentLoaded', function(){
            console.log('markupInserter.initForNames DOMContentLoaded handler running for', names);
            names.forEach(function(name){
                const el = document.querySelector('textarea[name="'+name+'"]');
                if(el) attachToolbarToTextarea(el);
            });
        });
    }

    function attachToSelector(selector){
        document.addEventListener('DOMContentLoaded', function(){
            document.querySelectorAll(selector).forEach(function(el){
                if(el.tagName === 'TEXTAREA') attachToolbarToTextarea(el);
            });
        });
    }

    // Auto-attach to placeholders rendered in HTMX responses or server-side includes.
    document.addEventListener('DOMContentLoaded', function(){
        console.log('markupInserter DOMContentLoaded auto-attach running');
        // Attach to explicit placeholders
        document.querySelectorAll('.markup-toolbar-placeholder').forEach(function(ph){
            let ta = ph.nextElementSibling;
            if(ta && ta.tagName === 'TEXTAREA') attachToolbarToTextarea(ta);
        });

        // Also auto-init for common case textarea names to cover full-page forms
        try{ initForNames(['description','history','discussion','report','notes']); }catch(e){}
    });

    document.addEventListener('htmx:afterSwap', function(evt){
        console.log('markupInserter htmx:afterSwap event', evt && evt.detail && evt.detail.target);
        try{
            const target = evt.detail && evt.detail.target ? evt.detail.target : document;
            (target.querySelectorAll ? target : document).querySelectorAll('.markup-toolbar-placeholder').forEach(function(ph){
                let ta = ph.nextElementSibling;
                if(ta && ta.tagName === 'TEXTAREA') attachToolbarToTextarea(ta);
            });

            // Also attach to any textareas within the swapped target that match our common names
            var ctx = evt.detail && evt.detail.target ? evt.detail.target : document;
            ['description','history','discussion','report','notes'].forEach(function(name){
                ctx.querySelectorAll && ctx.querySelectorAll('textarea[name="'+name+'"]') && ctx.querySelectorAll('textarea[name="'+name+'"]').forEach(function(ta){ attachToolbarToTextarea(ta); });
            });
        }catch(e){/* ignore */}
    });

    // Fallback: attach toolbar when a textarea receives focus (covers dynamically created editors)
    document.addEventListener('focusin', function(e){
        console.log('markupInserter focusin event for', e && e.target);
        try{
            var el = e.target;
            if(!el || el.tagName !== 'TEXTAREA') return;
            // Attach for common names or if a placeholder is present
            var name = el.getAttribute('name') || '';
            if(['description','history','discussion','report','notes'].includes(name) || (el.previousElementSibling && el.previousElementSibling.classList && el.previousElementSibling.classList.contains('markup-toolbar-placeholder'))){
                attachToolbarToTextarea(el);
            }
        }catch(err){/* ignore */}
    }, true);

    // Expose API
    global.markupInserter = {
        attachToolbarToTextarea: attachToolbarToTextarea,
        initForNames: initForNames,
        attachToSelector: attachToSelector
    };

    // --- Case picker modal ---
    function openCasePicker(textarea){
        try{
            console.log('Opening case picker for', textarea);
            // Create overlay
            const overlay = document.createElement('div');
            overlay.className = 'markup-case-picker-overlay';
            Object.assign(overlay.style, {position:'fixed',left:0,top:0,right:0,bottom:0,background:'rgba(0,0,0,0.4)',zIndex:1050,display:'flex',alignItems:'center',justifyContent:'center'});

            const dialog = document.createElement('div');
            dialog.className = 'markup-case-picker-dialog card';
            Object.assign(dialog.style, {width:'min(900px,95%)',maxHeight:'80vh',overflow:'auto'});

            const header = document.createElement('div'); header.className='card-header d-flex justify-content-between align-items-center';
            header.innerHTML = '<strong>Select case</strong>';
            const closeBtn = document.createElement('button'); closeBtn.type='button'; closeBtn.className='btn-close'; closeBtn.setAttribute('aria-label','Close');
            closeBtn.addEventListener('click', function(){ document.body.removeChild(overlay); });
            header.appendChild(closeBtn);

            const body = document.createElement('div'); body.className='card-body';
            const input = document.createElement('input'); input.type='search'; input.className='form-control mb-2'; input.placeholder='Type to search cases...';
            const results = document.createElement('div'); results.className='case-search-results';
            body.appendChild(input); body.appendChild(results);

            dialog.appendChild(header); dialog.appendChild(body); overlay.appendChild(dialog);
            document.body.appendChild(overlay);
            input.focus();

            var timer = null;
            input.addEventListener('input', function(){
                if(timer) clearTimeout(timer);
                timer = setTimeout(function(){
                    var q = encodeURIComponent(input.value || '');
                    // Fetch server-side partial that renders result list-group
                    var url = window.location.origin + '/atlas/search/cases/?q=' + q;
                    fetch(url, {credentials:'same-origin'}).then(function(r){ return r.text(); }).then(function(html){
                        results.innerHTML = html;
                    }).catch(function(e){ console.error('case picker fetch error', e); results.innerHTML = '<div class="alert alert-danger">Search failed</div>'; });
                }, 300);
            });

            // Delegate click on result items
            results.addEventListener('click', function(e){
                var item = e.target.closest('.list-group-item');
                if(!item) return;
                var pk = item.getAttribute('data-case-pk');
                if(!pk){
                    var a = item.querySelector('a');
                    if(a){ var m = a.getAttribute('href').match(/case\/(\d+)\/?/); if(m) pk = m[1]; }
                }
                if(!pk) return;
                var defaultLabel = item.getAttribute('data-label') || (item.querySelector('h6') ? item.querySelector('h6').textContent.trim() : '');
                var custom = window.prompt('Custom text (leave empty to use default)', defaultLabel || '');
                if(custom === null){ if(overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay); return; }
                var labelToUse = custom && custom.length ? custom : (defaultLabel || null);
                var token = '[[' + 'case:' + pk + (labelToUse ? '|' + labelToUse : '') + ']]';
                insertAtCursor(textarea, token);
                // remove modal
                if(overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
            });

            // Allow ESC to close
            overlay.addEventListener('keydown', function(ev){ if(ev.key === 'Escape'){ if(overlay.parentNode) overlay.parentNode.removeChild(overlay); } });
            // make overlay focusable so keydown works
            overlay.tabIndex = -1; overlay.focus();
            // load initial recent results (empty query)
            fetch(window.location.origin + '/atlas/search/cases/').then(function(r){ return r.text(); }).then(function(html){ results.innerHTML = html; }).catch(function(){});
        }catch(err){ console.error('openCasePicker error', err); }
    }

    function openFindingPicker(textarea, caseId){
        try{
            console.log('Opening finding picker for', textarea);
            const overlay = document.createElement('div');
            overlay.className = 'markup-case-picker-overlay';
            Object.assign(overlay.style, {position:'fixed',left:0,top:0,right:0,bottom:0,background:'rgba(0,0,0,0.4)',zIndex:1050,display:'flex',alignItems:'center',justifyContent:'center'});
            const dialog = document.createElement('div'); dialog.className='markup-case-picker-dialog card'; Object.assign(dialog.style, {width:'min(900px,95%)',maxHeight:'80vh',overflow:'auto'});
            const header = document.createElement('div'); header.className='card-header d-flex justify-content-between align-items-center'; header.innerHTML = '<strong>Select finding</strong>';
            // Determine case filter from explicit dataset on the textarea or provided caseId
            var detectedF = (textarea && textarea.dataset && textarea.dataset.currentCase) ? { id: textarea.dataset.currentCase, title: textarea.dataset.currentCaseTitle } : {};
            var currentCaseF = caseId || detectedF.id || null;
            const closeBtn = document.createElement('button'); closeBtn.type='button'; closeBtn.className='btn-close'; closeBtn.setAttribute('aria-label','Close'); closeBtn.addEventListener('click', function(){ document.body.removeChild(overlay); }); header.appendChild(closeBtn);
            const body = document.createElement('div'); body.className='card-body';
            const input = document.createElement('input'); input.type='search'; input.className='form-control mb-2'; input.placeholder='Type to search findings...';
            const results = document.createElement('div'); results.className='finding-search-results'; body.appendChild(input); body.appendChild(results);
            dialog.appendChild(header); dialog.appendChild(body); overlay.appendChild(dialog); document.body.appendChild(overlay); input.focus();

            var timer = null;
            input.addEventListener('input', function(){ if(timer) clearTimeout(timer); timer = setTimeout(function(){ var q = encodeURIComponent(input.value || ''); var url = window.location.origin + '/atlas/search/findings/?q=' + q + (currentCaseF ? '&case=' + currentCaseF : ''); fetch(url, {credentials:'same-origin'}).then(function(r){ return r.text(); }).then(function(html){ results.innerHTML = html; }).catch(function(e){ console.error('finding picker fetch error', e); results.innerHTML = '<div class="alert alert-danger">Search failed</div>'; }); }, 300); });

            results.addEventListener('click', function(e){
                var item = e.target.closest('.list-group-item');
                if(!item) return;
                var sfpk = item.getAttribute('data-seriesfinding-pk');
                var fpk = item.getAttribute('data-finding-pk');
                var defaultLabel = item.getAttribute('data-label') || (item.querySelector('strong') ? item.querySelector('strong').textContent.trim() : '');
                var custom = window.prompt('Custom text (leave empty to use default)', defaultLabel || '');
                if(custom === null){ if(overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay); return; }
                var labelToUse = custom && custom.length ? custom : (defaultLabel || null);
                if(sfpk){
                    var token = '[['+'seriesfinding:'+sfpk + (labelToUse ? '|' + labelToUse : '') + ']]';
                    insertAtCursor(textarea, token);
                } else if(fpk){
                    var token = '[['+'finding:'+fpk + (labelToUse ? '|' + labelToUse : '') + ']]';
                    insertAtCursor(textarea, token);
                } else {
                    return;
                }
                if(overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
            });
            overlay.tabIndex = -1; overlay.focus();
            function fetchInitialFindings(){ var initFindingsUrl = window.location.origin + '/atlas/search/findings/' + (currentCaseF ? '?case=' + currentCaseF : ''); fetch(initFindingsUrl).then(function(r){ return r.text(); }).then(function(html){ results.innerHTML = html; }).catch(function(){}); }
            fetchInitialFindings();
        }catch(err){ console.error('openFindingPicker error', err); }
    }

    function openDisplaysetPicker(textarea, caseId){
        try{
            console.log('Opening displayset picker for', textarea);
            const overlay = document.createElement('div');
            overlay.className = 'markup-case-picker-overlay';
            Object.assign(overlay.style, {position:'fixed',left:0,top:0,right:0,bottom:0,background:'rgba(0,0,0,0.4)',zIndex:1050,display:'flex',alignItems:'center',justifyContent:'center'});
            const dialog = document.createElement('div'); dialog.className='markup-case-picker-dialog card'; Object.assign(dialog.style, {width:'min(900px,95%)',maxHeight:'80vh',overflow:'auto'});
            const header = document.createElement('div'); header.className='card-header d-flex justify-content-between align-items-center';
            header.innerHTML = '<strong>Select display set</strong>';
            // Determine case filter from explicit dataset on the textarea or provided caseId
            var detectedD = (textarea && textarea.dataset && textarea.dataset.currentCase) ? { id: textarea.dataset.currentCase, title: textarea.dataset.currentCaseTitle } : {};
            var currentCaseD = caseId || detectedD.id || null;
            const closeBtn = document.createElement('button'); closeBtn.type='button'; closeBtn.className='btn-close'; closeBtn.setAttribute('aria-label','Close'); closeBtn.addEventListener('click', function(){ document.body.removeChild(overlay); }); header.appendChild(closeBtn);
            const body = document.createElement('div'); body.className='card-body';
            const input = document.createElement('input'); input.type='search'; input.className='form-control mb-2'; input.placeholder='Type to search display sets...';
            const results = document.createElement('div'); results.className='displayset-search-results'; body.appendChild(input); body.appendChild(results);
            dialog.appendChild(header); dialog.appendChild(body); overlay.appendChild(dialog); document.body.appendChild(overlay); input.focus();

            var timer = null;
            input.addEventListener('input', function(){ if(timer) clearTimeout(timer); timer = setTimeout(function(){ var q = encodeURIComponent(input.value || ''); var url = window.location.origin + '/atlas/search/displaysets/?q=' + q + (currentCaseD ? '&case=' + currentCaseD : ''); fetch(url, {credentials:'same-origin'}).then(function(r){ return r.text(); }).then(function(html){ results.innerHTML = html; }).catch(function(e){ console.error('displayset picker fetch error', e); results.innerHTML = '<div class="alert alert-danger">Search failed</div>'; }); }, 300); });

            results.addEventListener('click', function(e){
                var item = e.target.closest('.list-group-item');
                if(!item) return;
                var pk = item.getAttribute('data-ds-pk');
                if(!pk) return;
                var defaultLabel = item.getAttribute('data-label') || (item.querySelector('strong') ? item.querySelector('strong').textContent.trim() : '');
                var custom = window.prompt('Custom text (leave empty to use default)', defaultLabel || '');
                if(custom === null){ if(overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay); return; }
                var labelToUse = custom && custom.length ? custom : (defaultLabel || null);
                var token = '[['+'displayset:'+pk + (labelToUse ? '|' + labelToUse : '') + ']]';
                insertAtCursor(textarea, token);
                if(overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
            });
            overlay.tabIndex = -1; overlay.focus();
            function fetchInitialDisplaysets(){ var initDisplaysetsUrl = window.location.origin + '/atlas/search/displaysets/' + (currentCaseD ? '?case=' + currentCaseD : ''); fetch(initDisplaysetsUrl).then(function(r){ return r.text(); }).then(function(html){ results.innerHTML = html; }).catch(function(){}); }
            fetchInitialDisplaysets();
        }catch(err){ console.error('openDisplaysetPicker error', err); }
    }

    // Simplified detection: rely on explicit dataset attributes set by the widget
    // When a textarea includes `data-current-case` and optionally `data-current-case-title`, that will be used as the default filter.

    // --- Render inserted markup tokens as styled items with popup/modal actions ---
    function injectMarkupStyles(){
        if(document.getElementById('markup-inserter-styles')) return;
        var s = document.createElement('style'); s.id = 'markup-inserter-styles';
        s.textContent = '\n.markup-token{cursor:pointer;display:inline-block;margin:0 .25rem .25rem 0;padding:.25rem .5rem;border-radius:.375rem;font-size:0.85em;}\n.markup-popup{position:fixed;z-index:1060;background:#fff;border:1px solid rgba(0,0,0,.12);box-shadow:0 6px 18px rgba(0,0,0,.12);padding:.5rem;border-radius:.25rem;}\n.markup-modal-backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.45);z-index:1080;display:flex;align-items:flex-start;justify-content:center;padding-top:4vh;}\n.markup-modal{background:#fff;border-radius:.375rem;max-width:95%;max-height:85vh;overflow:auto;}\n';
        document.head.appendChild(s);
    }

    function getDetailUrl(type, pk){
        if(!type || !pk) return null;
        if(type === 'seriesfinding') return window.location.origin + '/atlas/series_finding/' + pk + '/preview/';
        if(type === 'finding') return window.location.origin + '/atlas/finding/' + pk;
        if(type === 'displayset') return window.location.origin + '/atlas/displayset/' + pk + '/preview/';
        if(type === 'case') return window.location.origin + '/atlas/case/' + pk + '/';
        return null;
    }

    // Reusable modal element
    var __markup_modal = null;
    function ensureModal(){
        if(__markup_modal) return __markup_modal;
        var backdrop = document.createElement('div'); backdrop.className = 'markup-modal-backdrop'; backdrop.style.display='none';
        var modal = document.createElement('div'); modal.className = 'markup-modal card'; modal.style.marginTop='1rem'; modal.style.maxHeight='80vh'; modal.style.overflow='auto';
        var header = document.createElement('div'); header.className='card-header d-flex justify-content-between align-items-center';
        var h = document.createElement('strong'); h.textContent = 'Detail';
        var closeBtn = document.createElement('button'); closeBtn.type='button'; closeBtn.className='btn-close'; closeBtn.addEventListener('click', function(){ backdrop.style.display='none'; modal.querySelector('.card-body') && (modal.querySelector('.card-body').innerHTML=''); });
        header.appendChild(h); header.appendChild(closeBtn);
        var body = document.createElement('div'); body.className='card-body'; body.style.maxHeight='70vh'; body.style.overflow='auto';
        modal.appendChild(header); modal.appendChild(body); backdrop.appendChild(modal); document.body.appendChild(backdrop);
        __markup_modal = { backdrop: backdrop, modal: modal, body: body };
        return __markup_modal;
    }

    function showModalForUrl(url, title){
        var m = ensureModal();
        m.backdrop.style.display = 'flex';
        if(title){ var h = m.modal.querySelector('strong'); if(h) h.textContent = title; }
        m.body.innerHTML = '<div class="p-3 text-muted">Loading…</div>';
        fetch(url, {credentials:'same-origin'}).then(function(r){ return r.text(); }).then(function(html){ m.body.innerHTML = html; }).catch(function(e){ m.body.innerHTML = '<div class="p-3 text-danger">Failed to load</div>'; console.error('modal fetch error', e); });
    }

    function showPopupFor(element){
        // remove existing
        var existing = document.getElementById('markup-popup'); if(existing) existing.remove();
        var type = element.getAttribute('data-type'); var pk = element.getAttribute('data-pk'); var label = element.getAttribute('data-label') || element.textContent || '';
        var popup = document.createElement('div'); popup.id = 'markup-popup'; popup.className = 'markup-popup';
        popup.innerHTML = '<div style="font-weight:600;margin-bottom:.25rem;">'+ (label||type+':'+pk) +'</div>';
        var openBtn = document.createElement('button'); openBtn.type='button'; openBtn.className='btn btn-sm btn-outline-primary me-2'; openBtn.textContent='Open';
        openBtn.addEventListener('click', function(){
            var url = getDetailUrl(type, pk);
            try{
                // Prefer page-specific modal loaders if present so we reuse existing Bootstrap modals/viewers
                if(type === 'displayset'){
                    if(typeof window.loadDisplaysetModal === 'function'){
                        window.loadDisplaysetModal(url, pk);
                        popup.remove();
                        return;
                    }
                    var dsBtn = document.querySelector('.view-displayset-modal[data-ds-id="'+pk+'"]');
                    if(dsBtn){ dsBtn.click(); popup.remove(); return; }
                }
                if(type === 'seriesfinding' || type === 'finding'){
                    if(typeof window.loadFindingModal === 'function'){
                        window.loadFindingModal(pk, url);
                        popup.remove();
                        return;
                    }
                    var fBtn = document.querySelector('.view-finding-modal[data-finding-id="'+pk+'"]');
                    if(fBtn){ fBtn.click(); popup.remove(); return; }
                }
            }catch(e){ console.warn('error invoking page modal loader', e); }
            if(url) showModalForUrl(url, label);
            popup.remove();
        });
        var closeBtn = document.createElement('button'); closeBtn.type='button'; closeBtn.className='btn btn-sm btn-outline-secondary'; closeBtn.textContent='Close'; closeBtn.addEventListener('click', function(){ popup.remove(); });
        popup.appendChild(openBtn); popup.appendChild(closeBtn);
        document.body.appendChild(popup);
        // position near element
        try{
            var r = element.getBoundingClientRect();
            popup.style.top = (window.scrollY + r.bottom + 6) + 'px';
            popup.style.left = Math.min(window.innerWidth - 240, window.scrollX + r.left) + 'px';
            popup.style.minWidth = '160px';
        }catch(e){}
        // clicking outside closes it
        setTimeout(function(){
            var onDoc = function(ev){ if(!popup.contains(ev.target) && ev.target !== element) { popup.remove(); document.removeEventListener('click', onDoc); } };
            document.addEventListener('click', onDoc);
        }, 10);
    }

    // Try to open a modal for a token (prefer page-specific modal loaders)
    function openModalForToken(element){
        var type = element.getAttribute('data-type'); var pk = element.getAttribute('data-pk'); var label = element.getAttribute('data-label') || element.textContent || '';
        var url = getDetailUrl(type, pk);
        try{
            if(type === 'displayset'){
                if(typeof window.loadDisplaysetModal === 'function'){
                    window.loadDisplaysetModal(url, pk); return;
                }
                var dsBtn = document.querySelector('.view-displayset-modal[data-ds-id="'+pk+'"]');
                if(dsBtn){ dsBtn.click(); return; }
            }
            if(type === 'seriesfinding' || type === 'finding'){
                if(typeof window.loadFindingModal === 'function'){
                    window.loadFindingModal(pk, url); return;
                }
                var fBtn = document.querySelector('.view-finding-modal[data-finding-id="'+pk+'"]');
                if(fBtn){ fBtn.click(); return; }
            }
        }catch(e){ console.warn('error invoking page modal loader', e); }
        if(url) showModalForUrl(url, label);
    }

    // Replace tokens in text nodes with styled spans
    function renderMarkupTokens(root){
        injectMarkupStyles();
        root = root || document.body;
        // Convert server-rendered anchor tokens into our interactive spans
        try{
            if(root.querySelectorAll){
                root.querySelectorAll('a.markup-link').forEach(function(a){
                    try{
                        var type = a.getAttribute('data-type') || '';
                        var args = [];
                        try{ args = JSON.parse(a.getAttribute('data-args') || '[]'); }catch(e){ args = []; }
                        var pk = (args && args.length) ? (args[0] + '') : (a.getAttribute('data-pk') || '');
                        var label = a.textContent ? a.textContent.trim() : null;
                        var span = document.createElement('span');
                        span.className = 'markup-token';
                        if(type) span.setAttribute('data-type', type);
                        if(pk) span.setAttribute('data-pk', pk);
                        if(label) span.setAttribute('data-label', label);
                        if(type === 'case') span.className += ' badge bg-primary text-white';
                        else if(type === 'displayset') span.className += ' badge bg-success text-white';
                        else span.className += ' badge bg-info text-dark';
                        span.textContent = label ? label : (type + ':' + pk);
                        span.addEventListener('click', function(e){ e.stopPropagation(); openModalForToken(span); });
                        a.parentNode.replaceChild(span, a);
                    }catch(e){}
                });
            }
        }catch(e){}
        var walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false);
        var nodes = [];
        while(walker.nextNode()) nodes.push(walker.currentNode);
        var re = /\[\[(seriesfinding|finding|displayset|case):(\d+)(?:\|([^\]]+))?\]\]/gi;
        nodes.forEach(function(textNode){
            if(!textNode.nodeValue || !re.test(textNode.nodeValue)) return;
            var parentTag = textNode.parentElement && textNode.parentElement.tagName ? textNode.parentElement.tagName.toLowerCase() : '';
            if(['script','style','textarea','code','pre','a','button'].includes(parentTag)) return;
            // rebuild the fragment
            var frag = document.createDocumentFragment();
            var txt = textNode.nodeValue;
            var lastIndex = 0; var m;
            re.lastIndex = 0;
            while((m = re.exec(txt)) !== null){
                var before = txt.slice(lastIndex, m.index);
                if(before) frag.appendChild(document.createTextNode(before));
                var type = m[1].toLowerCase(); var pk = m[2]; var label = m[3] ? m[3] : null;
                var span = document.createElement('span'); span.className = 'markup-token'; span.setAttribute('data-type', type); span.setAttribute('data-pk', pk); if(label) span.setAttribute('data-label', label);
                // style by type
                if(type === 'case') span.className += ' badge bg-primary text-white';
                else if(type === 'displayset') span.className += ' badge bg-success text-white';
                else span.className += ' badge bg-info text-dark';
                span.textContent = label ? label : (type + ':' + pk);
                span.addEventListener('click', function(e){ e.stopPropagation(); openModalForToken(span); });
                frag.appendChild(span);
                lastIndex = re.lastIndex;
            }
            var rest = txt.slice(lastIndex); if(rest) frag.appendChild(document.createTextNode(rest));
            textNode.parentNode.replaceChild(frag, textNode);
        });

        // Ensure any server-rendered span.markup-token elements have click handlers
        try{
            if(root.querySelectorAll){
                root.querySelectorAll('span.markup-token').forEach(function(span){
                    try{
                        if(span._markupBound) return;
                        span._markupBound = true;
                        // ensure data attributes are present
                        var type = span.getAttribute('data-type') || '';
                        var pk = span.getAttribute('data-pk') || '';
                        var label = span.getAttribute('data-label') || span.textContent || '';
                        span.addEventListener('click', function(e){ e.stopPropagation(); openModalForToken(span); });
                    }catch(e){}
                });
            }
        }catch(e){}
    }

    // Run rendering on DOMContentLoaded and after HTMX swaps
    document.addEventListener('DOMContentLoaded', function(){ try{ renderMarkupTokens(document.body); }catch(e){console.error(e);} });
    document.addEventListener('htmx:afterSwap', function(evt){ try{ var target = evt.detail && evt.detail.target ? evt.detail.target : document; renderMarkupTokens(target); }catch(e){/*ignore*/} });

})(window);