{% extends "base.html" %}
{% import "components.html" as components %}

{% block title %}{{ crate::i18n::t("monitor-title", lang) }} - Remotto Console{% endblock %}

{% block content %}
<div class="flex h-screen">
    {% call components::sidebar("monitor", lang) %}

    <main class="flex-1 overflow-auto md:ml-0 bg-slate-900">
        {% call components::header(crate::i18n::t("monitor-title", lang), username, lang) %}

        <style>
            @keyframes autoScrollProgress {
                from { width: 0%; }
                to { width: 100%; }
            }
            #autoScrollBtn {
                position: relative;
                overflow: hidden;
            }
            #autoScrollBtn > * {
                position: relative;
                z-index: 1;
            }
            #autoScrollBtn.animating::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 0%;
                background: rgba(148,163,184,0.35);
                border-radius: inherit;
                animation: autoScrollProgress 10s linear infinite; /* matches SCROLL_INTERVAL_MS */
                z-index: 0;
            }
        </style>

        <div class="p-4">
            <!-- Controls Bar -->
            <div class="glass rounded-xl border border-white/20 shadow-lg px-6 py-3 mb-4 flex flex-wrap items-center gap-4 relative z-30">
                <!-- Group Select -->
                <div class="flex items-center gap-2">
                    <label class="text-slate-400 text-sm font-medium whitespace-nowrap">
                        <svg class="w-4 h-4 inline-block mr-1 -mt-0.5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                        {{ crate::i18n::t("monitor-select-group", lang) }}
                    </label>
                    <div class="relative" id="monitor-group-dropdown">
                        <input type="hidden" id="groupSelect" value="">
                        <button onclick="toggleMonitorDropdown('monitor-group-dropdown')"
                            class="flex items-center justify-between gap-2 px-3 py-1.5 bg-slate-800/80 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-primary-500 outline-none min-w-[160px]">
                            <span id="groupSelectLabel" class="truncate max-w-[140px]">--</span>
                            <svg class="w-4 h-4 text-slate-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <div class="hidden absolute top-full mt-1 left-0 w-full min-w-[160px] bg-slate-800 border border-slate-600 rounded-lg shadow-xl overflow-hidden z-50 max-h-60 overflow-y-auto">
                            <button onclick="selectMonitorGroup('', '--')"
                                class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200 truncate">--</button>
                            <button onclick="selectMonitorGroup('__all__', '{{ crate::i18n::t("monitor-all-groups", lang) }}')"
                                class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200 truncate font-medium border-b border-white/10">{{ crate::i18n::t("monitor-all-groups", lang) }}</button>
                            {% for g in groups %}
                            <button onclick="selectMonitorGroup('{{ g.id }}', '{{ g.name }}')"
                                class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200 truncate">{{ g.name }}</button>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <div class="h-6 w-px bg-white/10"></div>

                <!-- Grid Size: −/+  buttons -->
                <div class="flex items-center gap-1">
                    <button onclick="decreaseGrid()" class="p-1.5 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors border border-transparent hover:border-white/10">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg>
                    </button>
                    <span id="gridSizeLabel" class="text-white text-sm font-medium min-w-[32px] text-center">3×3</span>
                    <button onclick="increaseGrid()" class="p-1.5 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors border border-transparent hover:border-white/10">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    </button>
                </div>

                <div class="h-6 w-px bg-white/10"></div>

                <!-- Auto-Scroll toggle (RemottoViewer style) -->
                <button id="autoScrollBtn" onclick="toggleAutoScroll()"
                    class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-all duration-200 bg-slate-700/60 text-slate-300 hover:bg-slate-600/80 hover:text-white">
                    <svg id="autoScrollIcon" class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                    <span>Auto</span>
                </button>

                <!-- Page Navigation -->
                <div class="ml-auto flex items-center gap-1">
                    <span id="pageIndicator" class="text-slate-400 text-sm font-medium mr-2"></span>
                    <button onclick="prevPage()" class="p-1.5 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors border border-transparent hover:border-white/10">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                    </button>
                    <button onclick="nextPage()" class="p-1.5 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors border border-transparent hover:border-white/10">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </button>
                </div>
            </div>

            <!-- Video Grid -->
            <div id="videoGrid" class="grid gap-2" style="grid-template-columns: repeat(3, 1fr);">
                <!-- Dynamically populated -->
            </div>

            <!-- Empty State -->
            <div id="emptyState" class="glass rounded-xl p-12 border border-white/10 text-center hidden">
                <svg class="w-16 h-16 mx-auto text-slate-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                        d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
                <p class="text-slate-500 text-lg">{{ crate::i18n::t("monitor-no-devices", lang) }}</p>
            </div>
        </div>
    </main>
