{% extends 'base.html.twig' %}

{% block title %}Dashboard - Moodia{% endblock %}

{% block meta_description %}Gérez vos cours Moodle générés avec l'IA. Suivez vos brouillons et cours déployés.{% endblock %}

{% block body %}
<div class="moodia-dashboard">
    {# Header du dashboard #}
    <header class="moodia-dashboard__header">
        <div class="moodia-dashboard__header-content">
            <div class="moodia-dashboard__title-row">
                <div class="moodia-dashboard__logo">
                    {% include "_components/icons/moodia.html.twig" %}
                </div>
                <div class="moodia-dashboard__title-group">
                    <h1 class="moodia-dashboard__title">Moodia</h1>
                    <p class="moodia-dashboard__subtitle">Générateur de cours Moodle par IA</p>
                </div>
            </div>
            <a href="{{ path('app_moodia_new') }}" class="moodia-dashboard__create-btn">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="12" y1="5" x2="12" y2="19"/>
                    <line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
                Créer un cours
            </a>
        </div>
    </header>

    {# Contenu principal #}
    <main class="moodia-dashboard__main">
        {# Liste des cours #}
        <section class="moodia-dashboard__courses">
            {% if courseStats.total > 0 %}
                {# Filtres en haut #}
                <div class="moodia-dashboard__filters-bar">
                    {# Filtres par statut #}
                    <div class="moodia-dashboard__filters">
                        <a href="{{ path('app_moodia', {status: 'all', type: typeFilter}) }}" class="moodia-dashboard__filter{{ statusFilter == 'all' ? ' moodia-dashboard__filter--active' : '' }}">
                            Tous
                            <span class="moodia-dashboard__filter-count">{{ typeFilter == 'all' ? courseStats.total : filteredStats.status.all }}</span>
                        </a>
                        <a href="{{ path('app_moodia', {status: 'draft', type: typeFilter}) }}" class="moodia-dashboard__filter{{ statusFilter == 'draft' ? ' moodia-dashboard__filter--active' : '' }}">
                            Brouillons
                            <span class="moodia-dashboard__filter-count">{{ typeFilter == 'all' ? (courseStats.draft + courseStats.ready + courseStats.generating) : filteredStats.status.draft }}</span>
                        </a>
                        <a href="{{ path('app_moodia', {status: 'deployed', type: typeFilter}) }}" class="moodia-dashboard__filter{{ statusFilter == 'deployed' ? ' moodia-dashboard__filter--active' : '' }}">
                            Déployés
                            <span class="moodia-dashboard__filter-count">{{ typeFilter == 'all' ? courseStats.deployed : filteredStats.status.deployed }}</span>
                        </a>
                    </div>

                    {# Filtres par type #}
                    <div class="moodia-dashboard__filters">
                        <a href="{{ path('app_moodia', {status: statusFilter, type: 'all'}) }}" class="moodia-dashboard__filter{{ typeFilter == 'all' ? ' moodia-dashboard__filter--active' : '' }}">
                            Tous
                            <span class="moodia-dashboard__filter-count">{{ statusFilter == 'all' ? courseStats.total : filteredStats.type.all }}</span>
                        </a>
                        <a href="{{ path('app_moodia', {status: statusFilter, type: 'course'}) }}" class="moodia-dashboard__filter{{ typeFilter == 'course' ? ' moodia-dashboard__filter--active' : '' }}">
                            Cours
                            <span class="moodia-dashboard__filter-count">{{ statusFilter == 'all' ? typeStats.course : filteredStats.type.course }}</span>
                        </a>
                        <a href="{{ path('app_moodia', {status: statusFilter, type: 'course_quiz'}) }}" class="moodia-dashboard__filter{{ typeFilter == 'course_quiz' ? ' moodia-dashboard__filter--active' : '' }}">
                            Cours + Quiz
                            <span class="moodia-dashboard__filter-count">{{ statusFilter == 'all' ? typeStats.course_quiz : filteredStats.type.course_quiz }}</span>
                        </a>
                        <a href="{{ path('app_moodia', {status: statusFilter, type: 'quiz_only'}) }}" class="moodia-dashboard__filter{{ typeFilter == 'quiz_only' ? ' moodia-dashboard__filter--active' : '' }}">
                            Quiz
                            <span class="moodia-dashboard__filter-count">{{ statusFilter == 'all' ? typeStats.quiz_only : filteredStats.type.quiz_only }}</span>
                        </a>
                    </div>
                </div>

                {# Grille de cartes #}
                <div class="moodia-dashboard__grid">
                    {% for course in courses %}
                        {% set isDeployed = course.status == 'deployed' %}
                        {% set statusClass = isDeployed ? 'deployed' : 'draft' %}
                        {% set statusLabel = isDeployed ? 'Déployé' : 'Brouillon' %}
                        {% set genType = course.generationType %}

                        <a href="{{ path('app_moodia_editor', {uuid: course.uuid}) }}" class="moodia-dashboard__card moodia-dashboard__card--{{ statusClass }} moodia-dashboard__card--{{ genType }}" data-status="{{ statusClass }}" data-type="{{ genType }}">
                            {# Badge type en haut à droite #}
                            <div class="moodia-dashboard__card-badges">
                                <span class="moodia-dashboard__card-type moodia-dashboard__card-type--{{ genType }}">{{ course.generationTypeLabel }}</span>
                            </div>

                            {# Contenu principal #}
                            <div class="moodia-dashboard__card-content">
                                {# Icône du type #}
                                <div class="moodia-dashboard__card-icon">
                                    {% if genType == 'quiz_only' %}
                                        {% include "_components/icons/question.html.twig" %}
                                    {% elseif genType == 'course_quiz' %}
                                        {% include "_components/icons/success.html.twig" %}
                                    {% else %}
                                        {% include "_components/icons/book.html.twig" %}
                                    {% endif %}
                                </div>

                                {# Titre du cours #}
                                <h3 class="moodia-dashboard__card-title">{{ course.title }}</h3>

                                {# Statistiques #}
                                <p class="moodia-dashboard__card-stats">
                                    {% if genType == 'quiz_only' %}
                                        {{ course.questionsCount }} question{{ course.questionsCount > 1 ? 's' : '' }}
                                    {% else %}
                                        {{ course.sectionsCount }} section{{ course.sectionsCount > 1 ? 's' : '' }} · {{ course.pagesCount }} page{{ course.pagesCount > 1 ? 's' : '' }}
                                    {% endif %}
                                </p>
                            </div>

                            {# Paramètres du cours #}
                            {% if course.level or course.duration or course.publicTarget %}
                                <div class="moodia-dashboard__card-params">
                                    {% if course.level %}
                                        {% set levelNum = course.level == 'debutant' ? 1 : (course.level == 'intermediaire' ? 2 : (course.level == 'avance' ? 3 : 4)) %}
                                        {% set levelLabels = {'debutant': 'Débutant', 'intermediaire': 'Intermédiaire', 'avance': 'Avancé', 'expert': 'Expert'} %}
                                        <span class="moodia-dashboard__card-level moodia-dashboard__card-level--{{ levelNum }}">
                                            <span class="moodia-dashboard__card-level-bars">
                                                <span class="moodia-dashboard__card-level-bar{{ levelNum >= 1 ? ' moodia-dashboard__card-level-bar--active' : '' }}"></span>
                                                <span class="moodia-dashboard__card-level-bar{{ levelNum >= 2 ? ' moodia-dashboard__card-level-bar--active' : '' }}"></span>
                                                <span class="moodia-dashboard__card-level-bar{{ levelNum >= 3 ? ' moodia-dashboard__card-level-bar--active' : '' }}"></span>
                                                <span class="moodia-dashboard__card-level-bar{{ levelNum >= 4 ? ' moodia-dashboard__card-level-bar--active' : '' }}"></span>
                                            </span>
                                            <span class="moodia-dashboard__card-level-label">{{ levelLabels[course.level] ?? course.level }}</span>
                                        </span>
                                    {% endif %}
                                    {% if course.duration %}
                                        <span class="moodia-dashboard__card-param moodia-dashboard__card-param--duration">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <circle cx="12" cy="12" r="10"/>
                                                <polyline points="12 6 12 12 16 14"/>
                                            </svg>
                                            {{ course.duration }}h
                                        </span>
                                    {% endif %}
                                    {% if course.publicTarget %}
                                        <span class="moodia-dashboard__card-param moodia-dashboard__card-param--audience" title="{{ course.publicTarget }}">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                                <circle cx="9" cy="7" r="4"/>
                                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                                                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                                            </svg>
                                            {{ course.publicTarget }}
                                        </span>
                                    {% endif %}
                                </div>
                            {% endif %}

                            {# Footer avec date et consommation #}
                            <div class="moodia-dashboard__card-footer">
                                <span class="moodia-dashboard__card-date">
                                    {% if isDeployed and course.deployedAt %}
                                        Déployé le {{ course.deployedAt|date('d/m/Y') }}
                                    {% else %}
                                        Modifié le {{ course.updatedAt|date('d/m/Y') }}
                                    {% endif %}
                                </span>
                                <div class="moodia-dashboard__card-consumption">
                                    <span class="moodia-dashboard__card-tokens">
                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M2 17L12 22L22 17" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M2 12L12 17L22 12" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        {% if course.tokensUsed %}
                                            {{ (course.tokensUsed / 1000)|number_format(1) }}k
                                        {% else %}
                                            –
                                        {% endif %}
                                    </span>
                                    <span class="moodia-dashboard__card-energy">
                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <rect x="1" y="6" width="18" height="12" rx="2" ry="2"/>
                                            <line x1="23" y1="10" x2="23" y2="14"/>
                                            <line x1="6" y1="12" x2="10" y2="12"/>
                                        </svg>
                                        {% if course.energyConsumptionWh %}
                                            {{ course.energyConsumptionWh|number_format(2) }} Wh
                                        {% else %}
                                            –
                                        {% endif %}
                                    </span>
                                </div>
                            </div>
                        </a>
                    {% endfor %}
                </div>

                {# Pagination #}
                {% if totalPages > 1 %}
                    <nav class="moodia-dashboard__pagination">
                        {% if currentPage > 1 %}
                            <a href="{{ path('app_moodia', {page: currentPage - 1, status: statusFilter, type: typeFilter}) }}" class="moodia-dashboard__pagination-btn moodia-dashboard__pagination-btn--prev">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M15 18l-6-6 6-6"/>
                                </svg>
                                Précédent
                            </a>
                        {% endif %}

                        <div class="moodia-dashboard__pagination-pages">
                            {% for p in 1..totalPages %}
                                {% if p == currentPage %}
                                    <span class="moodia-dashboard__pagination-page moodia-dashboard__pagination-page--active">{{ p }}</span>
                                {% elseif p == 1 or p == totalPages or (p >= currentPage - 1 and p <= currentPage + 1) %}
                                    <a href="{{ path('app_moodia', {page: p, status: statusFilter, type: typeFilter}) }}" class="moodia-dashboard__pagination-page">{{ p }}</a>
                                {% elseif p == currentPage - 2 or p == currentPage + 2 %}
                                    <span class="moodia-dashboard__pagination-ellipsis">…</span>
                                {% endif %}
                            {% endfor %}
                        </div>

                        {% if currentPage < totalPages %}
                            <a href="{{ path('app_moodia', {page: currentPage + 1, status: statusFilter, type: typeFilter}) }}" class="moodia-dashboard__pagination-btn moodia-dashboard__pagination-btn--next">
                                Suivant
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M9 18l6-6-6-6"/>
                                </svg>
                            </a>
                        {% endif %}
                    </nav>
                {% endif %}
            {% else %}
                {# État vide - Invitation à créer un cours #}
                <div class="moodia-dashboard__empty">
                    <h2 class="moodia-dashboard__empty-title">Créez votre premier cours</h2>
                    <p class="moodia-dashboard__empty-text">
                        Importez un PDF ou décrivez votre cours, et laissez l'IA générer automatiquement le contenu pédagogique pour Moodle.
                    </p>
                    <a href="{{ path('app_moodia_new') }}" class="moodia-dashboard__empty-btn">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="12" y1="5" x2="12" y2="19"/>
                            <line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                        Commencer
                    </a>
                </div>
            {% endif %}
        </section>
    </main>
</div>
{% endblock %}