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

{% block title %}Gestion des utilisateurs{% endblock %}

{% block body %}
<div class="page-wrapper">

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="page-title"><i class="bi bi-people" style="color:var(--petrol);"></i> Utilisateurs</h1>
    <span style="font-size:13px;color:var(--text-light);">{{ users|length }} compte{{ users|length > 1 ? 's' : '' }}</span>
</div>

{% for message in app.flashes('success') %}
    <div class="alert alert-success mb-3 d-flex align-items-center gap-2">
        <i class="bi bi-check-circle-fill"></i> {{ message }}
    </div>
{% endfor %}
{% for message in app.flashes('error') %}
    <div class="alert alert-danger mb-3 d-flex align-items-center gap-2">
        <i class="bi bi-exclamation-triangle-fill"></i> {{ message }}
    </div>
{% endfor %}

<div class="card">
    <div class="card-header">
        <i class="bi bi-person-gear" style="color:var(--petrol);"></i> Liste des comptes
    </div>
    <div style="overflow-x:auto;">
        <table style="width:100%;border-collapse:collapse;font-size:14px;">
            <thead>
                <tr style="background:var(--cream);border-bottom:2px solid var(--cream-border);">
                    <th style="padding:12px 16px;text-align:left;font-family:'DM Sans',sans-serif;font-weight:600;color:var(--text-mid);">Utilisateur</th>
                    <th style="padding:12px 16px;text-align:left;font-family:'DM Sans',sans-serif;font-weight:600;color:var(--text-mid);">Email</th>
                    <th style="padding:12px 16px;text-align:center;font-family:'DM Sans',sans-serif;font-weight:600;color:var(--text-mid);">Rôle</th>
                    <th style="padding:12px 16px;text-align:center;font-family:'DM Sans',sans-serif;font-weight:600;color:var(--text-mid);">Statut</th>
                    <th style="padding:12px 16px;text-align:left;font-family:'DM Sans',sans-serif;font-weight:600;color:var(--text-mid);">Inscription</th>
                    <th style="padding:12px 16px;text-align:center;font-family:'DM Sans',sans-serif;font-weight:600;color:var(--text-mid);">Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for user in users %}
                {% set isSelf = user == app.user %}
                {% set mainRole = 'ROLE_VISITOR' %}
                {% if 'ROLE_ADMIN' in user.roles %}{% set mainRole = 'ROLE_ADMIN' %}
                {% elseif 'ROLE_CONTRIBUTOR' in user.roles %}{% set mainRole = 'ROLE_CONTRIBUTOR' %}
                {% endif %}

                <tr style="border-bottom:1px solid var(--cream-border);{% if not user.isActive %}opacity:0.6;{% endif %}">
                    {# Nom #}
                    <td style="padding:14px 16px;">
                        <div style="display:flex;align-items:center;gap:10px;">
                            <div style="width:34px;height:34px;border-radius:50%;background:var(--petrol);color:white;
                                        display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
                                        flex-shrink:0;">
                                {{ user.displayName|first|upper }}
                            </div>
                            <span style="font-weight:500;color:var(--text-dark);">
                                {{ user.displayName }}
                                {% if isSelf %}<span style="font-size:11px;color:var(--petrol);margin-left:4px;">(vous)</span>{% endif %}
                            </span>
                        </div>
                    </td>

                    {# Email #}
                    <td style="padding:14px 16px;color:var(--text-mid);">{{ user.email }}</td>

                    {# Rôle + changement #}
                    <td style="padding:14px 16px;text-align:center;">
                        {% if isSelf %}
                            {{ _self.roleBadge(mainRole) }}
                        {% else %}
                            <form method="post" action="{{ path('app_admin_user_role', {id: user.id}) }}"
                                  style="display:flex;align-items:center;justify-content:center;gap:6px;">
                                <input type="hidden" name="_token" value="{{ csrf_token('user-role-' ~ user.id) }}">
                                <select name="role" onchange="this.form.submit()"
                                        style="padding:4px 8px;border:1.5px solid var(--cream-border);border-radius:7px;
                                               font-size:12px;font-family:'DM Sans',sans-serif;background:white;
                                               color:var(--text-dark);cursor:pointer;">
                                    <option value="ROLE_VISITOR"     {{ mainRole == 'ROLE_VISITOR'     ? 'selected' : '' }}>Visiteur</option>
                                    <option value="ROLE_CONTRIBUTOR" {{ mainRole == 'ROLE_CONTRIBUTOR' ? 'selected' : '' }}>Contributeur</option>
                                    <option value="ROLE_ADMIN"       {{ mainRole == 'ROLE_ADMIN'       ? 'selected' : '' }}>Administrateur</option>
                                </select>
                            </form>
                        {% endif %}
                    </td>

                    {# Statut #}
                    <td style="padding:14px 16px;text-align:center;">
                        {% if user.isActive %}
                            <span style="background:rgba(58,140,110,0.12);color:var(--diff-easy);border-radius:20px;
                                         padding:3px 10px;font-size:12px;font-weight:500;">
                                <i class="bi bi-check-circle-fill"></i> Actif
                            </span>
                        {% else %}
                            <span style="background:rgba(192,64,42,0.1);color:var(--diff-hard);border-radius:20px;
                                         padding:3px 10px;font-size:12px;font-weight:500;">
                                <i class="bi bi-slash-circle-fill"></i> Désactivé
                            </span>
                        {% endif %}
                    </td>

                    {# Date inscription #}
                    <td style="padding:14px 16px;color:var(--text-light);font-size:13px;">
                        {{ user.createdAt ? user.createdAt|date('d/m/Y') : '—' }}
                    </td>

                    {# Actions #}
                    <td style="padding:14px 16px;text-align:center;">
                        {% if not isSelf %}
                        <div style="display:flex;gap:6px;justify-content:center;">
                            {# Changer le mot de passe #}
                            <button type="button" class="btn-icon-sm"
                                    title="Changer le mot de passe"
                                    onclick="openPasswordModal({{ user.id }}, '{{ user.displayName|e('js') }}')"
                                    style="background:rgba(42,107,124,0.1);color:var(--petrol);border:1.5px solid rgba(42,107,124,0.25);">
                                <i class="bi bi-key"></i>
                            </button>

                            {# Activer / Désactiver #}
                            <form method="post" action="{{ path('app_admin_user_toggle', {id: user.id}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('user-toggle-' ~ user.id) }}">
                                <button type="submit" class="btn-icon-sm {% if user.isActive %}danger{% endif %}"
                                        title="{{ user.isActive ? 'Désactiver' : 'Réactiver' }}"
                                        style="{% if not user.isActive %}background:rgba(58,140,110,0.12);color:var(--diff-easy);border:1.5px solid rgba(58,140,110,0.25);{% endif %}">
                                    <i class="bi bi-{% if user.isActive %}person-slash{% else %}person-check{% endif %}"></i>
                                </button>
                            </form>

                            {# Supprimer #}
                            <form method="post" action="{{ path('app_admin_user_delete', {id: user.id}) }}"
                                  onsubmit="return confirm('Supprimer {{ user.displayName|e('js') }} ? Cette action est irréversible.')">
                                <input type="hidden" name="_token" value="{{ csrf_token('user-delete-' ~ user.id) }}">
                                <button type="submit" class="btn-icon-sm danger" title="Supprimer">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </div>
                        {% else %}
                            <span style="font-size:12px;color:var(--text-light);">—</span>
                        {% endif %}
                    </td>
                </tr>

                {# Modal changement de mot de passe pour cet utilisateur #}
                {% if not isSelf %}
                <tr id="modal-backdrop-{{ user.id }}" class="pwd-modal-backdrop"
                    style="display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.45);"
                    onclick="closePasswordModal({{ user.id }})">
                </tr>
                {% endif %}
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{# Modal flottant (unique, réutilisé pour tous les users) #}
<div id="pwd-modal"
     style="display:none;position:fixed;inset:0;z-index:1001;align-items:center;justify-content:center;">
    {# Backdrop #}
    <div onclick="closePwdModal()"
         style="position:absolute;inset:0;background:rgba(0,0,0,0.45);"></div>

    {# Boîte de dialogue #}
    <div style="position:relative;background:white;border-radius:14px;padding:28px 32px;
                width:100%;max-width:420px;box-shadow:0 8px 32px rgba(0,0,0,0.18);z-index:1;">

        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
            <div style="display:flex;align-items:center;gap:10px;">
                <div style="width:36px;height:36px;border-radius:50%;background:rgba(42,107,124,0.12);
                            color:var(--petrol);display:flex;align-items:center;justify-content:center;font-size:18px;">
                    <i class="bi bi-key"></i>
                </div>
                <div>
                    <div style="font-weight:700;font-size:15px;color:var(--text-dark);">Nouveau mot de passe</div>
                    <div id="pwd-modal-username" style="font-size:12px;color:var(--text-light);"></div>
                </div>
            </div>
            <button onclick="closePwdModal()" type="button"
                    style="background:none;border:none;cursor:pointer;font-size:20px;color:var(--text-light);line-height:1;">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>

        <form id="pwd-modal-form" method="post" action="">
            <input type="hidden" name="_token" id="pwd-modal-token" value="">

            <div style="margin-bottom:14px;">
                <label style="display:block;font-size:13px;font-weight:600;color:var(--text-mid);margin-bottom:6px;">
                    Nouveau mot de passe
                </label>
                <div style="position:relative;">
                    <input type="password" name="new_password" id="pwd-new" required minlength="8"
                           placeholder="Min. 8 caractères"
                           style="width:100%;padding:9px 40px 9px 12px;border:1.5px solid var(--cream-border);
                                  border-radius:8px;font-size:14px;font-family:'DM Sans',sans-serif;
                                  box-sizing:border-box;outline:none;transition:border-color .2s;"
                           onfocus="this.style.borderColor='var(--petrol)'"
                           onblur="this.style.borderColor='var(--cream-border)'">
                    <button type="button" onclick="togglePwd('pwd-new', this)"
                            style="position:absolute;right:10px;top:50%;transform:translateY(-50%);
                                   background:none;border:none;cursor:pointer;color:var(--text-light);font-size:15px;">
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
            </div>

            <div style="margin-bottom:20px;">
                <label style="display:block;font-size:13px;font-weight:600;color:var(--text-mid);margin-bottom:6px;">
                    Confirmer le mot de passe
                </label>
                <div style="position:relative;">
                    <input type="password" name="confirm_password" id="pwd-confirm" required minlength="8"
                           placeholder="Répétez le mot de passe"
                           style="width:100%;padding:9px 40px 9px 12px;border:1.5px solid var(--cream-border);
                                  border-radius:8px;font-size:14px;font-family:'DM Sans',sans-serif;
                                  box-sizing:border-box;outline:none;transition:border-color .2s;"
                           onfocus="this.style.borderColor='var(--petrol)'"
                           onblur="this.style.borderColor='var(--cream-border)'"
                           oninput="checkPwdMatch()">
                    <button type="button" onclick="togglePwd('pwd-confirm', this)"
                            style="position:absolute;right:10px;top:50%;transform:translateY(-50%);
                                   background:none;border:none;cursor:pointer;color:var(--text-light);font-size:15px;">
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
                <div id="pwd-match-msg" style="font-size:12px;margin-top:5px;display:none;"></div>
            </div>

            <div style="display:flex;gap:10px;justify-content:flex-end;">
                <button type="button" onclick="closePwdModal()"
                        style="padding:8px 18px;border:1.5px solid var(--cream-border);border-radius:8px;
                               background:white;font-size:13px;font-family:'DM Sans',sans-serif;
                               color:var(--text-mid);cursor:pointer;">
                    Annuler
                </button>
                <button type="submit" id="pwd-submit-btn"
                        style="padding:8px 18px;border:none;border-radius:8px;
                               background:var(--petrol);color:white;font-size:13px;
                               font-family:'DM Sans',sans-serif;font-weight:600;cursor:pointer;">
                    <i class="bi bi-check-lg"></i> Enregistrer
                </button>
            </div>
        </form>
    </div>
</div>

{# Légende des rôles #}
<div class="card mt-4" style="font-size:13px;">
    <div class="card-header">
        <i class="bi bi-info-circle" style="color:var(--petrol);"></i> Rôles
    </div>
    <div style="padding:16px 20px;display:flex;flex-direction:column;gap:10px;">
        <div style="display:flex;align-items:flex-start;gap:12px;">
            {{ _self.roleBadge('ROLE_ADMIN') }}
            <span style="color:var(--text-mid);">Gérer les utilisateurs, catégories + tous les droits Contributeur</span>
        </div>
        <div style="display:flex;align-items:flex-start;gap:12px;">
            {{ _self.roleBadge('ROLE_CONTRIBUTOR') }}
            <span style="color:var(--text-mid);">Créer, modifier et supprimer recettes et ingrédients + tous les droits Visiteur</span>
        </div>
        <div style="display:flex;align-items:flex-start;gap:12px;">
            {{ _self.roleBadge('ROLE_VISITOR') }}
            <span style="color:var(--text-mid);">Consulter les recettes, utiliser les outils, cocher les étapes</span>
        </div>
    </div>
</div>

</div>

{# Données CSRF pour le JS (injectées côté serveur via data-attributes) #}
<div id="pwd-csrf-data" style="display:none;"
{% for user in users %}
     {% if user != app.user %}
     data-token-u{{ user.id }}="{{ csrf_token('user-password-' ~ user.id) }}"
     data-action-u{{ user.id }}="{{ path('app_admin_user_password', {id: user.id}) }}"
     {% endif %}
{% endfor %}
></div>

<script>
function openPasswordModal(userId, userName) {
    const csrfData = document.getElementById('pwd-csrf-data');
    const token    = csrfData.dataset['tokenU' + userId];
    const action   = csrfData.dataset['actionU' + userId];

    document.getElementById('pwd-modal-username').textContent = userName;
    document.getElementById('pwd-modal-token').value  = token;
    document.getElementById('pwd-modal-form').action  = action;
    document.getElementById('pwd-new').value     = '';
    document.getElementById('pwd-confirm').value = '';
    document.getElementById('pwd-match-msg').style.display = 'none';

    const modal = document.getElementById('pwd-modal');
    modal.style.display = 'flex';
    document.body.style.overflow = 'hidden';
    setTimeout(() => document.getElementById('pwd-new').focus(), 50);
}

function closePwdModal() {
    document.getElementById('pwd-modal').style.display = 'none';
    document.body.style.overflow = '';
}

function togglePwd(inputId, btn) {
    const input = document.getElementById(inputId);
    const icon  = btn.querySelector('i');
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'bi bi-eye-slash';
    } else {
        input.type = 'password';
        icon.className = 'bi bi-eye';
    }
}

function checkPwdMatch() {
    const newPwd  = document.getElementById('pwd-new').value;
    const confirm = document.getElementById('pwd-confirm').value;
    const msg     = document.getElementById('pwd-match-msg');
    const btn     = document.getElementById('pwd-submit-btn');

    if (confirm.length === 0) {
        msg.style.display = 'none';
        return;
    }
    if (newPwd === confirm) {
        msg.textContent = '✓ Les mots de passe correspondent';
        msg.style.color = 'var(--diff-easy)';
        msg.style.display = 'block';
        btn.disabled = false;
    } else {
        msg.textContent = '✗ Les mots de passe ne correspondent pas';
        msg.style.color = 'var(--diff-hard)';
        msg.style.display = 'block';
        btn.disabled = true;
    }
}

// Fermer avec Echap
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closePwdModal();
});
</script>

{% endblock %}

{% macro roleBadge(role) %}
    {% if role == 'ROLE_ADMIN' %}
        <span style="background:rgba(42,107,124,0.12);color:var(--petrol-dark);border-radius:20px;
                     padding:3px 10px;font-size:12px;font-weight:500;white-space:nowrap;">
            <i class="bi bi-shield-fill-check"></i> Admin
        </span>
    {% elseif role == 'ROLE_CONTRIBUTOR' %}
        <span style="background:rgba(201,124,42,0.12);color:var(--diff-medium);border-radius:20px;
                     padding:3px 10px;font-size:12px;font-weight:500;white-space:nowrap;">
            <i class="bi bi-pencil-fill"></i> Contributeur
        </span>
    {% else %}
        <span style="background:rgba(90,100,114,0.1);color:var(--text-mid);border-radius:20px;
                     padding:3px 10px;font-size:12px;font-weight:500;white-space:nowrap;">
            <i class="bi bi-eye-fill"></i> Visiteur
        </span>
    {% endif %}
{% endmacro %}