"use client";

import { useState, useEffect, useRef } from "react";
import { useSearchParams } from "next/navigation";
import Newsletter from "@/components/frontend-pages/home/Newsletter";
import { apiCall } from "@/utils/callApi";

import ProductFilter from "./ProductFilter";
import ProductListCard, { ProductListItem } from "./ProductListCard";
import FilterTopBar from "./FilterTopBar";
import SkeletonLoader from "@/components/frontend-pages/home/SkeletonLoader";


export default function ProductsPage() {
  const [products, setProducts] = useState<ProductListItem[]>([]);

  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const pageRef = useRef(1);
  const isFetchingRef = useRef(false);
  const loadingRef = useRef<HTMLDivElement | null>(null);
  const [hasMore, setHasMore] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);

  const [loading, setLoading] = useState(true);
  const [filtersLoading, setFiltersLoading] = useState(true);

  const [filters, setFilters] = useState<any>(null);
   const searchParams = useSearchParams();
  const [selectedFilters, setSelectedFilters] = useState({
    category: '' as string,
    subcategory: [] as string[],
    size: [] as string[],
    color: [] as string[],
    ratings: [] as number[],
    price: {
        min: 0,
        max: 20000,
    },
    sortBy: "createdAt_desc",
    });

    useEffect(() => {
  setSelectedFilters((prev) => ({
    ...prev,

    category:
      searchParams.get("category") || "",

    subcategory:
      searchParams
        .get("subcategory")
        ?.split(",")
        .filter(Boolean) || [],
  }));
}, [searchParams]);
    const normalizeProduct = (p: any): ProductListItem => {
      const firstSku = p?.skus?.[0];

      const price = p?.price ?? 0;

      const originalPrice =
        firstSku?.comparePrice?.$numberDecimal
          ? Number(firstSku.comparePrice.$numberDecimal)
          : p?.price ?? 0;
        // console.log('PPPPPPPPPPPPPPPP', p)
        return {
          _id: p._id,
          name: p.name,
          image: p.defaultImage,
          price,
          originalPrice,
          discount: p.discount ?? 0,
          skus: p.skus || [],
          variants: p.variants || [],
          totalQuantity: p.totalQuantity ?? 0,
          totalReviews: p.totalReviews,
          availableColors: p.availableColors || [],
          availableSizes: p.availableSizes || [],
          slug: p.slug
        };
    };

const fetchProducts = async (
  pageNum = 1,
  append = false,
  currentFilters = selectedFilters
) => {
        if (isFetchingRef.current) return;

        isFetchingRef.current = true;

        if (pageNum === 1) setLoading(true);
        else setLoadingMore(true);

        try {
          const query = new URLSearchParams();

          query.append("page", String(pageNum));
          query.append("limit", "6");

          if (selectedFilters.category.length)
            query.append("category", selectedFilters.category);

          if (selectedFilters.subcategory.length)
            query.append("subcategory", selectedFilters.subcategory.join(","));

          if (selectedFilters.size.length)
            query.append("size", selectedFilters.size.join(","));

          if (selectedFilters.color.length)
            query.append("color", selectedFilters.color.join(","));

          if (selectedFilters.ratings.length)
            query.append("ratings", selectedFilters.ratings.join(","));

          query.append("minPrice", String(selectedFilters.price.min));
          query.append("maxPrice", String(selectedFilters.price.max));

          query.append("sortBy", selectedFilters.sortBy);

          const { data } = await apiCall(
            `/clientapi/products?${query.toString()}`
          ) as any;

          const normalized = data.data.map(normalizeProduct);

          if (append) {
            setProducts(prev => [...prev, ...normalized]);
          } else {
            setProducts(normalized);
          }

          setTotal(data.total ?? data.pagination?.total);

          // stop condition
          const totalPages = data.pagination?.pages || 1;
          setHasMore(pageNum < totalPages);
          setPage(pageNum);
          pageRef.current = pageNum;

        } catch (error) {
          console.error(error);
        } finally {
          isFetchingRef.current = false;
          setLoading(false);
          setLoadingMore(false);
        }
    };

useEffect(() => {
  const updatedFilters = {
    ...selectedFilters,

    category:
      searchParams.get("category") || "",

    subcategory:
      searchParams
        .get("subcategory")
        ?.split(",")
        .filter(Boolean) || [],
  };

  setSelectedFilters(updatedFilters);

  pageRef.current = 1;

  setPage(1);

  setHasMore(true);

  fetchProducts(1, false, updatedFilters);
}, [searchParams]);

    // Handle scrollwise fetching
    useEffect(() => {
      const el = loadingRef.current;
      if (!el) return;

      const observer = new IntersectionObserver(
        (entries) => {
          const target = entries[0];

          if (
            target.isIntersecting &&
            hasMore &&
            !isFetchingRef.current
          ) {
            fetchProducts(pageRef.current + 1, true);
          }
        },
        {
          root: null,
          rootMargin: "300px",
          threshold: 0,
        }
      );

      observer.observe(el);

      return () => observer.disconnect();
    }, [hasMore, fetchProducts]);


  const openFilter = () => {
    if (window.innerWidth < 1024) {
      document.body.classList.add("filter-layout");
    }
  };

  const closeFilter = () => {
    document.body.classList.remove("filter-layout");
  };

  const setPrice = (min: number, max: number) => {
  setSelectedFilters((prev) => ({
    ...prev,
    price: { min, max },
  }));
};

