{% extends 'sam/layout.html.twig' %}

{% block title %}SAM — Tableau de bord{% endblock %}

{% block sam_body %}

{# ── Macros tooltip réutilisables ── #}
{% macro info(text) %}
<span class="relative inline-flex items-center group cursor-help ml-1">
    <span class="text-gray-400 hover:text-gray-600 text-[11px] font-bold leading-none select-none">ⓘ</span>
    <span class="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-56 bg-gray-800 text-white text-[11px] leading-relaxed rounded-lg px-3 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-150 z-50 text-center shadow-lg whitespace-normal">
        {{ text }}
        <span class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-800"></span>
    </span>
</span>
{% endmacro %}
{% macro info_left(text) %}
<span class="relative inline-flex items-center group cursor-help ml-1">
    <span class="text-gray-400 hover:text-gray-600 text-[11px] font-bold leading-none select-none">ⓘ</span>
    <span class="pointer-events-none absolute bottom-full right-0 mb-2 w-56 bg-gray-800 text-white text-[11px] leading-relaxed rounded-lg px-3 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-150 z-50 text-center shadow-lg whitespace-normal">
        {{ text }}
        <span class="absolute top-full right-3 border-4 border-transparent border-t-gray-800"></span>
    </span>
</span>
{% endmacro %}
{% macro tooltip_delayed(text) %}<span class="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-56 bg-gray-800 text-white text-[11px] leading-relaxed rounded-lg px-3 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:delay-[250ms] z-50 text-center shadow-lg whitespace-normal"><span class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-800"></span>{{ text }}</span>{% endmacro %}
{% macro tooltip_delayed_left(text) %}<span class="pointer-events-none absolute bottom-full right-0 mb-2 w-56 bg-gray-800 text-white text-[11px] leading-relaxed rounded-lg px-3 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:delay-[250ms] z-50 text-center shadow-lg whitespace-normal"><span class="absolute top-full right-3 border-4 border-transparent border-t-gray-800"></span>{{ text }}</span>{% endmacro %}
<div class="px-4 sm:px-6 py-6 sm:py-8"
     {% if hasMoodleConfig %}
     data-controller="sam--sync"
     data-sam--sync-url-value="{{ path('app_sam_sync') }}"
     {% endif %}>
<div class="max-w-screen-xl mx-auto space-y-8">

{# ══════════════════════════════════════════════════════════════════════════════
   EN-TÊTE
══════════════════════════════════════════════════════════════════════════════ #}
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
    <div>
        <div class="flex items-center gap-2 mb-1">
            <h1 class="text-2xl font-bold text-sam-dark">
                {{ greeting }}, <span class="bg-gradient-to-r from-cohorts to-cohorts-light bg-clip-text text-transparent">{{ app.user.firstName }}</span> 👋
            </h1>
        </div>
        <p class="text-sm text-gray-400">
            {% if company %}<span class="font-medium text-gray-500">{{ company.name }}</span> — {% endif %}Qui progresse, qui décroche, qui excelle — toute la réalité de votre formation, en un coup d'œil.
        </p>
    </div>

    <div class="flex items-center gap-3 flex-shrink-0">
        {% if lastSyncAt %}
        <div class="flex items-center gap-1.5 text-xs text-gray-400">
            {% include '_atoms/icon/icon.html.twig' with {name: 'refresh', size: 'xs', color: 'gray'} only %}
            Sync. {{ lastSyncAt|date('d/m/Y à H\\hi') }}
        </div>
        {% endif %}

    </div>
</div>

{# ══════════════════════════════════════════════════════════════════════════════
   ÉTATS VIDES
══════════════════════════════════════════════════════════════════════════════ #}
{% if isAdmin and companies|length == 0 %}

    <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-200/60 shadow-[0_2px_8px_rgba(12,129,228,0.04)] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(12,129,228,0.10)] hover:border-primary/20 p-16 flex flex-col items-center text-center">
        <div class="w-16 h-16 rounded-2xl bg-gray-100 flex items-center justify-center mb-4">
            {% include '_atoms/icon/icon.html.twig' with {name: 'buildings', size: '2xl', color: 'gray'} only %}
        </div>
        <h2 class="text-xl font-bold text-sam-dark mb-2">Aucune entreprise</h2>
        <p class="text-sm text-gray-400 mb-6">Aucune entreprise n'est enregistrée dans le système.</p>
        <a href="{{ path('admin_company_list') }}"
           class="inline-flex items-center gap-2 bg-cohorts hover:bg-cohorts-dark text-white text-sm font-semibold px-5 py-2.5 rounded-xl transition-colors duration-200">
            Gérer les entreprises
        </a>
    </div>

{% elseif not hasMoodleConfig and not isAdmin %}

    <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-200/60 shadow-[0_2px_8px_rgba(12,129,228,0.04)] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(12,129,228,0.10)] hover:border-primary/20 p-16 flex flex-col items-center text-center">
        <div class="w-16 h-16 rounded-2xl bg-amber-50 flex items-center justify-center mb-4">
            {% include '_atoms/icon/icon.html.twig' with {name: 'warning', size: '2xl', color: 'warning'} only %}
        </div>
        <h2 class="text-xl font-bold text-sam-dark mb-2">Configuration requise</h2>
        <p class="text-sm text-gray-400 mb-6">
            {% if company %}L'entreprise <strong>{{ company.name }}</strong> n'a pas de configuration Moodle.
            {% else %}Pour utiliser SAM, vous devez être rattaché à une entreprise.{% endif %}
        </p>
        {% if company and isAdmin %}
            <a href="{{ path('admin_company_edit', {uuid: company.uuid}) }}"
               class="inline-flex items-center gap-2 bg-cohorts hover:bg-cohorts-dark text-white text-sm font-semibold px-5 py-2.5 rounded-xl transition-colors duration-200">
                Configurer Moodle
            </a>
        {% elseif company %}
            <p class="text-sm text-gray-400">
                Pour configurer Moodle, contactez votre administrateur à l'adresse
                <a href="mailto:{{ contactEmail }}" class="text-cohorts font-medium hover:underline">{{ contactEmail }}</a>.
            </p>
        {% endif %}
    </div>

{% else %}

{# ══════════════════════════════════════════════════════════════════════════════
   KPI CARDS
══════════════════════════════════════════════════════════════════════════════ #}
{% set cs = chartData.connectionStats %}
{% set inactiveOver30 = (cs.inactive5|default(0)) + (cs.inactive10|default(0)) %}

<div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-4">

    {# Macro card — tag=a si href, sinon div #}
    {% macro kpi(label, value, sub, icon, color, bg, href) %}
        {% set tag = href ? 'a' : 'div' %}
        <{{ tag }}{% if href %} href="{{ href }}"{% endif %}
            class="bg-white rounded-2xl p-5 shadow-md transition-all duration-200{% if href %} hover:shadow-md hover:-translate-y-0.5{% endif %}">
            {# Icône #}
            <div class="w-11 h-11 rounded-xl flex items-center justify-center mb-4" style="background:{{ bg }}18">
                {% include '_atoms/icon/icon.html.twig' with {name: icon, size: 'md', color: color} only %}
            </div>
            {# Valeur #}
            <div class="text-3xl font-bold text-sam-dark leading-none mb-1">{{ value }}</div>
            {# Label #}
            <div class="text-sm font-medium text-gray-500 mb-1">{{ label }}</div>
            {# Sous-texte #}
            <div class="text-xs text-gray-400">{{ sub }}</div>
        </{{ tag }}>
    {% endmacro %}

    {{ _self.kpi(
        'Apprenants',
        stats.users|default(0),
        stats.cohorts|default(0) ~ ' cohorte' ~ (stats.cohorts|default(0) > 1 ? 's' : ''),
        'users-group', 'primary', '#0C81E4',
        path('app_sam_users')
    ) }}

    {{ _self.kpi(
        'Cours',
        stats.courses|default(0),
        chartData.globalStats.total_activities|default(0) ~ ' activité' ~ (chartData.globalStats.total_activities|default(0) > 1 ? 's' : ''),
        'book', 'cohorts', '#8B5CF6',
        path('app_sam_courses')
    ) }}

    {{ _self.kpi(
        'Actifs (7j)',
        cs.active|default(0),
        cs.inactive2|default(0) ~ ' actifs 8–30j',
        'check-circle', 'success', '#309344',
        path('app_sam_users')
    ) }}

    {{ _self.kpi(
        'Jamais connectés',
        cs.neverConnected|default(0),
        'aucune connexion enregistrée',
        'user', 'error', '#D10000',
        path('app_sam_users')
    ) }}

</div>

{# ══════════════════════════════════════════════════════════════════════════════
   SECTION — CONNEXIONS & UTILISATEURS
══════════════════════════════════════════════════════════════════════════════ #}
<div>
    {% include '_molecules/section-divider/section-divider.html.twig' with {
        title: 'Suivi <span class="italic text-cohorts">d\'assiduité</span>',
        subtitle: 'Fréquence de connexion et profil d\'engagement de vos apprenants',
        icon: 'users-group',
        iconColor: 'cohorts'
    } only %}

    <div class="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-4">

        {# ── Graphique connexions (chargement asynchrone) ── #}
        <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-200/60 shadow-[0_2px_8px_rgba(12,129,228,0.04)] flex flex-col"
             data-controller="sam--connections-dashboard"
             data-sam--connections-dashboard-refresh-url-value="{{ path('api_sam_connections_refresh') }}"
             data-sam--connections-dashboard-company-url-value="{{ path('api_sam_connections_company') }}">

            {# Header : titre + sélecteur de période #}
            <div class="px-5 pt-4 pb-3 flex items-center justify-between border-b border-gray-100">
                <div class="flex items-center gap-2.5">
                    <div class="w-7 h-7 rounded-lg bg-cohorts/10 flex items-center justify-center flex-shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with {name: 'chart', size: 'xs', color: 'cohorts'} only %}
                    </div>
                    <div>
                        <p class="relative group cursor-help text-sm font-semibold text-sam-dark">{{ _self.tooltip_delayed('Nombre d\'utilisateurs uniques connectés chaque mois sur la période sélectionnée.') }}Évolution des connexions</p>
                        <p class="text-xs text-gray-400 mt-0.5 hidden"
                           data-sam--connections-dashboard-target="total"></p>
                    </div>
                </div>

                {# Sélecteur de période #}
                <div class="flex items-center gap-1.5">
                    {% for period, label in {3: '3 mois', 6: '6 mois', 12: '12 mois'} %}
                        <button type="button"
                                class="text-xs px-3 py-1.5 rounded-full border font-medium cursor-pointer transition-all duration-200
                                       bg-white text-gray-500 border-gray-200
                                       [&.active]:bg-violet-500 [&.active]:text-white [&.active]:border-violet-500 [&.active]:font-bold
                                       [&:not(.active):hover]:border-violet-300 [&:not(.active):hover]:text-violet-500
                                       {{ period == 12 ? 'active' : '' }}"
                                data-period="{{ period }}"
                                data-sam--connections-dashboard-target="periodBtn"
                                data-action="click->sam--connections-dashboard#switchPeriod">
                            {{ label }}
                        </button>
                    {% endfor %}
                </div>
            </div>

            {# Zone graphique #}
            <div class="px-2 pb-4 pt-3 relative flex-1 min-h-0">

                {# Skeleton de chargement #}
                <div data-sam--connections-dashboard-target="skeleton"
                     class="absolute inset-x-4 inset-y-3 animate-pulse">
                    <svg viewBox="0 0 400 200" preserveAspectRatio="none" class="w-full h-full opacity-20">
                        <polyline points="0,160 40,130 80,140 120,100 160,110 200,75 240,80 280,50 320,60 360,30 400,35"
                                  fill="none" stroke="#8B5CF6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                        <polygon points="0,160 40,130 80,140 120,100 160,110 200,75 240,80 280,50 320,60 360,30 400,35 400,200 0,200"
                                 fill="#8B5CF6" opacity="0.15"/>
                    </svg>
                </div>

                {# Canvas du graphique #}
                <canvas data-sam--connections-dashboard-target="canvas"
                        class="hidden" style="width:100%;height:100%;"></canvas>

                {# État vide #}
                <div data-sam--connections-dashboard-target="empty"
                     class="hidden h-full flex flex-col items-center justify-center text-center text-gray-400 gap-2">
                    {% include '_atoms/icon/icon.html.twig' with {name: 'chart', size: '2xl', color: 'gray'} only %}
                    <p class="text-sm">Aucune connexion enregistrée</p>
                    <p class="text-xs">Les données apparaîtront après la prochaine synchronisation</p>
                </div>

            </div>
        </div>

        {# ── Profil d'engagement (donut, chargement asynchrone) ── #}
        <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-200/60 shadow-[0_2px_8px_rgba(12,129,228,0.04)]"
             data-controller="sam--chart-connection-stats"
             data-sam--chart-connection-stats-refresh-url-value="{{ path('api_sam_engagement_refresh') }}"
             data-sam--chart-connection-stats-company-url-value="{{ path('api_sam_engagement_company') }}">
            <div class="px-5 pt-4 pb-3 border-b border-gray-50 flex items-center gap-2.5">
                <div class="w-7 h-7 rounded-lg bg-cohorts/10 flex items-center justify-center shrink-0">
                    {% include '_atoms/icon/icon.html.twig' with {name: 'users-group', size: 'xs', color: 'cohorts'} only %}
                </div>
                <div>
                    <p class="relative group cursor-help text-sm font-semibold text-sam-dark">{{ _self.tooltip_delayed('Répartition des apprenants selon leur fréquence de connexion : actifs réguliers, occasionnels, ou inactifs.') }}Profil d'engagement</p>
                    <p class="text-xs text-gray-400 mt-0.5">Fréquence de connexion</p>
                </div>
            </div>
            <div class="p-5">

                {# Skeleton #}
                <div data-sam--chart-connection-stats-target="skeleton"
                     class="animate-pulse space-y-3">
                    <div class="mx-auto w-32 h-32 rounded-full bg-gray-100"></div>
                    <div class="space-y-2 mt-4">
                        <div class="h-3 bg-gray-100 rounded-full w-full"></div>
                        <div class="h-3 bg-gray-100 rounded-full w-full"></div>
                        <div class="h-3 bg-gray-100 rounded-full w-full"></div>
                        <div class="h-3 bg-gray-100 rounded-full w-full"></div>
                    </div>
                </div>

                {# Canvas + légende (révélés par le JS) #}
                <div class="flex flex-row lg:flex-col items-center gap-6 lg:gap-0">
                    <div class="flex-shrink-0" style="width:140px;">
                        <canvas data-sam--chart-connection-stats-target="canvas" class="hidden"></canvas>
                    </div>
                    <div data-sam--chart-connection-stats-target="legend"
                         class="hidden flex-1 lg:flex-none w-full lg:mt-4 space-y-2"></div>
                </div>

                {# État vide #}
                <div data-sam--chart-connection-stats-target="empty"
                     class="hidden py-8 flex flex-col items-center text-gray-400">
                    {% include '_atoms/icon/icon.html.twig' with {name: 'users', size: '2xl', color: 'gray'} only %}
                    <p class="text-xs mt-2">Aucune donnée</p>
                </div>

            </div>
        </div>

    </div>
</div>

{# ══════════════════════════════════════════════════════════════════════════════
   SECTION — PROGRESSION JOURNALIÈRE
══════════════════════════════════════════════════════════════════════════════ #}
<div>
    {% include '_molecules/section-divider/section-divider.html.twig' with {
        title: 'Progression <span class="italic text-success">journalière</span>',
        subtitle: 'Complétions d\'activités jour par jour — identifiez les pics et creux d\'apprentissage',
        icon: 'chart',
        iconColor: 'success'
    } only %}

    {% set hasCompletionData = chartData.monthlyCompletions.labels|length > 0 %}
    {% set allTypes = chartData.monthlyCompletions.datasets|keys %}
    {% set typeLabels = {
        'quiz': 'Quiz', 'assign': 'Devoir', 'forum': 'Forum',
        'scorm': 'SCORM', 'page': 'Page', 'url': 'URL',
        'h5pactivity': 'H5P', 'resource': 'Fichier',
        'lesson': 'Leçon', 'choice': 'Choix', 'data': 'Base de données',
        'feedback': 'Feedback', 'glossary': 'Glossaire', 'wiki': 'Wiki',
        'workshop': 'Atelier', 'chat': 'Chat', 'survey': 'Sondage',
        'questionnaire': 'Questionnaire', 'lti': 'LTI', 'imscp': 'IMS CP',
        'book': 'Livre', 'label': 'Étiquette', 'folder': 'Dossier',
        'bigbluebuttonbn': 'BigBlueButton', 'zoom': 'Zoom',
        'attendance': 'Présence', 'certificate': 'Certificat',
        'hvp': 'H5P (hvp)', 'reengagement': 'Relance', 'customcert': 'Certificat perso'
    } %}
    {% set typeColors = {
        'quiz': '#8b5cf6', 'assign': '#0ea5e9', 'forum': '#10b981',
        'scorm': '#1E40AF', 'page': '#3B82F6', 'url': '#f97316',
        'h5pactivity': '#ec4899', 'resource': '#f59e0b',
        'lesson': '#6366f1', 'choice': '#06b6d4', 'data': '#84cc16',
        'feedback': '#f43f5e', 'glossary': '#a78bfa', 'wiki': '#22d3ee',
        'workshop': '#fb923c', 'chat': '#4ade80', 'survey': '#facc15',
        'questionnaire': '#e879f9', 'lti': '#38bdf8', 'imscp': '#a3e635',
        'book': '#818cf8', 'label': '#94a3b8', 'folder': '#fbbf24',
        'bigbluebuttonbn': '#ef4444', 'zoom': '#2563eb',
        'attendance': '#059669', 'certificate': '#d97706',
        'hvp': '#db2777', 'reengagement': '#7c3aed', 'customcert': '#b45309'
    } %}

    <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-200/60 shadow-[0_2px_8px_rgba(12,129,228,0.04)] overflow-hidden"
         {% if hasCompletionData %}
         data-controller="sam--chart-completions"
         data-sam--chart-completions-data-value="{{ chartData.monthlyCompletions|json_encode }}"
         {% endif %}>

        {% if hasCompletionData %}
        {# Header : filtres à gauche, période à droite #}
        <div class="px-5 pt-4 pb-3 border-b border-gray-50 flex items-center gap-3">
            <span class="text-xs text-gray-400 font-medium shrink-0">Filtrer</span>
            <div class="relative flex-1 min-w-0">
                <div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-white to-transparent pointer-events-none z-10"></div>
                <div class="flex items-center gap-1.5 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
                    {% for type in allTypes %}
                    {% set tColor = typeColors[type] ?? '#9CA3AF' %}
                    <button class="inline-flex items-center text-xs font-medium px-2.5 py-1 rounded-full border border-gray-200 text-gray-400
                                   transition-all duration-150 whitespace-nowrap shrink-0 hover:border-gray-300 hover:text-gray-600"
                            data-type="{{ type }}"
                            data-color="{{ tColor }}"
                            data-action="click->sam--chart-completions#toggleType"
                            data-sam--chart-completions-target="typeToggle">
                        {{ typeLabels[type] ?? type }}
                    </button>
                    {% endfor %}
                </div>
            </div>
            <div class="flex items-center gap-1.5 shrink-0 pl-2 border-l border-gray-100">
                {% for p in [{'v':7,'l':'7j'}, {'v':14,'l':'14j'}, {'v':30,'l':'30j'}] %}
                <button type="button"
                        class="text-xs px-3 py-1.5 rounded-full border font-medium cursor-pointer transition-all duration-200
                               bg-white text-gray-500 border-gray-200
                               [&.active]:bg-violet-500 [&.active]:text-white [&.active]:border-violet-500 [&.active]:font-bold
                               [&:not(.active):hover]:border-violet-300 [&:not(.active):hover]:text-violet-500
                               {{ p.v == 30 ? 'active' : '' }}"
                        data-action="click->sam--chart-completions#setPeriod"
                        data-sam--chart-completions-target="periodBtns"
                        data-days="{{ p.v }}">{{ p.l }}</button>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {# Canvas + tooltip #}
        <div class="px-4 pt-4 pb-3 relative" data-sam--chart-completions-target="chartWrapper">
            {% if hasCompletionData %}
                <div style="height:280px;">
                    <canvas data-sam--chart-completions-target="canvas"></canvas>
                </div>
                <div data-sam--chart-completions-target="tooltip"
                     class="hidden fixed z-50 pointer-events-none"></div>
            {% else %}
                <div class="h-[280px] flex flex-col items-center justify-center text-center text-gray-400 gap-2">
                    {% include '_atoms/icon/icon.html.twig' with {name: 'chart', size: '2xl', color: 'gray'} only %}
                    <p class="text-sm">Aucune donnée disponible</p>
                    <p class="text-xs">Les données apparaîtront après la prochaine synchronisation</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

{# ══════════════════════════════════════════════════════════════════════════════
   SECTION — FORMATION (accordion identique à /sam/courses)
══════════════════════════════════════════════════════════════════════════════ #}
<div>
    {% embed '_molecules/section-divider/section-divider.html.twig' with {
        title: 'Formations <span class="italic text-primary">à traiter</span>',
        subtitle: 'Formations nécessitant une action — relancez vos apprenants en un clic',
        icon: 'book',
        iconColor: 'primary'
    } %}
        {% block right %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Voir tous',
                variant: 'cohorts',
                size: 'sm',
                href: path('app_sam_courses')
            } %}
        {% endblock %}
    {% endembed %}

    {% if dashboardCourses|length == 0 %}
        <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-200/60 shadow-[0_2px_8px_rgba(12,129,228,0.04)] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(12,129,228,0.10)] hover:border-primary/20 p-12 flex flex-col items-center text-center">
            {% include '_atoms/icon/icon.html.twig' with {name: 'book', size: '3xl', color: 'gray'} only %}
            <p class="text-sm text-gray-500 mt-3 font-medium">Tout est à jour ✓</p>
            <p class="text-xs text-gray-400 mt-1">Aucune formation n'a d'apprenant à relancer en ce moment.</p>
        </div>
    {% else %}
        <div data-controller="sam--accordion" data-sam--course-list-total-value="{{ dashboardCourses|length }}">

            <div class="hidden lg:grid grid-cols-[1fr_80px_80px_80px_80px_200px] gap-4 px-5 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">
                <span>Formation</span>
                <span class="relative group flex items-center justify-center cursor-help">{{ _self.tooltip_delayed('Nombre d\'apprenants inscrits à cette formation.') }}Inscrits</span>
                <span class="relative group flex items-center justify-center cursor-help">{{ _self.tooltip_delayed('Apprenants ayant complété 100 % des activités traçables.') }}Terminés</span>
                <span class="relative group flex items-center justify-center cursor-help">{{ _self.tooltip_delayed('Apprenants ayant commencé mais pas encore terminé la formation.') }}En cours</span>
                <span class="relative group flex items-center justify-center cursor-help">{{ _self.tooltip_delayed('Apprenants n\'ayant pas encore reçu de rappel aujourd\'hui parmi ceux qui n\'ont pas terminé.') }}À relancer</span>
                <span class="relative group flex items-center justify-end cursor-help">{{ _self.tooltip_delayed_left('Taux moyen de complétion des activités traçables sur l\'ensemble des inscrits.') }}Progression</span>
            </div>

            <div class="space-y-2 max-h-[530px] overflow-y-auto pr-1" data-sam--course-list-target="list">
                {% for course in dashboardCourses %}
                    {% set stats     = dashCourseStats[course.id] ?? {enrolled: 0, completed: 0, inProgress: 0, atRisk: 0, percentage: 0} %}
                    {% set pct       = stats.percentage|default(0)|round %}
                    {% set sections  = dashCourseSections[course.id] ?? [] %}
                    {% set cohorts   = dashCourseCohorts[course.id] ?? [] %}
                    {% set riskUsers = dashAtRiskUsers[course.id] ?? [] %}

                    {% if pct >= 75 %}
                        {% set statusLabel = 'Excellent' %}
                        {% set statusClass = 'text-success bg-success/10' %}
                        {% set barColor    = '#22c55e' %}
                        {% set courseStatus = 'excellent' %}
                    {% elseif pct > 0 %}
                        {% set statusLabel = 'En cours' %}
                        {% set statusClass = 'text-warning bg-warning/10' %}
                        {% set barColor    = '#f59e0b' %}
                        {% set courseStatus = 'in-progress' %}
                    {% else %}
                        {% set statusLabel  = 'Pas commencé' %}
                        {% set statusClass  = 'text-error bg-error/10' %}
                        {% set barColor     = '#ef4444' %}
                        {% set courseStatus = 'at-risk' %}
                    {% endif %}

                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow"
                         data-sam--course-list-target="courseRow"
                         data-status="{{ courseStatus }}">

                        <div class="grid grid-cols-[1fr_auto] lg:grid-cols-[1fr_80px_80px_80px_80px_200px] gap-4 px-5 py-4 items-center cursor-pointer select-none"
                             data-action="click->sam--accordion#toggle"
                             data-item-id="dash-course-{{ course.id }}"
                             data-level="course">

                            <div class="flex items-center gap-3 min-w-0">
                                <div class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 bg-cohorts/10">
                                    {% include '_atoms/icon/icon.html.twig' with {name: 'book', size: 'md', color: 'cohorts'} only %}
                                </div>
                                <div class="min-w-0">
                                    <div class="flex items-center gap-2 flex-wrap">
                                        <h3 class="text-sm font-semibold text-gray-900 truncate">{{ course.fullname }}</h3>
                                        {% if not course.visible %}
                                            <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-warning/10 text-warning">Masqué</span>
                                        {% endif %}
                                    </div>
                                    {% if cohorts|length > 0 %}
                                        <div class="flex flex-wrap gap-1 mt-1">
                                            {% for cohort in cohorts %}
                                                <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-cohorts/10 text-cohorts">{{ cohort.name }}</span>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="text-xs text-gray-400 mt-1">
                                        {{ course.sectionsCount }} module{{ course.sectionsCount > 1 ? 's' : '' }} · {{ course.activitiesCount }} activité{{ course.activitiesCount > 1 ? 's' : '' }}
                                    </div>
                                </div>
                            </div>

                            <div class="text-center hidden lg:flex flex-col items-center">
                                <span class="text-lg font-bold text-gray-800">{{ stats.enrolled }}</span>
                                <span class="text-[10px] text-gray-400">inscrits</span>
                            </div>

                            <div class="text-center hidden lg:flex flex-col items-center">
                                {% if stats.completed > 0 %}
                                    <span class="text-lg font-bold text-success">{{ stats.completed }}</span>
                                    <span class="text-[10px] text-gray-400">terminé{{ stats.completed > 1 ? 's' : '' }}</span>
                                {% else %}
                                    <span class="text-gray-300 text-sm">&mdash;</span>
                                {% endif %}
                            </div>

                            <div class="text-center hidden lg:flex flex-col items-center">
                                {% if stats.inProgress > 0 %}
                                    <span class="text-lg font-bold text-warning">{{ stats.inProgress }}</span>
                                    <span class="text-[10px] text-gray-400">en cours</span>
                                {% else %}
                                    <span class="text-gray-300 text-sm">&mdash;</span>
                                {% endif %}
                            </div>

                            <div class="text-center hidden lg:flex flex-col items-center" data-remind-count-cell>
                                {% set lastSentDates = dashReminderSent[course.id] ?? {} %}
                                {% set today = 'now'|date('Y-m-d') %}
                                {% set toRemindCount = riskUsers|filter(u => not (lastSentDates[u.id] is defined and lastSentDates[u.id]|date('Y-m-d') == today))|length %}
                                {% if toRemindCount > 0 %}
                                    <span class="text-lg font-bold text-error" data-remind-count>{{ toRemindCount }}</span>
                                    <span class="text-[10px] text-gray-400" data-remind-label>à relancer</span>
                                {% else %}
                                    <span class="text-gray-300 text-sm" data-remind-dash>&mdash;</span>
                                {% endif %}
                            </div>

                            <div class="flex items-center gap-3 lg:justify-end">
                                {% include '_molecules/progress-ring/progress-ring.html.twig' with {
                                    value: pct,
                                    size: 'sm',
                                    variant: pct >= 75 ? 'success' : (pct > 0 ? 'warning' : 'error'),
                                    thickness: 'normal'
                                } %}
                                <div class="shrink-0 text-gray-400 transition-transform duration-200 sam-accordion__icon">
                                    {% include '_atoms/icon/icon.html.twig' with {name: 'chevron-down', size: 'sm', color: 'gray'} only %}
                                </div>
                            </div>
                        </div>

                        <div class="border-t border-gray-100 bg-gray-50/50"
                             style="overflow: hidden; max-height: 0; transition: max-height 0.35s ease;"
                             data-content-id="dash-course-{{ course.id }}"
                             data-level="course">
                            <div class="px-5 py-4 space-y-4">

                                {% if sections|length > 0 %}
                                    <div>
                                        <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">
                                            Modules <span class="ml-1 text-gray-300">{{ sections|length }}</span>
                                        </p>
                                        <div class="space-y-1">
                                            {% for section in sections %}
                                                {% set secStats = dashSectionStats[course.id][section.id] ?? {completedUsers: 0, totalUsers: stats.enrolled, percentage: 0} %}
                                                {% set secPct   = secStats.percentage|default(0)|round %}
                                                {% if secPct >= 90 %}
                                                    {% set secLabel = 'Excellent' %} {% set secClass = 'text-success bg-success/10' %} {% set secColor = '#22c55e' %}
                                                {% elseif secPct >= 40 %}
                                                    {% set secLabel = 'En cours' %}  {% set secClass = 'text-warning bg-warning/10' %} {% set secColor = '#f59e0b' %}
                                                {% else %}
                                                    {% set secLabel = 'Pas commencé' %}  {% set secClass = 'text-error bg-error/10' %}   {% set secColor = '#ef4444' %}
                                                {% endif %}
                                                <div class="flex items-center gap-3 py-1.5">
                                                    <span class="w-5 h-5 rounded-full bg-gray-200 text-gray-500 text-xs font-bold flex items-center justify-center shrink-0">{{ loop.index }}</span>
                                                    <span class="text-sm text-gray-700 w-40 shrink-0 truncate">{{ section.name }}</span>
                                                    <div class="flex-1 h-1.5 bg-gray-200 rounded-full overflow-hidden">
                                                        <div class="h-full rounded-full" style="width:{{ secPct }}%;background:{{ secColor }}"></div>
                                                    </div>
                                                    <span class="text-xs text-gray-500 shrink-0 w-14 text-right">{{ secStats.completedUsers }}/{{ secStats.totalUsers }}</span>
                                                    <span class="text-xs font-semibold px-1.5 py-0.5 rounded shrink-0 {{ secClass }}">{{ secLabel }}</span>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}

                                {% if riskUsers|length > 0 %}
                                    <div data-controller="sam--reminder"
                                         data-sam--reminder-remind-url-value="{{ path('app_sam_courses_remind', {id: course.id, userId: 0})|replace({'/0': '/__USER_ID__'}) }}"
                                         data-sam--reminder-remind-all-url-value="{{ path('app_sam_courses_remind_all', {id: course.id}) }}">
                                        <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
                                            <span class="relative group cursor-help inline-flex items-center gap-1">
                                                {{ _self.tooltip_delayed('Cliquez sur un apprenant ou sur "Relancer tous" pour lui envoyer un e-mail de rappel l\'invitant à reprendre sa formation.') }}
                                                Apprenants à relancer <span class="font-normal text-gray-300">({{ riskUsers|length }})</span>
                                            </span>
                                        </p>
                                        <div class="flex flex-wrap gap-2 mb-3">
                                            {% set lastSentDates = dashReminderSent[course.id] ?? {} %}
                                            {% set today = 'now'|date('Y-m-d') %}
                                            {% for user in riskUsers %}
                                                {% set lastSent = lastSentDates[user.id] ?? null %}
                                                {% set alreadySent = lastSent and lastSent|date('Y-m-d') == today %}
                                                {% set lastSentLabel = lastSent ? (alreadySent ? 'Envoyé aujourd\'hui à ' ~ lastSent|date('H\\hi') : 'Dernier envoi le ' ~ lastSent|date('d/m')) : null %}
                                                <div class="flex items-center gap-1.5 pl-1 pr-2 py-1 bg-white border rounded-full transition-colors {{ alreadySent ? 'opacity-60 border-gray-200 cursor-help' : 'border-gray-200 cursor-pointer hover:border-cohorts/40 hover:bg-cohorts/5' }}"
                                                     data-user-id="{{ user.id }}"
                                                     data-sam--reminder-target="userChip"
                                                     {% if not alreadySent %}data-action="click->sam--reminder#sendOne"{% endif %}
                                                     data-tooltip="{{ lastSentLabel ?? 'Relancer ' ~ user.firstname }}">
                                                    <span class="w-6 h-6 rounded-full bg-cohorts/20 text-cohorts text-xs font-bold flex items-center justify-center shrink-0">{{ user.firstname|first|upper }}</span>
                                                    <div class="flex flex-col leading-none">
                                                        <span class="text-sm text-gray-700 font-medium">{{ user.firstname }} {{ user.lastname }}</span>
                                                        {% if lastSentLabel %}
                                                            <span class="text-[10px] text-gray-400 mt-0.5">{{ lastSentLabel }}</span>
                                                        {% endif %}
                                                    </div>
                                                    <button type="button"
                                                            class="ml-1 text-xs font-semibold pointer-events-none shrink-0 {{ alreadySent ? 'text-gray-400' : 'text-cohorts' }}"
                                                            data-sam--reminder-target="singleBtn"
                                                            data-user-id="{{ user.id }}"
                                                            {% if alreadySent %}disabled{% endif %}>{{ alreadySent ? '✓' : '↗' }}</button>
                                                </div>
                                            {% endfor %}
                                        </div>
                                        <button type="button"
                                                class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border-2 border-cohorts/40 text-cohorts text-sm font-semibold hover:bg-cohorts hover:text-white hover:border-cohorts transition-all disabled:opacity-40"
                                                data-action="click->sam--reminder#sendAll"
                                                data-sam--reminder-target="allBtn">
                                            {% include '_atoms/icon/icon.html.twig' with {name: 'send', size: 'xs', color: 'current'} only %}
                                            Relancer tous
                                        </button>
                                        <p class="text-xs text-gray-400 mt-2 hidden" data-sam--reminder-target="status"></p>
                                    </div>
                                {% endif %}

                            </div>
                        </div>
                    </div>
                {% endfor %}

                {# État vide si aucun cours ne correspond au filtre actif #}
                <div data-sam--course-list-target="empty"
                     class="hidden py-12 flex flex-col items-center gap-3 text-center">
                    {% include '_atoms/icon/icon.html.twig' with {name: 'search', size: '2xl', color: 'gray'} only %}
                    <p class="text-sm font-medium text-gray-500">Aucune formation dans cette catégorie</p>
                    <p class="text-xs text-gray-400">Aucun cours ne correspond à ce filtre pour le moment.</p>
                </div>

            </div>
        </div>
    {% endif %}
</div>

{# ══════════════════════════════════════════════════════════════════════════════
   SECTION — SUIVI EN TEMPS RÉEL
══════════════════════════════════════════════════════════════════════════════ #}
<div>
    {% include '_molecules/section-divider/section-divider.html.twig' with {
        title: 'Suivi en <span class="italic text-warning">temps réel</span>',
        subtitle: 'Activités récentes et apprenants à surveiller',
        icon: 'clock',
        iconColor: 'warning'
    } only %}

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-200/60 shadow-[0_2px_8px_rgba(12,129,228,0.04)] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(12,129,228,0.10)] hover:border-primary/20"
             data-controller="sam--recent-activity"
             data-sam--recent-activity-url-value="{{ path('api_sam_submissions_list', {limit: 7}) }}">
            <div class="px-5 pt-4 pb-3 border-b border-gray-50 flex items-center gap-2.5">
                <div class="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
                    {% include '_atoms/icon/icon.html.twig' with {name: 'clock', size: 'xs', color: 'primary'} only %}
                </div>
                <div>
                    <p class="relative group cursor-help text-sm font-semibold text-sam-dark">{{ _self.tooltip_delayed('Dernières complétions d\'activités par vos apprenants, toutes formations confondues.') }}Activités récentes</p>
                    <p class="text-xs text-gray-400 mt-0.5">Dernières complétions</p>
                </div>
            </div>
            <div data-sam--recent-activity-target="skeleton" class="divide-y divide-gray-50">
                {% for i in 1..5 %}
                <div class="px-4 py-3 flex items-start gap-3 animate-pulse">
                    <div class="w-8 h-8 rounded-xl bg-gray-100 shrink-0"></div>
                    <div class="flex-1 space-y-1.5">
                        <div class="h-3 bg-gray-100 rounded w-3/4"></div>
                        <div class="h-2.5 bg-gray-100 rounded w-1/2"></div>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div data-sam--recent-activity-target="list" class="hidden divide-y divide-gray-50"></div>
            <div data-sam--recent-activity-target="empty" class="hidden py-8 flex flex-col items-center text-gray-400">
                {% include '_atoms/icon/icon.html.twig' with {name: 'clock', size: '2xl', color: 'gray'} only %}
                <p class="text-xs mt-2">Aucune activité récente</p>
            </div>
        </div>

        {% if chartData.dropoutUsers|length > 0 %}
        <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-200/60 shadow-[0_2px_8px_rgba(12,129,228,0.04)] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(12,129,228,0.10)] hover:border-primary/20">
            <div class="px-5 pt-4 pb-3 flex items-center justify-between border-b border-gray-50">
                <div class="flex items-center gap-2.5">
                    <div class="w-7 h-7 rounded-lg bg-error/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with {name: 'warning', size: 'xs', color: 'error'} only %}
                    </div>
                    <div>
                        <p class="relative group cursor-help text-sm font-semibold text-sam-dark">{{ _self.tooltip_delayed('Apprenants n\'ayant complété aucune activité depuis plus de 7 jours, ou n\'en ayant jamais complété. Triés du plus inactif au moins inactif.') }}Apprenants en décrochage</p>
                        <p class="text-xs text-gray-400 mt-0.5">Inactifs depuis 7+ jours</p>
                    </div>
                </div>
            </div>
            <div class="divide-y divide-gray-50">
                {% for user in chartData.dropoutUsers|slice(0, 7) %}
                    {% set initials = user.fullname|split(' ')|map(w => w[0] ?? '')|join('')|upper|slice(0,2) %}
                    {% set inactive  = user.inactiveDays|default(0) %}
                    {% set pct       = user.completion|default(0)|round %}
                    <a href="{{ path('app_sam_users_detail', {id: user.id}) }}"
                       class="px-4 py-3 flex items-center gap-3 hover:bg-sam-hover transition-colors duration-150">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 text-xs font-bold text-error" style="background:rgba(209,0,0,0.08)">{{ initials }}</div>
                        <div class="min-w-0 flex-1">
                            <div class="text-xs font-semibold text-gray-800 truncate">{{ user.fullname }}</div>
                            {% if user.cohort is defined and user.cohort %}
                                <div class="text-[10px] text-gray-400 truncate">{{ user.cohort }}</div>
                            {% endif %}
                        </div>
                        <div class="flex items-center gap-2 flex-shrink-0">
                            <span class="text-[10px] font-semibold {{ inactive > 14 ? 'text-error' : 'text-warning' }}">∞</span>
                            <span class="text-[10px] text-gray-400">{{ pct }}%</span>
                        </div>
                    </a>
                {% endfor %}
            </div>
        </div>
        {% else %}
        <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-200/60 shadow-[0_2px_8px_rgba(12,129,228,0.04)] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(12,129,228,0.10)] hover:border-primary/20 p-8 flex flex-col items-center text-center text-gray-400">
            {% include '_atoms/icon/icon.html.twig' with {name: 'check', size: '2xl', color: 'success'} only %}
            <p class="text-sm font-medium text-gray-600 mt-3">Aucun apprenant en décrochage</p>
            <p class="text-xs text-gray-400 mt-1">Tout le monde est actif !</p>
        </div>
        {% endif %}

    </div>
</div>

{% endif %}{# fin hasMoodleConfig #}

</div>{# /container #}
</div>{# /px-6 py-8 #}

{# ══════════════════════════════════════════════════════════════════════════════
   MODAL DE CONFIRMATION — SYNCHRONISATION
   (HTML inline pour éviter le conflit {% block body %} avec base.html.twig)
══════════════════════════════════════════════════════════════════════════════ #}
{% if hasMoodleConfig %}
<div id="sam-sync-modal"
     class="fixed inset-0 z-50 hidden"
     role="dialog"
     aria-modal="true"
     aria-labelledby="sam-sync-modal-title">

    {# Backdrop #}
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
         onclick="closeModal('sam-sync-modal')"></div>

    {# Container centré #}
    <div class="fixed inset-0 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4">
            <div class="w-full max-w-md bg-white rounded-xl shadow-xl overflow-hidden" onclick="event.stopPropagation()">

                {# Header #}
                <div class="px-6 py-4 border-b border-warning/20 flex items-start justify-between gap-4">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center flex-shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with {name: 'warning', size: 'md', color: 'warning'} only %}
                        </div>
                        <div>
                            <h2 id="sam-sync-modal-title" class="text-lg font-semibold text-gray-900">Synchroniser les données Moodle</h2>
                        </div>
                    </div>
                    {% include '_atoms/close-button/close-button.html.twig' with {
                        attr: { onclick: "closeModal('sam-sync-modal')" }
                    } only %}
                </div>

                {# Body #}
                <div class="px-6 py-4 space-y-4">
                    <p class="text-sm text-gray-600">
                        Cette opération va récupérer l'intégralité des données depuis Moodle :
                        utilisateurs, cohortes, cours et progressions.
                    </p>
                    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 flex gap-3">
                        {% include '_atoms/icon/icon.html.twig' with {name: 'warning', size: 'sm', color: 'warning'} only %}
                        <div>
                            <p class="text-sm font-semibold text-amber-800">Opération longue</p>
                            <p class="text-xs text-amber-700 mt-0.5">
                                La synchronisation peut prendre <strong>1 à 2 minutes</strong> selon le volume de données.
                                Ne fermez pas la page pendant l'opération.
                            </p>
                        </div>
                    </div>
                </div>

                {# Footer #}
                <div class="px-6 py-4 border-t border-gray-100 bg-gray-50 flex items-center justify-between">
                    <button type="button"
                            class="text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors cursor-pointer"
                            onclick="closeModal('sam-sync-modal')">
                        Annuler
                    </button>
                    <button type="button"
                            class="inline-flex items-center gap-2 bg-cohorts hover:bg-cohorts-dark text-white text-sm font-semibold px-5 py-2.5 rounded-xl transition-colors duration-200 shadow-sm"
                            data-action="click->sam--sync#sync"
                            data-sam--sync-target="confirmButton">
                        <svg data-sam--sync-target="spinner" class="hidden animate-spin w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                        <span data-sam--sync-target="label">Lancer la synchronisation</span>
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}