import InputError from '@/Components/InputError';
import PrimaryButton from '@/Components/PrimaryButton';
import TextInput from '@/Components/TextInput';
import { Head, Link, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';
import { motion } from 'framer-motion';
import { ArrowLeft, Mail, ShieldQuestion } from 'lucide-react';

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

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route('password.email'));
    };

    return (
        <div className="flex min-h-screen bg-background">
            <Head title="Forgot Password" />

            {/* Left Side: Visual */}
            <div className="relative hidden w-1/2 lg:block">
                <img 
                    src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&q=80" 
                    alt="Recovery Visual" 
                    className="absolute inset-0 h-full w-full object-cover"
                />
                <div className="absolute inset-0 bg-primary/20 backdrop-blur-[2px]" />
                <div className="absolute inset-0 flex flex-col justify-end p-20 text-white">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8, delay: 0.2 }}
                    >
                        <h2 className="font-display text-6xl font-bold leading-tight">
                            Secure <br />
                            <span className="italic text-accent">recovery.</span>
                        </h2>
                        <p className="mt-6 max-w-md text-lg text-cream/80">
                            We've got you covered. Enter your email and we'll send you a secure link to reset your administrative credentials.
                        </p>
                    </motion.div>
                </div>
            </div>

            {/* Right Side: Form */}
            <div className="flex w-full flex-col justify-center px-8 lg:w-1/2 lg:px-24">
                <div className="mx-auto w-full max-w-md">
                    <motion.div
                        initial={{ opacity: 0, x: 20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.6 }}
                    >
                        <Link href="/" className="mb-10 inline-flex items-center gap-2">
                            <span className="h-3 w-3 rounded-full bg-accent animate-pulse" />
                            <span className="font-display text-2xl font-bold">Altivate<span className="text-accent">.</span></span>
                        </Link>

                        <div className="mb-10">
                            <h1 className="font-display text-4xl font-bold tracking-tight">Forgot password?</h1>
                            <p className="mt-2 text-muted-foreground">No problem. Enter your email address and we'll send you a reset link.</p>
                        </div>

                        {status && (
                            <div className="mb-6 rounded-2xl bg-emerald-50 p-4 text-sm font-medium text-emerald-600">
                                {status}
                            </div>
                        )}

                        <form onSubmit={submit} className="space-y-6">
                            <div className="space-y-2">
                                <label className="eyebrow ml-1" htmlFor="email">Email Address</label>
                                <div className="relative">
                                    <div className="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none text-muted-foreground">
                                        <Mail className="h-4 w-4" />
                                    </div>
                                    <TextInput
                                        id="email"
                                        type="email"
                                        name="email"
                                        value={data.email}
                                        className="block w-full pl-11 h-12 rounded-2xl border-border bg-secondary/30 focus:bg-background transition-all"
                                        autoComplete="username"
                                        isFocused={true}
                                        placeholder="admin@altivate.com"
                                        onChange={(e) => setData('email', e.target.value)}
                                        required
                                    />
                                </div>
                                <InputError message={errors.email} className="mt-1 ml-1" />
                            </div>

                            <PrimaryButton 
                                className="w-full h-12 rounded-2xl bg-primary text-primary-foreground hover:bg-accent flex items-center justify-center gap-2 group transition-all" 
                                disabled={processing}
                            >
                                {processing ? 'Sending link...' : 'Email Reset Link'}
                            </PrimaryButton>

                            <div className="text-center mt-6">
                                <Link
                                    href={route('login')}
                                    className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-accent transition-colors"
                                >
                                    <ArrowLeft className="h-4 w-4" /> Back to login
                                </Link>
                            </div>
                        </form>

                        <p className="mt-10 text-center text-xs text-muted-foreground">
                            © {new Date().getFullYear()} Altivate Solutions. All rights reserved.
                        </p>
                    </motion.div>
                </div>
            </div>
        </div>
    );
}
