{% load lb_tags course_tags %}

<c-layouts.app title="Aula: {{ lesson.title }} | Lo Justo E-Learning">
    <!-- BARRA SUPERIOR AULA VIRTUAL (BLANCA, LIMPIA, PEGADA ARRIBA) -->
    <div class="bg-white border-b border-zinc-200/80 px-4 sm:px-6 lg:px-8 py-3.5 shadow-xs sticky top-0 z-20">
        <div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
            <!-- Migas de pan y contexto del curso -->
            <div class="flex items-center space-x-2.5 text-xs sm:text-sm min-w-0">
                <a href="{% url 'campus:my_learning' %}" class="text-zinc-500 hover:text-emerald-700 transition-colors font-bold uppercase tracking-wider shrink-0 flex items-center gap-1 bg-zinc-100 hover:bg-zinc-200 px-2.5 py-1.5 rounded-lg border border-zinc-200">
                    <c-lbi.rmx.arrow-left w="0.875rem" h="0.875rem" />
                    <span>Mis Cursos</span>
                </a>
                <span class="text-zinc-300">/</span>
                <span class="text-zinc-500 font-medium truncate max-w-[200px]">{{ course.title }}</span>
                <span class="text-zinc-300">/</span>
                <span class="font-bold text-emerald-700 truncate">{{ lesson.title }}</span>
            </div>

            <!-- Barra de Progreso del Alumno -->
            <div class="w-full sm:w-64 flex items-center space-x-3 shrink-0">
                <span class="text-xs font-bold text-zinc-500 uppercase tracking-wider shrink-0">Avance: {{ progress_percent }}%</span>
                <div class="w-full bg-zinc-100 rounded-full h-2 overflow-hidden border border-zinc-200">
                    <div class="bg-emerald-600 h-2 rounded-full transition-all duration-500" style="width: {{ progress_percent }}%"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- CONTENEDOR PRINCIPAL DEL AULA Y TEMARIO -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- Columna Izquierda (3 cols): Encabezado, Video, Guía de Estudio y Acciones -->
            <div class="lg:col-span-3 space-y-6">
                <!-- 1. ENCABEZADO Y JERARQUÍA CLARA DE LA LECCIÓN -->
                <div class="bg-white border border-zinc-200/80 rounded-2xl p-6 sm:p-7 shadow-xs space-y-2">
                    <div class="inline-flex items-center px-3 py-1 rounded-lg bg-emerald-50 text-emerald-800 border border-emerald-200/80 text-xs font-black uppercase tracking-wider">
                        {{ lesson.module.title }}
                    </div>
                    <h1 class="text-2xl sm:text-3xl font-black tracking-tight text-zinc-900 leading-tight">
                        {{ lesson.title }}
                    </h1>
                </div>

                <!-- 2. REPRODUCTOR DE VIDEO DE LA CLASE -->
                <div class="bg-black rounded-2xl overflow-hidden shadow-md border border-zinc-800 aspect-video relative flex items-center justify-center">
                    {% if "youtube.com" in lesson.video_url or "youtu.be" in lesson.video_url %}
                        <iframe class="w-full h-full" src="{{ lesson.video_url|youtube_embed_url }}" title="{{ lesson.title }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                    {% elif lesson.video_url %}
                        <div class="text-center p-8 space-y-4 text-white">
                            <div class="text-5xl">▶️</div>
                            <h4 class="text-lg font-black">Video de la Lección</h4>
                            <a href="{{ lesson.video_url }}" target="_blank" class="btn btn-sm bg-emerald-600 text-white font-bold rounded-xl">
                                Abrir Enlace de Video Externo ↗
                            </a>
                        </div>
                    {% else %}
                        <!-- Placeholder interactivo -->
                        <div class="text-center p-8 space-y-4 text-white">
                            <div class="w-16 h-16 rounded-full bg-emerald-600/20 text-emerald-400 flex items-center justify-center mx-auto text-3xl border border-emerald-500/30 animate-pulse">
                                📖
                            </div>
                            <div class="space-y-1">
                                <span class="text-xs font-black uppercase tracking-widest text-emerald-400">Lección de Lectura & Guía</span>
                                <h3 class="text-xl sm:text-2xl font-black">{{ lesson.title }}</h3>
                            </div>
                            <p class="text-xs text-zinc-400 max-w-md mx-auto">
                                Revisa el material de estudio y las explicaciones detalladas en la parte inferior.
                            </p>
                        </div>
                    {% endif %}
                </div>

                <!-- 3. MATERIAL DE APOYO Y GUÍA DE ESTUDIO (LECTURA) -->
                {% if lesson.content %}
                <div class="bg-white border border-zinc-200/80 rounded-2xl p-6 sm:p-8 shadow-xs space-y-4">
                    <h3 class="text-base font-black text-zinc-900 flex items-center space-x-2 border-b border-zinc-100 pb-3">
                        <c-lbi.rmx.book-read w="1.25rem" h="1.25rem" class="text-emerald-600 shrink-0" />
                        <span>Material de Apoyo y Guía de Estudio</span>
                    </h3>
                    <div class="prose max-w-none text-sm sm:text-base text-zinc-700 leading-relaxed font-sans space-y-4">
                        {{ lesson.content|linebreaks }}
                    </div>
                </div>
                {% endif %}

                <!-- 4. ZONA DE ACCIONES (UBICADA AL FINAL, DESPUÉS DE ESTUDIAR LA CLASE) -->
                <div class="bg-white border border-zinc-200/80 rounded-2xl p-5 sm:p-6 shadow-xs flex flex-col sm:flex-row items-center justify-between gap-4">
                    <!-- Botón Anterior -->
                    {% if prev_lesson %}
                    <a href="{% url 'campus:lesson_player' slug=course.slug lesson_slug=prev_lesson.slug %}" class="w-full sm:w-auto px-4 py-2.5 rounded-xl border border-zinc-200 hover:bg-zinc-50 text-zinc-700 font-bold text-xs uppercase tracking-wider transition-colors flex items-center justify-center gap-1.5">
                        <c-lbi.rmx.arrow-left w="1rem" h="1rem" />
                        <span>Lección Anterior</span>
                    </a>
                    {% else %}
                    <div class="hidden sm:block"></div>
                    {% endif %}

                    <!-- Botón Principal Central: Marcar como Completada -->
                    <form method="post" action="{% url 'campus:lesson_toggle_progress' lesson.id %}" class="w-full sm:w-auto">
                        {% csrf_token %}
                        <button
                            type="submit"
                            class="w-full sm:w-auto px-6 py-3 rounded-xl font-black uppercase text-xs tracking-wider transition-all flex items-center justify-center gap-2 cursor-pointer shadow-xs {% if progress.is_completed %}bg-zinc-100 hover:bg-zinc-200 text-zinc-700 border border-zinc-300{% else %}bg-emerald-600 hover:bg-emerald-700 text-white shadow-emerald-600/20{% endif %}"
                        >
                            {% if progress.is_completed %}
                                <c-lbi.rmx.checkbox-circle w="1.125rem" h="1.125rem" class="text-emerald-600" />
                                <span>✓ Lección Completada (Desmarcar)</span>
                            {% else %}
                                <c-lbi.rmx.checkbox-blank-circle w="1.125rem" h="1.125rem" />
                                <span>Marcar como Completada & Siguiente</span>
                            {% endif %}
                        </button>
                    </form>

                    <!-- Botón Siguiente / Examen Final -->
                    {% if next_lesson %}
                    <a href="{% url 'campus:lesson_player' slug=course.slug lesson_slug=next_lesson.slug %}" class="w-full sm:w-auto px-4 py-2.5 rounded-xl border border-zinc-200 hover:bg-zinc-50 text-zinc-700 font-bold text-xs uppercase tracking-wider transition-colors flex items-center justify-center gap-1.5">
                        <span>Siguiente Lección</span>
                        <c-lbi.rmx.arrow-right w="1rem" h="1rem" />
                    </a>
                    {% elif progress_percent == 100 or progress.is_completed %}
                        {% if first_evaluation %}
                        <a href="{% url 'campus:quiz_detail' slug=course.slug evaluation_id=first_evaluation.id %}" class="w-full sm:w-auto px-5 py-3 rounded-xl bg-amber-400 hover:bg-amber-300 text-zinc-950 font-black uppercase text-xs tracking-wider transition-all shadow-md flex items-center justify-center gap-2">
                            <span>🏆 Rendir Evaluación Final</span>
                        </a>
                        {% else %}
                        <a href="{% url 'campus:my_learning' %}" class="w-full sm:w-auto px-5 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-black uppercase text-xs tracking-wider transition-all shadow-md flex items-center justify-center gap-2">
                            <span>🏆 Finalizar Curso</span>
                        </a>
                        {% endif %}
                    {% else %}
                    <div class="hidden sm:block"></div>
                    {% endif %}
                </div>
            </div>

            <!-- Columna Derecha (1 col): Sidebar del Temario y Lista de Lecciones -->
            <div class="lg:col-span-1">
                <div class="sticky top-20 bg-white border border-zinc-200/80 rounded-2xl p-5 shadow-xs space-y-5">
                    <div class="border-b border-zinc-100 pb-3 flex items-center justify-between">
                        <h3 class="font-black text-sm text-zinc-900">Temario del Curso</h3>
                        <span class="text-xs font-bold text-emerald-600">{{ progress_percent }}% listos</span>
                    </div>

                    <div class="space-y-6 max-h-[70vh] overflow-y-auto pr-1">
                        {% for module in course.modules.all %}
                        <div class="space-y-2">
                            <div class="text-xs font-black uppercase tracking-wider text-zinc-400 px-1">
                                {{ module.title }}
                            </div>
                            <div class="space-y-1">
                                {% for item in module.lessons.all %}
                                <a
                                    href="{% url 'campus:lesson_player' slug=course.slug lesson_slug=item.slug %}"
                                    class="flex items-center justify-between p-2.5 rounded-xl text-xs font-bold transition-all {% if item == lesson %}bg-emerald-600 text-white shadow-xs{% else %}text-zinc-700 hover:bg-zinc-100{% endif %}"
                                >
                                    <div class="flex items-center space-x-2 overflow-hidden">
                                        <!-- Check de completado -->
                                        {% if progress_map|get_item:item.id %}
                                            <span class="w-4 h-4 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center font-black text-[10px] shrink-0">✓</span>
                                        {% else %}
                                            <span class="w-4 h-4 rounded-full border border-zinc-300 shrink-0"></span>
                                        {% endif %}
                                        <span class="truncate">{{ item.title }}</span>
                                    </div>
                                    {% if item == lesson %}
                                        <span class="text-[9px] uppercase font-mono tracking-tighter bg-white/25 px-1.5 py-0.5 rounded text-white">Actual</span>
                                    {% endif %}
                                </a>
                                {% endfor %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</c-layouts.app>