{#
 # PAGE: SCORMIA — BIBLIOTHÈQUE DE MODULES SCORM
 # Liste des modules de l'utilisateur : créer, ouvrir, renommer, dupliquer, supprimer.
 # La création se fait sur une page dédiée (app_scormia_new).
 # DONNÉES REQUISES (ScormiaController::index) : modules
 #}

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

{% block title %}Scormia — Modules SCORM{% endblock %}

{% block body %}
{% set scColor = tool_color_details['scormia'] %}

<style>
    /* Focus des items du menu ⋯ aux couleurs de l'outil (--accent-rgb), pas le bleu par défaut. */
    .action-menu-item:focus, .action-menu-item:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .45) !important; }
    /* Pagination (variant Moodia) : neutralise les ombres bleues codées en dur → couleur de l'outil. */
    .sc-pagination [class*="shadow-["] { box-shadow: 0 3px 14px rgba(var(--sc-accent-rgb), .22) !important; }
    /* Tabs de filtre (molécule Moodia) : l'ombre bleue du tab actif prend la couleur de l'outil. */
    .sc-tabs [aria-pressed="true"] { box-shadow: 0 3px 12px rgba(var(--sc-accent-rgb), .3) !important; }
    /* Entrée d'une carte dupliquée (injectée sans rechargement). */
    @keyframes sc-card-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
</style>

