@extends('layouts.auth')

@section('content')
<section class="auth d-flex flex-wrap border-cleeck">
    <!-- Colonne gauche : image -->
    <div class="auth-left">
        <img src="{{ asset('assets/login-visual.png') }}" alt="Login Visual" class="login-visual-image">
    </div>

    <!-- Colonne droite : formulaire -->
    <div class="auth-right d-flex flex-column justify-content-center">
        <div class="max-w-600-px mx-auto w-100">
            <a href="/" class="mb-48 d-inline-block max-w-290-px">
                <img src="/assets/logo.png" alt="Logo" class="w-100">
            </a>

            <h2 class="mb-12 fw-medium" style="color: var(--gray-dark); font-size: 1.75rem; letter-spacing: -0.02em;">
                @if(session('signup_attempt'))
                    Validation du compte
                @elseif(session('change_password'))
                    Confirmation du changement de mot de passe
                @else
                    Vérification en deux étapes
                @endif
            </h2>
            <p class="mb-40 text-secondary-light" style="font-size: 1rem; line-height: 1.5; font-weight: 400;">
                @if(session('signup_attempt'))
                    Entrez le code de vérification envoyé à votre adresse e-mail pour valider votre compte.
                @elseif(session('change_password'))
                    Entrez le code de vérification envoyé à votre adresse e-mail pour confirmer le changement de mot de passe.
                @else
                    Entrez le code de sécurité envoyé à votre adresse e-mail pour vous connecter.
                @endif
            </p>

            @if(session('success'))
                <div class="alert alert-success fade show mb-32" role="alert" style="background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; border-radius: 12px; padding: 12px 16px;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="me-2">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                    </svg>
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger fade show mb-32" role="alert" style="background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; border-radius: 12px; padding: 12px 16px;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="me-2">
                        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
                    </svg>
                    {{ session('error') }}
                </div>
            @endif

            @if(session('info'))
                <div class="alert alert-info fade show mb-32" role="alert" style="background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; border-radius: 12px; padding: 12px 16px;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="me-2">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
                    </svg>
                    {{ session('info') }}
                </div>
            @endif

            <form method="POST" action="{{ route('2fa.verify') }}" class="mx-auto" novalidate>
                @csrf

                <div class="icon-field">
                    <span class="icon ">
                        <iconify-icon icon="solar:shield-check-outline"></iconify-icon>
                    </span>
                    <input type="text" 
                           class="form-control h-56-px bg-neutral-50 radius-12 @error('code') is-invalid @enderror" 
                           placeholder="Code à 6 chiffres" 
                           id="code" 
                           name="code" 
                           value="{{ old('code') }}"
                           maxlength="6"
                           pattern="[0-9]{6}"
                           autocomplete="off"
                           required>
                </div>
                @error('code')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror

                <button type="submit" class="btn btn-primary btn-sm w-100 radius-12" style="margin-top: 16px; background-color: #6fb87d; border-color: #6fb87d;" id="submit-btn">
                    Valider
                </button>
            </form>

            <div class="mt-24 center-border-horizontal text-center">
                <span class="bg-base z-1 px-4" style="font-size: 0.875rem; color: var(--gray);">Code par e-mail</span>
            </div>
            <div class="mt-24 text-center">
                <form method="POST" action="{{ route('2fa.send-code') }}" class="d-inline" id="resend-form">
                    @csrf
                    <button type="submit" class="btn btn-link fw-medium p-0" style="font-size: 1rem; text-decoration: none; border: none; background: none; color: #6fb87d;" id="resend-btn">
                        Renvoyer le code
                    </button>
                </form>
            </div>

            <div class="mt-32 text-center">
                <p class="mb-0">
                    <form method="POST" action="{{ route('logout') }}" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-link text-secondary-light fw-medium p-0" style="font-size: 0.875rem; text-decoration: none; border: none; background: none;">
                            ← Retour à la connexion
                        </button>
                    </form>
                </p>
            </div>
        </div>
    </div>
</section>

<script nonce="{{ $cspNonce }}">
document.addEventListener('DOMContentLoaded', function() {
    const codeInput = document.querySelector('#code');
    const resendBtn = document.querySelector('#resend-btn');
    const resendForm = document.querySelector('#resend-form');
    const submitBtn = document.querySelector('#submit-btn');
    const form = document.querySelector('form[action="{{ route('2fa.verify') }}"]');
    let resendCooldown = 0;
    let isSubmitting = false;
    
    // Protection contre les double soumissions
    form.addEventListener('submit', function(e) {
        if (isSubmitting) {
            e.preventDefault();
            return false;
        }
        
        isSubmitting = true;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>Validation...';
        
        // Réactiver après 5 secondes au cas où
        setTimeout(() => {
            isSubmitting = false;
            submitBtn.disabled = false;
            submitBtn.innerHTML = 'Valider';
        }, 5000);
    });
    
    // Auto-formatage du code à 6 chiffres + Auto-submit
    codeInput.addEventListener('input', function(e) {
        let value = e.target.value.replace(/\D/g, ''); // Garder seulement les chiffres
        if (value.length > 6) {
            value = value.substring(0, 6);
        }
        e.target.value = value;
        
        // Auto-submit quand 6 chiffres sont entrés (avec protection)
        if (value.length === 6 && !isSubmitting) {
            setTimeout(() => {
                if (!isSubmitting) {
                    form.submit();
                }
            }, 500);
        }
    });
    
    // Gestion du bouton renvoyer code
    resendForm.addEventListener('submit', function(e) {
        if (resendCooldown > 0) {
            e.preventDefault();
            return;
        }
        
        // Désactiver le bouton et commencer le cooldown
        resendBtn.disabled = true;
        resendCooldown = 60; // 60 secondes
        
        // Mettre à jour le texte du bouton
        const originalText = resendBtn.textContent;
        resendBtn.textContent = `Renvoyer dans ${resendCooldown}s`;
        
        // Timer pour le cooldown
        const countdown = setInterval(() => {
            resendCooldown--;
            if (resendCooldown > 0) {
                resendBtn.textContent = `Renvoyer dans ${resendCooldown}s`;
            } else {
                clearInterval(countdown);
                resendBtn.disabled = false;
                resendBtn.textContent = originalText;
            }
        }, 1000);
        
        // Marquer que la 2FA est en cours
        sessionStorage.setItem('just_completed_2fa', 'true');
        
        // Laisser le formulaire se soumettre normalement
    });
});
</script>
@endsection