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

{% block title %}Nouveau cours - Moodia{% endblock %}

{% block meta_description %}Créez un nouveau cours Moodle à 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">
                <h1 class="moodia__title">Créer un nouveau cours</h1>
                <p class="moodia__subtitle">Choisissez comment vous souhaitez générer votre contenu</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>
        </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>
</div>
{% endblock %}