{% load lb_tags %}

<c-layouts.app title="Studio Docente & Gestión | Lo Justo LMS">
    <div class="bg-zinc-100 min-h-screen pb-20">
        <!-- BARRA SUPERIOR DEL DASHBOARD SAAS (SIN BANNERS DE MARKETING) -->
        <div class="bg-white border-b border-zinc-200/80 px-4 sm:px-6 lg:px-8 py-5 shadow-sm">
            <div class="max-w-7xl mx-auto flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                    <div class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-zinc-400 mb-1">
                        <span>Gestión Académica</span>
                        <span>/</span>
                        <span class="text-emerald-700 font-black">Panel General de Control</span>
                    </div>
                    <h1 class="text-2xl font-black text-zinc-900 flex items-center gap-2.5">
                        <c-lbi.rmx.dashboard w="1.5rem" h="1.5rem" class="text-emerald-600" />
                        <span>Resumen Ejecutivo & Métricas</span>
                    </h1>
                </div>

                <div class="flex items-center gap-2.5">
                    <a href="{% url 'studio:studio_courses' %}" class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold text-xs uppercase tracking-wider shadow-sm hover:shadow transition-all flex items-center gap-1.5">
                        <c-lbi.rmx.add w="1.1rem" h="1.1rem" />
                        <span>Nuevo Curso</span>
                    </a>
                    <a href="{% url 'studio:studio_categories' %}" class="px-4 py-2.5 bg-zinc-800 hover:bg-zinc-900 text-white rounded-xl font-bold text-xs uppercase tracking-wider shadow-sm transition-all flex items-center gap-1.5">
                        <c-lbi.rmx.price-tag-3 w="1rem" h="1rem" class="text-emerald-400" />
                        <span>Especialidades</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- CONTENEDOR PRINCIPAL DEL DASHBOARD -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6 space-y-6">

            {% if messages %}
                <div class="space-y-2">
                    {% for message in messages %}
                        <div class="p-4 rounded-xl text-xs font-bold {% if message.tags == 'error' %}bg-red-50 text-red-700 border border-red-200{% else %}bg-emerald-50 text-emerald-800 border border-emerald-200{% endif %}">
                            {{ message }}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

            <!-- Tarjetas de Métricas SaaS Limpias -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="bg-white rounded-2xl p-5 border border-zinc-200/80 shadow-sm flex items-center justify-between">
                    <div>
                        <span class="text-[11px] font-bold text-zinc-400 uppercase tracking-wider block">Cursos Gestionados</span>
                        <div class="text-3xl font-black text-zinc-900 mt-1">{{ total_courses }}</div>
                        <p class="text-[11px] text-emerald-700 font-semibold mt-1">Programas en cátedra</p>
                    </div>
                    <div class="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-700 flex items-center justify-center font-black text-lg border border-emerald-100">
                        <c-lbi.rmx.book-open w="1.35rem" h="1.35rem" class="shrink-0" />
                    </div>
                </div>

                <div class="bg-white rounded-2xl p-5 border border-zinc-200/80 shadow-sm flex items-center justify-between">
                    <div>
                        <span class="text-[11px] font-bold text-zinc-400 uppercase tracking-wider block">Alumnos Activos</span>
                        <div class="text-3xl font-black text-zinc-900 mt-1">{{ total_students }}</div>
                        <p class="text-[11px] text-amber-700 font-semibold mt-1">Matriculados en LMS</p>
                    </div>
                    <div class="w-12 h-12 rounded-xl bg-amber-50 text-amber-700 flex items-center justify-center font-black text-lg border border-amber-100">
                        <c-lbi.rmx.graduation-cap w="1.35rem" h="1.35rem" class="shrink-0" />
                    </div>
                </div>

                <div class="bg-white rounded-2xl p-5 border border-zinc-200/80 shadow-sm flex items-center justify-between">
                    <div>
                        <span class="text-[11px] font-bold text-zinc-400 uppercase tracking-wider block">Inscripciones</span>
                        <div class="text-3xl font-black text-zinc-900 mt-1">{{ total_enrollments }}</div>
                        <p class="text-[11px] text-blue-700 font-semibold mt-1">Asignaciones en curso</p>
                    </div>
                    <div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-700 flex items-center justify-center font-black text-lg border border-blue-100">
                        <c-lbi.rmx.dashboard w="1.35rem" h="1.35rem" class="shrink-0" />
                    </div>
                </div>

                <div class="bg-white rounded-2xl p-5 border border-zinc-200/80 shadow-sm flex items-center justify-between">
                    <div>
                        <span class="text-[11px] font-bold text-zinc-400 uppercase tracking-wider block">Diplomas Emitidos</span>
                        <div class="text-3xl font-black text-zinc-900 mt-1">{{ total_certificates }}</div>
                        <p class="text-[11px] text-purple-700 font-semibold mt-1">Sello QR verificable</p>
                    </div>
                    <div class="w-12 h-12 rounded-xl bg-purple-50 text-purple-700 flex items-center justify-center font-black text-lg border border-purple-100">
                        <c-lbi.rmx.qr-code w="1.35rem" h="1.35rem" class="shrink-0" />
                    </div>
                </div>
            </div>

            <!-- Panel dividido de Gestión -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 pt-2">
                <!-- Columna Izquierda (2/3): Cursos y Rendimiento -->
                <div class="lg:col-span-2 space-y-6">
                    <div class="bg-white rounded-2xl p-6 border border-zinc-200/80 shadow-sm space-y-6">
                        <div class="flex items-center justify-between border-b border-zinc-200/60 pb-4">
                            <div>
                                <h2 class="text-base font-black text-zinc-900">Programas con Mayor Matrícula</h2>
                                <p class="text-xs text-zinc-500 font-medium">Desempeño y volumen de inscripciones en tu cátedra</p>
                            </div>
                            <a href="{% url 'studio:studio_courses' %}" class="text-xs font-bold text-emerald-700 hover:underline flex items-center gap-1">
                                <span>Ver catálogo de gestión</span>
                                <c-lbi.rmx.arrow-right w="1rem" h="1rem" class="shrink-0" />
                            </a>
                        </div>

                        <div class="space-y-3">
                            {% for course in courses_stats %}
                                <div class="p-4 rounded-xl border border-zinc-200/80 hover:border-emerald-500/40 bg-zinc-50/50 hover:bg-white transition-all flex items-center justify-between gap-4">
                                    <div class="flex items-center space-x-3.5 min-w-0">
                                        <div class="w-10 h-10 rounded-xl bg-emerald-600 text-white flex items-center justify-center font-black text-sm shrink-0 shadow-sm">
                                            {{ course.title|slice:":2" }}
                                        </div>
                                        <div class="min-w-0">
                                            <a href="{% url 'studio:studio_course_curriculum' course.slug %}" class="font-black text-sm text-zinc-900 hover:text-emerald-700 transition-colors block truncate">
                                                {{ course.title }}
                                            </a>
                                            <div class="flex items-center space-x-2 text-xs text-zinc-500 font-medium mt-0.5">
                                                <span class="px-2 py-0.5 rounded bg-zinc-200/60 text-zinc-700 text-[10px] font-bold uppercase">{{ course.category.title }}</span>
                                                <span>• ISO: {{ course.iso_standard|default:"General" }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-4 shrink-0">
                                        <div class="text-right">
                                            <span class="text-base font-black text-zinc-900 block">{{ course.enrollment_count }}</span>
                                            <span class="text-[10px] uppercase font-bold text-zinc-400">Alumnos</span>
                                        </div>
                                        <a href="{% url 'studio:studio_course_curriculum' course.slug %}" class="p-2 rounded-lg bg-zinc-100 hover:bg-emerald-50 text-zinc-600 hover:text-emerald-700 transition-colors" title="Estructurar Temario">
                                            <c-lbi.rmx.book-open w="1.1rem" h="1.1rem" class="shrink-0" />
                                        </a>
                                    </div>
                                </div>
                            {% empty %}
                                <div class="py-12 text-center text-zinc-400 font-medium text-xs">
                                    No has creado ningún curso todavía en este Studio.
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <!-- Columna Derecha (1/3): Últimas Matrículas -->
                <div class="space-y-6">
                    <div class="bg-white rounded-2xl p-6 border border-zinc-200/80 shadow-sm space-y-6">
                        <div class="flex items-center justify-between border-b border-zinc-200/60 pb-4">
                            <div>
                                <h2 class="text-base font-black text-zinc-900">Actividad Reciente</h2>
                                <p class="text-xs text-zinc-500 font-medium">Últimas matriculaciones en el LMS</p>
                            </div>
                            <a href="{% url 'studio:studio_students' %}" class="text-xs font-bold text-emerald-700 hover:underline">Ver Alumnos</a>
                        </div>

                        <div class="space-y-3.5">
                            {% for enrollment in recent_enrollments %}
                                <div class="flex items-start space-x-3 text-xs border-b border-zinc-100 pb-3 last:border-0 last:pb-0">
                                    <div class="w-8 h-8 rounded-full bg-emerald-100 border border-emerald-300 text-emerald-800 flex items-center justify-center font-black shrink-0 uppercase text-[11px]">
                                        {{ enrollment.user.username|slice:":2" }}
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <span class="font-bold text-zinc-900 block truncate">{{ enrollment.user.get_full_name|default:enrollment.user.username }}</span>
                                        <span class="text-zinc-500 block truncate font-medium text-[11px]">{{ enrollment.course.title }}</span>
                                        <span class="text-[10px] font-semibold text-emerald-600 mt-0.5 block">{{ enrollment.enrolled_at|date:"d M Y - H:i" }}</span>
                                    </div>
                                </div>
                            {% empty %}
                                <div class="py-12 text-center text-zinc-400 font-medium text-xs">
                                    No hay matrículas registradas recientemente.
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</c-layouts.app>