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

{% block title %}Moodia - Génération du cours{% endblock %}

{% block meta_description %}Génération de votre cours Moodle en temps réel avec l'IA.{% endblock %}

{% block body %}
<div class="moodia moodia--generation" data-controller="moodia--generation"
     data-moodia--generation-stream-url-value="{{ path('app_moodia_generate_stream') }}"
     data-moodia--generation-editor-url-value="{{ path('app_moodia_editor') }}"
     data-moodia--generation-save-url-value="{{ path('app_moodia_save_course') }}">
    <main class="moodia__main">
        <div class="moodia__content moodia__content--generation">
            {# En-tête avec progression #}
            <div class="generation__header">
                <div class="generation__title-row">
                    <div class="generation__icon">
                        {% include "_components/icons/moodia.html.twig" %}
                    </div>
                    <div class="generation__title-text">
                        <h1 class="generation__title">{{ config.courseTitle }}</h1>
                        <p class="generation__subtitle" data-moodia--generation-target="status">Initialisation...</p>
                    </div>
                </div>

                {# Barre de progression #}
                <div class="generation__progress">
                    <div class="generation__progress-bar">
                        <div class="generation__progress-fill" data-moodia--generation-target="progressBar" style="width: 0%"></div>
                    </div>
                    <div class="generation__progress-text">
                        <span data-moodia--generation-target="progressText">0%</span>
                        <span class="generation__progress-step" data-moodia--generation-target="stepText">Préparation</span>
                    </div>
                </div>
            </div>

            {# Zone de prévisualisation du cours en construction #}
            <div class="generation__preview" data-moodia--generation-target="preview">
                {# Structure du cours (Table of Contents) #}
                <aside class="generation__toc" data-moodia--generation-target="toc">
                    <h3 class="generation__toc-title">Structure du cours</h3>
                    <ul class="generation__toc-list" data-moodia--generation-target="tocList">
                        {# Les sections seront ajoutées dynamiquement #}
                    </ul>
                </aside>

                {# Contenu principal #}
                <div class="generation__content" data-moodia--generation-target="content">
                    {# Animation de chargement initiale #}
                    <div class="generation__loading" data-moodia--generation-target="loading">
                        <div class="generation__loading-animation">
                            <div class="generation__robot">
                                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="12" cy="2" r="1" fill="currentColor"/>
                                    <line x1="12" y1="3" x2="12" y2="5" stroke="currentColor" stroke-width="2"/>
                                    <rect x="7" y="5" width="10" height="10" rx="2" stroke="currentColor" stroke-width="2" fill="none"/>
                                    <circle cx="10" cy="9" r="1.5" fill="currentColor"/>
                                    <circle cx="14" cy="9" r="1.5" fill="currentColor"/>
                                    <path d="M9 12 Q12 13.5 15 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none"/>
                                    <rect x="9" y="15" width="6" height="5" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
                                    <line x1="7" y1="16" x2="5" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                    <line x1="17" y1="16" x2="19" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                                <div class="generation__thinking">
                                    <div class="thinking-dot"></div>
                                    <div class="thinking-dot"></div>
                                    <div class="thinking-dot"></div>
                                </div>
                            </div>
                            <p class="generation__loading-text">Analyse du contenu...</p>
                        </div>
                    </div>

                    {# Sections générées (cachées initialement) #}
                    <div class="generation__sections" data-moodia--generation-target="sections" hidden>
                        {# Les sections seront ajoutées dynamiquement ici #}
                    </div>
                </div>
            </div>

            {# Actions (cachées pendant la génération) #}
            <div class="generation__actions" data-moodia--generation-target="actions" hidden>
                <a href="{{ path('app_moodia_configuration') }}" class="moodia__btn-secondary">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M19 12H5"/>
                        <path d="M12 19l-7-7 7-7"/>
                    </svg>
                    Modifier la configuration
                </a>
                <button type="button" class="moodia__cta" data-action="click->moodia--generation#goToEditor" data-moodia--generation-target="continueBtn" disabled>
                    Éditer le cours
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M5 12h14"/>
                        <path d="M12 5l7 7-7 7"/>
                    </svg>
                </button>
            </div>

            {# Message d'erreur (caché par défaut) #}
            <div class="generation__error" data-moodia--generation-target="error" hidden>
                <div class="generation__error-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"/>
                        <line x1="15" y1="9" x2="9" y2="15"/>
                        <line x1="9" y1="9" x2="15" y2="15"/>
                    </svg>
                </div>
                <p class="generation__error-text" data-moodia--generation-target="errorText"></p>
                <button type="button" class="moodia__btn-secondary" data-action="click->moodia--generation#retry">
                    Réessayer
                </button>
            </div>
        </div>
    </main>
</div>
{% endblock %}