{#
 # ============================================================================
 # PAGE: MOODIA CONFIGURATION
 # ============================================================================
 #
 # Formulaire de configuration avec split-view et preview live.
 # Utilise les composants Atomic Design : card, page-header, button, icon.
 #
 # ============================================================================
 # STIMULUS CONTROLLER
 # ============================================================================
 #
 # data-controller="moodia--config"
 # Targets: form, aiButton, submitBtn, data, preview, previewTitle,
 #          previewPublic, previewLevel, previewLanguage, previewDuration, previewApproach
 #
 # ============================================================================
 # DONNÉES REQUISES
 # ============================================================================
 #
 # | Variable          | Type   | Description                     |
 # |-------------------|--------|--------------------------------|
 # | form              | Form   | Formulaire Symfony             |
 # | mode              | string | 'pdf' ou 'prompt'              |
 # | prompt            | string | Prompt initial (si mode=prompt)|
 # | estimatedDuration | int    | Durée estimée du PDF           |
 #
 # ============================================================================
 #}

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

{% block title %}Configuration - Moodia{% endblock %}

{% block meta_description %}Configurez les paramètres de votre cours Moodle : titre, public, niveau, durée et objectifs pédagogiques.{% endblock %}

{% block body %}
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 lg:py-6" data-controller="moodia--config">

    {# ====================================================================
       EN-TÊTE DE PAGE (Molecule: page-header)
       ==================================================================== #}

    {% include '_molecules/page-header/page-header.html.twig' with {
        title: 'Configurez votre cours',
        subtitle: 'Personnalisez les paramètres pédagogiques avant la génération',
        icon: 'settings',
        class: '!pt-0'
    } only %}

    {# ====================================================================
       SPLIT-VIEW : FORMULAIRE + PREVIEW
       ==================================================================== #}

    <div class="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-6 lg:gap-8">

        {# ============================================================
           COLONNE GAUCHE : FORMULAIRE
           ============================================================ #}

        <div>
            {{ form_start(form, {
                'attr': {
                    'class': 'space-y-6',
                    'data-moodia--config-target': 'form',
                    'novalidate': 'novalidate'
                }
            }) }}

                {# ======================================================
                   Section 1 : Identité du cours (Molecule: card)
                   ====================================================== #}

                {% embed '_molecules/card/card.html.twig' with {
                    title: 'Identité du cours',
                    subtitle: 'Informations principales',
                    icon: 'book',
                    iconColor: 'primary',
                    padding: 'md',
                    form: form
                } %}
                    {% block body %}
                        <div class="space-y-4">
                            {# Titre du cours #}
                            <div>
                                {{ form_label(form.courseTitle, null, {
                                    'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1.5'}
                                }) }}
                                {{ form_widget(form.courseTitle, {
                                    'attr': {
                                        'class': 'w-full px-4 py-2.5 text-base border border-gray-200 rounded-xl focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all',
                                        'data-action': 'input->moodia--config#updatePreview'
                                    }
                                }) }}
                                {{ form_errors(form.courseTitle) }}
                            </div>

                            {# Public cible #}
                            <div>
                                {{ form_label(form.publicTarget, null, {
                                    'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1.5'}
                                }) }}
                                {{ form_widget(form.publicTarget, {
                                    'attr': {
                                        'class': 'w-full px-4 py-2.5 text-base border border-gray-200 rounded-xl focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all',
                                        'data-action': 'input->moodia--config#updatePreview'
                                    }
                                }) }}
                                {{ form_errors(form.publicTarget) }}
                            </div>
                        </div>
                    {% endblock %}
                {% endembed %}

                {# ======================================================
                   Section 2 : Paramètres pédagogiques (Molecule: card)
                   ====================================================== #}

                {% embed '_molecules/card/card.html.twig' with {
                    title: 'Paramètres pédagogiques',
                    subtitle: 'Niveau et durée',
                    icon: 'chart',
                    iconColor: 'success',
                    padding: 'md',
                    form: form,
                    estimatedDuration: estimatedDuration
                } %}
                    {% block body %}
                        <div class="grid grid-cols-3 gap-4">
                            {# Niveau #}
                            <div>
                                {{ form_label(form.level, null, {
                                    'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1.5'}
                                }) }}
                                {{ form_widget(form.level, {
                                    'attr': {
                                        'class': 'w-full px-4 py-2.5 text-base bg-white border border-gray-200 rounded-xl focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all',
                                        'data-action': 'change->moodia--config#updatePreview'
                                    }
                                }) }}
                                {{ form_errors(form.level) }}
                            </div>

                            {# Langue #}
                            <div>
                                {{ form_label(form.language, null, {
                                    'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1.5'}
                                }) }}
                                {{ form_widget(form.language, {
                                    'attr': {
                                        'class': 'w-full px-4 py-2.5 text-base bg-white border border-gray-200 rounded-xl focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all',
                                        'data-action': 'change->moodia--config#updatePreview'
                                    }
                                }) }}
                                {{ form_errors(form.language) }}
                            </div>

                            {# Durée #}
                            <div>
                                {{ form_label(form.duration, null, {
                                    'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1.5'}
                                }) }}
                                {{ form_widget(form.duration, {
                                    'attr': form.duration.vars.attr|merge({
                                        'class': 'w-full px-4 py-2.5 text-base border border-gray-200 rounded-xl focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all',
                                        'data-estimated-duration': estimatedDuration|default(''),
                                        'data-action': 'input->moodia--config#updatePreview'
                                    })
                                }) }}
                                {{ form_errors(form.duration) }}
                            </div>
                        </div>
                    {% endblock %}
                {% endembed %}

                {# ======================================================
                   Section 3 : Approche pédagogique (Molecule: card)
                   ====================================================== #}

                {% embed '_molecules/card/card.html.twig' with {
                    title: 'Approche pédagogique',
                    subtitle: 'Type de contenu généré',
                    icon: 'list',
                    iconColor: 'primary',
                    padding: 'md',
                    form: form
                } %}
                    {% block body %}
                        <div class="grid grid-cols-3 gap-3">
                            {% for child in form.approach %}
                                <label class="cursor-pointer">
                                    {{ form_widget(child, {'attr': {'class': 'sr-only peer', 'data-action': 'change->moodia--config#updatePreview'}}) }}
                                    <span class="flex flex-col items-center gap-2 p-4
                                                bg-gray-50 border-2 border-gray-100 rounded-xl
                                                text-center transition-all duration-200
                                                hover:border-gray-200 hover:bg-gray-100
                                                peer-checked:border-primary peer-checked:bg-primary/5">

                                        {% if child.vars.value == 'cours' %}
                                            <div class="w-12 h-12 rounded-xl bg-primary/15 flex items-center justify-center text-primary">
                                                <svg viewBox="0 0 24 24" fill="none" width="24" height="24"><path fill="currentColor" opacity="0.5" d="M4.727 2.733c.306-.308.734-.508 1.544-.618C7.105 2.002 8.209 2 9.793 2h4.414c1.584 0 2.688.002 3.522.115c.81.11 1.238.31 1.544.618c.305.308.504.74.613 1.557c.112.84.114 1.955.114 3.552V18H7.426c-1.084 0-1.462.006-1.753.068c-.513.11-.96.347-1.285.667c-.11.108-.164.161-.291.505A1.3 1.3 0 0 0 4 19.7V7.842c0-1.597.002-2.711.114-3.552c.109-.816.308-1.249.613-1.557"/><path fill="currentColor" d="M7.426 18H20c-.003.93-.022 1.623-.113 2.17c-.11.653-.31.998-.616 1.244c-.307.246-.737.407-1.55.494c-.837.09-1.946.092-3.536.092h-4.43c-1.59 0-2.7-.001-3.536-.092c-.813-.087-1.243-.248-1.55-.494s-.506-.591-.616-1.243l-.022-.151c-.04-.291-.06-.437.066-.78c.127-.344.181-.397.291-.505a2.6 2.6 0 0 1 1.285-.667c.29-.062.67-.068 1.753-.068"/><path fill="currentColor" d="M7.25 7A.75.75 0 0 1 8 6.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 7M8 9.75a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z"/></svg>
                                            </div>
                                            <span class="text-sm font-semibold text-gray-700">Cours</span>
                                            <span class="text-[10px] text-gray-500">Contenu théorique</span>

                                        {% elseif child.vars.value == 'cours_quiz' %}
                                            <div class="w-12 h-12 rounded-xl bg-[#8B5CF6]/15 flex items-center justify-center text-[#8B5CF6]">
                                                <svg viewBox="0 0 24 24" fill="none" width="24" height="24"><path fill="currentColor" opacity="0.5" d="M4.727 2.733c.306-.308.734-.508 1.544-.618C7.105 2.002 8.209 2 9.793 2h4.414c1.584 0 2.688.002 3.522.115c.81.11 1.238.31 1.544.618c.305.308.504.74.613 1.557c.112.84.114 1.955.114 3.552V18H7.426c-1.084 0-1.462.006-1.753.068c-.513.11-.96.347-1.285.667c-.11.108-.164.161-.291.505A1.3 1.3 0 0 0 4 19.7V7.842c0-1.597.002-2.711.114-3.552c.109-.816.308-1.249.613-1.557"/><path fill="currentColor" d="M7.426 18H20c-.003.93-.022 1.623-.113 2.17c-.11.653-.31.998-.616 1.244c-.307.246-.737.407-1.55.494c-.837.09-1.946.092-3.536.092h-4.43c-1.59 0-2.7-.001-3.536-.092c-.813-.087-1.243-.248-1.55-.494s-.506-.591-.616-1.243l-.022-.151c-.04-.291-.06-.437.066-.78c.127-.344.181-.397.291-.505a2.6 2.6 0 0 1 1.285-.667c.29-.062.67-.068 1.753-.068"/><path fill="currentColor" d="M7.25 7A.75.75 0 0 1 8 6.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 7M8 9.75a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z"/><path fill="currentColor" d="M17 13.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7m-1.5 3.5a.75.75 0 0 1 .75-.75h.75v-.75a.75.75 0 0 1 1.5 0v.75h.75a.75.75 0 0 1 0 1.5H18.5v.75a.75.75 0 0 1-1.5 0V18h-.75a.75.75 0 0 1-.75-.75z"/></svg>
                                            </div>
                                            <span class="text-sm font-semibold text-gray-700">Cours + Quiz</span>
                                            <span class="text-[10px] text-gray-500">Théorie + évaluation</span>

                                        {% else %}
                                            <div class="w-12 h-12 rounded-xl bg-amber-500/15 flex items-center justify-center text-amber-600">
                                                <svg viewBox="0 0 24 24" fill="none" width="24" height="24"><path fill="currentColor" opacity="0.5" d="m9.153 5.408-.328.588c-.36.646-.54.969-.82 1.182q.06-.045.113-.097a8.5 8.5 0 0 0 10.366 9.686l-.02-.19c-.071-.743-.107-1.115 0-1.46c.107-.344.345-.623.822-1.18l.434-.507c1.677-1.96 2.515-2.941 2.222-3.882c-.292-.941-1.522-1.22-3.982-1.776l-.636-.144c-.699-.158-1.049-.237-1.33-.45c-.28-.213-.46-.536-.82-1.182l-.327-.588C13.58 3.136 12.947 2 12 2s-1.58 1.136-2.847 3.408"/><path fill="currentColor" d="M18.483 16.767A8.5 8.5 0 0 1 8.118 7.081a1 1 0 0 1-.113.097c-.28.213-.63.292-1.33.45l-.635.144c-2.46.557-3.69.835-3.983 1.776c-.292.94.546 1.921 2.223 3.882l.434.507c.476.557.715.836.822 1.18c.107.345.071.717-.001 1.46l-.066.677c-.253 2.617-.38 3.925.386 4.506s1.918.052 4.22-1.009l.597-.274c.654-.302.981-.452 1.328-.452s.674.15 1.329.452l.595.274c2.303 1.06 3.455 1.59 4.22 1.01c.767-.582.64-1.89.387-4.507z"/></svg>
                                            </div>
                                            <span class="text-sm font-semibold text-gray-700">Quiz</span>
                                            <span class="text-[10px] text-gray-500">Évaluation seule</span>
                                        {% endif %}
                                    </span>
                                </label>
                            {% endfor %}
                        </div>
                    {% endblock %}
                {% endembed %}

                {# ======================================================
                   Section 4 : Objectifs pédagogiques (Molecule: card)
                   ====================================================== #}

                {% embed '_molecules/card/card.html.twig' with {
                    title: 'Objectifs pédagogiques',
                    subtitle: 'Compétences à acquérir',
                    icon: 'target',
                    iconColor: 'warning',
                    padding: 'md',
                    form: form
                } %}
                    {% block headerAction %}
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Générer',
                            variant: 'soft-cohorts',
                            size: 'md',
                            icon: 'magic-stick',
                            radius: 'xl',
                            type: 'button',
                            attr: {
                                'data-action': 'click->moodia--config#generateObjectives',
                                'data-moodia--config-target': 'aiButton'
                            }
                        } only %}
                    {% endblock %}
                    {% block body %}
                        {{ form_widget(form.objectives, {
                            'attr': {
                                'class': 'w-full min-h-[160px] px-4 py-3 text-base border border-gray-200 rounded-xl focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all resize-y',
                                'placeholder': 'Décrivez les compétences que les apprenants devront acquérir...',
                                'rows': 6,
                                'data-action': 'input->moodia--config#updatePreview'
                            }
                        }) }}
                        {{ form_errors(form.objectives) }}
                        <p class="text-xs text-gray-400 mt-2">Minimum 20 caractères</p>
                    {% endblock %}
                {% endembed %}

                {# ======================================================
                   Section 5 : Instructions additionnelles (Molecule: card collapsible)
                   ====================================================== #}

                {% embed '_molecules/card/card.html.twig' with {
                    title: 'Instructions additionnelles',
                    subtitle: 'Optionnel',
                    icon: 'chat',
                    iconColor: 'gray',
                    collapsible: true,
                    collapsed: true,
                    padding: 'md',
                    form: form
                } %}
                    {% block body %}
                        {{ form_widget(form.additionalInstructions, {
                            'attr': {
                                'class': 'w-full min-h-[80px] px-4 py-3 text-base border border-gray-200 rounded-xl focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all resize-none',
                                'placeholder': 'Instructions spécifiques pour personnaliser la génération...'
                            }
                        }) }}
                    {% endblock %}
                {% endembed %}

                {# ======================================================
                   Actions (Atoms: button)
                   ====================================================== #}

                <div class="flex items-center justify-between pt-4">
                    {% include '_atoms/button/button.html.twig' with {
                        variant: 'back',
                        href: path('app_moodia_new')
                    } only %}

                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Générer le cours',
                        variant: 'primary',
                        size: 'lg',
                        icon: 'rocket',
                        type: 'submit',
                        attr: {
                            'data-moodia--config-target': 'submitBtn'
                        }
                    } only %}
                </div>

            {{ form_end(form) }}
        </div>

        {# ============================================================
           COLONNE DROITE : PREVIEW LIVE (Molecule: card)
           ============================================================ #}

        <aside class="hidden lg:block">
            {% embed '_molecules/card/card.html.twig' with {
                title: 'Aperçu',
                icon: 'eye',
                iconColor: 'gray',
                padding: 'md',
                class: 'sticky top-24'
            } %}
                {% block body %}
                    {# Titre #}
                    <h3 class="text-lg font-semibold text-gray-900 mb-4 line-clamp-2"
                        data-moodia--config-target="previewTitle">
                        {{ form.courseTitle.vars.value|default('Titre du cours') }}
                    </h3>

                    {# Metadata cards #}
                    <div class="space-y-3">
                        {# Public #}
                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                            <div class="w-9 h-9 rounded-lg bg-primary/15 flex items-center justify-center">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'md', color: 'primary' } only %}
                            </div>
                            <div>
                                <span class="text-[10px] text-gray-500 uppercase tracking-wide font-medium">Public</span>
                                <span class="block text-sm font-semibold text-gray-800" data-moodia--config-target="previewPublic">
                                    {{ form.publicTarget.vars.value|default('Non défini') }}
                                </span>
                            </div>
                        </div>

                        {# Niveau #}
                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                            <div class="w-9 h-9 rounded-lg bg-success/15 flex items-center justify-center">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'chart', size: 'md', color: 'success' } only %}
                            </div>
                            <div>
                                <span class="text-[10px] text-gray-500 uppercase tracking-wide font-medium">Niveau</span>
                                <span class="block text-sm font-semibold text-gray-800" data-moodia--config-target="previewLevel">
                                    {% set levelLabels = {'debutant': 'Débutant', 'intermediaire': 'Intermédiaire', 'avance': 'Avancé', 'expert': 'Expert'} %}
                                    {{ levelLabels[form.level.vars.value]|default('Non défini') }}
                                </span>
                            </div>
                        </div>

                        {# Langue #}
                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                            <div class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'earth', size: 'md', color: 'primary' } only %}
                            </div>
                            <div>
                                <span class="text-[10px] text-gray-500 uppercase tracking-wide font-medium">Langue</span>
                                <span class="block text-sm font-semibold text-gray-800" data-moodia--config-target="previewLanguage">
                                    {% set languageLabels = {'fr': 'Français', 'en': 'English', 'es': 'Español', 'de': 'Deutsch', 'it': 'Italiano', 'pt': 'Português'} %}
                                    {{ languageLabels[form.language.vars.value]|default('Français') }}
                                </span>
                            </div>
                        </div>

                        {# Durée #}
                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                            <div class="w-9 h-9 rounded-lg bg-warning/15 flex items-center justify-center">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'clock', size: 'md', color: 'warning' } only %}
                            </div>
                            <div>
                                <span class="text-[10px] text-gray-500 uppercase tracking-wide font-medium">Durée</span>
                                <span class="block text-sm font-semibold text-gray-800" data-moodia--config-target="previewDuration">
                                    {{ form.duration.vars.value ? form.duration.vars.value ~ ' heures' : 'Non défini' }}
                                </span>
                            </div>
                        </div>

                        {# Approche #}
                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                            <div class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'list', size: 'md', color: 'primary' } only %}
                            </div>
                            <div>
                                <span class="text-[10px] text-gray-500 uppercase tracking-wide font-medium">Approche</span>
                                <span class="block text-sm font-semibold text-gray-800" data-moodia--config-target="previewApproach">
                                    {% set approachLabels = {'cours': 'Cours', 'cours_quiz': 'Cours + Quiz', 'quiz': 'Quiz'} %}
                                    {{ approachLabels[form.approach.vars.value]|default('Non défini') }}
                                </span>
                            </div>
                        </div>
                    </div>
                {% endblock %}
            {% endembed %}
        </aside>
    </div>

    {# Données pour le JS #}
    <div data-moodia--config-target="data"
         data-mode="{{ mode }}"
         data-prompt="{{ prompt|default('')|e('html_attr') }}"
         hidden></div>
</div>
{% endblock %}