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

{% block title %}Gestion des inscriptions bêta - Admin{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('styles/pages/admin-beta.css') }}">
{% endblock %}

{% block body %}
<div class="admin-beta-container">
    <!-- Header avec titre et stats -->
    <div class="admin-header">
        <div class="admin-header-content">
            <div class="admin-title-section">
                <h1 class="admin-title">
                    <svg class="admin-icon" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" fill="#0C81E4"/>
                    </svg>
                    Gestion des inscriptions bêta
                </h1>
                <p class="admin-subtitle">Gérez les demandes d'accès à la bêta fermée de Bubul</p>
            </div>
            <a href="{{ path('app_dashboard') }}" class="btn-back">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" fill="currentColor"/>
                </svg>
                Retour au tableau de bord
            </a>
        </div>
    </div>

    <!-- Statistiques -->
    <div class="stats-grid">
        <div class="stat-card stat-total">
            <div class="stat-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" fill="currentColor"/>
                </svg>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ betaUsers|length }}</div>
                <div class="stat-label">Total d'inscriptions</div>
            </div>
        </div>

        <div class="stat-card stat-pending">
            <div class="stat-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7V7z" fill="currentColor"/>
                </svg>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ betaUsers|filter(u => u.status == 'inactive')|length }}</div>
                <div class="stat-label">En attente</div>
            </div>
        </div>

        <div class="stat-card stat-active">
            <div class="stat-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/>
                </svg>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ betaUsers|filter(u => u.status == 'active')|length }}</div>
                <div class="stat-label">Comptes actifs</div>
            </div>
        </div>
    </div>

    <!-- Tableau des utilisateurs -->
    <div class="users-card">
        <div class="users-card-header">
            <h2 class="users-card-title">Liste des inscrits</h2>
        </div>

        <div class="table-container">
            <table class="users-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Email</th>
                        <th>Date d'inscription</th>
                        <th>Statut</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in betaUsers %}
                        <tr class="user-row" data-status="{{ user.status }}">
                            <td class="user-id">#{{ user.id }}</td>
                            <td class="user-email">
                                <div class="email-cell">
                                    <span class="email-text">{{ user.email }}</span>
                                </div>
                            </td>
                            <td class="user-date">
                                <div class="date-cell">
                                    <span class="date-text">{{ user.createdAt|date('d/m/Y') }}</span>
                                    <span class="time-text">{{ user.createdAt|date('H:i') }}</span>
                                </div>
                            </td>
                            <td class="user-status">
                                {% if user.status == 'inactive' %}
                                    <span class="badge badge-pending">
                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <circle cx="12" cy="12" r="10" fill="currentColor"/>
                                        </svg>
                                        En attente
                                    </span>
                                {% elseif user.status == 'active' %}
                                    <span class="badge badge-active">
                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/>
                                        </svg>
                                        Actif
                                    </span>
                                {% endif %}
                            </td>
                            <td class="user-actions">
                                <div class="action-buttons">
                                    {% if user.status == 'inactive' %}
                                        <form method="post" action="{{ path('admin_beta_accept', {id: user.id}) }}" class="action-form">
                                            <button type="submit" class="btn-action btn-accept"
                                                    onclick="return confirm('Accepter cet utilisateur ?\n\nUn email avec un mot de passe lui sera envoyé et son compte sera activé.')">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/>
                                                </svg>
                                                Accepter
                                            </button>
                                        </form>
                                        <form method="post" action="{{ path('admin_beta_delete', {id: user.id}) }}" class="action-form">
                                            <button type="submit" class="btn-action btn-delete"
                                                    onclick="return confirm('Supprimer définitivement cet utilisateur ?\n\nAucun email ne sera envoyé.')">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="currentColor"/>
                                                </svg>
                                                Supprimer
                                            </button>
                                        </form>
                                    {% else %}
                                        <span class="active-since">
                                            Activé le {{ user.updatedAt ? user.updatedAt|date('d/m/Y') : '-' }}
                                        </span>
                                        <form method="post" action="{{ path('admin_beta_delete_complete', {id: user.id}) }}" class="action-form">
                                            <button type="submit" class="btn-action btn-delete-complete"
                                                    onclick="return confirm('ATTENTION : Suppression définitive !\n\nCette action va supprimer l\'utilisateur de :\n- Bubul\n- Moodle (si configuré)\n\nContinuer ?')">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="currentColor"/>
                                                </svg>
                                                Supprimer
                                            </button>
                                        </form>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr class="empty-row">
                            <td colspan="5">
                                <div class="empty-state">
                                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" fill="#E0E0E0"/>
                                    </svg>
                                    <h3>Aucune inscription</h3>
                                    <p>Il n'y a pas encore d'inscription à la bêta fermée.</p>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('controllers/pages/admin-beta.js') }}"></script>
{% endblock %}