@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 position-relative">
        <a href="{{ url('/') }}" class="btn-retour-connexion" title="Retour à l'accueil" aria-label="Retour à l'accueil">Retour</a>
        <div class="max-w-600-px mx-auto w-100" style="width: 100%; max-width: 600px;">
            <a href="{{ url('/') }}" class="mb-48 d-inline-block max-w-290-px">
                <img src="{{ asset('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;">Identifiez-vous</h2>
            <p class="mb-40 text-secondary-light" style="font-size: 1rem; line-height: 1.5; font-weight: 400;">Accédez à votre compte</p>

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

                <div class="icon-field mb-24">
                    <span class="icon">
                        <iconify-icon icon="mage:email"></iconify-icon>
                    </span>
                    <input type="text" 
                           class="form-control h-56-px bg-neutral-50 radius-12 @error('login') is-invalid @enderror"
                           placeholder="Adresse e-mail" 
                           id="login" 
                           name="login"
                           value="{{ old('login', $rememberedEmail ?? '') }}"
                           autocomplete="username" 
                           required>
                </div>

                <div class="position-relative">
                    <div class="icon-field">
                        <span class="icon">
                            <iconify-icon icon="solar:lock-password-outline"></iconify-icon>
                        </span>
                        <input type="password" 
                               class="form-control h-56-px bg-neutral-50 radius-12 @error('password') is-invalid @enderror"
                               placeholder="Mot de passe" 
                               id="password" 
                               name="password"
                               autocomplete="current-password" 
                               required>
                    </div>
                    <button type="button" 
                            class="toggle-password cursor-pointer position-absolute end-0 top-50 translate-middle-y me-20 text-secondary-light"
                            data-toggle="#password" 
                            aria-label="Afficher/masquer le mot de passe">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="eye-icon">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="eye-off-icon">
                            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>

                <div class="mb-32" style="margin-top: 32px;">
                    <div class="d-flex justify-content-between align-items-center" style="padding-left: 0; margin-left: 0;">
                        <a href="{{ route('forgot-password') }}" class="fw-medium" style="font-size: 1rem; color: #6fb87d;">Mot de passe oublié ?</a>
                    </div>
                </div>

                @if(request('error') === 'session_expired' || session('error'))
                    <div class="alert alert-warning mb-24" style="margin-top: 0; margin-bottom: 24px; padding: 12px 16px; border-radius: 8px; background-color: #fff3cd; border: 1px solid #ffecb5; color: #856404;">
                        {{ request('error') === 'session_expired' ? 'Votre session a expiré, veuillez vous reconnecter.' : session('error') }}
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger mb-24" style="margin-top: 0; margin-bottom: 24px; padding: 12px 16px; border-radius: 8px; background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24;">
                        <ul class="mb-0" style="list-style: none; padding: 0; margin: 0;">
                            @foreach($errors->all() as $error)
                                <li style="margin-bottom: 4px;">{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

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

                {{-- Masqué : pour réafficher "Pas encore de compte ?" et le bouton "Se créer un compte", supprimer le style display:none ci-dessous --}}
                <div class="mt-24 center-border-horizontal text-center" style="display: none;">
                    <span class="bg-base z-1 px-4" style="font-size: 0.875rem; color: var(--gray);">Pas encore de compte ?</span>
                </div>
                <div class="mt-24 text-center" style="display: none;">
                    <p class="mb-0"><a href="{{ route('signup') }}" class="fw-medium" style="font-size: 1rem; color: #6fb87d;">Se créer un compte</a></p>
                </div>
            </form>
        </div>
    </div>
</section>

@push('styles')
<style>
.btn-retour-connexion {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    left: auto;
    display: inline-block;
    padding: 0.6rem 1.25rem;
    background: #6fb87d;
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-retour-connexion:hover {
    background: #5da66d;
    color: #fff;
}
@media (max-width: 991px) {
    .btn-retour-connexion { right: 1rem; top: 1rem; padding: 0.6rem 1.25rem; font-size: 0.9rem; }
}
</style>
@endpush

@push('scripts')
<script nonce="{{ $cspNonce }}">
document.addEventListener('DOMContentLoaded', function() {
    // Si déjà connecté (même session dans un autre onglet), rediriger vers le dashboard
    function checkAlreadyLoggedIn() {
        if (document.hidden) return;
        fetch('{{ route("api.auth.check") }}', { credentials: 'same-origin' })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.authenticated && data.redirect) {
                    window.location.replace(data.redirect);
                }
            })
            .catch(function() {});
    }
    checkAlreadyLoggedIn();
    document.addEventListener('visibilitychange', function() {
        if (!document.hidden) checkAlreadyLoggedIn();
    });
    // Vérification périodique tant que la page connexion est visible (au cas où l'utilisateur s'est connecté dans un autre onglet)
    setInterval(checkAlreadyLoggedIn, 2000);

    // Gérer les erreurs 419 et actualiser automatiquement si nécessaire
    const errorMessage = document.querySelector('.alert-danger');
    if (errorMessage && (errorMessage.textContent.includes('419') || errorMessage.textContent.includes('Page Expired')) && !sessionStorage.getItem('error_refreshed')) {
        console.log('Erreur 419 détectée - actualisation de la page');
        sessionStorage.setItem('error_refreshed', 'true');
        setTimeout(function() {
            window.location.reload(true);
        }, 1000);
    }
    if (sessionStorage.getItem('error_refreshed')) {
        setTimeout(function() {
            sessionStorage.removeItem('error_refreshed');
        }, 5000);
    }
});
</script>
@endpush
@endsection