// === TAG EXPLORER FIX (With Data Loading) ===
window.showTagExplorer = async function(tag) {
    var modal = document.getElementById('tagExplorerModal');
    var content = document.getElementById('tagExplorerContent');
    if (!modal || !content) return;

    modal.classList.add('active');
    content.innerHTML = '<div class="tag-explorer-loading">Scanning database for #' + escapeHtml(tag) + '...</div>';

    try {
        var tagLower = tag.toLowerCase();
        
        // 1. Get IDs from Tag Tables
        var results = await Promise.all([
            supabase.from('sloppygram_message_tags').select('message_id').or('tag.ilike.' + tag + ',parent_tag.ilike.' + tag).limit(50),
            supabase.from('sloppygram_post_tags').select('post_id').or('tag.ilike.' + tag + ',parent_tag.ilike.' + tag).limit(50),
            supabase.from('sloppygram_manifesto_tags').select('manifesto_id').or('tag.ilike.' + tag + ',parent_tag.ilike.' + tag).limit(50)
        ]);

        var messageIds = (results[0].data || []).map(t => t.message_id);
        var postIds = (results[1].data || []).map(t => t.post_id);
        var manifestoIds = (results[2].data || []).map(t => t.manifesto_id);

        // 2. Fetch Content + RELATED DATA
        var [messagesRes, postsRes, manifestosRes] = await Promise.all([
            messageIds.length > 0 ? supabase.from('sloppygram_messages').select('*').in('id', messageIds).order('created_at', { ascending: false }) : { data: [] },
            postIds.length > 0 ? supabase.from('sloppygram_posts').select('*').in('id', postIds).order('created_at', { ascending: false }) : { data: [] },
            manifestoIds.length > 0 ? supabase.from('sloppygram_manifestos').select('*').in('id', manifestoIds).order('created_at', { ascending: false }) : { data: [] }
        ]);

        var matchingMessages = messagesRes.data || [];
        var matchingPosts = postsRes.data || [];
        var matchingManifestos = manifestosRes.data || [];

        // 3. CRITICAL FIX: Load Votes/Comments for these posts
        if (postIds.length > 0) {
            await loadPostRelatedData(postIds);
        }

        // 4. Render Messages
        var messagesHtml = '';
        if (matchingMessages.length > 0) {
            messagesHtml = '<div class="tag-explorer-messages">' +
                matchingMessages.map(function(msg) {
                    var time = new Date(msg.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
                    var avatar = msg.avatar_url ? `<img src="${sanitizeUrl(msg.avatar_url)}" style="width:24px;height:24px;border-radius:50%;">` : (msg.avatar || '👤');
                    return `<div class="tag-explorer-message">
                        <div class="avatar">${avatar}</div>
                        <div class="tag-msg-bubble">
                            <div class="tag-msg-header"><span class="msg-username">${escapeHtml(msg.username)}</span> <span class="msg-time">${time}</span></div>
                            <div class="msg-content">${parseHackerMarkup(parseChatTags(msg.content || ''))}</div>
                        </div>
                    </div>`;
                }).join('') + '</div>';
        } else {
            messagesHtml = '<div class="tag-explorer-empty">No messages found</div>';
        }

        // 5. Render Posts
        var postsHtml = '';
        if (matchingPosts.length > 0) {
            postsHtml = '<div class="tag-explorer-posts">' + matchingPosts.map(p => renderPostCard(p)).join('') + '</div>';
        } else {
            postsHtml = '<div class="tag-explorer-empty">No posts found</div>';
        }

        // 6. Render Manifestos
        var manifestosHtml = '';
        if (matchingManifestos.length > 0) {
            manifestosHtml = '<div class="tag-explorer-manifestos">' + matchingManifestos.map(m => renderManifestoCard(m)).join('') + '</div>';
        } else {
            manifestosHtml = '<div class="tag-explorer-empty">No manifestos found</div>';
        }

        // 7. Update Modal UI
        content.innerHTML = `
            <div class="tag-explorer-header"><span class="tag-explorer-tag">#${escapeHtml(tag)}</span></div>
            <div class="tag-explorer-tabs">
                <button class="tag-tab active" onclick="switchTagExplorerTab('messages', this)">Messages (${matchingMessages.length})</button>
                <button class="tag-tab" onclick="switchTagExplorerTab('posts', this)">Posts (${matchingPosts.length})</button>
                <button class="tag-tab" onclick="switchTagExplorerTab('manifestos', this)">Manifestos (${matchingManifestos.length})</button>
            </div>
            <div id="tagExplorerMessages" class="tag-explorer-tab-content">${messagesHtml}</div>
            <div id="tagExplorerPosts" class="tag-explorer-tab-content" style="display:none">${postsHtml}</div>
            <div id="tagExplorerManifestos" class="tag-explorer-tab-content" style="display:none">${manifestosHtml}</div>
            <button class="modal-btn tag-filter-btn" onclick="setGlobalTagFilter('${escapeHtml(tag)}')" style="margin-top:15px;">🔍 FILTER MAIN FEED</button>
        `;

    } catch (err) {
        console.error('[TagExplorer] Error:', err);
        content.innerHTML = '<div class="tag-explorer-empty">Error: ' + err.message + '</div>';
    }
};

// Helper for tab switching
window.switchTagExplorerTab = function(tab, btn) {
    document.querySelectorAll('.tag-explorer-tabs .tag-tab').forEach(t => t.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('tagExplorerMessages').style.display = tab === 'messages' ? 'block' : 'none';
    document.getElementById('tagExplorerPosts').style.display = tab === 'posts' ? 'block' : 'none';
    document.getElementById('tagExplorerManifestos').style.display = tab === 'manifestos' ? 'block' : 'none';
};

// Helper for global filter
window.setGlobalTagFilter = function(tag) {
    closeTagExplorer();
    filterByTag(tag);
};