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

{% block title %}{{ cohort.name }} - Cohorte - SAM{% endblock %}

{% block sam_body %}
<div data-controller="sam--cohort-detail"
     data-sam--cohort-detail-api-url-value="{{ path('api_moodlev5_moodle_cohorts_list') }}"
     data-sam--cohort-detail-users-api-url-value="{{ path('api_moodlev5_moodle_users_list') }}"
     data-sam--cohort-detail-cohort-id-value="{{ cohort.moodleId }}"
     data-sam--cohort-detail-initial-members-value="{{ members|json_encode }}">

    <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: 'Cohortes', href: path('app_sam_cohorts') },
                { label: cohort.name }
            ],
            class: 'mb-6'
        } %}

        {# ══════════════════════════════════════════════════════════════
           PAGE HEADER
           ══════════════════════════════════════════════════════════════ #}
        {# ── HEADER CARD ── #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6 mb-8">
            <div class="flex items-start justify-between gap-6">

                <div class="flex items-start gap-5">
                    {# Avatar cohort #}
                    {% include '_atoms/avatar/avatar.html.twig' with {
                        initials: cohort.name|slice(0, 2)|upper,
                        size: 'xl',
                        rounded: 'xl',
                        variant: 'cohorts'
                    } only %}

                    <div>
                        <div class="flex items-center gap-2 flex-wrap">
                            <h1 class="text-xl font-bold font-secondary text-gray-900">{{ cohort.name }}</h1>
                            {% if cohort.idnumber %}
                                <code class="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded font-mono">{{ cohort.idnumber }}</code>
                            {% endif %}
                        </div>

                        {% if cohort.description %}
                            <p class="text-sm text-gray-500 mt-1 max-w-lg">{{ cohort.description }}</p>
                        {% endif %}

                        {# Cibles Stimulus pour mise à jour du compteur membres #}
                        <span class="hidden" data-sam--cohort-detail-target="membersCount membersCountStat">{{ cohort.membersCount }}</span>
                    </div>
                </div>

                <div class="flex items-center gap-2 shrink-0">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Modifier',
                        variant: 'soft-cohorts',
                        size: 'md',
                        icon: 'edit',
                        attr: {'data-action': 'click->sam--cohort-detail#openEditModal'}
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        variant: 'soft-error',
                        size: 'md',
                        icon: 'trash',
                        iconOnly: true,
                        attr: {'data-action': 'click->sam--cohort-detail#openDeleteModal'}
                    } %}
                </div>
            </div>
        </div>

        {# ══════════════════════════════════════════════════════════════
           SECTION: COURS ASSOCIES
           ══════════════════════════════════════════════════════════════ #}
        {% embed '_molecules/section-divider/section-divider.html.twig' with {
            title: 'Cours associés',
            subtitle: coursesData|length == 0 ? 'Aucun cours associé à cette cohorte' : (coursesData|length == 1 ? '1 cours accessible via cette cohorte' : coursesData|length ~ ' cours accessibles via cette cohorte'),
            icon: 'book',
            iconColor: 'primary'
        } %}
            {% block right %}{% endblock %}
        {% endembed %}

        {% if coursesData|length == 0 %}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
                {% include '_molecules/empty-state/empty-state.html.twig' with {
                    title: 'Aucun cours associé',
                    description: 'Cette cohorte n\'est inscrite à aucun cours',
                    icon: 'book'
                } %}
            </div>
        {% else %}
            <div class="flex gap-3 overflow-x-auto pt-1 pb-2 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
                {% for data in coursesData %}
                    {% set course          = data.course %}
                    {% set enrolledTotal   = data.enrolledTotal %}
                    {% set viaCohort       = data.enrolledViaCohort %}
                    {% set viaManual       = data.enrolledManual %}

                    <a href="{{ path('app_sam_courses_detail', {id: course.id}) }}"
                       class="group flex-none w-52 bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md hover:border-cohorts/40 hover:-translate-y-0.5 transition-all duration-200 flex flex-col gap-3">

                        {# Icon + badge masqué #}
                        <div class="flex items-start justify-between">
                            <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'book', size: 'md', color: 'primary' } only %}
                            </div>
                            {% if not course.visible %}
                                {% include '_atoms/badge/badge.html.twig' with { label: 'Masqué', variant: 'warning', size: 'xs' } %}
                            {% endif %}
                        </div>

                        {# Nom + code #}
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-gray-900 leading-snug line-clamp-2 group-hover:text-cohorts transition-colors">{{ course.fullname }}</p>
                            <code class="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded font-mono mt-1 inline-block">{{ course.shortname }}</code>
                        </div>

                        {# Inscrits — total + breakdown cohorte / manuel #}
                        <div class="pt-2 border-t border-gray-100 space-y-1.5">
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-400 font-medium">Total</span>
                                <span class="text-sm font-bold text-gray-900">{{ enrolledTotal }}</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-1 text-xs text-cohorts">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'users-group', size: 'xs', color: 'cohorts' } only %}
                                    <span>Cohorte</span>
                                </div>
                                <span class="text-xs font-semibold text-cohorts">{{ viaCohort }}</span>
                            </div>
                            {% if viaManual > 0 %}
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-1 text-xs text-gray-400">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'user', size: 'xs', color: 'muted' } only %}
                                    <span>Manuel</span>
                                </div>
                                <span class="text-xs font-semibold text-gray-500">{{ viaManual }}</span>
                            </div>
                            {% endif %}
                        </div>

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

        {# ══════════════════════════════════════════════════════════════
           SECTION: MEMBRES DE LA COHORTE
           ══════════════════════════════════════════════════════════════ #}
        <div data-sam--cohort-detail-target="membersSection">
        {% embed '_molecules/section-divider/section-divider.html.twig' with {
            title: 'Membres de la cohorte',
            subtitle: cohort.membersCount ~ ' membre' ~ (cohort.membersCount > 1 ? 's' : '') ~ ' inscrit' ~ (cohort.membersCount > 1 ? 's' : ''),
            icon: 'users',
            iconColor: 'cohorts'
        } %}
            {% block right %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Gérer',
                    variant: 'cohorts',
                    size: 'md',
                    icon: 'settings',
                    attr: {'data-action': 'click->sam--cohort-detail#openAddMembersModal'}
                } %}
            {% endblock %}
        {% endembed %}
        </div>

        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            <div data-sam--cohort-detail-target="membersList">
                {% if members|length == 0 %}
                    <div data-members-empty>
                        {% include '_molecules/empty-state/empty-state.html.twig' with {
                            title: 'Aucun membre',
                            description: 'Ajoutez des utilisateurs a cette cohorte',
                            icon: 'users'
                        } %}
                    </div>
                {% else %}
                    {# Table header #}
                    <div class="grid grid-cols-[2fr_2fr_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>Membre</span>
                        <span>Email</span>
                        <span>Dernière connexion</span>
                        <span class="w-10 text-right">Actions</span>
                    </div>

                    {% for member in members %}
                        {% set initials = (member.firstname|default('?')|first ~ member.lastname|default('?')|first)|upper %}
                        {% set isSuspended = member.suspended is defined and member.suspended %}

                        <div class="grid grid-cols-[2fr_2fr_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 group/row {{ isSuspended ? 'opacity-60' : '' }}"
                             data-user-id="{{ member.moodle_id }}"
                             data-member-row>

                            {# Avatar + Name #}
                            <a href="{{ path('app_sam_users_detail', {id: member.moodle_id}) }}" class="flex items-center gap-3 min-w-0 group">
                                {% include '_atoms/avatar/avatar.html.twig' with {
                                    initials: initials,
                                    size: 'sm',
                                    variant: isSuspended ? 'gray' : 'cohorts'
                                } %}
                                <div class="min-w-0">
                                    <div class="text-sm font-semibold text-gray-900 truncate group-hover:text-cohorts transition-colors">{{ member.firstname }} {{ member.lastname }}</div>
                                    {% if isSuspended %}
                                        {% include '_atoms/badge/badge.html.twig' with { label: 'Inactif', variant: 'error', dot: true, size: 'xs' } %}
                                    {% endif %}
                                </div>
                            </a>

                            {# Email #}
                            <div class="text-sm text-gray-600 truncate">{{ member.email }}</div>

                            {# Last access #}
                            <div class="text-sm">
                                {% if member.last_access_at is null %}
                                    <span class="text-gray-300 text-xs">Jamais connecté</span>
                                {% else %}
                                    {% set daysAgo = date().diff(member.last_access_at).days %}
                                    <span class="text-gray-600 text-xs" data-tooltip="{{ member.last_access_at|date('d/m/Y à H:i') }}">
                                        {% if daysAgo == 0 %}
                                            Aujourd'hui
                                        {% elseif daysAgo == 1 %}
                                            Hier
                                        {% elseif daysAgo < 30 %}
                                            Il y a {{ daysAgo }}j
                                        {% else %}
                                            {{ member.last_access_at|date('d/m/Y') }}
                                        {% endif %}
                                    </span>
                                {% endif %}
                            </div>

                            {# Remove button #}
                            <div class="flex items-center justify-end w-10">
                                {% include '_atoms/button/button.html.twig' with {
                                    variant: 'ghost',
                                    size: 'sm',
                                    icon: 'x',
                                    iconOnly: true,
                                    class: 'text-gray-300 hover:text-error hover:bg-error/10 shrink-0',
                                    attr: {
                                        'data-action': 'click->sam--cohort-detail#removeMember',
                                        'data-user-id': member.moodle_id
                                    }
                                } %}
                            </div>
                        </div>
                    {% endfor %}

                    {# Footer #}
                    <div class="px-5 py-3 border-t border-gray-100 bg-gray-50/50" data-members-footer>
                        <span class="text-sm text-gray-500"><strong class="text-gray-700">{{ cohort.membersCount }}</strong> membre{{ cohort.membersCount > 1 ? 's' : '' }}</span>
                    </div>
                {% endif %}
            </div>
        </div>

    </main>

    {# ══════════════════════════════════════════════════════════════
       MODAL EDITION
       ══════════════════════════════════════════════════════════════ #}
    <div class="fixed inset-0 z-50 items-center justify-center p-4"
         style="display:none"
         data-sam--cohort-detail-target="editModal">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" data-action="click->sam--cohort-detail#closeEditModal"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-lg z-10">
            <div class="px-6 pt-5 pb-4 border-b border-gray-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-cohorts/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'users-group', size: 'sm', color: 'cohorts' } only %}
                    </div>
                    <h2 class="text-base font-semibold text-gray-900">Modifier la cohorte</h2>
                </div>
                {% include '_atoms/close-button/close-button.html.twig' with {
                    attr: { 'data-action': 'click->sam--cohort-detail#closeEditModal' }
                } only %}
            </div>
            <form data-sam--cohort-detail-target="editForm" data-action="submit->sam--cohort-detail#submitEdit">
                <div class="px-6 py-5 space-y-4">
                    <div>
                        <label for="edit-cohort-name" class="block text-sm font-medium text-gray-700 mb-1">Nom de la cohorte *</label>
                        <input type="text" id="edit-cohort-name" name="name"
                               class="w-full px-3 py-2 text-sm border-2 border-gray-300 rounded-lg focus:outline-none focus:border-cohorts focus:ring-2 focus:ring-cohorts/20 transition-all"
                               value="{{ cohort.name }}" required>
                    </div>
                    <div>
                        <label for="edit-cohort-idnumber" class="block text-sm font-medium text-gray-700 mb-1">Identifiant</label>
                        <input type="text" id="edit-cohort-idnumber" name="idNumber"
                               class="w-full px-3 py-2 text-sm border-2 border-gray-300 rounded-lg focus:outline-none focus:border-cohorts focus:ring-2 focus:ring-cohorts/20 transition-all"
                               value="{{ cohort.idnumber }}">
                    </div>
                    <div>
                        <label for="edit-cohort-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea id="edit-cohort-description" name="description" rows="3"
                                  class="w-full px-3 py-2 text-sm border-2 border-gray-300 rounded-lg focus:outline-none focus:border-cohorts focus:ring-2 focus:ring-cohorts/20 transition-all">{{ cohort.description }}</textarea>
                    </div>
                </div>
                <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Annuler',
                        variant: 'ghost',
                        size: 'md',
                        attr: {'data-action': 'click->sam--cohort-detail#closeEditModal'}
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Enregistrer',
                        variant: 'cohorts',
                        size: 'sm',
                        icon: 'check',
                        type: 'submit',
                        attr: {'data-sam--cohort-detail-target': 'editBtn'}
                    } %}
                </div>
            </form>
        </div>
    </div>

    {# ══════════════════════════════════════════════════════════════
       MODAL AJOUT MEMBRES
       ══════════════════════════════════════════════════════════════ #}
    <div class="fixed inset-0 z-50 items-center justify-center p-4"
         style="display:none"
         data-sam--cohort-detail-target="addMembersModal">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" data-action="click->sam--cohort-detail#closeAddMembersModal"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-2xl z-10">
            {# Header #}
            <div class="px-6 pt-5 pb-4 border-b border-gray-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-cohorts/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'users-group', size: 'sm', color: 'cohorts' } only %}
                    </div>
                    <h2 class="text-base font-semibold text-gray-900">Ajouter des membres à la cohorte</h2>
                </div>
                {% include '_atoms/close-button/close-button.html.twig' with {
                    attr: { 'data-action': 'click->sam--cohort-detail#closeAddMembersModal' }
                } only %}
            </div>

            {# Body #}
            <div class="px-6 py-5 space-y-4">

                {# Search input #}
                <div class="relative">
                    <span class="absolute inset-y-0 left-3 flex items-center pointer-events-none text-gray-400">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                    </span>
                    <input type="text"
                           autocomplete="off"
                           placeholder="Filtrer par nom ou email..."
                           class="w-full pl-9 pr-4 py-2.5 text-sm border-2 border-gray-200 rounded-xl focus:outline-none focus:border-cohorts focus:ring-2 focus:ring-cohorts/20 transition-all"
                           data-sam--cohort-detail-target="searchInput"
                           data-action="input->sam--cohort-detail#onSearchInput">
                </div>

                {# Counts header #}
                <div class="flex items-center justify-between">
                    <span class="text-xs font-medium text-gray-500" data-sam--cohort-detail-target="availableCount">0 utilisateur(s) disponible(s)</span>
                    <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-cohorts" data-sam--cohort-detail-target="selectedCount">
                        0 selectionne(s)
                    </span>
                </div>

                {# Scrollable users list #}
                <div class="max-h-72 overflow-y-auto rounded-xl border border-gray-200 divide-y divide-gray-100"
                     data-sam--cohort-detail-target="usersList">
                    {# Rendered by JS #}
                </div>

            </div>

            {# Footer #}
            <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Annuler',
                    variant: 'ghost',
                    size: 'md',
                    attr: {'data-action': 'click->sam--cohort-detail#closeAddMembersModal'}
                } %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Modifier',
                    variant: 'cohorts',
                    size: 'md',
                    icon: 'plus',
                    disabled: true,
                    attr: {
                        'data-action': 'click->sam--cohort-detail#addSelectedMembers',
                        'data-sam--cohort-detail-target': 'addMembersBtn'
                    }
                } %}
            </div>
        </div>
    </div>

    {# ══════════════════════════════════════════════════════════════
       MODAL SUPPRESSION
       ══════════════════════════════════════════════════════════════ #}
    <div class="fixed inset-0 z-50 items-center justify-center p-4"
         style="display:none"
         data-sam--cohort-detail-target="deleteModal">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" data-action="click->sam--cohort-detail#closeDeleteModal"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-sm z-10">
            <div class="px-6 pt-5 pb-4 border-b border-gray-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-error/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with {name: 'warning', size: 'sm', color: 'error'} only %}
                    </div>
                    <h2 class="text-base font-semibold text-gray-900">Confirmer la suppression</h2>
                </div>
                {% include '_atoms/close-button/close-button.html.twig' with {
                    attr: { 'data-action': 'click->sam--cohort-detail#closeDeleteModal' }
                } only %}
            </div>
            <div class="px-6 py-5 space-y-3">
                <p class="text-sm text-gray-600">Êtes-vous sûr de vouloir supprimer la cohorte <strong class="text-gray-900">{{ cohort.name }}</strong> ?</p>
                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Action irréversible',
                    message: 'Tous les membres seront retirés de la cohorte.',
                    variant: 'error',
                    size: 'sm'
                } %}
            </div>
            <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Annuler',
                    variant: 'ghost',
                    size: 'md',
                    attr: {'data-action': 'click->sam--cohort-detail#closeDeleteModal'}
                } %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Supprimer',
                    variant: 'error',
                    size: 'sm',
                    icon: 'trash',
                    attr: {
                        'data-action': 'click->sam--cohort-detail#executeDelete',
                        'data-sam--cohort-detail-target': 'deleteBtn'
                    }
                } %}
            </div>
        </div>
    </div>

</div>
{% endblock %}