{#
  _room_video.html — floating draggable video call modal for any room.
  Requires: room_project_id and room_name JS vars defined before this include.
#}

<!-- Video toggle button (sits above the Chat button in bottom-right stack) -->
<button id="vidToggleBtn" onclick="toggleVideoModal()" style="
    position:fixed; bottom:56px; 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 video call">
    <span>📹 Video</span>
    <span id="vidLiveBadge" style="display:none;background:#3d7a5c;color:#fff;border-radius:10px;padding:1px 6px;font-size:9px;font-weight:700;">LIVE</span>
</button>

<!-- Floating video modal -->
<div id="roomVideoModal" style="
    display:none; position:fixed; bottom:24px; right:24px;
    width:300px; z-index:191;
    background:var(--panel,#1e1a14); border:1px solid var(--border,#d6cbb5);
    flex-direction:column; font-family:var(--mono,'DM Mono',monospace);
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
">
    <!-- Drag handle -->
    <div id="vidModalHeader" style="
        padding:10px 14px; border-bottom:1px solid var(--border,#d6cbb5);
        display:flex; align-items:center; justify-content:space-between;
        cursor:move; flex-shrink:0; user-select:none;
    ">
        <span style="font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-mute,#8a7e72);">Video Call</span>
        <button onclick="toggleVideoModal()" style="background:none;border:none;color:var(--text-mute,#8a7e72);cursor:pointer;font-size:16px;line-height:1;padding:0;">×</button>
    </div>

    <!-- Video grid -->
    <div id="vidGrid" style="
        background:#000; display:flex; flex-wrap:wrap; gap:2px; min-height:150px;
        justify-content:center; align-items:center; padding:2px; flex-shrink:0;
    ">
        <!-- Self tile always present when in call -->
        <div id="vidTileSelf" style="display:none;position:relative;width:100%;height:150px;background:#111;flex-shrink:0;">
            <video id="vidSelf" autoplay muted playsinline style="width:100%;height:100%;object-fit:cover;transform:scaleX(-1);"></video>
            <div id="vidSelfLabel" style="position:absolute;bottom:4px;left:6px;font-size:9px;color:rgba(255,255,255,0.8);letter-spacing:0.5px;text-transform:uppercase;background:rgba(0,0,0,0.5);padding:1px 4px;">You</div>
            <div id="vidSelfStatus" style="position:absolute;top:4px;right:4px;display:flex;gap:3px;"></div>
        </div>
        <!-- Remote tiles injected here by JS -->
    </div>

    <!-- Status line -->
    <div id="vidStatusLine" style="padding:6px 12px;font-size:10px;color:var(--text-mute,#8a7e72);border-top:1px solid var(--border,#d6cbb5);text-align:center;"></div>

    <!-- Controls (shown when in call) -->
    <div id="vidControls" style="display:none;padding:8px 10px;border-top:1px solid var(--border,#d6cbb5);flex-shrink:0;display:flex;gap:6px;justify-content:center;">
        <button id="vidMicBtn" onclick="toggleVidMic()" style="
            background:var(--bg,#13110e); border:1px solid var(--border,#d6cbb5);
            color:var(--text,#e8e0d0); font-family:var(--mono,'DM Mono',monospace);
            font-size:10px; letter-spacing:0.5px; padding:5px 10px; cursor:pointer;
        ">Mic On</button>
        <button id="vidCamBtn" onclick="toggleVidCam()" style="
            background:var(--bg,#13110e); border:1px solid var(--border,#d6cbb5);
            color:var(--text,#e8e0d0); font-family:var(--mono,'DM Mono',monospace);
            font-size:10px; letter-spacing:0.5px; padding:5px 10px; cursor:pointer;
        ">Cam On</button>
        <button onclick="leaveVideoCall()" style="
            background:#c5562a; border:none; color:#fff;
            font-family:var(--mono,'DM Mono',monospace); font-size:10px;
            letter-spacing:0.5px; padding:5px 10px; cursor:pointer;
        ">Leave</button>
    </div>

    <!-- Join row (shown when not in call) -->
    <div id="vidJoinRow" style="padding:10px;border-top:1px solid var(--border,#d6cbb5);flex-shrink:0;text-align:center;">
        <button onclick="joinVideoCall()" style="
            background:#3d7a5c; border:none; color:#fff;
            font-family:var(--mono,'DM Mono',monospace); font-size:11px;
            letter-spacing:1px; text-transform:uppercase; padding:8px 20px; cursor:pointer; width:100%;
        ">Join Video</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 ICE_CONFIG = { iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun1.l.google.com:19302' },
    ]};

    let _modalOpen = false;
    let _inCall    = false;
    let _micOn     = true;
    let _camOn     = true;
    let _localStream = null;
    let _ws          = null;
    let _myUserId    = '';
    let _myName      = '';
    let _myInitials  = '';

    // Per-peer state
    const _peers      = {};  // userId → RTCPeerConnection
    const _peerInfo   = {};  // userId → {name, initials}
    const _pendingICE = {};  // userId → [candidates]

    const colors = ['#c5562a','#3d7a5c','#7a5c3d','#3d5c7a','#7a3d5c','#5c7a3d'];
    function _color(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];
    }

    // ── Me ──────────────────────────────────────────────────────────────────
    (async () => {
        try {
            const r = await fetch('/api/auth/me');
            const d = await r.json();
            _myUserId  = d.id || '';
            _myName    = d.name || d.email || 'You';
            const parts = (_myName).split(' ').filter(Boolean);
            _myInitials = parts.length >= 2
                ? (parts[0][0] + parts[parts.length-1][0]).toUpperCase()
                : (_myName.slice(0,2)||'?').toUpperCase();
        } catch(e) {}
    })();

    // ── WebSocket ────────────────────────────────────────────────────────────
    function _connectWs() {
        if (_ws && _ws.readyState < 2) return;
        const scheme = location.protocol === 'https:' ? 'wss' : 'ws';
        const url = `${scheme}://${location.host}/ws/video/${PROJECT_ID}/${ROOM_NAME}`;
        _ws = new WebSocket(url);
        _ws.onmessage = (ev) => {
            let msg; try { msg = JSON.parse(ev.data); } catch { return; }
            _handleWs(msg);
        };
        _ws.onerror = () => {};
        _ws.onclose = () => { _ws = null; };
    }

    function _disconnectWs() {
        if (_ws) { try { _ws.close(); } catch {} _ws = null; }
    }

    function _wsSend(payload) {
        if (_ws && _ws.readyState === 1) _ws.send(JSON.stringify(payload));
    }

    function _handleWs(msg) {
        const fromUser = msg.from_user;
        if (!fromUser || fromUser === _myUserId) return;
        if (msg.type === 'video-presence') _handlePresence(msg);
        else if (msg.type === 'rtc-signal') _handleSignal(msg);
    }

    function _handlePresence(msg) {
        const from = msg.from_user;
        const state = msg.state;
        if (state === 'joining' || state === 'ready') {
            _peerInfo[from] = { name: msg.user_name || 'Someone', initials: msg.user_initials || '?' };
            if (state === 'joining' && _inCall) {
                // Tell them I'm in the call
                _wsSend({ type: 'video-presence', state: 'ready',
                          user_name: _myName, user_initials: _myInitials, to: from });
            }
            if (state === 'ready' && _inCall && !_peers[from]) {
                // New peer entered call — I offer if my ID is "lower" (tiebreaker)
                if (_myUserId < from) {
                    _ensurePeer(from).then(pc => _sendOffer(from, pc));
                }
            }
        } else if (state === 'left') {
            _cleanupPeer(from);
        } else if (state === 'mic-toggle') {
            const tile = document.getElementById(`vidTile_${from}`);
            if (tile) {
                const dot = tile.querySelector('.vid-mic-dot');
                if (dot) dot.style.display = msg.muted ? 'block' : 'none';
            }
        } else if (state === 'cam-toggle') {
            const tile = document.getElementById(`vidTile_${from}`);
            if (tile) {
                const v = tile.querySelector('video');
                if (v) v.style.opacity = msg.cam_off ? '0' : '1';
            }
        }
    }

    async function _handleSignal(msg) {
        const from = msg.from_user;
        const sig  = msg.signal || {};
        if (!_inCall) return;

        if (!_peers[from]) {
            await _ensurePeer(from);
        }
        const pc = _peers[from];

        if (sig.kind === 'offer') {
            await pc.setRemoteDescription(new RTCSessionDescription(sig.sdp));
            const ans = await pc.createAnswer();
            await pc.setLocalDescription(ans);
            _wsSend({ type: 'rtc-signal', signal: { kind: 'answer', sdp: ans }, to: from });
            // Drain pending ICE
            for (const c of (_pendingICE[from] || [])) {
                try { await pc.addIceCandidate(c); } catch {}
            }
            _pendingICE[from] = [];
        } else if (sig.kind === 'answer') {
            await pc.setRemoteDescription(new RTCSessionDescription(sig.sdp));
            for (const c of (_pendingICE[from] || [])) {
                try { await pc.addIceCandidate(c); } catch {}
            }
            _pendingICE[from] = [];
        } else if (sig.kind === 'ice') {
            if (pc.remoteDescription) {
                try { await pc.addIceCandidate(sig.candidate); } catch {}
            } else {
                (_pendingICE[from] = _pendingICE[from] || []).push(sig.candidate);
            }
        }
    }

    // ── WebRTC peers ─────────────────────────────────────────────────────────
    async function _ensurePeer(userId) {
        if (_peers[userId]) return _peers[userId];
        const pc = new RTCPeerConnection(ICE_CONFIG);
        _peers[userId] = pc;
        _pendingICE[userId] = [];

        if (_localStream) {
            for (const track of _localStream.getTracks()) pc.addTrack(track, _localStream);
        }

        pc.onicecandidate = (e) => {
            if (e.candidate) {
                _wsSend({ type: 'rtc-signal', signal: { kind: 'ice', candidate: e.candidate }, to: userId });
            }
        };

        pc.ontrack = (e) => {
            let tile = document.getElementById(`vidTile_${userId}`);
            if (!tile) tile = _addRemoteTile(userId);
            const v = tile.querySelector('video');
            if (v && v.srcObject !== e.streams[0]) {
                v.srcObject = e.streams[0];
            }
        };

        pc.onconnectionstatechange = () => {
            if (pc.connectionState === 'failed' || pc.connectionState === 'disconnected') {
                _cleanupPeer(userId);
            }
        };

        _addRemoteTile(userId);
        return pc;
    }

    async function _sendOffer(userId, pc) {
        try {
            const offer = await pc.createOffer();
            await pc.setLocalDescription(offer);
            _wsSend({ type: 'rtc-signal', signal: { kind: 'offer', sdp: offer }, to: userId });
        } catch(e) {}
    }

    function _cleanupPeer(userId) {
        const pc = _peers[userId];
        if (pc) { try { pc.close(); } catch {} delete _peers[userId]; }
        delete _pendingICE[userId];
        const tile = document.getElementById(`vidTile_${userId}`);
        if (tile) tile.remove();
        _relayoutGrid();
    }

    // ── Video tiles ──────────────────────────────────────────────────────────
    function _addRemoteTile(userId) {
        const existing = document.getElementById(`vidTile_${userId}`);
        if (existing) return existing;
        const info  = _peerInfo[userId] || {};
        const color = _color(userId);
        const tile  = document.createElement('div');
        tile.id = `vidTile_${userId}`;
        tile.style.cssText = 'position:relative;background:#111;flex-shrink:0;overflow:hidden;';
        tile.innerHTML = `
            <video autoplay playsinline style="width:100%;height:100%;object-fit:cover;"></video>
            <div style="position:absolute;bottom:4px;left:6px;display:flex;align-items:center;gap:4px;">
                <div style="width:16px;height:16px;border-radius:50%;background:${color};color:#fff;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;flex-shrink:0;">${info.initials||'?'}</div>
                <span style="font-size:9px;color:rgba(255,255,255,0.8);letter-spacing:0.5px;">${escHtml(info.name||'Someone')}</span>
            </div>
            <div class="vid-mic-dot" style="display:none;position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:#c5562a;" title="Muted"></div>
        `;
        document.getElementById('vidGrid').appendChild(tile);
        _relayoutGrid();
        return tile;
    }

    function _relayoutGrid() {
        const grid   = document.getElementById('vidGrid');
        const self   = document.getElementById('vidTileSelf');
        const remote = [...grid.querySelectorAll('[id^="vidTile_"]')];
        const total  = (_inCall ? 1 : 0) + remote.length;
        const h = total <= 1 ? 200 : total <= 2 ? 150 : 120;
        const w = total <= 2 ? '100%' : '48%';
        if (self && _inCall) { self.style.height = h + 'px'; self.style.width = w; }
        remote.forEach(t => { t.style.height = h + 'px'; t.style.width = w; });
        _vidStatus(remote.length === 0 ? 'No one else is here yet.' : `${remote.length} other${remote.length>1?'s':''} connected`);
    }

    function _vidStatus(txt) {
        const el = document.getElementById('vidStatusLine');
        if (el) el.textContent = txt;
    }

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

    // ── Public API ───────────────────────────────────────────────────────────
    window.toggleVideoModal = function() {
        _modalOpen = !_modalOpen;
        const modal = document.getElementById('roomVideoModal');
        if (modal) modal.style.display = _modalOpen ? 'flex' : 'none';
        if (_modalOpen) {
            _connectWs();
            _vidStatus('Click "Join Video" to start your camera.');
        } else if (!_inCall) {
            _disconnectWs();
        }
    };

    window.joinVideoCall = async function() {
        try {
            _localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        } catch(err) {
            try {
                _localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
                _camOn = false;
            } catch(e) {
                _vidStatus('Camera/mic access denied.');
                return;
            }
        }

        _inCall = true;
        _micOn  = true;
        _camOn  = _localStream.getVideoTracks().length > 0;

        const self = document.getElementById('vidTileSelf');
        const selfVid = document.getElementById('vidSelf');
        if (selfVid) selfVid.srcObject = _localStream;
        if (self) self.style.display = 'block';

        document.getElementById('vidJoinRow').style.display = 'none';
        document.getElementById('vidControls').style.display = 'flex';
        document.getElementById('vidMicBtn').textContent = 'Mic On';
        document.getElementById('vidCamBtn').textContent = _camOn ? 'Cam On' : 'Cam Off';
        document.getElementById('vidLiveBadge').style.display = 'inline';

        _relayoutGrid();

        // Announce to room
        _wsSend({ type: 'video-presence', state: 'ready',
                  user_name: _myName, user_initials: _myInitials });

        // Connect to any peers who respond with 'ready' — handled in _handlePresence
    };

    window.leaveVideoCall = function() {
        _wsSend({ type: 'video-presence', state: 'left' });
        _inCall = false;

        // Close all peer connections
        for (const uid of Object.keys(_peers)) _cleanupPeer(uid);

        // Stop local tracks
        if (_localStream) { _localStream.getTracks().forEach(t => t.stop()); _localStream = null; }

        const selfVid = document.getElementById('vidSelf');
        if (selfVid) selfVid.srcObject = null;
        document.getElementById('vidTileSelf').style.display = 'none';
        document.getElementById('vidJoinRow').style.display = 'block';
        document.getElementById('vidControls').style.display = 'none';
        document.getElementById('vidLiveBadge').style.display = 'none';

        _vidStatus('Click "Join Video" to start your camera.');
    };

    window.toggleVidMic = function() {
        if (!_localStream) return;
        _micOn = !_micOn;
        _localStream.getAudioTracks().forEach(t => { t.enabled = _micOn; });
        document.getElementById('vidMicBtn').textContent = _micOn ? 'Mic On' : 'Mic Off';
        document.getElementById('vidMicBtn').style.color = _micOn ? '' : '#c5562a';
        _wsSend({ type: 'video-presence', state: 'mic-toggle', muted: !_micOn });
    };

    window.toggleVidCam = function() {
        if (!_localStream) return;
        _camOn = !_camOn;
        _localStream.getVideoTracks().forEach(t => { t.enabled = _camOn; });
        const selfVid = document.getElementById('vidSelf');
        if (selfVid) selfVid.style.opacity = _camOn ? '1' : '0';
        document.getElementById('vidCamBtn').textContent = _camOn ? 'Cam On' : 'Cam Off';
        document.getElementById('vidCamBtn').style.color = _camOn ? '' : '#c5562a';
        _wsSend({ type: 'video-presence', state: 'cam-toggle', cam_off: !_camOn });
    };

    // Stop local media if page unloads mid-call
    window.addEventListener('beforeunload', () => {
        if (_inCall) leaveVideoCall();
        _disconnectWs();
    });

    // ── Drag to reposition ───────────────────────────────────────────────────
    (function() {
        const header = document.getElementById('vidModalHeader');
        const modal  = document.getElementById('roomVideoModal');
        if (!header || !modal) return;
        let _drag = false, _ox = 0, _oy = 0, _mx = 0, _my = 0;
        header.addEventListener('mousedown', (e) => {
            _drag = true;
            const r = modal.getBoundingClientRect();
            _ox = e.clientX - r.left;
            _oy = e.clientY - r.top;
            e.preventDefault();
        });
        document.addEventListener('mousemove', (e) => {
            if (!_drag) return;
            const left = e.clientX - _ox;
            const top  = e.clientY - _oy;
            modal.style.right  = 'auto';
            modal.style.bottom = 'auto';
            modal.style.left   = Math.max(0, Math.min(left, window.innerWidth  - modal.offsetWidth))  + 'px';
            modal.style.top    = Math.max(0, Math.min(top,  window.innerHeight - modal.offsetHeight)) + 'px';
        });
        document.addEventListener('mouseup', () => { _drag = false; });
    })();
})();
</script>