</div>

<script src="https://cdn.jsdelivr.net/npm/livekit-client@2.6.1/dist/livekit-client.umd.js"></script>
<script>
(function() {
    // If livekit_url contains localhost, replace with current browser hostname
    const rawUrl = '{{ livekit_url }}';
    const LIVEKIT_URL = rawUrl.replace('localhost', window.location.hostname);
    // Stable for this browser page. The server uses it for stream reference
    // counting, so it must not change after cells start requesting streams.
    const viewerId = 'admin-' + Math.random().toString(36).substring(2, 10);

    let rooms = new Map(); // groupId → LiveKit Room
    let deviceGroupMap = new Map(); // deviceId → groupId
    let allDevices = [];
    let currentPage = 0;
    let gridSize = 3;
    let autoScrollTimer = null;
    let autoScrolling = false;
    let activeStreams = new Set(); // tracked device_ids with active START_STREAM
    let prefetchStreams = new Set(); // pre-fetched device_ids (next page)
    const STREAM_STOP_GRACE_MS = 3000;
    let pendingStopTimers = new Map(); // deviceId → delayed STOP timer
    let cellPool = new Map(); // deviceId → cell DOM element (persisted across page switches)

    // Hidden buffer keeps prefetched video elements alive off-screen
    // opacity:0.001 + full viewport size ensures GPU compositing stays active for video elements
    // (width:1px causes browser to skip video rendering, leading to dark flash on page switch)
    const bufferContainer = document.createElement('div');
    bufferContainer.style.cssText = 'position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;opacity:0.001;z-index:-9999;overflow:hidden;';
    document.body.appendChild(bufferContainer);

    // ── Stale Frame Detection ──
    // VP9 decoders render uniform green/dark frames when no keyframe has been received.
    // Detect uniform frames and show a loading spinner to mask them.
    function isVideoStale(video) {
        if (!video || video.videoWidth === 0 || video.videoHeight === 0) return false;
        try {
            const c = document.createElement('canvas');
            c.width = 16; c.height = 16;
            const ctx = c.getContext('2d');
            ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, 16, 16);
            const d = ctx.getImageData(0, 0, 16, 16).data;
            const r0 = d[0], g0 = d[1], b0 = d[2];
            for (let i = 4; i < d.length; i += 4) {
                if (Math.abs(d[i] - r0) > 15 || Math.abs(d[i+1] - g0) > 15 || Math.abs(d[i+2] - b0) > 15) {
                    return false;
                }
            }
            return true;
        } catch (e) { return false; }
    }

    // Periodic watchdog: detect stale frames and show spinner


    // ── Viewer Heartbeat ──
    // Send periodic heartbeats (every 20s) to keep the server's viewer TTL alive.
    // If the browser crashes, heartbeats stop and the server will expire this viewer
    // after 60s and send STOP_STREAM to the client.
    setInterval(() => {
        const allStreamIds = new Set([...activeStreams, ...prefetchStreams]);
        for (const deviceId of allStreamIds) {
            const identity = findParticipantIdentity(deviceId);
            if (identity) {
                sendStartCommand(identity).catch(() => {});
            }
            fetch('/admin/api/monitor/start-stream', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ device_id: deviceId, viewer_id: viewerId }),
            }).catch(() => {});
        }
    }, 10000);

    // ── Custom Dropdown Helpers ──
    function closeAllMonitorDropdowns() {
        document.querySelectorAll('#monitor-group-dropdown > div:last-child')
            .forEach(el => el.classList.add('hidden'));
    }

    window.toggleMonitorDropdown = function(containerId) {
        const container = document.getElementById(containerId);
        const menu = container.querySelector('div:last-child');
        const wasHidden = menu.classList.contains('hidden');
        closeAllMonitorDropdowns();
        if (wasHidden) menu.classList.remove('hidden');
    };

    window.selectMonitorGroup = function(value, label) {
        document.getElementById('groupSelect').value = value;
        document.getElementById('groupSelectLabel').textContent = label;
        closeAllMonitorDropdowns();
        onGroupChange();
    };

    // Grid +/- controls
    window.increaseGrid = function() {
        if (gridSize < 5) {
            gridSize++;
            document.getElementById('gridSizeLabel').textContent = gridSize + '×' + gridSize;
            onGridChange();
        }
    };
    window.decreaseGrid = function() {
        if (gridSize > 1) {
            gridSize--;
            document.getElementById('gridSizeLabel').textContent = gridSize + '×' + gridSize;
            onGridChange();
        }
    };

    document.addEventListener('click', function(e) {
        if (!e.target.closest('#monitor-group-dropdown')) {
            closeAllMonitorDropdowns();
        }
    });

    // ── Room Connection Helper ──
    function setupRoomEvents(room) {
        room.on(LivekitClient.RoomEvent.TrackSubscribed, (track, pub_, participant) => {
            if (track.kind === LivekitClient.Track.Kind.Video) {
                if (participant.identity.startsWith('teacher-')) return;
                attachTrack(participant.identity, track);
                // Always send START command on TrackSubscribed.
                // This is critical for fast-restarting clients: when a client restarts
                // faster than LiveKit detects the disconnect, ParticipantConnected
                // does NOT fire, so the client never receives control_stream:start
                // and stays with STREAMING_ENABLED=false (only empty frames).
                // Sending START here ensures the client always gets the command.
                const deviceId = participant.identity.replace(/^student-/, '');
                if (activeStreams.has(deviceId) || prefetchStreams.has(deviceId)) {
                    sendStartCommand(participant.identity);
                }
            }
        });

        room.on(LivekitClient.RoomEvent.TrackUnsubscribed, (track, pub_, participant) => {
            if (track.kind === LivekitClient.Track.Kind.Video) {
                if (participant.identity.startsWith('teacher-')) return;
                detachTrack(participant.identity);
            }
        });

        room.on(LivekitClient.RoomEvent.ParticipantDisconnected, (participant) => {
            if (participant.identity.startsWith('teacher-')) return;
            detachTrack(participant.identity);
        });

        room.on(LivekitClient.RoomEvent.ParticipantConnected, (participant) => {
            const identity = participant.identity;
            if (!identity.startsWith('student-')) return;
            const deviceId = identity.replace(/^student-/, '');

            detachTrack(identity, 'Reconnecting...');
            if (activeStreams.has(deviceId) || prefetchStreams.has(deviceId)) {
                sendStartCommand(identity);
            }
        });

        // Detect when a track's stream becomes paused (network degraded / peer lost)
        // This fires faster than ParticipantDisconnected and lets us mask green frames early.
        room.on(LivekitClient.RoomEvent.TrackStreamStateChanged, (pub_, streamState, participant) => {
            if (pub_.kind !== LivekitClient.Track.Kind.Video) return;
            if (participant.identity.startsWith('teacher-')) return;

            if (streamState === LivekitClient.Track.StreamState.Paused) {
                detachTrack(participant.identity, 'Reconnecting...');
            } else if (streamState === LivekitClient.Track.StreamState.Active && pub_.track) {
                attachTrack(participant.identity, pub_.track);
            }
        });

        // Also handle track mute (some codecs fire mute before stream state change)
        room.on(LivekitClient.RoomEvent.TrackMuted, (pub_, participant) => {
            if (pub_.kind !== LivekitClient.Track.Kind.Video) return;
            if (participant.identity.startsWith('teacher-')) return;
            detachTrack(participant.identity, 'Reconnecting...');
        });

        room.on(LivekitClient.RoomEvent.TrackUnmuted, (pub_, participant) => {
            if (pub_.kind !== LivekitClient.Track.Kind.Video) return;
            if (participant.identity.startsWith('teacher-')) return;
            // Re-attach track to trigger fresh video element + green check
            if (pub_.track) {
                attachTrack(participant.identity, pub_.track);
            }
        });
    }

    async function connectToRoom(groupId) {
        if (rooms.has(groupId)) return; // Already connected

        const roomName = `group-${groupId}`;
        const tokenResp = await fetch('/admin/api/monitor/token', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ room: roomName }),
        });
        const tokenData = await tokenResp.json();
        if (tokenData.error) {
            console.error('Token error for room', roomName, ':', tokenData.error);
            return;
        }
        const room = new LivekitClient.Room({
            adaptiveStream: false,  // Disabled: prefetched cells are in off-screen buffer,
                                    // adaptiveStream would pause their tracks causing delays
            dynacast: true,
        });
        setupRoomEvents(room);
        await room.connect(LIVEKIT_URL, tokenData.token);
        rooms.set(groupId, room);

    }

    // ── Group Change ──
    window.onGroupChange = async function() {
        await cleanup();
        const groupId = document.getElementById('groupSelect').value;
        if (!groupId) {
            showEmpty(true);
            return;
        }

        // Fetch devices
        const url = groupId === '__all__'
            ? '/admin/api/monitor/devices'
            : `/admin/api/monitor/devices?group_id=${groupId}`;
        const resp = await fetch(url);
        const data = await resp.json();
        if (data.error || !data.devices || data.devices.length === 0) {
            allDevices = [];
            showEmpty(true);
            return;
        }

        allDevices = data.devices;
        currentPage = 0;
        showEmpty(false);

        // Build device → group mapping
        deviceGroupMap.clear();
        const groupIds = new Set();
        for (const d of allDevices) {
            if (d.group_id) {
                deviceGroupMap.set(d.device_id, d.group_id);
                groupIds.add(d.group_id);
            }
        }

        // Render device cells immediately. Room connection can be slow or fail
        // independently (for example while a Windows client is reconnecting).
        // Waiting for LiveKit here used to leave the grid completely blank until
        // the user changed the column count, which called renderPage separately.
        renderPage();

        // Connect to all required rooms without blocking the already-rendered grid.
        // Keep processing successful rooms even when one room fails to connect.
        let connectionResults;
        if (groupId === '__all__') {
            connectionResults = await Promise.allSettled(
                [...groupIds].map(gid => connectToRoom(gid))
            );
        } else {
            connectionResults = await Promise.allSettled([connectToRoom(groupId)]);
        }
        for (const result of connectionResults) {
            if (result.status === 'rejected') {
                console.error('Monitor room connection failed:', result.reason);
            }
        }

        // After room connection, send START_STREAM to participants already present.
        for (const [, room] of rooms) {
            for (const participant of room.remoteParticipants.values()) {
                const identity = participant.identity;
                if (!identity.startsWith('student-')) continue;
                const deviceId = identity.replace(/^student-/, '');
                if (activeStreams.has(deviceId)) {
                    sendStartCommand(identity);
                }
            }
        }
    };

    // ── Grid Change ──
    window.onGridChange = function() {
        const grid = document.getElementById('videoGrid');
        // グリッドサイズ変更時のみスムーズトランジションを適用
        grid.style.transition = 'grid-template-columns 0.3s ease';
        grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
        setTimeout(() => { grid.style.transition = ''; }, 350);
        currentPage = 0;
        renderPage();
    };

    // ── Pagination ──
    function getPerPage() { return gridSize * gridSize; }
    function getTotalPages() { return Math.max(1, Math.ceil(allDevices.length / getPerPage())); }

    window.prevPage = function() {
        if (currentPage > 0) { currentPage--; renderPage(); }
    };

    window.nextPage = function() {
        if (currentPage < getTotalPages() - 1) { currentPage++; renderPage(); }
        else if (autoScrolling) { currentPage = 0; renderPage(); } // wrap around
    };

    // ── Auto Scroll (fixed 7s interval) ──
    const SCROLL_INTERVAL_MS = 10000;

    window.toggleAutoScroll = function() {
        autoScrolling = !autoScrolling;
        const btn = document.getElementById('autoScrollBtn');
        const icon = document.getElementById('autoScrollIcon');
        if (autoScrolling) {
            // Pause icon
            icon.innerHTML = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>';
            btn.classList.remove('bg-slate-700/60', 'text-slate-300');
            btn.classList.add('text-white');
            // Start progress animation
            btn.classList.add('animating');
            startAutoScroll();
        } else {
            // Play icon
            icon.innerHTML = '<path d="M8 5v14l11-7z"/>';
            btn.classList.remove('text-white', 'animating');
            btn.classList.add('bg-slate-700/60', 'text-slate-300');
            stopAutoScroll();
        }
    };

    function startAutoScroll() {
        if (autoScrollTimer) { clearInterval(autoScrollTimer); autoScrollTimer = null; }
        const btn = document.getElementById('autoScrollBtn');
        autoScrollTimer = setInterval(() => {
            if (getTotalPages() > 1) {
                nextPage();
                // Restart animation cycle
                btn.classList.remove('animating');
                void btn.offsetWidth;
                btn.classList.add('animating');
            }
        }, SCROLL_INTERVAL_MS);
    }

    function stopAutoScroll() {
        if (autoScrollTimer) { clearInterval(autoScrollTimer); autoScrollTimer = null; }
    }

    // ── Cell Pool (DOM reuse for instant page switch) ──
    function getOrCreateCell(device) {
        if (cellPool.has(device.device_id)) {
            return cellPool.get(device.device_id);
        }

        const cell = document.createElement('div');
        cell.className = 'relative rounded-lg overflow-hidden border border-white/10 bg-slate-900/80 aspect-video';
        cell.id = `cell-${device.device_id}`;

        const video = document.createElement('video');
        video.id = `video-${device.device_id}`;
        video.autoplay = true;
        video.playsInline = true;
        video.muted = true;
        video.className = 'w-full h-full object-contain bg-slate-900';
        cell.appendChild(video);

        const label = document.createElement('div');
        label.className = 'absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent px-3 py-2';
        const onlineDot = device.online
            ? '<span class="inline-block w-2 h-2 rounded-full bg-green-400 mr-1"></span>'
            : '<span class="inline-block w-2 h-2 rounded-full bg-slate-600 mr-1"></span>';
        label.innerHTML = `<div class="flex items-center text-sm text-white/90">${onlineDot}${escapeHtml(device.hostname)}</div>`;
        cell.appendChild(label);

        const spinner = document.createElement('div');
        spinner.id = `spinner-${device.device_id}`;
        spinner.className = 'absolute inset-0 flex items-center justify-center bg-black/40';
        if (device.online) {
            // Online devices: hide spinner (video will show directly)
            spinner.classList.add('hidden');
        } else {
            spinner.innerHTML = '<p class="text-slate-500 text-sm">Offline</p>';
        }
        cell.appendChild(spinner);

        cellPool.set(device.device_id, cell);
        return cell;
    }

    // ── Render Page ──
    function renderPage() {
        const grid = document.getElementById('videoGrid');
        const perPage = getPerPage();
        const totalPages = getTotalPages();
        const start = currentPage * perPage;
        const pageDevices = allDevices.slice(start, start + perPage);

        // Update page indicator
        document.getElementById('pageIndicator').textContent =
            `${currentPage + 1} / ${totalPages} (${allDevices.length})`;

        // Keep offline cells visible in the grid, but never request their streams.
        const visibleIds = new Set(pageDevices.map(d => d.device_id));
        const visibleStreamIds = new Set(pageDevices.filter(d => d.online).map(d => d.device_id));

        // Collect online devices from the next page for prefetch.
        const prefetchPages = Math.min(1, totalPages - 1); // prefetch next page only
        const allPrefetchDevices = [];
        const allPrefetchIds = new Set();
        for (let p = 1; p <= prefetchPages; p++) {
            const pageIdx = (currentPage + p) % totalPages;
            const pStart = pageIdx * perPage;
            const pDevices = allDevices.slice(pStart, pStart + perPage);
            for (const d of pDevices) {
                if (d.online && !visibleIds.has(d.device_id)) {
                    allPrefetchDevices.push(d);
                    allPrefetchIds.add(d.device_id);
                }
            }
        }

        const keepStreamIds = new Set([...visibleStreamIds, ...allPrefetchIds]);
        const keepCellIds = new Set([...visibleIds, ...allPrefetchIds]);

        // 1. Remember which cells are currently in the grid (to move leftovers later)
        const oldGridChildren = new Set();
        for (const child of grid.children) {
            oldGridChildren.add(child);
        }

        // 2. Place current page cells into visible grid FIRST (reuse existing or create new)
        //    appendChild moves a node if already in DOM — no flicker because new content
        //    is painted before old cells are removed
        for (const device of pageDevices) {
            const cell = getOrCreateCell(device);
            grid.appendChild(cell); // moves from buffer→grid, srcObject preserved

            if (device.online) {
                startStream(device.device_id);
                // Resume playback after moving to visible container
                const video = cell.querySelector('video');
                if (video && video.srcObject) {
                    video.play().catch(() => {});
                }
            }
            // This cell is now in the grid, remove from old set
            oldGridChildren.delete(cell);
        }

        // 3. Move leftover old cells to off-screen buffer (AFTER new cells are in place)
        for (const child of oldGridChildren) {
            bufferContainer.appendChild(child);
        }

        // 4. Ensure prefetch page cells exist in buffer
        for (const device of allPrefetchDevices) {
            if (!cellPool.has(device.device_id)) {
                const cell = getOrCreateCell(device);
                bufferContainer.appendChild(cell);
            }
        }

        // 5. Prefetch next pages streams (all in parallel)
        const prefetchPromises = [];
        for (const id of allPrefetchIds) {
            if (!activeStreams.has(id) && !prefetchStreams.has(id)) {
                prefetchPromises.push(prefetchStream(id));
            }
        }
        if (prefetchPromises.length > 0) Promise.all(prefetchPromises).catch(() => {});

        // 6. Stop streams no longer needed (collect IDs first to avoid mutating during iteration)
        const toStopActive = [];
        for (const id of activeStreams) {
            if (!keepStreamIds.has(id)) toStopActive.push(id);
        }
        for (const id of toStopActive) stopStream(id);

        const toStopPrefetch = [];
        for (const id of prefetchStreams) {
            if (!keepStreamIds.has(id)) toStopPrefetch.push(id);
        }
        for (const id of toStopPrefetch) stopPrefetchStream(id);

        // 7. Remove cells no longer in current or prefetch pages from pool
        for (const [id, cell] of cellPool) {
            if (!keepCellIds.has(id)) {
                cell.remove();
                cellPool.delete(id);
            }
        }

        // 8. Attach existing tracks (for newly created cells)
        for (const [, room] of rooms) {
            for (const participant of room.remoteParticipants.values()) {
                if (!participant.identity.startsWith('student-')) continue;
                for (const pub_ of participant.videoTrackPublications.values()) {
                    if (pub_.track && pub_.isSubscribed) {
                        attachTrack(participant.identity, pub_.track);
                    }
                }
            }
        }

        if (autoScrolling) startAutoScroll();
    }

    // ── Data Channel Helpers ──
    function findRoomForIdentity(identity) {
        for (const [, room] of rooms) {
            if (room.remoteParticipants.has(identity)) return room;
        }
        // Fallback: search by device group
        const deviceId = identity.replace(/^(student|teacher)-/, '');
        const groupId = deviceGroupMap.get(deviceId);
        if (groupId && rooms.has(groupId)) return rooms.get(groupId);
        // Last resort: return first room
        if (rooms.size > 0) return rooms.values().next().value;
        return null;
    }

    async function sendStartCommand(identity) {
        const room = findRoomForIdentity(identity);
        if (!room || !room.localParticipant) return;
        const cmd = JSON.stringify({
            type: 'control_stream',
            action: 'start',
            target: identity,
            // Match the sender to the real LiveKit participant so an abnormal
            // browser disconnect automatically releases this requester.
            sender: room.localParticipant.identity,
        });
        try {
            const encoder = new TextEncoder();
            await room.localParticipant.publishData(
                encoder.encode(cmd),
                { reliable: true, topic: 'system', destinationIdentities: [identity] }
            );

        } catch (e) { console.error('publishData START failed:', e); }
    }

    async function sendStopCommand(identity) {
        const room = findRoomForIdentity(identity);
        if (!room || !room.localParticipant) return;
        const cmd = JSON.stringify({
            type: 'control_stream',
            action: 'stop',
            target: identity,
            sender: room.localParticipant.identity,
        });
        const encoder = new TextEncoder();
        await room.localParticipant.publishData(
            encoder.encode(cmd),
            { reliable: true, topic: 'system', destinationIdentities: [identity] }
        );
    }

    // ── Stream Control ──
    function cancelPendingStop(deviceId) {
        const timer = pendingStopTimers.get(deviceId);
        if (timer !== undefined) {
            clearTimeout(timer);
            pendingStopTimers.delete(deviceId);
        }
    }

    async function startStream(deviceId) {
        cancelPendingStop(deviceId);
        // If already prefetched, promote to active (no need to send START again)
        if (prefetchStreams.has(deviceId)) {
            prefetchStreams.delete(deviceId);
            activeStreams.add(deviceId);
            return;
        }
        if (activeStreams.has(deviceId)) return;
        activeStreams.add(deviceId);

        // Send control_stream AND server API in parallel (don't block each other)
        const identity = findParticipantIdentity(deviceId);
        const promises = [];
        if (identity) {
            promises.push(sendStartCommand(identity).catch(e => console.error('startStream data failed:', e)));
        }
        promises.push(
            fetch('/admin/api/monitor/start-stream', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ device_id: deviceId, viewer_id: viewerId }),
            }).catch(e => console.error('startStream API failed:', e))
        );
        await Promise.all(promises);
    }

    // Prefetch: start streaming but don't add to activeStreams
    async function prefetchStream(deviceId) {
        cancelPendingStop(deviceId);
        if (activeStreams.has(deviceId) || prefetchStreams.has(deviceId)) return;
        prefetchStreams.add(deviceId);

        // Send control_stream AND server API in parallel
        const identity = findParticipantIdentity(deviceId);
        const promises = [];
        if (identity) {
            promises.push(sendStartCommand(identity).catch(e => console.error('prefetch data failed:', e)));
        }
        promises.push(
            fetch('/admin/api/monitor/start-stream', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ device_id: deviceId, viewer_id: viewerId }),
            }).catch(e => console.error('prefetchStream API failed:', e))
        );
        await Promise.all(promises);
    }

    async function sendStopRequests(deviceId) {
        const identity = findParticipantIdentity(deviceId);
        const promises = [];
        if (identity) {
            promises.push(sendStopCommand(identity));
        }
        promises.push(
            fetch('/admin/api/monitor/stop-stream', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ device_id: deviceId, viewer_id: viewerId }),
            }).then(response => {
                if (!response.ok) throw new Error(`HTTP ${response.status}`);
            })
        );
        const results = await Promise.allSettled(promises);
        const succeeded = results.every(result => result.status === 'fulfilled');
        if (!succeeded) {
            console.error('STOP_STREAM delivery incomplete; retrying while hidden:', deviceId);
        }
        return succeeded;
    }

    function scheduleStop(deviceId, delayMs = STREAM_STOP_GRACE_MS) {
        if (activeStreams.has(deviceId) || prefetchStreams.has(deviceId)
                || pendingStopTimers.has(deviceId)) return;

        const timer = setTimeout(async () => {
            pendingStopTimers.delete(deviceId);
            if (activeStreams.has(deviceId) || prefetchStreams.has(deviceId)) return;
            const stopped = await sendStopRequests(deviceId);
            if (!stopped) scheduleStop(deviceId, 1000);
        }, delayMs);
        pendingStopTimers.set(deviceId, timer);
    }

    function stopStream(deviceId) {
        if (!activeStreams.has(deviceId)) return;
        activeStreams.delete(deviceId);

        // Keep it available briefly to absorb fast page changes.
        scheduleStop(deviceId);
    }

    // Stop a prefetched stream
    function stopPrefetchStream(deviceId) {
        if (!prefetchStreams.has(deviceId)) return;
        prefetchStreams.delete(deviceId);

        scheduleStop(deviceId);
    }

    // Find participant identity by device_id (searches across all rooms)
    function findParticipantIdentity(deviceId) {
        if (rooms.size === 0) return null;
        let fallback = null;
        for (const [, room] of rooms) {
            for (const [, participant] of room.remoteParticipants) {
                const id = participant.identity;
                if (id === `student-${deviceId}`) {
                    return id;
                }
                if (id === deviceId) {
                    fallback = id;
                }
            }
        }
        return fallback;
    }

    // ── Track Management ──
    function attachTrack(identity, track) {
        // identity is like "student-DEVICE_ID" or "teacher-DEVICE_ID"
        const deviceId = identity.replace(/^(student|teacher)-/, '');
        const cell = cellPool.get(deviceId);
        if (!cell) return;

        // Destroy old video element entirely to flush stale VP9 decoder state.
        const oldVideo = document.getElementById(`video-${deviceId}`);
        if (oldVideo) {
            oldVideo.srcObject = null;
            oldVideo.remove();
        }

        const video = document.createElement('video');
        video.id = `video-${deviceId}`;
        video.autoplay = true;
        video.playsInline = true;
        video.muted = true;
        video.className = 'w-full h-full object-contain bg-slate-900';
        cell.insertBefore(video, cell.firstChild);

        track.attach(video);

        // Hide the spinner overlay so video shows without darkening
        const spinner = document.getElementById(`spinner-${deviceId}`);
        if (spinner) spinner.classList.add('hidden');

        // Restore status dot to green (online)
        if (cell) {
            const dot = cell.querySelector('.bg-slate-600');
            if (dot) {
                dot.classList.remove('bg-slate-600');
                dot.classList.add('bg-green-400');
            }
        }
    }

    function detachTrack(identity, message = 'Offline') {
        const deviceId = identity.replace(/^(student|teacher)-/, '');
        const video = document.getElementById(`video-${deviceId}`);
        if (video) {
            // Clear srcObject so the bg-slate-900 background shows through
            video.srcObject = null;
            video.remove();
        }
        // Update status dot from green to grey (offline)
        const cell = cellPool.get(deviceId);
        if (cell) {
            const dot = cell.querySelector('.bg-green-400');
            if (dot) {
                dot.classList.remove('bg-green-400');
                dot.classList.add('bg-slate-600');
            }
        }
        const spinner = document.getElementById(`spinner-${deviceId}`);
        if (spinner) {
            spinner.classList.remove('hidden');
            spinner.innerHTML = `<p class="text-slate-500 text-sm">${escapeHtml(message)}</p>`;
        }
    }

    // ── Cleanup ──
    async function cleanup() {
        stopAutoScroll();
        // Cleanup is explicit: bypass the page-transition grace period.
        const requestedIds = new Set([
            ...activeStreams,
            ...prefetchStreams,
            ...pendingStopTimers.keys(),
        ]);
        activeStreams.clear();
        prefetchStreams.clear();
        for (const timer of pendingStopTimers.values()) clearTimeout(timer);
        pendingStopTimers.clear();
        await Promise.all([...requestedIds].map(id => sendStopRequests(id)));
        // Disconnect from all rooms
        for (const [, room] of rooms) {
            room.disconnect();
        }
        rooms.clear();
        deviceGroupMap.clear();
        // Clear cell pool and buffer
        for (const [, cell] of cellPool) {
            cell.remove();
        }
        cellPool.clear();
        document.getElementById('videoGrid').innerHTML = '';
        bufferContainer.innerHTML = '';
        document.getElementById('pageIndicator').textContent = '';
    }

    // ── Page Unload → sendBeacon ──
    window.addEventListener('beforeunload', () => {
        const requestedIds = new Set([
            ...activeStreams,
            ...prefetchStreams,
            ...pendingStopTimers.keys(),
        ]);
        for (const deviceId of requestedIds) {
            navigator.sendBeacon('/admin/api/monitor/stop-stream',
                new Blob([JSON.stringify({ device_id: deviceId, viewer_id: viewerId })],
                    { type: 'application/json' }));
        }
        for (const [, room] of rooms) room.disconnect();
    });

    // ── Helpers ──
    function showEmpty(show) {
        document.getElementById('emptyState').classList.toggle('hidden', !show);
        document.getElementById('videoGrid').classList.toggle('hidden', show);
    }

    function escapeHtml(s) {
        const d = document.createElement('div');
        d.textContent = s;
        return d.innerHTML;
    }
})();
</script>
{% endblock %}