{% 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>
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                        <a href="{{ path('admin_security_tokens_jwt_list') }}" class="text-sm font-medium text-gray-700 hover:text-indigo-600">JWT</a>
                    </div>
                </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">#{{ token.id }}</span>
                    </div>
                </li>
            </ol>
        </nav>
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">JWT Token #{{ token.id }}</h1>
                <p class="mt-1 text-sm text-gray-600 font-mono">{{ token.jti }}</p>
            </div>
            <div class="flex space-x-2">
                {% if not token.isRevoked %}
                    <form method="post" action="{{ path('admin_security_tokens_jwt_revoke', {id: token.id}) }}" style="display: inline;">
                        <input type="hidden" name="_token" value="{{ csrf_token('revoke_jwt_' ~ token.id) }}">
                        <input type="hidden" name="reason" value="Révoqué par administrateur">
                        <button type="submit" onclick="return confirm('Révoquer ce token ?\\n\\nCette action est irréversible.')"
                                class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                            <i class="fas fa-ban mr-2"></i> Révoquer
                        </button>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {# Main Content #}
        <div class="lg:col-span-2 space-y-6">
            {# Token Info #}
            <div class="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-info-circle text-blue-500 mr-2"></i>
                        Informations du Token
                    </h3>
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <dt class="text-sm font-medium text-gray-500">JTI (JWT ID)</dt>
                            <dd class="mt-1 text-sm text-gray-900 font-mono break-all">{{ token.jti }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Statut</dt>
                            <dd class="mt-1">
                                {% if token.isRevoked %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                        <i class="fas fa-ban mr-1"></i> Révoqué
                                    </span>
                                {% elseif token.isExpired %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                        <i class="fas fa-clock mr-1"></i> Expiré
                                    </span>
                                {% else %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        <i class="fas fa-check mr-1"></i> Actif
                                    </span>
                                {% endif %}
                            </dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Nombre d'utilisations</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ token.usageCount }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Créé le</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ token.createdAt|date('d/m/Y à H:i:s') }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Expire le</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ token.expiresAt|date('d/m/Y à H:i:s') }}</dd>
                        </div>

                        {% if token.lastUsedAt %}
                            <div class="sm:col-span-2">
                                <dt class="text-sm font-medium text-gray-500">Dernière utilisation</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ token.lastUsedAt|date('d/m/Y à H:i:s') }}</dd>
                            </div>
                        {% endif %}

                        {% if token.isRevoked %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Révoqué le</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ token.revokedAt|date('d/m/Y à H:i:s') }}</dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Raison</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ token.revokedReason|default('-') }}</dd>
                            </div>
                        {% endif %}
                    </dl>
                </div>
            </div>

            {# User Info #}
            <div class="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-user text-indigo-500 mr-2"></i>
                        Utilisateur
                    </h3>
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Email</dt>
                            <dd class="mt-1 text-sm font-semibold text-gray-900">{{ token.user.email }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Nom</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ token.user.firstName }} {{ token.user.lastName }}</dd>
                        </div>
                    </dl>
                </div>
            </div>

            {# Device & Location #}
            <div class="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-laptop text-green-500 mr-2"></i>
                        Appareil & Localisation
                    </h3>
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Adresse IP</dt>
                            <dd class="mt-1 text-sm text-gray-900 font-mono">{{ token.ipAddress|default('-') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Pays / Ville</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ token.country|default('-') }} / {{ token.city|default('-') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Navigateur</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                <i class="fab fa-{{ token.browser|lower == 'chrome' ? 'chrome' : (token.browser|lower == 'firefox' ? 'firefox' : (token.browser|lower == 'safari' ? 'safari' : 'internet-explorer')) }}"></i>
                                {{ token.browser|default('Unknown') }}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Système d'exploitation</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ token.os|default('Unknown') }}</dd>
                        </div>
                        {% if token.deviceFingerprint %}
                            <div class="sm:col-span-2">
                                <dt class="text-sm font-medium text-gray-500">Device Fingerprint</dt>
                                <dd class="mt-1 text-sm text-gray-900 font-mono break-all">{{ token.deviceFingerprint }}</dd>
                            </div>
                        {% endif %}
                        {% if token.deviceName %}
                            <div class="sm:col-span-2">
                                <dt class="text-sm font-medium text-gray-500">Nom de l'appareil</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ token.deviceName }}</dd>
                            </div>
                        {% endif %}
                    </dl>
                </div>
            </div>

            {# Security Alert #}
            {% if token.expiredReuseDetected %}
                <div class="bg-orange-50 border-l-4 border-orange-400 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-orange-400 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-orange-800">Alerte de Sécurité</h3>
                            <div class="mt-2 text-sm text-orange-700">
                                <p><strong>Tentatives de réutilisation détectées: {{ token.expiredReuseAttempts }}</strong></p>
                                {% if token.lastExpiredReuseAt %}
                                    <p class="mt-1">Dernière tentative: {{ token.lastExpiredReuseAt|date('d/m/Y à H:i:s') }}</p>
                                {% endif %}
                                <p class="mt-2">Ce token expiré a été réutilisé, ce qui peut indiquer une tentative d'attaque ou un rejeu de token.</p>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>

        {# Sidebar #}
        <div class="space-y-6">
            {# Actions #}
            <div class="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-bolt text-yellow-500 mr-2"></i>
                        Actions
                    </h3>
                    <div class="space-y-3">
                        <a href="{{ path('admin_security_tokens_jwt_list') }}"
                           class="block w-full text-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 à la liste
                        </a>
                        <a href="{{ path('admin_security_tokens_index') }}"
                           class="block w-full text-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-home mr-2"></i> Dashboard
                        </a>
                        {% if token.user %}
                            <a href="{{ path('admin_security_tokens_jwt_list', {user_id: token.user.id}) }}"
                               class="block w-full text-center px-4 py-2 border border-blue-300 shadow-sm text-sm font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50">
                                <i class="fas fa-user mr-2"></i> Tokens de cet utilisateur
                            </a>
                        {% endif %}
                        {% if token.ipAddress %}
                            <a href="{{ path('admin_security_tokens_jwt_list', {ip: token.ipAddress}) }}"
                               class="block w-full text-center px-4 py-2 border border-purple-300 shadow-sm text-sm font-medium rounded-md text-purple-700 bg-white hover:bg-purple-50">
                                <i class="fas fa-network-wired mr-2"></i> Tokens de cette IP
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>

            {# Related Entities #}
            {% if token.refreshToken or token.device %}
                <div class="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-link text-gray-600 mr-2"></i>
                            Relations
                        </h3>
                        <dl class="space-y-3">
                            {% if token.refreshToken %}
                                <div>
                                    <dt class="text-xs text-gray-500">Refresh Token</dt>
                                    <dd class="text-sm">
                                        <a href="{{ path('admin_security_tokens_refresh_show', {id: token.refreshToken.id}) }}"
                                           class="text-indigo-600 hover:text-indigo-900">
                                            #{{ token.refreshToken.id }}
                                        </a>
                                    </dd>
                                </div>
                            {% endif %}
                            {% if token.device %}
                                <div>
                                    <dt class="text-xs text-gray-500">Device</dt>
                                    <dd class="text-sm text-gray-900">
                                        {{ token.device.deviceName|default('Device #' ~ token.device.id) }}
                                    </dd>
                                </div>
                            {% endif %}
                        </dl>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}