import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { passwordSchema } from '../../schemas/authSchema';
import InputText from '../InputText';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import axiosClient from '../../services/axiosClient';
import { useDispatch } from 'react-redux';
import { addToast } from '../../features/toast/toastSlice';
import ErrorText from '../ErrorText';


// Hook เฉพาะสำหรับการเปลี่ยนรหัสผ่าน (POST /users/set_password/)
const useChangePasswordMutation = () => {
    const dispatch = useDispatch();
    const queryClient = useQueryClient();

    return useMutation({
        mutationFn: async ({ current_password, new_password, re_new_password }) => {
            // Djoser Endpoint
            const response = await axiosClient.post(`/api/v1/auth/users/set_password/`, {
                current_password: current_password,
                new_password: new_password,
                re_new_password: re_new_password, // Djoser ต้องการ re_new_password field
            });
            return response.data;
        },
        onSuccess: () => {
            dispatch(addToast({ message: 'เปลี่ยนรหัสผ่านสำเร็จแล้ว!', type: 'success' }));
            queryClient.invalidateQueries({ queryKey: ['userProfile'] }); // Invalidate เพื่อความปลอดภัย
        },
        onError: (error) => {
            const msg = error.response?.data?.current_password?.[0] || 'รหัสผ่านปัจจุบันไม่ถูกต้อง';
            dispatch(addToast({ message: `เปลี่ยนรหัสผ่านล้มเหลว: ${msg}`, type: 'error' }));
            throw new Error(msg); // Throw เพื่อให้ RHF จับ error ได้
        },
    });
};


export default function PasswordChangeForm() {
    const changeMutation = useChangePasswordMutation();
    const isChanging = changeMutation.isPending;

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

    const onSubmit = (data) => {
        changeMutation.mutate(data, {
            onSuccess: () => {
                reset(); // Clear form on success
            }
        });
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)} className="max-w-lg space-y-4">
            <InputText labelTitle="รหัสผ่านปัจจุบัน" type="password" {...register('current_password')} error={errors.current_password} />
            <InputText labelTitle="รหัสผ่านใหม่" type="password" {...register('new_password')} error={errors.new_password} />
            <InputText labelTitle="ยืนยันรหัสผ่านใหม่" type="password" {...register('re_new_password')} error={errors.re_new_password} />

            {changeMutation.isError && (
                <ErrorText styleClass="mt-4">
                    {errors.current_password?.message || changeMutation.error.message || 'เกิดข้อผิดพลาดในการเปลี่ยนรหัสผ่าน'}
                </ErrorText>
            )}

            <button
                type="submit"
                className={"btn btn-warning mt-6" + (isChanging ? " loading" : "")}
                disabled={isChanging}
            >
                {isChanging ? 'กำลังดำเนินการ...' : 'เปลี่ยนรหัสผ่าน'}
            </button>
        </form>
    );
}