"use client";
import { useState, useEffect, useCallback, ReactNode } from "react";
import Cookies from "js-cookie";
import { useLocale, useTranslations } from "next-intl";
import ShowAlertMixin from "@/shared/ShowAlertMixin";
import Page400 from "@/shared/ErrorPages/Page400";
import Page403 from "@/shared/ErrorPages/Page403";
import Page404 from "@/shared/ErrorPages/Page404";
import Page500 from "@/shared/ErrorPages/Page500";
import axios from "axios";
import UseAuthorizationErrorClient from "./UseAuthorizationErrorClient";

type UseFetchPops_TP = {
  endpoint: string;
  enabled?: boolean;
  general?: boolean;
  select?: (data: any) => any;
  onError?: (err: any) => void;
  onSuccess?: (data: any) => void;
  customHeaders?: Record<string, string>;
};

function UseFetch<T>({
  endpoint,
  enabled = true,
  general = false,
  select,
  onError: originalOnError,
  onSuccess,
  customHeaders,
}: UseFetchPops_TP) {
  const t = useTranslations();
  const userToken = Cookies.get("token");

  const token = userToken;
  const authorizationHeader = token ? `Bearer ${token}` : undefined;
  const baseURL = process.env.NEXT_PUBLIC_BASE_URL;

  const locale = useLocale();
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [isSuccess, setIsSuccess] = useState<boolean>(false);
  const [errorComponent, setErrorComponent] = useState<ReactNode | null>(null);

  const fetchData = useCallback(async () => {
    if (!enabled) {
      setLoading(false);
      return;
    }

    // setLoading(true);
    const config = {
      headers: {
        "Accept-Language": locale,
        "Content-Type": "application/json; charset=utf-8",
        ...customHeaders,
        ...(authorizationHeader ? { Authorization: authorizationHeader } : {}),
      },
    };

    try {
      const { data } = await axios.get<T>(`${baseURL}${endpoint}`, config);
      const result = select ? select(data) : data;
      setData(result);
      setIsSuccess(true);
      setErrorComponent(null); // Clear any previous error component
      if (onSuccess) onSuccess(result);
    } catch (err: any) {
      setError(err);
      handleError(err);
      if (originalOnError) originalOnError(err);
    } finally {
      setLoading(false);
    }
  }, [
    enabled,
    endpoint,
    locale,
    onSuccess,
    originalOnError,
    userToken,
    customHeaders,
    general,
  ]);

  const handleError = (err: any) => {
    const message = err?.response?.data?.message || t("no_data");
    ShowAlertMixin({
      icon: "error",
      title: message,
    });
    if (err.response?.status === 401) {
      Cookies.remove("token");
      Cookies.remove("sessionToken");

      setTimeout(() => {
        window.location.replace(`${locale === "ar" ? "" : "/en"}/auth/login`);
      }, 500);
    }

    switch (err.response?.status) {
      case 400:
        setErrorComponent(<Page400 />);
        break;
      case 401:
        setErrorComponent(<UseAuthorizationErrorClient showError={true} />);
        break;
      case 403:
        setErrorComponent(<Page403 />);
        break;
      case 500:
        setErrorComponent(<Page500 />);
        break;
      default:
        setErrorComponent(<Page404 />);
        break;
    }
  };

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const refetch = () => {
    setIsSuccess(false);
    setError(null);
    setErrorComponent(null); // Reset error component on refetch
    fetchData();
  };

  return {
    data,
    isError: !!error,
    isLoading: loading,
    isSuccess,
    refetch,
    errorComponent, // Expose the error component for rendering
  };
}

export default UseFetch;