import { Head, useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react';

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 NeuralBackground from '@/components/landing/neural-background';
import AIParticles from '@/components/landing/ai-particles';
import Container from '@/components/landing/container';
import AppLogoIcon from '@/components/app-logo-icon';
import ThemeToggle from '@/components/theme-toggle';

export default function ForgotPassword({ status }: { status?: string }) {
    const { data, setData, post, processing, errors } = useForm<Required<{ email: string }>>({
        email: '',
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();

        post(route('password.email'));
    };

    return (
        <>
            <Head title="Forgot password" />
            <div className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 dark:from-slate-900 dark:via-purple-900 dark:to-slate-900">
                {/* Toggle de tema flotante */}
                <div className="fixed top-4 left-4 z-50">
                    <ThemeToggle />
                </div>
                <NeuralBackground />
                <AIParticles density={30} />
                <Container className="relative z-10 flex flex-col items-center justify-center min-h-screen py-12">
                    <div className="w-full max-w-md mx-auto bg-white/90 dark:bg-slate-900/80 rounded-3xl shadow-2xl border border-slate-200 dark:border-slate-800/60 backdrop-blur-md p-8 sm:p-10 flex flex-col gap-8">
                        <div className="flex flex-col items-center gap-3">
                            <AppLogoIcon className="w-12 h-12 mb-2 text-cyan-700 dark:text-cyan-400" />
                            <h1 className="text-2xl font-extrabold dark:text-white text-black">Recuperar contraseña</h1>
                            <p className="text-sm text-slate-500 dark:text-slate-300 text-center">Ingresa tu email para recibir un enlace de recuperación</p>
                        </div>

                        {status && <div className="text-center text-sm font-medium text-green-600">{status}</div>}

                        <div className="flex flex-col gap-6">
                            <form className="flex flex-col gap-6" onSubmit={submit}>
                                <div className="grid gap-6">
                                    <div className="grid gap-2">
                                        <Label htmlFor="email">Email address</Label>
                                        <Input
                                            id="email"
                                            type="email"
                                            name="email"
                                            autoComplete="off"
                                            value={data.email}
                                            autoFocus
                                            onChange={(e) => setData('email', e.target.value)}
                                            placeholder="email@example.com"
                                        />
                                        <InputError message={errors.email} />
                                    </div>

                                    <Button type="submit" className="mt-2 w-full bg-emerald-600 text-white font-bold rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 border-none" disabled={processing}>
                                        {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                                        Enviar enlace de recuperación
                                    </Button>
                                </div>

                                <div className="text-center text-sm text-muted-foreground">
                                    ¿Recordaste tu contraseña?{' '}
                                    <TextLink href={route('login')}>
                                        Inicia sesión
                                    </TextLink>
                                </div>
                            </form>
                        </div>
                    </div>
                </Container>
            </div>
        </>
    );
}
