{% 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 justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                    <i class="fas fa-key text-indigo-600 mr-3"></i>
                    {{ page_title }}
                </h1>
                <p class="mt-1 text-sm text-gray-600">Gestion et surveillance des tokens JWT et Refresh</p>
            </div>
        </div>
    </div>

    {# JWT Token Statistics #}
    <div class="mb-8">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-shield-alt text-blue-500 mr-2"></i>
            JWT Tokens
        </h2>
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {# Active JWT #}
            <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">Actifs</dt>
                                <dd class="text-2xl font-semibold text-gray-900">{{ jwt_stats.active|default(0)|number_format(0, ',', ' ') }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            {# Revoked JWT #}
            <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-ban text-2xl"></i>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Révoqués</dt>
                                <dd class="text-2xl font-semibold text-gray-900">{{ jwt_stats.revoked|default(0)|number_format(0, ',', ' ') }}</dd>
                                {% if jwt_stats.revoked_today > 0 %}
                                    <dd class="text-xs text-red-600">+{{ jwt_stats.revoked_today }} aujourd'hui</dd>
                                {% endif %}
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            {# Expired Reuse JWT #}
            <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-orange-500 text-white">
                                <i class="fas fa-exclamation-triangle text-2xl"></i>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Réutilisations</dt>
                                <dd class="text-2xl font-semibold text-gray-900">{{ jwt_stats.expired_reuse|default(0)|number_format(0, ',', ' ') }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            {# Active Sessions JWT #}
            <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-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">Sessions</dt>
                                <dd class="text-2xl font-semibold text-gray-900">{{ jwt_stats.active_sessions|default(0)|number_format(0, ',', ' ') }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Refresh Token Statistics #}
    <div class="mb-8">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-sync-alt text-purple-500 mr-2"></i>
            Refresh Tokens
        </h2>
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {# Active Refresh #}
            <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">Actifs</dt>
                                <dd class="text-2xl font-semibold text-gray-900">{{ refresh_stats.active|default(0)|number_format(0, ',', ' ') }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            {# Revoked Refresh #}
            <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-ban text-2xl"></i>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Révoqués</dt>
                                <dd class="text-2xl font-semibold text-gray-900">{{ refresh_stats.revoked|default(0)|number_format(0, ',', ' ') }}</dd>
                                {% if refresh_stats.revoked_today > 0 %}
                                    <dd class="text-xs text-red-600">+{{ refresh_stats.revoked_today }} aujourd'hui</dd>
                                {% endif %}
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            {# Consumed Refresh #}
            <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-hourglass-end text-2xl"></i>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Consommés</dt>
                                <dd class="text-2xl font-semibold text-gray-900">{{ refresh_stats.consumed|default(0)|number_format(0, ',', ' ') }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            {# Unconsumed Refresh #}
            <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-hourglass-start text-2xl"></i>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Disponibles</dt>
                                <dd class="text-2xl font-semibold text-gray-900">{{ refresh_stats.unconsumed|default(0)|number_format(0, ',', ' ') }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {# Main Content Area #}
        <div class="lg:col-span-2 space-y-6">
            {# JWT Chart #}
            <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>
                        JWT Tokens - 30 derniers jours
                    </h3>
                    <div class="h-64">
                        <canvas id="jwtChart"></canvas>
                    </div>
                </div>
            </div>

            {# Refresh Chart #}
            <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-purple-500 mr-2"></i>
                        Refresh Tokens - 30 derniers jours
                    </h3>
                    <div class="h-64">
                        <canvas id="refreshChart"></canvas>
                    </div>
                </div>
            </div>

            {# Suspicious Tokens Table #}
            {% if suspicious_tokens is not empty %}
                <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-exclamation-triangle text-orange-500 mr-2"></i>
                            Tokens Suspects Récents
                        </h3>
                        <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">User</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">JTI</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Tentatives</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Dernière</th>
                                        <th scope="col" class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    {% for token in suspicious_tokens %}
                                        <tr class="hover:bg-gray-50">
                                            <td class="px-4 py-2 text-sm text-gray-900">{{ token.user.email }}</td>
                                            <td class="px-4 py-2 text-sm font-mono text-gray-600 truncate max-w-xs" title="{{ token.jti }}">
                                                {{ token.jti|slice(0, 12) }}...
                                            </td>
                                            <td class="px-4 py-2 text-sm">
                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                                    {{ token.expiredReuseAttempts }}
                                                </span>
                                            </td>
                                            <td class="px-4 py-2 text-sm text-gray-500">
                                                {{ token.lastExpiredReuseAt ? token.lastExpiredReuseAt|date('d/m H:i') : '-' }}
                                            </td>
                                            <td class="px-4 py-2 text-right text-sm">
                                                <a href="{{ path('admin_security_tokens_jwt_show', {id: token.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>
                        <div class="mt-4 text-center">
                            <a href="{{ path('admin_security_tokens_suspicious') }}"
                               class="text-sm text-indigo-600 hover:text-indigo-900">
                                Voir tous les tokens suspects <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>

        {# Sidebar #}
        <div class="space-y-6">
            {# Quick 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 Rapides
                    </h3>
                    <div class="space-y-3">
                        <a href="{{ path('admin_security_tokens_jwt_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-shield-alt mr-2"></i> JWT Tokens
                        </a>
                        <a href="{{ path('admin_security_tokens_refresh_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-sync-alt mr-2"></i> Refresh Tokens
                        </a>
                        {% if jwt_stats.expired_reuse > 0 %}
                            <a href="{{ path('admin_security_tokens_suspicious') }}"
                               class="block w-full text-center px-4 py-2 border border-orange-300 shadow-sm text-sm font-medium rounded-md text-orange-700 bg-white hover:bg-orange-50">
                                <i class="fas fa-exclamation-triangle mr-2"></i> Tokens Suspects ({{ jwt_stats.expired_reuse }})
                            </a>
                        {% endif %}
                        <a href="{{ path('admin_security_tokens_export_csv', {type: 'jwt'}) }}"
                           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-download mr-2"></i> Exporter JWT (CSV)
                        </a>
                        <a href="{{ path('admin_security_tokens_export_csv', {type: 'refresh'}) }}"
                           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-download mr-2"></i> Exporter Refresh (CSV)
                        </a>
                    </div>
                </div>
            </div>

            {# JWT Activity Stats #}
            <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-blue-500 mr-2"></i>
                        Activité JWT
                    </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">{{ jwt_stats.created_today|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Dernières 24h</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ jwt_stats.created_last_24h|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Derniers 7 jours</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ jwt_stats.created_last_7d|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Derniers 30 jours</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ jwt_stats.created_last_30d|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between border-t pt-3">
                            <dt class="text-sm text-gray-500">Usage moyen</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ jwt_stats.avg_usage|default(0) }}</dd>
                        </div>
                    </dl>
                </div>
            </div>

            {# Refresh Activity Stats #}
            <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-purple-500 mr-2"></i>
                        Activité Refresh
                    </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">{{ refresh_stats.created_today|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Dernières 24h</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ refresh_stats.created_last_24h|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Derniers 7 jours</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ refresh_stats.created_last_7d|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Derniers 30 jours</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ refresh_stats.created_last_30d|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between border-t pt-3">
                            <dt class="text-sm text-gray-500">Usage moyen</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ refresh_stats.avg_used|default(0) }}</dd>
                        </div>
                    </dl>
                </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>
// JWT Chart
const jwtChartData = {{ jwt_chart_data|json_encode|raw }};
const jwtCtx = document.getElementById('jwtChart');
if (jwtCtx) {
    new Chart(jwtCtx, {
        type: 'line',
        data: {
            labels: jwtChartData.map(d => {
                const date = new Date(d.date);
                return date.toLocaleDateString('fr-FR', {month: 'short', day: 'numeric'});
            }),
            datasets: [
                {
                    label: 'Créés',
                    data: jwtChartData.map(d => d.created),
                    borderColor: 'rgb(59, 130, 246)',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    fill: true,
                    tension: 0.3
                },
                {
                    label: 'Révoqués',
                    data: jwtChartData.map(d => d.revoked),
                    borderColor: 'rgb(239, 68, 68)',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    fill: true,
                    tension: 0.3
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0
                    }
                }
            }
        }
    });
}

// Refresh Chart
const refreshChartData = {{ refresh_chart_data|json_encode|raw }};
const refreshCtx = document.getElementById('refreshChart');
if (refreshCtx) {
    new Chart(refreshCtx, {
        type: 'line',
        data: {
            labels: refreshChartData.map(d => {
                const date = new Date(d.date);
                return date.toLocaleDateString('fr-FR', {month: 'short', day: 'numeric'});
            }),
            datasets: [
                {
                    label: 'Créés',
                    data: refreshChartData.map(d => d.created),
                    borderColor: 'rgb(147, 51, 234)',
                    backgroundColor: 'rgba(147, 51, 234, 0.1)',
                    fill: true,
                    tension: 0.3
                },
                {
                    label: 'Révoqués',
                    data: refreshChartData.map(d => d.revoked),
                    borderColor: 'rgb(239, 68, 68)',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    fill: true,
                    tension: 0.3
                },
                {
                    label: 'Consommés',
                    data: refreshChartData.map(d => d.consumed),
                    borderColor: 'rgb(234, 179, 8)',
                    backgroundColor: 'rgba(234, 179, 8, 0.1)',
                    fill: true,
                    tension: 0.3
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0
                    }
                }
            }
        }
    });
}
</script>
{% endblock %}