import { Form, Head } from '@inertiajs/react';
import { motion } from 'framer-motion';
import { LoaderCircle } from 'lucide-react';
import { useEffect } from 'react';
import { toast } from 'sonner';
import InputError from '@/components/input-error';
import TextLink from '@/components/text-link';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { login } from '@/routes';
import { email } from '@/routes/password';

const itemVariants = {
    hidden: { opacity: 0, y: 15 },
    visible: { 
        opacity: 1, 
        y: 0, 
        transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] } 
    }
};

export default function ForgotPassword({ status }: { status?: string }) {
    useEffect(() => {
        if (status) {
            toast.success(status);
        }
    }, [status]);

    return (
        <>
            <Head title="Mot de passe oublié" />

            <div className="space-y-6">
                <Form {...email.form()}>
                    {({ processing, errors }) => (
                        <motion.div 
                            initial="hidden"
                            animate="visible"
                            variants={{
                                visible: {
                                    transition: {
                                        staggerChildren: 0.08,
                                        delayChildren: 0.35
                                    }
                                }
                            }}
                            className="grid gap-5"
                        >
                            <motion.div variants={itemVariants} className="grid gap-2">
                                <Label htmlFor="email">Adresse e-mail</Label>
                                <Input
                                    id="email"
                                    type="email"
                                    name="email"
                                    autoComplete="off"
                                    autoFocus
                                    placeholder="email@exemple.com"
                                    className="bg-muted border-none shadow-none rounded-xl py-6 px-5 focus-visible:ring-2 focus-visible:ring-primary/50 text-base transition-all duration-300 hover:bg-muted/80 focus-visible:scale-[1.01] focus-visible:-translate-y-0.5 focus-visible:shadow-md"
                                />

                                <InputError message={errors.email} />
                            </motion.div>

                            <motion.div variants={itemVariants} className="my-2 flex items-center justify-start">
                                <Button
                                    className="w-full rounded-full py-6 text-base bg-primary hover:bg-primary/90 text-primary-foreground font-medium transition-all duration-300 hover:scale-[1.02] hover:-translate-y-0.5 hover:shadow-lg active:scale-[0.98]"
                                    disabled={processing}
                                    data-test="email-password-reset-link-button"
                                >
                                    {processing && (
                                        <LoaderCircle className="h-4 w-4 animate-spin mr-2" />
                                    )}
                                    Envoyer le lien de réinitialisation
                                </Button>
                            </motion.div>
                        </motion.div>
                    )}
                </Form>

                <div className="space-x-1 text-center text-sm text-muted-foreground">
                    <span>Ou revenir à la</span>
                    <TextLink href={login()}>connexion</TextLink>
                </div>
            </div>
        </>
    );
}

ForgotPassword.layout = {
    title: 'Mot de passe oublié',
    description:
        'Saisissez votre adresse e-mail pour recevoir un lien de réinitialisation',
};
