@extends('layouts.app')
@section('head')
<link rel="stylesheet" href="{{ asset('js/vendor/rrweb-player.min.css') }}">
<style>
    #player-wrap { display: flex; justify-content: center; padding: 8px 0 24px; }
    .rec-back { margin: 0 0 12px; }
    #rec-msg { margin: 12px 0; color: var(--mo-muted); }
    .rec-chapters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
    .rec-chapter { font-size: 13px; padding: 4px 12px; min-height: 0; line-height: 1.6; box-sizing: border-box; }
    .rec-chapter.active { background: var(--mo-secondary); border-color: var(--mo-interactive); color: var(--mo-interactive); font-weight: 600; }
    .rec-chapters-label { font-size: 12px; color: var(--mo-muted); margin: 0 0 4px; }
    #rec-video-wrap { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
    #rec-video-status { font-size: 12px; color: var(--mo-muted); }
    /* While capturing, hide surrounding chrome so the .webm is mostly the player. */
    body.rec-capturing nav,
    body.rec-capturing .mo-page-header,
    body.rec-capturing .rec-back,
    body.rec-capturing .rec-chapters,
    body.rec-capturing .rec-chapters-label,
    body.rec-capturing #rec-video-wrap,
    body.rec-capturing #rec-msg { display: none !important; }
    body.rec-capturing #player-wrap { padding-top: 0; }
</style>
@stop
@section('content')
@include('includes.page_header', [
    'title'   => 'Session replay',
    'purpose' => 'Playback of one visit, one page at a time. Contains customer details — confidential.',
])
<a class="mo-btn rec-back" href="{{ url('/rec') }}">&larr; Back to recordings</a>
<div id="rec-msg">Loading replay…</div>
<p class="rec-chapters-label" id="rec-chapters-label" style="display:none;">Pages in this visit — click one to watch it:</p>
<div id="rec-chapters" class="rec-chapters" role="group" aria-label="Pages in this session"></div>
<div id="rec-video-wrap" style="display:none;">
    <button type="button" id="rec-video-btn" class="mo-btn mo-btn--edit">● Record video (.webm)</button>
    <span id="rec-video-status">Records the selected page in real time — best in Chrome/Edge.</span>
</div>
<div id="player-wrap"></div>
@stop
@section('js')
<script src="{{ asset('js/vendor/rrweb-player.min.js') }}"></script>
<script>
$(function () {
    var msg = document.getElementById('rec-msg');
    var wrap = document.getElementById('player-wrap');
    var chapters = document.getElementById('rec-chapters');
    var chaptersLabel = document.getElementById('rec-chapters-label');
    var videoWrap = document.getElementById('rec-video-wrap');
    var recBtn = document.getElementById('rec-video-btn');
    var recStatus = document.getElementById('rec-video-status');
    var Player = (window.rrwebPlayer && window.rrwebPlayer.default) ? window.rrwebPlayer.default : window.rrwebPlayer;
    var segments = [], cur = -1, player = null;
    var sessionShort = '{{ substr($session, 0, 8) }}';

    function shortUrl(u) {
        try { var x = new URL(u); return (x.pathname + (x.hash || '')) || u; } catch (e) { return u || '(page)'; }
    }
    function segDurationMs(seg) {
        var f = Infinity, l = 0;
        seg.events.forEach(function (e) { if (e && e.timestamp) { f = Math.min(f, e.timestamp); l = Math.max(l, e.timestamp); } });
        return (l > f) ? (l - f) : 0;
    }
    function play(i) {
        if (i < 0 || i >= segments.length) { return; }
        cur = i;
        wrap.innerHTML = '';
        var w = Math.min(wrap.clientWidth || 1000, 1200);
        player = new Player({
            target: wrap,
            props: { events: segments[i].events, width: w, height: Math.round(w * 0.62), autoPlay: true, showController: true }
        });
        try { player.addEventListener('finish', function () { if (cur + 1 < segments.length) { play(cur + 1); } }); } catch (e) {}
        Array.prototype.forEach.call(chapters.children, function (el, idx) { el.classList.toggle('active', idx === i); });
    }

    // ---- video capture (browser screen/tab capture -> .webm) ----
    recBtn.onclick = async function () {
        if (cur < 0 || !segments[cur]) { return; }
        if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
            recStatus.textContent = 'This browser cannot capture video — use Chrome or Edge on desktop.';
            return;
        }
        var stream;
        try {
            stream = await navigator.mediaDevices.getDisplayMedia({ video: { frameRate: 30 }, audio: false, preferCurrentTab: true });
        } catch (e) {
            recStatus.textContent = 'Capture cancelled.';
            return;
        }
        var mime = ['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/webm']
            .filter(function (m) { return window.MediaRecorder && MediaRecorder.isTypeSupported(m); })[0] || 'video/webm';
        var chunks = [];
        var mr = new MediaRecorder(stream, { mimeType: mime });
        mr.ondataavailable = function (e) { if (e.data && e.data.size) { chunks.push(e.data); } };
        mr.onstop = function () {
            stream.getTracks().forEach(function (t) { t.stop(); });
            document.body.classList.remove('rec-capturing');
            recBtn.disabled = false;
            if (!chunks.length) { recStatus.textContent = 'Nothing captured — please try again.'; return; }
            var blob = new Blob(chunks, { type: 'video/webm' });
            var a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = 'recording-' + sessionShort + '-p' + (cur + 1) + '.webm';
            document.body.appendChild(a); a.click(); a.remove();
            setTimeout(function () { URL.revokeObjectURL(a.href); }, 8000);
            recStatus.textContent = 'Saved ' + (blob.size / 1048576).toFixed(1) + ' MB as .webm.';
        };
        // If the user stops sharing early, finalise what we have.
        var vtrack = stream.getVideoTracks()[0];
        if (vtrack) { vtrack.addEventListener('ended', function () { if (mr.state !== 'inactive') { mr.stop(); } }); }

        recBtn.disabled = true;
        document.body.classList.add('rec-capturing');
        recStatus.textContent = 'Recording this page in real time — keep this tab focused…';
        play(cur);                         // restart the selected page from the beginning
        mr.start();
        var stopAfter = Math.max(1500, segDurationMs(segments[cur]) + 1200);
        setTimeout(function () { if (mr.state !== 'inactive') { mr.stop(); } }, stopAfter);
    };

    fetch(baseUrl + '/rec/{{ $session }}/data', { credentials: 'same-origin', headers: { Accept: 'application/json' } })
        .then(function (r) { return r.json(); })
        .then(function (d) {
            segments = (d && d.segments) ? d.segments.filter(function (s) { return s.events && s.events.length > 1; }) : [];
            if (!segments.length) { msg.textContent = 'This recording has no replayable pages yet.'; return; }
            msg.style.display = 'none';
            chaptersLabel.style.display = '';
            videoWrap.style.display = '';
            segments.forEach(function (s, i) {
                var b = document.createElement('button');
                b.type = 'button';
                b.className = 'mo-btn rec-chapter';
                b.textContent = (i + 1) + '. ' + shortUrl(s.url || '');
                b.onclick = function () { play(i); };
                chapters.appendChild(b);
            });
            play(0);
        })
        .catch(function () { msg.textContent = 'Could not load this replay.'; });
});
</script>
@stop