@extends('layouts.app')

@section('header')
    <div class="row g-2 align-items-center">
        <div class="col">
            <div class="page-pretitle">Monitoring</div>
            <h2 class="page-title">Live Screens</h2>
        </div>
    </div>
@endsection

@section('content')
{{-- Toolbar --}}
<div class="card mb-3">
    <div class="card-body">
        <div class="row g-2 align-items-center">
            <div class="col-md">
                <div class="input-icon">
                    <span class="input-icon-addon"><i class="ti ti-search"></i></span>
                    <input type="text" class="form-control" id="ls-search" placeholder="Search employees…">
                </div>
            </div>
            <div class="col-auto">
                {{-- No surrounding form: the grid fetches its own JSON, so this
                     just re-runs loadPage() with a ?status= of its own. --}}
                <x-employee-status-filter id="ls-status" :submit="false" label="" label-class="d-none" />
            </div>
            <div class="col-auto text-secondary small d-flex align-items-center gap-3">
                <span id="ls-counts"></span>
                <span class="status status-green"><span class="status-dot status-dot-animated"></span> auto-refresh</span>
            </div>
        </div>
    </div>
</div>

{{-- Employee grid — 3×2 --}}
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3" id="ls-grid">
    <div class="col-12 text-center text-secondary py-5">Loading…</div>
</div>

{{-- Pagination --}}
<div class="align-items-center mt-3" id="ls-pager" style="display:none">
    <span class="text-secondary small" id="ls-range"></span>
    <div class="ms-auto btn-list">
        <button class="btn btn-sm" id="ls-prev"><i class="ti ti-chevron-left"></i> Prev</button>
        <span class="btn btn-sm disabled" id="ls-page">1 / 1</span>
        <button class="btn btn-sm" id="ls-next">Next <i class="ti ti-chevron-right"></i></button>
    </div>
</div>

