import ProfileDetails from "./section/ProfileDetails";
import ProductConfigList from "./section/ProductConfigList";
import { useQueryParams } from "../../hooks/useQueryParams";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { useMutation, useQuery } from "@tanstack/react-query";
import useAxios from "../../hooks/useAxios";
import { AxiosError, AxiosResponse } from "axios";
import ModalPayment from "./section/components/ModalPayment";
import { useNavigate } from "react-router-dom";

const Profile = () => {
  const query = useQueryParams();
  const axios = useAxios();
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [isPayment, setIsPayment] = useState<boolean>(false);
  const [message, setMessage] = useState<string>("");
  const navigate = useNavigate();
  const mutation = useMutation({
    mutationKey: ["statusPayment"],
    mutationFn: (values: { trackId: string }) => {
      return axios.post("/home/config/confirm", values);
    },
    onSuccess: (data) => {
      setIsOpen(true);
      setIsPayment(true);
      setMessage(data?.data?.result?.alert);
      navigate("/profile", { replace: true });
    },
    onError: (err: AxiosError) => {
      let errorMessage = "یک خطای غیرمنتظره رخ داد";
      if (
        err.response?.data &&
        typeof err.response.data === "object" &&
        "alert" in err.response.data
      ) {
        errorMessage = (err.response.data as { alert: string }).alert;
      }
      setIsOpen(true);
      setIsPayment(false);
      setMessage(errorMessage);
      navigate("/profile", { replace: true });
    },
  });
  useEffect(() => {
    const trackId = query.get("trackId");

    if (trackId) {
      toast.promise(mutation.mutateAsync({ trackId }), {
        loading: "درحال تایید درگاه پرداخت...",
        success: (res: AxiosResponse) => {
          return `${res.data.alert}`;
        },
        error: (err: AxiosError) => {
          let errorMessage = "یک خطای غیرمنتظره رخ داد";
          if (
            err.response?.data &&
            typeof err.response.data === "object" &&
            "alert" in err.response.data
          ) {
            errorMessage = (err.response.data as { alert: string }).alert;
          }
          return errorMessage;
        },
      });
    } else {
      console.error("Track ID is missing or invalid.");
    }
  }, [mutation,query]);

  const { data, isLoading, isFetching, error } = useQuery({
    queryKey: ["profile", mutation],
    queryFn: () => {
      return axios.get("/profile");
    },
  });
  return (
    <>
      {!mutation.isPending && (
        <ModalPayment
          isOpen={isOpen}
          setIsOpen={setIsOpen}
          isPayment={isPayment}
          message={message}
        />
      )}
      <div className="relative h-full w-full flex flex-col gap-4">
        <ProfileDetails
          data={data?.data}
          isLoading={isLoading}
          isFetching={isFetching}
          error={error}
        />
        <ProductConfigList
          data={data?.data}
          userTitle={data?.data?.result?.user_profile?.name}
          isLoading={isLoading}
          isFetching={isFetching}
          error={error}
        />
      </div>
    </>
  );
};

export default Profile;