{% 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">Liste</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-list text-indigo-600 mr-3"></i>
                    {{ page_title }}
                </h1>
                <p class="mt-1 text-sm text-gray-600">{{ pagination.getTotalItemCount }} IP(s) trouvée(s)</p>
            </div>
            <a href="{{ path('admin_security_ip_blocks_create') }}"
               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-ban mr-2"></i> Bloquer une IP
            </a>
        </div>
    </div>

    <div class="bg-white shadow rounded-lg overflow-hidden">
        {# Filtres #}
        <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
            <form method="get" action="{{ path('admin_security_ip_blocks_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">
                    {# Recherche #}
                    <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="IP ou raison..."
                               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>

                    {# Type de blocage #}
                    <div>
                        <label for="blockType" class="block text-sm font-medium text-gray-700 mb-1">
                            Type de blocage
                        </label>
                        <select name="blockType"
                                id="blockType"
                                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="temporary" {{ filters.blockType|default('') == 'temporary' ? 'selected' : '' }}>Temporaire</option>
                            <option value="permanent" {{ filters.blockType|default('') == 'permanent' ? 'selected' : '' }}>Permanent</option>
                        </select>
                    </div>

                    {# Pays #}
                    <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>

                    {# Statut #}
                    <div>
                        <label for="isActive" class="block text-sm font-medium text-gray-700 mb-1">
                            Statut
                        </label>
                        <select name="isActive"
                                id="isActive"
                                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="1" {{ filters.isActive|default('') == '1' or filters.isActive|default('') == true ? 'selected' : '' }}>Actif</option>
                            <option value="0" {{ filters.isActive|default('') == '0' or filters.isActive|default('') == false ? 'selected' : '' }}>Inactif</option>
                        </select>
                    </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_blocks_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>

                    {# Actions en masse #}
                    <div class="flex space-x-2">
                        <button type="button"
                                onclick="bulkUnlock()"
                                class="inline-flex items-center px-4 py-2 border border-green-300 shadow-sm text-sm font-medium rounded-md text-green-700 bg-white hover:bg-green-50">
                            <i class="fas fa-unlock mr-2"></i> Débloquer sélection
                        </button>
                        <button type="button"
                                onclick="bulkDelete()"
                                class="inline-flex items-center px-4 py-2 border border-red-300 shadow-sm text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50">
                            <i class="fas fa-trash mr-2"></i> Supprimer sélection
                        </button>
                    </div>
                </div>
            </form>
        </div>

        {# Liste des IP #}
        {% 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">Aucune IP bloquée trouvée</p>
                <a href="{{ path('admin_security_ip_blocks_create') }}"
                   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-ban mr-2"></i> Bloquer une IP
                </a>
            </div>
        {% else %}
            <form id="bulkForm" method="post">
                {# 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">
                                    <input type="checkbox"
                                           id="selectAll"
                                           class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    IP
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Type
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Pays / Ville
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Raison
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Date
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Expiration
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Statut
                                </th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for ipBlock in pagination %}
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox"
                                               name="ids[]"
                                               value="{{ ipBlock.id }}"
                                               class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded bulk-checkbox">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900 font-mono">{{ ipBlock.ipAddress }}</div>
                                        {% if ipBlock.isp %}
                                            <div class="text-xs text-gray-500">{{ ipBlock.isp }}</div>
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        {% if ipBlock.isPermanent %}
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                                <i class="fas fa-lock mr-1"></i> Permanent
                                            </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> Temporaire
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ ipBlock.country ?? 'Inconnu' }}</div>
                                        {% if ipBlock.city %}
                                            <div class="text-xs text-gray-500">{{ ipBlock.city }}</div>
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm text-gray-900 max-w-xs truncate" title="{{ ipBlock.reason }}">
                                            {{ ipBlock.reason|slice(0, 50) }}{% if ipBlock.reason|length > 50 %}...{% endif %}
                                        </div>
                                        <div class="text-xs text-gray-500">
                                            Tentatives: {{ ipBlock.attemptCount }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ ipBlock.blockedAt|date('d/m/Y') }}</div>
                                        <div class="text-xs text-gray-500">{{ ipBlock.blockedAt|date('H:i') }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        {% if ipBlock.isPermanent %}
                                            <span class="text-xs text-gray-500">-</span>
                                        {% elseif ipBlock.expiresAt %}
                                            {% if ipBlock.isExpired %}
                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                                    Expiré
                                                </span>
                                            {% else %}
                                                <div class="text-sm text-gray-900">{{ ipBlock.expiresAt|date('d/m/Y') }}</div>
                                                <div class="text-xs text-green-600">
                                                    {{ ipBlock.remainingMinutes }} min
                                                </div>
                                            {% endif %}
                                        {% else %}
                                            <span class="text-xs text-gray-500">-</span>
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        {% if ipBlock.isActive %}
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                Actif
                                            </span>
                                        {% else %}
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                                Inactif
                                            </span>
                                        {% endif %}
                                    </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_ip_blocks_show', {id: ipBlock.id}) }}"
                                               class="text-indigo-600 hover:text-indigo-900"
                                               title="Détails">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            {% if ipBlock.isActive %}
                                                <button type="button"
                                                        onclick="confirmUnlock({{ ipBlock.id }}, '{{ ipBlock.ipAddress }}')"
                                                        class="text-green-600 hover:text-green-900"
                                                        title="Débloquer">
                                                    <i class="fas fa-unlock"></i>
                                                </button>
                                            {% endif %}
                                            <button type="button"
                                                    onclick="confirmDelete({{ ipBlock.id }}, '{{ ipBlock.ipAddress }}')"
                                                    class="text-red-600 hover:text-red-900"
                                                    title="Supprimer">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

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

            {# 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>

{# Formulaires cachés pour actions #}
<form id="unlockForm" method="post" style="display: none;">
    <input type="hidden" name="_token" id="unlockToken">
</form>

<form id="deleteForm" method="post" style="display: none;">
    <input type="hidden" name="_token" id="deleteToken">
</form>

{# Scripts #}
<script>
// Sélection multiple
document.getElementById('selectAll')?.addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.bulk-checkbox');
    checkboxes.forEach(cb => cb.checked = this.checked);
});

// Débloquer une IP
function confirmUnlock(id, ip) {
    if (confirm(`Voulez-vous débloquer l'IP:\n${ip} ?`)) {
        const form = document.getElementById('unlockForm');
        form.action = '{{ path('admin_security_ip_blocks_unlock', {id: '__ID__'}) }}'.replace('__ID__', id);
        document.getElementById('unlockToken').value = '{{ csrf_token('unlock_ip_') }}' + id;
        form.submit();
    }
}

// Supprimer un blocage
function confirmDelete(id, ip) {
    if (confirm(`Voulez-vous supprimer le blocage de l'IP:\n${ip} ?\n\nCette action est irréversible.`)) {
        const form = document.getElementById('deleteForm');
        form.action = '{{ path('admin_security_ip_blocks_delete', {id: '__ID__'}) }}'.replace('__ID__', id);
        document.getElementById('deleteToken').value = '{{ csrf_token('delete_ip_') }}' + id;
        form.submit();
    }
}

// Actions en masse - Débloquer
function bulkUnlock() {
    const form = document.getElementById('bulkForm');
    const checked = form.querySelectorAll('.bulk-checkbox:checked');

    if (checked.length === 0) {
        alert('Veuillez sélectionner au moins une IP.');
        return;
    }

    if (confirm(`Voulez-vous débloquer ${checked.length} IP(s) ?`)) {
        form.action = '{{ path('admin_security_ip_blocks_bulk_unlock') }}';
        form.submit();
    }
}

// Actions en masse - Supprimer
function bulkDelete() {
    const form = document.getElementById('bulkForm');
    const checked = form.querySelectorAll('.bulk-checkbox:checked');

    if (checked.length === 0) {
        alert('Veuillez sélectionner au moins une IP.');
        return;
    }

    if (confirm(`Voulez-vous supprimer ${checked.length} blocage(s) ?\n\nCette action est irréversible.`)) {
        form.action = '{{ path('admin_security_ip_blocks_bulk_delete') }}';
        form.submit();
    }
}
</script>
{% endblock %}