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

{% block title %}Moodia - Générateur de cours Moodle{% endblock %}

{% block meta_description %}Créez des cours Moodle complets à partir de vos PDF ou d'une simple description. L'IA génère sections, activités et quiz automatiquement.{% endblock %}

{% block body %}
<div class="moodia" data-controller="moodia--wizard">
    {# Contenu principal centré #}
    <main class="moodia__main">
        {# État initial : Choix du mode #}
        <div class="moodia__content" data-moodia--wizard-target="choiceView">
            {# Titre centré #}
            <div class="moodia__hero">
                <div class="moodia__title-row">
                    <div class="moodia__logo">
                        {% include "_components/icons/moodia.html.twig" %}
                    </div>
                    <h1 class="moodia__title">Moodia</h1>
                </div>
                <p class="moodia__subtitle">Créez votre cours Moodle en quelques clics</p>
            </div>

            {# Cartes de choix #}
            <div class="moodia__cards">
                {# Option 1 : Import PDF #}
                <button type="button" class="moodia__card" data-action="click->moodia--wizard#selectPdfMode">
                    <div class="moodia__card-visual">
                        <div class="moodia__card-icon">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                <polyline points="14 2 14 8 20 8"/>
                                <path d="M12 18v-6"/>
                                <path d="M9 15l3-3 3 3"/>
                            </svg>
                        </div>
                        <div class="moodia__card-decoration"></div>
                    </div>
                    <div class="moodia__card-content">
                        <h3 class="moodia__card-title">Importer un PDF</h3>
                        <p class="moodia__card-desc">Transformez votre support de cours existant en formation Moodle structurée</p>
                    </div>
                    <div class="moodia__card-arrow">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M5 12h14"/>
                            <path d="M12 5l7 7-7 7"/>
                        </svg>
                    </div>
                </button>

                {# Option 2 : Génération IA #}
                <button type="button" class="moodia__card moodia__card--ai" data-action="click->moodia--wizard#selectPromptMode">
                    <div class="moodia__card-visual">
                        <div class="moodia__card-icon">
                            {% include "_components/icons/sparkles.html.twig" %}
                        </div>
                        <div class="moodia__card-decoration"></div>
                    </div>
                    <div class="moodia__card-content">
                        <h3 class="moodia__card-title">Générer avec l'IA</h3>
                        <p class="moodia__card-desc">Décrivez votre cours et laissez l'IA créer le contenu pédagogique</p>
                    </div>
                    <div class="moodia__card-arrow">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M5 12h14"/>
                            <path d="M12 5l7 7-7 7"/>
                        </svg>
                    </div>
                </button>
            </div>

            {# Historique des cours - en dessous des choix #}
            {% if draftCourses|length > 0 or deployedCourses|length > 0 %}
                <hr class="moodia__separator">

                <div class="moodia__history">
                    <h2 class="moodia__history-title">Mes cours</h2>

                    <div class="moodia__history-list">
                        {# Brouillons en premier (cliquables) #}
                        {% for course in draftCourses %}
                            <a href="{{ path('app_moodia_editor', {uuid: course.uuid}) }}" class="moodia__history-item moodia__history-item--draft moodia__history-item--{{ course.generationType }}">
                                <div class="moodia__history-item-icon">
                                    {% if course.generationType == 'quiz_only' %}
                                        {% include "_components/icons/question.html.twig" %}
                                    {% elseif course.generationType == 'course_quiz' %}
                                        {% include "_components/icons/success.html.twig" %}
                                    {% else %}
                                        {% include "_components/icons/book.html.twig" %}
                                    {% endif %}
                                </div>
                                <div class="moodia__history-item-content">
                                    <div class="moodia__history-item-header">
                                        <span class="moodia__history-item-title">{{ course.title }}</span>
                                        <span class="moodia__history-item-status moodia__history-item-status--draft">En cours</span>
                                    </div>
                                    <div class="moodia__history-item-meta">
                                        {# Badge type de cours #}
                                        <span class="moodia__history-item-type moodia__history-item-type--{{ course.generationType }}">
                                            {{ course.generationTypeLabel }}
                                        </span>
                                        <span class="moodia__history-item-date">{{ course.createdAt|date('d/m/Y') }}</span>
                                        {% if course.generationType == 'quiz_only' %}
                                            <span class="moodia__history-item-stats">
                                                {{ course.questionsCount }} question{{ course.questionsCount > 1 ? 's' : '' }}
                                            </span>
                                        {% else %}
                                            <span class="moodia__history-item-stats">
                                                {{ course.sections|length }} section{{ course.sections|length > 1 ? 's' : '' }}
                                            </span>
                                        {% endif %}
                                    </div>
                                    {# Paramètres configurés #}
                                    {% if course.level or course.duration or course.publicTarget %}
                                        <div class="moodia__history-item-params">
                                            {% if course.level %}
                                                <span class="moodia__history-item-param">{{ course.level }}</span>
                                            {% endif %}
                                            {% if course.duration %}
                                                <span class="moodia__history-item-param">{{ course.duration }}h</span>
                                            {% endif %}
                                            {% if course.publicTarget %}
                                                <span class="moodia__history-item-param moodia__history-item-param--audience">{{ course.publicTarget }}</span>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="moodia__history-item-arrow">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M5 12h14"/>
                                        <path d="M12 5l7 7-7 7"/>
                                    </svg>
                                </div>
                            </a>
                        {% endfor %}

                        {# Cours déployés ensuite (non cliquables) #}
                        {% for course in deployedCourses %}
                            <div class="moodia__history-item moodia__history-item--deployed moodia__history-item--{{ course.generationType }}">
                                <div class="moodia__history-item-icon">
                                    {% if course.generationType == 'quiz_only' %}
                                        {% include "_components/icons/question.html.twig" %}
                                    {% elseif course.generationType == 'course_quiz' %}
                                        {% include "_components/icons/success.html.twig" %}
                                    {% else %}
                                        {% include "_components/icons/book.html.twig" %}
                                    {% endif %}
                                </div>
                                <div class="moodia__history-item-content">
                                    <div class="moodia__history-item-header">
                                        <span class="moodia__history-item-title">{{ course.title }}</span>
                                        <span class="moodia__history-item-status moodia__history-item-status--deployed">Déployé</span>
                                    </div>
                                    <div class="moodia__history-item-meta">
                                        {# Badge type de cours #}
                                        <span class="moodia__history-item-type moodia__history-item-type--{{ course.generationType }}">
                                            {{ course.generationTypeLabel }}
                                        </span>
                                        <span class="moodia__history-item-date">{{ course.deployedAt|date('d/m/Y') }}</span>
                                        {% if course.generationType == 'quiz_only' %}
                                            <span class="moodia__history-item-stats">
                                                {{ course.questionsCount }} question{{ course.questionsCount > 1 ? 's' : '' }}
                                            </span>
                                        {% else %}
                                            <span class="moodia__history-item-stats">
                                                {{ course.sections|length }} section{{ course.sections|length > 1 ? 's' : '' }}
                                            </span>
                                        {% endif %}
                                    </div>
                                    {# Paramètres configurés #}
                                    {% if course.level or course.duration or course.publicTarget %}
                                        <div class="moodia__history-item-params">
                                            {% if course.level %}
                                                <span class="moodia__history-item-param">{{ course.level }}</span>
                                            {% endif %}
                                            {% if course.duration %}
                                                <span class="moodia__history-item-param">{{ course.duration }}h</span>
                                            {% endif %}
                                            {% if course.publicTarget %}
                                                <span class="moodia__history-item-param moodia__history-item-param--audience">{{ course.publicTarget }}</span>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>

        {# Vue PDF : Zone d'upload #}
        <div class="moodia__content moodia__content--pdf" data-moodia--wizard-target="pdfView" hidden>
            {# Titre #}
            <div class="moodia__view-header">
                <div class="moodia__view-icon moodia__view-icon--pdf">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <path d="M12 18v-6"/>
                        <path d="M9 15l3-3 3 3"/>
                    </svg>
                </div>
                <div class="moodia__view-text">
                    <h2 class="moodia__view-title">Importez votre document</h2>
                    <p class="moodia__view-subtitle">Déposez un fichier PDF contenant le contenu de votre cours</p>
                </div>
            </div>

            {# Dropzone #}
            <div class="moodia__dropzone" data-moodia--wizard-target="dropzone" data-action="dragover->moodia--wizard#handleDragOver dragenter->moodia--wizard#handleDragEnter dragleave->moodia--wizard#handleDragLeave drop->moodia--wizard#handleDrop">
                <input type="file" id="moodia-pdf-input" accept=".pdf" class="moodia__dropzone-input" data-moodia--wizard-target="fileInput" data-action="change->moodia--wizard#handleFileSelect">
                <label for="moodia-pdf-input" class="moodia__dropzone-label">
                    <div class="moodia__dropzone-visual">
                        <div class="moodia__dropzone-icon">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                <polyline points="17 8 12 3 7 8"/>
                                <line x1="12" y1="3" x2="12" y2="15"/>
                            </svg>
                        </div>
                        <div class="moodia__dropzone-text">
                            <span class="moodia__dropzone-main">Glissez votre fichier ici</span>
                            <span class="moodia__dropzone-sub">ou <strong>parcourez</strong> vos fichiers</span>
                        </div>
                    </div>
                    <div class="moodia__dropzone-info">
                        <span>PDF</span>
                        <span>•</span>
                        <span>20 Mo max</span>
                    </div>
                </label>
            </div>

            {# Fichier sélectionné #}
            <div class="moodia__file" data-moodia--wizard-target="filePreview" hidden>
                <div class="moodia__file-visual">
                    <div class="moodia__file-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                            <polyline points="14 2 14 8 20 8"/>
                        </svg>
                    </div>
                    <div class="moodia__file-info">
                        <span class="moodia__file-name" data-moodia--wizard-target="fileName"></span>
                        <span class="moodia__file-size" data-moodia--wizard-target="fileSize"></span>
                    </div>
                </div>
                <button type="button" class="moodia__file-remove" data-action="click->moodia--wizard#removeFile" title="Supprimer">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>

            {# Footer avec navigation #}
            <div class="moodia__actions">
                <button type="button" class="moodia__btn-secondary" data-action="click->moodia--wizard#backToChoice">
                    <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>
                    Changer de méthode
                </button>
                <button type="button" class="moodia__cta" data-action="click->moodia--wizard#continueToConfig" data-moodia--wizard-target="pdfContinueBtn" disabled>
                    Configurer mon 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>
        </div>

        {# Vue Prompt : Zone de texte #}
        <div class="moodia__content moodia__content--prompt" data-moodia--wizard-target="promptView" hidden>
            {# Titre #}
            <div class="moodia__view-header">
                <div class="moodia__view-icon moodia__view-icon--ai">
                    {% include "_components/icons/sparkles.html.twig" %}
                </div>
                <div class="moodia__view-text">
                    <h2 class="moodia__view-title">Décrivez votre cours</h2>
                    <p class="moodia__view-subtitle">Saisissez une description détaillée du contenu à générer</p>
                </div>
            </div>

            {# Zone de texte #}
            <div class="moodia__textarea-wrapper">
                <textarea
                    id="moodia-prompt"
                    class="moodia__textarea"
                    placeholder="Ex: Un cours d'introduction à la programmation Python pour débutants, couvrant les bases (variables, boucles, fonctions) avec des exercices pratiques..."
                    data-moodia--wizard-target="promptInput"
                    data-action="input->moodia--wizard#handlePromptInput"
                    rows="5"
                    maxlength="1000"
                ></textarea>
                <span class="moodia__textarea-count" data-moodia--wizard-target="promptCount">0 / 1000 (min. 20)</span>
            </div>

            {# Footer avec navigation #}
            <div class="moodia__actions">
                <button type="button" class="moodia__btn-secondary" data-action="click->moodia--wizard#backToChoice">
                    <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>
                    Changer de méthode
                </button>
                <button type="button" class="moodia__cta" data-action="click->moodia--wizard#continueToConfig" data-moodia--wizard-target="promptContinueBtn" disabled>
                    Générer 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>
        </div>
    </main>

    {# Stepper visuel en bas
    <footer class="moodia__stepper">
        <div class="moodia__stepper-track">
            <div class="moodia__stepper-line">
                <div class="moodia__stepper-progress" data-moodia--wizard-target="stepperFill"></div>
            </div>
            <div class="moodia__stepper-steps">
                <div class="moodia__stepper-step moodia__stepper-step--active" data-step="1">
                    <div class="moodia__stepper-dot">
                        <span class="moodia__stepper-number">1</span>
                        <svg class="moodia__stepper-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                    </div>
                    <span class="moodia__stepper-label">Import</span>
                </div>
                <div class="moodia__stepper-step" data-step="2">
                    <div class="moodia__stepper-dot">
                        <span class="moodia__stepper-number">2</span>
                        <svg class="moodia__stepper-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                    </div>
                    <span class="moodia__stepper-label">Configuration</span>
                </div>
                <div class="moodia__stepper-step" data-step="3">
                    <div class="moodia__stepper-dot">
                        <span class="moodia__stepper-number">3</span>
                        <svg class="moodia__stepper-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                    </div>
                    <span class="moodia__stepper-label">Génération</span>
                </div>
                <div class="moodia__stepper-step" data-step="4">
                    <div class="moodia__stepper-dot">
                        <span class="moodia__stepper-number">4</span>
                        <svg class="moodia__stepper-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                    </div>
                    <span class="moodia__stepper-label">Export</span>
                </div>
            </div>
        </div>
    </footer> #}
</div>
{% endblock %}