{#
  _room_chat.html — drop into any room page alongside _room_presence.html.
  Requires: room_project_id and room_name JS vars defined before this include.
#}

<!-- Chat toggle button (sits in bottom-right corner, stacks with video) -->
<button id="chatToggleBtn" onclick="toggleChat()" style="
    position:fixed; bottom:20px; right:20px; z-index:200;
    background:rgba(127,127,127,0.10); border:1px solid rgba(127,127,127,0.32);
    color:currentColor; opacity:0.78; font-family:var(--mono,'DM Mono',monospace);
    font-size:11px; letter-spacing:1px; text-transform:uppercase;
    padding:6px 12px; cursor:pointer; display:flex; align-items:center; gap:8px;
    border-radius:3px; backdrop-filter:blur(6px); transition:opacity .15s;
" onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.78'" title="Toggle room chat">
    <span>💬 Chat</span>
    <span id="chatUnreadBadge" style="display:none;background:#c5562a;color:#fff;border-radius:10px;padding:1px 6px;font-size:9px;font-weight:700;"></span>
</button>

<!-- Chat panel -->
<div id="roomChatPanel" style="
    position:fixed; top:0; right:0; bottom:0; width:300px;
    background:var(--panel,#1e1a14); border-left:1px solid var(--border,#d6cbb5);
    display:none; flex-direction:column; z-index:190;
    font-family:var(--mono,'DM Mono',monospace);
">
    <!-- Header -->
    <div style="
        padding:14px 16px; border-bottom:1px solid var(--border,#d6cbb5);
        display:flex; align-items:center; justify-content:space-between;
        flex-shrink:0;
    ">
        <span style="font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-mute,#8a7e72);">Room Chat</span>
        <button onclick="toggleChat()" style="background:none;border:none;color:var(--text-mute,#8a7e72);cursor:pointer;font-size:16px;line-height:1;padding:0;">×</button>
    </div>

    <!-- Messages -->
    <div id="roomChatMessages" style="
        flex:1; overflow-y:auto; padding:12px 14px;
        display:flex; flex-direction:column; gap:10px;
    "></div>

    <!-- Typing indicator -->
    <div id="chatTypingBar" style="
        display:none; padding:4px 14px 2px; font-size:10px;
        color:var(--text-mute,#8a7e72); flex-shrink:0; letter-spacing:0.3px;
    "></div>

    <!-- Input -->
    <div style="padding:12px 14px; border-top:1px solid var(--border,#d6cbb5); flex-shrink:0; display:flex; gap:8px;">
        <input id="roomChatInput" type="text" placeholder="Message…" maxlength="2000"
            style="
                flex:1; background:var(--bg,#13110e); border:1px solid var(--border,#d6cbb5);
                color:var(--text,#e8e0d0); font-family:var(--mono,'DM Mono',monospace);
                font-size:12px; padding:8px 10px; outline:none;
            "
            onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendChatMsg();}"
            oninput="_chatTyping()"
        />
        <button onclick="sendChatMsg()" style="
            background:#c5562a; border:none; color:#fff;
            font-family:var(--mono,'DM Mono',monospace); font-size:11px;
            letter-spacing:1px; text-transform:uppercase; padding:8px 12px; cursor:pointer;
        ">Send</button>
    </div>
</div>

<script>
(function() {
    const PROJECT_ID = (typeof room_project_id !== 'undefined') ? room_project_id : '';
    const ROOM_NAME  = (typeof room_name !== 'undefined')  ? room_name  : '';
    if (!PROJECT_ID || !ROOM_NAME) return;

    const POLL_MS       = 3000;
    const TYPING_DEBOUNCE_MS = 1500; // fire typing signal after this much idle

    let _lastTs      = null;
    let _open        = false;
    let _unread      = 0;
    let _pollTimer   = null;
    let _typingTimer = null;
    let _myUserId    = '';

    // Presence tracking for join/leave system messages
    let _prevPresenceIds = null; // null = first load, don't emit join/leave yet

    const colors = ['#c5562a','#3d7a5c','#7a5c3d','#3d5c7a','#7a3d5c','#5c7a3d'];
    function colorFor(uid) {
        let h = 0;
        for (let i = 0; i < (uid||'').length; i++) h = (h * 31 + uid.charCodeAt(i)) & 0xffffffff;
        return colors[Math.abs(h) % colors.length];
    }

    function timeStr(iso) {
        if (!iso) return '';
        const d = new Date(iso);
        return d.toLocaleTimeString(undefined, {hour:'2-digit', minute:'2-digit'});
    }

    function escHtml(s) {
        return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    function appendMessage(msg) {
        const box = document.getElementById('roomChatMessages');
        if (!box) return;
        const isMe = msg.user_id === _myUserId;
        const color = colorFor(msg.user_id);
        const el = document.createElement('div');
        el.style.cssText = `display:flex;flex-direction:column;gap:2px;align-items:${isMe?'flex-end':'flex-start'};`;
        el.innerHTML = `
            <div style="display:flex;align-items:center;gap:6px;${isMe?'flex-direction:row-reverse;':''}">
                <div style="width:22px;height:22px;border-radius:50%;background:${color};color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;">${escHtml(msg.user_initials||'?')}</div>
                <span style="font-size:10px;color:var(--text-mute,#8a7e72);">${escHtml(msg.user_name||'?')} · ${timeStr(msg.created_at)}</span>
            </div>
            <div style="
                max-width:220px; padding:8px 10px; font-size:12px; line-height:1.5;
                background:${isMe?'#c5562a':'var(--bg,#13110e)'}; color:${isMe?'#fff':'var(--text,#e8e0d0)'};
                border:1px solid ${isMe?'#c5562a':'var(--border,#d6cbb5)'};
                word-break:break-word;
            ">${escHtml(msg.message)}</div>
        `;
        box.appendChild(el);
        box.scrollTop = box.scrollHeight;
    }

    function appendSystemMsg(text) {
        const box = document.getElementById('roomChatMessages');
        if (!box) return;
        const el = document.createElement('div');
        el.style.cssText = 'text-align:center;font-size:10px;color:var(--text-mute,#8a7e72);padding:2px 0;letter-spacing:0.3px;';
        el.textContent = text;
        box.appendChild(el);
        box.scrollTop = box.scrollHeight;
    }

    function updateTypingBar(typingUsers) {
        const bar = document.getElementById('chatTypingBar');
        if (!bar) return;
        if (!typingUsers || typingUsers.length === 0) {
            bar.style.display = 'none';
            bar.textContent = '';
            return;
        }
        const names = typingUsers.map(u => (u.user_name || 'Someone').split(' ')[0]);
        const label = names.length === 1
            ? `${names[0]} is typing…`
            : names.length === 2
                ? `${names[0]} and ${names[1]} are typing…`
                : `${names[0]} and ${names.length - 1} others are typing…`;
        bar.textContent = label;
        bar.style.display = 'block';
    }

    function handlePresenceUpdate(presence) {
        if (!presence) return;
        const currentIds = new Map(presence.map(u => [u.user_id, u.user_name || 'Someone']));

        if (_prevPresenceIds === null) {
            // First load — just capture the baseline, don't emit anything
            _prevPresenceIds = currentIds;
            return;
        }

        // Detect joins (in current but not prev)
        for (const [uid, name] of currentIds) {
            if (!_prevPresenceIds.has(uid) && uid !== _myUserId) {
                appendSystemMsg(`${name.split(' ')[0]} joined the room`);
            }
        }
        // Detect leaves (in prev but not current)
        for (const [uid, name] of _prevPresenceIds) {
            if (!currentIds.has(uid) && uid !== _myUserId) {
                appendSystemMsg(`${name.split(' ')[0]} left the room`);
            }
        }

        _prevPresenceIds = currentIds;
    }

    async function poll() {
        try {
            let url = `/api/chat/messages?project_id=${PROJECT_ID}&room_name=${ROOM_NAME}`;
            if (_lastTs) url += `&since=${encodeURIComponent(_lastTs)}`;
            const r = await fetch(url);
            const d = await r.json();

            const msgs = d.messages || [];
            if (msgs.length) {
                _lastTs = msgs[msgs.length - 1].created_at;
                msgs.forEach(m => appendMessage(m));
                if (!_open) {
                    _unread += msgs.length;
                    updateBadge();
                }
            }

            updateTypingBar(d.typing_users || []);
            handlePresenceUpdate(d.presence || null);
        } catch(e) {}
    }

    function updateBadge() {
        const badge = document.getElementById('chatUnreadBadge');
        if (!badge) return;
        if (_unread > 0) { badge.style.display = 'inline'; badge.textContent = _unread > 9 ? '9+' : _unread; }
        else { badge.style.display = 'none'; }
    }

    window.toggleChat = function() {
        _open = !_open;
        const panel = document.getElementById('roomChatPanel');
        const btn   = document.getElementById('chatToggleBtn');
        if (panel) panel.style.display = _open ? 'flex' : 'none';
        if (_open) {
            _unread = 0;
            updateBadge();
            const box = document.getElementById('roomChatMessages');
            if (box) box.scrollTop = box.scrollHeight;
            document.getElementById('roomChatInput')?.focus();
            if (btn) btn.style.right = '320px';
        } else {
            if (btn) btn.style.right = '20px';
        }
    };

    window.sendChatMsg = async function() {
        const input = document.getElementById('roomChatInput');
        if (!input) return;
        const msg = input.value.trim();
        if (!msg) return;
        input.value = '';
        // Cancel any pending typing signal
        if (_typingTimer) { clearTimeout(_typingTimer); _typingTimer = null; }
        try {
            await fetch('/api/chat/send', {
                method: 'POST',
                headers: {'Content-Type':'application/json'},
                body: JSON.stringify({project_id: PROJECT_ID, room_name: ROOM_NAME, message: msg}),
            });
            await poll();
        } catch(e) { input.value = msg; }
    };

    // Called on every keystroke — debounced before firing typing signal
    window._chatTyping = function() {
        if (_typingTimer) clearTimeout(_typingTimer);
        _typingTimer = setTimeout(async () => {
            try {
                await fetch('/api/chat/typing', {
                    method: 'POST',
                    headers: {'Content-Type':'application/json'},
                    body: JSON.stringify({project_id: PROJECT_ID, room_name: ROOM_NAME}),
                });
            } catch(e) {}
            _typingTimer = null;
        }, TYPING_DEBOUNCE_MS);
    };

    // Try to get own user id for "isMe" styling
    (async () => {
        try {
            const r = await fetch('/api/auth/me');
            const d = await r.json();
            _myUserId = d.id || d.user_id || '';
        } catch(e) {}
    })();

    // Load history on init then start polling
    poll();
    _pollTimer = setInterval(poll, POLL_MS);
    window.addEventListener('beforeunload', () => clearInterval(_pollTimer));
})();
</script>