{% 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_refresh_list') }}" class="text-sm font-medium text-gray-700 hover:text-indigo-600">Refresh</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">Refresh Token #{{ token.id }}</h1>
            </div>
            <div class="flex space-x-2">
                {% if not token.isRevoked %}
                    <form method="post" action="{{ path('admin_security_tokens_refresh_revoke', {id: token.id}) }}" style="display: inline;">
                        <input type="hidden" name="_token" value="{{ csrf_token('revoke_refresh_' ~ 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-purple-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>
                            <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">Consommé</dt>
                            <dd class="mt-1">
                                {% if token.consumed %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                        <i class="fas fa-check mr-1"></i> Oui
                                    </span>
                                {% else %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        <i class="fas fa-times mr-1"></i> Non
                                    </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.usedCount }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Fenêtre de rotation (min)</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ token.rotationWindowMinutes }}</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.firstUsedAt %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Première utilisation</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ token.firstUsedAt|date('d/m/Y à H:i:s') }}</dd>
                            </div>
                        {% endif %}

                        {% if token.lastUsedAt %}
                            <div>
                                <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">{{ 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>
        </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_refresh_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_refresh_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_refresh_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>
        </div>
    </div>
</div>
{% endblock %}