@extends('frontend.main_master')

@section('title', 'Class Recording - Astro Wise')
@section('body-class', 'recordings-show-body')

@section('content')
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-9">
                <a href="{{ route('panel.recordings.index') }}" class="d-inline-block mb-3 text-decoration-none">&larr; My Class Recordings</a>

                <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
                    <video id="recordingVideo" controls style="width:100%; max-height:70vh; background:#000;"
                           src="{{ $videoUrl }}"></video>
                </div>

                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body p-4">
                        <h2 class="h5 mb-3">Synchronized Event Log</h2>
                        <p class="small text-muted">
                            Synchronized with the video timeline: chart switches, transit updates, and annotations made during the live class are listed below in real time.
                        </p>
                        <ul id="eventLog" class="list-group list-group-flush"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        (function () {
            const eventsUrl = @json($eventsUrl);
            const video = document.getElementById('recordingVideo');
            const logEl = document.getElementById('eventLog');
            let events = [];
            let shownCount = 0;

            const LABELS = {
                setActive: (p) => 'Chart switched' + (p?.chart?.title ? ': ' + p.chart.title : ''),
                ajaxRefreshTransit: (p) => 'Transit date updated' + (p?.newDate ? ': ' + p.newDate : ''),
                'draw.stroke': () => 'Drawing stroke added',
                'draw.clear': () => 'Whiteboard cleared',
                'draw.undo': () => 'Drawing stroke undone',
            };

            function formatMs(ms) {
                const totalSec = Math.floor(ms / 1000);
                const m = Math.floor(totalSec / 60).toString().padStart(2, '0');
                const s = (totalSec % 60).toString().padStart(2, '0');
                return m + ':' + s;
            }

            function renderUpTo(currentMs) {
                while (shownCount < events.length && events[shownCount].at <= currentMs) {
                    const e = events[shownCount];
                    const label = (LABELS[e.type] ? LABELS[e.type](e.payload) : e.type);
                    const li = document.createElement('li');
                    li.className = 'list-group-item d-flex justify-content-between';
                    li.innerHTML = '<span>' + label + '</span><span class="text-muted small">' + formatMs(e.at) + '</span>';
                    logEl.appendChild(li);
                    shownCount++;
                }
            }

            fetch(eventsUrl).then((r) => r.json()).then((data) => {
                events = data.events || [];
                if (!events.length) {
                    logEl.innerHTML = '<li class="list-group-item text-muted">No recorded events for this class.</li>';
                    return;
                }
                video.addEventListener('timeupdate', () => renderUpTo(video.currentTime * 1000));
                video.addEventListener('seeking', () => {
                    shownCount = 0;
                    logEl.innerHTML = '';
                    renderUpTo(video.currentTime * 1000);
                });
            }).catch((err) => {
                logEl.innerHTML = '<li class="list-group-item text-danger">Could not load event log.</li>';
                console.error(err);
            });
        })();
    </script>
@endsection