// Toggle function
const toggleArrayFilter = (key: string, value: string) => {
  setSelectedFilters((prev: any) => {
    if (key === "category") {
      // radio — deselect if same, select new
      return {
        ...prev,
        category: prev.category === value ? "" : value,
        subcategory: [], // clear subcategories when parent changes
      };
    }

    // checkbox — multi select
    const exists = prev[key].includes(value);
    return {
      ...prev,
      [key]: exists
        ? prev[key].filter((v: string) => v !== value)
        : [...prev[key], value],
    };
  });
};

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1024) {
        document.body.classList.remove("filter-layout");
      }
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);

      document.body.classList.remove("filter-layout");
    };
  }, []);


  useEffect(() => {
    const fetchFilters = async () => {
        setFiltersLoading(true);
        try {
        const { data } = await apiCall<any>(
            "/clientapi/products/filters"
        );

        if (data?.data) {
            setFilters(data.data);
        }
        } catch (err) {
            console.error(err);
        } finally {
            setFiltersLoading(false);
        }
    };

    fetchFilters();
    }, []);


  return (
    <div className="font-montserrat">
      {filtersLoading ? <SkeletonLoader />
      : <main>

        {/* Breadcrumb */}

        <section className="breadcrumbcontainer">
          <div className="container px-3">
            <ol className="breadcrumb">
              <li>
                <a href="/">Home</a>
              </li>

              <li className="active">Products</li>
            </ol>
          </div>
        </section>

        {/* Overlay */}

        <div
          className="filter-ovarlay"
          onClick={closeFilter}
        />

        {/* Product List */}

        <section className="productlistcontainer">
          <div className="productinner">
            <div className="container px-3">
              <div className="flex flex-wrap -mx-3 xl:-mx-6 2xl:-mx-12">
                {/* FILTER COLUMN */}
                <div className="filtercolumn xxl:w-1/4 xl:w-1/4 lg:w-1/4 w-full px-3 xl:px-6 2xl:px-12">
                  {/* Mobile Filter Button */}
                  <a
                    className="filtetbtn"
                    onClick={openFilter}
                    style={{ cursor: "pointer" }}
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="currentColor"
                      viewBox="0 0 16 16"
                    >
                      <path
                        fillRule="evenodd"
                        d="M10.5 1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4H1.5a.5.5 0 0 1 0-1H10V1.5a.5.5 0 0 1 .5-.5M12 3.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-6.5 2A.5.5 0 0 1 6 6v1.5h8.5a.5.5 0 0 1 0 1H6V10a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5M1 8a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 1 8m9.5 2a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V13H1.5a.5.5 0 0 1 0-1H10v-1.5a.5.5 0 0 1 .5-.5m1.5 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"
                      />
                    </svg>
                  </a>

                  {/* FILTER */}

                  <ProductFilter
                    onClose={closeFilter}
                    filters={filters}
                    selectedFilters={selectedFilters}
                    onToggle={toggleArrayFilter}
                    onPriceChange={setPrice}
                  />
                </div>

                {/* PRODUCTS */}

                <div className="xxl:w-3/4 xl:w-3/4 lg:w-3/4 w-full px-3 xl:px-6 2xl:px-12">

                  <FilterTopBar
                    total={total}
                    showing={products.length}
                    onSortChange={(value) =>
                        setSelectedFilters((prev) => ({
                            ...prev,
                            sortBy: value,
                        }))
                    }
                    onFilterOpen={openFilter}
                    sortOptions={filters?.sortOptions || []}
                  />

                  {loading ? (
                    <div className="flex flex-wrap -mx-1 sm:-mx-2">
                      {[1, 2, 3, 4, 5, 6].map((i) => (
                        <div
                          key={i}
                          className="xl:w-1/3 md:w-1/3 sm:w-1/2 w-1/2 mb-8 px-2"
                        >
                          <div
                            style={{
                              height: 380,
                              background:
                                "linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%)",
                              backgroundSize: "600px 100%",
                              animation:
                                "shimmer 1.5s infinite linear",
                              borderRadius: 8,
                            }}
                          />
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="flex flex-wrap -mx-1 sm:-mx-2 2xl:-mx-3">

                      {products?.map((product) => (
                        <div
                          key={product._id}
                          className="xxl:w-1/3 xl:w-1/3 lg:w-1/3 md:w-1/3 sm:w-1/2 w-1/2 mb-4 sm:mb-5 lg:mb-8 px-1 sm:px-2 2xl:px-3"
                        >
                          <ProductListCard product={product} />
                        </div>
                      ))}

                    </div>
                  )}

                  {/* LOAD MORE */}
                  <div className="text-center" ref={loadingRef}>
                    {loadingMore ? (
                      <i className="fa fa-spinner fa-pulse fa-2x" />
                    ) : hasMore ? (
                      <div
                        className="product-loader cursor-pointer"
                        onClick={() => fetchProducts(pageRef.current + 1, true)}
                      >
                        <span>Load More</span>
                      </div>
                    ) : (
                      <p>No more products</p>
                    )}
                  </div>

                </div>

              </div>
            </div>
          </div>
        </section>

        <Newsletter />
      </main>}
    </div>
  );
}