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

{% block title %}Gestion des utilisateurs - {{ site.name }}{% endblock %}

{% block breadcrumb %}Administration <i class="fas fa-chevron-right"></i> Gestion utilisateurs{% endblock %}

{% block body %}
<div class="container-fluid mt-4">
    <div class="row mb-4">
        <div class="col-12">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
                <div>
                    <h1 style="font-size: 28px; font-weight: 700; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
                        <i class="fas fa-users-cog"></i> Gestion des utilisateurs
                    </h1>
                    <p style="color: #64748b; margin: 8px 0 0 0;">
                        Invitez des collaborateurs et gérez leurs accès
                    </p>
                </div>
                <a href="{{ path('dashboard', {success: 0}) }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left"></i> Retour au tableau de bord
                </a>
            </div>
        </div>
    </div>

    {# Statistics Cards #}
    <div class="row mb-4">
        <div class="col-md-3">
            <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #667eea;">
                <div style="display: flex; justify-content: space-between; align-items: start;">
                    <div>
                        <div style="color: #64748b; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">
                            Total utilisateurs
                        </div>
                        <div style="font-size: 32px; font-weight: 700; color: #1e293b;">
                            {{ statistics.total }}
                        </div>
                    </div>
                    <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #10b981;">
                <div style="display: flex; justify-content: space-between; align-items: start;">
                    <div>
                        <div style="color: #64748b; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">
                            Administrateurs
                        </div>
                        <div style="font-size: 32px; font-weight: 700; color: #1e293b;">
                            {{ statistics.admins }}
                        </div>
                    </div>
                    <div style="width: 48px; height: 48px; background: #10b981; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
                        <i class="fas fa-crown"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #3b82f6;">
                <div style="display: flex; justify-content: space-between; align-items: start;">
                    <div>
                        <div style="color: #64748b; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">
                            Éditeurs
                        </div>
                        <div style="font-size: 32px; font-weight: 700; color: #1e293b;">
                            {{ statistics.editors }}
                        </div>
                    </div>
                    <div style="width: 48px; height: 48px; background: #3b82f6; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
                        <i class="fas fa-pen"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #f59e0b;">
                <div style="display: flex; justify-content: space-between; align-items: start;">
                    <div>
                        <div style="color: #64748b; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">
                            En attente
                        </div>
                        <div style="font-size: 32px; font-weight: 700; color: #1e293b;">
                            {{ statistics.pending }}
                        </div>
                    </div>
                    <div style="width: 48px; height: 48px; background: #f59e0b; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
                        <i class="fas fa-clock"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Invitation Form #}
    <div class="row mb-4">
        <div class="col-12">
            <div style="background: white; padding: 32px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);">
                <h3 style="font-size: 20px; font-weight: 700; margin-bottom: 24px; color: #1e293b;">
                    <i class="fas fa-user-plus"></i> Inviter un utilisateur
                </h3>

                <form id="invite-form" style="display: flex; gap: 16px; align-items: end; flex-wrap: wrap;">
                    <div style="flex: 1; min-width: 300px;">
                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #1e293b; font-size: 14px;">
                            Adresse email <span style="color: #ef4444;">*</span>
                        </label>
                        <input type="email"
                               id="invite-email"
                               required
                               placeholder="utilisateur@exemple.com"
                               style="width: 100%; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px;">
                    </div>

                    <div style="flex: 0 0 250px;">
                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #1e293b; font-size: 14px;">
                            Rôle <span style="color: #ef4444;">*</span>
                        </label>
                        <select id="invite-role"
                                required
                                style="width: 100%; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px;">
                            {% for roleValue, roleLabel in availableRoles %}
                            <option value="{{ roleValue }}">{{ roleLabel }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <button type="submit"
                            id="invite-submit-btn"
                            style="padding: 12px 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;">
                        <i class="fas fa-paper-plane"></i> <span id="invite-btn-text">Envoyer l'invitation</span>
                    </button>
                </form>
            </div>
        </div>
    </div>

    {# Permissions Table #}
    <div class="row mb-4">
        <div class="col-12">
            <div style="background: white; padding: 32px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);">
                <h3 style="font-size: 20px; font-weight: 700; margin-bottom: 16px; color: #1e293b;">
                    <i class="fas fa-shield-alt"></i> Tableau des permissions
                </h3>
                <p style="color: #64748b; margin-bottom: 24px;">Comprendre les différents niveaux d'accès</p>

                <div style="overflow-x: auto;">
                    <table style="width: 100%; border-collapse: separate; border-spacing: 0;">
                        <thead>
                            <tr style="background: #f8fafc;">
                                <th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #475569; border-bottom: 2px solid #e2e8f0;">Permission</th>
                                <th style="padding: 12px 16px; text-align: center; font-weight: 600; color: #475569; border-bottom: 2px solid #e2e8f0;">
                                    <i class="fas fa-crown" style="color: #667eea;"></i> Admin
                                </th>
                                <th style="padding: 12px 16px; text-align: center; font-weight: 600; color: #475569; border-bottom: 2px solid #e2e8f0;">
                                    <i class="fas fa-pen" style="color: #10b981;"></i> Éditeur
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% set permissions = [
                                {name: 'Structure & Pages', admin: true, editor: false},
                                {name: 'Contenu (Blog, Galeries)', admin: true, editor: true},
                                {name: 'Messages contact', admin: true, editor: true},
                                {name: 'Design & Apparence', admin: true, editor: false},
                                {name: 'Paramètres & SEO', admin: true, editor: false},
                                {name: 'Gestion utilisateurs', admin: true, editor: false}
                            ] %}
                            {% for permission in permissions %}
                            <tr style="border-bottom: 1px solid #f1f5f9;">
                                <td style="padding: 16px; color: #1e293b; font-weight: 500;">{{ permission.name }}</td>
                                <td style="padding: 16px; text-align: center;">
                                    {% if permission.admin %}
                                    <i class="fas fa-check-circle" style="color: #10b981; font-size: 20px;"></i>
                                    {% else %}
                                    <i class="fas fa-times-circle" style="color: #cbd5e1; font-size: 20px;"></i>
                                    {% endif %}
                                </td>
                                <td style="padding: 16px; text-align: center;">
                                    {% if permission.editor %}
                                    <i class="fas fa-check-circle" style="color: #10b981; font-size: 20px;"></i>
                                    {% else %}
                                    <i class="fas fa-times-circle" style="color: #cbd5e1; font-size: 20px;"></i>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {# Pending Invitations #}
    {% if pendingInvitations|length > 0 %}
    <div class="row mb-4">
        <div class="col-12">
            <div style="background: white; padding: 32px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border-left: 4px solid #f59e0b;">
                <h3 style="font-size: 20px; font-weight: 700; margin-bottom: 24px; color: #1e293b;">
                    <i class="fas fa-clock"></i> Invitations en attente ({{ pendingInvitations|length }})
                </h3>

                <div>
                    {% for invitation in pendingInvitations %}
                    <div style="border: 1px solid #fef3c7; background: #fffbeb; border-radius: 8px; padding: 20px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center;">
                        <div style="display: flex; align-items: center; gap: 16px;">
                            <div style="width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #d97706); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 18px;">
                                {{ invitation.user.username|slice(0, 1)|upper }}
                            </div>
                            <div>
                                <div style="font-weight: 600; font-size: 16px; color: #1e293b;">
                                    {{ invitation.user.username }}
                                </div>
                                <div style="color: #64748b; font-size: 14px; margin-top: 2px;">{{ invitation.user.email }}</div>
                                <div style="margin-top: 8px; display: flex; gap: 12px; align-items: center;">
                                    <span style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: {{ invitation.roleColor }}22; color: {{ invitation.roleColor }}; border-radius: 12px; font-size: 13px; font-weight: 600;">
                                        <i class="{{ invitation.roleIcon }}"></i>
                                        {{ invitation.roleLabel }}
                                    </span>
                                    <span style="color: #64748b; font-size: 13px;">
                                        <i class="fas fa-paper-plane"></i> Invité le {{ invitation.invitedAt|date('d/m/Y à H:i') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <button class="btn-cancel-invitation"
                                    data-user-id="{{ invitation.user.id }}"
                                    data-username="{{ invitation.user.username }}"
                                    style="padding: 8px 16px; background: transparent; color: #dc2626; border: 1px solid #dc2626; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; transition: all 0.3s ease;">
                                <i class="fas fa-times"></i> Annuler l'invitation
                            </button>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {# Users List #}
    <div class="row">
        <div class="col-12">
            <div style="background: white; padding: 32px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);">
                <h3 style="font-size: 20px; font-weight: 700; margin-bottom: 24px; color: #1e293b;">
                    <i class="fas fa-users"></i> Utilisateurs actifs ({{ users|length }})
                </h3>

                <div id="users-list">
                    {% if users|length == 0 %}
                    <div style="text-align: center; padding: 60px 20px; color: #94a3b8;">
                        <i class="fas fa-users" style="font-size: 48px; margin-bottom: 16px; opacity: 0.3;"></i>
                        <p style="font-size: 16px; margin: 0;">Aucun utilisateur pour le moment</p>
                    </div>
                    {% else %}
                    {% for userRole in users %}
                    <div class="user-card" data-user-id="{{ userRole.user.id }}" style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;">
                        <div style="display: flex; align-items: center; gap: 16px;">
                            <div style="width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, {{ userRole.roleColor }}, {{ userRole.roleColor }}dd); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 18px;">
                                {{ userRole.user.username|slice(0, 1)|upper }}
                            </div>
                            <div>
                                <div style="font-weight: 600; font-size: 16px; color: #1e293b;">
                                    {{ userRole.user.username }}
                                    {% if userRole.user.id == currentUser.id %}
                                    <span style="display: inline-block; padding: 2px 8px; background: #f1f5f9; color: #64748b; border-radius: 4px; font-size: 11px; font-weight: 600; margin-left: 8px;">VOUS</span>
                                    {% endif %}
                                </div>
                                <div style="color: #64748b; font-size: 14px; margin-top: 2px;">{{ userRole.user.email }}</div>
                                <div style="margin-top: 8px;">
                                    <span class="role-badge" style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: {{ userRole.roleColor }}22; color: {{ userRole.roleColor }}; border-radius: 12px; font-size: 13px; font-weight: 600;">
                                        <i class="{{ userRole.roleIcon }}"></i>
                                        <span class="role-label">{{ userRole.roleLabel }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex; gap: 12px;">
                            <select class="role-select"
                                    data-user-id="{{ userRole.user.id }}"
                                    style="padding: 8px 16px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px;">
                                {% for roleValue, roleLabel in availableRoles %}
                                <option value="{{ roleValue }}" {% if userRole.role == roleValue %}selected{% endif %}>
                                    {{ roleLabel }}
                                </option>
                                {% endfor %}
                            </select>
                            {% if userRole.user.id != currentUser.id %}
                            <button class="btn-remove"
                                    data-user-id="{{ userRole.user.id }}"
                                    data-username="{{ userRole.user.username }}"
                                    style="padding: 8px 16px; background: #fee; color: #dc2626; border: 1px solid #fecaca; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px;">
                                <i class="fas fa-trash"></i> Retirer
                            </button>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{# Modal: Confirmation de changement de rôle #}
<div class="modal fade" id="confirmRoleChangeModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 16px; border: none; overflow: hidden;">
            <div class="modal-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; padding: 24px;">
                <h5 class="modal-title" style="color: white; font-weight: 700; font-size: 20px;">
                    <i class="fas fa-user-edit me-2"></i>Modifier le rôle
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="padding: 32px;">
                <div style="text-align: center; margin-bottom: 24px;">
                    <div style="width: 64px; height: 64px; background: #f1f5f9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
                        <i class="fas fa-shield-alt" style="font-size: 28px; color: #667eea;"></i>
                    </div>
                    <p style="color: #475569; font-size: 16px; margin: 0;">
                        Êtes-vous sûr de vouloir modifier le rôle de cet utilisateur ?
                    </p>
                </div>
            </div>
            <div class="modal-footer" style="border: none; padding: 0 32px 32px 32px; gap: 12px;">
                <button type="button" class="btn btn-secondary" id="cancelRoleChangeBtn" data-bs-dismiss="modal" style="flex: 1; padding: 12px; border-radius: 8px;">
                    Annuler
                </button>
                <button type="button" class="btn btn-primary" id="confirmRoleChangeBtn" style="flex: 1; padding: 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 8px;">
                    Confirmer
                </button>
            </div>
        </div>
    </div>
</div>

{# Modal: Confirmation de suppression d'utilisateur #}
<div class="modal fade" id="confirmRemoveUserModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 16px; border: none; overflow: hidden;">
            <div class="modal-header" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border: none; padding: 24px;">
                <h5 class="modal-title" style="color: white; font-weight: 700; font-size: 20px;">
                    <i class="fas fa-user-times me-2"></i>Retirer un utilisateur
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="padding: 32px;">
                <div style="text-align: center; margin-bottom: 24px;">
                    <div style="width: 64px; height: 64px; background: #fee2e2; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
                        <i class="fas fa-exclamation-triangle" style="font-size: 28px; color: #dc2626;"></i>
                    </div>
                    <p style="color: #475569; font-size: 16px; margin: 0;">
                        Êtes-vous sûr de vouloir retirer <strong id="removeUserName"></strong> de ce site ?
                    </p>
                    <p style="color: #64748b; font-size: 14px; margin: 16px 0 0 0;">
                        Cette action est irréversible.
                    </p>
                </div>
            </div>
            <div class="modal-footer" style="border: none; padding: 0 32px 32px 32px; gap: 12px;">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="flex: 1; padding: 12px; border-radius: 8px;">
                    Annuler
                </button>
                <button type="button" class="btn btn-danger" id="confirmRemoveUserBtn" style="flex: 1; padding: 12px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border: none; border-radius: 8px;">
                    <i class="fas fa-trash me-1"></i> Retirer
                </button>
            </div>
        </div>
    </div>
</div>

{# Modal: Affichage des succès #}
<div class="modal fade" id="successModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 16px; border: none; overflow: hidden;">
            <div class="modal-header" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); border: none; padding: 24px;">
                <h5 class="modal-title" style="color: white; font-weight: 700; font-size: 20px;">
                    <i class="fas fa-check-circle me-2"></i>Succès
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="padding: 32px;">
                <div style="text-align: center;">
                    <div style="width: 64px; height: 64px; background: #d1fae5; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
                        <i class="fas fa-check" style="font-size: 28px; color: #10b981;"></i>
                    </div>
                    <p style="color: #475569; font-size: 16px; margin: 0;" id="successMessage"></p>
                </div>
            </div>
            <div class="modal-footer" style="border: none; padding: 0 32px 32px 32px;">
                <button type="button" class="btn btn-success" data-bs-dismiss="modal" style="width: 100%; padding: 12px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border: none; border-radius: 8px;">
                    OK
                </button>
            </div>
        </div>
    </div>
</div>

{# Modal: Affichage des erreurs #}
<div class="modal fade" id="errorModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 16px; border: none; overflow: hidden;">
            <div class="modal-header" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border: none; padding: 24px;">
                <h5 class="modal-title" style="color: white; font-weight: 700; font-size: 20px;">
                    <i class="fas fa-exclamation-circle me-2"></i>Attention
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="padding: 32px;">
                <div style="text-align: center;">
                    <div style="width: 64px; height: 64px; background: #fef3c7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
                        <i class="fas fa-info-circle" style="font-size: 28px; color: #d97706;"></i>
                    </div>
                    <p style="color: #475569; font-size: 16px; margin: 0;" id="errorMessage"></p>
                </div>
            </div>
            <div class="modal-footer" style="border: none; padding: 0 32px 32px 32px;">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" style="width: 100%; padding: 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 8px;">
                    OK
                </button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const siteId = {{ site.id }};

    // Invite form
    const inviteForm = document.getElementById('invite-form');
    const inviteBtn = document.getElementById('invite-submit-btn');
    const inviteBtnText = document.getElementById('invite-btn-text');

    if (inviteForm) {
        inviteForm.addEventListener('submit', async function(e) {
            e.preventDefault();

            const email = document.getElementById('invite-email').value;
            const role = document.getElementById('invite-role').value;
            const resultDiv = document.getElementById('invite-result');

            // Show loading state
            inviteBtn.disabled = true;
            inviteBtn.style.opacity = '0.7';
            inviteBtn.style.transform = 'scale(0.98)';
            inviteBtnText.textContent = 'Envoi en cours...';

            try {
                const response = await fetch(`/admin/site/${siteId}/users/invite`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    body: new URLSearchParams({email, role})
                });

                const data = await response.json();

                // Reset button state
                inviteBtn.disabled = false;
                inviteBtn.style.opacity = '1';
                inviteBtn.style.transform = 'scale(1)';
                inviteBtnText.textContent = 'Envoyer l\'invitation';

                if (data.success) {
                    // Reset form
                    e.target.reset();

                    // Show success modal
                    showSuccessMessage(data.message || 'Invitation envoyée avec succès');

                    // Reload after 2s
                    setTimeout(() => location.reload(), 2000);
                } else {
                    showErrorModal(data.message);
                }
            } catch (error) {
                // Reset button state
                inviteBtn.disabled = false;
                inviteBtn.style.opacity = '1';
                inviteBtn.style.transform = 'scale(1)';
                inviteBtnText.textContent = 'Envoyer l\'invitation';

                showErrorModal('Erreur lors de l\'envoi: ' + error.message);
                console.error('Invitation error:', error);
            }
        });
    }

    // Change role
    let currentSelect = null;
    let previousRole = null;

    document.querySelectorAll('.role-select').forEach(select => {
        select.addEventListener('focus', function() {
            previousRole = this.value;
        });

        select.addEventListener('change', function() {
            currentSelect = this;
            const userId = this.dataset.userId;
            const newRole = this.value;

            // Show confirmation modal
            const modal = new bootstrap.Modal(document.getElementById('confirmRoleChangeModal'));
            document.getElementById('confirmRoleChangeBtn').onclick = () => changeUserRole(userId, newRole);
            document.getElementById('cancelRoleChangeBtn').onclick = () => {
                currentSelect.value = previousRole;
                modal.hide();
            };
            modal.show();
        });
    });

    async function changeUserRole(userId, newRole) {
        const modal = bootstrap.Modal.getInstance(document.getElementById('confirmRoleChangeModal'));
        modal.hide();

        try {
            const response = await fetch(`/admin/site/${siteId}/users/${userId}/role`, {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: new URLSearchParams({role: newRole})
            });

            const data = await response.json();

            if (data.success) {
                showSuccessMessage('Rôle modifié avec succès');
                setTimeout(() => location.reload(), 2000);
            } else {
                showErrorModal(data.message);
            }
        } catch (error) {
            showErrorModal('Erreur lors de la modification du rôle');
        }
    }

    // Remove user
    let userToRemove = null;
    let usernameToRemove = null;

    document.querySelectorAll('.btn-remove').forEach(button => {
        button.addEventListener('click', function() {
            userToRemove = this.dataset.userId;
            usernameToRemove = this.dataset.username;

            // Update modal content with username
            document.getElementById('removeUserName').textContent = usernameToRemove;

            // Show confirmation modal
            const modal = new bootstrap.Modal(document.getElementById('confirmRemoveUserModal'));
            modal.show();
        });
    });

    document.getElementById('confirmRemoveUserBtn').addEventListener('click', async function() {
        const modal = bootstrap.Modal.getInstance(document.getElementById('confirmRemoveUserModal'));
        modal.hide();

        try {
            const response = await fetch(`/admin/site/${siteId}/users/${userToRemove}/remove`, {
                method: 'POST'
            });

            const data = await response.json();

            if (data.success) {
                showSuccessMessage(data.message || 'Utilisateur retiré avec succès');
                setTimeout(() => location.reload(), 2000);
            } else {
                showErrorModal(data.message);
            }
        } catch (error) {
            showErrorModal('Erreur lors de la suppression');
        }
    });

    function showErrorModal(message) {
        document.getElementById('errorMessage').textContent = message;
        const modal = new bootstrap.Modal(document.getElementById('errorModal'));
        modal.show();
    }

    function showSuccessMessage(message) {
        document.getElementById('successMessage').textContent = message;
        const modal = new bootstrap.Modal(document.getElementById('successModal'));
        modal.show();
    }

    // Cancel invitation
    let invitationToCancel = null;
    let invitationUsernameToCancel = null;

    document.querySelectorAll('.btn-cancel-invitation').forEach(button => {
        button.addEventListener('click', function() {
            invitationToCancel = this.dataset.userId;
            invitationUsernameToCancel = this.dataset.username;

            // Update modal content with username
            document.getElementById('cancelInvitationUserName').textContent = invitationUsernameToCancel;

            // Show confirmation modal
            const modal = new bootstrap.Modal(document.getElementById('confirmCancelInvitationModal'));
            modal.show();
        });
    });

    document.getElementById('confirmCancelInvitationBtn').addEventListener('click', async function() {
        const modal = bootstrap.Modal.getInstance(document.getElementById('confirmCancelInvitationModal'));
        modal.hide();

        try {
            const response = await fetch(`/admin/site/${siteId}/users/${invitationToCancel}/remove`, {
                method: 'POST'
            });

            const data = await response.json();

            if (data.success) {
                showSuccessMessage('Invitation annulée avec succès');
                setTimeout(() => location.reload(), 2000);
            } else {
                showErrorModal(data.message);
            }
        } catch (error) {
            showErrorModal('Erreur lors de l\'annulation de l\'invitation');
        }
    });
});
</script>

<style>
.user-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.btn-remove:hover {
    background: #dc2626 !important;
    color: white !important;
}

.btn-cancel-invitation:hover {
    background: #dc2626 !important;
    color: white !important;
}

#invite-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

#invite-submit-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

#invite-submit-btn:disabled {
    cursor: not-allowed;
}
</style>

{# Modal: Confirmation d'annulation d'invitation #}
<div class="modal fade" id="confirmCancelInvitationModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 16px; border: none; overflow: hidden;">
            <div class="modal-header" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border: none; padding: 24px;">
                <h5 class="modal-title" style="color: white; font-weight: 700; font-size: 20px;">
                    <i class="fas fa-user-times me-2"></i>Annuler l'invitation
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="padding: 32px;">
                <div style="text-align: center; margin-bottom: 24px;">
                    <div style="width: 64px; height: 64px; background: #fef3c7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
                        <i class="fas fa-envelope-open-text" style="font-size: 28px; color: #d97706;"></i>
                    </div>
                    <p style="color: #475569; font-size: 16px; margin: 0;">
                        Êtes-vous sûr de vouloir annuler l'invitation de <strong id="cancelInvitationUserName"></strong> ?
                    </p>
                    <p style="color: #64748b; font-size: 14px; margin: 16px 0 0 0;">
                        L'utilisateur ne pourra plus accepter cette invitation.
                    </p>
                </div>
            </div>
            <div class="modal-footer" style="border: none; padding: 0 32px 32px 32px; gap: 12px;">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="flex: 1; padding: 12px; border-radius: 8px;">
                    Retour
                </button>
                <button type="button" class="btn btn-warning" id="confirmCancelInvitationBtn" style="flex: 1; padding: 12px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border: none; border-radius: 8px; color: white;">
                    <i class="fas fa-times-circle me-1"></i> Annuler l'invitation
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}