"use client";

import { BsThreeDotsVertical } from "react-icons/bs";
import { useState, useEffect, useRef } from "react";
import Link from "next/link";
import { IoIosArrowForward } from "react-icons/io";
import { IoMdAddCircleOutline } from "react-icons/io";
import MobilePageHeader from "@/components/common/MobilePageHeader";
import {
  deletePost,
  getCategory,
  indexListing,
  updateStatus,
} from "@/lib/actions/productCategoryAction";
import { useRouter } from "next/navigation";
import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import { useTranslations } from "next-intl";
import { getStoredLocale } from "@/lib/getLocale";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { toast } from "react-toastify";
import Pagination from "@/components/Pagination/Paginate";
import dynamic from "next/dynamic";
import Button from "@/components/common/Button";
import {
  COMMUNITY_EVENT_FORM_TYPE,
  JOB_FORM_TYPE,
  PRODUCT_FORM_TYPE,
  SERVICE_FORM_TYPE,
} from "@/lib/formTypes";
import Advertisement from "@/components/AdvertisementForm";
import { getImageUrl, getMobileNumberSmallImageUrl, getVehiclePlateSmallImageUrl, transparentClass } from "@/hooks/useImageUrl";
import {
  OtherAttribute,
  VehicleNumber,
} from "../../../../types/common-types";
import DataNotFound from "@/components/common/DataNotFound";
import Loader from "@/components/common/Loader";
import RouteLoader from "@/components/common/RouteLoader";
const ListDetailSidebar = dynamic(
  () => import("@/components/ListDetail/ListDetailSidebar"),
  {
    ssr: false,
  }
);

interface BaseInterface {
  id: string;
  form_type: string;
  title?: string;
  description?: string;
  createdAt?: string;
  image?: string;
  status?: string;
}

interface ProductInterface extends BaseInterface {
  short_description?: string;
  price?: string;
  status?: string;
}

interface ServiceInterface extends BaseInterface {
  image?: string;
}

interface CommunityInterface extends BaseInterface {
  date?: string;

  time?: string;
  address_line_1?: string;
  address_line_2?: string;
  country?: string;
  state?: string;
  postal_code?: string;
  contact_number?: {
    phone: string;
    country_code: string;
  };
}

interface JobInterface extends BaseInterface {
  employement_type?: string;
  salary?: string;
  address_line_1?: string;
  address_line_2?: string;
  country?: string;
  state?: string;
  postal_code?: string;
  contact_number?: {
    phone: string;
    country_code: string;
  };
}

type ListingInterface =
  | ProductInterface
  | CommunityInterface
  | ServiceInterface
  | JobInterface;

