import { Transition } from '@headlessui/react';
import Link from '@/Components/Link';
import { useForm, usePage } from '@inertiajs/react';
import { Save, UserCircle2 } from 'lucide-react';
import { FormEventHandler } from 'react';

export default function UpdateProfileInformation({
    mustVerifyEmail,
    status,
    className = '',
}: {
    mustVerifyEmail: boolean;
    status?: string;
    className?: string;
}) {
    const user = (usePage().props as any).auth.user;

    const { data, setData, patch, errors, processing, recentlySuccessful } = useForm({
        name: user.name,
        email: user.email,
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        patch(route('profile.update'));
    };

    return (
        <section className={className}>
            <header className="mb-4 flex items-center gap-2">
                <UserCircle2 className="h-5 w-5 text-slate-700" />
                <div>
                    <h2 className="text-base font-semibold text-slate-900">Profil Bilgileri</h2>
                    <p className="text-sm text-slate-500">Hesap profil bilgilerinizi ve e-posta adresinizi güncelleyin.</p>
                </div>
            </header>

            <form onSubmit={submit} className="space-y-4">
                <div>
                    <label htmlFor="name" className="mb-1 block text-sm font-medium text-slate-700">
                        Ad Soyad
                    </label>
                    <input
                        id="name" type="text" value={data.name} required autoFocus autoComplete="name"
                        onChange={(e) => setData('name', e.target.value)}
                        placeholder="Örn: Ahmet Yılmaz"
                        className="w-full rounded-lg border-slate-300 text-sm focus:border-blue-500 focus:ring-blue-500"
                    />
                    {errors.name && <p className="mt-1 text-xs text-rose-600">{errors.name}</p>}
                </div>

                <div>
                    <label htmlFor="email" className="mb-1 block text-sm font-medium text-slate-700">
                        E-posta
                    </label>
                    <input
                        id="email" type="email" value={data.email} required autoComplete="username"
                        onChange={(e) => setData('email', e.target.value)}
                        placeholder="ornek@firma.com"
                        className="w-full rounded-lg border-slate-300 text-sm focus:border-blue-500 focus:ring-blue-500"
                    />
                    {errors.email && <p className="mt-1 text-xs text-rose-600">{errors.email}</p>}
                </div>

                {mustVerifyEmail && user.email_verified_at === null && (
                    <div className="rounded-lg bg-amber-50 p-3 text-sm text-amber-800">
                        E-posta adresiniz doğrulanmamış.{' '}
                        <Link
                            href={route('verification.send')}
                            method="post"
                            as="button"
                            className="font-medium underline hover:text-amber-900"
                        >
                            Doğrulama e-postasını tekrar göndermek için tıklayın.
                        </Link>
                        {status === 'verification-link-sent' && (
                            <p className="mt-2 font-medium text-emerald-700">
                                E-posta adresinize yeni bir doğrulama bağlantısı gönderildi.
                            </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...' : 'Kaydet'}
                    </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>
    );
}