import { useForm } from '@inertiajs/react';
import { AlertTriangle, Loader2, Trash2, X } from 'lucide-react';
import { PasswordField } from './fields';

export default function DeleteDialog({
    hasPassword,
    onCancel,
}: {
    hasPassword: boolean;
    onCancel: () => void;
}) {
    const {
        delete: destroy,
        data,
        setData,
        processing,
        errors,
    } = useForm({
        password: '',
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        destroy(route('profile.destroy'), {
            onFinish: () => setData('password', ''),
        });
    }

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
            <div className="border-border bg-card w-full max-w-md overflow-hidden rounded-2xl border shadow-2xl">
                <div className="border-border flex items-center justify-between border-b px-6 py-4">
                    <div className="flex items-center gap-2">
                        <AlertTriangle className="h-4 w-4 text-red-500" />
                        <h3 className="text-foreground text-sm font-semibold">
                            Delete account
                        </h3>
                    </div>
                    <button
                        onClick={onCancel}
                        className="text-muted-foreground hover:text-foreground"
                    >
                        <X className="h-4 w-4" />
                    </button>
                </div>

                <form onSubmit={submit} className="space-y-4 p-6">
                    <p className="text-muted-foreground text-sm">
                        This will permanently delete your account and all
                        associated data. This action cannot be undone.
                    </p>

                    {hasPassword ? (
                        <PasswordField
                            label="Confirm your password"
                            value={data.password}
                            onChange={(v) => setData('password', v)}
                            error={errors.password}
                            autoComplete="current-password"
                        />
                    ) : (
                        <div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-700/30 dark:bg-amber-900/10 dark:text-amber-300">
                            You signed in with a social account. Please{' '}
                            <button
                                type="button"
                                onClick={onCancel}
                                className="underline"
                            >
                                set a password first
                            </button>{' '}
                            before deleting your account.
                        </div>
                    )}

                    <div className="flex items-center gap-3 pt-1">
                        <button
                            type="button"
                            onClick={onCancel}
                            className="border-border text-foreground hover:bg-muted/40 flex-1 rounded-xl border px-4 py-2.5 text-sm font-medium transition-colors"
                        >
                            Cancel
                        </button>
                        <button
                            type="submit"
                            disabled={processing || !hasPassword}
                            className="flex flex-1 items-center justify-center gap-2 rounded-xl bg-red-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-40"
                        >
                            {processing ? (
                                <Loader2 className="h-4 w-4 animate-spin" />
                            ) : (
                                <Trash2 className="h-4 w-4" />
                            )}
                            Delete my account
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}