export default function Listing() {
  const [openMenuId, setOpenMenuId] = useState<number | null>(null);
  const menuRefs = useRef<{ [key: number]: HTMLDivElement | null }>({});
  const [listings, setListings] = useState<ListingInterface[]>([]);

  const { user } = useAppSelector((state) => state?.auth);
  const locale = getStoredLocale();

  const t = useTranslations();
  const dispatch = useAppDispatch();
  const router = useRouter();

  const [currentPage, setCurrentPage] = useState<number>(1);
  const [totalPages, setTotalPages] = useState<number>(0);
  const [initialData, setInitialData] = useState<[]>([]);
  const [selectedRadio, setSelectedRadio] = useState<string>("");
  const [formType, setFormType] = useState<string>("products");

  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [postId, setPostId] = useState<string | undefined>(undefined);

  const [deletePostId, setDeletePostId] = useState<string>("");

  const [showConfirmModal, setShowConfirmModal] = useState<null | "on">(null);
  const [activeDrawer, setActiveDrawer] = useState<
    null | "advertise" | "post-detail"
  >(null);

  useEffect(() => {
    if (!user?.token) return;

    const fetchCategory = async () => {
      setIsLoading(true);
      try {
        const response = await getCategory(user.token, { isListing: true });
        if (response.success && Array.isArray(response?.data)) {
          setInitialData(response?.data);
        }
      } catch (error: any) {
        if (checkAuthErrorGet(error, dispatch, router)) return;
        toast.error(
          error?.response?.data?.message || t("validation.error_msg")
        );
      } finally {
        setIsLoading(false);
      }
    };
    fetchCategory();
  }, [user?.token]);

  useEffect(() => {
    if (!initialData.length) return;

    const productItem: any = initialData.find(
      (obj: any) => obj.slug === PRODUCT_FORM_TYPE
    );
    if (!productItem) return;

    const searchParams = new URLSearchParams(window.location.search);
    const form = searchParams.get("type");

    if (form) {
      const currCateg: any = initialData.find((obj: any) => obj.slug === form);
      if (currCateg) {
        setSelectedRadio(currCateg?.id);
        setFormType(form);
      }
    } else {
      setSelectedRadio(productItem?.id);
    }
  }, [initialData, window.location.search]);

  const fetchAllListings = async () => {
    try {
      const { data, pagination } = await indexListing(user.token, {
        page: currentPage,
        limit: 2,
        formType,
      });
      if (Array.isArray(data)) {
        setTotalPages(pagination.totalPages);

        let posts = data.map((ele) => {
          let formType = ele.form_type ?? "";
          let id = ele._id;
          let createdAt = new Date(ele.createdAt).toLocaleDateString();
          let obj = {
            form_type: formType,
            id,
            createdAt,
            status: ele.status,

          };

          let otherAttrData:
            | OtherAttribute<"mobile_number">
            | OtherAttribute<"vehicle_number_plate">
            | null = null;

          const otherAttr = ele.attributes.find(
            (obj: any) => obj?.key?.attributeId?.slug === "other-attribute"
          );

          if (otherAttr) {
            if (otherAttr?.value?.valueType === "mobile_number") {
              otherAttrData =
                otherAttr?.value as OtherAttribute<"mobile_number">;
              otherAttrData = { ...otherAttrData, valueType: "mobile_number" };
            } else if (otherAttr?.value?.valueType === "vehicle_number_plate") {
              otherAttrData =
                otherAttr?.value as OtherAttribute<"vehicle_number_plate">;

              otherAttrData = {
                ...otherAttrData,
                valueType: "vehicle_number_plate",
              };
            }
          }

          ele.attributes.forEach((attr: any) => {
            if (attr.type == "singleimageuploader") {
              const imageLocation = attr?.value?.meta?.files[0]?.location;
              if (imageLocation) {
                (obj as any)["image"] = imageLocation;
              } else {
                // console.warn("Image location missing for this item");
              }
            } else {
              let key: string = attr?.key?.attributeId?.label?.en
                .toLowerCase()
                .replace(" ", "_");

              if (key?.toLowerCase().includes("title")) {
                key = "title";
              } else if (key?.toLowerCase().includes("description")) {
                key = "description";
              }

              (obj as any)[key] = attr.value.content;
            }
          });

          if (otherAttrData?.valueType === "mobile_number") {
            (obj as any)["image"] = getMobileNumberSmallImageUrl(
              otherAttrData?.content[0].operator
            );
          } else if (otherAttrData?.valueType === "vehicle_number_plate") {
            (obj as any)["image"] = getVehiclePlateSmallImageUrl(otherAttrData.content[0] as VehicleNumber);
          }
          return obj;
        });

        setListings(posts);
      }
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(error?.response?.data?.message || t("validation.error_msg"));
    } finally {
    }
  };

  useEffect(() => {
    if (!user?.token) return;

    fetchAllListings();
  }, [currentPage, selectedRadio]);

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      // Only run if a menu is actually open
      if (openMenuId === null) return;

      const clickedMenuRef = menuRefs.current[openMenuId];

      if (clickedMenuRef && !clickedMenuRef.contains(e.target as Node)) {
        setOpenMenuId(null);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [openMenuId]);

  const handleRadioChange = (id: string, item: any) => {
    // reset the page
    setCurrentPage(1);

    setSelectedRadio(id);
    setFormType(item.slug);
  };

  const closeDrawer = () => setActiveDrawer(null);

  const handleBack = () => {
    window.history.back();
  };

  const handleDelete = async (id: string) => {
    setIsLoading(true);
    try {
      const updatedListings = listings.filter((ele) => ele.id !== id);

      const response = await deletePost(user.token, { id, formType });

      if (response?.success) {
        if (updatedListings.length === 0) {
          if (currentPage === 1) {
            fetchAllListings();
          } else {
            setCurrentPage((prev) => prev - 1);
          }
        } else {
          fetchAllListings();
        }
      } else {
        toast.error(t("validation.error_msg"));
      }

      setShowConfirmModal(null);
    } catch (error: any) {

      if (checkAuthErrorGet(error, dispatch, router)) return;

      const errorMsg =
        error?.response?.data?.message || t("validation.error_msg");
      toast.error(errorMsg);
    } finally {
      setIsLoading(false);
    }
  };

  const handleStatusUpdate = async (id: string, status: string) => {
    // setIsLoading(true);
    try {
      const newStatus = status === "active" ? "inactive" : "active";
      const response = await updateStatus(user.token, {
        status: newStatus,
        postId: id,
        formType,
      });

      if (!response.success) {
        toast.error(t("validation.error_msg"));
      }

      const updatedListing = listings.map((ele) => {
        if (ele.id === id) {
          ele.status = newStatus;
        }
        return ele;
      });
      setOpenMenuId(null);

      setListings(updatedListing);
      toast.success(t("my_listing.edit_success"));
    } catch (error: any) {

      if (checkAuthErrorGet(error, dispatch, router)) return;

      const errorMsg =
        error?.response?.data?.message || t("validation.error_msg");
      toast.error(errorMsg);
    } finally {
      // setIsLoading(false);
    }
  };

  const handleAdvertise = () => {
    setActiveDrawer("advertise");
  };

  const renderByFormType = () => {
    switch (formType) {
      case PRODUCT_FORM_TYPE:
        if (listings.length == 0 && !isLoading) {
          return <DataNotFound />;
        }
        return listings.map((item: ProductInterface, index: number) => (
          <div
            key={item.id}
            className="bg-white dark:bg-darkbg border border-neutrals100 dark:border-darkborder rounded-md p-5 hover:shadow-lg transition-all hover:border-primary100"
          >
            <div className="w-full flex md:flex-row items-start justify-start gap-3">
              {/* Left Section */}
              <div className="img-box w-[106px] max-md:w-[71px]">
                <img
                  src={getImageUrl(item.image as string)}
                  alt={item.title}
                  onError={(e) => {
                    e.currentTarget.onerror = null;
                    e.currentTarget.src = "/default.jpg";
                  }}
                  className={`w-[106px] h-[106px] object-cover max-md:w-[71px] max-md:h-[71px] ${transparentClass} `}
                />
              </div>

              {/* Right Section */}
              <div className="w-[calc(100%-106px)] max-md:w-[calc(100%-71px)]">
                <div className="flex items-start justify-between max-md:flex-col-reverse">
                  <div>
                    <h2 className="text-base font-semibold text-neutrals800 dark:text-white">
                      {item?.title}
                    </h2>
                    <p className="text-sm text-neutrals500 dark:text-neutrals400 mb-0">
                      {item.description}
                    </p>

                    <p className="font-bold text-primary500 dark:text-primary400">
                      {process.env.NEXT_PUBLIC_CURRENCY_TYPE} {item?.price}
                    </p>
                  </div>

                  <div className="flex items-center gap-3 justify-between max-md:w-full">
                    <p className="text-xs text-neutrals500 dark:text-neutrals400 whitespace-nowrap max-sm:whitespace-normal">
                      {t("dashboard.created_on")} {item?.createdAt ?? ""}
                    </p>
                    {/* Menu */}
                    <div
                      className="relative"
                      ref={(el: any) => (menuRefs.current[index] = el)}
                    >
                      <BsThreeDotsVertical
                        size={18}
                        className="text-gray-500 cursor-pointer dark:text-neutrals400"
                        onClick={(e) => {
                          e.stopPropagation();
                          setOpenMenuId(openMenuId === index ? null : index);
                        }}
                      />
                      {openMenuId === index && (
                        <div className="absolute right-0 mt-2 w-24 bg-white border border-gray-100 dark:bg-background dark:border-darkborder shadow-md rounded z-50  rtl:right-auto rtl:left-0">
                          <button
                            className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                            onClick={() =>
                              router.push(
                                `/listing/edit?id=${item.id}&type=${formType}`
                              )
                            }
                          >
                            {t("dashboard.edit")}
                          </button>
                          <button
                            className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                            onClick={() => {
                              handleStatusUpdate(
                                item?.id,
                                item?.status as string
                              );
                            }}
                          >
                            {item?.status === "active"
                              ? t("my_listing.inactive")
                              : t("my_listing.active")}
                          </button>

                          <button
                            className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                            onClick={() => {
                              setPostId(item?.id);
                              handleAdvertise();
                            }}
                          >
                            {t("my_listing.advertise")}
                          </button>

                          <button
                            className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                            onClick={() => {
                              setShowConfirmModal("on");
                              setDeletePostId(item?.id);
                            }}
                          >
                            {t("dashboard.delete")}
                          </button>
                        </div>
                      )}
                    </div>
                  </div>
                </div>

                <div className="flex justify-end items-center max-md:-ml-[83px] gap-2">
                  {/* {item?.status === "active" ? (
                    <button className="mt-2 text-base text-primary500 border border-neutrals100 rounded-lg px-6 py-2 hover:border-primary500 hover:bg-primary500 hover:text-white dark:text-primary400 dark:hover:border-primary400 dark:hover:bg-primary400 dark:hover:text-white dark:border-darkborder max-md:px-3 max-md:text-sm">
                       {t("dashboard.stop_ads")}
                    </button>
                  ) : (
                    <Link
                      href="#"
                      className="mt-2 block text-sm text-primary500 font-medium hover:underline dark:text-primary400"
                    >
                      {t("dashboard.boost")}
                    </Link>
                  )} */}
                  <div className="flex items-center gap-3">
                    <div
                      className="w-11 h-11 bg-kzblue50 text-lg font-bold rounded-lg flex items-center justify-center cursor-pointer dark:bg-background dark:hover:bg-cardfooter rtl:rotate-180"
                      onClick={() => {
                        setActiveDrawer("post-detail");
                        setPostId(item?.id);
                      }}
                    >
                      <IoIosArrowForward className="text-primary500 dark:text-primary400" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ));

      case JOB_FORM_TYPE:
        if (listings.length == 0 && !isLoading) {
          return <DataNotFound />;
        }
        return listings.map((item: JobInterface, index: number) => (
          <div
            key={item.id}
            className="bg-white dark:bg-darkbg border border-neutrals100 dark:border-darkborder rounded-md p-5 hover:shadow-lg transition-all hover:border-primary100"
          >
            <div className="w-full flex md:flex-row items-start justify-start gap-3">
              {/* Left Section */}
              <div className="img-box w-[106px] max-md:w-[71px]">
                <img
                  src={`${process.env.NEXT_PUBLIC_API}${item.image ?? ""}`}
                  alt={item.title}
                  className="w-[106px] h-[106px] object-cover max-md:w-[71px] max-md:h-[71px]"
                  onError={(e) => {
                    e.currentTarget.onerror = null;
                    e.currentTarget.src = "/default.jpg";
                  }}
                />
              </div>

              {/* Right Section */}
              <div className="w-[calc(100%-106px)] max-md:w-[calc(100%-71px)]">
                <div className="flex items-start justify-between max-md:flex-col-reverse">
                  <div>
                    <h2 className="text-base font-semibold text-neutrals800 dark:text-white">
                      {item?.title}
                    </h2>
                    <p className="text-sm text-neutrals500 dark:text-neutrals400 mb-0">
                      {item.description}
                    </p>

                    <p className="font-bold text-primary500 dark:text-primary400">
                      {item?.salary}
                    </p>
                  </div>

                  <div className="flex items-center gap-3 justify-between max-md:w-full">
                    <p className="text-xs text-neutrals500 dark:text-neutrals400 whitespace-nowrap max-sm:whitespace-normal">
                      {t("dashboard.created_on")} {item?.createdAt ?? ""}
                    </p>
                    {/* Menu */}
                    <div
                      className="relative"
                      ref={(el: any) => (menuRefs.current[index] = el)}
                    >
                      <BsThreeDotsVertical
                        size={18}
                        className="text-gray-500 cursor-pointer dark:text-neutrals400"
                        onClick={(e) => {
                          e.stopPropagation();
                          setOpenMenuId(openMenuId === index ? null : index);
                        }}
                      />
                      {openMenuId === index && (
                        <div className="absolute right-0 mt-2 w-24 bg-white border border-gray-100 dark:bg-background dark:border-darkborder shadow-md rounded z-50  rtl:right-auto rtl:left-0">
                          <button
                            className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                            onClick={() =>
                              router.push(
                                `/listing/edit?id=${item.id}&type=${formType}`
                              )
                            }
                          >
                            {t("dashboard.edit")}
                          </button>
                          <button
                            className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                            onClick={() => {
                              handleStatusUpdate(
                                item?.id,
                                item?.status as string
                              );
                            }}
                          >
                            {item?.status === "active"
                              ? t("my_listing.inactive")
                              : t("my_listing.active")}
                          </button>

                          <button
                            className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                            onClick={() => {
                              setPostId(item?.id);
                              handleAdvertise();
                            }}
                          >
                            {t("my_listing.advertise")}
                          </button>

                          <button
                            className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                            onClick={() => {
                              setShowConfirmModal("on");
                              setDeletePostId(item?.id);
                            }}
                          >
                            {t("dashboard.delete")}
                          </button>
                        </div>
                      )}
                    </div>
                  </div>
                </div>

                <div className="flex justify-between items-center max-md:-ml-[83px] gap-2">
                  {item.contact_number && (
                    <p className="mt-2 block text-sm text-primary500 font-medium hover:underline dark:text-primary400">
                      {item?.contact_number?.country_code}{" "}
                      {item?.contact_number?.phone}
                    </p>
                  )}
                  <div className="flex items-center gap-3">
                    <div
                      className="w-11 h-11 bg-kzblue50 text-lg font-bold rounded-lg flex items-center justify-center cursor-pointer dark:bg-background dark:hover:bg-cardfooter rtl:rotate-180"
                      onClick={() => {
                        setActiveDrawer("post-detail");
                        setPostId(item?.id);
                      }}
                    >
                      <IoIosArrowForward className="text-primary500 dark:text-primary400" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ));

      case COMMUNITY_EVENT_FORM_TYPE:
        if (listings.length == 0 && !isLoading) {
          return <DataNotFound />;
        }
        return listings.map((item: CommunityInterface, index: number) => {
          let dateStr = JSON.parse(item?.date ?? "{}");
          let currDate = new Date(dateStr).toDateString();

          return (
            <div
              key={item.id}
              className="bg-white dark:bg-darkbg border border-neutrals100 dark:border-darkborder rounded-md p-5 hover:shadow-lg transition-all hover:border-primary100"
            >
              <div className="w-full flex md:flex-row items-start justify-start gap-3">
                {/* Left Section */}
                <div className="img-box w-[106px] max-md:w-[71px]">
                  <img
                    src={`${process.env.NEXT_PUBLIC_API}${item.image ?? ""}`}
                    alt={item.title}
                    className="w-[106px] h-[106px] object-cover max-md:w-[71px] max-md:h-[71px]"
                    onError={(e) => {
                      e.currentTarget.onerror = null;
                      e.currentTarget.src = "/default.jpg";
                    }}
                  />
                </div>

                {/* Right Section */}
                <div className="w-[calc(100%-106px)] max-md:w-[calc(100%-71px)]">
                  <div className="flex items-start justify-between max-md:flex-col-reverse">
                    <div>
                      <h2 className="text-base font-semibold text-neutrals800 dark:text-white">
                        {item?.title}
                      </h2>
                      <p className="text-sm text-neutrals500 dark:text-neutrals400 mb-0">
                        {item.description}
                      </p>

                      <p className="font-bold text-primary500 dark:text-primary400">
                        {currDate}
                      </p>
                    </div>

                    <div className="flex items-center gap-3 justify-between max-md:w-full">
                      <p className="text-xs text-neutrals500 dark:text-neutrals400 whitespace-nowrap max-sm:whitespace-normal">
                        {t("dashboard.created_on")}
                        {item?.createdAt ?? ""}
                      </p>
                      {/* Menu */}
                      <div
                        className="relative"
                        ref={(el: any) => (menuRefs.current[index] = el)}
                      >
                        <BsThreeDotsVertical
                          size={18}
                          className="text-gray-500 cursor-pointer dark:text-neutrals400"
                          onClick={(e) => {
                            e.stopPropagation();
                            setOpenMenuId(openMenuId === index ? null : index);
                          }}
                        />
                        {openMenuId === index && (
                          <div className="absolute right-0 mt-2 w-24 bg-white border border-gray-100 dark:bg-background dark:border-darkborder shadow-md rounded z-50  rtl:right-auto rtl:left-0">
                            <button
                              className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                              onClick={() =>
                                router.push(
                                  `/listing/edit?id=${item.id}&type=${formType}`
                                )
                              }
                            >
                              {t("dashboard.edit")}
                            </button>
                            <button
                              className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                              onClick={() => {
                                handleStatusUpdate(
                                  item?.id,
                                  item?.status as string
                                );
                              }}
                            >
                              {item?.status === "active"
                                ? t("my_listing.inactive")
                                : t("my_listing.active")}
                            </button>

                            <button
                              className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                              onClick={() => {
                                setPostId(item?.id);
                                handleAdvertise();
                              }}
                            >
                              {t("my_listing.advertise")}
                            </button>

                            <button
                              className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                              onClick={() => {
                                setShowConfirmModal("on");
                                setDeletePostId(item?.id);
                              }}
                            >
                              {t("dashboard.delete")}
                            </button>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

                  <div className="flex justify-between items-center max-md:-ml-[83px] gap-2">
                    <p className="mt-2 block text-sm text-primary500 font-medium hover:underline dark:text-primary400">
                      {item?.contact_number?.country_code}{" "}
                      {item?.contact_number?.phone}
                    </p>
                    <div className="flex justify-end items-center gap-3">
                      <div
                        className="w-11 h-11 bg-kzblue50 text-lg font-bold rounded-lg flex items-center justify-center cursor-pointer dark:bg-background dark:hover:bg-cardfooter rtl:rotate-180"
                        onClick={() => {
                          setActiveDrawer("post-detail");
                          setPostId(item?.id);
                        }}
                      >
                        <IoIosArrowForward className="text-primary500 dark:text-primary400" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
        });

      case SERVICE_FORM_TYPE:
        if (listings.length == 0 && !isLoading) {
          return <DataNotFound />;
        }
        return listings.map((item: ServiceInterface, index: number) => {
          return (
            <div
              key={item.id}
              className="bg-white dark:bg-darkbg border border-neutrals100 dark:border-darkborder rounded-md p-5 hover:shadow-lg transition-all hover:border-primary100"
            >
              <div className="w-full flex md:flex-row items-start justify-start gap-3">
                {/* Left Section */}
                <div className="img-box w-[106px] max-md:w-[71px]">
                  <img
                    src={`${process.env.NEXT_PUBLIC_API}${item.image ?? ""}`}
                    alt={item.title}
                    onError={(e) => {
                      e.currentTarget.onerror = null;
                      e.currentTarget.src = "/default.jpg";
                    }}
                    className="w-[106px] h-[106px] object-cover max-md:w-[71px] max-md:h-[71px]"
                  />
                </div>

                {/* Right Section */}
                <div className="w-[calc(100%-106px)] max-md:w-[calc(100%-71px)]">
                  <div className="flex items-start justify-between max-md:flex-col-reverse">
                    <div>
                      <h2 className="text-base font-semibold text-neutrals800 dark:text-white">
                        {item?.title}
                      </h2>
                      <p className="text-sm text-neutrals500 dark:text-neutrals400 mb-0">
                        {item.description}
                      </p>

                      <p className="font-bold text-primary500 dark:text-primary400"></p>
                    </div>

                    <div className="flex items-center gap-3 justify-between max-md:w-full">
                      <p className="text-xs text-neutrals500 dark:text-neutrals400 whitespace-nowrap max-sm:whitespace-normal">
                        {t("dashboard.created_on")} {item?.createdAt ?? ""}
                      </p>
                      {/* Menu */}
                      <div
                        className="relative"
                        ref={(el: any) => (menuRefs.current[index] = el)}
                      >
                        <BsThreeDotsVertical
                          size={18}
                          className="text-gray-500 cursor-pointer dark:text-neutrals400"
                          onClick={(e) => {
                            e.stopPropagation();
                            setOpenMenuId(openMenuId === index ? null : index);
                          }}
                        />
                        {openMenuId === index && (
                          <div className="absolute right-0 mt-2 w-24 bg-white border border-gray-100 dark:bg-background dark:border-darkborder shadow-md rounded z-50  rtl:right-auto rtl:left-0">
                            <button
                              className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                              onClick={() =>
                                router.push(
                                  `/listing/edit?id=${item.id}&type=${formType}`
                                )
                              }
                            >
                              {t("dashboard.edit")}
                            </button>
                            <button
                              className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                              onClick={() => {
                                handleStatusUpdate(
                                  item?.id,
                                  item?.status as string
                                );
                              }}
                            >
                              {item?.status === "active"
                                ? t("my_listing.inactive")
                                : t("my_listing.active")}
                            </button>

                            <button
                              className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                              onClick={() => {
                                setPostId(item?.id);
                                handleAdvertise();
                              }}
                            >
                              {t("my_listing.advertise")}
                            </button>

                            <button
                              className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                              onClick={() => {
                                setShowConfirmModal("on");
                                setDeletePostId(item?.id);
                              }}
                            >
                              {t("dashboard.delete")}
                            </button>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

                  <div className="flex justify-end items-center max-md:-ml-[83px] gap-2">
                    <div className="flex items-center gap-3">
                      <div
                        className="w-11 h-11 bg-kzblue50 text-lg font-bold rounded-lg flex items-center justify-center cursor-pointer dark:bg-background dark:hover:bg-cardfooter rtl:rotate-180"
                        onClick={() => {
                          setActiveDrawer("post-detail");
                          setPostId(item?.id);
                        }}
                      >
                        <IoIosArrowForward className="text-primary500 dark:text-primary400" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
        });

      default:
        return null;
    }
  };

  // In Listing component, add at the very beginning:
  if (isLoading && listings.length === 0) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Loader />
      </div>
    );
  }

  return (
    <RouteLoader>
      <MobilePageHeader
        title={t("profile_menu.listing")}
        onBack={handleBack}
        rightContent={
          <Link
            href="/listing/create"
            className="text-neutrals900 dark:text-white"
            title="Create a new listing"
          >
            <IoMdAddCircleOutline size={24} />
          </Link>
        }
      />

      <main className="flex-1 max-md:px-0">
        <div className="flex items-center justify-between gap-2 pb-4 max-md:hidden">
          <h1 className="text-lg font-bold text-neutrals900 dark:text-white">
            {t("profile_menu.listing")}
          </h1>
          <Link
            href="/listing/create"
            title="Create a new listing"
            className="flex items-center text-primary500 border border-primary500 p-2 py-1.5 rounded-lg hover:bg-primary500 hover:text-white dark:text-primary400 dark:border-primary400 dark:hover:bg-primary400 dark:hover:text-white"
          >
            <IoMdAddCircleOutline size={20} />
          </Link>
        </div>

        <div className="mb-5">
          <div className="block text-sm font-medium text-neutrals800 mb-2.5 dark:text-neutrals400">
            {t("dashboard.select_main_category")}{" "}
            <span className="text-sm text-red-500">*</span>
          </div>
          <div className="flex justify-start flex-wrap items-center gap-3 pb-2.5 max-lg:grid max-lg:grid-cols-3 max-[920px]:grid-cols-2 max-lg:grid-rows-1 max-md:grid-cols-3 max-sm:grid-cols-2 max-[375px]:grid-cols-1">
            {initialData?.map((item: any) => (
              <label
                key={item?.id}
                className="flex items-center cursor-pointer max-w-full"
              >
                <input
                  type="radio"
                  name="mainCategory"
                  value={item?.id}
                  checked={selectedRadio === item?.id}
                  onChange={() => {
                    handleRadioChange(item.id, item);
                  }}
                  className="peer hidden"
                />
                <div className="w-full flex items-center gap-2.5 border border-neutraks100 px-3 py-2 rounded-lg peer-checked:bg-primary500 peer-checked:text-white dark:text-white dark:border-darkborder peer-checked:border-primary500 dark:peer-checked:bg-primary400">
                  <div className="icon w-9">
                    <img
                      src={
                        item?.title?.en == "Jobs"
                          ? "/jobs.svg"
                          : item?.title?.en == "Community-events"
                          ? "/community.svg"
                          : item?.title?.en == "Products"
                          ? "/products.svg"
                          : "/services.svg"
                      }
                      alt=""
                    />
                  </div>
                  <div className="min-w-[140px] max-lg:max-w-full max-md:w-full max-md:min-w-fit">
                    <span className="text-base font-normal max-md:text-sm">
                      {locale == "en"
                        ? `${item?.title?.en}`
                        : `${item?.title?.ar}`}
                    </span>
                  </div>
                </div>
              </label>
            ))}
          </div>
        </div>

        <section className="space-y-4">
          {renderByFormType()}

          {!isLoading && totalPages > 1 && (
            <div className="!mt-10">
              <Pagination
                pageCount={totalPages}
                currentPage={currentPage}
                onPageChange={({ selected }) => setCurrentPage(selected + 1)}
              />
            </div>
          )}
        </section>
      </main>

      <ListDetailSidebar
        isOpen={activeDrawer == "post-detail"}
        title={t("dashboard.listing_detail")}
        categoryData={initialData}
        onClose={closeDrawer}
        postId={postId}
        formType={formType}
        selectedCategory={formType}
      />

      {showConfirmModal && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30 "
          onClick={() => setShowConfirmModal(null)}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-sm dark:bg-darkbg transition-all"
          >
            <div className="flex items-start gap-3 mb-4">
              <div className="flex-shrink-0 mt-1">
                <svg
                  className="w-6 h-6 text-red-500"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M12 9v2m0 4h.01M5.07 19H18.93a2 2 0 001.78-2.9l-6.93-12a2 2 0 00-3.56 0l-6.93 12a2 2 0 001.78 2.9z"
                  />
                </svg>
              </div>

              <div>
                <h2 className="text-lg font-bold text-neutrals800 dark:text-neutrals100">
                  {t("dashboard.delete_confirm")}
                </h2>
                <p className="mt-1 text-sm text-neutrals600 dark:text-neutrals300">
                  {t("dashboard.delete_desc")}
                </p>
              </div>
            </div>

            <hr className="my-4 border-t border-neutrals200 dark:border-neutrals700" />

            <div className="flex justify-end gap-3">
              <Button
                variant="outline"
                onClick={() => setShowConfirmModal(null)}
                label={t("cancel")}
              />

              <Button
                label={isLoading ? t("deleting") : t("delete")}
                type="button"
                onClick={() => {
                  handleDelete(deletePostId);
                }}
                disabled={isLoading}
                variant="outline"
              />
            </div>
          </div>
        </div>
      )}

      {/* Advertisement */}
      {activeDrawer == "advertise" && (
        <Advertisement
          postId={postId as string}
          postType={formType}
          isOpen={activeDrawer == "advertise"}
          onClose={closeDrawer}
        />
      )}
    </RouteLoader>
  );
}