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

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

{% block meta_description %}Tableau de bord Bubul : statistiques, accès rapides aux outils IA et gestion de vos contenus pédagogiques.{% endblock %}

{% block body %}
<div class="dashboard-container">
    {# Header #}
    <header class="dashboard-header">
        <div class="dashboard-header__content">
            <div>
                <h1 class="dashboard-title">Bonjour {{ user.firstName }} 👋</h1>
                <p class="dashboard-subtitle">Bienvenue sur votre tableau de bord ! Retrouvez vos statistiques et accédez à tous vos outils IA. Merci d'être participant à notre bêta.</p>
            </div>
            {% include '_components/stateMoodle.html.twig' with {'moodleStatus': moodleStatus} %}
        </div>
    </header>

    {# Statistics Cards #}
    <section class="dashboard-stats">
        <div class="stat-card stat-card--primary">
            <div class="stat-card__icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="stat-card__content">
                <p class="stat-card__label">Tokens restants</p>
                <p class="stat-card__value">{{ stats.tokens_remaining|number_format(0, ',', ' ') }}</p>
                {% if stats.tokens_total > 0 %}
                <div class="stat-card__progress">
                    <div class="progress-bar">
                        <div class="progress-bar__fill" style="width: {{ ((stats.tokens_total - stats.tokens_remaining) / stats.tokens_total * 100)|round }}%"></div>
                    </div>
                    <p class="stat-card__detail">{{ ((stats.tokens_total - stats.tokens_remaining) / stats.tokens_total * 100)|round }}% utilisés</p>
                </div>
                {% else %}
                <p class="stat-card__detail">Aucun quota défini</p>
                {% endif %}
            </div>
        </div>

        <div class="stat-card stat-card--success">
            <div class="stat-card__icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="stat-card__content">
                <p class="stat-card__label">Cours créés</p>
                <p class="stat-card__value">{{ stats.courses_created }}</p>
                <p class="stat-card__detail">Déployés sur Moodle</p>
            </div>
        </div>

        <div class="stat-card stat-card--warning">
            <div class="stat-card__icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 20h9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="stat-card__content">
                <p class="stat-card__label">Activités générées</p>
                <p class="stat-card__value">{{ stats.activities_generated }}</p>
                <p class="stat-card__detail">Quiz, devoirs, forums...</p>
            </div>
        </div>

        <div class="stat-card stat-card--info">
            <div class="stat-card__icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </div>
            <div class="stat-card__content">
                <p class="stat-card__label">Temps économisé</p>
                <p class="stat-card__value">{{ stats.time_saved_hours }}h</p>
                <p class="stat-card__detail">Économisé avec Moodia</p>
            </div>
        </div>
    </section>

    {# Quick Actions #}
    <section class="dashboard-section">
        <h2 class="section-title">Accès rapides</h2>
        <div class="quick-actions">
            {% for action in quickActions %}
            {% if action.disabled|default(false) %}
            <div class="quick-action quick-action--{{ action.color }} quick-action--disabled" title="Fonctionnalité à venir prochainement">
                <div class="quick-action__icon">
                    {% include '_components/icons/' ~ action.icon ~ '.html.twig' %}
                </div>
                <div class="quick-action__content">
                    <span class="quick-action__badge">À venir</span>
                    <h3 class="quick-action__title">{{ action.title }}</h3>
                    <p class="quick-action__description">{{ action.description }}</p>
                </div>
                <div class="quick-action__arrow">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </div>
            {% else %}
            <a href="{{ path(action.route) }}" class="quick-action quick-action--{{ action.color }}">
                <div class="quick-action__icon">
                    {% include '_components/icons/' ~ action.icon ~ '.html.twig' %}
                </div>
                <div class="quick-action__content">
                    <h3 class="quick-action__title">{{ action.title }}</h3>
                    <p class="quick-action__description">{{ action.description }}</p>
                </div>
                <div class="quick-action__arrow">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </a>
            {% endif %}
            {% endfor %}
        </div>
    </section>

    <div class="dashboard-grid">
        {# Getting Started #}
        <section class="dashboard-section dashboard-card">
            <div class="dashboard-card__header">
                <h2 class="section-title">Guide de démarrage</h2>
                <span class="badge badge--primary">Nouveau</span>
            </div>
            <div class="dashboard-card__body">
                <div class="guide-steps">
                    {# Étape 1 : Créer un cours sur Moodle #}
                    <div class="guide-step {% if gettingStarted.step1Completed %}guide-step--completed{% else %}guide-step--active{% endif %}">
                        <div class="guide-step__icon">
                            {% if gettingStarted.step1Completed %}
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.667 5L7.5 14.167L3.333 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            {% else %}
                                1
                            {% endif %}
                        </div>
                        <div class="guide-step__content">
                            <h4 class="guide-step__title">Créer un cours sur Moodle</h4>
                            {% if gettingStarted.step1Completed %}
                                <p class="guide-step__description">Premier cours créé avec succès !</p>
                            {% else %}
                                <p class="guide-step__description">Uploadez un PDF et générez un cours complet</p>
                                <a href="{{ path('app_moodia') }}" class="guide-step__link">Créer un cours →</a>
                            {% endif %}
                        </div>
                    </div>

                    {# Étape 2 : Créer une présentation #}
                    <div class="guide-step {% if gettingStarted.step2Completed %}guide-step--completed{% elseif gettingStarted.step1Completed and not gettingStarted.step2Completed %}guide-step--active{% endif %}">
                        <div class="guide-step__icon">
                            {% if gettingStarted.step2Completed %}
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.667 5L7.5 14.167L3.333 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            {% else %}
                                2
                            {% endif %}
                        </div>
                        <div class="guide-step__content">
                            <h4 class="guide-step__title">Créer une présentation</h4>
                            {% if gettingStarted.step2Completed %}
                                <p class="guide-step__description">Première présentation créée !</p>
                            {% else %}
                                <p class="guide-step__description">Générez un PowerPoint avec Slidia</p>
                                <a href="{{ path('app_slidia') }}" class="guide-step__link">Créer une présentation →</a>
                            {% endif %}
                        </div>
                    </div>

                    {# Étape 3 : Discuter avec Serenia 10 fois #}
                    <div class="guide-step {% if gettingStarted.step3Completed %}guide-step--completed{% elseif gettingStarted.step2Completed and not gettingStarted.step3Completed %}guide-step--active{% endif %}">
                        <div class="guide-step__icon">
                            {% if gettingStarted.step3Completed %}
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.667 5L7.5 14.167L3.333 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            {% else %}
                                3
                            {% endif %}
                        </div>
                        <div class="guide-step__content">
                            <h4 class="guide-step__title">Discuter avec Serenia</h4>
                            {% if gettingStarted.step3Completed %}
                                <p class="guide-step__description">10 conversations complétées !</p>
                            {% else %}
                                <p class="guide-step__description">{{ gettingStarted.sereniaCount }}/{{ gettingStarted.sereniaTarget }} conversations</p>
                                <a href="{{ path('app_seren_ia') }}" class="guide-step__link">Discuter maintenant →</a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# Recent Activity #}
        <section class="dashboard-section dashboard-card">
            <div class="dashboard-card__header">
                <h2 class="section-title">Activité récente</h2>
            </div>
            <div class="dashboard-card__body">
                {% if recentActivity|length > 0 %}
                <div class="activity-list">
                    {% for activity in recentActivity %}
                    <div class="activity-item">
                        <div class="activity-item__icon">
                            {% if activity.type|lower == 'moodia' %}
                                {% include '_components/icons/moodia.html.twig' %}
                            {% elseif activity.type|lower == 'slidia' %}
                                {% include '_components/icons/slidia.html.twig' %}
                            {% elseif activity.type|lower == 'serenia' %}
                                {% include '_components/icons/seren_ia.html.twig' %}
                            {% else %}
                                {% include '_components/icons/moodia.html.twig' %}
                            {% endif %}
                        </div>
                        <div class="activity-item__content">
                            <h4 class="activity-item__title">{{ activity.title }}</h4>
                            <p class="activity-item__meta">
                                <span class="activity-item__tokens">
                                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#0C81E4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M2 17L12 22L22 17" stroke="#0C81E4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M2 12L12 17L22 12" stroke="#0C81E4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    {{ activity.tokens }}
                                </span>
                                <span class="activity-item__energy">
                                    {% include "_components/icons/battery.html.twig" %}
                                    {{ activity.energy|number_format(4) }} Wh
                                </span>
                                · {{ activity.date|date('d M Y', 'Europe/Paris') }}
                            </p>
                        </div>
                        <span class="activity-item__badge">{{ activity.type }}</span>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty-state">
                    <div class="empty-state__icon">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <p class="empty-state__text">Aucune activité récente</p>
                    <p class="empty-state__subtext">Créez votre premier cours pour commencer</p>
                </div>
                {% endif %}
            </div>
        </section>
    </div>
</div>
{% endblock %}