{% load lb_tags %}

<c-layouts.base title="Resultado de Examen | Lo Justo E-Learning">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-10">
        
        <!-- BANNER DE RESULTADO -->
        <div class="rounded-3xl p-8 sm:p-12 text-center border shadow-2xl relative overflow-hidden {% if passed %}bg-gradient-to-b from-emerald-950 to-zinc-950 border-emerald-500/60 text-white{% else %}bg-gradient-to-b from-red-950 to-zinc-950 border-red-500/60 text-white{% endif %}">
            <div class="space-y-6 relative z-10">
                <div class="w-20 h-20 mx-auto rounded-full flex items-center justify-center text-4xl shadow-lg {% if passed %}bg-emerald-500/20 text-emerald-400 border border-emerald-400/40{% else %}bg-red-500/20 text-red-400 border border-red-400/40{% endif %}">
                    {% if passed %}🏆{% else %}⚠️{% endif %}
                </div>

                <div class="space-y-2">
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-black uppercase tracking-widest {% if passed %}bg-emerald-500/10 text-emerald-400 border border-emerald-500/30{% else %}bg-red-500/10 text-red-400 border border-red-500/30{% endif %}">
                        {% if passed %}¡APROBADO CON DISTINCIÓN!{% else %}EVALUACIÓN REPROBADA{% endif %}
                    </span>
                    <h1 class="text-3xl sm:text-5xl font-black tracking-tight">
                        Puntaje Final: <span class="{% if passed %}text-amber-400{% else %}text-red-400{% endif %}">{{ score }}%</span>
                    </h1>
                    <p class="text-zinc-300 max-w-xl mx-auto text-sm sm:text-base">
                        Has respondido correctamente <strong class="text-white">{{ correct_count }}</strong> de <strong class="text-white">{{ total_questions }}</strong> preguntas en la evaluación <em>"{{ evaluation.title }}"</em>.
                    </p>
                </div>

                {% if passed and certificate %}
                <!-- SECCIÓN DIPLOMA -->
                <div class="pt-6 border-t border-white/10 flex flex-col sm:flex-row items-center justify-center gap-4">
                    <a href="{% url 'certificates:download' certificate.certificate_code %}" class="btn bg-gradient-to-r from-amber-400 to-amber-500 hover:from-amber-300 hover:to-amber-400 text-zinc-950 font-black uppercase text-xs sm:text-sm tracking-wider rounded-2xl px-8 py-4 shadow-2xl flex items-center space-x-2">
                        <c-lbi.rmx.file-download w="1.25rem" h="1.25rem" class="text-zinc-950" />
                        <span>Descargar Diploma Oficial en PDF (Alta Resolución)</span>
                    </a>
                    <a href="{% url 'campus:portal_elearning' %}" class="btn bg-white/10 hover:bg-white/20 text-white font-bold uppercase text-xs tracking-wider rounded-2xl px-6 py-4">
                        Ir al Portal E-Learning →
                    </a>
                </div>
                {% else %}
                <div class="pt-6 border-t border-white/10 flex flex-col sm:flex-row items-center justify-center gap-4">
                    <a href="{% url 'campus:quiz_detail' slug=course.slug evaluation_id=evaluation.id %}" class="btn bg-emerald-600 hover:bg-emerald-500 text-white font-black uppercase text-xs sm:text-sm tracking-wider rounded-2xl px-8 py-4 shadow-xl">
                        🔄 Reintentar Evaluación Ahora
                    </a>
                    <a href="{% url 'courses:course_detail' slug=course.slug %}" class="btn bg-white/10 hover:bg-white/20 text-white font-bold uppercase text-xs tracking-wider rounded-2xl px-6 py-4">
                        Repasar Lecciones del Curso
                    </a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- DETALLE DE RESPUESTAS -->
        <div class="space-y-6">
            <h3 class="text-xl font-black text-zinc-900 dark:text-white flex items-center space-x-2">
                <span>🔍 Revisión de Respuestas</span>
            </h3>

            <div class="space-y-4">
                {% for res in results_detail %}
                <div class="p-6 rounded-2xl border {% if res.is_correct %}bg-emerald-500/5 dark:bg-emerald-500/10 border-emerald-500/30{% else %}bg-red-500/5 dark:bg-red-500/10 border-red-500/30{% endif %} flex items-start justify-between gap-4">
                    <div class="space-y-2">
                        <div class="flex items-center space-x-2">
                            <span class="text-lg">{% if res.is_correct %}✅{% else %}❌{% endif %}</span>
                            <h4 class="font-bold text-zinc-900 dark:text-white text-sm sm:text-base">{{ res.text }}</h4>
                        </div>
                        {% if not res.is_correct %}
                        <p class="text-xs text-red-600 dark:text-red-400 pl-7">
                            Tu respuesta no fue correcta. Revisa el material didáctico para afianzar este concepto.
                        </p>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

    </div>
</c-layouts.base>
