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

  Usage in any room template:
    <script>
      const room_project_id = "{{ project.id }}";
      const room_name = "script";   // or "deck", "budget", "casting", "deal", "idea"
    </script>
    {% include "_room_presence.html" %}
#}

<div id="roomPresenceBar" style="
    display:flex; align-items:center; gap:10px;
    padding:8px 16px;
    border-bottom:1px solid var(--border,#d6cbb5);
    background:var(--paper,#fffaef);
    font-family:var(--mono,'DM Mono',monospace);
    font-size:11px;
    color:var(--text-mute,#8a7e72);
    position:sticky; top:0; z-index:90;
">
    <span style="letter-spacing:1px;text-transform:uppercase;font-size:9px;">In this room</span>
    <div id="presenceAvatars" style="display:flex;gap:6px;align-items:center;"></div>
    <span id="presenceCount" style="font-size:10px;color:var(--text-mute,#8a7e72);"></span>
</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 HEARTBEAT_MS = 20000;
    const POLL_MS      = 15000;

    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];
    }

    async function join() {
        try { await fetch('/api/presence/join', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({project_id:PROJECT_ID, room_name:ROOM_NAME}) }); } catch(e) {}
    }
    async function leave() {
        try { navigator.sendBeacon('/api/presence/leave', JSON.stringify({project_id:PROJECT_ID, room_name:ROOM_NAME})); } catch(e) {}
    }
    async function heartbeat() {
        try { await fetch('/api/presence/heartbeat', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({project_id:PROJECT_ID, room_name:ROOM_NAME}) }); } catch(e) {}
    }
    async function poll() {
        try {
            const r = await fetch(`/api/presence/who?project_id=${PROJECT_ID}&room_name=${ROOM_NAME}`);
            const d = await r.json();
            renderUsers(d.users || []);
        } catch(e) {}
    }
    function renderUsers(users) {
        const bar   = document.getElementById('presenceAvatars');
        const count = document.getElementById('presenceCount');
        if (!bar) return;
        bar.innerHTML = users.map(u => {
            const bg  = colorFor(u.user_id);
            const tip = u.user_name || '?';
            return `<div title="${tip}" style="
                width:28px; height:28px; border-radius:50%;
                background:${bg}; color:#fff;
                display:flex; align-items:center; justify-content:center;
                font-size:10px; font-weight:700; letter-spacing:0.5px;
                cursor:default; flex-shrink:0;
                border:2px solid var(--paper,#fffaef);
            ">${u.user_initials || '?'}</div>`;
        }).join('');
        if (count) count.textContent = users.length > 1 ? `${users.length} people here` : users.length === 1 ? '1 person here' : '';
    }

    // Init
    join();
    poll();
    const hbTimer   = setInterval(heartbeat, HEARTBEAT_MS);
    const pollTimer = setInterval(poll,      POLL_MS);

    // Clean up on page leave
    window.addEventListener('beforeunload', () => { clearInterval(hbTimer); clearInterval(pollTimer); leave(); });
    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') leave();
        else { join(); poll(); }
    });
})();
</script>