import { Transition } from '@headlessui/react';
import { useForm } from '@inertiajs/react';
import { KeyRound, Save } from 'lucide-react';
import { FormEventHandler, useRef } from 'react';

export default function UpdatePasswordForm({
    className = '',
}: {
    className?: string;
}) {
    const passwordInput = useRef<HTMLInputElement>(null);
    const currentPasswordInput = useRef<HTMLInputElement>(null);

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

    const updatePassword: FormEventHandler = (e) => {
        e.preventDefault();
        put(route('password.update'), {
            preserveScroll: true,
            onSuccess: () => reset(),
            onError: (errors) => {
                if (errors.password) {
                    reset('password', 'password_confirmation');
                    passwordInput.current?.focus();
                }
                if (errors.current_password) {
                    reset('current_password');
                    currentPasswordInput.current?.focus();
                }
            },
        });
    };

    return (
        <section className={className}>
            <header className="mb-4 flex items-center gap-2">
                <KeyRound className="h-5 w-5 text-slate-700" />
                <div>
                    <h2 className="text-base font-semibold text-slate-900">Şifre Güncelle</h2>
                    <p className="text-sm text-slate-500">
                        Hesabınızın güvende kalması için uzun ve rastgele bir şifre kullandığınızdan emin olun.
                    </p>
                </div>
            </header>

            <form onSubmit={updatePassword} className="space-y-4">
                <div>
                    <label htmlFor="current_password" className="mb-1 block text-sm font-medium text-slate-700">
                        Mevcut Şifre
                    </label>
                    <input
                        id="current_password" ref={currentPasswordInput} type="password" autoComplete="current-password"
                        value={data.current_password}
                        onChange={(e) => setData('current_password', e.target.value)}
                        placeholder="Mevcut şifreniz"
                        className="w-full rounded-lg border-slate-300 text-sm focus:border-blue-500 focus:ring-blue-500"
                    />
                    {errors.current_password && <p className="mt-1 text-xs text-rose-600">{errors.current_password}</p>}
                </div>

                <div>
                    <label htmlFor="password" className="mb-1 block text-sm font-medium text-slate-700">
                        Yeni Şifre
                    </label>
                    <input
                        id="password" ref={passwordInput} type="password" autoComplete="new-password"
                        value={data.password}
                        onChange={(e) => setData('password', e.target.value)}
                        placeholder="En az 8 karakter"
                        className="w-full rounded-lg border-slate-300 text-sm focus:border-blue-500 focus:ring-blue-500"
                    />
                    {errors.password && <p className="mt-1 text-xs text-rose-600">{errors.password}</p>}
                </div>

                <div>
                    <label htmlFor="password_confirmation" className="mb-1 block text-sm font-medium text-slate-700">
                        Yeni Şifre Tekrar
                    </label>
                    <input
                        id="password_confirmation" type="password" autoComplete="new-password"
                        value={data.password_confirmation}
                        onChange={(e) => setData('password_confirmation', e.target.value)}
                        placeholder="Yeni şifreyi tekrar girin"
                        className="w-full rounded-lg border-slate-300 text-sm focus:border-blue-500 focus:ring-blue-500"
                    />
                    {errors.password_confirmation && <p className="mt-1 text-xs text-rose-600">{errors.password_confirmation}</p>}
                </div>

                <div className="flex items-center gap-3">
                    <button
                        type="submit"
                        disabled={processing}
                        className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 disabled:opacity-50"
                    >
                        <Save className="h-4 w-4" />
                        {processing ? 'Kaydediliyor...' : 'Şifreyi Güncelle'}
                    </button>

                    <Transition
                        show={recentlySuccessful}
                        enter="transition ease-in-out"
                        enterFrom="opacity-0"
                        leave="transition ease-in-out"
                        leaveTo="opacity-0"
                    >
                        <p className="text-sm font-medium text-emerald-600">Kaydedildi.</p>
                    </Transition>
                </div>
            </form>
        </section>
    );
}