{% extends "base.html" %}

{% block title %}Deadrop{% endblock %}

{% block body %}
<div id="app">
    <!-- Namespace List View -->
    <div id="view-namespaces" class="view">
        <div class="header">
            <h1>📬 Deadrop</h1>
        </div>
        
        <div class="container">
            <h2 style="margin-bottom: 16px;">Your Namespaces</h2>
            
            <div id="namespace-list"></div>
            
            <div id="no-namespaces" class="empty-state hidden">
                <div class="empty-state-icon">📭</div>
                <div class="empty-state-title">No namespaces yet</div>
                <p>Get an invite link to join a namespace.</p>
            </div>
            
            <div class="card" style="margin-top: 24px;">
                <h3 style="margin-bottom: 12px;">Have an invite link?</h3>
                <div style="display: flex; gap: 8px;">
                    <input type="text" id="invite-url-input" class="form-input" 
                           placeholder="Paste invite URL here...">
                    <button id="invite-go-btn" class="btn btn-primary">Go</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Unified Inbox View (1:1 + Rooms) -->
    <div id="view-inbox" class="view hidden">
        <div class="header">
            <a href="/app" class="back-link" id="inbox-back">←</a>
            <div>
                <h1 id="inbox-title">Namespace</h1>
                <div class="subtitle" id="inbox-subtitle">as Identity</div>
            </div>
            <div style="margin-left: auto;">
                <a href="#" id="inbox-settings" class="btn btn-icon">⚙️</a>
            </div>
        </div>
        
        <div class="toolbar">
            <span style="font-weight: 600;" id="inbox-section-title">Messages</span>
            <div class="toolbar-actions">
                <a href="#" id="archived-link" class="btn btn-small btn-secondary">📦 Archived</a>
                <button id="compose-btn" class="btn btn-small btn-primary">✏️ Compose</button>
            </div>
        </div>
        
        <div id="inbox-loading" class="loading">
            <div class="spinner"></div>
        </div>
        
        <div id="thread-list"></div>
        
        <div id="inbox-empty" class="empty-state hidden">
            <div class="empty-state-icon">📭</div>
            <div class="empty-state-title">No messages yet</div>
            <p>Start a conversation or join a room.</p>
        </div>
    </div>
    
    <!-- Conversation View (1:1) -->
    <div id="view-conversation" class="view hidden">
        <div class="header">
            <a href="#" class="back-link" id="conversation-back">←</a>
            <h1 id="conversation-title">Peer</h1>
        </div>
        
        <div id="message-list" class="message-list"></div>
        
        <div class="compose-area">
            <textarea id="message-input" class="compose-input" 
                      placeholder="Type a message..." rows="1"></textarea>
            <button id="send-btn" class="btn btn-primary">Send ➤</button>
        </div>
    </div>
    
    <!-- Room Chat View -->
    <div id="view-room-chat" class="view hidden">
        <div class="header">
            <a href="#" class="back-link" id="room-chat-back">←</a>
            <div>
                <h1 id="room-chat-title">Room</h1>
                <div class="subtitle" id="room-chat-members"></div>
            </div>
            <div style="margin-left: auto;">
                <button id="room-refresh-btn" class="btn btn-icon" title="Refresh messages">🔄</button>
            </div>
        </div>
        
        <div id="room-message-list" class="message-list"></div>
        
        <div class="compose-area">
            <textarea id="room-message-input" class="compose-input" 
                      placeholder="Type a message..." rows="1" enterkeyhint="send"></textarea>
            <button id="room-send-btn" class="btn btn-primary">Send ➤</button>
        </div>
    </div>
    
    <!-- Compose Modal -->
    <div id="compose-modal" class="hidden" style="position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000;">
        <div class="card" style="width: 100%; max-width: 480px; margin: 20px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                <h2>New Message</h2>
                <button id="compose-cancel" class="btn btn-icon">✕</button>
            </div>
            
            <div class="form-group">
                <label class="form-label">To</label>
                <select id="compose-to" class="form-input"></select>
            </div>
            
            <div class="form-group">
                <label class="form-label">Message</label>
                <textarea id="compose-body" class="form-input" rows="4"></textarea>
            </div>
            
            <div style="display: flex; justify-content: flex-end; gap: 8px;">
                <button id="compose-close" class="btn btn-secondary">Cancel</button>
                <button id="compose-send" class="btn btn-primary">Send</button>
            </div>
        </div>
    </div>
    
    <!-- Archived View -->
    <div id="view-archived" class="view hidden">
        <div class="header">
            <a href="#" class="back-link" id="archived-back">←</a>
            <h1>Archived Messages</h1>
        </div>
        
        <div class="container">
            <div id="archived-list"></div>
            
            <div id="archived-empty" class="empty-state hidden">
                <div class="empty-state-icon">📦</div>
                <div class="empty-state-title">No archived messages</div>
                <p>Archived messages appear here.</p>
            </div>
        </div>
    </div>
</div>

<!-- Image lightbox overlay -->
<div id="image-lightbox" class="hidden" onclick="closeLightbox()" style="
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.9);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out;
">
    <button onclick="closeLightbox()" style="
        position: absolute; top: 16px; right: 16px;
        background: none; border: none; color: white;
        font-size: 32px; cursor: pointer; z-index: 2001;
    ">✕</button>
    <img id="lightbox-img" src="" alt="" style="
        max-width: 95vw; max-height: 95vh;
        object-fit: contain; border-radius: 4px;
        cursor: default;
    " onclick="event.stopPropagation()" />
