{% 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 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">Analyse</span>
                    </div>
                </li>
            </ol>
        </nav>
        <h1 class="text-3xl font-bold text-gray-900 flex items-center">
            <i class="fas fa-chart-bar text-indigo-600 mr-3"></i>
            {{ page_title }}
        </h1>
        <p class="mt-1 text-sm text-gray-600">Analyse et statistiques des blocages IP</p>
    </div>

    {# Statistiques globales #}
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-5 mb-6">
        {# Total #}
        <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-gray-500 text-white">
                            <i class="fas fa-database text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-xs font-medium text-gray-500 truncate">Total</dt>
                            <dd class="text-xl font-semibold text-gray-900">{{ stats.total|default(0) }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Actifs #}
        <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">
                            <i class="fas fa-check-circle text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-xs font-medium text-gray-500 truncate">Actifs</dt>
                            <dd class="text-xl font-semibold text-gray-900">{{ stats.active|default(0) }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Temporaires #}
        <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-yellow-500 text-white">
                            <i class="fas fa-clock text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-xs font-medium text-gray-500 truncate">Temporaires</dt>
                            <dd class="text-xl font-semibold text-gray-900">{{ stats.temporary|default(0) }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Permanents #}
        <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">
                            <i class="fas fa-lock text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-xs font-medium text-gray-500 truncate">Permanents</dt>
                            <dd class="text-xl font-semibold text-gray-900">{{ stats.permanent|default(0) }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Aujourd'hui #}
        <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">
                            <i class="fas fa-calendar-day text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-xs font-medium text-gray-500 truncate">Aujourd'hui</dt>
                            <dd class="text-xl font-semibold text-gray-900">{{ stats.blocked_today|default(0) }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {# Graphique et tendances #}
        <div class="lg:col-span-2 space-y-6">
            {# Blocages dans le temps #}
            <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-chart-line text-blue-500 mr-2"></i>
                        Blocages sur les 30 derniers jours
                    </h3>
                    <div class="h-64">
                        <canvas id="blocksOverTimeChart"></canvas>
                    </div>
                </div>
            </div>

            {# Top pays (détaillé) #}
            <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>
                        Top 20 Pays
                    </h3>

                    {% if top_countries is empty %}
                        <p class="text-sm text-gray-500 text-center py-4">Aucune donnée disponible</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">#</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Pays</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Blocages</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Pourcentage</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    {% set total_count = 0 %}
                                    {% for item in top_countries %}
                                        {% set total_count = total_count + item.blockCount %}
                                    {% endfor %}

                                    {% for item in top_countries %}
                                        {% set percentage = (item.blockCount / total_count * 100)|round(1) %}
                                        <tr>
                                            <td class="px-4 py-2 text-sm text-gray-500">{{ loop.index }}</td>
                                            <td class="px-4 py-2 text-sm font-medium text-gray-900">{{ item.country ?? 'Inconnu' }}</td>
                                            <td class="px-4 py-2 text-sm text-gray-900">{{ item.blockCount }}</td>
                                            <td class="px-4 py-2">
                                                <div class="flex items-center">
                                                    <div class="w-full bg-gray-200 rounded-full h-2 mr-2">
                                                        <div class="bg-indigo-600 h-2 rounded-full" style="width: {{ percentage }}%"></div>
                                                    </div>
                                                    <span class="text-sm text-gray-600">{{ percentage }}%</span>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        {# Sidebar - Insights #}
        <div class="space-y-6">
            {# Périodes d'activité #}
            <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-week text-orange-500 mr-2"></i>
                        Périodes d'Activité
                    </h3>
                    <dl class="space-y-3">
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Aujourd'hui</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ stats.blocked_today|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Cette semaine</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ stats.blocked_this_week|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Ce mois</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ stats.blocked_this_month|default(0) }}</dd>
                        </div>
                        <div class="border-t border-gray-200 pt-3 mt-3">
                            <div class="flex justify-between">
                                <dt class="text-sm text-gray-500">Inactifs (total)</dt>
                                <dd class="text-sm font-semibold text-gray-900">{{ stats.inactive|default(0) }}</dd>
                            </div>
                        </div>
                    </dl>
                </div>
            </div>

            {# Taux de 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-percentage text-purple-500 mr-2"></i>
                        Ratios
                    </h3>
                    {% set total = stats.active|default(0) %}
                    {% if total > 0 %}
                        <dl class="space-y-3">
                            <div>
                                <dt class="text-sm text-gray-500 mb-2">Temporaires vs Permanents</dt>
                                <dd>
                                    <div class="w-full bg-gray-200 rounded-full h-6">
                                        {% set temp_percentage = (stats.temporary / total * 100)|round %}
                                        <div class="flex h-6 rounded-full overflow-hidden">
                                            <div class="bg-yellow-500 flex items-center justify-center text-xs text-white" style="width: {{ temp_percentage }}%">
                                                {% if temp_percentage > 15 %}{{ temp_percentage }}%{% endif %}
                                            </div>
                                            <div class="bg-red-500 flex items-center justify-center text-xs text-white" style="width: {{ (100 - temp_percentage) }}%">
                                                {% if (100 - temp_percentage) > 15 %}{{ (100 - temp_percentage) }}%{% endif %}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex justify-between mt-1 text-xs text-gray-500">
                                        <span>Temporaires: {{ stats.temporary }}</span>
                                        <span>Permanents: {{ stats.permanent }}</span>
                                    </div>
                                </dd>
                            </div>
                        </dl>
                    {% else %}
                        <p class="text-sm text-gray-500">Aucune donnée</p>
                    {% endif %}
                </div>
            </div>

            {# Recommandations #}
            <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-lightbulb text-blue-400"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-blue-800">Recommandations</h3>
                        <div class="mt-2 text-sm text-blue-700">
                            <ul class="list-disc list-inside space-y-1">
                                {% if stats.blocked_today > 10 %}
                                    <li>Activité de blocage élevée aujourd'hui ({{ stats.blocked_today }})</li>
                                {% endif %}
                                {% if stats.permanent > stats.temporary %}
                                    <li>Plus de blocages permanents que temporaires</li>
                                {% endif %}
                                {% if stats.inactive > stats.active %}
                                    <li>Envisagez un nettoyage de la base de données</li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# Chart.js #}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
// Données pour le graphique
const blocksData = {{ blocks_over_time|json_encode|raw }};

// Graphique des blocages dans le temps
const ctx = document.getElementById('blocksOverTimeChart');
if (ctx) {
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: blocksData.map(d => {
                const date = new Date(d.date);
                return date.toLocaleDateString('fr-FR', {month: 'short', day: 'numeric'});
            }),
            datasets: [{
                label: 'Blocages',
                data: blocksData.map(d => d.count),
                borderColor: 'rgb(79, 70, 229)',
                backgroundColor: 'rgba(79, 70, 229, 0.1)',
                fill: true,
                tension: 0.3
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0
                    }
                }
            }
        }
    });
}
</script>
{% endblock %}