{% 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">
        <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_tokens_index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                        <i class="fas fa-key mr-2"></i> Tokens
                    </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">JWT Tokens</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">
                    <i class="fas fa-shield-alt text-blue-600 mr-3"></i>
                    {{ page_title }}
                </h1>
                <p class="mt-1 text-sm text-gray-600">{{ pagination.getTotalItemCount }} token(s) trouvé(s)</p>
            </div>
            <a href="{{ path('admin_security_tokens_export_csv', app.request.query.all|merge({type: 'jwt'})) }}"
               class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                <i class="fas fa-download mr-2"></i> Exporter CSV
            </a>
        </div>
    </div>

    <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_tokens_jwt_list') }}" data-controller="form-submit" class="space-y-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    {# Search #}
                    <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, JTI, IP..."
                               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>

                    {# Status #}
                    <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="active" {{ filters.status|default('') == 'active' ? 'selected' : '' }}>Actifs</option>
                            <option value="revoked" {{ filters.status|default('') == 'revoked' ? 'selected' : '' }}>Révoqués</option>
                            <option value="expired" {{ filters.status|default('') == 'expired' ? 'selected' : '' }}>Expirés</option>
                        </select>
                    </div>

                    {# Browser #}
                    <div>
                        <label for="browser" class="block text-sm font-medium text-gray-700 mb-1">Navigateur</label>
                        <select name="browser" id="browser" 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 browser in browsers %}
                                <option value="{{ browser }}" {{ filters.browser|default('') == browser ? 'selected' : '' }}>{{ browser }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    {# OS #}
                    <div>
                        <label for="os" class="block text-sm font-medium text-gray-700 mb-1">OS</label>
                        <select name="os" id="os" 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 os in oses %}
                                <option value="{{ os }}" {{ filters.os|default('') == os ? 'selected' : '' }}>{{ os }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    {# Country #}
                    <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 country in countries %}
                                <option value="{{ country }}" {{ filters.country|default('') == country ? 'selected' : '' }}>{{ country }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    {# Date From #}
                    <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>

                    {# Date To #}
                    <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>

                    {# Suspicious Only #}
                    <div class="flex items-end">
                        <label class="flex items-center">
                            <input type="checkbox" name="suspicious" value="1" {{ filters.suspicious is defined ? 'checked' : '' }}
                                   class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            <span class="ml-2 text-sm text-gray-700">Suspects uniquement</span>
                        </label>
                    </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_tokens_jwt_list') }}"
                           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 token trouvé</p>
                <a href="{{ path('admin_security_tokens_index') }}"
                   class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                    <i class="fas fa-arrow-left mr-2"></i> Retour au Dashboard
                </a>
            </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">JTI</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">User</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Device</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Location</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Usage</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Expire</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 token in pagination %}
                            <tr class="hover:bg-gray-50 {{ token.expiredReuseDetected ? 'bg-orange-50' : '' }}">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-mono text-gray-900 truncate max-w-xs" title="{{ token.jti }}">
                                        {{ token.jti|slice(0, 16) }}...
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ token.user.email }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">
                                        <i class="fab fa-{{ token.browser|lower == 'chrome' ? 'chrome' : (token.browser|lower == 'firefox' ? 'firefox' : (token.browser|lower == 'safari' ? 'safari' : 'internet-explorer')) }}"></i>
                                        {{ token.browser|default('Unknown') }}
                                    </div>
                                    <div class="text-xs text-gray-500">{{ token.os|default('Unknown') }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ token.ipAddress|default('-') }}</div>
                                    <div class="text-xs text-gray-500">{{ token.country|default('-') }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if token.isRevoked %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                            <i class="fas fa-ban mr-1"></i> Révoqué
                                        </span>
                                    {% elseif token.isExpired %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                            <i class="fas fa-clock mr-1"></i> Expiré
                                        </span>
                                    {% else %}
                                        <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> Actif
                                        </span>
                                    {% endif %}
                                    {% if token.expiredReuseDetected %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800 mt-1">
                                            <i class="fas fa-exclamation-triangle mr-1"></i> Suspect
                                        </span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ token.usageCount }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ token.expiresAt|date('d/m/Y') }}</div>
                                    <div class="text-xs text-gray-500">{{ token.expiresAt|date('H:i') }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex justify-end space-x-2">
                                        <a href="{{ path('admin_security_tokens_jwt_show', {id: token.id}) }}"
                                           class="text-indigo-600 hover:text-indigo-900" title="Voir détails">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        {% if not token.isRevoked %}
                                            <button type="button" onclick="confirmRevoke({{ token.id }}, '{{ token.jti|e('js') }}')"
                                                    class="text-red-600 hover:text-red-900" title="Révoquer">
                                                <i class="fas fa-ban"></i>
                                            </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {# Mobile Cards #}
            <div class="lg:hidden p-4 space-y-4">
                {% for token in pagination %}
                    {% include 'admin/components/cards/jwt_tokens_card.html.twig' with {item: token} %}
                {% 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>

{# Hidden forms for actions #}
<form id="revokeForm" method="post" style="display: none;">
    <input type="hidden" name="_token" id="revokeToken">
    <input type="hidden" name="reason" value="Révoqué par administrateur">
</form>

{# Scripts #}
<script>
function confirmRevoke(id, jti) {
    if (confirm(`Voulez-vous révoquer le token:\\nJTI: ${jti} ?\\n\\nCette action est irréversible.`)) {
        const form = document.getElementById('revokeForm');
        form.action = '{{ path('admin_security_tokens_jwt_revoke', {id: '__ID__'}) }}'.replace('__ID__', id);
        document.getElementById('revokeToken').value = '{{ csrf_token('revoke_jwt_') }}' + id;
        form.submit();
    }
}
</script>
{% endblock %}