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

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

{% block sam_body %}
<div data-controller="sam--user-crud"
     data-sam--user-crud-api-url-value="{{ path('api_moodlev5_moodle_users_list') }}"
     data-sam--user-crud-company-value="{{ company.uuid ?? '' }}">

    <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: 'Stagiaires' }
            ],
            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_users_sync') }}"
             data-sam--sync-label-value="stagiaires">

            <div>
                <div class="flex items-center gap-3 mb-1">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'xl', color: 'cohorts' } only %}
                    <h1 class="text-2xl font-bold font-secondary text-gray-900">Gestion des stagiaires</h1>
                </div>
                <p class="text-base text-gray-500 mt-1">
                    Consultez, modifiez et gérez les accès de vos <strong class="text-gray-700">{{ total }}</strong> stagiaire{{ total > 1 ? 's' : '' }} Moodle
                </p>
            </div>

            <div class="flex items-center gap-2 flex-shrink-0">
                {# Sync button — conserve les targets Stimulus sur l'icône SVG et le label #}
                <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>

                {# Add user button — gradient cohorts #}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Ajouter',
                    variant: 'cohorts',
                    size: 'md',
                    icon: 'plus',
                    attr: {'data-action': 'click->sam--user-crud#openAddModal'}
                } %}
            </div>
        </div>

        {# ══════════════════════════════════════════════════════════════
           SEARCH BAR — formulaire GET simple (rechargement page)
           ══════════════════════════════════════════════════════════════ #}
        <form action="{{ path('app_sam_users') }}" method="GET" class="mb-4" data-turbo="false">
            <div class="relative flex items-center h-10 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">
                <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>
                <input type="text"
                       name="search"
                       value="{{ search ?? '' }}"
                       placeholder="Rechercher par nom, email..."
                       autocomplete="off"
                       id="users-search-input"
                       class="flex-1 h-full pl-10 pr-4 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder-gray-400">
            </div>
        </form>
        <script>
        (function() {
            var input = document.getElementById('users-search-input');
            if (!input) return;
            var timer;
            input.addEventListener('input', function() {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    input.closest('form').submit();
                }, 500);
            });
        })();
        </script>

        {# ══════════════════════════════════════════════════════════════
           DATA TABLE
           ══════════════════════════════════════════════════════════════ #}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">

            {# Table header #}
            <div class="grid grid-cols-[2fr_2fr_1.5fr_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>Stagiaire</span>
                <span>Email</span>
                <span>Dernière connexion</span>
                <span>Statut</span>
                <span class="w-24 text-right">Actions</span>
            </div>

            {# Table body #}
            <div data-sam--user-crud-target="usersList">

                {% if users|length > 0 %}
                    {% for user in users %}
                        <a href="{{ path('app_sam_users_detail', {id: user.moodleId}) }}"
                           class="grid grid-cols-[2fr_2fr_1.5fr_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 {{ user.suspended ? 'opacity-60' : '' }}"
                           data-user-id="{{ user.moodleId }}">

                            {# Avatar + Name #}
                            <div class="flex items-center gap-3 min-w-0">
                                {% include '_atoms/avatar/avatar.html.twig' with {
                                    initials: user.firstname|slice(0, 1) ~ user.lastname|slice(0, 1),
                                    size: 'sm',
                                    variant: user.suspended ? 'gray' : 'cohorts'
                                } %}
                                <div class="min-w-0">
                                    <div class="text-sm font-semibold text-gray-900 truncate">{{ user.fullname }}</div>
                                    <div class="text-xs text-gray-400">@{{ user.username }}</div>
                                </div>
                            </div>

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

                            {# Last access #}
                            <div class="text-sm text-gray-500">
                                {% if user.lastAccessAt %}
                                    {{ user.lastAccessAt|date('d/m/Y H:i') }}
                                {% else %}
                                    <span class="text-gray-300">—</span>
                                {% endif %}
                            </div>

                            {# Status badge — presets atomiques #}
                            <div>
                                {% if user.suspended %}
                                    {% include '_atoms/badge/badge.html.twig' with { preset: 'user-inactive', size: 'sm' } %}
                                {% else %}
                                    {% include '_atoms/badge/badge.html.twig' with { preset: 'user-active', size: 'sm' } %}
                                {% endif %}
                            </div>

                            {# Row actions — stopPropagation pour éviter la navigation #}
                            <div class="flex items-center justify-end gap-1 w-24 self-center" onclick="event.preventDefault(); event.stopPropagation();">

                                {# Toggle activate/suspend #}
                                <button type="button"
                                        class="inline-flex items-center justify-center w-9 h-9 rounded-lg transition-colors cursor-pointer shrink-0 {{ user.suspended ? 'bg-success/10 text-success hover:bg-success/20' : 'bg-error/10 text-error hover:bg-error/20' }}"
                                        data-action="click->sam--user-crud#toggleUser"
                                        data-user-id="{{ user.moodleId }}"
                                        data-fullname="{{ user.fullname }}"
                                        data-suspended="{{ user.suspended ? '1' : '0' }}"
                                        data-tooltip="{{ user.suspended ? 'Activer — l\'apprenant retrouvera accès à Moodle' : 'Désactiver — l\'apprenant n\'aura plus accès à Moodle' }}"
                                        data-tooltip-position="left">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'power', size: 'sm' } only %}
                                </button>

                                {# Edit #}
                                {% include '_atoms/button/button.html.twig' with {
                                    variant: 'ghost',
                                    size: 'sm',
                                    icon: 'edit',
                                    iconOnly: true,
                                    class: 'text-gray-400 hover:text-primary hover:bg-primary/10 shrink-0',
                                    attr: {
                                        'data-action': 'click->sam--user-crud#openEditModal',
                                        'data-user-id': user.moodleId,
                                        'data-username': user.username,
                                        'data-email': user.email,
                                        'data-firstname': user.firstname,
                                        'data-lastname': user.lastname
                                    }
                                } %}

                                {# Delete #}
                                {% include '_atoms/button/button.html.twig' with {
                                    variant: 'ghost',
                                    size: 'sm',
                                    icon: 'trash',
                                    iconOnly: true,
                                    class: 'text-gray-400 hover:text-error hover:bg-error/10 shrink-0',
                                    attr: {
                                        'data-action': 'click->sam--user-crud#openDeleteModal',
                                        'data-user-id': user.moodleId,
                                        'data-fullname': user.fullname
                                    }
                                } %}
                            </div>
                        </a>
                    {% endfor %}
                {% else %}
                    {% if search is defined and search %}
                        {% include '_molecules/empty-state/empty-state.html.twig' with {
                            title: 'Aucun résultat pour "' ~ search ~ '"',
                            description: 'Essayez avec un autre nom, email ou identifiant',
                            icon: 'search'
                        } %}
                    {% else %}
                        {% include '_molecules/empty-state/empty-state.html.twig' with {
                            title: 'Aucun stagiaire trouvé',
                            description: 'Cliquez sur "Synchroniser" pour récupérer les données depuis Moodle',
                            icon: 'users'
                        } %}
                    {% endif %}
                {% endif %}
            </div>

            {# Table footer — pagination #}
            {% if users|length > 0 %}
                <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> stagiaire{{ total > 1 ? 's' : '' }}
                        {% if search is defined and search %}<span class="text-gray-400">pour "{{ search }}"</span>{% endif %}
                    </span>

                    {% if totalPages > 1 %}
                        {% include '_molecules/pagination/pagination.html.twig' with {
                            currentPage: page,
                            totalPages: totalPages,
                            baseUrl: path('app_sam_users') ~ (search is defined and search ? '?search=' ~ search|url_encode : ''),
                            size: 'sm',
                            showFirstLast: false
                        } %}
                    {% endif %}
                </div>
            {% endif %}
        </div>

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

    </main>

    {# ══════════════════════════════════════════════════════════════
       MODAL AJOUT / ÉDITION
       ══════════════════════════════════════════════════════════════ #}
    <div class="fixed inset-0 z-50 hidden items-center justify-center p-4"
         style="display:none"
         data-sam--user-crud-target="modal">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" data-action="click->sam--user-crud#closeModal"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-md 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: 'user-plus', size: 'sm', color: 'cohorts'} only %}
                    </div>
                    <h2 class="text-base font-semibold text-gray-900" data-sam--user-crud-target="modalTitle">Ajouter un stagiaire</h2>
                </div>
                {% include '_atoms/close-button/close-button.html.twig' with {
                    attr: { 'data-action': 'click->sam--user-crud#closeModal' }
                } only %}
            </div>

            {# Form #}
            <form data-sam--user-crud-target="form" data-action="submit->sam--user-crud#submit">
                <div class="px-6 py-5 space-y-4">

                    {# Prénom / Nom #}
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label for="user-firstName" class="block text-sm font-medium text-gray-700 mb-1">Prénom <span class="text-error">*</span></label>
                            <input type="text" id="user-firstName" name="firstName"
                                   class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:border-cohorts focus:ring-2 focus:ring-cohorts/20 transition-all cursor-text" required>
                        </div>
                        <div>
                            <label for="user-lastName" class="block text-sm font-medium text-gray-700 mb-1">Nom <span class="text-error">*</span></label>
                            <input type="text" id="user-lastName" name="lastName"
                                   class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:border-cohorts focus:ring-2 focus:ring-cohorts/20 transition-all cursor-text" required>
                        </div>
                    </div>

                    {# Email #}
                    <div>
                        <label for="user-email" class="block text-sm font-medium text-gray-700 mb-1">Email <span class="text-error">*</span></label>
                        <div class="relative">
                            <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: 'mail', size: 'sm', color: 'muted' } only %}
                            </div>
                            <input type="email" id="user-email" name="email"
                                   class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:border-cohorts focus:ring-2 focus:ring-cohorts/20 transition-all cursor-text" required>
                        </div>
                    </div>

                    {# Username #}
                    <div>
                        <label for="user-username" class="block text-sm font-medium text-gray-700 mb-1">Nom d'utilisateur <span class="text-error">*</span></label>
                        <input type="text" id="user-username" name="username"
                               class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:border-cohorts focus:ring-2 focus:ring-cohorts/20 transition-all cursor-text" required>
                        <p class="text-xs text-gray-400 mt-1">Identifiant de connexion sur Moodle</p>
                    </div>

                    {# Password #}
                    <div data-sam--user-crud-target="passwordGroup">
                        <label for="user-password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
                        <div class="flex items-start gap-2 mb-1.5">
                            {% include '_atoms/badge/badge.html.twig' with { label: 'Min. 8 car.', variant: 'warning', size: 'xs' } %}
                            {% include '_atoms/badge/badge.html.twig' with { label: '1 majuscule', variant: 'warning', size: 'xs' } %}
                            {% include '_atoms/badge/badge.html.twig' with { label: '1 spécial (*, -, #)', variant: 'warning', size: 'xs' } %}
                        </div>
                        <div class="relative">
                            <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: 'lock', size: 'sm', color: 'muted' } only %}
                            </div>
                            <input type="password" id="user-password" name="password"
                                   class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:border-cohorts focus:ring-2 focus:ring-cohorts/20 transition-all cursor-text"
                                   placeholder="Laisser vide pour générer automatiquement">
                        </div>
                        <p class="text-xs text-gray-400 mt-1">Laissez vide pour un mot de passe généré automatiquement.</p>
                    </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--user-crud#closeModal'}
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Enregistrer',
                        variant: 'cohorts',
                        size: 'md',
                        icon: 'check',
                        type: 'submit',
                        attr: {'data-sam--user-crud-target': 'submitBtn'}
                    } %}
                </div>
            </form>
        </div>
    </div>

    {# ══════════════════════════════════════════════════════════════
       MODAL SUPPRESSION
       ══════════════════════════════════════════════════════════════ #}
    <div class="fixed inset-0 z-50 items-center justify-center p-4"
         style="display:none"
         data-sam--user-crud-target="deleteModal">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" data-action="click->sam--user-crud#closeDeleteModal"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-sm z-10">

            {# Header #}
            <div class="px-6 pt-5 pb-4 border-b border-error/15 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: 'trash', 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--user-crud#closeDeleteModal' }
                } only %}
            </div>

            {# Body #}
            <div class="px-6 py-5 space-y-3">
                <p class="text-sm text-gray-600">
                    Êtes-vous sûr de vouloir supprimer
                    <strong class="text-gray-900" data-sam--user-crud-target="deleteUserName">cet utilisateur</strong> ?
                </p>
                <div class="flex items-start gap-2.5 bg-error/5 border border-error/15 rounded-lg px-4 py-3">
                    {% include '_atoms/icon/icon.html.twig' with {name: 'warning', size: 'sm', color: 'error', class: 'shrink-0 mt-0.5'} only %}
                    <p class="text-xs text-error font-medium">Cette action va supprimer l'utilisateur sur Moodle et ne peut pas être annulée.</p>
                </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--user-crud#closeDeleteModal'}
                } %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Supprimer',
                    variant: 'error',
                    size: 'md',
                    attr: {
                        'data-action': 'click->sam--user-crud#confirmDelete',
                        'data-sam--user-crud-target': 'deleteBtn'
                    }
                } %}
            </div>
        </div>
    </div>

</div>
{% endblock %}