{% extends "base.html.twig" %}
{% block body %}
    <div class="page-pointage">
        <div class="card-pointage" data-admin-id="{{ app.user.id }}">
            <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
                <h5 class="mb-0">Gestion des utilisateurs</h5>
                <div class="d-flex gap-2 flex-wrap">
                    <a href="{{ path('admin.pointage') }}" class="btn btn-outline-secondary btn-sm">
                        Pointages
                    </a>
                    <a href="{{ path('admin.modifications') }}" class="btn btn-outline-secondary btn-sm">
                        Journal des modifications
                    </a>
                    <a href="{{ path('app_logout') }}" class="btn btn-outline-danger btn-sm">
                        Déconnexion
                    </a>
                </div>
            </div>

            <div class="d-flex mb-3 align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                    <label for="filterStatus" class="me-2 mb-0">Filtrer par état :</label>
                    <select id="filterStatus" class="form-select form-select-sm w-auto"
                            onchange="location = this.value;">
                        <option value="{{ path('admin.utilisateurs', {'status': 'all'}) }}" {% if filterStatus == 'all' %}selected{% endif %}>Tous</option>              
                        <option value="{{ path('admin.utilisateurs', {'status': 'active'}) }}" {% if filterStatus == 'active' %}selected{% endif %}>Activé</option>               
                        <option value="{{ path('admin.utilisateurs', {'status': 'inactive'}) }}" {% if filterStatus == 'inactive' %}selected{% endif %}>Désactivé</option>
                    </select>
                </div>
                <div class="d-flex gap-2">
                    <a href="#" class="btn btn-add btn-sm" data-bs-toggle="modal" data-bs-target="#addUserModal">Ajouter utilisateur</a>
                </div>
            </div>
            <table class="table table-bordered align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Utilisateur</th>
                        <th>Rôles</th>
                        <th>État</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for u in users %}
                        <tr>
                            <td>{{ u.username }}</td>
                            <td>
                                {% for role in u.roles %}
                                    <span class="badge bg-secondary me-1">{{ role }}</span>
                                {% endfor %}
                            </td>
                            <td>
                                <form method="POST" action="{{ path('admin.utilisateurs.toggle', {'id': u.id}) }}" 
                                      style="display:inline-block"
                                      onsubmit="
                                      {% if u.id == app.user.id %}
                                              alert('⚠️ Vous ne pouvez pas désactiver votre propre compte＼（〇_ｏ）／');
                                              return false;
                                      {% else %}
                                              return confirm('{{ u.isActive ? 'Un utilisateur désactivé ne pourra plus se connecter mais vous aurez toujours accès à ses anciens pointages.' : 'Voulez-vous réactiver cet utilisateur ?' }}');
                                      {% endif %}
                                      ">
                                    <input type="hidden" name="_token" value="{{ csrf_token('toggle_user_' ~ u.id) }}">
                                    {% if u.isActive %}
                                        <button type="submit" class="btn btn-success btn-sm">Activé</button>
                                    {% else %}
                                        <button type="submit" class="btn btn-danger btn-sm">Désactivé</button>
                                    {% endif %}
                                </form>

                            </td>
                            <td class="text-center actions">
                                <button
                                    class="btn btn-outline-secondary btn-sm"
                                    data-bs-toggle="modal"
                                    data-bs-target="#changePasswordModal"
                                    data-user-id="{{ u.id }}"
                                    data-username="{{ u.username }}">
                                    Changer mot de passe
                                </button>
                                <button class="btn btn-outline-danger btn-sm"
                                        data-bs-toggle="modal"
                                        data-bs-target="#deleteUserModal"
                                        data-user-id="{{ u.id }}"
                                        data-username="{{ u.username }}">
                                    Supprimer
                                </button>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="4" class="text-center text-muted">Aucun utilisateur</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal créer un utilisateur -->
    <div class="modal fade" id="addUserModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form method="POST" action="{{ path('admin.utilisateurs.add') }}" id="addUserForm" novalidate>
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Ajouter un utilisateur</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <!-- Nom -->
                        <div class="mb-3">
                            <label for="nom" class="form-label">Nom <span class="text-danger">*</span></label>
                            <input type="text" id="nom" name="nom" class="form-control" required>
                            <div class="invalid-feedback">Veuillez renseigner ce champ.</div>
                        </div>

                        <!-- Prénom -->
                        <div class="mb-3">
                            <label for="prenom" class="form-label">Prénom <span class="text-danger">*</span></label>
                            <input type="text" id="prenom" name="prenom" class="form-control" required>
                            <div class="invalid-feedback">Veuillez renseigner ce champ.</div>
                        </div>

                        <!-- Mot de passe -->
                        <div class="mb-3">
                            <label class="form-label">Mot de passe <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" id="password" name="password" class="form-control password-field" required>
                                <button class="btn btn-outline-secondary toggle-password" type="button">
                                    <em class="bi bi-eye-slash"></em>
                                </button>
                                <div class="invalid-feedback">Veuillez renseigner ce champ.</div>
                            </div>
                        </div>

                        <!-- Confirmation mot de passe -->
                        <div class="mb-3">
                            <label class="form-label">Confirmer le mot de passe <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" id="password_confirm" name="password_confirm" class="form-control password-field" required>
                                <button class="btn btn-outline-secondary toggle-password" type="button">
                                    <em class="bi bi-eye-slash"></em>
                                </button>
                                <div class="invalid-feedback" id="password-error">Les mots de passe ne correspondent pas.</div>
                            </div>
                        </div>

                        <!-- Rôle -->
                        <div class="mb-3">
                            <label for="role" class="form-label">Rôle <span class="text-danger">*</span></label>
                            <select id="role" name="role" class="form-select" required>
                                <option value="">Sélectionnez un rôle</option>
                                <option value="ROLE_USER" selected>Utilisateur</option>
                                <option value="ROLE_ADMIN">Administrateur</option>
                            </select>
                            <div class="invalid-feedback">Veuillez sélectionner un rôle.</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-success">Créer</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <!-- Modal changer mot de passe -->
    <div class="modal fade" id="changePasswordModal" tabindex="-1">
        <div class="modal-dialog">
            <form method="POST"
                  action="{{ path('admin.utilisateurs.password') }}"
                  id="changePasswordForm"
                  novalidate>

                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Changer le mot de passe</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <input type="hidden" name="user_id" id="passwordUserId">
                        <input type="hidden" name="_token" value="{{ csrf_token('change_password') }}">

                        <!-- Utilisateur -->
                        <div class="mb-3">
                            <label class="form-label">Utilisateur</label>
                            <input type="text" class="form-control" id="passwordUsername" disabled>
                        </div>

                        <!-- Nouveau mot de passe -->
                        <div class="mb-3">
                            <label class="form-label">Nouveau mot de passe</label>
                            <div class="input-group">
                                <input type="password"
                                       id="change_password"
                                       name="password"
                                       class="form-control password-field"
                                       required>
                                <button class="btn btn-outline-secondary toggle-password" type="button">
                                    <em class="bi bi-eye-slash"></em>
                                </button>
                            </div>
                            <div class="invalid-feedback">
                                Veuillez renseigner ce champ.
                            </div>
                        </div>

                        <!-- Confirmation -->
                        <div class="mb-3">
                            <label class="form-label">Confirmation</label>
                            <div class="input-group">
                                <input type="password"
                                       id="change_password_confirm"
                                       name="password_confirm"
                                       class="form-control password-field"
                                       required>
                                <button class="btn btn-outline-secondary toggle-password" type="button">
                                    <em class="bi bi-eye-slash"></em>
                                </button>
                            </div>
                            <div class="invalid-feedback" id="change-password-error">
                                Les mots de passe ne correspondent pas.
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Modifier</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Annuler
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="deleteUserModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <form method="POST" action="{{ path('admin.utilisateurs.delete') }}" id="deleteUserForm" novalidate>
                <div class="modal-content">
                    <div class="modal-header bg-danger text-white">
                        <h5 class="modal-title">Confirmation de suppression</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <input type="hidden" name="user_id" id="deleteUserId">
                        <input type="hidden" name="_token" value="{{ csrf_token('delete_user') }}">

                        ⚠️ <strong>Attention</strong><br>
                        Vous êtes sur le point de supprimer l’utilisateur :
                        <strong id="deleteUsername"></strong><br><br>
                        Cette action est <strong>irréversible</strong>.<br>
                        Tous les pointages de cet utilisateur seront également supprimés.

                        <hr>

                        <label class="form-label">Mot de passe administrateur</label>
                        <div class="input-group">
                            <input type="password" name="admin_password" id="adminPassword" class="form-control password-field" required>
                            <button type="button" class="btn btn-outline-secondary toggle-password">
                                <em class="bi bi-eye-slash"></em>
                            </button>
                        </div>
                        <div class="invalid-feedback" id="admin-password-error" style="display:none;"></div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-danger">Supprimer définitivement</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            // ======================
            // Toggle afficher / masquer tous les champs password
            // ======================
            document.querySelectorAll('.toggle-password').forEach(button => {
                button.addEventListener('click', function () {
                    const input = button.closest('.input-group').querySelector('.password-field');
                    const icon = button.querySelector('i');
                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.classList.replace('bi-eye-slash', 'bi-eye');
                    } else {
                        input.type = 'password';
                        icon.classList.replace('bi-eye', 'bi-eye-slash');
                    }
                });
            });

            // ======================
            // Validation création utilisateur (username généré côté serveur)
            // ======================
            const addUserForm = document.getElementById('addUserForm');
            if (addUserForm) {
                const nom = document.getElementById('nom');
                const prenom = document.getElementById('prenom');
                const password = document.getElementById('password');
                const passwordConfirm = document.getElementById('password_confirm');
                const role = document.getElementById('role');
                const passwordError = document.getElementById('password-error');

                // Validation en temps réel nom/prénom
                if (nom) {
                    nom.addEventListener('blur', function () {
                        if (!this.value.trim()) {
                            this.classList.add('is-invalid');
                        } else {
                            this.classList.remove('is-invalid');
                        }
                    });
                }

                if (prenom) {
                    prenom.addEventListener('blur', function () {
                        if (!this.value.trim()) {
                            this.classList.add('is-invalid');
                        } else {
                            this.classList.remove('is-invalid');
                        }
                    });
                }

                addUserForm.addEventListener('submit', function (e) {
                    let valid = true;

                    // Validation Nom
                    if (!nom.value.trim()) {
                        nom.classList.add('is-invalid');
                        valid = false;
                    } else {
                        nom.classList.remove('is-invalid');
                    }

                    // Validation Prénom
                    if (!prenom.value.trim()) {
                        prenom.classList.add('is-invalid');
                        valid = false;
                    } else {
                        prenom.classList.remove('is-invalid');
                    }

                    // Validation Mot de passe
                    if (!password.value) {
                        password.classList.add('is-invalid');
                        valid = false;
                    } else {
                        password.classList.remove('is-invalid');
                    }

                    // Validation Confirmation
                    if (!passwordConfirm.value) {
                        passwordConfirm.classList.add('is-invalid');
                        passwordError.style.display = 'none';
                        valid = false;
                    } else if (password.value !== passwordConfirm.value) {
                        passwordConfirm.classList.add('is-invalid');
                        passwordError.style.display = 'block';
                        valid = false;
                    } else {
                        passwordConfirm.classList.remove('is-invalid');
                        passwordError.style.display = 'none';
                    }

                    // Validation Rôle
                    if (!role.value) {
                        role.classList.add('is-invalid');
                        valid = false;
                    } else {
                        role.classList.remove('is-invalid');
                    }

                    if (!valid) {
                        e.preventDefault();
                        // Focus sur le premier champ invalide
                        if (!nom.value.trim())
                            nom.focus();
                        else if (!prenom.value.trim())
                            prenom.focus();
                        else if (!password.value)
                            password.focus();
                        else if (!passwordConfirm.value)
                            passwordConfirm.focus();
                        else if (!role.value)
                            role.focus();
                    }
                });
            }

            // Validation changement mot de passe
            const changeModal = document.getElementById('changePasswordModal');
            if (changeModal) {
                const changeForm = document.getElementById('changePasswordForm');
                const newPassword = document.getElementById('change_password');
                const confirmPassword = document.getElementById('change_password_confirm');
                const error = document.getElementById('change-password-error');

                changeModal.addEventListener('show.bs.modal', function (event) {
                    const button = event.relatedTarget;
                    document.getElementById('passwordUserId').value = button.getAttribute('data-user-id');
                    document.getElementById('passwordUsername').value = button.getAttribute('data-username');
                });

                changeForm.addEventListener('submit', function (e) {
                    let valid = true;

                    if (!newPassword.value) {
                        newPassword.classList.add('is-invalid');
                        valid = false;
                    } else {
                        newPassword.classList.remove('is-invalid');
                    }

                    if (!confirmPassword.value) {
                        confirmPassword.classList.add('is-invalid');
                        error.style.display = 'none';
                        valid = false;
                    } else if (newPassword.value !== confirmPassword.value) {
                        confirmPassword.classList.add('is-invalid');
                        error.style.display = 'block';
                        valid = false;
                    } else {
                        confirmPassword.classList.remove('is-invalid');
                        error.style.display = 'none';
                    }

                    if (!valid)
                        e.preventDefault();
                });
            }

            // Modal suppression utilisateur
            const deleteModal = document.getElementById('deleteUserModal');
            const deleteForm = document.getElementById('deleteUserForm');
            const adminId = document.querySelector('.card-pointage').dataset.adminId;

            if (deleteModal) {
                deleteModal.addEventListener('show.bs.modal', function (event) {
                    const button = event.relatedTarget;
                    const userId = button.getAttribute('data-user-id');

                    if (userId === adminId) {
                        event.preventDefault();
                        alert("⚠️ Vous ne pouvez pas supprimer votre propre compte  ＼（〇_ｏ）／");
                        return;
                    }

                    document.getElementById('deleteUserId').value = userId;
                    document.getElementById('deleteUsername').textContent = button.getAttribute('data-username');

                    const adminPassword = document.getElementById('adminPassword');
                    const adminPasswordError = document.getElementById('admin-password-error');
                    adminPassword.value = '';
                    adminPassword.classList.remove('is-invalid');
                    adminPasswordError.style.display = 'none';
                });

                deleteForm.addEventListener('submit', function (e) {
                    e.preventDefault();

                    const adminPassword = document.getElementById('adminPassword');
                    const adminPasswordError = document.getElementById('admin-password-error');
                    const userId = document.getElementById('deleteUserId').value;
                    const token = deleteForm.querySelector('input[name="_token"]').value;

                    if (!adminPassword.value.trim()) {
                        adminPassword.classList.add('is-invalid');
                        adminPasswordError.textContent = "Veuillez saisir votre mot de passe pour confirmer.";
                        adminPasswordError.style.display = 'block';
                        return;
                    }

                    // Vérification mot de passe via fetch
                    fetch("{{ path('admin.utilisateurs.delete') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-Requested-With": "XMLHttpRequest"
                        },
                        body: JSON.stringify({
                            user_id: userId,
                            admin_password: adminPassword.value,
                            _token: token
                        })
                    })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    window.location.reload();
                                } else {
                                    adminPassword.classList.add('is-invalid');
                                    adminPasswordError.textContent = data.message || "Mot de passe incorrect.";
                                    adminPasswordError.style.display = 'block';
                                }
                            })
                            .catch(() => {
                                adminPassword.classList.add('is-invalid');
                                adminPasswordError.textContent = "Une erreur est survenue.";
                                adminPasswordError.style.display = 'block';
                            });
                });
            }

        });
    </script>
{% endblock %}