{% extends 'base.html.twig' %}

{% block title %}Connexion — Scan Inventaire{% endblock %}

{% block body %}
<div class="min-h-screen bg-gray-50 flex flex-col items-center justify-center px-4" data-controller="login">
    <div class="mb-8 flex flex-col items-center gap-4">
        <img src="{{ asset('logo-emilfrey.png') }}" alt="Emil Frey First" class="h-11 w-auto">
        <div class="flex items-center gap-2.5">
            <div class="w-8 h-8 bg-red-brand rounded-lg flex items-center justify-center shadow-red-glow">
                <svg viewBox="0 0 24 24" fill="none" class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg">
                    <rect x="2" y="6" width="20" height="12" rx="2" stroke="currentColor" stroke-width="2" />
                    <path d="M6 12h2M10 12h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                </svg>
            </div>
            <div class="text-center">
                <p class="font-display font-bold text-lg text-gray-900 tracking-tight leading-none">Scan Inventaire</p>
                <p class="text-gray-500 text-xs mt-0.5">Scanner de plaques & VIN</p>
            </div>
        </div>
    </div>

    <div class="w-full max-w-md bg-white rounded-2xl border border-gray-200 shadow-lg overflow-hidden">
        <div class="flex">
            <div class="h-1 flex-1 bg-red-brand"></div>
            <div class="h-1 flex-1 bg-gray-200 transition-colors duration-500" data-login-target="bar2"></div>
        </div>

        <div class="p-8">
            {# ─── Étape 1 : email ─── #}
            <div data-login-target="emailStep">
                <div class="mb-6">
                    <h2 class="text-xl font-bold text-gray-900 mb-1">Connexion</h2>
                    <p class="text-gray-500 text-sm">Entrez votre adresse email professionnelle pour recevoir un code de connexion.</p>
                </div>
                <form data-action="login#sendCode" class="space-y-4">
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Adresse email</label>
                        <input id="email" type="email" required autofocus autocomplete="email"
                               data-login-target="emailInput" data-action="input->login#clearError"
                               placeholder="prenom.nom@emilfrey.fr"
                               class="w-full px-4 py-3 bg-white border border-gray-300 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-brand focus:border-transparent transition-all text-sm">
                    </div>
                    <div data-login-target="emailError" class="hidden flex items-start gap-2.5 bg-red-50 border border-red-200 rounded-xl px-4 py-3">
                        <svg class="w-4 h-4 text-red-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <p class="text-red-600 text-sm" data-login-target="emailErrorText"></p>
                    </div>
                    <button type="submit" data-login-target="emailSubmit"
                            class="w-full py-3 bg-red-brand text-white font-semibold rounded-xl hover:bg-red-brand-dark disabled:opacity-50 disabled:cursor-not-allowed transition-all active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-red-brand focus:ring-offset-2 focus:ring-offset-white text-sm">
                        Recevoir le code par email
                    </button>
                </form>
                <div class="mt-5 p-3 bg-gray-50 rounded-xl border border-gray-200">
                    <p class="text-xs text-gray-500 text-center">
                        Accès réservé aux collaborateurs
                        <span class="text-gray-700 font-medium">@emilfrey.fr</span> et
                        <span class="text-gray-700 font-medium">@autosphere.fr</span>
                    </p>
                </div>
            </div>

            {# ─── Étape 2 : code ─── #}
            <div data-login-target="codeStep" class="hidden">
                <div class="mb-6">
                    <button type="button" data-action="login#backToEmail" class="flex items-center gap-1.5 text-gray-500 hover:text-gray-900 text-sm mb-4 transition-colors">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                        </svg>
                        Retour
                    </button>
                    <h2 class="text-xl font-bold text-gray-900 mb-1">Code de vérification</h2>
                    <p class="text-gray-500 text-sm">Un code à 6 chiffres a été envoyé à <span class="text-gray-700 font-medium" data-login-target="emailDisplay"></span></p>
                </div>
                <form data-action="login#verifyForm" class="space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-3 text-center">Entrez le code reçu par email</label>
                        <div class="flex gap-2 justify-center">
                            {% for i in 0..5 %}
                                <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1"
                                       data-login-target="code"
                                       data-action="input->login#onCodeInput keydown->login#onCodeKeydown paste->login#onCodePaste"
                                       autocomplete="{{ i == 0 ? 'one-time-code' : 'off' }}"
                                       aria-label="Chiffre {{ i + 1 }}"
                                       class="w-11 h-14 text-center text-xl font-bold bg-white border-2 border-gray-300 rounded-xl text-gray-900 focus:outline-none focus:border-red-brand focus:ring-2 focus:ring-red-brand/30 disabled:opacity-50 transition-all">
                            {% endfor %}
                        </div>
                    </div>
                    <div data-login-target="codeError" class="hidden flex items-start gap-2.5 bg-red-50 border border-red-200 rounded-xl px-4 py-3">
                        <svg class="w-4 h-4 text-red-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <p class="text-red-600 text-sm" data-login-target="codeErrorText"></p>
                    </div>
                    <button type="submit" data-login-target="codeSubmit"
                            class="w-full py-3 bg-red-brand text-white font-semibold rounded-xl hover:bg-red-brand-dark disabled:opacity-50 disabled:cursor-not-allowed transition-all active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-red-brand text-sm">
                        Se connecter
                    </button>
                    <div class="text-center">
                        <p class="text-gray-400 text-xs mb-1">Vous n'avez pas reçu de code ?</p>
                        <button type="button" data-action="login#resend" data-login-target="resend"
                                class="text-sm text-gray-500 hover:text-gray-900 disabled:text-gray-300 disabled:cursor-not-allowed transition-colors">Renvoyer le code</button>
                    </div>
                </form>
                <div class="mt-5 flex items-center gap-2 text-gray-400 text-xs">
                    <svg class="w-3.5 h-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                    <span>Le code expire dans 15 minutes</span>
                </div>
            </div>

        </div>
    </div>

    <p class="mt-6 text-gray-400 text-xs text-center">© {{ 'now'|date('Y') }} Emil Frey France — Accès restreint</p>
</div>
{% endblock %}
