import { useEffect } from 'react';
import { Head, useForm } from '@inertiajs/react';
import useTranslation from '@/hooks/useTranslation'; 

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 { Mail, Lock, Loader2, ArrowRight } from 'lucide-react';

export default function ResetPassword({ token, email }) {
    const { t } = useTranslation(); 

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

    useEffect(() => {
        return () => {
            reset('password', 'password_confirmation');
        };
    }, []);

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

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

            <div className="flex items-center justify-center min-h-[80vh]">
                <Card className="w-full max-w-md shadow-xl border-0 sm:border bg-card">
                    
                    <CardHeader className="space-y-1 text-center">
                        <CardTitle className="text-2xl font-bold tracking-tight">
                            {t('_reset_password', 'Reset Password')}
                        </CardTitle>
                        <CardDescription>
                            {t('_reset_password_desc', 'Choose a strong new password for your account.')}
                        </CardDescription>
                    </CardHeader>

                    <CardContent>
                        <form onSubmit={submit} className="space-y-4">
                            
                            {/* Email Field (pre-filled) */}
                            <div className="space-y-2">
                                <Label htmlFor="email">{t('_auth_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"
                                        value={data.email}
                                        className="ps-9 bg-muted/50"
                                        autoComplete="username"
                                        onChange={(e) => setData('email', e.target.value)}
                                        readOnly
                                        disabled
                                    />
                                </div>
                                {errors.email && <p className="text-sm font-medium text-destructive">{errors.email}</p>}
                            </div>

                            {/* New Password Field */}
                            <div className="space-y-2">
                                <Label htmlFor="password">{t('_auth_new_password', 'New Password')}</Label>
                                <div className="relative">
                                    <Lock className="absolute start-3 top-2.5 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="password"
                                        type="password"
                                        name="password"
                                        value={data.password}
                                        className="ps-9"
                                        autoComplete="new-password"
                                        autoFocus
                                        onChange={(e) => setData('password', e.target.value)}
                                        required
                                    />
                                </div>
                                {errors.password && <p className="text-sm font-medium text-destructive">{errors.password}</p>}
                            </div>

                            {/* Confirm Password Field */}
                            <div className="space-y-2">
                                <Label htmlFor="password_confirmation">{t('_auth_confirm_password', 'Confirm Password')}</Label>
                                <div className="relative">
                                    <Lock className="absolute start-3 top-2.5 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        type="password"
                                        id="password_confirmation"
                                        name="password_confirmation"
                                        value={data.password_confirmation}
                                        className="ps-9"
                                        autoComplete="new-password"
                                        onChange={(e) => setData('password_confirmation', e.target.value)}
                                        required
                                    />
                                </div>
                                {errors.password_confirmation && <p className="text-sm font-medium text-destructive">{errors.password_confirmation}</p>}
                            </div>
                            
                            <Button className="w-full mt-4" disabled={processing}>
                                {processing ? (
                                    <>
                                        <Loader2 className="me-2 h-4 w-4 animate-spin" />
                                        {t('_processing', 'Processing...')}
                                    </>
                                ) : (
                                    <>
                                        {t('_reset_password', 'Reset Password')}
                                        <ArrowRight className="ms-2 h-4 w-4" />
                                    </>
                                )}
                            </Button>

                        </form>
                    </CardContent>
                </Card>
            </div>
        </GuestLayout>
    );
}