{#
 # PAGE: SCORMIA — ÉTAPE 2 : PARAMÈTRES (page dédiée à la méthode)
 # DONNÉES REQUISES (ScormiaController::configure) : method ('manual'|'pdf'|'text'), presets
 #}
{% extends 'base.html.twig' %}

{% block title %}Paramètres — Scormia{% endblock %}

{% block body %}
{% set scColor = tool_color_details['scormia'] %}
{% set isAi = method != 'manual' %}
{% set meta = {
    manual: { title: 'Module vierge',          subtitle: 'Un module vide, prêt à composer bloc par bloc.',   cta: 'Créer le module',      icon: 'edit' },
    pdf:    { title: 'Importez votre document', subtitle: 'Format PDF uniquement · Maximum 20 Mo',            cta: 'Générer le module',    icon: 'upload' },
    text:   { title: 'Décrivez votre sujet',    subtitle: "Quelques mots suffisent, l'IA rédige le module.",  cta: 'Générer le module',    icon: 'magic-stick' }
}[method] %}

{# Styles des CONTRÔLES de formulaire (focus teinté, zone de dépôt, case). Le reste est en Tailwind. #}
<style>
    .sc-form .sc-label { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; margin-bottom:.5rem; }
    .sc-form .sc-req::after { content:" *"; color:#dc2626; font-weight:700; }
    .sc-form .sc-input, .sc-form .sc-textarea, .sc-form .sc-select {
        width:100%; border:1px solid #e5e7eb; border-radius:.75rem; padding:.7rem .9rem;
        font-size:.9rem; line-height:1.4; color:#111827; background-color:#fff;
        transition:border-color .15s ease, box-shadow .15s ease;
    }
    .sc-form .sc-input::placeholder, .sc-form .sc-textarea::placeholder { color:#9ca3af; }
    .sc-form .sc-input:focus, .sc-form .sc-textarea:focus, .sc-form .sc-select:focus {
        outline:none; border-color:var(--sc-accent); box-shadow:0 0 0 3px rgba(var(--sc-accent-rgb), .14);
    }
    .sc-form .sc-select {
        appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.4rem;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat:no-repeat; background-position:right .85rem center;
    }
    .sc-form .sc-dropzone-big {
        display:flex; flex-direction:column; align-items:center; gap:.3rem; cursor:pointer; text-align:center;
        border:2px dashed #d5d9e0; border-radius:1.25rem; padding:2.5rem 1.5rem;
        background:linear-gradient(180deg, #fafbfc, #ffffff);
        transition:border-color .15s ease, background-color .15s ease;
    }
    .sc-form .sc-dropzone-big:hover { border-color:var(--sc-accent); }
    .sc-form .sc-dropzone-big.is-dragging { border-color:var(--sc-accent); background-color:rgba(var(--sc-accent-rgb), .06); }
    .sc-form .sc-dropzone-big.is-filled { border-style:solid; border-color:var(--sc-accent); background-color:rgba(var(--sc-accent-rgb), .04); }
    .sc-form .sc-dropzone-big__icon { width:4rem; height:4rem; margin-bottom:.6rem; border-radius:1.1rem; background:#fff; box-shadow:0 10px 26px -6px rgba(15,23,42,.12); display:flex; align-items:center; justify-content:center; color:var(--sc-accent); }
    .sc-form .sc-dropzone-big__title { font-size:1.05rem; font-weight:700; color:#1f2937; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sc-form .sc-dropzone-big__hint { font-size:.9rem; color:#6b7280; }
    .sc-form .sc-dropzone-big__browse { color:var(--sc-accent); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
    .sc-form .sc-dropzone-big__badge { margin-top:.9rem; display:inline-flex; align-items:center; gap:.4rem; background:#f3f4f6; color:#6b7280; font-size:.78rem; font-weight:600; padding:.4rem .85rem; border-radius:999px; }
    .sc-form input.sc-checkbox:checked + .sc-checkbox__box { background-color:var(--sc-accent); border-color:var(--sc-accent); }
    .sc-form .sc-checkbox__tick { opacity:0; transition:opacity .12s ease; }
    .sc-form input.sc-checkbox:checked + .sc-checkbox__box .sc-checkbox__tick { opacity:1; }

    /* Écran de génération — animations de l'emblème (couches qui se construisent). */
    @keyframes v2-spin { to { transform: rotate(360deg); } }
    @keyframes v2-breathe { 0%,100% { transform: scale(1); opacity:.55; } 50% { transform: scale(1.12); opacity:.9; } }
    @keyframes v2-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    @keyframes v2-build {
        0%   { transform: translateY(16px) scale(.9); opacity:0; }
        18%  { transform: translateY(0) scale(1);     opacity:1; }
        82%  { transform: translateY(0) scale(1);     opacity:1; }
        100% { transform: translateY(-16px) scale(.9); opacity:0; }
    }
    @keyframes v2-dot { 0%,80%,100% { transform: scale(.5); opacity:.4; } 40% { transform: scale(1); opacity:1; } }
    @keyframes v2-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
</style>

<div class="sc-form min-h-90 max-w-6xl mx-auto px-4 sm:px-6 py-4 lg:py-4"
     data-controller="scormia--configure"
     data-scormia--configure-method-value="{{ method }}"
     data-scormia--configure-library-url-value="{{ path('app_scormia') }}"
     {% if activeJob %}data-scormia--configure-active-job-value="{{ activeJob|json_encode|e('html_attr') }}"{% endif %}
     style="--sc-accent: {{ scColor.primary }}; --sc-accent-rgb: {{ scColor.primary|hex_to_rgb }};">

    <header class="mb-8 max-w-3xl mx-auto">
        <div class="flex items-center gap-4">
            <div class="w-16 h-16 rounded-2xl border flex items-center justify-center shrink-0 shadow-sm"
                 style="background: linear-gradient(135deg, {{ scColor.bg }}, color-mix(in srgb, {{ scColor.primary }} 6%, white)); border-color: {{ scColor.border }}; color: {{ scColor.primary }};">
                {% include '_atoms/icon/icon.html.twig' with { name: meta.icon, size: 'xl', colorPrimary: 'current', colorSecondary: 'current' } only %}
            </div>
            <div>
                <h2 class="text-2xl lg:text-[1.75rem] font-bold text-gray-900 font-secondary leading-tight">{{ meta.title }}</h2>
                <p class="text-gray-500 mt-1">{{ meta.subtitle }}</p>
            </div>
        </div>
    </header>

    <form class="max-w-3xl mx-auto" data-scormia--configure-target="form" data-action="submit->scormia--configure#submit">
        <div class="bg-white rounded-3xl border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.04)] overflow-hidden">
            <div class="p-6 sm:p-8 space-y-7">

                {# Titre (toutes méthodes) — requis (≥ 3 caractères) #}
                <label class="block">
                    <span class="sc-label sc-req">Titre du module</span>
                    <input type="text" name="title" placeholder="ex. Sécurité au travail" maxlength="150" minlength="3" class="sc-input"
                           data-action="input->scormia--configure#validate">
                </label>

                {% if method == 'pdf' %}
                    {# PDF — grande zone de dépôt (clic + glisser-déposer) #}
                    <label class="sc-dropzone-big" data-dropzone
                           data-action="dragover->scormia--configure#onDragOver dragleave->scormia--configure#onDragLeave drop->scormia--configure#onDrop">
                        <input type="file" name="file" accept="application/pdf" class="sr-only"
                               data-action="change->scormia--configure#onFile">
                        <span class="sc-dropzone-big__icon">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'upload', size: 'lg', colorPrimary: 'current', colorSecondary: 'current' } only %}
                        </span>
                        <span class="sc-dropzone-big__title" data-scormia--configure-target="fileName">Glissez votre PDF ici</span>
                        <span class="sc-dropzone-big__hint">Glissez ou <span class="sc-dropzone-big__browse">parcourez</span> · PDF, 20 Mo max</span>
                    </label>
                {% elseif method == 'text' %}
                    {# Texte / sujet — plafonné à 1000 caractères (client maxlength + garde-fou serveur) #}
                    <label class="block">
                        <span class="sc-label sc-req">Sujet du module</span>
                        <textarea name="source" rows="4" maxlength="1000" placeholder="Ex. Les bases de la cybersécurité pour les nouveaux employés…"
                                  class="sc-textarea resize-y" data-action="input->scormia--configure#validate"></textarea>
                        <span class="mt-1 block text-right text-xs text-muted">
                            <span data-scormia--configure-target="charCount">0</span> / 1000
                        </span>
                    </label>
                {% endif %}

                {% if isAi %}
                    {# Langue de rédaction — stockée sur le module et affichée sur sa carte. #}
                    <label class="block">
                        <span class="sc-label">Langue du module</span>
                        <select name="language" class="sc-select">
                            <option value="français" selected>Français</option>
                            <option value="english">English</option>
                            <option value="español">Español</option>
                            <option value="deutsch">Deutsch</option>
                            <option value="italiano">Italiano</option>
                            <option value="português">Português</option>
                        </select>
                    </label>

                    {# Paramètres de génération conservés (défauts) — non affichés dans cette vue. #}
                    <input type="hidden" name="level" value="intermédiaire">
                    <input type="hidden" name="withQuiz" value="1">
                {% endif %}

                {# Couleur d'accent — rangée de pastilles #}
                <div>
                    <span class="sc-label">Couleur d'accent</span>
                    <div class="flex flex-wrap gap-2.5">
                        {% for preset in presets %}
                            <label class="group cursor-pointer">
                                <input type="radio" name="accent" value="{{ preset.color }}" class="sr-only" {{ loop.first ? 'checked' : '' }}
                                       data-action="change->scormia--configure#pickAccent" data-name="{{ preset.name }}">
                                <span class="grid place-items-center w-9 h-9 rounded-full ring-offset-2 ring-offset-white transition group-has-[:checked]:ring-2"
                                      style="background: {{ preset.color }}; --tw-ring-color: {{ preset.color }};" title="{{ preset.name }}">
                                    <svg class="w-4 h-4 text-white opacity-0 group-has-[:checked]:opacity-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
                                </span>
                            </label>
                        {% endfor %}
                    </div>
                </div>

                <p data-scormia--configure-target="error" class="text-sm text-error min-h-[1.25rem]"></p>

                {# Le rappel de l'accent reste DANS la carte, avec le reste du formulaire : la
                   barre de navigation, elle, n'en fait pas partie — voir juste en dessous.
                   Le nom est réécrit à chaud par scormia--configure : il lui faut ce target. #}
                <p class="text-sm text-gray-500">Accent : <span class="font-bold text-gray-900" data-scormia--configure-target="accentName">{{ (presets|first).name }}</span></p>
            </div>
        </div>

        {# Navigation : SOUS la carte, nue sur le fond de page — exactement comme chez Moodia,
           où la barre suit le conteneur principal au lieu d'être enfermée dans un pied gris.
           Elle reste à l'intérieur du <form> : c'est elle qui porte le bouton de soumission.
           Le libellé du retour est laissé au défaut de l'atome (« Retour »), comme chez
           Moodia : c'est le seul retour de l'écran depuis que le pill « Changer de méthode »
           et l'indicateur d'étape ont été retirés du haut de page. #}
        {% include '_molecules/step-nav/step-nav.html.twig' with {
            class: 'pt-8',
            back: { href: path('app_scormia_new') },
            next: {
                label:        meta.cta,
                type:         'submit',
                disabled:     true,
                gradientFrom: scColor.primary,
                gradientTo:   scColor.secondary,
                attr:         { 'data-scormia--configure-target': 'submitBtn' },
                labelAttr:    { 'data-scormia--configure-target': 'submitLabel' }
            }
        } only %}
    </form>

    {# ══ Écran de génération plein écran (révélé pendant la génération IA) ══ #}
    <div data-scormia--configure-target="loader"
         class="hidden fixed inset-0 z-50 flex items-center justify-center px-10 py-14"
         style="background: radial-gradient(120% 120% at 50% 0%, #f7f9fc 0%, #eef1f6 60%, #e9edf4 100%);">
        <div class="text-center">

            {# Emblème animé : anneau conique + glow qui respire + couches qui se construisent #}
            <div style="position:relative; width:180px; height:180px; margin:0 auto 44px;">
                {# glow ambiant #}
                <div style="position:absolute; inset:24px; border-radius:50%; background:radial-gradient(circle, rgba(var(--sc-accent-rgb),.35), rgba(var(--sc-accent-rgb),0) 70%); animation:v2-breathe 3.2s ease-in-out infinite;"></div>
                {# anneau conique tournant #}
                <div style="position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(var(--sc-accent-rgb),0) 0%, rgba(var(--sc-accent-rgb),0) 45%, color-mix(in srgb, var(--sc-accent) 55%, white) 78%, var(--sc-accent) 100%); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); animation:v2-spin 1.5s linear infinite;"></div>
                {# disque intérieur + empilement des couches #}
                <div style="position:absolute; inset:26px; border-radius:50%; background:#fff; box-shadow:0 20px 40px -20px rgba(var(--sc-accent-rgb),.5); display:flex; align-items:center; justify-content:center; overflow:hidden;">
                    <div style="position:relative; width:70px; height:70px; animation:v2-float 3.2s ease-in-out infinite;">
                        <svg style="position:absolute; inset:0; animation:v2-build 2.4s ease-in-out infinite; animation-delay:0s;" width="70" height="70" viewBox="0 0 24 24" fill="var(--sc-accent)" opacity="0.9"><path d="M12 3 3 8l9 5 9-5-9-5Z"/></svg>
                        <svg style="position:absolute; inset:0; animation:v2-build 2.4s ease-in-out infinite; animation-delay:.3s;" width="70" height="70" viewBox="0 0 24 24" fill="none" stroke="var(--sc-accent)" stroke-width="1.9" stroke-linejoin="round"><path d="M3 12l9 5 9-5"/></svg>
                        <svg style="position:absolute; inset:0; animation:v2-build 2.4s ease-in-out infinite; animation-delay:.6s;" width="70" height="70" viewBox="0 0 24 24" fill="none" stroke="color-mix(in srgb, var(--sc-accent) 55%, white)" stroke-width="1.9" stroke-linejoin="round"><path d="M3 17l9 5 9-5"/></svg>
                    </div>
                </div>
            </div>

            <h2 class="font-secondary" style="margin:0 0 8px; font-size:30px; font-weight:700; color:#1b2440; letter-spacing:-.5px;">Création de votre module</h2>

            {# Badge du palier IA (libellé maison — jamais un nom de modèle). #}
            <span data-scormia--configure-target="tier" class="hidden inline-flex items-center gap-1.5 rounded-full px-3 py-1 mb-4 text-xs font-bold text-white"
                  style="background: linear-gradient(135deg, var(--sc-accent), color-mix(in srgb, var(--sc-accent) 65%, #1b2440));"></span>

            {# Étape RÉELLE publiée par le worker. #}
            <p data-scormia--configure-target="message" style="margin:0 auto 20px; min-height:26px; max-width:420px; font-size:17px; line-height:1.5; color:#7c8698; animation:v2-fade .5s ease;">Initialisation…</p>

            {# Barre de progression réelle + pourcentage. #}
            <div style="max-width:420px; margin:0 auto 8px; height:8px; border-radius:99px; background:#e4e8ef; overflow:hidden;">
                <div data-scormia--configure-target="bar" style="height:100%; width:2%; border-radius:99px; background:var(--sc-accent); transition:width .5s cubic-bezier(.4,0,.2,1);"></div>
            </div>
            <p data-scormia--configure-target="percent" style="margin:0 0 26px; font-size:13px; font-weight:700; color:var(--sc-accent);">2 %</p>

            {# Actions : Annuler (en cours) / Réessayer (échec). #}
            <div style="display:flex; align-items:center; justify-content:center; gap:12px;">
                <button type="button" data-scormia--configure-target="cancelBtn" data-action="scormia--configure#cancel"
                        style="padding:9px 20px; border-radius:12px; border:1px solid #dfe4ec; background:#fff; color:#54607a; font-size:13px; font-weight:600; cursor:pointer;">Annuler</button>
                <button type="button" data-scormia--configure-target="retryBtn" data-action="scormia--configure#retry"
                        class="hidden" style="padding:9px 20px; border-radius:12px; border:none; background:var(--sc-accent); color:#fff; font-size:13px; font-weight:700; cursor:pointer;">Réessayer</button>
            </div>

        </div>
    </div>

    {# Modale de confirmation d'annulation : retour bibliothèque + AVERTISSEMENT
       que la conso IA déjà engagée est facturée (pattern hidden↔flex du loader). #}
    <div data-scormia--configure-target="cancelModal"
         class="hidden fixed inset-0 z-[60] flex items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm"
             data-action="click->scormia--configure#dismissCancel"></div>
        <div class="relative bg-white rounded-2xl p-7 w-full max-w-md shadow-xl border border-gray-200">
            <h3 class="text-xl font-bold text-gray-900 mb-1.5">Annuler la génération ?</h3>
            <p class="text-sm text-gray-500 leading-relaxed">
                Vous reviendrez à votre bibliothèque Scormia. <strong class="text-gray-900">Les tokens déjà consommés par l'IA jusqu'ici vous seront facturés</strong> — l'annulation ne les rembourse pas.
            </p>
            <div class="flex flex-wrap items-center justify-end gap-2 mt-6">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Continuer', variant: 'ghost', size: 'md', type: 'button',
                    attr: {'data-action': 'click->scormia--configure#dismissCancel'}
                } only %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Annuler quand même', variant: 'error', size: 'md', type: 'button',
                    attr: {'data-scormia--configure-target': 'confirmCancelBtn', 'data-action': 'click->scormia--configure#confirmCancel'}
                } only %}
            </div>
        </div>
    </div>
</div>
{% endblock %}