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

{% block title %}Formations - SAM{% endblock %}

{% block sam_body %}
<div>

    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        {# ══════════════════════════════════════════════════════════════
           BREADCRUMB
           ══════════════════════════════════════════════════════════════ #}
        {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
            showHome: false,
            items: [
                { label: 'Dashboard', href: path('app_sam_index') },
                { label: 'Formations' }
            ],
            class: 'mb-6'
        } %}

        {# ══════════════════════════════════════════════════════════════
           PAGE HEADER
           ══════════════════════════════════════════════════════════════ #}
        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-8"
             data-controller="sam--sync"
             data-sam--sync-url-value="{{ path('app_sam_courses_sync') }}"
             data-sam--sync-label-value="formations">

            <div>
                <div class="flex items-center gap-3 mb-1">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'book', size: 'xl', color: 'cohorts' } only %}
                    <h1 class="text-2xl font-bold font-secondary text-gray-900">Gestion des formations</h1>
                </div>
                <p class="text-base text-gray-500 mt-1">
                    <strong class="text-gray-700">{{ total }}</strong> formations Moodle synchronisées
                    {% if allCohorts|length > 0 %} · <strong class="text-gray-700">{{ allCohorts|length }}</strong> cohortes{% endif %}
                    {% if search %} · Recherche : "<em>{{ search }}</em>"{% endif %}
                    {% if cohortFilter %} · Filtre cohorte actif{% endif %}
                </p>
            </div>

            <div class="flex items-center gap-2 flex-shrink-0">
                {# Sync button — keeps custom SVG for spin animation via Stimulus target #}
                <button type="button"
                        class="inline-flex items-center gap-2 h-10 px-4 text-sm font-secondary font-semibold rounded-lg bg-cohorts/10 text-cohorts hover:bg-cohorts/20 transition-all duration-base cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
                        data-action="click->sam--sync#sync"
                        data-sam--sync-target="button">
                    <svg data-sam--sync-target="icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M23 4v6h-6M1 20v-6h6"/>
                        <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
                    </svg>
                    <span data-sam--sync-target="label">Synchroniser</span>
                </button>

                {% if hasMoodiaAccess %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Créer une formation',
                        variant: 'cohorts',
                        size: 'md',
                        icon: 'plus',
                        href: path('app_moodia_new'),
                        radius: 'lg'
                    } only %}
                {% endif %}
            </div>
        </div>

        {# ══════════════════════════════════════════════════════════════
           FILTERS BAR
           ══════════════════════════════════════════════════════════════ #}
        <div class="flex flex-wrap items-center gap-3 mb-6"
             data-controller="sam--course-filters sam--search-bounce">

            {# ── Search input ── #}
            <div class="relative flex items-center h-10 flex-1 min-w-[220px] bg-white border border-gray-200 rounded-lg shadow-sm focus-within:border-cohorts focus-within:ring-2 focus-within:ring-cohorts/20 transition-all" data-sam--search-bounce-target="container">
                <div class="absolute left-3 inset-y-0 flex items-center pointer-events-none text-gray-400">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'md', color: 'muted' } only %}
                </div>
                <form method="GET" action="{{ path('app_sam_courses') }}" style="display: contents;"
                      data-action="submit->sam--search-bounce#submit">
                    <input type="text"
                           name="search"
                           value="{{ search }}"
                           class="flex-1 h-full pl-10 pr-4 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder-gray-400"
                           placeholder="Rechercher une formation par nom ou identifiant..."
                           data-sam--search-bounce-target="input"
                           data-action="input->sam--course-filters#instantSearch">
                    {% if cohortFilter %}
                        <input type="hidden" name="cohort" value="{{ cohortFilter }}">
                    {% endif %}
                    {% if statusFilter %}
                        <input type="hidden" name="status" value="{{ statusFilter }}">
                    {% endif %}
                </form>
                {% if search and courses|length > 0 %}
                    <a href="{{ path('app_sam_courses', {cohort: cohortFilter}) }}"
                       class="absolute right-2 inset-y-0 flex items-center px-1 text-gray-400 hover:text-gray-600 transition-colors"
                       data-tooltip="Effacer">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'x', size: 'sm' } only %}
                    </a>
                {% endif %}
            </div>

            {# ── Cohort dropdown ── #}
            {% if allCohorts|length > 0 %}
                <div class="relative">
                    <button type="button"
                            class="flex items-center gap-2 h-10 px-3 bg-white border rounded-lg shadow-sm text-sm hover:border-gray-300 transition-all cursor-pointer {{ cohortFilter ? 'border-cohorts text-cohorts bg-cohorts/5' : 'border-gray-200 text-gray-600' }}"
                            data-action="click->sam--course-filters#toggle"
                            data-panel="cohorts"
                            data-sam--course-filters-target="dropdownBtn">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'users-group', size: 'sm', color: cohortFilter ? 'cohorts' : 'muted' } only %}
                        <span>
                            {% if cohortFilter %}
                                {% for cohort in allCohorts %}
                                    {% if cohort.id == cohortFilter %}{{ cohort.name }}{% endif %}
                                {% endfor %}
                            {% else %}
                                Toutes les cohortes
                            {% endif %}
                        </span>
                        {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-down', size: 'xs', color: cohortFilter ? 'cohorts' : 'muted' } only %}
                    </button>

                    <div class="absolute top-full left-0 mt-1.5 w-72 bg-white border border-gray-200 rounded-2xl shadow-xl z-30"
                         style="display:none"
                         data-sam--course-filters-target="dropdownPanel"
                         data-panel="cohorts">

                        {# Search inside dropdown #}
                        <div class="p-2 border-b border-gray-100">
                            <div class="relative flex items-center">
                                <div class="absolute left-2.5 inset-y-0 flex items-center pointer-events-none text-gray-400">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'xs', color: 'muted' } only %}
                                </div>
                                <input type="text"
                                       class="w-full h-8 pl-8 pr-3 text-sm bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-cohorts placeholder-gray-400"
                                       placeholder="Rechercher..."
                                       data-action="input->sam--course-filters#filterItems">
                            </div>
                        </div>

                        {# Cohort list #}
                        <div class="max-h-64 overflow-y-auto py-1">
                            {# "Toutes les cohortes" option #}
                            <a href="{{ path('app_sam_courses', {search: search, hideHidden: hideHidden ? 1 : null}) }}"
                               class="flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 transition-colors border-b border-gray-100">
                                <div class="w-4 h-4 rounded-full border-2 {{ not cohortFilter ? 'border-cohorts bg-cohorts' : 'border-gray-300' }} flex items-center justify-center shrink-0">
                                    {% if not cohortFilter %}
                                        <div class="w-1.5 h-1.5 rounded-full bg-white"></div>
                                    {% endif %}
                                </div>
                                <span class="text-sm {{ not cohortFilter ? 'font-semibold text-cohorts' : 'text-gray-500' }}">Toutes les cohortes</span>
                            </a>

                            {# Individual cohorts #}
                            {% for cohort in allCohorts %}
                                <a href="{{ path('app_sam_courses', {cohort: cohort.id, search: search, hideHidden: hideHidden ? 1 : null}) }}"
                                   class="flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 transition-colors"
                                   data-item-label="{{ cohort.name|lower }}">
                                    <div class="w-4 h-4 rounded-full border-2 {{ cohortFilter == cohort.id ? 'border-cohorts bg-cohorts' : 'border-gray-300' }} flex items-center justify-center shrink-0">
                                        {% if cohortFilter == cohort.id %}
                                            <div class="w-1.5 h-1.5 rounded-full bg-white"></div>
                                        {% endif %}
                                    </div>
                                    <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>
                                    <span class="text-sm text-gray-700 truncate flex-1 {{ cohortFilter == cohort.id ? 'font-semibold text-cohorts' : '' }}">{{ cohort.name }}</span>
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}

            {# ── Masques toggle ── #}
            <label class="inline-flex items-center gap-2 h-10 shrink-0 px-3 bg-white border rounded-lg shadow-sm cursor-pointer hover:border-gray-300 transition-colors select-none {{ hideHidden ? 'border-cohorts bg-cohorts/5' : 'border-gray-200' }}" style="display: inline-flex; margin-bottom: 0;">
                <div class="relative flex-shrink-0">
                    <input type="checkbox"
                           class="sr-only peer"
                           {% if hideHidden %}checked{% endif %}
                           onchange="window.location.href='{{ path('app_sam_courses', {search: search, cohort: cohortFilter}) }}' + (this.checked ? '{{ (search or cohortFilter) ? '&' : '?' }}hideHidden=1' : '')">
                    <div class="w-8 h-4 bg-gray-200 rounded-full peer-checked:bg-cohorts transition-colors"></div>
                    <div class="absolute top-0.5 left-0.5 w-3 h-3 bg-white rounded-full shadow-sm transition-transform peer-checked:translate-x-4"></div>
                </div>
                <span class="text-sm text-gray-600 whitespace-nowrap">Masqués</span>
            </label>

            {# ── Reset filters ── #}
            {% if search or cohortFilter or hideHidden %}
                <a href="{{ path('app_sam_courses') }}"
                   class="inline-flex items-center gap-1.5 h-10 px-3 text-sm text-gray-500 hover:text-gray-700 transition-colors">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'x', size: 'sm' } only %}
                    Réinitialiser
                </a>
            {% endif %}
        </div>

        {# ══════════════════════════════════════════════════════════════
           CONTENT — DATA TABLE
           ══════════════════════════════════════════════════════════════ #}
        {% if courses|length == 0 %}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
                {% if search %}
                    {% include '_molecules/empty-state/empty-state.html.twig' with {
                        title: 'Aucune formation trouvée pour "' ~ search ~ '"',
                        description: 'Essayez avec d\'autres termes de recherche.',
                        icon: 'search',
                        variant: 'minimal',
                        size: 'sm'
                    } %}
                {% else %}
                    {% include '_molecules/empty-state/empty-state.html.twig' with {
                        title: 'Aucune formation disponible',
                        description: 'Cliquez sur "Synchroniser" pour récupérer les formations depuis Moodle.',
                        icon: 'book'
                    } %}
                {% endif %}
            </div>
        {% else %}
            <div data-controller="sam--course-list" data-sam--course-list-total-value="{{ courses|length }}">

                {# ── Status filter tabs ── #}
                {% set excellentCnt  = statusCounts.excellent %}
                {% set inProgressCnt = statusCounts.inProgress %}
                {% set atRiskCnt     = statusCounts.atRisk %}
                {% set noCohortCnt   = courses|filter(c => (courseCohorts[c.id] ?? [])|length == 0)|length %}

                {% set tabBase = {cohort: cohortFilter, search: search, hideHidden: hideHidden ? 1 : null} %}
                <div class="flex items-center gap-0 mb-4 border-b border-gray-200">
                    <a href="{{ path('app_sam_courses', tabBase) }}"
                       class="px-4 py-2.5 text-sm border-b-2 transition-all {{ not statusFilter ? 'font-semibold border-cohorts text-cohorts' : 'font-medium border-transparent text-gray-500 hover:text-gray-700' }}">
                        Tous <span class="ml-1 text-xs {{ not statusFilter ? 'bg-cohorts/10 text-cohorts' : 'bg-gray-100 text-gray-500' }} rounded-full px-1.5 py-0.5">{{ statusCounts.excellent + statusCounts.inProgress + statusCounts.atRisk }}</span>
                    </a>
                    <a href="{{ path('app_sam_courses', tabBase|merge({status: 'excellent'})) }}"
                       class="px-4 py-2.5 text-sm border-b-2 transition-all {{ statusFilter == 'excellent' ? 'font-semibold border-cohorts text-cohorts' : 'font-medium border-transparent text-gray-500 hover:text-gray-700' }}">
                        <span class="inline-block w-2 h-2 rounded-full bg-success mr-1"></span>
                        Terminé <span class="ml-1 text-xs {{ statusFilter == 'excellent' ? 'bg-cohorts/10 text-cohorts' : 'bg-gray-100 text-gray-500' }} rounded-full px-1.5 py-0.5">{{ excellentCnt }}</span>
                    </a>
                    <a href="{{ path('app_sam_courses', tabBase|merge({status: 'in-progress'})) }}"
                       class="px-4 py-2.5 text-sm border-b-2 transition-all {{ statusFilter == 'in-progress' ? 'font-semibold border-cohorts text-cohorts' : 'font-medium border-transparent text-gray-500 hover:text-gray-700' }}">
                        <span class="inline-block w-2 h-2 rounded-full bg-warning mr-1"></span>
                        En cours <span class="ml-1 text-xs {{ statusFilter == 'in-progress' ? 'bg-cohorts/10 text-cohorts' : 'bg-gray-100 text-gray-500' }} rounded-full px-1.5 py-0.5">{{ inProgressCnt }}</span>
                    </a>
                    <a href="{{ path('app_sam_courses', tabBase|merge({status: 'at-risk'})) }}"
                       class="px-4 py-2.5 text-sm border-b-2 transition-all {{ statusFilter == 'at-risk' ? 'font-semibold border-cohorts text-cohorts' : 'font-medium border-transparent text-gray-500 hover:text-gray-700' }}">
                        <span class="inline-block w-2 h-2 rounded-full bg-error mr-1"></span>
                        Pas commencé <span class="ml-1 text-xs {{ statusFilter == 'at-risk' ? 'bg-cohorts/10 text-cohorts' : 'bg-gray-100 text-gray-500' }} rounded-full px-1.5 py-0.5">{{ atRiskCnt }}</span>
                    </a>
                </div>

                {# ── No results (hidden by default, shown by JS filter) ── #}
                <div class="hidden justify-center bg-white rounded-xl border border-gray-200 shadow-sm" data-sam--course-list-target="empty">
                    {% include '_molecules/empty-state/empty-state.html.twig' with {
                        title: 'Aucune formation dans cette catégorie',
                        description: 'Aucun cours ne correspond à ce filtre pour le moment.',
                        icon: 'search',
                        variant: 'minimal',
                        size: 'sm'
                    } %}
                </div>

                {# ── Data table ── #}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">

                    {# Table header #}
                    <div class="grid grid-cols-[2fr_1.5fr_0.6fr_1fr_auto] gap-4 px-5 py-3 bg-gray-50 border-b border-gray-200 text-xs font-semibold text-gray-500 uppercase tracking-wide">
                        <span>Formation</span>
                        <span>Cohortes</span>
                        <span class="text-center">Stagiaires</span>
                        <span class="text-center">Progression</span>
                        <span></span>
                    </div>

                    {# Table body #}
                    {% for course in courses %}
                        {% set stats = courseStats[course.id] ?? {enrolled: 0, completed: 0, inProgress: 0, atRisk: 0, percentage: 0} %}
                        {% set pct = stats.percentage|default(0)|round %}
                        {% set cohorts = courseCohorts[course.id] ?? [] %}
                        {% set courseStatus = pct >= 75 ? 'excellent' : (pct > 0 ? 'in-progress' : 'at-risk') %}

                        <a href="{{ path('app_sam_courses_detail', {id: course.id}) }}"
                           class="grid grid-cols-[2fr_1.5fr_0.6fr_1fr_auto] gap-4 items-center px-5 py-3.5 border-b border-gray-100 last:border-b-0 {{ loop.index is odd ? 'bg-white' : 'bg-cohorts/3' }} hover:bg-cohorts/[0.07] transition-colors cursor-pointer group"
                           data-sam--course-list-target="courseRow"
                           data-status="{{ courseStatus }}"
                           data-cohort-count="{{ cohorts|length }}">

                            {# Course column: avatar + name + hidden badge #}
                            <div class="flex items-center gap-3 min-w-0">
                                {% include '_atoms/avatar/avatar.html.twig' with {
                                    initials: course.fullname|slice(0, 2)|upper,
                                    size: 'sm',
                                    rounded: 'lg',
                                    variant: 'cohorts'
                                } only %}
                                <div class="min-w-0">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-semibold text-gray-900 truncate group-hover:text-cohorts transition-colors">{{ course.fullname }}</span>
                                        {% if not course.visible %}
                                            {% include '_atoms/badge/badge.html.twig' with {
                                                label: 'Masqué',
                                                variant: 'warning',
                                                size: 'xs'
                                            } %}
                                        {% endif %}
                                    </div>
                                    {% if course.shortname is defined and course.shortname %}
                                        <code class="text-xs text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded font-mono">{{ course.shortname }}</code>
                                    {% endif %}
                                </div>
                            </div>

                            {# Cohorts column: badge atoms #}
                            <div class="flex flex-wrap gap-1 items-center">
                                {% if cohorts|length > 0 %}
                                    {% for cohort in cohorts|slice(0, 2) %}
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: cohort.name|slice(0, 18) ~ (cohort.name|length > 18 ? '…' : ''),
                                            variant: 'cohorts',
                                            size: 'xs'
                                        } %}
                                    {% endfor %}
                                    {% if cohorts|length > 2 %}
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: '+' ~ (cohorts|length - 2),
                                            variant: 'neutral',
                                            size: 'xs'
                                        } %}
                                    {% endif %}
                                {% else %}
                                    <span class="text-xs text-gray-300 italic">Aucune</span>
                                {% endif %}
                            </div>

                            {# Enrolled column #}
                            <div class="flex items-center justify-center">
                                {% include '_atoms/badge/badge.html.twig' with {
                                    label: stats.enrolled|default(0),
                                    icon: 'users',
                                    variant: stats.enrolled|default(0) > 0 ? 'cohorts' : 'neutral',
                                    size: 'sm'
                                } %}
                            </div>

                            {# Progress column: progress ring #}
                            {% set progressVariant = stats.enrolled == 0 ? 'muted' : (pct >= 75 ? 'success' : (pct > 0 ? 'warning' : 'error')) %}
                            <div class="flex items-center justify-center">
                                {% include '_molecules/progress-ring/progress-ring.html.twig' with {
                                    value: pct,
                                    size: 'sm',
                                    variant: progressVariant,
                                    thickness: 'normal'
                                } %}
                            </div>

                            {# Arrow column #}
                            <div class="flex items-center">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-right', size: 'sm', color: 'muted' } only %}
                            </div>

                        </a>
                    {% endfor %}

                    {# Table footer #}
                    <div class="flex items-center justify-between px-5 py-3 border-t border-gray-100 bg-gray-50/50">
                        <span class="text-sm text-gray-500">
                            <strong class="text-gray-700">{{ total }}</strong> formations
                        </span>

                        {% if totalPages > 1 %}
                            {% include '_molecules/pagination/pagination.html.twig' with {
                                currentPage: page,
                                totalPages: totalPages,
                                baseUrl: path('app_sam_courses', {search: search, cohort: cohortFilter, hideHidden: hideHidden ? 1 : null, status: statusFilter}),
                                size: 'sm',
                                showFirstLast: false
                            } %}
                        {% endif %}
                    </div>

                </div>

            </div>
        {% endif %}

        {# Footer #}
        <p class="text-xs text-center text-gray-400 mt-8">
            &copy; Bubul {{ "now"|date("Y") }}
            {% if lastSyncedAt is defined and lastSyncedAt %}
                · Synchronisé le {{ lastSyncedAt|date('d/m/Y à H:i') }}
            {% else %}
                · Non synchronisé
            {% endif %}
        </p>

    </main>
</div>
{% endblock %}