import React, { useRef, useState } from 'react';
import { useForm } from '@inertiajs/react';
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Button } from "@/Components/ui/button";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/Components/ui/dialog";
import { Loader2, Trash2, AlertTriangle, ShieldAlert } from 'lucide-react';
import InputError from '@/Components/InputError';
import { useTranslation } from '@/hooks/useTranslation';

export default function DeleteUserForm({ className = '', isAdmin = false }) {
    const { t } = useTranslation();
    const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false);
    const passwordInput = useRef();

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

    const confirmUserDeletion = () => {
        setConfirmingUserDeletion(true);
    };

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

        destroy(route('profile.destroy'), {
            preserveScroll: true,
            onSuccess: () => closeModal(),
            onError: () => passwordInput.current.focus(),
            onFinish: () => reset(),
        });
    };

    const closeModal = () => {
        setConfirmingUserDeletion(false);
        clearErrors();
        reset();
    };

    // --- NEW: Admin Protection Warning ---
    if (isAdmin) {
        return (
            <section className={`space-y-4 ${className}`}>
                <header>
                    <h2 className="text-lg font-bold text-destructive flex items-center gap-2 opacity-50">
                        <Trash2 className="w-5 h-5" /> {t('Delete Account')}
                    </h2>
                </header>

                <div className="p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 flex gap-3 items-start">
                    <ShieldAlert className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
                    <div>
                        <p className="font-bold text-amber-700 dark:text-amber-500 text-sm">
                            {t('Action Restricted')}
                        </p>
                        <p className="text-sm text-amber-600/90 dark:text-amber-400/90 mt-1">
                            {t('As an Administrator, you cannot delete your own account for security reasons. Please contact another system administrator if you need to transfer ownership or disable this account.')}
                        </p>
                    </div>
                </div>
            </section>
        );
    }

    return (
        <section className={`space-y-6 ${className}`}>
            <header>
                <h2 className="text-lg font-bold text-destructive flex items-center gap-2">
                    <Trash2 className="w-5 h-5" /> {t('Delete Account')}
                </h2>
                <p className="mt-1 text-sm text-muted-foreground">
                    {t('Once your account is deleted, all of its resources and data will be permanently removed. Before deleting your account, please download any data or information that you wish to retain.')}
                </p>
            </header>

            <Button 
                variant="destructive" 
                onClick={confirmUserDeletion}
                className="font-bold shadow-lg shadow-destructive/10"
            >
                {t('Permanently Delete Account')}
            </Button>

            <Dialog open={confirmingUserDeletion} onOpenChange={setConfirmingUserDeletion}>
                <DialogContent className="max-w-md bg-card border-destructive/20 shadow-2xl">
                    <form onSubmit={deleteUser}>
                        <DialogHeader>
                            <DialogTitle className="text-destructive flex items-center gap-2">
                                <AlertTriangle className="w-5 h-5" /> {t('Confirm Account Deletion')}
                            </DialogTitle>
                            <DialogDescription className="pt-2">
                                {t('Are you absolutely sure you want to delete your account? This action')}
                                <span className="font-bold text-foreground mx-1 text-red-500">{t('cannot be undone')}</span>. 
                                {t('Please enter your password to confirm.')}
                            </DialogDescription>
                        </DialogHeader>

                        <div className="py-6 space-y-4">
                            <div className="space-y-2">
                                <Label htmlFor="password" title={t('Verify your identity')} className="text-sm font-bold flex items-center gap-2">
                                    <ShieldAlert className="w-4 h-4 text-muted-foreground" /> {t('Your Password')}
                                </Label>
                                <Input
                                    id="password"
                                    type="password"
                                    name="password"
                                    ref={passwordInput}
                                    value={data.password}
                                    onChange={(e) => setData('password', e.target.value)}
                                    placeholder={t('Enter your current password')}
                                    className="bg-background border-input"
                                    autoFocus
                                />
                                <InputError message={errors.password} />
                            </div>
                        </div>

                        <DialogFooter className="gap-2 sm:gap-0">
                            <Button 
                                type="button" 
                                variant="outline" 
                                onClick={closeModal}
                                className="flex-1 sm:flex-none"
                            >
                                {t('Cancel')}
                            </Button>
                            <Button 
                                type="submit" 
                                variant="destructive" 
                                disabled={processing}
                                className="flex-1 sm:flex-none font-bold"
                            >
                                {processing && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
                                {t('Final Delete')}
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
        </section>
    );
}