{% 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_ip_validations_index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                        <i class="fas fa-network-wired mr-2"></i> Codes Validation IP
                    </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">#{{ code.id }}</span>
                    </div>
                </li>
            </ol>
        </nav>
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Code Validation IP #{{ code.id }}</h1>
                <p class="mt-1 text-sm text-gray-600">
                    {% if code.validated %}
                        <span class="text-green-600 font-medium"><i class="fas fa-check-circle mr-1"></i> Code validé</span>
                    {% elseif code.isExpired %}
                        <span class="text-red-600 font-medium"><i class="fas fa-times-circle mr-1"></i> Code expiré</span>
                    {% else %}
                        <span class="text-yellow-600 font-medium"><i class="fas fa-clock mr-1"></i> Code en attente</span>
                    {% endif %}
                </p>
            </div>
            <div class="flex space-x-2">
                {% if not code.validated %}
                    {% if not code.isExpired %}
                        <form method="post" action="{{ path('admin_security_ip_validations_resend', {id: code.id}) }}" style="display: inline;">
                            <input type="hidden" name="_token" value="{{ csrf_token('resend_code_' ~ code.id) }}">
                            <button type="submit" onclick="return confirm('Renvoyer le code par email ?')"
                                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                                <i class="fas fa-paper-plane mr-2"></i> Renvoyer Code
                            </button>
                        </form>
                        <form method="post" action="{{ path('admin_security_ip_validations_approve', {id: code.id}) }}" style="display: inline;">
                            <input type="hidden" name="_token" value="{{ csrf_token('approve_code_' ~ code.id) }}">
                            <button type="submit" onclick="return confirm('Approuver manuellement cette IP ?\\n\\nL\'utilisateur pourra se connecter sans entrer le code.')"
                                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                                <i class="fas fa-check-circle mr-2"></i> Approuver
                            </button>
                        </form>
                    {% endif %}
                    <form method="post" action="{{ path('admin_security_ip_validations_invalidate', {id: code.id}) }}" style="display: inline;">
                        <input type="hidden" name="_token" value="{{ csrf_token('invalidate_code_' ~ code.id) }}">
                        <button type="submit" onclick="return confirm('Invalider ce code ?\\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> Invalider
                        </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">
            {# Code 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-barcode text-indigo-500 mr-2"></i>
                        Informations du Code
                    </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">Code de validation</dt>
                            <dd class="mt-1 text-lg font-mono font-bold text-gray-900">{{ code.code }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Statut</dt>
                            <dd class="mt-1">
                                {% if code.validated %}
                                    <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> Validé
                                    </span>
                                {% elseif code.isExpired %}
                                    <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-times-circle 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-yellow-100 text-yellow-800">
                                        <i class="fas fa-clock mr-1"></i> En attente
                                    </span>
                                {% endif %}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Créé le</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ code.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">{{ code.expiresAt|date('d/m/Y à H:i:s') }}</dd>
                            {% if not code.validated and not code.isExpired %}
                                <div class="text-xs text-blue-600 font-medium mt-1">
                                    <i class="fas fa-hourglass-half mr-1"></i>
                                    {{ code.getRemainingMinutes() }} minutes restantes
                                </div>
                            {% endif %}
                        </div>
                        {% if code.validated and code.validatedAt %}
                            <div class="sm:col-span-2">
                                <dt class="text-sm font-medium text-gray-500">Validé le</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ code.validatedAt|date('d/m/Y à H:i:s') }}</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-blue-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">{{ code.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">{{ code.user.firstName }} {{ code.user.lastName }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Validation IP activée</dt>
                            <dd class="mt-1">
                                {% if code.user.isIpValidationEnabled %}
                                    <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> Oui
                                    </span>
                                {% else %}
                                    <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-times mr-1"></i> Non
                                    </span>
                                {% endif %}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Statut du compte</dt>
                            <dd class="mt-1">
                                {% if code.user.isActive %}
                                    <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>
                                {% else %}
                                    <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> Inactif
                                    </span>
                                {% endif %}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>

            {# IP & Location 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-globe text-green-500 mr-2"></i>
                        Adresse IP & 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 font-mono font-semibold text-gray-900">{{ code.ipAddress }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Pays</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ code.country|default('-') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Ville</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ code.city|default('-') }}</dd>
                        </div>
                        {% if code.geoLocationData %}
                            <div class="sm:col-span-2">
                                <dt class="text-sm font-medium text-gray-500">Données de géolocalisation</dt>
                                <dd class="mt-1 text-sm text-gray-900">
                                    <pre class="bg-gray-50 p-3 rounded text-xs overflow-x-auto">{{ code.geoLocationData|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                                </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_ip_validations_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-arrow-left mr-2"></i> Retour à la liste
                        </a>
                        {% if code.user %}
                            <a href="{{ path('admin_security_ip_validations_index', {user_id: code.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> Codes de cet utilisateur
                            </a>
                        {% endif %}
                        {% if code.ipAddress %}
                            <a href="{{ path('admin_security_ip_validations_index', {ip: code.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> Codes de cette IP
                            </a>
                        {% endif %}
                        {% if code.country %}
                            <a href="{{ path('admin_security_ip_validations_index', {country: code.country}) }}"
                               class="block w-full text-center px-4 py-2 border border-green-300 shadow-sm text-sm font-medium rounded-md text-green-700 bg-white hover:bg-green-50">
                                <i class="fas fa-globe mr-2"></i> Codes de {{ code.country }}
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>

            {# Status Card #}
            <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-indigo-500 mr-2"></i>
                        Informations
                    </h3>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Validé</span>
                            <span class="text-sm font-semibold {{ code.validated ? 'text-green-600' : 'text-gray-600' }}">
                                {{ code.validated ? 'Oui' : 'Non' }}
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Expiré</span>
                            <span class="text-sm font-semibold {{ code.isExpired ? 'text-red-600' : 'text-gray-600' }}">
                                {{ code.isExpired ? 'Oui' : 'Non' }}
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Valide</span>
                            <span class="text-sm font-semibold {{ code.isValid ? 'text-green-600' : 'text-red-600' }}">
                                {{ code.isValid ? 'Oui' : 'Non' }}
                            </span>
                        </div>
                        {% if not code.validated and not code.isExpired %}
                            <div class="flex justify-between items-center pt-4 border-t border-gray-200">
                                <span class="text-sm text-gray-500">Temps restant</span>
                                <span class="text-sm font-semibold text-blue-600">
                                    {{ code.getRemainingMinutes() }} min
                                </span>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            {# Info Card #}
            <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-info-circle text-blue-400 text-xl"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-blue-800">À propos des codes de validation IP</h3>
                        <div class="mt-2 text-sm text-blue-700">
                            <p>Les codes de validation IP sont utilisés pour vérifier les connexions depuis de nouvelles adresses IP.</p>
                            <ul class="list-disc list-inside mt-2 space-y-1">
                                <li>Validité: 15 minutes par défaut</li>
                                <li>Code unique de 10 caractères</li>
                                <li>Envoyé par email à l'utilisateur</li>
                                <li>Peut être approuvé manuellement</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}