import { useRef } 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 {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
    DialogClose
} from "@/Components/ui/dialog";
import { TriangleAlert } from 'lucide-react';
import useTranslation from '@/hooks/useTranslation';

export default function DeleteUserForm({ className = '' }) {
    const { t } = useTranslation(); 
    const passwordInput = useRef();

    const {
        data,
        setData,
        delete: destroy,
        processing,
        reset,
        errors,
        clearErrors,
    } = useForm({
        password: '',
    });

    const deleteUser = (e) => {
        e.preventDefault();
        
        destroy(route('settings.destroy'), {
            preserveScroll: true,
            onError: () => passwordInput.current.focus(),
            onFinish: () => reset(),
        });
    };

    const handleOpenChange = (open) => {
        if (!open) {
            clearErrors();
            reset();
        }
    };

    return (
        <section className={className}>
            <div className="p-6">
                <div className="flex items-center justify-between gap-4">
                    <div>
                        <h4 className="font-medium text-red-700 dark:text-red-400">
                            {t('_delete_account', 'Delete Account')}
                        </h4>
                        <p className="text-sm text-muted-foreground mt-1">
                            {t('_delete_account_desc', 'Once deleted, your account is gone forever. Please be certain.')}
                        </p>
                    </div>
                    <Dialog onOpenChange={handleOpenChange}>
                        <DialogTrigger asChild>
                            <Button variant="destructive">
                                {t('_delete_account', 'Delete Account')}
                            </Button>
                        </DialogTrigger>
                        
                        <DialogContent className="sm:max-w-md">
                            <DialogHeader>
                                <DialogTitle className="flex items-center gap-2 text-destructive">
                                    <TriangleAlert className="h-5 w-5" />
                                    {t('_are_you_sure', 'Are you sure?')}
                                </DialogTitle>
                                <DialogDescription>
                                    {t('_delete_account_warning', 'This action cannot be undone. This will permanently delete your account and remove your data from our servers.')}
                                </DialogDescription>
                            </DialogHeader>

                            <form onSubmit={deleteUser} className="space-y-4 py-4">
                                <div className="space-y-2">
                                    <Label htmlFor="password">
                                        {t('_confirm_password', 'Confirm Password')}
                                    </Label>
                                    <Input
                                        id="password"
                                        type="password"
                                        name="password"
                                        ref={passwordInput}
                                        value={data.password}
                                        onChange={(e) => setData('password', e.target.value)}
                                        placeholder={t('_enter_password', 'Enter your password')}
                                        autoFocus
                                    />
                                    {errors.password && <p className="text-sm text-destructive">{errors.password}</p>}
                                </div>

                                <DialogFooter>
                                    <DialogClose asChild>
                                        <Button type="button" variant="secondary">
                                            {t('_cancel', 'Cancel')}
                                        </Button>
                                    </DialogClose>
                                    
                                    <Button type="submit" variant="destructive" disabled={processing}>
                                        {t('_delete_account', 'Delete Account')}
                                    </Button>
                                </DialogFooter>
                            </form>
                        </DialogContent>
                    </Dialog>
                </div>
            </div>
        </section>
    );
}