import Modal from '@/Components/Modal';
import { useForm } from '@inertiajs/react';
import { AlertTriangle, Trash2 } from 'lucide-react';
import { FormEventHandler, useRef, useState } from 'react';

export default function DeleteUserForm({ className = '' }: { className?: string }) {
    const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false);
    const passwordInput = useRef<HTMLInputElement>(null);

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

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

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

    return (
        <section className={className}>
            <header className="mb-4 flex items-center gap-2">
                <AlertTriangle className="h-5 w-5 text-rose-700" />
                <div>
                    <h2 className="text-base font-semibold text-rose-900">Hesabı Sil</h2>
                    <p className="text-sm text-rose-700">
                        Hesabınız silindiğinde tüm verileriniz kalıcı olarak silinir. Bu işlem geri alınamaz.
                        Saklamak istediğiniz verileri silmeden önce indirin.
                    </p>
                </div>
            </header>

            <button
                type="button"
                onClick={() => setConfirmingUserDeletion(true)}
                className="inline-flex items-center gap-2 rounded-lg bg-rose-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-rose-700"
            >
                <Trash2 className="h-4 w-4" />
                Hesabı Sil
            </button>

            <Modal show={confirmingUserDeletion} onClose={closeModal}>
                <form onSubmit={deleteUser} className="p-6">
                    <h2 className="text-lg font-semibold text-slate-900">
                        Hesabınızı silmek istediğinize emin misiniz?
                    </h2>
                    <p className="mt-2 text-sm text-slate-600">
                        Hesabınız silindiğinde tüm verileriniz kalıcı olarak silinir. Onaylamak için
                        şifrenizi giriniz.
                    </p>
                    <div className="mt-4">
                        <input
                            id="password" ref={passwordInput} type="password" placeholder="Şifre"
                            value={data.password}
                            onChange={(e) => setData('password', e.target.value)}
                            autoFocus
                            className="w-full rounded-lg border-slate-300 text-sm focus:border-rose-500 focus:ring-rose-500"
                        />
                        {errors.password && <p className="mt-1 text-xs text-rose-600">{errors.password}</p>}
                    </div>
                    <div className="mt-6 flex justify-end gap-3">
                        <button
                            type="button"
                            onClick={closeModal}
                            className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
                        >
                            İptal
                        </button>
                        <button
                            type="submit"
                            disabled={processing}
                            className="inline-flex items-center gap-2 rounded-lg bg-rose-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-rose-700 disabled:opacity-50"
                        >
                            <Trash2 className="h-4 w-4" />
                            {processing ? 'Siliniyor...' : 'Hesabı Sil'}
                        </button>
                    </div>
                </form>
            </Modal>
        </section>
    );
}