import { useRef, useState } from 'react';
import { useForm } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/Components/ui/card';
import { toast } from 'sonner';
import { Eye, EyeOff, Loader2 } from 'lucide-react';
import useTranslation from '@/hooks/useTranslation'; 

export default function UpdatePasswordForm({ className = '' }) {
    const { t } = useTranslation(); 
    const passwordInput = useRef();
    const currentPasswordInput = useRef();
    
    // State for toggling visibility
    const [showCurrent, setShowCurrent] = useState(false);
    const [showNew, setShowNew] = useState(false);

    const { data, setData, errors, put, reset, processing } = useForm({
        current_password: '',
        password: '',
        password_confirmation: '',
    });

    const updatePassword = (e) => {
        e.preventDefault();

        put(route('password.update'), {
            preserveScroll: true,
            onSuccess: () => {
                reset();
                toast.success(t('_password_updated', 'Password Updated Successfully'));
            },
            onError: (errors) => {
                toast.error(t('_password_update_failed', 'Failed to update password'));
                if (errors.password) {
                    reset('password', 'password_confirmation');
                    passwordInput.current.focus();
                }
                if (errors.current_password) {
                    reset('current_password');
                    currentPasswordInput.current.focus();
                }
            },
        });
    };

    return (
        <section className={className}>
            <CardHeader>
                <CardTitle>{t('_update_password', 'Update Password')}</CardTitle>
                <CardDescription>
                    {t('_update_password_desc', 'Ensure your account is using a long, random password to stay secure.')}
                </CardDescription>
            </CardHeader>

            <form onSubmit={updatePassword}>
                <CardContent className="space-y-4">
                    
                    {/* Current Password */}
                    <div className="space-y-2">
                        <Label htmlFor="current_password">{t('_current_password', 'Current Password')}</Label>
                        <div className="relative">
                            <Input
                                id="current_password"
                                ref={currentPasswordInput}
                                value={data.current_password}
                                onChange={(e) => setData('current_password', e.target.value)}
                                type={showCurrent ? "text" : "password"}
                                className="pe-10"
                                autoComplete="current-password"
                            />
                            <button
                                type="button"
                                onClick={() => setShowCurrent(!showCurrent)}
                                className="absolute end-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground"
                            >
                                {showCurrent ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                            </button>
                        </div>
                        {errors.current_password && <p className="text-sm text-destructive">{errors.current_password}</p>}
                    </div>

                    {/* New Password */}
                    <div className="space-y-2">
                        <Label htmlFor="password">{t('_new_password', 'New Password')}</Label>
                        <div className="relative">
                            <Input
                                id="password"
                                ref={passwordInput}
                                value={data.password}
                                onChange={(e) => setData('password', e.target.value)}
                                type={showNew ? "text" : "password"}
                                className="pe-10"
                                autoComplete="new-password"
                            />
                            <button
                                type="button"
                                onClick={() => setShowNew(!showNew)}
                                className="absolute end-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground"
                            >
                                {showNew ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                            </button>
                        </div>
                        {errors.password && <p className="text-sm text-destructive">{errors.password}</p>}
                    </div>

                    {/* Confirm Password */}
                    <div className="space-y-2">
                        <Label htmlFor="password_confirmation">{t('_confirm_password', 'Confirm Password')}</Label>
                        <Input
                            id="password_confirmation"
                            value={data.password_confirmation}
                            onChange={(e) => setData('password_confirmation', e.target.value)}
                            type={showNew ? "text" : "password"} 
                            autoComplete="new-password"
                        />
                        {errors.password_confirmation && <p className="text-sm text-destructive">{errors.password_confirmation}</p>}
                    </div>

                </CardContent>

                <CardFooter className="border-t px-6 py-4">
                    <Button disabled={processing}>
                        {processing && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
                        {t('_update_password', 'Update Password')}
                    </Button>
                </CardFooter>
            </form>
        </section>
    );
}