<?php
use Illuminate\Auth\Events\PasswordReset;
use Illuminate\Support\Facades\{Hash, Password, Session};
use Illuminate\Support\Str;
use Livewire\Attributes\{Locked, Title};
use Livewire\Component;
use Illuminate\Validation\Rules\Password as PasswordRule;
?>

<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="{{ __('Réinitialiser le mot de passe') }}"
            subtitle="{{ __('Saisissez votre e-mail et choisissez votre nouveau mot de passe') }}"
            class="shadow-xl bg-base-100"
            separator
            progress-indicator
        >
            @if (session('status'))
                <x-alert icon="o-check-circle" class="alert-success text-xs mb-4">
                    {{ session('status') }}
                </x-alert>
            @endif

            <x-form wire:submit="resetPassword" class="space-y-4">
                <x-input
                    label="{{ __('Adresse e-mail') }}"
                    wire:model="email"
                    icon="o-envelope"
                    type="email"
                    required
                    readonly
                />

                <div class="space-y-3">
                    <x-password
                        label="{{ __('Nouveau mot de passe') }}"
                        wire:model="password"
                        password-icon="o-key"
                        hint="{{ __('8 caractères min., majuscule, minuscule, chiffre et symbole.') }}"
                        clearable
                        required
                    />

                    <x-password
                        label="{{ __('Confirmer le mot de passe') }}"
                        wire:model="password_confirmation"
                        password-icon="o-key"
                        clearable
                        required
                    />

                    <div class="flex justify-end">
                        <x-button
                            type="button"
                            label="{{ __('Générer un mot de passe sécurisé') }}"
                            wire:click="generatePassword"
                            icon="o-wrench"
                            class="btn-ghost btn-xs text-primary"
                        />
                    </div>

                    {{-- Affichage du mot de passe généré --}}
                    @if($generatedPassword)
                        <div
                            x-data="{ copied: false }"
                            class="alert alert-warning shadow-sm mt-3 flex items-center justify-between p-3 rounded-xl"
                        >
                            <div class="flex items-center gap-3">
                                <x-icon name="o-key" class="w-5 h-5 shrink-0" />
                                <div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
                                    <span class="font-semibold text-xs text-base-content whitespace-nowrap">
                                        {{ __('Mot de passe généré :') }}
                                    </span>
                                    <code class="font-mono bg-base-100 px-2.5 py-1 rounded-md text-sm font-bold text-base-content select-all tracking-wider border border-base-300">
                                        {{ $generatedPassword }}
                                    </code>
                                </div>
                            </div>

                            <button
                                type="button"
                                class="btn btn-xs gap-1 transition-all"
                                :class="copied ? 'btn-success text-white' : 'btn-ghost bg-base-100/60 hover:bg-base-100 text-base-content'"
                                @click="
                                    navigator.clipboard.writeText('{{ $generatedPassword }}');
                                    copied = true;
                                    setTimeout(() => copied = false, 2000);
                                "
                            >
                                <template x-if="!copied">
                                    <span class="flex items-center gap-1">
                                        <x-icon name="o-document-duplicate" class="w-3.5 h-3.5" />
                                        <span>{{ __('Copier') }}</span>
                                    </span>
                                </template>

                                <template x-if="copied">
                                    <span class="flex items-center gap-1">
                                        <x-icon name="o-check" class="w-3.5 h-3.5" />
                                        <span>{{ __('Copié !') }}</span>
                                    </span>
                                </template>
                            </button>
                        </div>
                    @endif
                </div>

                <p class="text-xs text-base-content/60 pt-1">
                    <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="{{ __('Annuler') }}"
                            type="button"
                            icon="o-arrow-left"
                            class="btn-ghost btn-sm w-full sm:w-auto order-2 sm:order-1"
                            link="{{ route('login') }}"
                        />

                        <x-button
                            label="{{ __('Réinitialiser le mot de passe') }}"
                            type="submit"
                            icon-right="o-check"
                            class="btn-primary btn-sm w-full sm:w-auto order-1 sm:order-2"
                            spinner="resetPassword"
                        />
                    </div>
                </x-slot:actions>
            </x-form>
        </x-card>
    </div>
</div>