{#
 # ============================================================================
 # PAGE: MOODIA NEW - WIZARD CRÉATION DE COURS
 # ============================================================================
 #
 # Wizard de choix PDF/Prompt + upload/saisie.
 # Design premium avec animations et illustrations.
 #
 # ============================================================================
 # STIMULUS CONTROLLER
 # ============================================================================
 #
 # data-controller="moodia--wizard"
 # Targets: choiceView, pdfView, promptView, dropzone, fileInput, filePreview,
 #          fileName, fileSize, pdfContinueBtn, promptInput, promptCount,
 #          promptContinueBtn
 #
 # ============================================================================
 #}

{% 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="min-h-screen" data-controller="moodia--wizard">

    {# ====================================================================
       VUE 1 : CHOIX DU MODE (PDF ou IA)
       ==================================================================== #}

    <div class="max-w-6xl mx-auto px-4 sm:px-6" data-moodia--wizard-target="choiceView">

        {# Header avec animation #}
        <header class="text-center mb-12">
            <div class="inline-flex items-center justify-center w-20 h-20 mb-6
                        bg-gradient-to-br from-primary/10 via-primary/5 to-transparent
                        rounded-3xl border border-primary/10 shadow-lg shadow-primary/5">
                {% include '_atoms/icon/icon.html.twig' with {
                    name: 'bubul-moodia',
                    size: '3xl',
                    colorPrimary: 'primary',
                    colorSecondary: 'primary'
                } only %}
            </div>
            <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 font-secondary mb-3">
                Créez votre cours Moodle
            </h1>
            <p class="text-lg text-gray-500 max-w-xl mx-auto">
                Choisissez votre méthode et laissez l'IA structurer votre contenu pédagogique
            </p>
        </header>

        {# Cards de choix - Utilise l'organisme choice-card #}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

            {# ========== OPTION 1 : Import PDF (IA → verrouillé si solde insuffisant) ========== #}
            {% include '_organisms/choice-card/choice-card.html.twig' with {
                title: 'Importer un document',
                description: 'Importez votre PDF et Moodia analysera le contenu pour créer automatiquement la structure, les sections et les activités.',
                icon: 'document',
                color: 'primary',
                features: [
                    { text: 'Structure automatique du cours' },
                    { text: 'Extraction des images et illustrations' },
                    { text: 'Génération de quiz adaptatifs' }
                ],
                action: canCreate ? 'click->moodia--wizard#selectPdfMode' : null,
                disabled: not canCreate,
                badge: canCreate ? null : 'Passer en Pro',
                badgeIcon: canCreate ? null : 'crown',
                badgeVariant: 'pro',
                badgeHref: canCreate ? null : path('app_upgrade')
            } only %}

            {# ========== OPTION 2 : Génération IA (IA → verrouillé si solde insuffisant) ========== #}
            {% include '_organisms/choice-card/choice-card.html.twig' with {
                title: 'Générer avec l\'IA',
                description: 'Décrivez votre sujet en quelques mots et Moodia crée l\'intégralité du cours pour vous.',
                icon: 'magic-stick',
                color: 'violet',
                features: [
                    { text: 'Contenu généré de zéro' },
                    { text: 'Approche pédagogique personnalisée' },
                    { text: 'Idéal pour nouveaux sujets' }
                ],
                action: canCreate ? 'click->moodia--wizard#selectPromptMode' : null,
                disabled: not canCreate,
                badge: canCreate ? null : 'Passer en Pro',
                badgeIcon: canCreate ? null : 'crown',
                badgeVariant: 'pro',
                badgeHref: canCreate ? null : path('app_upgrade')
            } only %}

            {# ========== OPTION 3 : Rédiger manuellement ========== #}
            {% include '_organisms/choice-card/choice-card.html.twig' with {
                title: 'Rédiger manuellement',
                description: 'Construisez votre cours vous-même, section par section, sans assistance IA.',
                icon: 'edit',
                color: 'success',
                features: [
                    { text: 'Contrôle total du contenu' },
                    { text: 'Structure personnalisée' },
                    { text: 'Sans consommation de tokens' }
                ],
                href: path('app_moodia_create_manual')
            } only %}
        </div>

        {# Bouton retour #}
        <div class="flex justify-center mt-12">
            {% include '_atoms/button/button.html.twig' with {
                variant: 'back',
                label: 'Retour à mes cours',
                href: path('app_moodia'),
                size: 'md'
            } only %}
        </div>
    </div>

    {# ====================================================================
       VUE 2 : UPLOAD PDF
       ==================================================================== #}

    <div class="max-w-2xl mx-auto px-4 sm:px-6 py-10 lg:py-16" data-moodia--wizard-target="pdfView" hidden>

        {# Header #}
        <header class="mb-8">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'upload', size: 'xl', colorPrimary: 'primary', colorSecondary: 'primary' } only %}
                </div>
                <div>
                    <h2 class="text-2xl font-bold text-gray-900 font-secondary">Importez votre document</h2>
                    <p class="text-gray-500 mt-1">Format PDF uniquement • Maximum 20 Mo</p>
                </div>
            </div>
        </header>

        {# Zone de dépôt améliorée #}
        <div class="mb-8"
             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="sr-only"
                   data-moodia--wizard-target="fileInput"
                   data-action="change->moodia--wizard#handleFileSelect">

            <label for="moodia-pdf-input"
                   class="group flex flex-col items-center justify-center gap-6 min-h-[280px] p-10
                          bg-gradient-to-br from-gray-50 to-white
                          border-2 border-dashed border-gray-200 rounded-3xl
                          cursor-pointer transition-all duration-300
                          hover:border-primary hover:bg-gradient-to-br hover:from-primary/5 hover:to-primary/10
                          hover:shadow-[0_8px_40px_rgba(12,129,228,0.1)]">

                {# Icône animée #}
                <div class="relative">
                    <div class="w-20 h-20 rounded-2xl bg-white border border-gray-200 shadow-lg flex items-center justify-center
                                group-hover:scale-110 group-hover:border-primary/30 group-hover:shadow-primary/20
                                transition-all duration-300">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'upload', size: '2xl', colorPrimary: 'primary', colorSecondary: 'primary' } only %}
                    </div>
                    {# Pulse effect #}
                    <div class="absolute inset-0 rounded-2xl bg-primary/20 animate-ping opacity-0 group-hover:opacity-75"></div>
                </div>

                <div class="text-center">
                    <span class="block text-lg font-semibold text-gray-700 mb-2 group-hover:text-primary transition-colors">
                        Glissez votre fichier ici
                    </span>
                    <span class="text-sm text-gray-400">
                        ou <span class="text-primary font-semibold underline underline-offset-2">parcourez vos fichiers</span>
                    </span>
                </div>

                {# Formats acceptés #}
                <div class="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-full">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'document', size: 'sm', color: 'gray' } only %}
                    <span class="text-xs font-medium text-gray-500">PDF uniquement</span>
                </div>
            </label>
        </div>

        {# Aperçu du fichier sélectionné #}
        <div class="flex items-center gap-5 p-6 mb-8 bg-gradient-to-r from-primary/5 to-primary/10 border border-primary/20 rounded-2xl shadow-sm"
             data-moodia--wizard-target="filePreview" hidden>
            <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center shadow-lg shadow-primary/30">
                {% include '_atoms/icon/icon.html.twig' with { name: 'document', size: 'xl', color: 'white' } only %}
            </div>
            <div class="flex-1 min-w-0">
                <span class="block text-lg font-semibold text-gray-900 truncate" data-moodia--wizard-target="fileName"></span>
                <span class="text-sm text-gray-500" data-moodia--wizard-target="fileSize"></span>
            </div>
            {% include '_atoms/button/button.html.twig' with {
                icon: 'trash',
                iconOnly: true,
                variant: 'ghost',
                size: 'md',
                radius: 'xl',
                type: 'button',
                class: 'hover:text-error hover:bg-error/10',
                attr: {
                    'data-action': 'click->moodia--wizard#removeFile',
                    'data-tooltip': 'Supprimer'
                }
            } only %}
        </div>

        {# Actions — molécule partagée avec Slidia et Scormia #}
        {% include '_molecules/step-nav/step-nav.html.twig' with {
            back: {
                attr: { 'data-action': 'click->moodia--wizard#backToChoice' }
            },
            next: {
                label: 'Analyser le document',
                disabled: true,
                attr: {
                    'data-action': 'click->moodia--wizard#continueToConfig',
                    'data-moodia--wizard-target': 'pdfContinueBtn'
                }
            }
        } only %}
    </div>

    {# ====================================================================
       VUE 3 : SAISIE PROMPT
       ==================================================================== #}

    <div class="max-w-2xl mx-auto px-4 sm:px-6 py-10 lg:py-16" data-moodia--wizard-target="promptView" hidden>

        {# Header #}
        <header class="mb-8">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#8B5CF6]/10 to-[#8B5CF6]/5 border border-[#8B5CF6]/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'magic-stick', size: 'xl', colorPrimary: '#8B5CF6', colorSecondary: '#8B5CF6' } only %}
                </div>
                <div>
                    <h2 class="text-2xl font-bold text-gray-900 font-secondary">Décrivez votre cours</h2>
                    <p class="text-gray-500 mt-1">Soyez précis pour un meilleur résultat</p>
                </div>
            </div>
        </header>

        {# Textarea amélioré #}
        <div class="relative mb-6">
            <textarea
                id="moodia-prompt"
                class="w-full min-h-[200px] p-6 pb-12 text-base leading-relaxed text-gray-900
                       bg-white border-2 border-gray-200 rounded-2xl resize-none
                       shadow-[0_4px_24px_rgba(0,0,0,0.04)]
                       transition-all duration-300
                       placeholder:text-gray-400
                       focus:outline-none focus:border-[#8B5CF6] focus:shadow-[0_8px_40px_rgba(139,92,246,0.1)]"
                placeholder="Exemple : Un cours d'introduction à la programmation Python pour des étudiants de première année. Le cours doit couvrir les bases (variables, boucles, fonctions) avec des exercices pratiques et des quiz d'auto-évaluation..."
                data-moodia--wizard-target="promptInput"
                data-action="input->moodia--wizard#handlePromptInput"
                rows="8"
                maxlength="1000"
            ></textarea>
            <div class="absolute bottom-4 right-4 flex items-center gap-3">
                <span class="text-xs text-gray-400 tabular-nums bg-white/80 backdrop-blur px-2 py-1 rounded-lg"
                      data-moodia--wizard-target="promptCount">0 / 1000</span>
            </div>
        </div>

        {# Suggestions de prompts #}
        <div class="mb-8">
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Essayer un exemple</p>
            {% set suggestionClass = 'bg-white border border-gray-200 shadow-sm hover:border-[#8B5CF6]/30 hover:bg-[#8B5CF6]/5 hover:text-[#8B5CF6]' %}

            <div class="flex flex-wrap gap-2">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Python pour débutants',
                    variant: 'ghost',
                    size: 'sm',
                    icon: 'book',
                    iconPosition: 'left',
                    radius: 'xl',
                    type: 'button',
                    class: suggestionClass,
                    attr: {
                        'data-action': 'click->moodia--wizard#insertSuggestion',
                        'data-suggestion': "Cours d'introduction à la programmation Python pour des étudiants de première année. Couvrir les variables, les boucles, les fonctions et la manipulation de fichiers. Inclure des exemples concrets et des exercices progressifs."
                    }
                } only %}

                {% include '_atoms/button/button.html.twig' with {
                    label: 'Cybersécurité en entreprise',
                    variant: 'ghost',
                    size: 'sm',
                    icon: 'users',
                    iconPosition: 'left',
                    radius: 'xl',
                    type: 'button',
                    class: suggestionClass,
                    attr: {
                        'data-action': 'click->moodia--wizard#insertSuggestion',
                        'data-suggestion': "Formation aux bonnes pratiques de cybersécurité en entreprise. Aborder le phishing, la gestion des mots de passe, la protection des données sensibles et les réflexes à adopter face aux menaces courantes. Public cible : salariés non-techniques."
                    }
                } only %}

                {% include '_atoms/button/button.html.twig' with {
                    label: 'Marketing digital',
                    variant: 'ghost',
                    size: 'sm',
                    icon: 'chart',
                    iconPosition: 'left',
                    radius: 'xl',
                    type: 'button',
                    class: suggestionClass,
                    attr: {
                        'data-action': 'click->moodia--wizard#insertSuggestion',
                        'data-suggestion': "Cours de marketing digital couvrant le SEO, les réseaux sociaux, l'email marketing et la publicité en ligne. Niveau intermédiaire avec études de cas réelles, stratégies concrètes et quiz d'évaluation à chaque section."
                    }
                } only %}

                {% include '_atoms/button/button.html.twig' with {
                    label: 'Gestion de projet Scrum',
                    variant: 'ghost',
                    size: 'sm',
                    icon: 'crown',
                    iconPosition: 'left',
                    radius: 'xl',
                    type: 'button',
                    class: suggestionClass,
                    attr: {
                        'data-action': 'click->moodia--wizard#insertSuggestion',
                        'data-suggestion': "Formation complète sur la gestion de projet agile avec Scrum. Couvrir les rôles (Product Owner, Scrum Master), les cérémonies (sprint planning, daily, rétrospective), le backlog produit et les outils de suivi. Inclure des mises en situation pratiques."
                    }
                } only %}

                {% include '_atoms/button/button.html.twig' with {
                    label: 'Prompt engineering',
                    variant: 'ghost',
                    size: 'sm',
                    icon: 'magic-stick',
                    iconPosition: 'left',
                    radius: 'xl',
                    type: 'button',
                    class: suggestionClass,
                    attr: {
                        'data-action': 'click->moodia--wizard#insertSuggestion',
                        'data-suggestion': "Cours sur l'art du prompt engineering pour les outils d'IA générative (ChatGPT, Claude, Midjourney). Couvrir la structure d'un bon prompt, les techniques avancées (few-shot, chain-of-thought, rôle system), les erreurs courantes à éviter et des ateliers pratiques pour chaque technique."
                    }
                } only %}
            </div>
        </div>

        {# Actions — molécule partagée avec Slidia et Scormia #}
        {% include '_molecules/step-nav/step-nav.html.twig' with {
            class: 'pt-6',
            back: {
                attr: { 'data-action': 'click->moodia--wizard#backToChoice' }
            },
            next: {
                label: 'Configurer le cours',
                disabled: true,
                attr: {
                    'data-action': 'click->moodia--wizard#continueToConfig',
                    'data-moodia--wizard-target': 'promptContinueBtn'
                }
            }
        } only %}
    </div>


</div>
{% endblock %}