import { Transition } from '@headlessui/react';
import { Link, useForm, usePage } from '@inertiajs/react';

export default function UpdateProfileInformation({
    mustVerifyEmail,
    status,
    className = '',
}) {
    // 1. TARIK DATA ASLI DARI DATABASE
    const user = usePage().props.auth?.user || {};

    // 2. MASUKKAN SEBAGAI NILAI DEFAULT FORM
    // Jika data sudah ada di DB, form akan otomatis terisi. Jika kosong, form kosong.
    const { data, setData, patch, errors, processing, recentlySuccessful } =
        useForm({
            name: user.name || '',
            email: user.email || '',
            jenis_kelamin: user.jenis_kelamin || '',
            berat_badan: user.berat_badan || '',
            tinggi_badan: user.tinggi_badan || '',
        });

    const submit = (e) => {
        e.preventDefault();
        // Inertia otomatis akan mengirimkan semua field.
        // Jika user cuma ubah BB, nilai TB yang lama akan tetap ikut terkirim dengan aman.
        patch(route('profile.update'));
    };

    return (
        <section className={className}>
            <header>
                <h2 className="text-xl font-extrabold text-slate-900 tracking-tight">
                    Informasi Profil & Medis
                </h2>

                <p className="mt-1 text-sm text-slate-500">
                    Perbarui informasi akun serta data dasar medis Anda (seperti berat dan tinggi badan) untuk pemantauan yang lebih akurat.
                </p>
            </header>

            <form onSubmit={submit} className="mt-6 space-y-6">

                {/* --- KELOMPOK INFO AKUN --- */}
                <div className="bg-slate-50 p-5 rounded-2xl border border-slate-100 space-y-4">
                    <h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest border-b border-slate-200 pb-2 mb-3">Info Akun</h3>

                    {/* Input Nama */}
                    <div>
                        <label htmlFor="name" className="block text-sm font-bold text-slate-700 mb-2">Nama Lengkap</label>
                        <input
                            id="name"
                            type="text"
                            value={data.name}
                            onChange={(e) => setData('name', e.target.value)}
                            required
                            autoComplete="name"
                            className="w-full px-4 py-3 rounded-xl bg-white border border-slate-200 focus:outline-none focus:ring-1 focus:ring-[#145C33] focus:border-[#145C33] transition"
                        />
                        {errors.name && <p className="mt-1 text-xs text-red-500 font-medium">{errors.name}</p>}
                    </div>

                    {/* Input Email */}
                    <div>
                        <label htmlFor="email" className="block text-sm font-bold text-slate-700 mb-2">Alamat Email</label>
                        <input
                            id="email"
                            type="email"
                            value={data.email}
                            onChange={(e) => setData('email', e.target.value)}
                            required
                            autoComplete="username"
                            className="w-full px-4 py-3 rounded-xl bg-white border border-slate-200 focus:outline-none focus:ring-1 focus:ring-[#145C33] focus:border-[#145C33] transition"
                        />
                        {errors.email && <p className="mt-1 text-xs text-red-500 font-medium">{errors.email}</p>}
                    </div>
                </div>

                {/* --- KELOMPOK INFO MEDIS --- */}
                <div className="bg-emerald-50 p-5 rounded-2xl border border-emerald-100 space-y-5">
                    <h3 className="text-xs font-bold text-[#145C33] uppercase tracking-widest border-b border-emerald-200/50 pb-2 mb-3">Info Fisik Dasar</h3>

                    {/* Jenis Kelamin */}
                    <div>
                        <label className="block text-sm font-bold text-emerald-900 mb-2">Jenis Kelamin</label>
                        <div className="flex gap-4">
                            <label className="flex items-center gap-2 cursor-pointer bg-white px-4 py-2.5 rounded-xl border border-emerald-200 flex-1 hover:bg-emerald-100/50 transition">
                                <input
                                    type="radio"
                                    name="jenis_kelamin"
                                    value="L"
                                    checked={data.jenis_kelamin === 'L'}
                                    onChange={(e) => setData('jenis_kelamin', e.target.value)}
                                    className="text-[#145C33] focus:ring-[#145C33] w-4 h-4"
                                />
                                <span className="text-sm font-semibold text-emerald-900">Laki-laki</span>
                            </label>
                            <label className="flex items-center gap-2 cursor-pointer bg-white px-4 py-2.5 rounded-xl border border-emerald-200 flex-1 hover:bg-emerald-100/50 transition">
                                <input
                                    type="radio"
                                    name="jenis_kelamin"
                                    value="P"
                                    checked={data.jenis_kelamin === 'P'}
                                    onChange={(e) => setData('jenis_kelamin', e.target.value)}
                                    className="text-[#145C33] focus:ring-[#145C33] w-4 h-4"
                                />
                                <span className="text-sm font-semibold text-emerald-900">Perempuan</span>
                            </label>
                        </div>
                        {errors.jenis_kelamin && <p className="mt-1 text-xs text-red-500 font-medium">{errors.jenis_kelamin}</p>}
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        {/* Berat Badan */}
                        <div>
                            <label htmlFor="berat_badan" className="block text-sm font-bold text-emerald-900 mb-2">Berat Badan</label>
                            <div className="relative">
                                <input
                                    id="berat_badan"
                                    type="number"
                                    value={data.berat_badan}
                                    onChange={(e) => setData('berat_badan', e.target.value)}
                                    className="w-full px-4 py-3 rounded-xl bg-white border border-emerald-200 focus:outline-none focus:ring-1 focus:ring-[#145C33] focus:border-[#145C33] transition pr-10 font-semibold"
                                    placeholder="Kosong"
                                />
                                <span className="absolute right-4 top-3 text-slate-400 font-medium text-sm">kg</span>
                            </div>
                            {errors.berat_badan && <p className="mt-1 text-xs text-red-500 font-medium">{errors.berat_badan}</p>}
                        </div>

                        {/* Tinggi Badan */}
                        <div>
                            <label htmlFor="tinggi_badan" className="block text-sm font-bold text-emerald-900 mb-2">Tinggi Badan</label>
                            <div className="relative">
                                <input
                                    id="tinggi_badan"
                                    type="number"
                                    value={data.tinggi_badan}
                                    onChange={(e) => setData('tinggi_badan', e.target.value)}
                                    className="w-full px-4 py-3 rounded-xl bg-white border border-emerald-200 focus:outline-none focus:ring-1 focus:ring-[#145C33] focus:border-[#145C33] transition pr-10 font-semibold"
                                    placeholder="Kosong"
                                />
                                <span className="absolute right-4 top-3 text-slate-400 font-medium text-sm">cm</span>
                            </div>
                            {errors.tinggi_badan && <p className="mt-1 text-xs text-red-500 font-medium">{errors.tinggi_badan}</p>}
                        </div>
                    </div>
                </div>

                {/* Verifikasi Email */}
                {mustVerifyEmail && user.email_verified_at === null && (
                    <div className="bg-orange-50 p-4 rounded-xl border border-orange-100">
                        <p className="text-sm text-slate-700">
                            Alamat email Anda belum diverifikasi.{' '}
                            <Link href={route('verification.send')} method="post" as="button" className="font-bold text-[#EA580C] hover:text-[#c24100] transition underline">
                                Klik di sini untuk mengirim ulang email verifikasi.
                            </Link>
                        </p>
                    </div>
                )}

                {/* Tombol Simpan & Pesan Sukses */}
                <div className="flex items-center gap-4 pt-2">
                    <button
                        type="submit"
                        disabled={processing}
                        className="bg-[#145C33] text-white px-6 py-3 rounded-xl font-bold hover:bg-emerald-900 transition shadow-md shadow-emerald-900/20 disabled:opacity-50"
                    >
                        {processing ? 'Menyimpan...' : 'Simpan Perubahan'}
                    </button>

                    <Transition
                        show={recentlySuccessful}
                        enter="transition ease-in-out duration-300"
                        enterFrom="opacity-0 translate-x-4"
                        enterTo="opacity-100 translate-x-0"
                        leave="transition ease-in-out duration-300"
                        leaveFrom="opacity-100 translate-x-0"
                        leaveTo="opacity-0 translate-x-4"
                    >
                        <p className="text-sm font-bold text-[#145C33] flex items-center gap-1 bg-emerald-50 px-3 py-1.5 rounded-lg border border-emerald-100">
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path></svg>
                            Berhasil disimpan.
                        </p>
                    </Transition>
                </div>
            </form>
        </section>
    );
}
