{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto">
    {# Header #}
    <div class="mb-6">
        <nav class="flex mb-4" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{{ path('app_admin_security_devices_index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                        <i class="fas fa-mobile-alt mr-2"></i> Appareils
                    </a>
                </li>
                <li aria-current="page">
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                        <span class="text-sm font-medium text-gray-500">Codes d'Approbation</span>
                    </div>
                </li>
            </ol>
        </nav>
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                    <i class="fas fa-shield-alt text-purple-600 mr-3"></i>
                    {{ page_title }}
                </h1>
                <p class="mt-1 text-sm text-gray-600">{{ pagination.getTotalItemCount }} code(s) trouvé(s)</p>
            </div>
            <a href="{{ path('app_admin_security_devices_index') }}"
               class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-arrow-left mr-2"></i> Retour aux Appareils
            </a>
        </div>
    </div>

    {# Statistics Cards #}
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
        {# Total #}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            <i class="fas fa-key text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Codes</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.total|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Pending #}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white">
                            <i class="fas fa-clock text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">En Attente</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.pending|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Validated #}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                            <i class="fas fa-check-circle text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Validés</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.validated|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Expired #}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
                            <i class="fas fa-times-circle text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Expirés</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.expired|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Alert Info #}
    <div class="bg-purple-50 border-l-4 border-purple-400 p-4 mb-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-purple-400 text-xl"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-purple-800">À propos des codes d'approbation</h3>
                <div class="mt-2 text-sm text-purple-700">
                    <p>Les codes d'approbation permettent aux utilisateurs de valider un nouvel appareil. Chaque code:</p>
                    <ul class="list-disc list-inside mt-2 space-y-1">
                        <li>Est unique et composé de 6 chiffres</li>
                        <li>Expire après 15 minutes (par défaut)</li>
                        <li>Est envoyé par email à l'utilisateur</li>
                        <li>Peut être validé ou rejeté manuellement par un administrateur</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {# Filters & List #}
    <div class="bg-white shadow rounded-lg overflow-hidden">
        {# Filters #}
        <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
            <form method="get" action="{{ path('app_admin_security_devices_approval_codes') }}" class="space-y-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <div>
                        <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
                        <input type="text" name="search" id="search" value="{{ filters.search|default('') }}"
                               placeholder="Email, code, IP..."
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label for="validated" class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
                        <select name="validated" id="validated" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Tous</option>
                            <option value="0" {{ filters.validated|default('') == '0' ? 'selected' : '' }}>Non validés</option>
                            <option value="1" {{ filters.validated|default('') == '1' ? 'selected' : '' }}>Validés</option>
                        </select>
                    </div>

                    <div>
                        <label for="expired" class="block text-sm font-medium text-gray-700 mb-1">Expiration</label>
                        <select name="expired" id="expired" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Tous</option>
                            <option value="0" {{ filters.expired|default('') == '0' ? 'selected' : '' }}>Valides</option>
                            <option value="1" {{ filters.expired|default('') == '1' ? 'selected' : '' }}>Expirés</option>
                        </select>
                    </div>

                    <div class="flex items-end">
                        <label class="flex items-center">
                            <input type="checkbox" name="show_all" value="1" {{ filters.show_all|default('') == '1' ? 'checked' : '' }}
                                   class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            <span class="ml-2 text-sm text-gray-700">Afficher tout l'historique</span>
                        </label>
                    </div>
                </div>

                <div class="flex justify-between items-center">
                    <div>
                        <button type="submit"
                                class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                            <i class="fas fa-filter mr-2"></i> Filtrer
                        </button>
                        <a href="{{ path('app_admin_security_devices_approval_codes') }}"
                           class="ml-3 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-times mr-2"></i> Réinitialiser
                        </a>
                    </div>
                </div>
            </form>
        </div>

        {# List #}
        {% if pagination.getTotalItemCount == 0 %}
            <div class="text-center py-12">
                <i class="fas fa-inbox text-gray-400 text-5xl mb-4"></i>
                <p class="text-gray-500 mb-4">Aucun code d'approbation trouvé</p>
                <a href="{{ path('app_admin_security_devices_index') }}"
                   class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                    <i class="fas fa-arrow-left mr-2"></i> Retour aux Appareils
                </a>
            </div>
        {% else %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Utilisateur</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Appareil</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Code</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Créé</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Expire</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Statut</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for code in pagination %}
                            <tr class="hover:bg-gray-50 {{ code.isExpired and not code.validated ? 'bg-red-50 bg-opacity-30' : '' }}">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#{{ code.id }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ code.user.email }}</div>
                                    <div class="text-xs text-gray-500">{{ code.user.firstName }} {{ code.user.lastName }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if code.device %}
                                        <div class="text-sm text-gray-900">{{ code.device.deviceName }}</div>
                                        <div class="text-xs text-gray-500">{{ code.device.browser|default('Unknown') }}</div>
                                    {% else %}
                                        <span class="text-sm text-gray-400">-</span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-mono font-bold text-gray-900">{{ code.code|slice(0, 3) }}***</div>
                                    {% if code.ipAddress %}
                                        <div class="text-xs text-gray-500 font-mono">{{ code.ipAddress }}</div>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ code.createdAt|date('d/m/Y') }}</div>
                                    <div class="text-xs text-gray-500">{{ code.createdAt|date('H:i:s') }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ code.expiresAt|date('d/m/Y') }}</div>
                                    <div class="text-xs text-gray-500">{{ code.expiresAt|date('H:i:s') }}</div>
                                    {% if not code.validated and not code.isExpired %}
                                        <div class="text-xs text-blue-600 font-medium mt-1">
                                            {{ code.getRemainingMinutes() }} min restantes
                                        </div>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if code.validated %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            <i class="fas fa-check mr-1"></i> Validé
                                        </span>
                                        {% if code.validatedAt %}
                                            <div class="text-xs text-gray-500 mt-1">{{ code.validatedAt|date('d/m H:i') }}</div>
                                        {% endif %}
                                    {% elseif code.isExpired %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                            <i class="fas fa-times-circle mr-1"></i> Expiré
                                        </span>
                                    {% else %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                            <i class="fas fa-clock mr-1"></i> En attente
                                        </span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex justify-end space-x-2">
                                        {% if not code.validated and not code.isExpired %}
                                            <button type="button" onclick="confirmApprove({{ code.id }})"
                                                    class="text-green-600 hover:text-green-900" title="Approuver">
                                                <i class="fas fa-check-circle"></i>
                                            </button>
                                            <button type="button" onclick="confirmReject({{ code.id }})"
                                                    class="text-red-600 hover:text-red-900" title="Rejeter">
                                                <i class="fas fa-times-circle"></i>
                                            </button>
                                        {% elseif code.validated %}
                                            <span class="text-gray-400"><i class="fas fa-check"></i></span>
                                        {% else %}
                                            <span class="text-gray-400"><i class="fas fa-ban"></i></span>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {# Pagination #}
            {% if pagination.pageCount > 1 %}
                <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                Page <span class="font-medium">{{ pagination.currentPageNumber }}</span> sur <span class="font-medium">{{ pagination.pageCount }}</span>
                            </p>
                        </div>
                        <div>
                            {{ knp_pagination_render(pagination) }}
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>
</div>

{# Hidden forms for actions #}
<form id="approveForm" method="post" style="display: none;">
    <input type="hidden" name="_token" id="approveToken">
</form>

<form id="rejectForm" method="post" style="display: none;">
    <input type="hidden" name="_token" id="rejectToken">
</form>

{# Scripts #}
<script>
function confirmApprove(id) {
    if (confirm('Approuver ce code d\'approbation ?\n\nL\'appareil associé sera automatiquement approuvé.')) {
        const form = document.getElementById('approveForm');
        form.action = '{{ path('app_admin_security_devices_approval_approve', {id: '__ID__'}) }}'.replace('__ID__', id);
        document.getElementById('approveToken').value = '{{ csrf_token('approve_code_') }}' + id;
        form.submit();
    }
}

function confirmReject(id) {
    if (confirm('ATTENTION: Vous allez rejeter ce code d\'approbation.\n\nLe code sera supprimé et l\'utilisateur devra en demander un nouveau.\n\nContinuer ?')) {
        const form = document.getElementById('rejectForm');
        form.action = '{{ path('app_admin_security_devices_approval_reject', {id: '__ID__'}) }}'.replace('__ID__', id);
        document.getElementById('rejectToken').value = '{{ csrf_token('reject_code_') }}' + id;
        form.submit();
    }
}
</script>
{% endblock %}