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

{% block title %}Gestion des utilisateurs - Super Admin{% endblock %}
{% block breadcrumb %}Super Admin / Utilisateurs{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
    <style>
        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .stat-card .stat-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: white;
        }
        .stat-card .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: #1e293b;
            line-height: 1;
        }
        .stat-card .stat-label {
            font-size: 0.8rem;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .badge-role {
            font-size: 0.7rem;
            padding: 0.3em 0.6em;
        }
        .user-sites-list {
            font-size: 0.8rem;
            color: #64748b;
            max-width: 250px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="mb-4">
        <h2 style="font-size: 1.8rem; font-weight: 700; color: #1e293b;">
            <i class="fas fa-users" style="color: var(--colorTheme);"></i>
            Gestion des utilisateurs
        </h2>
        <p style="color: #64748b;">Vue globale de tous les utilisateurs de la plateforme</p>
    </div>

    {# Flash messages #}
    {% for message in app.flashes('success') %}
        <div class="alert alert-success alert-dismissible fade show">
            <i class="fas fa-check-circle me-2"></i>{{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}
    {% for message in app.flashes('error') %}
        <div class="alert alert-danger alert-dismissible fade show">
            <i class="fas fa-exclamation-circle me-2"></i>{{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}

    {# Statistiques #}
    <div class="row mb-4">
        <div class="col-md-3 mb-3">
            <div class="stat-card">
                <div class="stat-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
                    <i class="fas fa-users"></i>
                </div>
                <div>
                    <div class="stat-value">{{ stats.total }}</div>
                    <div class="stat-label">Total utilisateurs</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="stat-card">
                <div class="stat-icon" style="background: linear-gradient(135deg, #11998e, #38ef7d);">
                    <i class="fas fa-user-check"></i>
                </div>
                <div>
                    <div class="stat-value">{{ stats.active }}</div>
                    <div class="stat-label">Actifs</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="stat-card">
                <div class="stat-icon" style="background: linear-gradient(135deg, #eb3349, #f45c43);">
                    <i class="fas fa-user-slash"></i>
                </div>
                <div>
                    <div class="stat-value">{{ stats.inactive }}</div>
                    <div class="stat-label">Inactifs</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="stat-card">
                <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
                    <i class="fas fa-crown"></i>
                </div>
                <div>
                    <div class="stat-value">{{ stats.superAdmins }}</div>
                    <div class="stat-label">Super Admins</div>
                </div>
            </div>
        </div>
    </div>

    {# Tableau des utilisateurs #}
    <div class="card" style="border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
        <div class="card-header" style="background: white; border-radius: 12px 12px 0 0; padding: 1.5rem;">
            <h5 class="mb-0" style="font-weight: 700; color: #1e293b;">
                <i class="fas fa-list me-2" style="color: var(--colorTheme);"></i>
                Liste des utilisateurs
            </h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="usersTable" class="table table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>Utilisateur</th>
                            <th>Email</th>
                            <th>Rôle</th>
                            <th>Statut</th>
                            <th>Inscription</th>
                            <th>Sites</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                            <tr>
                                <td>
                                    <div style="font-weight: 600; color: #1e293b;">
                                        {{ user.firstname ?? '' }} {{ user.lastname ?? '' }}
                                    </div>
                                    <small class="text-muted">{{ user.username ?? '' }}</small>
                                </td>
                                <td>{{ user.email }}</td>
                                <td>
                                    {% set roles = user.roles|json_encode %}
                                    {% if 'ROLE_SUPER_ADMIN' in roles %}
                                        <span class="badge bg-danger badge-role">Super Admin</span>
                                    {% else %}
                                        <span class="badge bg-secondary badge-role">Utilisateur</span>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    {% if user.active %}
                                        <span class="badge bg-success"><i class="fas fa-circle" style="font-size: 0.5rem;"></i> Actif</span>
                                    {% else %}
                                        <span class="badge bg-secondary"><i class="fas fa-circle" style="font-size: 0.5rem;"></i> Inactif</span>
                                    {% endif %}
                                </td>
                                <td class="text-center" data-order="{{ user.createdAt ? user.createdAt|date('Y-m-d') : '0000-00-00' }}">
                                    <small>{{ user.createdAt ? user.createdAt|date('d/m/Y') : 'N/A' }}</small>
                                </td>
                                <td>
                                    {% if user.sitesCount > 0 %}
                                        <span class="badge bg-primary">{{ user.sitesCount }}</span>
                                        <div class="user-sites-list" title="{{ user.siteNames }}">
                                            {{ user.siteNames }}
                                        </div>
                                    {% else %}
                                        <span class="badge bg-light text-muted">0</span>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    <div class="btn-group" role="group">
                                        {# Toggle actif/inactif #}
                                        <form action="{{ path('super_admin_user_toggle_active', {id: user.id}) }}" method="POST" style="display: inline;">
                                            {% if user.active %}
                                                <button type="submit" class="btn btn-sm btn-outline-warning" title="Désactiver">
                                                    <i class="fas fa-ban"></i>
                                                </button>
                                            {% else %}
                                                <button type="submit" class="btn btn-sm btn-outline-success" title="Activer">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                            {% endif %}
                                        </form>
                                        {# Supprimer #}
                                        <button type="button"
                                           class="btn btn-sm btn-outline-danger"
                                           data-bs-toggle="modal"
                                           data-bs-target="#deleteUserModal{{ user.id }}"
                                           title="Supprimer définitivement">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {# Modales de confirmation de suppression #}
    {% for user in users %}
        <div class="modal fade" id="deleteUserModal{{ user.id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-danger text-white">
                        <h5 class="modal-title">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Supprimer l'utilisateur
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            <strong>Attention !</strong> Cette action est irréversible.
                        </div>
                        <p>Supprimer l'utilisateur <strong>{{ user.email }}</strong> ?</p>
                        {% if user.sitesCount > 0 %}
                            <div class="alert alert-warning">
                                <i class="fas fa-info-circle me-2"></i>
                                Cet utilisateur est lié à <strong>{{ user.sitesCount }} site(s)</strong>. Les liens seront supprimés.
                            </div>
                        {% endif %}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i> Annuler
                        </button>
                        <form action="{{ path('super_admin_user_delete', {id: user.id}) }}" method="POST" style="display: inline;">
                            <button type="submit" class="btn btn-danger">
                                <i class="fas fa-trash me-1"></i> Supprimer
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#usersTable').DataTable({
                responsive: true,
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json'
                },
                order: [[4, 'desc']],
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
                columnDefs: [
                    { targets: 6, orderable: false, searchable: false }
                ]
            });
        });
    </script>
{% endblock %}