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

{% block title %}Connexion - YimaShop{% endblock %}

{% block guest_content %}
<div>
    {# Logo and Header #}
    <div class="text-center mb-10">
        <div class="flex justify-center mb-6">
            <img src="{{ asset('logo.png') }}" alt="YimaShop Logo" class="h-24 w-auto">
        </div>
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white">
            Bienvenue
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Connectez-vous à votre espace YimaShop
        </p>
    </div>

    {% if error %}
        <div class="bg-red-50 dark:bg-red-900/20 border-2 border-red-200 dark:border-red-800 rounded-xl p-4 mb-6 shadow-sm animate-shake">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-red-500 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="ml-3 flex-1">
                    <h3 class="text-sm font-semibold text-red-800 dark:text-red-400 mb-1">
                        Erreur de connexion
                    </h3>
                    <p class="text-sm text-red-700 dark:text-red-400">
                        {{ error.messageKey|trans(error.messageData, 'security') }}
                    </p>
                </div>
            </div>
        </div>
    {% endif %}

    <form method="post" action="{{ path('app_login') }}" class="space-y-6" data-controller="login-form" data-action="submit->login-form#handleSubmit">
        <div>
            <label for="email" class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
                Adresse email
            </label>
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
                    </svg>
                </div>
                <input
                    type="email"
                    id="email"
                    name="email"
                    value="{{ last_username }}"
                    required
                    autofocus
                    autocomplete="email"
                    class="appearance-none block w-full pl-10 px-4 py-3.5 border-2 border-gray-300 dark:border-gray-600 rounded-xl placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 dark:text-white transition-all duration-200"
                    placeholder="votre@email.com">
            </div>
        </div>

        <div>
            <label for="password" class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
                Mot de passe
            </label>
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                </div>
                <input
                    type="password"
                    id="password"
                    name="password"
                    required
                    autocomplete="current-password"
                    data-login-form-target="password"
                    class="appearance-none block w-full pl-10 pr-12 px-4 py-3.5 border-2 border-gray-300 dark:border-gray-600 rounded-xl placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 dark:text-white transition-all duration-200"
                    placeholder="••••••••">
                <button
                    type="button"
                    data-action="click->login-form#togglePassword"
                    class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none transition-colors duration-200">
                    <span data-login-form-target="toggleIcon">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                    </span>
                </button>
            </div>
        </div>

        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <input
                    type="checkbox"
                    id="_remember_me"
                    name="_remember_me"
                    class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded cursor-pointer transition-colors duration-200">
                <label for="_remember_me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300 cursor-pointer hover:text-gray-900 dark:hover:text-white transition-colors duration-200">
                    Se souvenir de moi
                </label>
            </div>

            <div class="text-sm">
                <a href="{{ path('app_password_reset_request') }}" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
                    Mot de passe oublié ?
                </a>
            </div>
        </div>

        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

        <div class="pt-2">
            <button
                type="submit"
                data-login-form-target="submit"
                class="group relative w-full flex justify-center items-center py-3.5 px-4 rounded-xl text-base font-semibold text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 active:translate-y-0">
                <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                    <svg class="h-5 w-5 text-blue-400 group-hover:text-blue-300 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
                    </svg>
                </span>
                <span data-login-form-target="buttonText" class="transition-all duration-200">Se connecter</span>
                <span data-login-form-target="spinner" class="hidden ml-2 animate-spin">
                    <svg class="h-5 w-5 text-white" 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>


        {# Additional info #}
        <div class="mt-6 text-center space-y-2">
            <p class="text-xs text-gray-500 dark:text-gray-400">
                En vous connectant, vous acceptez nos conditions d'utilisation
            </p>
            <p class="text-xs text-gray-400 dark:text-gray-500">
                Version {{ app_version }} &middot; &copy; {{ 'now'|date('Y') }} YimaShop
            </p>
        </div>
    </form>

    {# PWA Install Banner - shown only if app is not installed #}
    <div id="pwa-install-banner" class="hidden mt-6 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/30 dark:to-indigo-900/30 border border-blue-200 dark:border-blue-800 rounded-xl p-4 shadow-sm">
        <div class="flex items-center justify-between">
            <div class="flex items-center min-w-0">
                <div class="flex-shrink-0 rounded-lg p-2 bg-blue-100 dark:bg-blue-900">
                    <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                    </svg>
                </div>
                <div class="ml-3 min-w-0">
                    <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">Installer l'application</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Accès rapide depuis votre écran d'accueil</p>
                </div>
            </div>
            <div class="flex-shrink-0 flex items-center gap-2 ml-3">
                <button id="pwa-install-btn" type="button"
                    class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                    Installer
                </button>
                <button id="pwa-install-dismiss" type="button"
                    class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-lg transition-colors duration-200">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block login_scripts %}
<script>
(function() {
    // --- PWA Install Banner ---
    var deferredPrompt = null;
    var banner = document.getElementById('pwa-install-banner');
    var installBtn = document.getElementById('pwa-install-btn');
    var dismissBtn = document.getElementById('pwa-install-dismiss');

    if (banner && !(window.matchMedia('(display-mode: standalone)').matches || navigator.standalone) && !sessionStorage.getItem('pwa-install-dismissed')) {
        window.addEventListener('beforeinstallprompt', function(e) {
            e.preventDefault();
            deferredPrompt = e;
            banner.classList.remove('hidden');
        });

        installBtn.addEventListener('click', async function() {
            if (!deferredPrompt) return;
            deferredPrompt.prompt();
            var result = await deferredPrompt.userChoice;
            if (result.outcome === 'accepted') banner.classList.add('hidden');
            deferredPrompt = null;
        });

        dismissBtn.addEventListener('click', function() {
            banner.classList.add('hidden');
            sessionStorage.setItem('pwa-install-dismissed', '1');
        });

        window.addEventListener('appinstalled', function() {
            banner.classList.add('hidden');
            deferredPrompt = null;
        });
    }
})();
</script>
{% endblock %}