{% extends 'base.html.twig' %}
{% set show_layout = false %}

{% block title %}Connexion{% endblock %}

{% block meta %}
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; font-src 'self' https://cdnjs.cloudflare.com; script-src 'self' 'unsafe-inline';">
    <meta name="referrer" content="strict-origin-when-cross-origin">
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <style>
        body {
            background: #f0f2f5;
            font-family: "Manrope", sans-serif;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 1rem;
        }
        .login-card {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 400px;
            width: 100%;
        }
        .login-logo img {
            max-width: 100px;
            margin-bottom: 1rem;
        }
        .login-title {
            font-size: 24px;
            color: #003482;
            margin-bottom: 1.5rem;
            font-weight: bold;
        }
        .input-group {
            margin-bottom: 1.2rem;
            text-align: left;
        }
        .input-group label {
            font-size: 14px;
            font-weight: 500;
            color: #666;
            display: block;
            margin-bottom: 0.5rem;
        }
        .input-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: 0.3s;
            background-color: #fff;
            color: #000000;
            box-sizing: border-box;
        }
        .input-group input:focus {
            border-color: #003482;
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 52, 130, 0.1);
        }
        .input-group input:invalid {
            border-color: #000000;
        }
        .input-group input:valid {
            border-color: #003482;
        }
        .password-group {
            position: relative;
        }
        .password-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }
        .toggle-password {
            position: absolute;
            right: 12px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            color: #666;
            outline: none;
            z-index: 1;
        }
        .toggle-password:focus {
            outline: 2px solid #003482;
            outline-offset: 2px;
        }
        .toggle-password:hover {
            color: #003482;
        }
        .remember-me {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            font-size: 14px;
        }
        .remember-me input {
            margin-right: 8px;
            width: 18px;
            height: 18px;
        }
        .remember-me input:focus {
            outline: 2px solid #003482;
            outline-offset: 2px;
        }
        .button {
            background-color: transparent;
            color: #003482;
            width: 100%;
            height: 2.9em;
            border: #ED7412 0.07em solid;
            border-radius: 11px;
            text-align: center;
            transition: all 0.6s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }
        .button:hover:not(:disabled) {
            background-color: #ED7412;
            color: #fff;
        }
        .button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .button:focus {
            outline: 2px solid #003482;
            outline-offset: 2px;
        }
        .button svg {
            width: 1.6em;
            margin-right: 0.5em;
            transition: all 0.6s ease;
        }
        .button:hover:not(:disabled) svg {
            transform: translateX(5px);
        }
        .text {
            margin-left: 1em;
        }
        .alert {
            padding: 12px;
            margin-bottom: 1rem;
            border-radius: 6px;
            font-size: 14px;
        }
        .alert-danger {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .alert-warning {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
        }
        .error-message {
            color: #dc3545;
            font-size: 12px;
            margin-top: 0.25rem;
            display: none;
        }
        .loading {
            display: none;
            margin-left: 0.5rem;
        }
        .loading.show {
            display: inline-block;
        }
        .strength-meter {
            height: 4px;
            margin-top: 0.5rem;
            background-color: #e9ecef;
            border-radius: 2px;
            overflow: hidden;
        }
        .strength-meter-fill {
            height: 100%;
            transition: width 0.3s ease, background-color 0.3s ease;
            width: 0%;
            background-color: #dc3545;
        }
        .attempts-warning {
            font-size: 12px;
            color: #856404;
            margin-top: 0.5rem;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="login-card">
            <h1 class="login-title" style="font-family:Manrope, sans-serif">Bienvenue sur Badge Psy</h1>
            <div class="login-logo">
                <img src="{{ asset('logoCFP02.png') }}" alt="Logo CFP02" loading="lazy">
            </div>

            {% if error %}
                <div class="alert alert-danger" role="alert">
                    {{ error.messageKey|trans(error.messageData, 'security') }}
                </div>
            {% endif %}

            {% if app.request.get('_failure_path') %}
                <div class="alert alert-warning" role="alert">
                    Trop de tentatives de connexion. Veuillez patienter avant de réessayer.
                </div>
            {% endif %}

            <form method="post" id="login-form" novalidate autocomplete="on">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                <!-- Honeypot pour les bots -->
                <input type="text" name="website" style="display:none" tabindex="-1" autocomplete="off">

                <div class="input-group">
                    <label for="inputEmail">
                        Email <span aria-label="obligatoire">*</span>
                    </label>
                    <input type="email"
                           value="{{ last_username }}"
                           name="email"
                           id="inputEmail"
                           required
                           autofocus
                           autocomplete="username"
                           maxlength="255"
                           pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$"
                           aria-describedby="email-error"
                           data-validate="email">
                    <div id="email-error" class="error-message" role="alert"></div>
                </div>

                <div class="input-group password-group">
                    <label for="inputPassword">
                        Mot de passe <span aria-label="obligatoire">*</span>
                    </label>
                    <div class="password-wrapper">
                        <input type="password"
                               name="password"
                               id="inputPassword"
                               required
                               autocomplete="current-password"
                               minlength="8"
                               maxlength="255"
                               aria-describedby="password-error toggle-password"
                               data-validate="password">
                        <button type="button"
                                class="toggle-password"
                                id="toggle-password"
                                aria-label="Afficher/masquer le mot de passe"
                                tabindex="0">
                            <i class="fa fa-eye" aria-hidden="true"></i>
                        </button>
                    </div>
                    <div id="password-error" class="error-message" role="alert"></div>
                </div>

                <div class="remember-me">
                    <input type="checkbox"
                           name="_remember_me"
                           id="remember-me"
                           autocomplete="off">
                    <label for="remember-me">Se souvenir de moi</label>
                </div>

                <button class="button" type="submit" id="submit-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"></path>
                    </svg>
                    <div class="text">Se connecter</div>
                    <div class="loading" id="loading">
                        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
                    </div>
                </button>
            </form>
        </div>
    </div>

    <script>
        (function() {
            'use strict';

            // Variables
            const form = document.getElementById('login-form');
            const emailInput = document.getElementById('inputEmail');
            const passwordInput = document.getElementById('inputPassword');
            const togglePasswordBtn = document.getElementById('toggle-password');
            const submitBtn = document.getElementById('submit-btn');
            const loading = document.getElementById('loading');

            // Protection contre les attaques par timing
            let submitAttempts = 0;
            const maxAttempts = 5;
            let lastSubmitTime = 0;

            // Toggle password visibility
            togglePasswordBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    icon.classList.replace('fa-eye', 'fa-eye-slash');
                    this.setAttribute('aria-label', 'Masquer le mot de passe');
                } else {
                    passwordInput.type = 'password';
                    icon.classList.replace('fa-eye-slash', 'fa-eye');
                    this.setAttribute('aria-label', 'Afficher le mot de passe');
                }
            });

            // Keyboard support for toggle password
            togglePasswordBtn.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    this.click();
                }
            });

            // Validation en temps réel
            function validateEmail(email) {
                const re = /^[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$/i;
                return re.test(email);
            }

            function validatePassword(password) {
                return password.length >= 8 && password.length <= 255;
            }

            function showError(input, message) {
                const errorDiv = document.getElementById(input.id + '-error');
                errorDiv.textContent = message;
                errorDiv.style.display = 'block';
                input.setAttribute('aria-invalid', 'true');
            }

            function hideError(input) {
                const errorDiv = document.getElementById(input.id + '-error');
                errorDiv.style.display = 'none';
                input.removeAttribute('aria-invalid');
            }

            // Validation email
            emailInput.addEventListener('blur', function() {
                if (this.value && !validateEmail(this.value)) {
                    showError(this, 'Veuillez entrer une adresse email valide.');
                } else {
                    hideError(this);
                }
            });

            // Validation password
            passwordInput.addEventListener('blur', function() {
                if (this.value && !validatePassword(this.value)) {
                    showError(this, 'Le mot de passe doit contenir entre 8 et 255 caractères.');
                } else {
                    hideError(this);
                }
            });

            // Rate limiting côté client
            function canSubmit() {
                const now = Date.now();
                const timeSinceLastSubmit = now - lastSubmitTime;

                if (submitAttempts >= maxAttempts) {
                    alert('Trop de tentatives. Veuillez patienter avant de réessayer.');
                    return false;
                }

                if (timeSinceLastSubmit < 1000) { // Minimum 1 seconde entre les tentatives
                    return false;
                }

                return true;
            }

            // Soumission du formulaire
            form.addEventListener('submit', function(e) {
                if (!canSubmit()) {
                    e.preventDefault();
                    return;
                }

                // Validation finale
                let isValid = true;

                if (!emailInput.value || !validateEmail(emailInput.value)) {
                    showError(emailInput, 'Veuillez entrer une adresse email valide.');
                    isValid = false;
                }

                if (!passwordInput.value || !validatePassword(passwordInput.value)) {
                    showError(passwordInput, 'Le mot de passe doit contenir entre 8 et 255 caractères.');
                    isValid = false;
                }

                // Vérifier le honeypot
                const honeypot = document.querySelector('input[name="website"]');
                if (honeypot && honeypot.value) {
                    e.preventDefault();
                    return;
                }

                if (!isValid) {
                    e.preventDefault();
                    return;
                }

                // Désactiver le bouton et afficher le loading
                submitBtn.disabled = true;
                loading.classList.add('show');

                // Incrémenter les tentatives
                submitAttempts++;
                lastSubmitTime = Date.now();

                // Réactiver le bouton après 5 secondes en cas d'erreur
                setTimeout(function() {
                    submitBtn.disabled = false;
                    loading.classList.remove('show');
                }, 5000);
            });

            // Réinitialiser les tentatives après 15 minutes
            setInterval(function() {
                submitAttempts = 0;
            }, 15 * 60 * 1000);

            // Nettoyer les champs au chargement pour éviter l'autocomplete indésirable
            window.addEventListener('load', function() {
                // Ne pas nettoyer si c'est un refresh après erreur
                if (!{{ last_username ? 'true' : 'false' }}) {
                    emailInput.value = '';
                }
                passwordInput.value = '';
            });

        })();
    </script>
{% endblock %}