{% load lb_tags %}

<c-layouts.base title="Resultado de Validación: {{ searched_code }} | Lo Justo E-Learning">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-14 space-y-8">
        <!-- BOTÓN VOLVER -->
        <div>
            <a href="{% url 'certificates:verify_search' %}" class="inline-flex items-center space-x-2 text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 hover:underline">
                <span>← Realizar Otra Consulta</span>
            </a>
        </div>

        {% if certificate %}
        <!-- DIPLOMA ENCONTRADO Y VÁLIDO -->
        <div class="bg-white dark:bg-zinc-900 border-2 border-emerald-500 rounded-3xl overflow-hidden shadow-2xl">
            <!-- Header Institucional del Diploma Digital -->
            <div class="bg-gradient-to-r from-emerald-950 via-emerald-900 to-zinc-900 text-white p-8 sm:p-10 border-b border-emerald-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
                <div class="space-y-2">
                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-emerald-500/20 border border-emerald-400/40 text-emerald-300 text-xs font-black uppercase tracking-widest">
                        ✅ Certificación Auténtica & Vigente
                    </span>
                    <h1 class="text-2xl sm:text-3xl font-black tracking-tight text-white">
                        {{ certificate.enrollment.course.title }}
                    </h1>
                    <div class="text-xs font-bold text-amber-400 uppercase tracking-wider">
                        Normativa: {{ certificate.enrollment.course.iso_standard }}
                    </div>
                </div>

                <!-- Código Monograma -->
                <div class="bg-white/10 backdrop-blur-md px-5 py-3 rounded-2xl border border-white/15 text-center shrink-0">
                    <span class="text-[10px] uppercase font-bold text-zinc-300 block">Código Oficial</span>
                    <span class="text-xl font-mono font-black text-amber-400">{{ certificate.certificate_code }}</span>
                </div>
            </div>

            <!-- Datos del Alumno Titular -->
            <div class="p-8 sm:p-10 grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
                <div class="md:col-span-2 space-y-6">
                    <div class="space-y-1 border-b border-zinc-100 dark:border-zinc-800 pb-4">
                        <span class="text-xs font-bold text-zinc-400 uppercase tracking-wider">Alumno Titular:</span>
                        <h3 class="text-2xl sm:text-3xl font-black text-zinc-900 dark:text-white">
                            {{ certificate.enrollment.user.get_full_name|default:certificate.enrollment.user.username }}
                        </h3>
                        <span class="text-xs text-zinc-500 dark:text-zinc-400 block font-mono">
                            Usuario ID: {{ certificate.enrollment.user.username }} | {{ certificate.enrollment.user.email }}
                        </span>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                        <div class="bg-zinc-50 dark:bg-zinc-800/50 p-4 rounded-xl border border-zinc-200 dark:border-zinc-800">
                            <span class="text-[11px] font-bold text-zinc-400 uppercase block">Fecha de Emisión</span>
                            <span class="font-black text-zinc-900 dark:text-white">{{ certificate.issued_at|date:"d/m/Y H:i" }}</span>
                        </div>
                        <div class="bg-zinc-50 dark:bg-zinc-800/50 p-4 rounded-xl border border-zinc-200 dark:border-zinc-800">
                            <span class="text-[11px] font-bold text-zinc-400 uppercase block">Firma Digital Criptográfica</span>
                            <span class="font-black text-emerald-600 dark:text-emerald-400 flex items-center gap-1.5">
                                {% if certificate.is_digitally_signed %}
                                    <span>🔒 Certificada PAdES (Adobe Validated)</span>
                                {% else %}
                                    <span>🔒 Certificada Institucional</span>
                                {% endif %}
                            </span>
                        </div>
                    </div>

                    {% if certificate.sha256_hash %}
                    <!-- Huella Criptográfica SHA-256 -->
                    <div class="bg-zinc-900 text-zinc-300 p-4 rounded-xl space-y-1.5 border border-zinc-800">
                        <div class="text-[10px] font-bold uppercase tracking-wider text-emerald-400 flex items-center justify-between">
                            <span>Huella Criptográfica SHA-256 (Inalterabilidad)</span>
                            <span class="font-mono text-zinc-400">SHA-256</span>
                        </div>
                        <div class="font-mono text-[11px] break-all select-all text-zinc-200">
                            {{ certificate.sha256_hash }}
                        </div>
                    </div>
                    {% endif %}

                    <div class="flex flex-col sm:flex-row items-center gap-4 pt-2">
                        <a href="{% url 'certificates:certificate_download' certificate_code=certificate.certificate_code %}" class="btn w-full sm:w-auto bg-emerald-600 hover:bg-emerald-500 text-white font-bold rounded-xl px-6 py-3 flex items-center justify-center gap-2 shadow-lg">
                            <span>📥 Descargar Diploma Oficial PDF</span>
                        </a>
                    </div>
                </div>

                <!-- Código QR y Sello -->
                <div class="flex flex-col items-center justify-center p-6 bg-zinc-50 dark:bg-zinc-800/40 rounded-2xl border border-zinc-200 dark:border-zinc-800 text-center space-y-3">
                    {% if certificate.qr_code_image %}
                        <div class="p-3 bg-white rounded-2xl shadow-lg border border-zinc-200">
                            <img src="{{ certificate.qr_code_image.url }}" alt="Código QR {{ certificate.certificate_code }}" class="w-40 h-40 mx-auto" />
                        </div>
                    {% else %}
                        <div class="w-40 h-40 bg-zinc-200 dark:bg-zinc-700 rounded-2xl flex items-center justify-center text-zinc-400 font-mono text-xs">
                            [QR No Generado]
                        </div>
                    {% endif %}
                    <span class="text-[11px] font-mono font-bold text-zinc-500 dark:text-zinc-400">Escanea para verificar autenticidad</span>
                </div>
            </div>
        </div>
        {% else %}
        <!-- DIPLOMA NO ENCONTRADO O INVÁLIDO -->
        <div class="bg-white dark:bg-zinc-900 border-2 border-red-500 rounded-3xl p-10 shadow-2xl text-center max-w-xl mx-auto space-y-6">
            <div class="w-20 h-20 rounded-full bg-red-500/10 text-red-500 flex items-center justify-center mx-auto text-4xl font-black border border-red-500/20">
                ❌
            </div>
            <div class="space-y-2">
                <h2 class="text-2xl font-black text-zinc-900 dark:text-white">Certificado No Encontrado</h2>
                <p class="text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">
                    El código <span class="font-mono font-black text-red-500 bg-red-500/10 px-2 py-0.5 rounded">{{ searched_code }}</span> no corresponde a ningún diploma registrado en la base de datos de Lo Justo Metrología.
                </p>
            </div>
            <div class="pt-4">
                <a href="{% url 'certificates:verify_search' %}" class="btn bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 font-bold rounded-xl px-8">
                    Intentar con Otro Código
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</c-layouts.base>