@extends('frontend.main_master')

@section('title', 'Grabación de Clase - Astro Sabio')
@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; Mis Grabaciones de Clases</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">Registro de Eventos Sincronizado</h2>
                        <p class="small text-muted">
                            Sincronizado con el video: a continuación se listan todos los cambios de carta astral, tránsitos y anotaciones realizados durante la sesión.
                        </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) => 'Carta cambiada' + (p?.chart?.title ? ': ' + p.chart.title : ''),
                ajaxRefreshTransit: (p) => 'Fecha de tránsito actualizada' + (p?.newDate ? ': ' + p.newDate : ''),
                'draw.stroke': () => 'Dibujo realizado',
                'draw.clear': () => 'Dibujo borrado',
                'draw.undo': () => 'Deshacer trazo',
            };

            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 hay eventos registrados para esta clase.</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">No se pudo cargar el registro de eventos.</li>';
                console.error(err);
            });
        })();
    </script>
@endsection