{% 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('admin_security_tokens_index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                        <i class="fas fa-key mr-2"></i> Tokens
                    </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">Tokens Suspects</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-exclamation-triangle text-orange-600 mr-3"></i>
                    {{ page_title }}
                </h1>
                <p class="mt-1 text-sm text-gray-600">{{ suspicious_tokens|length }} token(s) suspect(s) détecté(s)</p>
            </div>
        </div>
    </div>

    {# Alert Info #}
    <div class="bg-orange-50 border-l-4 border-orange-400 p-4 mb-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-orange-400 text-xl"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-orange-800">À propos des tokens suspects</h3>
                <div class="mt-2 text-sm text-orange-700">
                    <p>Les tokens suspects sont des tokens JWT qui ont été réutilisés après leur expiration. Cela peut indiquer:</p>
                    <ul class="list-disc list-inside mt-2 space-y-1">
                        <li>Une tentative d'attaque par rejeu de token</li>
                        <li>Un token volé ou compromis</li>
                        <li>Un problème de synchronisation d'horloge sur le client</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {# Suspicious Tokens List #}
    {% if suspicious_tokens is empty %}
        <div class="bg-white shadow rounded-lg">
            <div class="text-center py-12">
                <i class="fas fa-check-circle text-green-400 text-5xl mb-4"></i>
                <p class="text-gray-500 mb-2 text-lg font-medium">Aucun token suspect détecté</p>
                <p class="text-gray-400 mb-6">Tous les tokens sont sains. Continuez à surveiller régulièrement.</p>
                <a href="{{ path('admin_security_tokens_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 au Dashboard
                </a>
            </div>
        </div>
    {% else %}
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <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">Sévérité</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Token</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">Device</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tentatives</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Dernière tentative</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 token in suspicious_tokens %}
                            <tr class="hover:bg-orange-50 bg-orange-50 bg-opacity-30">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% set severity = token.expiredReuseAttempts >= 5 ? 'critical' : (token.expiredReuseAttempts >= 3 ? 'high' : 'medium') %}
                                    {% if severity == 'critical' %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                            <i class="fas fa-skull-crossbones mr-1"></i> CRITIQUE
                                        </span>
                                    {% elseif severity == 'high' %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">
                                            <i class="fas fa-exclamation-circle mr-1"></i> ÉLEVÉE
                                        </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-exclamation-triangle mr-1"></i> MOYENNE
                                        </span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-mono text-gray-900 truncate max-w-xs" title="{{ token.jti }}">
                                        {{ token.jti|slice(0, 16) }}...
                                    </div>
                                    <div class="text-xs text-gray-500">ID: #{{ token.id }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ token.user.email }}</div>
                                    <div class="text-xs text-gray-500">{{ token.user.firstName }} {{ token.user.lastName }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ token.browser|default('Unknown') }}</div>
                                    <div class="text-xs text-gray-500">{{ token.os|default('Unknown') }}</div>
                                    {% if token.ipAddress %}
                                        <div class="text-xs text-gray-500 font-mono">{{ token.ipAddress }}</div>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ token.expiredReuseAttempts >= 5 ? 'bg-red-100 text-red-800' : (token.expiredReuseAttempts >= 3 ? 'bg-orange-100 text-orange-800' : 'bg-yellow-100 text-yellow-800') }}">
                                        {{ token.expiredReuseAttempts }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if token.lastExpiredReuseAt %}
                                        <div class="text-sm text-gray-900">{{ token.lastExpiredReuseAt|date('d/m/Y') }}</div>
                                        <div class="text-xs text-gray-500">{{ token.lastExpiredReuseAt|date('H:i:s') }}</div>
                                    {% else %}
                                        <div class="text-sm text-gray-500">-</div>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if token.isRevoked %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                            <i class="fas fa-ban mr-1"></i> Révoqué
                                        </span>
                                    {% elseif token.isExpired %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                            <i class="fas fa-clock mr-1"></i> Expiré
                                        </span>
                                    {% else %}
                                        <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> Actif
                                        </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">
                                        <a href="{{ path('admin_security_tokens_jwt_show', {id: token.id}) }}"
                                           class="text-indigo-600 hover:text-indigo-900" title="Voir détails">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        {% if not token.isRevoked %}
                                            <button type="button" onclick="confirmRevoke({{ token.id }}, '{{ token.jti|e('js') }}')"
                                                    class="text-red-600 hover:text-red-900" title="Révoquer immédiatement">
                                                <i class="fas fa-ban"></i>
                                            </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        {# Actions Card #}
        <div class="mt-6 bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                    <i class="fas fa-shield-alt text-blue-500 mr-2"></i>
                    Actions Recommandées
                </h3>
                <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-lightbulb text-blue-400 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="text-sm font-medium text-blue-800">Que faire avec ces tokens suspects ?</h4>
                            <div class="mt-2 text-sm text-blue-700">
                                <ol class="list-decimal list-inside space-y-2">
                                    <li><strong>Enquêter</strong>: Examinez les détails de chaque token pour comprendre le contexte</li>
                                    <li><strong>Vérifier l'utilisateur</strong>: Contactez l'utilisateur concerné si nécessaire</li>
                                    <li><strong>Révoquer si nécessaire</strong>: Révoquezimmédiatement les tokens compromis</li>
                                    <li><strong>Surveiller</strong>: Continuez à surveiller l'activité de l'utilisateur</li>
                                    <li><strong>Documenter</strong>: Prenez note de l'incident pour référence future</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</div>

{# Hidden form for revocation #}
<form id="revokeForm" method="post" style="display: none;">
    <input type="hidden" name="_token" id="revokeToken">
    <input type="hidden" name="reason" value="Révoqué suite à détection de réutilisation suspecte">
</form>

{# Scripts #}
<script>
function confirmRevoke(id, jti) {
    if (confirm(`ATTENTION: Vous allez révoquer un token suspect.\\n\\nJTI: ${jti}\\n\\nCette action est irréversible et mettra fin immédiatement à la session de l'utilisateur.\\n\\nContinuer ?`)) {
        const form = document.getElementById('revokeForm');
        form.action = '{{ path('admin_security_tokens_jwt_revoke', {id: '__ID__'}) }}'.replace('__ID__', id);
        document.getElementById('revokeToken').value = '{{ csrf_token('revoke_jwt_') }}' + id;
        form.submit();
    }
}
</script>
{% endblock %}