import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { profileSchema } from '../../schemas/authSchema';
import InputText from '../InputText';
import { useUpdateProfileMutation } from '../../services/authApi';

export default function ProfileEditForm({ user }) {
    const updateMutation = useUpdateProfileMutation();
    const isUpdating = updateMutation.isPending;

    const { register, handleSubmit, reset, formState: { errors } } = useForm({
        resolver: yupResolver(profileSchema),
    });

    // โหลดข้อมูลผู้ใช้เข้า Form เมื่อ Component โหลด
    useEffect(() => {
        if (user) {
            reset({
                first_name: user.first_name || '',
                last_name: user.last_name || '',
                phone_number: user.phone_number || '',
                email: user.email || '',
                // ไม่โหลด username เพราะอาจมีปัญหาในการอัปเดต
            });
        }
    }, [user, reset]);

    const onSubmit = (data) => {
        // Djoser /users/me/ Endpoint รองรับ PATCH เพื่อส่งเฉพาะ Field ที่เปลี่ยน
        updateMutation.mutate(data);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)} className="max-w-lg space-y-4">
            <InputText labelTitle="อีเมล (จำเป็น)" {...register('email')} error={errors.email} />
            <InputText labelTitle="ชื่อจริง" {...register('first_name')} error={errors.first_name} />
            <InputText labelTitle="นามสกุล" {...register('last_name')} error={errors.last_name} />
            <InputText labelTitle="เบอร์โทรศัพท์" {...register('phone_number')} error={errors.phone_number} />

            <p className="text-sm text-warning mt-4">Username: {user.username} (ไม่สามารถแก้ไขได้)</p>

            <button
                type="submit"
                className={"btn btn-primary mt-6" + (isUpdating ? " loading" : "")}
                disabled={isUpdating}
            >
                {isUpdating ? 'กำลังบันทึก...' : 'บันทึกการเปลี่ยนแปลง'}
            </button>
        </form>
    );
}