{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="max-w-4xl 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">Bloquer une IP</span>
                    </div>
                </li>
            </ol>
        </nav>
        <h1 class="text-3xl font-bold text-gray-900 flex items-center">
            <i class="fas fa-ban text-indigo-600 mr-3"></i>
            {{ page_title }}
        </h1>
        <p class="mt-1 text-sm text-gray-600">Bloquer manuellement une adresse IP</p>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {# Formulaire #}
        <div class="lg:col-span-2">
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <form method="post" action="{{ path('admin_security_ip_blocks_create') }}" id="blockForm" data-controller="form-submit">
                        {# Adresse IP #}
                        <div class="mb-6">
                            <label for="ip_address" class="block text-sm font-medium text-gray-700 mb-2">
                                Adresse IP <span class="text-red-500">*</span>
                            </label>
                            <input type="text"
                                   name="ip_address"
                                   id="ip_address"
                                   required
                                   placeholder="192.168.1.100"
                                   pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$|^(?:[A-F0-9]{1,4}:){7}[A-F0-9]{1,4}$"
                                   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 font-mono">
                            <p class="mt-1 text-xs text-gray-500">
                                Formats acceptés: IPv4 (192.168.1.100) ou IPv6
                            </p>
                        </div>

                        {# Type de blocage #}
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-3">
                                Type de blocage <span class="text-red-500">*</span>
                            </label>
                            <div class="space-y-3">
                                <div class="relative flex items-start">
                                    <div class="flex items-center h-5">
                                        <input id="block_type_temporary"
                                               name="block_type"
                                               type="radio"
                                               value="temporary"
                                               checked
                                               class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                                    </div>
                                    <div class="ml-3 text-sm">
                                        <label for="block_type_temporary" class="font-medium text-gray-700">
                                            <i class="fas fa-clock text-yellow-500 mr-1"></i> Temporaire
                                        </label>
                                        <p class="text-gray-500">Le blocage expirera après la durée spécifiée</p>
                                    </div>
                                </div>

                                <div class="relative flex items-start">
                                    <div class="flex items-center h-5">
                                        <input id="block_type_permanent"
                                               name="block_type"
                                               type="radio"
                                               value="permanent"
                                               class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                                    </div>
                                    <div class="ml-3 text-sm">
                                        <label for="block_type_permanent" class="font-medium text-gray-700">
                                            <i class="fas fa-lock text-red-500 mr-1"></i> Permanent
                                        </label>
                                        <p class="text-gray-500">Le blocage ne sera jamais automatiquement levé</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {# Durée (conditionnel) #}
                        <div class="mb-6" id="duration_container">
                            <label for="duration_minutes" class="block text-sm font-medium text-gray-700 mb-2">
                                Durée du blocage <span class="text-red-500">*</span>
                            </label>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <input type="number"
                                           name="duration_minutes"
                                           id="duration_minutes"
                                           value="60"
                                           min="1"
                                           step="1"
                                           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">
                                    <p class="mt-1 text-xs text-gray-500">En minutes</p>
                                </div>
                                <div class="flex items-center">
                                    <div class="text-sm text-gray-500">
                                        <div class="font-semibold mb-1">Durées courantes:</div>
                                        <div class="space-y-1">
                                            <button type="button" onclick="setDuration(60)" class="text-indigo-600 hover:text-indigo-900 block">1 heure</button>
                                            <button type="button" onclick="setDuration(1440)" class="text-indigo-600 hover:text-indigo-900 block">24 heures</button>
                                            <button type="button" onclick="setDuration(10080)" class="text-indigo-600 hover:text-indigo-900 block">7 jours</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {# Raison #}
                        <div class="mb-6">
                            <label for="reason" class="block text-sm font-medium text-gray-700 mb-2">
                                Raison du blocage <span class="text-red-500">*</span>
                            </label>
                            <textarea name="reason"
                                      id="reason"
                                      rows="4"
                                      required
                                      placeholder="Décrivez la raison du blocage..."
                                      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"></textarea>
                            <p class="mt-1 text-xs text-gray-500">
                                Cette information sera conservée dans les logs
                            </p>
                        </div>

                        <div class="border-t border-gray-200 my-6"></div>

                        {# Boutons d'action #}
                        <div class="flex justify-between items-center">
                            <a href="{{ path('admin_security_ip_blocks_list') }}"
                               class="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-arrow-left mr-2"></i> Annuler
                            </a>
                            <button type="submit"
                                    id="submitBtn"
                                    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">
                                <span data-form-submit-target="buttonText">
                                    <i class="fas fa-ban mr-2"></i>
                                    Bloquer l'IP
                                </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>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {# Sidebar #}
        <div class="space-y-6">
            {# Aide #}
            <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-question-circle text-blue-500 mr-2"></i>
                        Aide
                    </h3>
                    <div class="space-y-4 text-sm text-gray-600">
                        <div>
                            <h4 class="font-semibold text-gray-900 mb-1">Blocage Temporaire</h4>
                            <p>L'IP sera automatiquement débloquée après la durée spécifiée. Recommandé pour les menaces non persistantes.</p>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900 mb-1">Blocage Permanent</h4>
                            <p>L'IP restera bloquée jusqu'à déblocage manuel. Recommandé pour les sources malveillantes confirmées.</p>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900 mb-1">Vérification</h4>
                            <p>Le système vérifiera automatiquement si l'IP est déjà bloquée et affichera un avertissement.</p>
                        </div>
                    </div>
                </div>
            </div>

            {# Avertissement #}
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-yellow-800">Attention</h3>
                        <div class="mt-2 text-sm text-yellow-700">
                            <p>Le blocage d'une IP empêchera toutes les connexions depuis cette adresse. Vérifiez que vous ne bloquez pas une IP légitime.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# Script #}
<script>
// Gérer l'affichage du champ durée
const temporaryRadio = document.getElementById('block_type_temporary');
const permanentRadio = document.getElementById('block_type_permanent');
const durationContainer = document.getElementById('duration_container');
const durationInput = document.getElementById('duration_minutes');

function updateDurationVisibility() {
    if (permanentRadio.checked) {
        durationContainer.style.display = 'none';
        durationInput.removeAttribute('required');
    } else {
        durationContainer.style.display = 'block';
        durationInput.setAttribute('required', 'required');
    }
}

temporaryRadio.addEventListener('change', updateDurationVisibility);
permanentRadio.addEventListener('change', updateDurationVisibility);

// Initialiser
updateDurationVisibility();

// Définir la durée rapidement
function setDuration(minutes) {
    document.getElementById('duration_minutes').value = minutes;
}
</script>
{% endblock %}