</div>
{% endblock %}

{% block scripts %}
<script>
    // App state
    let currentSlug = {{ slug | tojson if slug else 'null' }};
    let currentPeerId = {{ peer_id | tojson if peer_id is defined and peer_id else 'null' }};
    let currentView = {{ view | tojson if view is defined and view else 'null' }};
    let currentRoomId = {{ room_id | tojson if room_id is defined and room_id else 'null' }};
    let credentials = null;
    let peers = [];
    let messages = [];
    let rooms = [];
    let roomMessages = [];
    let roomMembers = {};
    let roomMessagesLoading = false;  // Guard against concurrent fetches
    // Legacy long-poll removed — subscriptions are the sole update mechanism
    let subscriptionManager = null;  // Unified subscription manager
    
    // DOM elements
    const views = {
        namespaces: document.getElementById('view-namespaces'),
        inbox: document.getElementById('view-inbox'),
        conversation: document.getElementById('view-conversation'),
        roomChat: document.getElementById('view-room-chat'),
        archived: document.getElementById('view-archived'),
    };
    
    // Utility functions
    function showView(name) {
        // (Legacy room polling removed — subscriptions handle updates)
        
        Object.values(views).forEach(v => v.classList.add('hidden'));
        views[name].classList.remove('hidden');
    }
    
    function formatTime(isoString) {
        const date = new Date(isoString);
        const now = new Date();
        const diffMs = now - date;
        const diffMins = Math.floor(diffMs / 60000);
        const diffHours = Math.floor(diffMs / 3600000);
        const diffDays = Math.floor(diffMs / 86400000);
        
        if (diffMins < 1) return 'just now';
        if (diffMins < 60) return `${diffMins}m ago`;
        if (diffHours < 24) return `${diffHours}h ago`;
        if (diffDays < 7) return `${diffDays}d ago`;
        return date.toLocaleDateString();
    }
    
    function formatExpiry(expiresAt, ttlHours) {
        if (ttlHours === 0) return null;
        if (!expiresAt) return null;
        
        const remaining = new Date(expiresAt) - new Date();
        if (remaining <= 0) return { text: 'expired', style: 'urgent' };
        
        const hours = Math.floor(remaining / 3600000);
        const mins = Math.floor((remaining % 3600000) / 60000);
        
        if (hours > 3) return { text: `⏱ ${hours}h`, style: '' };
        if (hours > 0) return { text: `⏱ ${hours}h`, style: 'warning' };
        return { text: `⏱ ${mins}m`, style: 'urgent' };
    }
    
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    // ==================== MARKDOWN RENDERING ====================
    
    // Configure marked for GitHub Flavored Markdown
    const markedInstance = new marked.Marked({
        breaks: true,      // Convert \n to <br>
        gfm: true,         // GitHub Flavored Markdown (tables, strikethrough, etc.)
        renderer: (() => {
            const renderer = new marked.Renderer();
            
            // Images: render as clickable thumbnails for lightbox preview
            renderer.image = function({ href, title, text }) {
                const alt = escapeHtml(text || '');
                const titleAttr = title ? ` title="${escapeHtml(title)}"` : '';
                return `<img src="${escapeHtml(href)}" alt="${alt}"${titleAttr} class="md-image" loading="lazy" onclick="openLightbox(this)" />`;
            };
            
            // Links: open in new tab
            renderer.link = function({ href, title, text }) {
                const titleAttr = title ? ` title="${escapeHtml(title)}"` : '';
                return `<a href="${escapeHtml(href)}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`;
            };
            
            return renderer;
        })(),
    });
    
    /**
     * Render message body with markdown support.
     * Only renders markdown for text/markdown content_type;
     * text/plain is escaped and shown as-is.
     */
    function renderMessageBody(body, contentType) {
        if (!body) return '';
        
        if (contentType === 'text/markdown') {
            try {
                const rawHtml = markedInstance.parse(body);
                // Sanitize to prevent XSS but allow safe tags
                return DOMPurify.sanitize(rawHtml, {
                    ALLOWED_TAGS: [
                        'p', 'br', 'strong', 'em', 'b', 'i', 'u', 's', 'del',
                        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
                        'ul', 'ol', 'li',
                        'pre', 'code', 'blockquote',
                        'a', 'img',
                        'table', 'thead', 'tbody', 'tr', 'th', 'td',
                        'hr', 'span', 'div', 'sup', 'sub',
                    ],
                    ALLOWED_ATTR: [
                        'href', 'src', 'alt', 'title', 'class', 'target', 'rel',
                        'loading', 'onclick',
                    ],
                });
            } catch (e) {
                console.warn('Markdown render failed, falling back to plain text:', e);
                return escapeHtml(body);
            }
        }
        
        // text/plain or no content_type: escape and convert newlines
        return escapeHtml(body).replace(/\n/g, '<br>');
    }
    
    /**
     * Apply syntax highlighting to all code blocks in a container.
     * Call after inserting rendered markdown HTML into the DOM.
     */
    function highlightCodeBlocks(container) {
        if (typeof hljs === 'undefined') return;
        container.querySelectorAll('pre code').forEach(block => {
            hljs.highlightElement(block);
        });
    }
    
    /**
     * Open image in a fullscreen lightbox overlay.
     */
    function openLightbox(imgEl) {
        const overlay = document.getElementById('image-lightbox');
        const lightboxImg = document.getElementById('lightbox-img');
        lightboxImg.src = imgEl.src;
        lightboxImg.alt = imgEl.alt;
        overlay.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }
    
    function closeLightbox() {
        const overlay = document.getElementById('image-lightbox');
        overlay.classList.add('hidden');
        document.body.style.overflow = '';
    }
    
    function getPeerName(id) {
        const peer = peers.find(p => p.id === id);
        return peer?.metadata?.display_name || id.substring(0, 8) + '...';
    }
    
    function getMemberName(id) {
        if (id === credentials?.id) return 'You';
        const member = roomMembers[id];
        return member?.metadata?.display_name || member?.display_name || id.substring(0, 8) + '...';
    }
    
    // ==================== NAMESPACE LIST ====================
    
    function renderNamespaceList() {
        const list = document.getElementById('namespace-list');
        const empty = document.getElementById('no-namespaces');
        const namespaces = CredentialStore.listNamespaces();
        
        if (namespaces.length === 0) {
            list.innerHTML = '';
            empty.classList.remove('hidden');
            return;
        }
        
        empty.classList.add('hidden');
        list.innerHTML = namespaces.map(ns => `
            <div class="card card-clickable" onclick="openNamespace('${ns.slug || ns.ns}')">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <div class="card-title">${ns.displayName || ns.slug || ns.ns.substring(0, 8)}</div>
                        <div class="card-subtitle">You are: ${ns.activeIdentity?.displayName || 'Unknown'}</div>
                    </div>
                    <span class="mode-badge ${ns.ttlHours === 0 ? 'persistent' : 'ephemeral'}">
                        ${ns.ttlHours === 0 ? '📌 Persistent' : `⏱ ${ns.ttlHours}h TTL`}
                    </span>
                </div>
            </div>
        `).join('');
    }
    
    // ==================== OPEN NAMESPACE ====================
    
    async function openNamespace(slug) {
        currentSlug = slug;
        credentials = CredentialStore.getCredentials(slug);
        if (!credentials) {
            alert('Credentials not found');
            return;
        }
        
        history.pushState({}, '', `/app/${slug}`);
        
        const nsDisplay = CredentialStore.getNamespace(slug)?.displayName || slug;
        document.getElementById('inbox-title').textContent = nsDisplay;
        document.getElementById('inbox-subtitle').textContent = `as ${credentials.displayName || credentials.id.substring(0, 8)}`;
        
        showView('inbox');
        await loadUnifiedInbox();
        // Start unified subscription after we know which rooms we're in
        startSubscription();
    }
    
    // ==================== UNIFIED INBOX ====================
    
    async function loadUnifiedInbox() {
        const loading = document.getElementById('inbox-loading');
        const list = document.getElementById('thread-list');
        const empty = document.getElementById('inbox-empty');
        
        loading.classList.remove('hidden');
        list.innerHTML = '';
        
        try {
            const [peersResult, inboxResult, roomsResult] = await Promise.all([
                DeadropAPI.listPeers(credentials),
                DeadropAPI.getInbox(credentials),
                DeadropAPI.listRooms(credentials),
            ]);
            
            peers = peersResult;
            messages = inboxResult.messages;
            rooms = roomsResult || [];
            
            // Update subscription cursor for inbox
            if (subscriptionManager && messages.length > 0) {
                const lastMid = messages[messages.length - 1].mid;
                subscriptionManager.updateCursor(`inbox:${credentials.id}`, lastMid);
            }
            
            loading.classList.add('hidden');
            
            // Build 1:1 conversation threads
            const conversations = {};
            messages.forEach(msg => {
                const peerId = msg.from === credentials.id ? msg.to : msg.from;
                if (!conversations[peerId]) {
                    conversations[peerId] = { peerId, messages: [], hasUnread: false };
                }
                conversations[peerId].messages.push(msg);
                if (!msg.read_at && msg.from !== credentials.id) {
                    conversations[peerId].hasUnread = true;
                }
            });
            
            // Build unified thread list
            const threads = [];
            
            // Add 1:1 conversations
            Object.values(conversations).forEach(conv => {
                const latest = conv.messages[conv.messages.length - 1];
                const isSent = latest.from === credentials.id;
                const preview = isSent ? `You: ${latest.body}` : latest.body;
                threads.push({
                    type: 'conversation',
                    id: conv.peerId,
                    name: getPeerName(conv.peerId),
                    preview: preview,
                    time: latest.created_at,
                    hasUnread: conv.hasUnread,
                    expiry: formatExpiry(latest.expires_at, credentials.ttlHours),
                });
            });
            
            // Add rooms
            rooms.forEach(room => {
                const lastTime = room.last_activity_at || room.created_at;
                let preview = `${room.member_count || '?'} members`;
                if (room.last_message_body) {
                    const senderName = room.last_message_from === credentials.id
                        ? 'You' : (room.last_message_from_name || room.last_message_from?.substring(0, 8) || '?');
                    preview = `${senderName}: ${room.last_message_body}`;
                }
                threads.push({
                    type: 'room',
                    id: room.room_id,
                    name: room.display_name || 'Unnamed Room',
                    preview: preview,
                    time: lastTime,
                    memberCount: room.member_count,
                });
            });
            
            // Sort by most recent activity
            threads.sort((a, b) => new Date(b.time) - new Date(a.time));
            
            if (threads.length === 0) {
                empty.classList.remove('hidden');
                return;
            }
            
            empty.classList.add('hidden');
            list.innerHTML = threads.map(thread => {
                if (thread.type === 'conversation') {
                    return `
                        <div class="thread-item ${thread.hasUnread ? 'unread' : ''}" 
                             onclick="openConversation('${thread.id}')">
                            ${thread.hasUnread ? '<div class="unread-dot"></div>' : ''}
                            <div class="thread-avatar thread-avatar-peer">${thread.name[0].toUpperCase()}</div>
                            <div class="thread-content">
                                <div class="thread-header">
                                    <span class="thread-name">${thread.name}</span>
                                    <span class="thread-time">${formatTime(thread.time)}</span>
                                </div>
                                <div class="thread-preview">${escapeHtml(thread.preview).substring(0, 60)}${thread.preview.length > 60 ? '...' : ''}</div>
                                ${thread.expiry ? `<span class="ttl-indicator ttl-${thread.expiry.style}">${thread.expiry.text}</span>` : ''}
                            </div>
                        </div>
                    `;
                } else {
                    return `
                        <div class="thread-item" onclick="openRoom('${thread.id}')">
                            <div class="thread-avatar thread-avatar-room">💬</div>
                            <div class="thread-content">
                                <div class="thread-header">
                                    <span class="thread-name">${escapeHtml(thread.name)}</span>
                                    <span class="thread-time">${formatTime(thread.time)}</span>
                                </div>
                                <div class="thread-preview">${escapeHtml(thread.preview).substring(0, 60)}${thread.preview.length > 60 ? '...' : ''}</div>
                            </div>
                        </div>
                    `;
                }
            }).join('');
            
        } catch (e) {
            loading.classList.add('hidden');
            list.innerHTML = `<div class="error-message">${e.message}</div>`;
        }
    }
    
    function openConversation(peerId) {
        currentPeerId = peerId;
        history.pushState({}, '', `/app/${currentSlug}/${peerId}`);
        
        document.getElementById('conversation-title').textContent = getPeerName(peerId);
        showView('conversation');
        renderConversation();
        // Focus the input so the user can start typing immediately
        document.getElementById('message-input').focus();
    }
    
    function renderConversation() {
        const list = document.getElementById('message-list');
        const peerMessages = messages.filter(m => 
            m.from === currentPeerId || m.to === currentPeerId
        );
        
        list.innerHTML = peerMessages.map(msg => {
            const isSent = msg.from === credentials.id;
            const expiry = formatExpiry(msg.expires_at, credentials.ttlHours);
            
            return `
                <div class="message ${isSent ? 'message-sent' : 'message-received'}">
                    <div class="message-body markdown-body">${renderMessageBody(msg.body, msg.content_type)}</div>
                    <div class="message-meta">
                        <span>${formatTime(msg.created_at)}</span>
                        ${expiry ? `<span class="ttl-indicator ttl-${expiry.style}">${expiry.text}</span>` : ''}
                    </div>
                    <div class="message-actions">
                        <button class="btn btn-small btn-icon" onclick="archiveMessage('${msg.mid}')" title="Archive">📦</button>
                        <button class="btn btn-small btn-icon" onclick="deleteMessage('${msg.mid}')" title="Delete">🗑</button>
                    </div>
                </div>
            `;
        }).join('');
        
        highlightCodeBlocks(list);
        list.scrollTop = list.scrollHeight;
    }
    
    async function sendMessage() {
        const input = document.getElementById('message-input');
        const body = input.value.trim();
        if (!body) return;
        
        try {
            await DeadropAPI.sendMessage(credentials, currentPeerId, body);
            input.value = '';
            
            const result = await DeadropAPI.getInbox(credentials);
            messages = result.messages;
            renderConversation();
        } catch (e) {
            alert('Failed to send: ' + e.message);
        }
    }
    
    async function archiveMessage(mid) {
        if (!confirm('Archive this message?')) return;
        try {
            await DeadropAPI.archiveMessage(credentials, mid);
            messages = messages.filter(m => m.mid !== mid);
            renderConversation();
        } catch (e) {
            alert('Failed to archive: ' + e.message);
        }
    }
    
    async function deleteMessage(mid) {
        if (!confirm('Delete this message permanently?')) return;
        try {
            await DeadropAPI.deleteMessage(credentials, mid);
            messages = messages.filter(m => m.mid !== mid);
            renderConversation();
        } catch (e) {
            alert('Failed to delete: ' + e.message);
        }
    }
    
    // ==================== ROOMS ====================
    
    async function openRoom(roomId) {
        currentRoomId = roomId;
        history.pushState({}, '', `/app/${currentSlug}/room/${roomId}`);
        
        // Load room details and members
        try {
            const [roomDetails, members] = await Promise.all([
                DeadropAPI.getRoom(credentials, roomId),
                DeadropAPI.listRoomMembers(credentials, roomId),
            ]);
            
            document.getElementById('room-chat-title').textContent = roomDetails.display_name || 'Room';
            
            // Build member map for name lookups
            roomMembers = {};
            (members || []).forEach(m => {
                roomMembers[m.identity_id] = m;
            });
            
            document.getElementById('room-chat-members').textContent = 
                `${Object.keys(roomMembers).length} members`;
            
            showView('roomChat');
            await loadRoomMessages();
            // Focus the input so the user can start typing immediately
            document.getElementById('room-message-input').focus();
            
        } catch (e) {
            alert('Failed to open room: ' + e.message);
        }
    }
    
    async function loadRoomMessages() {
        const list = document.getElementById('room-message-list');
        roomMessagesLoading = true;
        
        // Try loading from cache first for instant display
        const cacheKey = `room_messages_${currentRoomId}`;
        const cached = localStorage.getItem(cacheKey);
        if (cached) {
            try {
                roomMessages = JSON.parse(cached);
                renderRoomMessages();
            } catch (e) {}
        }
        
        // Show spinner if no cache
        if (!cached) {
            list.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
        }
        
        try {
            const startTime = performance.now();
            
            // Paginate to fetch ALL messages (server default limit is 100)
            const PAGE_SIZE = 500;
            let allMessages = [];
            let afterMid = null;
            
            while (true) {
                const result = await DeadropAPI.getRoomMessages(
                    credentials, currentRoomId, { afterMid, limit: PAGE_SIZE });
                const page = result?.messages || [];
                allMessages = [...allMessages, ...page];
                
                if (page.length < PAGE_SIZE) break;  // Last page
                afterMid = page[page.length - 1].mid;
            }
            
            const elapsed = Math.round(performance.now() - startTime);
            console.log(`Room messages loaded in ${elapsed}ms (${allMessages.length} msgs)`);
            
            roomMessages = allMessages;
            
            // Save to cache
            localStorage.setItem(cacheKey, JSON.stringify(roomMessages));
            
            // Update subscription cursor
            if (subscriptionManager && roomMessages.length > 0) {
                const lastMid = roomMessages[roomMessages.length - 1].mid;
                subscriptionManager.updateCursor(`room:${currentRoomId}`, lastMid);
            }
            
            renderRoomMessages();
        } catch (e) {
            if (!cached) {
                list.innerHTML = `<div class="error-message">${e.message}</div>`;
            }
        } finally {
            roomMessagesLoading = false;
        }
    }
    
    const REACTION_EMOJIS = ['👍', '❤️', '😂', '🎉', '👀', '🙏'];
    
    function buildReactionMap(messages) {
        // Group reactions by reference_mid → { emoji → Set of sender IDs }
        const map = {};
        for (const msg of messages) {
            if (msg.content_type !== 'reaction' || !msg.reference_mid) continue;
            if (!map[msg.reference_mid]) map[msg.reference_mid] = {};
            const byEmoji = map[msg.reference_mid];
            if (!byEmoji[msg.body]) byEmoji[msg.body] = new Set();
            byEmoji[msg.body].add(msg.from_id);
        }
        return map;
    }
    
    function renderReactionBadges(mid, reactionMap) {
        const reactions = reactionMap[mid];
        const badges = reactions ? Object.entries(reactions).map(([emoji, senders]) => {
            const isMine = senders.has(credentials.id);
            const names = [...senders].map(id => getMemberName(id)).join(', ');
            return `<button class="reaction-badge ${isMine ? 'mine' : ''}"
                title="${names}"
                onclick="toggleReaction('${mid}', '${emoji}')"
                >${emoji}<span class="reaction-count">${senders.size > 1 ? ' ' + senders.size : ''}</span></button>`;
        }).join('') : '';
        
        return `<div class="reaction-badges">${badges}<button class="reaction-badge add-reaction" onclick="showReactionPicker(event, '${mid}')" title="Add reaction">+</button></div>`;
    }
    
    function renderRoomMessages() {
        const list = document.getElementById('room-message-list');
        
        // Build reaction map from all messages
        const reactionMap = buildReactionMap(roomMessages);
        
        // Filter out reaction messages from the main list
        const displayMessages = roomMessages.filter(m => m.content_type !== 'reaction');
        
        // Reverse for column-reverse display (newest at bottom visually)
        const reversed = [...displayMessages].reverse();
        
        list.innerHTML = reversed.map(msg => {
            const isMe = msg.from_id === credentials.id;
            const isPending = msg.pending;
            
            return `
                <div class="room-message ${isMe ? 'from-me' : ''} ${isPending ? 'pending' : ''}" data-mid="${msg.mid}">
                    <div class="sender-name">${getMemberName(msg.from_id)}</div>
                    <div class="message-body markdown-body">${renderMessageBody(msg.body, msg.content_type)}</div>
                    ${renderReactionBadges(msg.mid, reactionMap)}
                    <div class="message-time">${isPending ? 'Sending...' : formatTime(msg.created_at)}</div>
                </div>
            `;
        }).join('');
        
        // No need to scroll - column-reverse keeps us at bottom
        
        // Apply syntax highlighting to code blocks
        highlightCodeBlocks(list);
        
        // Update read cursor (skip pending messages)
        const realMessages = roomMessages.filter(m => !m.pending);
        if (realMessages.length > 0) {
            const lastMid = realMessages[realMessages.length - 1].mid;
            DeadropAPI.updateRoomReadCursor(credentials, currentRoomId, lastMid).catch(() => {});
        }
    }
    
    async function sendRoomMessage() {
        const input = document.getElementById('room-message-input');
        const sendBtn = document.getElementById('room-send-btn');
        const body = input.value.trim();
        if (!body) return;
        
        // Immediately clear input and disable button
        input.value = '';
        sendBtn.disabled = true;
        sendBtn.textContent = 'Sending...';
        
        // Add optimistic message to UI
        const optimisticMsg = {
            mid: 'pending-' + Date.now(),
            from_id: credentials.id,
            body: body,
            created_at: new Date().toISOString(),
            pending: true
        };
        roomMessages.push(optimisticMsg);
        renderRoomMessages();
        
        const startTime = performance.now();
        
        try {
            const result = await DeadropAPI.sendRoomMessage(credentials, currentRoomId, body);
            const elapsed = Math.round(performance.now() - startTime);
            console.log(`Room message sent in ${elapsed}ms`);
            
            // Replace optimistic message with real one
            const idx = roomMessages.findIndex(m => m.mid === optimisticMsg.mid);
            if (idx >= 0) {
                roomMessages[idx] = result;
            }
            renderRoomMessages();
        } catch (e) {
            // Remove optimistic message on error
            roomMessages = roomMessages.filter(m => m.mid !== optimisticMsg.mid);
            renderRoomMessages();
            alert('Failed to send: ' + e.message);
            // Restore the message to input
            input.value = body;
        } finally {
            sendBtn.disabled = false;
            sendBtn.textContent = 'Send ➤';
        }
    }
    
    // ==================== REACTIONS ====================
    
    async function toggleReaction(targetMid, emoji) {
        // Check if we already reacted with this emoji
        const existing = roomMessages.find(m =>
            m.content_type === 'reaction' &&
            m.reference_mid === targetMid &&
            m.body === emoji &&
            m.from_id === credentials.id
        );
        if (existing) return;  // Already reacted, reactions are permanent
        
        try {
            const result = await DeadropAPI.sendRoomMessage(
                credentials, currentRoomId, emoji, 'reaction', targetMid);
            roomMessages.push(result);
            renderRoomMessages();
        } catch (e) {
            console.error('Failed to send reaction:', e);
        }
    }
    
    function showReactionPicker(event, targetMid) {
        event.stopPropagation();
        
        // Remove any existing picker
        const old = document.getElementById('reaction-picker');
        if (old) old.remove();
        
        const picker = document.createElement('div');
        picker.id = 'reaction-picker';
        picker.className = 'reaction-picker';
        picker.innerHTML = REACTION_EMOJIS.map(emoji =>
            `<button class="reaction-picker-btn" onclick="pickReaction(event, '${targetMid}', '${emoji}')">${emoji}</button>`
        ).join('');
        
        // Position near the click, clamped to viewport
        document.body.appendChild(picker);
        const rect = event.target.getBoundingClientRect();
        const pickerRect = picker.getBoundingClientRect();
        const left = Math.max(8, Math.min(rect.left, window.innerWidth - pickerRect.width - 8));
        let top = rect.top - pickerRect.height - 4;
        if (top < 8) top = rect.bottom + 4;  // flip below if no room above
        picker.style.position = 'fixed';
        picker.style.left = left + 'px';
        picker.style.top = top + 'px';
        picker.style.zIndex = '1500';
        
        // Close on click outside
        const close = (e) => {
            if (!picker.contains(e.target)) {
                picker.remove();
                document.removeEventListener('click', close);
            }
        };
        setTimeout(() => document.addEventListener('click', close), 0);
    }
    
    function pickReaction(event, targetMid, emoji) {
        event.stopPropagation();
        const picker = document.getElementById('reaction-picker');
        if (picker) picker.remove();
        toggleReaction(targetMid, emoji);
    }
    
    // startRoomPolling removed — subscriptions handle real-time updates
    
    // pollRoomMessages removed — subscriptions handle real-time updates
    
    // ==================== UNIFIED SUBSCRIPTION ====================
    
    /**
     * Start the unified subscription manager for the current namespace.
     * Subscribes to inbox + all rooms. Dispatches events to refresh
     * the appropriate views.
     */
    async function startSubscription() {
        stopSubscription();
        
        if (!credentials) return;
        
        subscriptionManager = new SubscriptionManager(credentials);
        
        subscriptionManager.onEvent = async (topic, latestMid) => {
            console.log(`[subscription] event on ${topic}: ${latestMid}`);
            
            if (topic === `inbox:${credentials.id}`) {
                // Inbox has new messages — refresh if viewing unified inbox
                const inboxView = document.getElementById('view-inbox');
                if (!inboxView.classList.contains('hidden')) {
                    loadUnifiedInbox();
                }
            } else if (topic.startsWith('room:')) {
                const roomId = topic.substring(5);
                // If we're viewing this room, fetch new messages
                if (currentRoomId === roomId) {
                    await fetchNewRoomMessages(roomId);
                }
                // Could show badge on rooms tab
            }
        };
        
        subscriptionManager.onStatusChange = (status) => {
            console.log(`[subscription] status: ${status}`);
        };
        
        // Build topics: inbox + all rooms
        const roomIds = rooms.map(r => r.room_id);
        const topics = subscriptionManager.buildTopics(roomIds, true);
        
        // Start in background
        subscriptionManager.start(topics).catch(e => {
            console.error('Subscription manager error:', e);
        });
    }
    
    function stopSubscription() {
        if (subscriptionManager) {
            subscriptionManager.stop();
            subscriptionManager = null;
        }
    }
    
    /**
     * Fetch only new room messages (incremental update).
     */
    async function fetchNewRoomMessages(roomId) {
        // Skip if a full load is in progress — it will get all messages
        if (roomMessagesLoading) {
            console.log('[fetchNew] skipped — full load in progress');
            return;
        }
        try {
            // Deduplicate: use a Set of existing mids
            const existingMids = new Set(roomMessages.map(m => m.mid));
            
            const afterMid = roomMessages.length > 0 
                ? roomMessages[roomMessages.length - 1].mid 
                : null;
            
            const result = await DeadropAPI.getRoomMessages(credentials, roomId, { afterMid });
            
            if (result?.messages?.length > 0) {
                // Filter out any messages we already have (including pending/optimistic)
                const newMsgs = result.messages.filter(m => !existingMids.has(m.mid));
                if (newMsgs.length > 0) {
                    roomMessages = [...roomMessages, ...newMsgs];
                    const cacheKey = `room_messages_${roomId}`;
                    localStorage.setItem(cacheKey, JSON.stringify(roomMessages));
                    renderRoomMessages();
                }
                
                // Update subscription cursor (always, even if deduplicated)
                if (subscriptionManager) {
                    const lastMid = result.messages[result.messages.length - 1].mid;
                    subscriptionManager.updateCursor(`room:${roomId}`, lastMid);
                }
            }
        } catch (e) {
            console.error('Failed to fetch new room messages:', e);
        }
    }
    
    // ==================== COMPOSE MODAL ====================
    
    function showCompose() {
        const modal = document.getElementById('compose-modal');
        const select = document.getElementById('compose-to');
        
        select.innerHTML = peers
            .filter(p => p.id !== credentials.id)
            .map(p => `<option value="${p.id}">${p.metadata?.display_name || p.id}</option>`)
            .join('');
        
        select.innerHTML += `<option value="${credentials.id}">Notes to Self</option>`;
        
        modal.classList.remove('hidden');
    }
    
    function hideCompose() {
        document.getElementById('compose-modal').classList.add('hidden');
        document.getElementById('compose-body').value = '';
    }
    
    async function sendCompose() {
        const to = document.getElementById('compose-to').value;
        const body = document.getElementById('compose-body').value.trim();
        
        if (!body) return;
        
        try {
            await DeadropAPI.sendMessage(credentials, to, body);
            hideCompose();
            loadUnifiedInbox();
        } catch (e) {
            alert('Failed to send: ' + e.message);
        }
    }
    
    // ==================== EVENT LISTENERS ====================
    
    document.getElementById('invite-go-btn').addEventListener('click', () => {
        const url = document.getElementById('invite-url-input').value.trim();
        if (url) window.location.href = url;
    });
    
    document.getElementById('inbox-back').addEventListener('click', (e) => {
        e.preventDefault();
        history.pushState({}, '', '/app');
        currentSlug = null;
        stopSubscription();
        showView('namespaces');
        renderNamespaceList();
    });
    
    document.getElementById('conversation-back').addEventListener('click', (e) => {
        e.preventDefault();
        history.pushState({}, '', `/app/${currentSlug}`);
        currentPeerId = null;
        showView('inbox');
    });
    
    document.getElementById('room-chat-back').addEventListener('click', (e) => {
        e.preventDefault();
        currentRoomId = null;
        roomMessages = [];
        roomMembers = {};
        history.pushState({}, '', `/app/${currentSlug}`);
        showView('inbox');
    });
    
    document.getElementById('compose-btn').addEventListener('click', showCompose);
    document.getElementById('compose-cancel').addEventListener('click', hideCompose);
    document.getElementById('compose-close').addEventListener('click', hideCompose);
    document.getElementById('compose-send').addEventListener('click', sendCompose);
    
    document.getElementById('send-btn').addEventListener('click', sendMessage);
    document.getElementById('message-input').addEventListener('keypress', (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });
    
    document.getElementById('room-refresh-btn').addEventListener('click', async () => {
        const btn = document.getElementById('room-refresh-btn');
        btn.disabled = true;
        btn.style.animation = 'spin 0.6s linear infinite';
        try {
            await loadRoomMessages();
        } finally {
            btn.disabled = false;
            btn.style.animation = '';
        }
    });
    
    document.getElementById('room-send-btn').addEventListener('click', sendRoomMessage);
    document.getElementById('room-message-input').addEventListener('keypress', (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendRoomMessage();
        }
    });
    
    document.getElementById('archived-link').addEventListener('click', async (e) => {
        e.preventDefault();
        history.pushState({}, '', `/app/${currentSlug}/archived`);
        showView('archived');
        
        const list = document.getElementById('archived-list');
        const empty = document.getElementById('archived-empty');
        
        try {
            const result = await DeadropAPI.getArchivedMessages(credentials);
            
            if (result.messages.length === 0) {
                list.innerHTML = '';
                empty.classList.remove('hidden');
                return;
            }
            
            empty.classList.add('hidden');
            list.innerHTML = result.messages.map(msg => `
                <div class="card">
                    <div style="display: flex; justify-content: space-between; align-items: start;">
                        <div>
                            <div class="card-title">From: ${getPeerName(msg.from)}</div>
                            <div style="margin: 8px 0;">${msg.body}</div>
                            <div class="text-muted text-small">Archived ${formatTime(msg.archived_at)}</div>
                        </div>
                        <div style="display: flex; gap: 8px;">
                            <button class="btn btn-small btn-secondary" onclick="unarchiveMessage('${msg.mid}')">Restore</button>
                            <button class="btn btn-small btn-danger" onclick="deleteMessage('${msg.mid}')">Delete</button>
                        </div>
                    </div>
                </div>
            `).join('');
        } catch (e) {
            list.innerHTML = `<div class="error-message">${e.message}</div>`;
        }
    });
    
    document.getElementById('archived-back').addEventListener('click', (e) => {
        e.preventDefault();
        history.pushState({}, '', `/app/${currentSlug}`);
        showView('inbox');
    });
    
    async function unarchiveMessage(mid) {
        try {
            await DeadropAPI.unarchiveMessage(credentials, mid);
            document.getElementById('archived-link').click();
        } catch (e) {
            alert('Failed to restore: ' + e.message);
        }
    }
    
    // ==================== TAB VISIBILITY ====================
    
    /**
     * Pause subscriptions and message fetching when the tab is not visible
     * (backgrounded, another workspace, screen locked, etc.).
     *
     * This prevents messages from being marked as read while the user isn't
     * actually looking at them.  When the tab regains focus the subscription
     * is restarted and the current view is refreshed.
     */
    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            // Tab hidden — stop subscription so we don't fetch (and mark-as-read)
            stopSubscription();
        } else {
            // Tab visible again — restart subscription and refresh the active view
            if (currentSlug && credentials) {
                startSubscription();

                // Refresh whichever view is currently shown
                const inboxView = document.getElementById('view-inbox');
                const roomView = document.getElementById('view-room-chat');
                const convView = document.getElementById('view-conversation');

                if (roomView && !roomView.classList.contains('hidden') && currentRoomId) {
                    loadRoomMessages();
                } else if (convView && !convView.classList.contains('hidden') && currentPeerId) {
                    loadUnifiedInbox().then(() => renderConversation());
                } else if (inboxView && !inboxView.classList.contains('hidden')) {
                    loadUnifiedInbox();
                }
            }
        }
    });

    // ==================== BROWSER NAVIGATION ====================
    
    /**
     * Handle browser back/forward navigation.
     * Parses the current URL and shows the appropriate view.
     */
    window.addEventListener('popstate', () => {
        const path = window.location.pathname;
        
        if (path === '/app' || path === '/app/') {
            // Namespace list
            currentSlug = null;
            currentRoomId = null;
            currentPeerId = null;
            roomMessages = [];
            roomMembers = {};
            stopSubscription();
            showView('namespaces');
            renderNamespaceList();
        } else if (path.match(/^\/app\/([^/]+)\/room\/([^/]+)$/)) {
            // Room view
            const [, slug, roomId] = path.match(/^\/app\/([^/]+)\/room\/([^/]+)$/);
            if (slug !== currentSlug) {
                openNamespace(slug).then(() => openRoom(roomId));
            } else {
                openRoom(roomId);
            }
        } else if (path.match(/^\/app\/([^/]+)\/archived$/)) {
            // Archived view
            const [, slug] = path.match(/^\/app\/([^/]+)\/archived$/);
            if (slug !== currentSlug) {
                openNamespace(slug);
            }
            document.getElementById('archived-link').click();
        } else if (path.match(/^\/app\/([^/]+)\/([^/]+)$/)) {
            // Peer conversation
            const [, slug, peerId] = path.match(/^\/app\/([^/]+)\/([^/]+)$/);
            if (slug !== currentSlug) {
                openNamespace(slug).then(() => openConversation(peerId));
            } else {
                openConversation(peerId);
            }
        } else if (path.match(/^\/app\/([^/]+)$/)) {
            // Namespace unified inbox view
            const [, slug] = path.match(/^\/app\/([^/]+)$/);
            currentRoomId = null;
            currentPeerId = null;
            roomMessages = [];
            roomMembers = {};
            if (slug !== currentSlug) {
                openNamespace(slug);
            } else {
                showView('inbox');
            }
        }
    });
    
    // ==================== INITIALIZE ====================
    
    function init() {
        if (currentSlug) {
            credentials = CredentialStore.getCredentials(currentSlug);
            if (credentials) {
                if (currentView === 'archived') {
                    document.getElementById('inbox-title').textContent = 
                        CredentialStore.getNamespace(currentSlug)?.displayName || currentSlug;
                    showView('archived');
                    document.getElementById('archived-link').click();
                } else if (currentRoomId) {
                    // Deep link to room
                    openNamespace(currentSlug).then(() => openRoom(currentRoomId));
                } else if (currentPeerId) {
                    openNamespace(currentSlug).then(() => openConversation(currentPeerId));
                } else {
                    openNamespace(currentSlug);
                }
            } else {
                showView('namespaces');
                renderNamespaceList();
            }
        } else {
            showView('namespaces');
            renderNamespaceList();
        }
    }
    
    init();
</script>
{% endblock %}