"use client";
import ProductCard from "@/components/ProductCard";
import SidebarFilters from "@/components/SidebarFilters";
import ProductSkeleton from "@/components/ProductSkeleton";
import FilterSkeleton from "@/components/FilterSkeleton";
import { useState, useEffect, useRef, useMemo } from "react";
import { useAppSelector } from "@/app/store/hooks";
import { selectWishlistProductIds } from "@/app/store/slices/wishlistSlice";
import { IoChevronDownSharp, IoLocationOutline } from "react-icons/io5";
import Link from "next/link";
import { IoIosArrowForward } from "react-icons/io";
import { RxCross2 } from "react-icons/rx";
import Button from "@/components/common/Button";
import { ArrowUpDown } from "lucide-react";
import { TbFilter } from "react-icons/tb";
import BottomDrawer from "@/components/BottomDrawerProps";
import { usePathname, useSearchParams } from "next/navigation";
import {
  fetchProductsWithFilters,
  fetchFiltersData,
} from "@/lib/actions/productFilterActions";
import { useFormatDateTime } from "@/lib/utils/dateTimeUtils";
import Pagination from "@/components/Pagination/Paginate";
import { getStoredLocale } from "@/lib/getLocale";
import { toast } from "react-toastify";
import Tree from "@/components/Filters/TreeComponent";
import { getStates } from "@/lib/actions/countryStateCityActions";
import { JOB_FORM_TYPE } from "@/lib/formTypes";
import BreadCrumb from "@/components/Breadcrumb";
import { useTranslations } from "next-intl";
import DataNotFound from "@/components/common/DataNotFound";

