import { Head, useForm, Link } from '@inertiajs/react';
import GuestLayout from '@/Layouts/GuestLayout';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/Components/ui/card';
import { ArrowLeft, Mail } from 'lucide-react';
import useTranslation from '@/hooks/useTranslation'; 

export default function ForgotPassword({ status }) {
    const { t } = useTranslation();

    const { data, setData, post, processing, errors } = useForm({
        email: '',
    });

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

    return (
        <GuestLayout>
            <Head title={t('_forgot_password_title', 'Forgot Password')} />

            <div className="flex items-center justify-center min-h-screen bg-muted/40 px-4">
                <Card className="w-full max-w-md shadow-lg border-0 sm:border">
                    <CardHeader className="space-y-1">
                        <CardTitle className="text-2xl font-bold text-center">{t('_reset_password', 'Reset Password')}</CardTitle>
                        <CardDescription className="text-center">
                            {t('_reset_password_desc', "Enter your email address and we'll send you a link to reset your password.")}
                        </CardDescription>
                    </CardHeader>
                    
                    <CardContent>
                        {status && (
                            <div className="mb-4 p-3 rounded-md bg-green-50 text-green-600 text-sm font-medium border border-green-200">
                                {status}
                            </div>
                        )}

                        <form onSubmit={submit} className="space-y-4">
                            <div className="space-y-2">
                                <Label htmlFor="email">{t('_email_address', 'Email Address')}</Label>
                                <div className="relative">
                                    <Mail className="absolute start-3 top-2.5 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="email"
                                        type="email"
                                        name="email"
                                        placeholder="name@example.com"
                                        value={data.email}
                                        className="ps-9"
                                        autoFocus
                                        onChange={(e) => setData('email', e.target.value)}
                                        required
                                    />
                                </div>
                                {errors.email && (
                                    <p className="text-sm text-red-500 font-medium">{errors.email}</p>
                                )}
                            </div>

                            <Button className="w-full" disabled={processing}>
                                {processing ? t('_sending_link', 'Sending Link...') : t('_send_reset_link', 'Send Password Reset Link')}
                            </Button>
                        </form>
                    </CardContent>

                    <CardFooter className="flex justify-center border-t p-4 bg-muted/20">
                        <Link 
                            href={route('login')} 
                            className="flex items-center text-sm text-muted-foreground hover:text-primary transition-colors"
                        >
                            <ArrowLeft className="h-4 w-4 ms-2 rtl:-scale-x-100" />
                            {t('_back_to_login', 'Back to Login')}
                        </Link>
                    </CardFooter>
                </Card>
            </div>
        </GuestLayout>
    );
}