{% 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">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                    <i class="fas fa-network-wired text-blue-600 mr-3"></i>
                    {{ page_title }}
                </h1>
                <p class="mt-1 text-sm text-gray-600">{{ pagination.getTotalItemCount }} code(s) trouvé(s)</p>
            </div>
        </div>
    </div>

    {# Statistics Cards #}
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 mb-8">
        {# Total Codes #}
        <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">
                            <i class="fas fa-barcode text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Codes</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.total|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="font-medium text-indigo-600">{{ stats.created_today|default(0) }}</span>
                    <span class="text-gray-500">créé(s) aujourd'hui</span>
                </div>
            </div>
        </div>

        {# Active/Pending #}
        <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-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">En Attente</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.active|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm text-gray-500">
                    Non validés, non expirés
                </div>
            </div>
        </div>

        {# Validated #}
        <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-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Validés</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.validated|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="font-medium text-green-600">{{ stats.success_rate|default(0) }}%</span>
                    <span class="text-gray-500">taux de succès</span>
                </div>
            </div>
        </div>

        {# Expired #}
        <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-times-circle text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Expirés</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.expired|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm text-gray-500">
                    Nettoyage recommandé
                </div>
            </div>
        </div>

        {# Unique Users #}
        <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-purple-500 text-white">
                            <i class="fas fa-users text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Utilisateurs</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.unique_users|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm text-gray-500">
                    Utilisateurs uniques
                </div>
            </div>
        </div>

        {# Unique IPs #}
        <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-globe text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">IPs / Pays</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.unique_ips|default(0) }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="font-medium text-blue-600">{{ stats.unique_countries|default(0) }}</span>
                    <span class="text-gray-500">pays</span>
                </div>
            </div>
        </div>
    </div>

    {# Chart #}
    <div class="bg-white shadow rounded-lg mb-8">
        <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-indigo-500 mr-2"></i>
                Évolution des Codes (30 derniers jours)
            </h3>
            <div class="h-64">
                <canvas id="codesChart"></canvas>
            </div>
        </div>
    </div>

    {# Filters & List #}
    <div class="bg-white shadow rounded-lg overflow-hidden">
        {# Filters #}
        <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
            <form method="get" action="{{ path('admin_security_ip_validations_index') }}" data-controller="form-submit" class="space-y-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <div>
                        <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
                        <input type="text" name="search" id="search" value="{{ filters.search|default('') }}"
                               placeholder="Email, IP, code..."
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
                        <select name="status" id="status" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Tous</option>
                            <option value="pending" {{ filters.status|default('') == 'pending' ? 'selected' : '' }}>En attente</option>
                            <option value="validated" {{ filters.status|default('') == 'validated' ? 'selected' : '' }}>Validés</option>
                            <option value="expired" {{ filters.status|default('') == 'expired' ? 'selected' : '' }}>Expirés</option>
                        </select>
                    </div>

                    <div>
                        <label for="country" class="block text-sm font-medium text-gray-700 mb-1">Pays</label>
                        <select name="country" id="country" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Tous</option>
                            {% for c in countries %}
                                <option value="{{ c }}" {{ filters.country|default('') == c ? 'selected' : '' }}>{{ c }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div>
                        <label for="city" class="block text-sm font-medium text-gray-700 mb-1">Ville</label>
                        <select name="city" id="city" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Toutes</option>
                            {% for c in cities %}
                                <option value="{{ c }}" {{ filters.city|default('') == c ? 'selected' : '' }}>{{ c }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div>
                        <label for="dateFrom" class="block text-sm font-medium text-gray-700 mb-1">Date début</label>
                        <input type="date" name="dateFrom" id="dateFrom" value="{{ filters.dateFrom|default('') }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label for="dateTo" class="block text-sm font-medium text-gray-700 mb-1">Date fin</label>
                        <input type="date" name="dateTo" id="dateTo" value="{{ filters.dateTo|default('') }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>
                </div>

                <div class="flex justify-between items-center">
                    <div>
                        <button type="submit" data-form-submit-target="submit"
                                class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                            <i class="fas fa-filter mr-2"></i>
                            <span data-form-submit-target="buttonText">Filtrer</span>
                            <span data-form-submit-target="spinner" class="hidden ml-2">
                                <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                            </span>
                        </button>
                        <a href="{{ path('admin_security_ip_validations_index') }}"
                           class="ml-3 inline-flex items-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-times mr-2"></i> Réinitialiser
                        </a>
                    </div>
                </div>
            </form>
        </div>

        {# List #}
        {% if pagination.getTotalItemCount == 0 %}
            <div class="text-center py-12">
                <i class="fas fa-inbox text-gray-400 text-5xl mb-4"></i>
                <p class="text-gray-500 mb-4">Aucun code de validation trouvé</p>
            </div>
        {% else %}
            {# Desktop Table #}
            <div class="hidden lg:block overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Code</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Utilisateur</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Adresse IP</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Localisation</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Créé</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Statut</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for code in pagination %}
                            <tr class="hover:bg-gray-50 {{ code.isExpired and not code.validated ? 'bg-red-50 bg-opacity-20' : '' }}">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-mono font-bold text-gray-900">{{ code.code|slice(0, 3) }}***{{ code.code|slice(-2) }}</div>
                                    <div class="text-xs text-gray-500">ID: #{{ code.id }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ code.user.email }}</div>
                                    <div class="text-xs text-gray-500">{{ code.user.firstName }} {{ code.user.lastName }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-mono text-gray-900">{{ code.ipAddress }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ code.country|default('-') }}</div>
                                    <div class="text-xs text-gray-500">{{ code.city|default('-') }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ code.createdAt|date('d/m/Y') }}</div>
                                    <div class="text-xs text-gray-500">{{ code.createdAt|date('H:i:s') }}</div>
                                    {% if not code.validated and not code.isExpired %}
                                        <div class="text-xs text-blue-600 font-medium mt-1">
                                            {{ code.getRemainingMinutes() }} min restantes
                                        </div>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if code.validated %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            <i class="fas fa-check mr-1"></i> Validé
                                        </span>
                                        {% if code.validatedAt %}
                                            <div class="text-xs text-gray-500 mt-1">{{ code.validatedAt|date('d/m H:i') }}</div>
                                        {% endif %}
                                    {% elseif code.isExpired %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                            <i class="fas fa-times-circle mr-1"></i> Expiré
                                        </span>
                                    {% else %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                            <i class="fas fa-clock mr-1"></i> En attente
                                        </span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="{{ path('admin_security_ip_validations_show', {id: code.id}) }}"
                                       class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-blue-600 hover:bg-blue-50 transition-colors duration-150">
                                        <i class="fas fa-eye mr-1"></i>
                                        Voir
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {# Mobile Cards #}
            <div class="lg:hidden p-4 space-y-4">
                {% for code in pagination %}
                    {% include 'admin/components/cards/ip_validations_card.html.twig' with {item: code} %}
                {% endfor %}
            </div>

            {# Pagination #}
            {% if pagination.pageCount > 1 %}
                <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                Page <span class="font-medium">{{ pagination.currentPageNumber }}</span> sur <span class="font-medium">{{ pagination.pageCount }}</span>
                            </p>
                        </div>
                        <div>
                            {{ knp_pagination_render(pagination) }}
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>
</div>

{# Chart.js #}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const chartCtx = document.getElementById('codesChart').getContext('2d');
const chartData = {{ chart_data|json_encode|raw }};
new Chart(chartCtx, {
    type: 'line',
    data: {
        labels: chartData.map(d => new Date(d.date).toLocaleDateString('fr-FR')),
        datasets: [
            {
                label: 'Codes Créés',
                data: chartData.map(d => d.created),
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                tension: 0.3,
                fill: true
            },
            {
                label: 'Codes Validés',
                data: chartData.map(d => d.validated),
                borderColor: 'rgb(34, 197, 94)',
                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                tension: 0.3,
                fill: true
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    precision: 0
                }
            }
        }
    }
});
</script>
{% endblock %}