import { useEffect } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { AxiosError } from "axios";
import { editProfile, getProfile } from "@/lib/services/profile.service";

import showCustomToast from "@/components/common/toaster/CustomToast";
import { UseFormSetValue } from "react-hook-form";
import { APIResponseType } from "@/type/comonType";
import { ProfileDataType } from "@/type/userType";
import { ExpertiseItem } from "@/type/profileType";
import { useProfileQuery } from "@/hooks/useProfileQuery";

export function useAboutSection(setValue: UseFormSetValue<any>) {
  const queryClient = useQueryClient();

  // ─── Query ────────────────────────────────────────────────────────────────

  const { data: getProfileData, isLoading } = useProfileQuery();
  // const {
  //   data: getProfileData,
  //   isLoading,
  //   error,
  // } = useQuery<APIResponseType<ProfileDataType>>({
  //   queryKey: ["profile"],
  //   queryFn: getProfile,
  // });

  // ─── Seed form ────────────────────────────────────────────────────────────
  useEffect(() => {
    if (getProfileData?.data) {
      setValue("about", getProfileData.data.about_me!);

      const mappedExpertise: ExpertiseItem[] =
        getProfileData.data.expertises?.map((item) => ({
          id: item.uuid,
          label: item.name,
        })) || [];

      setValue("expertise", mappedExpertise);
    }
  }, [getProfileData, setValue]);

  // ─── Mutation ─────────────────────────────────────────────────────────────
  const { mutate, isPending } = useMutation<
    APIResponseType<unknown>,
    AxiosError<{ message: string }>,
    Partial<ProfileDataType>
  >({
    mutationFn: editProfile as any,
    onMutate: async (newProfileData) => {
      await queryClient.cancelQueries({ queryKey: ["profile"] });
      const previousProfile = queryClient.getQueryData(["profile"]);

      queryClient.setQueryData(["profile"], (old: any) => {
        if (!old) return old;
        return {
          ...old,
          data: {
            ...old.data,
            about_me: newProfileData.about_me ?? old.data.about_me,
          },
        };
      });

      return { previousProfile };
    },
    onSuccess: (data) => {
      showCustomToast({ type: "success", message: data.message });
    },
    onError: (error, _, context: any) => {
      queryClient.setQueryData(["profile"], context.previousProfile);
      showCustomToast({
        type: "error",
        message: error.response?.data?.message ?? "Something went wrong",
      });
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ["profile"] });
    },
  });

  // ─── Handlers ─────────────────────────────────────────────────────────────
  const handleAboutSave = (about: string) => {
    if (!about?.trim()) return;
    mutate({ about_me: about });
  };

  // ─── Computed ─────────────────────────────────────────────────────────────
  const profileExpertiseOptions =
    getProfileData?.data.expertises?.map((skill) => ({
      id: skill.id,
      uuid: skill.uuid,
      label: skill.name,
    })) || [];

  return {
    getProfileData,
    isLoading,
    isPending,
    handleAboutSave,
    profileExpertiseOptions,
  };
}