{% 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">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                    <svg class="w-8 h-8 text-indigo-600 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
                    </svg>
                    {{ page_title }}
                </h1>
                <p class="mt-1 text-sm text-gray-600">Répartition géographique des accès au portail</p>
            </div>
            {# Filtre période #}
            <div class="flex items-center space-x-2">
                <span class="text-sm text-gray-500">Période :</span>
                {% for value, label in {'7': '7 jours', '30': '30 jours', '90': '90 jours', 'all': 'Tout'} %}
                    <a href="{{ path('admin_security_ip_visualisation_index', {period: value}) }}"
                       class="px-3 py-1.5 text-sm font-medium rounded-md {{ current_period == value ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50' }}">
                        {{ label }}
                    </a>
                {% endfor %}
            </div>
        </div>
    </div>

    {# Statistiques globales #}
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582" />
                            </svg>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Requêtes</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.total_requests|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
                            </svg>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">IPs Uniques</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.unique_ips|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5" />
                            </svg>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Pays</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ countries|length }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                            </svg>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Suspectes</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.suspicious_requests|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {# Répartition par pays #}
        <div class="lg:col-span-2">
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">Répartition par pays</h2>
                </div>
                <div class="p-6">
                    {% if countries|length > 0 %}
                        <div class="space-y-3">
                            {% for entry in countries %}
                                {% set percentage = total_requests > 0 ? (entry.request_count / total_requests * 100) : 0 %}
                                <a href="{{ path('admin_security_ip_visualisation_country', {country: entry.country, period: current_period}) }}"
                                   class="block hover:bg-gray-50 rounded-lg p-3 -mx-3 transition duration-150">
                                    <div class="flex items-center justify-between mb-1">
                                        <div class="flex items-center space-x-3">
                                            <span class="text-sm font-medium text-gray-900">{{ entry.country }}</span>
                                            <span class="text-xs text-gray-500">{{ entry.unique_ips }} IP{{ entry.unique_ips > 1 ? 's' : '' }}</span>
                                        </div>
                                        <div class="flex items-center space-x-2">
                                            <span class="text-sm font-semibold text-gray-700">{{ entry.request_count|number_format(0, ',', ' ') }}</span>
                                            <span class="text-xs text-gray-400">({{ percentage|number_format(1) }}%)</span>
                                        </div>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-indigo-600 h-2 rounded-full transition-all duration-300" style="width: {{ percentage }}%"></div>
                                    </div>
                                </a>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-gray-500 text-center py-8">Aucune donnée disponible pour cette période.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        {# Top IPs #}
        <div>
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">Top IPs</h2>
                </div>
                <div class="divide-y divide-gray-200">
                    {% if top_ips|length > 0 %}
                        {% for ip in top_ips %}
                            <a href="{{ path('admin_security_ip_visualisation_ip', {ipAddress: ip.ipAddress}) }}"
                               class="flex items-center justify-between px-6 py-3 hover:bg-gray-50 transition duration-150">
                                <div>
                                    <p class="text-sm font-mono font-medium text-gray-900">{{ ip.ipAddress }}</p>
                                    <p class="text-xs text-gray-500">{{ ip.country|default('Inconnu') }}{% if ip.city %} - {{ ip.city }}{% endif %}</p>
                                </div>
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                                    {{ ip.request_count }}
                                </span>
                            </a>
                        {% endfor %}
                    {% else %}
                        <p class="text-gray-500 text-center py-8">Aucune donnée.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}