function AllJobsPageContent() {
  const [sortOpen, setSortOpen] = useState(false);
  const [regionOpen, setRegionOpen] = useState(false);
  const wishlistItems = useAppSelector(selectWishlistProductIds);
  const user = useAppSelector((state) => state.auth.user);
  const sortRef = useRef<HTMLDivElement>(null);
  const regionRef = useRef<HTMLDivElement>(null);
  const [filterData, setFilterData] = useState<any | null>(null);
  const [filtersLoading, setFiltersLoading] = useState(false);
  const [filtersError, setFiltersError] = useState<string | null>(null);
  const [products, setProducts] = useState<any[]>([]);
  const [filterOptions, setFilterOptions] = useState<any>(null);
  const [pagination, setPagination] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [category, setCategory] = useState<string | null>(null);
  const [currentPage, setCurrentPage] = useState(1);
  const locale = getStoredLocale();
  const { formatDateTime } = useFormatDateTime();
  const pathName = usePathname();

  const createBaseFilterState = () => ({
    priceRange: [0, 0],
    selectedBrands: [],
    selectedAttributes: [],
    selectedColors: [],
    selectedConditions: [],
    selectedFuels: [],
    selectedStates: [],
    selectedTags: [],
  });

  const [appliedFilters, setAppliedFilters] = useState<any>();
  // createBaseFilterState()

  const [pendingFilters, setPendingFilters] = useState<any>(
    createBaseFilterState()
  );

  const [hasUserAdjustedPrice, setHasUserAdjustedPrice] = useState(false);

  const searchParams = useSearchParams();

  const createDynamicFilterStateFromNewAPI = (filterData: any) => {
    const baseState: any = {
      priceRange: [0, 0],
      selectedBrands: [],
      selectedStates: [],
      selectedTags: [],
      selectedColors: [],
      selectedConditions: [],
      selectedFuels: [],
    };

    // Handle the new filter data structure (array of attributes)
    if (Array.isArray(filterData)) {
      filterData.forEach((attr: any) => {
        const { id, type, title } = attr;

        const key = attr?.label?.en.toLowerCase().replace(/ /g, "_");
        // Create filter key for dynamic attributes
        const filterKey = key;
        baseState[filterKey] = [];
      });
    }

    return baseState;
  };

  const [sortOption, setSortOption] = useState<string>("latest");

  const [treeData, setTreeData] = useState<any[] | null>(null);

  const t = useTranslations();

  // URL and category management
  useEffect(() => {
    const categoryFromUrl = searchParams?.get("category");
    setCategory(categoryFromUrl || "fresh-recommendations");
    setInitialLoadComplete(false); // Reset when category changes
    isInitialLoad.current = true; // Reset initial load flag
  }, [searchParams]);

  // Data fetching effects
  useEffect(() => {
    if (category) {
      fetchInitialFilters();
    }
  }, [category]);

  // Track if initial load is complete to avoid duplicate calls
  const [initialLoadComplete, setInitialLoadComplete] = useState(false);
  const isInitialLoad = useRef(true);

  // Fetch products when page changes
  useEffect(() => {
    // if (filterData && initialLoadComplete) {
    //   fetchProducts();
    // }

    if (initialLoadComplete) {
      fetchProducts();
    }
  }, [currentPage, sortOption]);

  // Click outside handlers for dropdowns
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Node;
      if (sortRef.current && !sortRef.current.contains(target)) {
        setSortOpen(false);
      }
      if (regionRef.current && !regionRef.current.contains(target)) {
        setRegionOpen(false);
      }
    };

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

  const transformJob = (data: any) => {
    const jobData = data?.map((item: any) => {
      let obj: any = {
        id: item._id,
        createdAt: item.createdAt,
      };

      item?.attributes?.forEach((attr: any) => {
        let slug = attr.attributeSlug;

        if (slug === "title") {
          obj.title = attr.value;
        } else if (slug === "description" || slug === "short-description") {
          obj.description = attr.value;
        } else if (slug === "employment-type") {
          let id = attr.value;
          let res = attr.attributeOptions?.find((obj: any) => obj._id == id);
          obj.employmentType = res?.value?.en;
        } else if (slug === "city" || slug === "state") {
          if (Array.isArray(attr.value) && attr.value.length > 0) {
            obj.cityOrState = attr.value[0].value;
          } else {
            obj.cityOrState = attr.value;
          }
        }
      });

      return obj;
    });
    setProducts(jobData);
  };

  const fetchInitialFilters = async () => {
    if (!category) {
      return;
    }
    try {
      setFiltersLoading(true);
      setFiltersError(null);
      setLoading(true);
      setError(null);

      const currentCategory = category;

      // Use the new API to fetch filters data
      // For now, use static category slug "product" - will be made dynamic later
      const categorySlug = category;
      const parentCategory = pathName.split("/")[1];

      let payload: any = {
        categorySlug,
        parentCategory,
      };

      const filtersResponse = await fetchFiltersData(payload);

      // prepare a sidebar with tree structure for the parent category to show all the subcategories
      if (categorySlug == "fresh-recommendations") {
        const data = filtersResponse.data?.categoryGetChildCategory;

        setTreeData(data);
        setFilterData(null);
      }

      // Fetch products separately
      const sellerId = searchParams?.get("sellerId") || null;
      const productsResponse = await fetchProductsWithFilters(
        {
          category: currentCategory as string,
          filters: undefined, // No filters applied
          page: 1,
          limit: 12,
          fetchAllFilters: false,
          sellerId: sellerId,
          slug: JOB_FORM_TYPE,
        } // fetchAllFilters = false, just get products
      );

      if (productsResponse.data.data) {
        const data = productsResponse.data.data.jobs;
        transformJob(data);

        setPagination(productsResponse.data.data.pagination);
        setCurrentPage(1);
      }
    } catch (err: any) {
      setFiltersError(err.message || t("failed_to_fetch_filter_data"));
      setError(err.message || t("failed_to_fetch_products"));
      setFilterData(null);
      setProducts([]);
      setPagination(null);
    } finally {
      setFiltersLoading(false);
      setLoading(false);
      setInitialLoadComplete(true);
      isInitialLoad.current = false;
    }
  };

  const fetchProducts = async (customFilters?: any) => {
    if (!category) {
      return;
    }
    try {
      setLoading(true);
      setError(null);

      // Use custom filters if provided, otherwise use current appliedFilters
      const filtersForAPI = customFilters
        ? { ...customFilters }
        : { ...appliedFilters };
      // Reset price range if user hasn't adjusted it
      if (!hasUserAdjustedPrice) {
        filtersForAPI.priceRange = [0, 0];
      }

      const currentCategory = category;
      const response = await fetchProductsWithFilters({
        category: currentCategory,
        filters: filtersForAPI, // Apply current filter selections
        page: currentPage,
        limit: 12,
        fetchAllFilters: false, // fetchAllFilters = false, just get products
        sort: sortOption,
        slug: JOB_FORM_TYPE,
      });

      const data = response?.data?.data.jobs;

      transformJob(data);

      setPagination(response.data.data.pagination);
    } catch (err: any) {
      setError(err.message || t("failed_to_fetch_products"));
      setProducts([]);
      setPagination(null);
      setFilterOptions(null);
    } finally {
      setLoading(false);
    }
  };

  const activeFilters = useMemo(() => {
    // const filters: string[] = [];
    // // Price range filter
    // if (hasUserAdjustedPrice) {
    //   filters.push(
    //     `SAR ${appliedFilters.priceRange[0]} - SAR ${appliedFilters.priceRange[1]}`
    //   );
    // }
    // // Process all filter types in a single loop
    // filterTypes.forEach(({ key, prefix, lookup, idProp, valueProp }) => {
    //   appliedFilters[key]?.forEach((id: any) => {
    //     const item = filterOptions?.[lookup]?.find(
    //       (i: any) => i[idProp] === id
    //     );
    //     filters.push(item ? `${prefix} ${item[valueProp]}` : `${prefix} ${id}`);
    //   });
    // });
    // // Process dynamic attributes from filterData
    // if (filterOptions?.dynamicAttributes) {
    //   // Handle both new and old API structures
    //   if (Array.isArray(filterData)) {
    //     // New API structure
    //     Object.entries(filterOptions.dynamicAttributes).forEach(
    //       ([uniqueKey, attr]: [string, any]) => {
    //         const filterKey = attr.filterKey;
    //         const selectedValues = appliedFilters[filterKey] || [];
    //         if (selectedValues.length > 0 && attr.options) {
    //           selectedValues.forEach((selectedId: any) => {
    //             const option = attr.options.find(
    //               (opt: any) => opt.id === selectedId
    //             );
    //             if (option) {
    //               filters.push(`${attr.title}: ${option.label}`);
    //             }
    //           });
    //         }
    //       }
    //     );
    //   } else if (filterData?.attributes) {
    //     // Old API structure
    //     const staticSlugs = new Set([
    //       "brand",
    //       "color",
    //       "condition",
    //       "fuel",
    //       "state",
    //       "tag",
    //     ]);
    //     filterData.attributes.forEach((attr: any) => {
    //       if (!attr?.key?.filterable) return;
    //       const slug = attr.key.attributeId.slug.replace(/\s+/g, "_"); // Replace spaces with underscores for internal use
    //       if (staticSlugs.has(slug)) return; // handled by static filterTypes above
    //       const title = attr.key.attributeId.title; // Keep original title for display
    //       const filterKey = `selected${
    //         slug.charAt(0).toUpperCase() + slug.slice(1)
    //       }s`;
    //       const uniqueKey = `${slug}_0`; // Use first index
    //       // Only process attributes that have options available (non-empty)
    //       const dynamicAttr = filterOptions.dynamicAttributes[uniqueKey];
    //       if (
    //         !dynamicAttr ||
    //         !dynamicAttr.options ||
    //         dynamicAttr.options.length === 0
    //       )
    //         return;
    //       // Check if this dynamic attribute has selected values
    //       const selectedValues = appliedFilters[filterKey] || [];
    //       // Ensure each selected value is only shown once and exists in options
    //       const seenValues = new Set<string>();
    //       selectedValues.forEach((selectedId: any) => {
    //         if (seenValues.has(selectedId)) return;
    //         const option = dynamicAttr.options.find(
    //           (opt: any) => opt.id === selectedId
    //         );
    //         if (option) {
    //           filters.push(`${title}: ${option.label}`); // Use label (original display value) instead of value
    //           seenValues.add(selectedId);
    //         }
    //       });
    //     });
    //   }
    // }
    // return filters;

    const filters: any[] = [];

    if (hasUserAdjustedPrice && appliedFilters?.priceRange) {
      filters.push({
        field: "priceRange",
        value: appliedFilters.priceRange,
        label: {
          en: `SAR ${appliedFilters.priceRange[0]} - SAR ${appliedFilters.priceRange[1]}`,
          ar: `SAR ${appliedFilters.priceRange[0]} - SAR ${appliedFilters.priceRange[1]}`,
        },
        type: "range",
      });
    }

    const staticMap: Record<
      string,
      { key: string; title: string; options?: any[] }
    > = {
      selectedColors: {
        key: "color",
        title: "Color",
        options: filterOptions?.colors,
      },
      selectedBrands: {
        key: "brand",
        title: "Brand",
        options: filterOptions?.brands,
      },
      selectedTags: {
        key: "tags",
        title: "Tags",
        options: filterOptions?.tags,
      },
      selectedConditions: {
        key: "condition",
        title: "Condition",
        options: filterOptions?.conditions,
      },
      selectedFuels: {
        key: "fuel",
        title: "Fuel",
        options: filterOptions?.fuels,
      },
    };

    Object.entries(staticMap).forEach(([filterKey, { key, options }]) => {
      const selected = appliedFilters?.[filterKey] || [];

      selected.forEach((selectedOpt: any) => {
        if (selectedOpt?.value) {
          filters.push(selectedOpt);
        } else {
          const opt = options?.find((o: any) => o.value === selectedOpt);
          if (opt) {
            filters.push(opt);
          } else {
            filters.push({
              field: key,
              value: String(selectedOpt),
              label: selectedOpt,
            });
          }
        }
      });
    });

    // ---------- Dynamic Attributes ----------
    // if (filterOptions?.dynamicAttributes) {

    // }

    if (appliedFilters) {
      Object.entries(appliedFilters).forEach(
        ([attrKey, attrOptions]: [string, any]) => {
          if (attrKey == "priceRange" || staticMap[attrKey]) return;

          const selectedValues = appliedFilters[attrKey] || [];
          if (selectedValues.length > 0) {
            selectedValues.forEach((selectedOpt: any) => {
              // If already a full object, just push it
              if (selectedOpt?.value) {
                filters.push(selectedOpt);
              } else {
                // fallback: find option by value if only ID is stored
                const option = attrOptions.find(
                  (o: any) => o.value === selectedOpt
                );
                if (option) {
                  filters.push(option);
                } else {
                  filters.push({
                    field: attrKey,
                    value: String(selectedOpt),
                    label: selectedOpt,
                    meta: selectedOpt?.meta,
                  });
                }
              }
            });
          }
        }
      );
    }

    return filters;
  }, [appliedFilters, filterOptions, hasUserAdjustedPrice, filterData]);

  const removeFilter = (filter: string) => {
    // let newFilters = { ...appliedFilters };

    // if (filter.includes("SAR") && filter.includes(" - ")) {
    //   setHasUserAdjustedPrice(false);
    //   newFilters = {
    //     ...newFilters,
    //     priceRange: [
    //       filterOptions?.priceRange.actualMin || 0,
    //       filterOptions?.priceRange.actualMax || 100000,
    //     ],
    //   };
    // } else {
    //   const removeFilterTypes = filterTypes.map(
    //     ({ prefix, key: type, lookup, idProp: key, valueProp: valueKey }) => ({
    //       prefix,
    //       type,
    //       lookup,
    //       key,
    //       valueKey,
    //     })
    //   );

    //   for (const { prefix, type, lookup, key, valueKey } of removeFilterTypes) {
    //     if (filter.startsWith(prefix)) {
    //       const filterName = filter.replace(prefix, "").trim();
    //       const filterItem = filterOptions?.[lookup]?.find(
    //         (item: any) => item[valueKey] === filterName
    //       );

    //       if (filterItem) {
    //         newFilters = {
    //           ...newFilters,
    //           [type]: newFilters[type].filter(
    //             (id: string) => id !== filterItem[key]
    //           ),
    //         };
    //       }
    //       break;
    //     }
    //   }
    // }

    // setAppliedFilters(newFilters);

    // if (initialLoadComplete && !isInitialLoad.current) {
    //   fetchProducts(newFilters); // Pass the updated filters directly
    // }
    let newFilters = { ...appliedFilters };
    if (Array.isArray(filter)) {
      // this is price remove
      newFilters["priceRange"] = [0, 0];

      setAppliedFilters(newFilters);
      return;
    }

    Object.keys(newFilters).forEach((key) => {
      const selected = newFilters[key] || [];

      newFilters[key] = selected.filter((opt: any) => opt.value !== filter);
    });

    setAppliedFilters(newFilters);

    if (initialLoadComplete && !isInitialLoad.current) {
      fetchProducts(newFilters);
    }
  };

  const applyMobileFilters = () => {
    setAppliedFilters(pendingFilters);
    setIsDrawerOpen(false);
    // Trigger product fetch when mobile filters are applied
    if (initialLoadComplete && !isInitialLoad.current) {
      fetchProducts(pendingFilters); // Pass the new filters directly
    }
  };

  const closeMobileDrawer = () => {
    setPendingFilters(appliedFilters); // Reset to original state
    setIsDrawerOpen(false);
  };

  const handlePageChange = (selectedItem: { selected: number }) => {
    const newPage = selectedItem.selected + 1;
    setCurrentPage(newPage);
  };

  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [isDrawerOpenSort, setIsDrawerOpenSort] = useState(false);

  const [activeSort, setActiveSort] = useState("recent");

  const options = [
    { label: "Recently Posted", value: "latest" },
    { label: "Lowest Price", value: "low_price" },
    { label: "Highest Price", value: "high_price" },
  ];

  const [states, setStates] = useState<any>(null);

  const getStateDate = async (country_id: any) => {
    var isStateData = [];
    // setCities([]);
    try {
      const response = await getStates(user?.token, country_id);
      if (response.success && Array.isArray(response?.stateData)) {
        isStateData = response?.stateData.map((opt: any) => ({
          value: opt._id,
          label: opt.name,
        }));
      }
    } catch (error: any) {
      // if (checkAuthErrorGet(error, dispatch, router)) return;
      // toast.error(error?.response?.data?.message || t("validation.error_msg"));
    } finally {
      setStates(isStateData);
    }
  };

  useEffect(() => {
    getStateDate(process.env.NEXT_PUBLIC_COUNTRY_CODE);
  }, []);

  return (
    <div className="dark:bg-background">
      <section className="p-6">
        <div className="max-w-w1660 mx-auto relative">
          <div className="flex gap-6">
            {typeof window !== "undefined" && window.innerWidth >= 768 && (
              <div className="max-md:hidden">
                {filtersLoading ? (
                  <FilterSkeleton />
                ) : filtersError ? (
                  <div className="w-80 bg-neutrals50 rounded-lg dark:bg-card p-4">
                    <div className="text-center text-red-500 dark:text-red-400">
                     {t("error_loading_filters")}
                    </div>
                  </div>
                ) : (
                  treeData && (
                    <Tree
                      category={JOB_FORM_TYPE}
                      data={treeData}
                      language={locale == "en" ? "en" : "ar"}
                    />
                  )
                )}
              </div>
            )}
            <div className="flex-1">
              {/* Breadcrumb */}
              <BreadCrumb
                items={[
                  { title: t("filters.home"), href: "/" },
                  {
                    title: JOB_FORM_TYPE,
                  },
                ]}
              />

              <div className="flex justify-between mb-2.5 pb-2.5 border-b gap-2 border-neutrals100 max-[1024px]:items-start dark:border-darkborder">
                <div className="flex items-center flex-wrap gap-2.5 max-md:pt-2.5">
                  {/* Results and filters */}
                  <div className="text-sm text-neutrals900 font-semibold pr-2.5 border-r border-neutrals200 max-[1024px]:border-hidden dark:text-white dark:border-darkborder">
                    {!category ? (
                      <div className="h-4 bg-neutrals100 dark:bg-background rounded w-32 animate-pulse" />
                    ) : loading ? (
                      <div className="h-4 bg-neutrals100 dark:bg-background rounded w-24 animate-pulse" />
                    ) : (
                      <>
                        {pagination?.total || 0} {t("result_for")} {category}
                        {appliedFilters?.selectedStates.length > 0 ? (
                          <span> {t("in_selected_states")}</span>
                        ) : (
                          <span> {t("from_all_regions")}</span>
                        )}
                      </>
                    )}
                  </div>

                  {/* Active filters */}
                  {activeFilters.length > 0 && (
                    <div className="flex flex-wrap gap-2">
                      {activeFilters.map((filter: any, index: number) => {
                        const field = filter?.field
                          ? filter.field
                            .replace(/_/g, " ")
                            .charAt(0)
                            .toUpperCase() +
                          filter.field
                            .replace(/_/g, " ")
                            .slice(1)
                            .toLowerCase()
                          : undefined;

                        if (
                          !filter?.value ||
                          (filter.value.length === 2 &&
                            filter.value[0] == 0 &&
                            filter.value[1] == 0)
                        ) {
                          return null;
                        }

                        return (
                          <div
                            key={`${filter?.key}-${index}`}
                            className="bg-kzblue50 text-primary500 text-xs rounded-full flex items-center gap-1 py-1 px-2 dark:bg-card dark:text-primary400"
                          >
                            <span className="flex items-center gap-1 text-xs text-primary500 dark:text-primary400">
                              {field} {": "}{" "}
                              {filter?.label?.en
                                ? filter?.label?.en
                                : filter?.label}
                              {filter?.imageUrl && (
                                <div
                                  className={`w-8 h-8 border-2 overflow-hidden transition-all duration-200 ${filter?.type?.includes("radio")
                                      ? "rounded-full"
                                      : "rounded"
                                    } `}
                                >
                                  <img
                                    src={`${process.env.NEXT_PUBLIC_API}/${filter.imageUrl}`}
                                    alt={filter.label?.en || ""}
                                    className="w-full h-full object-cover"
                                    onError={(e) => {
                                      e.currentTarget.onerror = null;
                                      e.currentTarget.src =
                                        "/profile-avatar.png";
                                    }}
                                  />
                                </div>
                              )}
                            </span>
                            <RxCross2
                              className="cursor-pointer text-sm ml-1"
                              onClick={() => removeFilter(filter?.value)}
                            />
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
                <div className="flex items-center max-lg:flex-wrap-reverse max-lg:items-end max-lg:h-fit justify-end gap-2.5">
                  <div className="flex items-center gap-2.5">
                    <span className="text-sm font-normal text-neutrals400 whitespace-nowrap max-md:hidden">
                     {t("sort_by")}:
                    </span>
                    {/* Sort Dropdown */}
                    <div className="relative max-md:hidden" ref={sortRef}>
                      <button
                        onClick={() => {
                          setSortOpen(!sortOpen);
                          setRegionOpen(false);
                        }}
                        className="min-w-24 text-sm text-neutrals800 border px-3 py-3 pl-2 rounded-md flex items-center justify-between gap-1 max-[1024px]:py-2 dark:bg-card dark:text-neutrals400 dark:border-darkborder"
                      >
                        {
                          options?.find((obj) => obj.value === sortOption)
                            ?.label
                        }
                        <IoChevronDownSharp />
                      </button>
                      {sortOpen && (
                        <div className="absolute right-0 z-30 p-2 mt-2 bg-white border-neutrals200 border rounded-md shadow-md min-w-[177px] dark:bg-card dark:text-neutrals400 r dark:border-darkborder rtl:left-0 rtl:right-auto">
                          <ul className="text-sm text-neutrals800">
                            <li
                              className="px-4 py-2 rounded-md hover:bg-neutrals50 text-primary500 cursor-pointer dark:text-primary400 dark:hover:bg-background"
                              onClick={() => {
                                setSortOption("latest");
                                setSortOpen(!sortOpen);
                              }}
                            >
                              {t("recently_posted")}
                            </li>
                            <li
                              className="px-4 py-2 rounded-md hover:bg-neutrals50 text-primary500 cursor-pointer dark:text-primary400 dark:hover:bg-background"
                              onClick={() => {
                                setSortOption("low_price");
                                setSortOpen(!sortOpen);
                              }}
                            >
                              {t("lowest_price")}
                            </li>
                            <li
                              className="px-4 py-2 rounded-md hover:bg-neutrals50 text-primary500 cursor-pointer dark:text-primary400 dark:hover:bg-background"
                              onClick={() => {
                                setSortOption("high_price");
                                setSortOpen(!sortOpen);
                              }}
                            >
                              {t("highest_price")}
                            </li>
                          </ul>
                        </div>
                      )}
                    </div>

                    {/* Region Dropdown */}
                    {/* <div className="relative" ref={regionRef}>
                      <button
                        onClick={() => {
                          setRegionOpen(!regionOpen);
                          setSortOpen(false);
                        }}
                        className="min-w-24 text-sm text-neutrals800 border px-3 py-3 pl-2 rounded-md flex items-center justify-between gap-1 max-[1024px]:py-2 dark:bg-card dark:text-neutrals400 dark:border-darkborder"
                      >
                        Region
                        {appliedFilters?.selectedStates?.length > 0
                          ? ` (${appliedFilters?.selectedStates.length})`
                          : ""}
                        <IoChevronDownSharp />
                      </button>
                      {regionOpen && (
                        <div className="absolute right-0 z-30 p-2 mt-2 bg-white border-neutrals200 border rounded-md shadow-md min-w-[177px] dark:bg-card dark:text-neutrals400 r dark:border-darkborder rtl:left-0 rtl:right-auto overflow-auto h-[200px]">
                          <ul className="text-sm text-neutrals800">
                            {(() => {
                              if (!filterData) return null;

                              // const states: { value: string; label: string }[] =
                              //   [];

                              // Handle both new and old API structures
                              // if (Array.isArray(filterData)) {
                              //   // New API structure - look for state attributes
                              //   filterData.forEach((attr: any) => {
                              //     if (
                              //       attr.type ===
                              //         "singleselectdropdownwithsearch" &&
                              //       attr.title?.en
                              //         ?.toLowerCase()
                              //         .includes("state")
                              //     ) {
                              //       attr.options?.forEach((option: any) => {
                              //         const keyStr = option._id.toString();
                              //         if (!seenKeys.has(keyStr)) {
                              //           seenKeys.add(keyStr);
                              //           states.push({
                              //             key: keyStr,
                              //             value:
                              //               option.value?.en ||
                              //               option.value ||
                              //               option._id,
                              //           });
                              //         }
                              //       });
                              //     }
                              //   });
                              // } else if (filterData.regions?.states) {
                              //   // Old API structure
                              //   filterData.regions.states.forEach(
                              //     (stateItem: any) => {
                              //       let state;

                              //       // Check if it's already an object (new format) or a JSON string (old format)
                              //       if (
                              //         typeof stateItem === "object" &&
                              //         stateItem.key &&
                              //         stateItem.value
                              //       ) {
                              //         state = stateItem;
                              //       } else {
                              //         try {
                              //           state = JSON.parse(stateItem);
                              //         } catch {
                              //           return; // Skip invalid entries
                              //         }
                              //       }

                              //       if (state.key && state.value) {
                              //         const keyStr = state.key.toString();
                              //         // Only add if we haven't seen this key before
                              //         if (!seenKeys.has(keyStr)) {
                              //           seenKeys.add(keyStr);
                              //           states.push({
                              //             key: keyStr,
                              //             value: state.value,
                              //           });
                              //         }
                              //       }
                              //     }
                              //   );
                              // }

                              if (states.length === 0) {
                                return (
                                  <li className="px-4 py-2 text-neutrals500 dark:text-neutrals400">
                                    No states available
                                  </li>
                                );
                              }

                              return states.map(
                                (state: { value: string; label: string }) => (
                                  <li
                                    key={state.value}
                                    className="px-4 py-2 rounded-md hover:bg-neutrals50 text-primary500 cursor-pointer dark:text-primary400 dark:hover:bg-background"
                                    onClick={() => {
                                      const hasObj =
                                        appliedFilters.selectedStates?.find(
                                          (obj: any) =>
                                            obj.value === state.value
                                        );
                                      let newStates = [];
                                      if (hasObj) {
                                        newStates =
                                          appliedFilters?.selectedStates.filter(
                                            (s: any) => s.value !== state.value
                                          );
                                      } else {
                                        newStates = [
                                          { ...state, field: "state" },
                                        ];
                                      }

                                      const newFilters = {
                                        ...appliedFilters,
                                        selectedStates: newStates,
                                      };

                                      setAppliedFilters(newFilters);

                                      setRegionOpen(false);
                                      if (
                                        initialLoadComplete &&
                                        !isInitialLoad.current
                                      ) {
                                        fetchProducts(newFilters);
                                      }
                                    }}
                                  >
                                    {state.label}
                                    {appliedFilters?.selectedStates.includes(
                                      state.label
                                    ) && (
                                      <span className="ml-2 text-xs">✓</span>
                                    )}
                                  </li>
                                )
                              );
                            })()}
                          </ul>
                        </div>
                      )}
                    </div> */}
                  </div>
                </div>
              </div>

              {!category ? (
                <ProductSkeleton count={12} isGrid={true} />
              ) : // ) : loading || !filterData ? (
                loading ? (
                  <ProductSkeleton count={12} isGrid={true} />
                ) : error ? (
                  <div className="flex flex-col justify-center items-center py-10 gap-4">
                    <div className="text-red-500 text-center">{error}</div>
                    <div className="text-sm text-neutrals500 dark:text-neutrals400 text-center max-w-md">
                      {error.includes("Network error")
                        ? "Please check your internet connection and ensure the API server is running."
                        : "There was an issue loading the products. Please try again later."}
                    </div>
                    <button
                      onClick={() => fetchProducts()}
                      className="px-4 py-2 bg-primary500 text-white rounded-lg hover:bg-primary600 dark:bg-primary400 dark:hover:bg-primary500"
                    >
                      {t("retry")}
                    </button>
                  </div>
                ) : products.length > 0 ? (
                  <>
                    <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5">
                      {products.map((product) => {
                        return (
                          <Link href={`/jobs/${product.id}`} key={product.id}>
                            <div className="flex flex-col flex-shrink-0 overflow-hidden relative border border-neutrals100 rounded-lg bg-white dark:bg-card dark:border-card h-full justify-between">
                              <div className="p-4 pb-4">
                                <div className="flex justify-between items-center mb-5">
                                  <p className="text-xl font-bold text-primary500 dark:text-white">
                                    Kanzy
                                  </p>
                                  <span
                                    className="text-sm px-2.5 py-1 rounded-md bg-kzblue50 text-primary500 font-normal dark:bg-background dark:text-neutrals400 max-w-[100px] line-clamp-1"
                                    title={product.employmentType}
                                  >
                                    {product.employmentType}
                                  </span>
                                </div>
                                <p className="text-base font-semibold text-neutrals900 leading-tight mb-1 dark:text-neutrals400 line-clamp-2">
                                  {product.title}
                                </p>
                                <div
                                  className="text-sm text-neutrals500 line-clamp-2"
                                  dangerouslySetInnerHTML={{
                                    __html: product.description,
                                  }}
                                />
                              </div>

                              <div>
                                <div className="flex items-center justify-between bg-neutrals50 text-xs py-2 px-4 text-neutrals500 dark:bg-cardfooter">
                                  <div className="flex items-center gap-1">
                                    <IoLocationOutline className=" text-neutrals800 w-4 h-4 dark:text-neutrals400" />
                                    <span className="text-sm text-neutrals800 dark:text-neutrals400">
                                      {product.cityOrState}
                                    </span>
                                  </div>
                                  <span className="text-sm text-neutrals800 dark:text-neutrals400">
                                    {formatDateTime(product.createdAt)}
                                  </span>
                                </div>
                              </div>
                            </div>
                          </Link>
                        );
                      })}
                    </div>

                    {/* Pagination */}
                    {pagination && pagination.totalPages > 1 && (
                      <div className="mt-6">
                        <Pagination
                          pageCount={pagination.totalPages}
                          currentPage={currentPage}
                          onPageChange={handlePageChange}
                        />
                      </div>
                    )}
                  </>
                ) : (
                  <DataNotFound />
                )}
            </div>
          </div>
        </div>
      </section>

      <div className="fixed bottom-0 left-0 w-full bg-white flex justify-between items-center py-2 z-50 min-h-14 md:hidden shadow-lg dark:bg-darkbg">
        <button
          className="flex items-center justify-center text-sm gap-2 text-neutrals800 w-full dark:text-neutrals400"
          onClick={() => setIsDrawerOpen(true)}
        >
          <TbFilter className="w-5 h-5 mb-1" />
          <span className="text-base">{t("filter")}</span>
        </button>

        <div className="h-6 border-l border-neutrals200 dark:border-darkborder"></div>

        <button
          className="flex items-center justify-center text-sm gap-2 text-neutrals800 w-full dark:text-neutrals400"
          onClick={() => setIsDrawerOpenSort(true)}
        >
          <ArrowUpDown className="w-5 h-5 mb-1" />
          <span className="text-base">{t("sort")}</span>
        </button>
      </div>

      <div className="hidden max-md:block">
        {/* Filter Drawer */}
        <BottomDrawer
          isOpen={isDrawerOpen}
          title={t("filters1")}
          onClose={closeMobileDrawer}
          footer={
            <div className="flex justify-end gap-2">
              <Button
                type="button"
                label={t("apply")}
                variant="secondary"
                className="w-full flex justify-center items-center"
                onClick={applyMobileFilters}
              />
            </div>
          }
        >
          {filtersLoading ? (
            <div className="p-4">
              <FilterSkeleton />
            </div>
          ) : (
            treeData && (
              <Tree
                category={JOB_FORM_TYPE}
                data={treeData}
                language={locale == "en" ? "en" : "ar"}
              />
            )
          )}
        </BottomDrawer>

        {/* Sort Drawer */}
        <BottomDrawer
          isOpen={isDrawerOpenSort}
          title={t("sort")}
          onClose={() => setIsDrawerOpenSort(false)}
          footer={
            <div className="flex justify-end gap-2">
              <Button
                type="submit"
                label={t("apply")}
                variant="secondary"
                onClick={() => setIsDrawerOpenSort(false)}
                className="w-full flex justify-center items-center"
              />
            </div>
          }
        >
          <div>
            {options.map((option, index) => (
              <div
                key={option.value}
                className={`px-4 py-3 cursor-pointer text-sm ${sortOption === option.value
                    ? "bg-neutrals50 text-primary500 rounded-lg dark:bg-card dark:text-primary400"
                    : "text-neutrals800 dark:text-neutrals400"
                  } ${index !== 0 &&
                  "border-t border-gray-100 dark:border-darkborder"
                  }`}
                onClick={() => setSortOption(option.value)}
              >
                {option.label}
              </div>
            ))}
          </div>
        </BottomDrawer>
      </div>
    </div>
  );
}

export default function AllJobsPage() {
  return <AllJobsPageContent />;
}