<?php

use Livewire\Attributes\{Validate, Title};
use Livewire\Component;
use Illuminate\Support\Str;
use Illuminate\Auth\Events\Lockout;
use Illuminate\Support\Facades\{Auth, RateLimiter, Session};
use Illuminate\Validation\ValidationException;

new
#[Title('Connexion')]
class extends Component {

    #[Validate('required|email')]
    public string $email = '';

    #[Validate('required')]
    public string $password = '';

    #[Validate('boolean')]
    public bool $remember = false;

    public function login()
    {
        $this->validate();
        $this->authenticate();
        Session::regenerate();

        $this->redirectIntended(default: url('/'), navigate: true);
    }

    public function authenticate(): void
    {
        $this->ensureIsNotRateLimited();

        if (! Auth::attempt($this->only(['email', 'password']), $this->remember)) {
            RateLimiter::hit($this->throttleKey());

            throw ValidationException::withMessages([
                'email' => __('auth.failed'),
            ]);
        }

        RateLimiter::clear($this->throttleKey());
    }

    protected function ensureIsNotRateLimited(): void
    {
        if (! RateLimiter::tooManyAttempts($this->throttleKey(), 5)) {
            return;
        }

        event(new Lockout(request()));

        $seconds = RateLimiter::availableIn($this->throttleKey());

        throw ValidationException::withMessages([
            'email' => trans('auth.throttle', [
                'seconds' => $seconds,
                'minutes' => ceil($seconds / 60),
            ]),
        ]);
    }

    protected function throttleKey(): string
    {
        return Str::lower($this->email).'|'.request()->ip();
    }

}; ?>

<div class="flex items-center justify-center min-h-[calc(100vh-16rem)] py-12 px-4">
    <div class="w-full max-w-md">
        <x-card
            title="{{ __('Connexion') }}"
            subtitle="{{ __('Accédez à votre compte pour gérer vos commandes') }}"
            class="shadow-xl bg-base-100"
            separator
            progress-indicator
        >
            <x-form wire:submit="login" class="space-y-4">
                <x-input
                    label="{{ __('Adresse e-mail') }}"
                    wire:model="email"
                    icon="o-envelope"
                    type="email"
                    required
                />

                <x-password
                    label="{{ __('Mot de passe') }}"
                    wire:model="password"
                    clearable
                    required
                />

                <div class="flex items-center justify-between pt-1">
                    <x-checkbox
                        label="{{ __('Rester connecté') }}"
                        wire:model="remember"
                        class="checkbox-primary checkbox-sm"
                    />

                    <x-button
                        label="{{ __('Mot de passe oublié ?') }}"
                        class="btn-ghost btn-xs text-base-content/70 hover:text-primary"
                        link="/forgot-password"
                    />
                </div>

                <p class="text-xs text-base-content/60 pt-2">
                    <span class="text-error">*</span> @lang('Champs obligatoires')
                </p>

                <x-slot:actions>
                    <div class="flex flex-col sm:flex-row items-center justify-between gap-3 w-full pt-2">
                        <x-button
                            label="{{ __('Créer un compte') }}"
                            class="btn-ghost btn-sm w-full sm:w-auto order-2 sm:order-1"
                            link="/register"
                        />

                        <x-button
                            label="{{ __('Se connecter') }}"
                            type="submit"
                            icon-right="o-arrow-right-end-on-rectangle"
                            class="btn-primary btn-sm w-full sm:w-auto order-1 sm:order-2"
                            spinner="login"
                        />
                    </div>
                </x-slot:actions>
            </x-form>
        </x-card>
    </div>
</div>
