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

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

{% block content %}
<div class="max-w-7xl mx-auto">
    {# En-tête #}
    <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_blocks_index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                        <i class="fas fa-shield-alt mr-2"></i> IP Bloquées
                    </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_ip_blocks_list') }}" class="text-sm font-medium text-gray-700 hover:text-indigo-600">Liste</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">{{ ipBlock.ipAddress }}</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 font-mono">
                    {{ ipBlock.ipAddress }}
                </h1>
                <p class="mt-1 text-sm text-gray-600">
                    Bloqué le {{ ipBlock.blockedAt|date('d/m/Y à H:i') }}
                </p>
            </div>
            <div class="flex space-x-2">
                {% if ipBlock.isActive %}
                    <form method="post" action="{{ path('admin_security_ip_blocks_unlock', {id: ipBlock.id}) }}" style="display: inline;">
                        <input type="hidden" name="_token" value="{{ csrf_token('unlock_ip_' ~ ipBlock.id) }}">
                        <button type="submit"
                                onclick="return confirm('Voulez-vous débloquer cette IP ?')"
                                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-unlock mr-2"></i> Débloquer
                        </button>
                    </form>
                    {% if ipBlock.isTemporary %}
                        <form method="post" action="{{ path('admin_security_ip_blocks_make_permanent', {id: ipBlock.id}) }}" style="display: inline;">
                            <input type="hidden" name="_token" value="{{ csrf_token('make_permanent_' ~ ipBlock.id) }}">
                            <button type="submit"
                                    onclick="return confirm('Rendre ce blocage permanent ?')"
                                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-orange-600 hover:bg-orange-700">
                                <i class="fas fa-lock mr-2"></i> Rendre Permanent
                            </button>
                        </form>
                    {% endif %}
                {% endif %}
                <form method="post" action="{{ path('admin_security_ip_blocks_delete', {id: ipBlock.id}) }}" style="display: inline;">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete_ip_' ~ ipBlock.id) }}">
                    <button type="submit"
                            onclick="return confirm('Supprimer ce blocage ?\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-trash mr-2"></i> Supprimer
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {# Informations principales #}
        <div class="lg:col-span-2 space-y-6">
            {# Détails du blocage #}
            <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 Blocage
                    </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 font-semibold">{{ ipBlock.ipAddress }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Type de blocage</dt>
                            <dd class="mt-1">
                                {% if ipBlock.isPermanent %}
                                    <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-lock mr-1"></i> Permanent
                                    </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> Temporaire
                                    </span>
                                {% endif %}
                            </dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Statut</dt>
                            <dd class="mt-1">
                                {% if ipBlock.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-gray-100 text-gray-800">
                                        <i class="fas fa-times mr-1"></i> Inactif
                                    </span>
                                {% endif %}
                            </dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Nombre de tentatives</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ ipBlock.attemptCount }}</dd>
                        </div>

                        <div class="sm:col-span-2">
                            <dt class="text-sm font-medium text-gray-500">Raison</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ ipBlock.reason }}</dd>
                        </div>
                    </dl>
                </div>
            </div>

            {# Dates et Délais #}
            <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-calendar text-green-500 mr-2"></i>
                        Dates et Délais
                    </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">Bloqué le</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ ipBlock.blockedAt|date('d/m/Y à H:i:s') }}</dd>
                        </div>

                        {% if ipBlock.isPermanent %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Expiration</dt>
                                <dd class="mt-1 text-sm text-gray-900">Permanent (aucune expiration)</dd>
                            </div>
                        {% elseif ipBlock.expiresAt %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Expire le</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ ipBlock.expiresAt|date('d/m/Y à H:i:s') }}</dd>
                            </div>

                            <div>
                                <dt class="text-sm font-medium text-gray-500">Temps restant</dt>
                                <dd class="mt-1">
                                    {% if ipBlock.isExpired %}
                                        <span class="text-sm text-red-600 font-semibold">Expiré</span>
                                    {% else %}
                                        <span class="text-sm text-green-600 font-semibold">{{ ipBlock.remainingMinutes }} minutes</span>
                                    {% endif %}
                                </dd>
                            </div>
                        {% endif %}

                        {% if ipBlock.blockedBy %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Bloqué par</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ ipBlock.blockedBy.email }}</dd>
                            </div>
                        {% endif %}

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

                            {% if ipBlock.unlockedBy %}
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Débloqué par</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ ipBlock.unlockedBy.email }}</dd>
                                </div>
                            {% endif %}
                        {% endif %}
                    </dl>
                </div>
            </div>

            {# Tentatives de connexion liées #}
            <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-sign-in-alt text-orange-500 mr-2"></i>
                        Tentatives de Connexion (10 dernières)
                    </h3>

                    {% if login_attempts is empty %}
                        <p class="text-sm text-gray-500 text-center py-4">Aucune tentative enregistrée</p>
                    {% 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-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Résultat</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    {% for attempt in login_attempts %}
                                        <tr>
                                            <td class="px-4 py-2 text-sm text-gray-900">{{ attempt.email }}</td>
                                            <td class="px-4 py-2">
                                                {% if attempt.isSuccessful %}
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                        Succès
                                                    </span>
                                                {% else %}
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                                        Échec
                                                    </span>
                                                {% endif %}
                                            </td>
                                            <td class="px-4 py-2 text-sm text-gray-500">{{ attempt.attemptedAt|date('d/m/Y H:i') }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            </div>

            {# Requêtes HTTP liées #}
            <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-network-wired text-purple-500 mr-2"></i>
                        Requêtes HTTP (10 dernières)
                    </h3>

                    {% if http_requests is empty %}
                        <p class="text-sm text-gray-500 text-center py-4">Aucune requête enregistrée</p>
                    {% 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-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Méthode</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">URI</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    {% for request in http_requests %}
                                        <tr>
                                            <td class="px-4 py-2 text-sm font-mono text-gray-900">{{ request.method }}</td>
                                            <td class="px-4 py-2 text-sm text-gray-900 max-w-xs truncate">{{ request.requestUri }}</td>
                                            <td class="px-4 py-2 text-sm text-gray-500">{{ request.responseStatus }}</td>
                                            <td class="px-4 py-2 text-sm text-gray-500">{{ request.requestedAt|date('d/m/Y H:i') }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        {# Sidebar #}
        <div class="space-y-6">
            {# Géolocalisation #}
            <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-map-marker-alt text-red-500 mr-2"></i>
                        Géolocalisation
                    </h3>
                    <dl class="space-y-3">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Pays</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ ipBlock.country ?? 'Inconnu' }}</dd>
                        </div>
                        {% if ipBlock.city %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Ville</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ ipBlock.city }}</dd>
                            </div>
                        {% endif %}
                        {% if ipBlock.isp %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Fournisseur (ISP)</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ ipBlock.isp }}</dd>
                            </div>
                        {% endif %}
                    </dl>
                </div>
            </div>

            {# Métadonnées #}
            {% if ipBlock.metadata %}
                <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-database text-gray-600 mr-2"></i>
                            Métadonnées
                        </h3>
                        <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto">{{ ipBlock.metadata|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                    </div>
                </div>
            {% endif %}

            {# Actions rapides #}
            <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_blocks_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_ip_blocks_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 IP
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}