@extends('layouts.app')

@section('title', 'Contenido')

@push('styles')
    <style>
        /* Solo para esta vista, quitar el padding del contenedor */
        .container-xxl.container-p-y {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        .badge-sm {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid px-0">
        <!-- Header con información del curso -->
        <div class="row g-0 mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <a href="{{ route('colaborador.mis-cursos') }}" class="btn btn-sm btn-outline-secondary mb-2">
                                    <i class="fas fa-arrow-left"></i> Volver al Dashboard
                                </a>
                                <h4 class="mb-1">{{ $curso->nombre }}</h4>
                            </div>
                            <div class="text-end">
                                <h6 class="mb-1">Progreso del Curso</h6>
                                <div class="progress" style="width: 200px; height: 25px;">
                                    <div id="barra-progreso-contenido" class="progress-bar {{ $porcentajeContenidoActual >= 100 ? 'bg-success' : 'bg-info' }}" role="progressbar" style="width: {{ $porcentajeContenidoActual }}%">
                                        <span id="texto-progreso-contenido">{{ number_format($porcentajeContenidoActual, 0) }}%</span>
                                    </div>
                                </div>
                                <small class="text-muted">Página {{ $ultimaPaginaVista }} de {{ $contenidoActual->total_paginas ?? 0 }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Columna del contenido principal -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                        @if($contenidoActual)
                            <h5 class="card-title mb-3">
                                @if($contenidoActual->tipo_archivo === 'pdf')
                                    <i class="fas fa-file-pdf text-danger me-2"></i>
                                @else
                                    <i class="fas fa-video text-primary me-2"></i>
                                @endif
                                <span class="badge bg-primary me-2">{{ $contenidoActual->nombre_archivo }}</span>
                            </h5>
                            <hr>
                            <!-- Visor de contenido -->
                            <div class="contenido-visor">
                                @if($contenidoActual->tipo_archivo === 'pdf')
                                    <div class="pdf-container" style="height: 600px; display: flex; flex-direction: column;">
                                        <!-- Controles arriba -->
                                        <div style="text-align: center; padding: 10px; background: #f5f5f5; border-bottom: 1px solid #ddd;">
                                            <button type="button" id="zoom-out" class="btn btn-sm btn-secondary"><i class="fa-solid fa-magnifying-glass-minus"></i></button>
                                            <button type="button" id="zoom-in" class="btn btn-sm btn-secondary"><i class="fa-solid fa-magnifying-glass-plus"></i></button>
                                            <button type="button" id="prev-page" class="btn btn-sm btn-secondary">← Anterior</button>
                                            <span style="margin: 0 15px;">
                                                Página <span id="page-num"></span> de <span id="page-count"></span>
                                            </span>
                                            <button type="button" id="next-page" class="btn btn-sm btn-secondary">Siguiente →</button>
                                        </div>

                                        <!-- Canvas del PDF -->
                                        <div id="pdf-viewer" style="flex: 1; overflow: auto; background: #525659; padding: 20px;">
                                            <canvas id="pdf-canvas"></canvas>
                                        </div>
                                    </div>
                                @elseif($contenidoActual->tipo_archivo === 'video')
                                    <div class="video-container">
                                        <iframe id="videoFrame"
                                                src="{{ $contenidoActual->ruta_archivo }}"
                                                width="100%"
                                                height="500px"
                                                frameborder="0"
                                                scrolling="no"
                                                allowfullscreen
                                                title="Video del curso">
                                        </iframe>
                                    </div>
                                    <div class="mt-3 p-3 bg-light rounded">
                                        <div class="row align-items-center">
                                            <div class="col-md-8">
                                                <h6 class="mb-2">
                                                    <i class="fas fa-clock text-primary"></i>
                                                    Progreso del Video
                                                </h6>
                                                <p class="mb-1">
                                                    <strong>Tiempo visto:</strong>
                                                    <span id="tiempo-visto-minutos">0</span> min de
                                                    <span id="tiempo-total-minutos">{{ $asignacion->duracion_horas * 60 }}</span> min
                                                </p>
                                                <small class="text-muted">
                                                    El video se marca completo al alcanzar el 100% del tiempo asignado
                                                </small>
                                            </div>
                                            <div class="col-md-4 text-end">
                                                <div class="progress" style="height: 25px;">
                                                    <div id="barra-progreso-video"
                                                        class="progress-bar bg-info"
                                                        role="progressbar"
                                                        style="width: {{ $porcentajeContenidoActual }}%">
                                                        <span id="texto-progreso-video">{{ number_format($porcentajeContenidoActual, 0) }}%</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="alert alert-danger mt-3" style="border-left: 4px solid #dc3545;">
                                        <i class="fas fa-exclamation-triangle"></i>
                                        <strong>Importante:</strong> Si necesitas pausar o cerrar el navegador,
                                        anota en qué minuto del video vas, para poder retomar fácilmente cuando regreses.
                                        El sistema guarda tu tiempo acumulado, pero el video puede reiniciar desde el inicio.
                                    </div>
                                @endif
                            </div>

                            <!-- Botón de completar -->
                            <div class="mt-4 text-center">
                                @if(!in_array($contenidoActual->id, $progresosIds))
                                    <button id="btnCompletarContenido"
                                            class="btn btn-success btn-lg"
                                            data-contenido-id="{{ $contenidoActual->id }}">
                                        <i class="fas fa-check-circle"></i> Marcar como Completado
                                    </button>
                                @else
                                    <div class="alert alert-success">
                                        <i class="fas fa-check-circle"></i> Ya completaste este contenido
                                    </div>
                                @endif
                            </div>
                        @else
                            <div class="alert alert-info text-center">
                                <h5>¡Felicitaciones!</h5>
                                <p>Has completado todo el contenido de este curso.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Columna del índice de contenidos -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header bg-primary ">
                        <h6 class="mb-0 text-white">Contenido del Curso</h6>
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach($curso->contenidos as $contenido)
                            <div class="list-group-item {{ $contenidoActual && $contenidoActual->id === $contenido->id ? 'active' : '' }}">
                                <div class="d-flex align-items-start">
                                    <div class="me-3">
                                        @if(in_array($contenido->id, $progresosIds))
                                            <i class="fas fa-check-circle text-success" style="font-size: 1.5rem;"></i>
                                        @elseif($contenidoActual && $contenidoActual->id === $contenido->id)
                                            <i class="fas fa-play-circle text-white" style="font-size: 1.5rem;"></i>
                                        @else
                                            <i class="fas fa-lock text-muted" style="font-size: 1.5rem;"></i>
                                        @endif
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <span class="badge bg-info">
                                                @if($contenido->tipo_archivo === 'pdf')
                                                    <i class="fas fa-file-pdf"></i> PDF
                                                @else
                                                    <i class="fas fa-video"></i> Video
                                                @endif
                                            </span>
                                        </div>
                                        <h6 class="mt-2 mb-1 {{ $contenidoActual && $contenidoActual->id === $contenido->id ? 'text-white' : '' }}">{{ $contenido->nombre_archivo }}</h6>
                                        @if($contenido->tipo_archivo === 'pdf' && $contenido->total_paginas)
                                            <small class="{{ $contenidoActual && $contenidoActual->id === $contenido->id ? 'text-white-50' : 'text-muted' }}">
                                                <i class="fas fa-file-alt"></i> {{ $contenido->total_paginas }} páginas
                                            </small>
                                        @elseif($contenido->tipo_archivo === 'video' && $contenido->duracion_archivo)
                                            <small class="{{ $contenidoActual && $contenidoActual->id === $contenido->id ? 'text-white-50' : 'text-muted' }}">
                                                <i class="fas fa-clock"></i> {{ $contenido->duracion_archivo }} min
                                            </small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ asset('assets/vendor/pdfjs/build/pdf.js') }}"></script>
    @if($contenidoActual && $contenidoActual->tipo_archivo === 'pdf')
        <script>
            // Configurar PDF.js
            pdfjsLib.GlobalWorkerOptions.workerSrc = '{{ asset("assets/vendor/pdfjs/build/pdf.worker.js") }}';
            let pdfDoc = null;
            let pageNum = {{ $ultimaPaginaVista > 0 ? $ultimaPaginaVista : 1 }};
            let paginasVistas = @json($progreso->paginas_vistas ?? []);
            let pageRendering = false;
            let pageNumPending = null;
            let currentScale = 1.2;
            const canvas = document.getElementById('pdf-canvas');
            const ctx = canvas.getContext('2d');
            const contenidoId = {{ $contenidoActual->id }};
            const totalPaginas = {{ $contenidoActual->total_paginas ?? 0 }};
            let tiempoInicio = Date.now();
            let tiempoAcumulado = 0;
            let timerActivo = true;
            // Cargar el PDF
            const pdfUrl = '{{ Storage::url($contenidoActual->ruta_archivo) }}';
            pdfjsLib.getDocument(pdfUrl).promise.then(function(pdfDoc_) {
                pdfDoc = pdfDoc_;
                document.getElementById('page-count').textContent = pdfDoc.numPages;
                renderPage(pageNum);
            }).catch(function(error) {
                console.error('Error al cargar PDF:', error);
                alert('Error al cargar el PDF. Por favor, recarga la página.');
            });
            function renderPage(num) {
                pageRendering = true;
                pdfDoc.getPage(num).then(function(page) {
                    const viewport = page.getViewport({scale: currentScale});
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    const renderContext = {
                        canvasContext: ctx,
                        viewport: viewport
                    };
                    page.render(renderContext).promise.then(function() {
                        pageRendering = false;
                        if (pageNumPending !== null) {
                            renderPage(pageNumPending);
                            pageNumPending = null;
                        }
                        if (!paginasVistas.includes(num)) {
                            paginasVistas.push(num);
                        }
                        guardarProgreso(num);
                    });
                });
                document.getElementById('page-num').textContent = num;
            }
            document.getElementById('prev-page').addEventListener('click', function(e) {
                e.preventDefault();
                if (pageNum <= 1) return;
                pageNum--;
                renderPage(pageNum);
            });
            document.getElementById('next-page').addEventListener('click', function(e) {
                e.preventDefault();
                if (pageNum >= pdfDoc.numPages) return;
                pageNum++;
                renderPage(pageNum);
            });
            document.getElementById('zoom-in').addEventListener('click', function(e) {
                e.preventDefault();
                currentScale += 0.2;
                renderPage(pageNum);
            });
            document.getElementById('zoom-out').addEventListener('click', function(e) {
                e.preventDefault();
                if (currentScale > 0.5) {
                    currentScale -= 0.2;
                    renderPage(pageNum);
                }
            });
            // Timer que cuenta cada segundo
            const timerInterval = setInterval(function() {
                if (timerActivo) {
                    tiempoAcumulado++;
                }
            }, 1000);

            // Detectar cuando el usuario cambia de pestaña (pausa el timer)
            document.addEventListener('visibilitychange', function() {
                if (document.hidden) {
                    timerActivo = false;
                } else {
                    timerActivo = true;
                }
            });

            // FUNCIÓN PARA GUARDAR PROGRESO
            function guardarProgreso() {
                const tiempoTranscurrido = Math.floor((Date.now() - tiempoInicio) / 1000);
                fetch('{{ route("cursos.guardar-progreso") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        contenido_id    : contenidoId,
                        pagina_actual   : pageNum,
                        paginas_vistas  : paginasVistas,
                        total_paginas   : pdfDoc.numPages,
                        tiempo_acumulado: tiempoAcumulado
                    })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('✅ Progreso guardado:', data);
                    if (data.success && data.porcentaje !== undefined) {
                        const barra = document.getElementById('barra-progreso-contenido');
                        const texto = document.getElementById('texto-progreso-contenido');
                        if (barra && texto) {
                            const porcentaje = parseFloat(data.porcentaje);
                            barra.style.width = porcentaje + '%';
                            texto.textContent = porcentaje.toFixed(0) + '%';
                            if (porcentaje >= 100) {
                                barra.classList.remove('bg-info');
                                barra.classList.add('bg-success');
                            }
                        }
                        if (data.completado) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Contenido Completado!',
                                text: 'Has completado este contenido al 100%',
                                timer: 3000,
                                showConfirmButton: false
                            });
                        }
                    }
                })
                .catch(error => console.error('❌ Error guardando progreso:', error));
            }
            setInterval(guardarProgreso, 10000);
            window.addEventListener('beforeunload', function() {
                guardarProgreso();
            });

            // FUNCIÓN PARA GUARDAR TIEMPO
            function guardarTiempo() {
                if (tiempoAcumulado === 0) {
                    return;
                }

                fetch('{{ route("cursos.guardar-tiempo") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        contenido_id: contenidoId,
                        tiempo_sesion: tiempoAcumulado
                    })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('✅ Tiempo guardado:', data);
                })
                .catch(error => console.error('❌ Error guardando tiempo:', error));
            }
            // Guardar tiempo cada 30 segundos
            setInterval(guardarTiempo, 30000); // 30000ms = 30 segundos
            // Guardar tiempo cuando el usuario cierre la página
            window.addEventListener('beforeunload', function() {
                guardarTiempo();
            });
        </script>
    @elseif($contenidoActual && $contenidoActual->tipo_archivo === 'video')
        <script>
            // ==========================================
            // CONFIGURACIÓN INICIAL
            // ==========================================
            const contenidoId = {{ $contenidoActual->id }};
            const asignacionId = {{ $asignacion->id }};
            const duracionTotalSegundos = {{ $asignacion->duracion_horas * 3600 }};
            let tiempoReproducido = {{ $progreso->tiempo_reproducido ?? 0 }}; // Tiempo desde BD

            let estaActivo = false; // Si el usuario está viendo activamente
            let tiempoInactivo = 0; // Segundos sin actividad
            const TIEMPO_MAX_INACTIVIDAD = 120; // 2 minutos sin actividad = pausa

            // ==========================================
            // ACTUALIZAR VISUALIZACIÓN
            // ==========================================
            function actualizarVisualizacion() {
                const minutos = Math.floor(tiempoReproducido / 60);
                const minutosTotal = Math.floor(duracionTotalSegundos / 60);
                document.getElementById('tiempo-visto-minutos').textContent = minutos;
                const porcentaje = Math.min(100, (tiempoReproducido / duracionTotalSegundos) * 100);
                const barra = document.getElementById('barra-progreso-video');
                const texto = document.getElementById('texto-progreso-video');
                if (barra && texto) {
                    barra.style.width = porcentaje + '%';
                    texto.textContent = porcentaje.toFixed(1) + '%';
                    if (porcentaje >= 100) {
                        barra.classList.remove('bg-info');
                        barra.classList.add('bg-success');
                    }
                }
            }

            // ==========================================
            // INDICADOR DE ESTADO (ACTIVO/PAUSADO)
            // ==========================================
            function actualizarIndicadorEstado() {
                let indicador = document.getElementById('indicador-estado-video');
                if (!indicador) {
                    indicador = document.createElement('div');
                    indicador.id = 'indicador-estado-video';
                    indicador.style.cssText = 'margin-top: 10px; padding: 8px; border-radius: 5px; text-align: center; font-weight: bold;';
                    document.querySelector('.video-container').after(indicador);
                }
                if (estaActivo) {
                    indicador.innerHTML = '🟢 ACTIVO - Contabilizando tiempo...';
                    indicador.style.backgroundColor = '#d4edda';
                    indicador.style.color = '#155724';
                } else {
                    indicador.innerHTML = '🔴 PAUSADO - Mueve el mouse o presiona una tecla para continuar';
                    indicador.style.backgroundColor = '#f8d7da';
                    indicador.style.color = '#721c24';
                }
            }

            // ==========================================
            // DETECCIÓN DE ACTIVIDAD SOBRE EL VIDEO
            // ==========================================
            let ultimaActividad = Date.now();
            const TIEMPO_SIN_ACTIVIDAD = 180;
            // Detectar movimiento de mouse en cualquier parte de la página
            document.addEventListener('mousemove', function() {
                if (!document.hidden) {
                    estaActivo = true;
                    ultimaActividad = Date.now();
                    tiempoInactivo = 0;
                }
            });
            // Detectar clicks en cualquier parte
            document.addEventListener('click', function() {
                if (!document.hidden) {
                    estaActivo = true;
                    ultimaActividad = Date.now();
                    tiempoInactivo = 0;
                }
            });
            // Detectar teclas presionadas
            document.addEventListener('keypress', function() {
                if (!document.hidden) {
                    estaActivo = true;
                    ultimaActividad = Date.now();
                    tiempoInactivo = 0;
                }
            });

            // ==========================================
            // TIMER PRINCIPAL (cuenta cada segundo)
            // ==========================================
            const timerInterval = setInterval(function() {
                // Verificar si ha pasado mucho tiempo sin actividad
                const segundosSinActividad = Math.floor((Date.now() - ultimaActividad) / 1000);
                if (segundosSinActividad > TIEMPO_SIN_ACTIVIDAD) {
                    estaActivo = false;
                }
                if (estaActivo) {
                    tiempoReproducido++;
                    tiempoInactivo = 0;
                    actualizarVisualizacion();
                    actualizarIndicadorEstado();
                } else {
                    tiempoInactivo++;
                    actualizarIndicadorEstado();
                }
            }, 1000);

            // ==========================================
            // PAUSAR AL CAMBIAR DE PESTAÑA
            // ==========================================
            document.addEventListener('visibilitychange', function() {
                if (document.hidden) {
                    estaActivo = false;
                    actualizarIndicadorEstado();
                }
            });

            // ==========================================
            // GUARDAR PROGRESO EN EL SERVIDOR
            // ==========================================
            function guardarProgresoVideo() {
                if (tiempoReproducido === 0) {
                    return;
                }
                fetch('{{ route("cursos.guardar-progreso-video") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        contenido_id: contenidoId,
                        tiempo_reproducido: tiempoReproducido
                    })
                })
                .then(response => response.json())
                .then(data => {
                    // Si se completó, mostrar alerta
                    if (data.completado && data.porcentaje >= 100) {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Video Completado!',
                            text: 'Has completado este video al 100%. ¡Excelente trabajo!',
                            timer: 4000,
                            showConfirmButton: true,
                            confirmButtonText: 'Continuar'
                        }).then(() => {
                            window.location.reload();
                        });
                    }
                })
                .catch(error => {
                    console.error('❌ Error guardando progreso:', error);
                });
            }

            // Guardar progreso cada 30 segundos
            setInterval(guardarProgresoVideo, 30000);

            // Guardar al cerrar/salir de la página
            window.addEventListener('beforeunload', function() {
                guardarProgresoVideo();
            });

            // ==========================================
            // INICIALIZACIÓN
            // ==========================================
            actualizarVisualizacion();
            actualizarIndicadorEstado();
            document.addEventListener('DOMContentLoaded', function() {
                actualizarVisualizacion();
                actualizarIndicadorEstado();
            });
        </script>
    @endif
    {{-- funcion para boton de completado --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const btnCompletar = document.getElementById('btnCompletarContenido');
            if (btnCompletar) {
                btnCompletar.addEventListener('click', function() {
                    const contenidoId = this.dataset.contenidoId;
                    const btn = this;
                    btn.disabled = true;
                    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Procesando...';
                    fetch(`{{ url('/contenido') }}/${contenidoId}/completar`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Completado!',
                                text: data.mensaje,
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                // Recargar la página para mostrar el siguiente contenido
                                window.location.reload();
                            });
                        } else {
                            // Manejar el error de progreso insuficiente
                            Swal.fire({
                                icon: 'warning',
                                title: 'Progreso insuficiente',
                                html: `${data.error}<br><small>Progreso actual: <strong>${data.progreso_actual}%</strong></small>`,
                                confirmButtonText: 'Entendido',
                                confirmButtonColor: '#3085d6'
                            });
                            btn.disabled = false;
                            btn.innerHTML = '<i class="fas fa-check-circle"></i> Marcar como Completado';
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Hubo un error al marcar el contenido como completado',
                            confirmButtonText: 'Entendido'
                        });
                        btn.disabled = false;
                        btn.innerHTML = '<i class="fas fa-check-circle"></i> Marcar como Completado';
                    });
                });
            }
            // Auto-completar al finalizar un video
            const videoPlayer = document.getElementById('videoPlayer');
            if (videoPlayer) {
                videoPlayer.addEventListener('ended', function() {
                    if (btnCompletar && !btnCompletar.disabled) {
                        btnCompletar.click();
                    }
                });
            }
        });
    </script>
@endsection