{{-- Viewer overlay (self-managed — no Bootstrap/Alpine dependency, so it always opens) --}}
<div id="ls-viewer" class="ls-overlay" style="display:none" aria-hidden="true">
    <div class="ls-backdrop" data-ls-close></div>
    <div class="ls-dialog card">
        <div class="card-header">
            <div class="d-flex align-items-center gap-2">
                <h3 class="card-title mb-0" id="ls-view-name"></h3>
                <span class="badge bg-red text-white"><span class="status-dot status-dot-animated"></span> LIVE</span>
                <span class="text-secondary small" id="ls-view-email"></span>
            </div>
            <button type="button" class="btn-close ms-auto" aria-label="Close" data-ls-close></button>
        </div>
        <div class="card-body p-0">
            {{-- Bootstrap's `.ratio > *` forces every DIRECT child to 100%×100%,
                 so anything meant to be a small overlay (the stale pill) has to
                 sit outside the ratio box or it covers the whole frame. --}}
            <div class="position-relative bg-dark">
                <div class="ratio ratio-16x9">
                    <img id="ls-frame" alt="live screen" class="w-100 h-100" style="object-fit:contain;display:none">
                    <div id="ls-waiting" class="d-flex flex-column align-items-center justify-content-center text-white-50 gap-2">
                        <div class="spinner-border"></div>
                        <div class="small">Waiting for frames…</div>
                    </div>
                </div>
                <div id="ls-stale" class="ls-pill position-absolute bottom-0 start-0 m-2 px-2 py-1 rounded text-white small" style="display:none">
                    <span class="status-dot status-dot-animated bg-yellow me-1"></span>Reconnecting…
                </div>
            </div>
        </div>
        <div class="card-footer d-flex align-items-center">
            <span class="text-secondary small me-auto">Capture stops when you close this window.</span>
            <button class="btn" data-ls-close>Close</button>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .ls-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
    .ls-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
    .ls-dialog { position: relative; z-index: 1; width: 100%; max-width: 1140px; margin: 0; box-shadow: 0 1rem 3rem rgba(0,0,0,.4); }
    /* Overlay pill — sized by its own content, never by .ratio > * */
    .ls-pill { background: rgba(0,0,0,.72); width: auto; height: auto; z-index: 2; }
    .ls-thumb { background: #1a1d21; cursor: pointer; }
    .ls-thumb img { object-fit: contain; }
    .ls-card-offline { opacity: .6; }
    .ls-card-offline .ls-thumb { cursor: default; }
    .ls-task { min-height: 1.25rem; }
</style>
@endpush

@push('scripts')
<script>
(function () {
    const THUMB_MS  = 15000;  // grid thumbnail refresh — matches the server's preview gate
    const FRAME_MS  = 2000;   // full viewer: pull one frame every 2 seconds
    const LIST_MS   = 15000;  // refresh the card metadata alongside the thumbnails
    const PING_MS   = 10000;  // keep the full-rate live request alive
    const STALE_MS  = 6000;   // no frame for this long ⇒ "Reconnecting…"

    const CSRF = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
    const dataUrl    = @json(route('live-screens.data'));
    const previewUrl = @json(route('live-screens.preview'));

    const el = {
        search:  document.getElementById('ls-search'),
        status:  document.getElementById('ls-status'),
        counts:  document.getElementById('ls-counts'),
        grid:    document.getElementById('ls-grid'),
        pager:   document.getElementById('ls-pager'),
        range:   document.getElementById('ls-range'),
        prev:    document.getElementById('ls-prev'),
        next:    document.getElementById('ls-next'),
        pageLbl: document.getElementById('ls-page'),
        overlay: document.getElementById('ls-viewer'),
        name:    document.getElementById('ls-view-name'),
        email:   document.getElementById('ls-view-email'),
        frame:   document.getElementById('ls-frame'),
        waiting: document.getElementById('ls-waiting'),
        stale:   document.getElementById('ls-stale'),
    };

    const grid   = { page: 1, lastPage: 1, rows: [], keys: '' };
    const viewer = { id: null, device: null, screen: null, frameTimer: null, pingTimer: null, lastAt: 0, busy: false, etag: null };

    // Hoist the overlay to <body> so its fixed position / z-index aren't
    // trapped inside the page container (otherwise the sidebar paints over it).
    if (el.overlay.parentElement !== document.body) {
        document.body.appendChild(el.overlay);
    }

    // ── helpers ───────────────────────────────────────────────────────────
    const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) =>
        ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));

    function initials(name) {
        return (name || '?').split(' ').filter(Boolean).map(w => w[0]).join('').slice(0, 2).toUpperCase();
    }
    function since(ts) {
        if (!ts) return 'never';
        const s = Math.max(0, Math.floor(Date.now() / 1000) - ts);
        if (s < 60) return s + 's ago';
        if (s < 3600) return Math.floor(s / 60) + 'm ago';
        return Math.floor(s / 3600) + 'h ago';
    }
    function post(path) {
        return fetch(path, { method: 'POST', headers: { 'X-CSRF-TOKEN': CSRF, Accept: 'application/json' } })
            .catch(() => {});
    }
    function postJson(path, body) {
        return fetch(path, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', Accept: 'application/json' },
            body: JSON.stringify(body),
        }).catch(() => {});
    }

    // A feed is /live-screens/{user}/{device}/{screen}/…
    function feedPath(id, device, screen, action) {
        return `/live-screens/${id}/${encodeURIComponent(device)}/${screen}/${action}`;
    }

    // ── grid ──────────────────────────────────────────────────────────────
    async function loadPage() {
        const url = new URL(dataUrl, window.location.origin);
        const q = el.search.value.trim();
        if (q) url.searchParams.set('q', q);
        url.searchParams.set('status', el.status.value);
        url.searchParams.set('page', grid.page);

        try {
            const res = await fetch(url, { headers: { Accept: 'application/json' } });
            const json = await res.json();
            grid.rows = json.data ?? [];
            grid.page = json.meta?.page ?? 1;
            grid.lastPage = json.meta?.last_page ?? 1;
            render(json.meta ?? {});
            requestPreviews();
            refreshThumbs();
        } catch (_) { /* transient — keep the last render */ }
    }

    function render(meta) {
        const counts = meta.counts ?? {};
        const active = (counts.live ?? 0) + (counts.preview ?? 0) + (counts.tracking ?? 0);
        el.counts.textContent = `${active} active · ${counts.offline ?? 0} offline`;

        const total = meta.total ?? grid.rows.length;
        const from = total === 0 ? 0 : ((grid.page - 1) * (meta.per_page ?? 6)) + 1;
        el.range.textContent = `${from}–${from + grid.rows.length - 1} of ${total}`;
        el.pageLbl.textContent = `${grid.page} / ${grid.lastPage}`;
        el.prev.disabled = grid.page <= 1;
        el.next.disabled = grid.page >= grid.lastPage;
        el.pager.style.display = total > 0 ? 'flex' : 'none';

        if (!grid.rows.length) {
            el.grid.innerHTML = '<div class="col-12 text-center text-secondary py-5">No employees found.</div>';
            grid.keys = '';
            return;
        }

        // Rebuild only when the card set actually changes — otherwise patch in
        // place, so a metadata refresh never flickers the thumbnails.
        const keys = grid.rows.map(u => u.id).join(',');
        if (keys !== grid.keys) {
            grid.keys = keys;
            // innerHTML drops the old <img>s on the floor — release their blob
            // URLs first, or paging back and forth leaks a frame each time.
            el.grid.querySelectorAll('[data-thumb]').forEach(img => {
                if (img.dataset.objurl) URL.revokeObjectURL(img.dataset.objurl);
            });
            el.grid.innerHTML = grid.rows.map(cardHtml).join('');
        } else {
            grid.rows.forEach(patchCard);
        }
    }

    function cardHtml(u) {
        const offline = u.status === 'offline';
        return `<div class="col" data-card="${u.id}">
            <div class="card ${offline ? 'ls-card-offline' : ''}">
                <div class="ratio ratio-16x9 ls-thumb position-relative"
                     ${offline ? '' : `data-open="${u.id}"`}>
                    <img alt="" class="w-100 h-100" data-thumb style="display:none">
                    <div class="d-flex flex-column align-items-center justify-content-center text-white-50 gap-2" data-thumb-idle>
                        ${idleHtml(u)}
                    </div>
                </div>
                <div class="card-body p-2">
                    <div class="d-flex align-items-center mb-1">
                        <span class="avatar avatar-sm me-2 rounded">${esc(initials(u.name))}</span>
                        <div style="min-width:0">
                            <div class="text-truncate" data-name>${esc(u.name)}</div>
                            <div class="text-secondary small text-truncate" data-sub>${subHtml(u)}</div>
                        </div>
                    </div>
                    <div class="text-secondary small text-truncate ls-task mb-2" data-task>${taskHtml(u)}</div>
                    <div class="btn-list" data-buttons>${feedButtons(u)}</div>
                </div>
            </div>
        </div>`;
    }

    // What fills the thumbnail before a frame arrives. This is the only place
    // the card says anything about status now that the corner badge is gone, so
    // patchCard has to keep it current too.
    function idleHtml(u) {
        return u.status === 'offline'
            ? '<i class="ti ti-plug-connected-x fs-1"></i><div class="small">Offline</div>'
            : '<div class="spinner-border spinner-border-sm"></div><div class="small">Waiting for preview…</div>';
    }

    // Job title (or email) plus a leaver badge. Only the All and Inactive views
    // can show one — under the default Active filter it never renders.
    function subHtml(u) {
        const badge = u.employment === 'inactive'
            ? '<span class="badge bg-secondary-lt me-1">Inactive</span>'
            : '';
        return badge + esc(u.designation || u.email);
    }

    function taskHtml(u) {
        if (u.task) return `<i class="ti ti-clock-play me-1"></i>${esc(u.task)}`;
        if (u.status === 'offline') return `<i class="ti ti-clock-off me-1"></i>Last seen ${esc(since(u.last_seen))}`;
        return `<i class="ti ti-clock-off me-1"></i>No active task`;
    }

    // Patch the mutable bits of an already-rendered card.
    function patchCard(u) {
        const card = el.grid.querySelector(`[data-card="${u.id}"]`);
        if (!card) return;
        card.querySelector('[data-thumb-idle]').innerHTML = idleHtml(u);
        card.querySelector('[data-sub]').innerHTML = subHtml(u);
        card.querySelector('[data-task]').innerHTML = taskHtml(u);
        card.querySelector('[data-buttons]').innerHTML = feedButtons(u);
        card.querySelector('.card').classList.toggle('ls-card-offline', u.status === 'offline');

        // An employee who came online mid-page keeps the same card, so the
        // thumbnail has to be made clickable here rather than on a rebuild.
        const thumb = card.querySelector('.ls-thumb');
        if (u.status === 'offline') thumb.removeAttribute('data-open');
        else thumb.setAttribute('data-open', u.id);
    }

    // One "Live {n}" button per feed (a device+monitor pair). With a single
    // machine the label is just the monitor number; with several machines each
    // button is prefixed with the device name to disambiguate.
    function feedButtons(u) {
        const devices = u.devices || [];
        const feeds = [];
        devices.forEach(d => (d.screens || []).forEach(s =>
            feeds.push({ device: d.device_id, deviceLabel: d.label, screen: s.screen, live: s.live })));

        if (!feeds.length) {
            return `<button class="btn btn-sm btn-secondary disabled" disabled>
                        <i class="ti ti-player-play me-1"></i> Live</button>`;
        }
        const multiDevice = devices.length > 1;
        return feeds.map(f => {
            const text = multiDevice ? `${esc(f.deviceLabel)} · ${f.screen}` : `Live ${f.screen}`;
            return `<button class="btn btn-sm ${f.live ? 'btn-red text-white' : 'btn-primary'}"
                        data-watch="${u.id}" data-device="${esc(f.device)}" data-screen="${f.screen}"
                        data-name="${esc(u.name)}" data-email="${esc(u.email)}" data-feedlabel="${esc(text)}">
                        <i class="ti ti-player-play me-1"></i> ${esc(text)}</button>`;
        }).join('');
    }

    // ── thumbnails ────────────────────────────────────────────────────────
    // Tell the server which feeds are on screen, in one batched call. The
    // server rate-gates those feeds into the `watch` list the desktop agent
    // already polls, so each one yields roughly a frame every 15 s without the
    // agent knowing a grid exists. Feeds that page away expire on their own TTL.
    function requestPreviews() {
        const feeds = grid.rows
            .filter(u => u.thumb)
            .map(u => ({ user: u.id, device: u.thumb.device, screen: u.thumb.screen }));
        if (feeds.length) postJson(previewUrl, { feeds });
    }

    // Pull each visible thumbnail. No cache-buster: the frame endpoint ETags on
    // capture time, so a poll that lands between captures costs an empty 304 and
    // we skip the decode entirely.
    function refreshThumbs() {
        grid.rows.filter(u => u.thumb).forEach(async (u) => {
            const card = el.grid.querySelector(`[data-card="${u.id}"]`);
            if (!card) return;
            const img  = card.querySelector('[data-thumb]');
            const idle = card.querySelector('[data-thumb-idle]');

            try {
                const res = await fetch(feedPath(u.id, u.thumb.device, u.thumb.screen, 'frame'),
                                        { headers: { Accept: 'image/jpeg' } });
                if (res.status !== 200) return;                 // 204 ⇒ no frame yet

                const tag = res.headers.get('ETag');
                if (tag && tag === img.dataset.etag) return;    // unchanged since last pull
                if (tag) img.dataset.etag = tag;

                const url = URL.createObjectURL(await res.blob());
                const old = img.dataset.objurl;
                img.src = url;
                img.dataset.objurl = url;
                img.style.display = '';
                idle.style.display = 'none';
                if (old) URL.revokeObjectURL(old);
            } catch (_) { /* keep the last thumbnail */ }
        });
    }

    // Clicking a thumbnail opens that user's first feed at full rate.
    el.grid.addEventListener('click', (e) => {
        const btn = e.target.closest('[data-watch]');
        if (btn && !btn.disabled) {
            openViewer(btn.dataset.watch, btn.dataset.device, btn.dataset.screen,
                       btn.dataset.name, btn.dataset.email, btn.dataset.feedlabel);
            return;
        }
        const thumb = e.target.closest('[data-open]');
        if (!thumb) return;
        const first = el.grid.querySelector(`[data-card="${thumb.dataset.open}"] [data-watch]`);
        if (first && !first.disabled) first.click();
    });

    // ── pagination ────────────────────────────────────────────────────────
    el.prev.addEventListener('click', () => { if (grid.page > 1) { grid.page--; loadPage(); } });
    el.next.addEventListener('click', () => { if (grid.page < grid.lastPage) { grid.page++; loadPage(); } });

    // ── full viewer ───────────────────────────────────────────────────────
    function viewerPath(action) {
        return feedPath(viewer.id, viewer.device, viewer.screen, action);
    }

    function openViewer(id, device, screen, name, email, feedLabel) {
        viewer.id = id;
        viewer.device = device;
        viewer.screen = screen;
        viewer.lastAt = 0;
        viewer.etag = null;
        el.name.textContent = feedLabel ? `${name || ''} · ${feedLabel}` : (name || '');
        el.email.textContent = email || '';
        el.frame.style.display = 'none';
        el.frame.removeAttribute('src');
        el.waiting.style.display = '';
        el.stale.style.display = 'none';

        el.overlay.style.display = 'flex';
        el.overlay.setAttribute('aria-hidden', 'false');
        document.body.classList.add('overflow-hidden');

        post(viewerPath('start'));
        pullFrame();
        viewer.frameTimer = setInterval(pullFrame, FRAME_MS);
        viewer.pingTimer  = setInterval(() => post(viewerPath('ping')), PING_MS);
    }

    async function pullFrame() {
        if (!viewer.id || viewer.busy) return;
        viewer.busy = true;
        try {
            const res = await fetch(viewerPath('frame'), { headers: { Accept: 'image/jpeg' } });
            if (res.status === 200) {
                const tag = res.headers.get('ETag');
                if (!tag || tag !== viewer.etag) {
                    viewer.etag = tag;
                    const url = URL.createObjectURL(await res.blob());
                    const old = el.frame.dataset.objurl;
                    el.frame.src = url;
                    el.frame.style.display = '';
                    el.waiting.style.display = 'none';
                    el.frame.dataset.objurl = url;
                    if (old) URL.revokeObjectURL(old);
                    viewer.lastAt = Date.now();
                }
            }
            // 204 ⇒ no frame yet; keep last frame on screen.
        } catch (_) { /* keep last frame */ }
        finally { viewer.busy = false; }

        el.stale.style.display = (viewer.lastAt && (Date.now() - viewer.lastAt) > STALE_MS) ? '' : 'none';
    }

    function closeViewer() {
        if (!viewer.id) return;
        post(viewerPath('stop'));
        clearInterval(viewer.frameTimer);
        clearInterval(viewer.pingTimer);
        const old = el.frame.dataset.objurl;
        if (old) { URL.revokeObjectURL(old); delete el.frame.dataset.objurl; }
        viewer.id = null;
        viewer.device = null;
        viewer.screen = null;

        el.overlay.style.display = 'none';
        el.overlay.setAttribute('aria-hidden', 'true');
        document.body.classList.remove('overflow-hidden');
    }

    // Close on the ✕ / Close buttons and on backdrop click.
    el.overlay.addEventListener('click', (e) => {
        if (e.target.closest('[data-ls-close]')) closeViewer();
    });
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && viewer.id) closeViewer();
    });

    // ── boot ──────────────────────────────────────────────────────────────
    let searchDebounce = null;
    el.search.addEventListener('input', () => {
        clearTimeout(searchDebounce);
        grid.page = 1;
        searchDebounce = setTimeout(loadPage, 400);
    });

    // The filtered set is a different length, so page 3 of "Active" is rarely
    // page 3 of "All" — start over rather than land somewhere arbitrary.
    el.status.addEventListener('change', () => {
        grid.page = 1;
        loadPage();
    });

    // A hidden tab shouldn't hold six employees' screens in capture: stop
    // renewing previews and the agents fall back to a bare heartbeat within one
    // PREVIEW_TTL.
    let timer = null;
    function startPolling() {
        stopPolling();
        timer = setInterval(loadPage, LIST_MS);
    }
    function stopPolling() {
        if (timer) { clearInterval(timer); timer = null; }
    }
    document.addEventListener('visibilitychange', () => {
        if (document.hidden) { stopPolling(); } else { loadPage(); startPolling(); }
    });

    loadPage();
    startPolling();
})();
</script>
@endpush