<div data-controller="scormia--library shared--add-to-moodia"
     data-shared--add-to-moodia-endpoint-value="{{ path('app_moodia_add_scormia', {uuid: 0})|replace({'/0': ''}) }}"
     data-shared--add-to-moodia-courses-endpoint-value="{{ path('app_moodia_add_courses') }}"
     data-shared--add-to-moodia-success-label-value="Module ajouté"
     class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

    {# En-tête (pattern Moodia : icône produit + titre + action) #}
    <header class="mb-8">
        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-5">
            <div class="flex items-center gap-5">
                <div class="shrink-0 w-16 h-16 flex items-center justify-center rounded-2xl border"
                     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: 'bubul-scormia', size: '3xl', colorPrimary: 'current', colorSecondary: 'current' } only %}
                </div>
                <div class="flex flex-col gap-1">
                    <div class="flex items-center gap-2.5">
                        <h1 class="text-2xl sm:text-3xl font-bold text-black font-secondary tracking-tight">Scormia</h1>
                        {% if 'scormia' in new_tool_codes|default([]) %}
                            {% include '_atoms/badge/badge.html.twig' with { label: 'BETA', variant: 'warning', customColor: scColor.primary, size: 'sm' } only %}
                        {% endif %}
                    </div>
                    <p class="text-sm text-gray-500">Créez des modules e-learning SCORM interactifs, à votre image.</p>
                    {# Coût médian d'un module. Markup repris à l'identique de
                       `_organisms/tool-header`, que Moodia et Slidia consomment : le jour où
                       cet en-tête adoptera l'organisme, la ligne disparaîtra sans rien changer
                       à l'écran. Masquée tant qu'aucune génération n'a eu lieu — annoncer
                       « ~0 tokens » serait faux. #}
                    {% if medianTokenCost|default(0) > 0 %}
                        <span class="hidden lg:inline-flex items-center gap-1 text-xs text-gray-400/70 truncate">
                            <span class="inline-flex items-center gap-0.5">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'xs', color: 'current' } only %}
                                ~{{ medianTokenCost|format_tokens }}
                            </span>
                            <span class="text-gray-300">/</span><span>module</span>
                        </span>
                    {% endif %}
                </div>
            </div>

            {# Même design que le bouton Moodia « Créer un cours » (atom button), aux couleurs Scormia. #}
            <div class="flex-shrink-0">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Créer un module',
                    variant: 'custom-gradient',
                    gradientFrom: scColor.primary,
                    gradientTo: scColor.secondary,
                    size: 'lg',
                    icon: 'plus',
                    iconSize: 'lg',
                    href: path('app_scormia_new'),
                    radius: 'lg',
                    class: 'flex-shrink-0'
                } only %}
            </div>
        </div>
    </header>

    {# totalGlobal, et non typeStats.all : ce dernier est conditionné au partage ET à la
       recherche. L'utilisateur qui a des modules mais aucun de partagé — ou dont la
       recherche ne ramène rien — ne doit pas se voir proposer de « créer son premier
       module ». C'est une autre question : a-t-il déjà créé quelque chose, un jour ? #}
    {% if totalGlobal == 0 and not activeJob %}
        <div class="mt-12 flex flex-col items-center text-center bg-white rounded-3xl border border-gray-100 shadow-sm py-16 px-6">
            <div class="w-16 h-16 flex items-center justify-center rounded-2xl mb-5"
                 style="background: {{ scColor.bg }}; color: {{ scColor.primary }};">
                {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-scormia', size: '2xl', colorPrimary: 'current', colorSecondary: 'current' } only %}
            </div>
            <h2 class="text-xl font-semibold text-gray-900">Créez votre premier module</h2>
            <p class="text-gray-500 mt-2 mb-6 max-w-md">À la main, depuis un PDF ou un simple sujet — l'IA génère un module complet, puis vous l'affinez à votre image.</p>
            {% include '_atoms/button/button.html.twig' with {
                label: 'Créer un module',
                variant: 'custom-gradient',
                gradientFrom: scColor.primary,
                gradientTo: scColor.secondary,
                size: 'lg',
                icon: 'plus',
                iconSize: 'lg',
                href: path('app_scormia_new'),
                radius: 'lg'
            } only %}
        </div>
    {% else %}
        {# Filtres par type (façon Moodia, aux couleurs de l'outil) + recherche, sur une même ligne.
           items-stretch : la recherche prend EXACTEMENT la hauteur des tabs (h-full),
           quel que soit le padding interne de la molécule. #}
        {# Paramètres à propager d'un contrôle à l'autre. Le type et le partage sont
           ORTHOGONAUX : chaque contrôle ne réécrit QUE sa propre dimension et reconduit
           les autres — c'est ce qui permet de demander « les modules avec quiz partagés »,
           et ce qui conserve la recherche en cours quand on touche à l'un ou à l'autre. #}
        {% set qp = search is not empty ? {'q': search} : {} %}
        {% set sharedParam = sharedOnly ? {'shared': '1'} : {} %}
        {% set typeParam = typeFilter != 'all' ? {'type': typeFilter} : {} %}
        <div class="flex flex-col md:flex-row md:items-stretch gap-3 md:gap-4 mb-6">
            <div class="sc-tabs shrink-0"
                 style="--color-primary: {{ scColor.primary }}; --color-primary-light: {{ scColor.secondary }}; --sc-accent-rgb: {{ scColor.primary|hex_to_rgb }};">
                {# Onglets de TYPE : trois valeurs mutuellement exclusives. Leurs liens
                   reconduisent l'état du partage (sharedParam) au lieu de l'écraser. #}
                {% include '_molecules/filter-tabs/filter-tabs.html.twig' with {
                    filters: [
                        { id: 'all', label: 'Tous', count: typeStats.all, href: path('app_scormia', qp|merge(sharedParam)) },
                        { id: 'quiz', label: 'Module + Quiz', count: typeStats.quiz, href: path('app_scormia', qp|merge(sharedParam)|merge({type: 'quiz'})) },
                        { id: 'noquiz', label: 'Module SCORM', count: typeStats.noquiz, href: path('app_scormia', qp|merge(sharedParam)|merge({type: 'noquiz'})) }
                    ],
                    active: typeFilter,
                    name: 'moduleType'
                } only %}
            </div>

            {# Contrôle « Partagés » : INDÉPENDANT des onglets, à côté d'eux et non dedans.
               Même molécule (donc mêmes pilule, ombre et état actif que la barre), mais
               dans son propre groupe : la barre de type garde ainsi un et un seul onglet
               actif, et le JS peut lire les deux dimensions séparément.
               Bascule : le lien reconduit le type courant et ajoute — ou retire — le
               partage. Cliquer dessus quand il est actif le désactive.
               `active` vaut '' et non null quand le filtre est inactif : la molécule
               remplace un `active` null par l'id du PREMIER filtre — le contrôle se
               serait affiché actif en permanence. #}
            <div class="sc-tabs shrink-0"
                 style="--color-primary: {{ scColor.primary }}; --color-primary-light: {{ scColor.secondary }}; --sc-accent-rgb: {{ scColor.primary|hex_to_rgb }};">
                {% include '_molecules/filter-tabs/filter-tabs.html.twig' with {
                    filters: [
                        {
                            id: 'shared',
                            label: 'Partagés',
                            icon: 'share',
                            count: typeStats.shared,
                            href: path('app_scormia', qp|merge(typeParam)|merge(sharedOnly ? {} : {'shared': '1'})),
                            attr: {
                                'data-share-filter': sharedOnly ? '1' : '0',
                                'title': sharedOnly ? 'Retirer le filtre « Partagés »' : 'N\'afficher que les modules partagés'
                            }
                        }
                    ],
                    active: sharedOnly ? 'shared' : '',
                    name: 'shareState'
                } only %}
            </div>
            <div class="relative flex-1 md:max-w-md md:ml-auto">
                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'sm', color: 'current' } only %}
                </span>
                {# data-turbo-permanent : le champ garde le focus/valeur pendant la frappe malgré les visites Turbo. #}
                <input type="search" placeholder="Rechercher un module…" autocomplete="off"
                       id="scormia-search" data-turbo-permanent value="{{ search }}"
                       data-action="input->scormia--library#search"
                       class="w-full h-12 md:h-full pl-11 pr-4 rounded-full bg-white border border-black/[0.08] shadow-[0_2px_8px_rgba(0,0,0,0.04)] text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:border-gray-300 focus:ring-4 focus:ring-gray-100 transition">
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-8 mb-10" data-scormia--library-target="grid">
            {# Génération IA en cours : carte au FORMAT module + animation de chargement.
               Sondée en JS (jobCard/jobStep/jobBar) ; la page est rechargée à la fin. #}
            {% if activeJob %}
                <div data-scormia--library-target="jobCard" data-uuid="{{ activeJob.uuid }}"
                     class="relative flex flex-col h-full min-h-[320px] bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                    {# Barre de progression = bordure supérieure animée (accent Scormia) #}
                    <div class="absolute top-0 left-0 right-0 h-1 bg-gray-100">
                        <div data-scormia--library-target="jobBar" class="h-full" style="width: {{ activeJob.progress }}%; background: {{ scColor.primary }}; transition: width .5s cubic-bezier(.4,0,.2,1);"></div>
                    </div>

                    <div class="flex-grow p-8 pb-6">
                        <div class="flex items-center justify-between mb-5">
                            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-semibold uppercase tracking-wide" style="background: {{ scColor.bg }}; color: {{ scColor.primary }};">
                                <svg class="animate-spin" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
                                Génération…
                            </span>
                            <button type="button" data-action="scormia--library#cancelJob"
                                    class="text-xs font-semibold text-gray-400 hover:text-red-500 transition-colors">Annuler</button>
                        </div>

                        {# Titre réel du module en cours #}
                        <h3 class="text-xl font-semibold text-gray-900 leading-snug mb-4 line-clamp-2 h-14">{{ activeJob.title }}</h3>

                        {# Étape en cours (mise à jour en JS) #}
                        <p data-scormia--library-target="jobStep" class="text-sm text-gray-500 mb-6 truncate">{{ activeJob.step ?: 'Génération en cours…' }}</p>

                        {# Métadonnées à venir (parties/écrans, quiz…) → skeleton pulsant #}
                        <div class="space-y-3">
                            {% include '_atoms/skeleton/skeleton.html.twig' with { variant: 'text', width: '1/2' } only %}
                            {% include '_atoms/skeleton/skeleton.html.twig' with { variant: 'text', width: '2/3' } only %}
                        </div>
                    </div>

                    {# Footer (date + conso à venir) → skeleton, même gabarit que la carte module #}
                    <div class="flex items-center justify-between px-8 py-5 border-t border-gray-100 bg-gray-50/30 mt-auto">
                        {% include '_atoms/skeleton/skeleton.html.twig' with { variant: 'text', width: '1/3' } only %}
                        {% include '_atoms/skeleton/skeleton.html.twig' with { variant: 'text', width: '1/4' } only %}
                    </div>
                </div>
            {% endif %}

            {% for module in modules %}
                {% include 'scormia/_module_card.html.twig' with { module: module, scColor: scColor } only %}
            {% endfor %}
        </div>

        {# Aucun résultat (recherche ou catégorie vide) — rendu côté serveur, sur l'ensemble des modules. #}
        {% if modules is empty and not activeJob %}
            <p class="text-center text-gray-400 py-12 -mt-4 mb-10">
                {# Les filtres se COMBINANT, le message doit se combiner aussi : sous
                   « Partagés », dire « aucun module ne correspond à votre recherche »
                   serait faux dès qu'il en existe qui correspondent mais ne sont pas
                   partagés — l'utilisateur chercherait la mauvaise cause. #}
                {% if search is not empty %}
                    Aucun module {{ sharedOnly ? 'partagé ' : '' }}ne correspond à votre recherche.
                {% elseif sharedOnly %}
                    Aucun module partagé{{ typeFilter != 'all' ? ' dans cette catégorie' : '' }} pour le moment.
                {% else %}
                    Aucun module dans cette catégorie.
                {% endif %}
            </p>
        {% endif %}

        {% if totalPages > 1 %}
            {# Style pagination Moodia, recoloré aux couleurs de l'outil (issues de la DB) via les variables CSS + l'ombre. #}
            <div class="sc-pagination" style="--color-primary: {{ scColor.primary }}; --color-gradient-start: {{ scColor.primary }}; --color-gradient-middle: {{ scColor.secondary }}; --color-gradient-end: {{ scColor.secondary }}; --sc-accent-rgb: {{ scColor.primary|hex_to_rgb }};">
                {# baseUrl : les DEUX filtres doivent voyager avec la page. Sans `shared`,
                   la page 2 retomberait sur une liste simplement typée — et la pagination,
                   calculée sur l'intersection, pointerait à côté. #}
                {% include '_molecules/pagination/pagination.html.twig' with {
                    currentPage: currentPage,
                    totalPages: totalPages,
                    baseUrl: path('app_scormia', qp|merge(typeParam)|merge(sharedParam)),
                    variant: 'moodia'
                } only %}
            </div>
        {% endif %}
    {% endif %}

    {# ===== Modal : renommer un module (organisme partagé, bouton aux couleurs de l'outil) ===== #}
    {% include '_organisms/rename-modal/rename-modal.html.twig' with {
        title: 'Renommer le module',
        placeholder: 'Titre du module...',
        confirmLabel: 'Enregistrer',
        color: scColor,
        modalAttr:   {'data-scormia--library-target': 'renameModal', 'data-action': 'keydown.esc@window->scormia--library#closeRenameModal'},
        inputAttr:   {'data-scormia--library-target': 'renameInput', 'data-action': 'keydown.enter->scormia--library#confirmRename'},
        cancelAttr:  {'data-action': 'click->scormia--library#closeRenameModal'},
        confirmAttr: {'data-action': 'click->scormia--library#confirmRename'}
    } only %}

    {# ===== Modal : confirmation de suppression (organisme partagé, façon Moodia) ===== #}
    {% embed '_organisms/delete-modal/delete-modal.html.twig' with {
        modalAttr:   {'data-scormia--library-target': 'deleteModal', 'data-action': 'keydown.esc@window->scormia--library#closeDeleteModal'},
        cancelAttr:  {'data-action': 'click->scormia--library#closeDeleteModal'},
        confirmAttr: {'data-action': 'click->scormia--library#confirmDelete'}
    } only %}
        {% block titleBlock %}
            <h3 class="text-xl font-bold text-gray-900 mb-1.5">
                Supprimer « <span data-scormia--library-target="deleteModalTitle"></span> » ?
            </h3>
        {% endblock %}
        {% block description %}
            <p class="text-sm text-gray-400">Cette action est irréversible. Le module et tous ses écrans, blocs et médias seront supprimés définitivement.</p>
        {% endblock %}
    {% endembed %}

    {# ===== Modal : ajouter un module dans un cours Moodia (sélecteur partagé) ===== #}
    {% include '_molecules/add-to-moodia/add-to-moodia.html.twig' with {
        submitLabel:        'Ajouter ici',
        submitIcon:         'scormia',
        sourceIcon:         'bubul-scormia',
        sourceLabel:        'Module SCORM',
        sourceColorPrimary: 'current',
        sourceColorBg:      scColor.bg,
    } only %}

    {# ===== Modal : partage public (molécule partagée avec Slidia) ===== #}
    {% include '_molecules/share-link/share-link-modal.html.twig' with {
        endpoint: path('app_scormia_share_update', {uuid: '__UUID__'})|replace({'__UUID__': '{uuid}'}),
        accentHex: tool_color_details['scormia'].primary
    } only %}

</div>
{% endblock %}