"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import CategoriesGridView from "@/components/categories/categories-grid-view";
import CategoriesListView from "@/components/categories/categories-list-view";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import { ImageConstant } from "../../constant/ImageConstant";
import {
  useCategoryList,
  useSeriesListByCategory,
} from "@/state/categories/categories.action";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { SeriesCardSkeleton } from "@/components/CommonComponents/series-card-skeleton";
import CategoryListItemSkeleton from "@/components/categories/categories-list-item-skeleton";
import { useSettingsStore } from "@/state/store/settings.store";
import { seriesListByCategory } from "@/components/categories/categories.type";

const Categories = ({ category = "" }: { category: string }) => {
  console.log("category", category);
  const searchParams = useSearchParams();
  const currentView = searchParams?.get("view");
  const [isListView, setIsListView] = useState(currentView === "list");
  const [selectedCategory, setSelectedCategory] = useState("");
  const { data: categoryList = [], isLoading: categoriesLoading } =
    useCategoryList();
  const { language, country } = useSettingsStore();
  const pathname = usePathname();
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading: seriesLoading = true,
  } = useSeriesListByCategory({
    category: selectedCategory,
    languageId: language?.language_id,
    countryId: country?.country_id,
  });

  // const seriesList =
  //   data?.pages.flatMap((page) => page?.items || []).filter(Boolean) ?? [];
  const seriesList =
    data?.pages
      .flatMap((page) => (page as seriesListByCategory)?.items || [])
      .filter(Boolean) ?? [];

  const observer = useRef<IntersectionObserver | null>(null);

  const lastElementRef = useCallback(
    (node: HTMLDivElement) => {
      if (seriesLoading || isFetchingNextPage) return;
      if (observer.current) observer.current.disconnect();

      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasNextPage) {
          fetchNextPage();
        }
      });

      if (node) observer.current.observe(node);
    },
    [seriesLoading, isFetchingNextPage, hasNextPage, fetchNextPage]
  );

  // console.log(seriesList, "seriesList");
  // console.log(categoryList, selectedCategory, "categoryList");
  const router = useRouter();
  const handleToggle = () => {
    const newView = !isListView;
    setIsListView(newView);
    if (newView) {
      router.push(`${pathname}?view=list`);
    } else {
      router.push(`${pathname}`);
    }
  };

  useEffect(() => {
    setIsListView(searchParams?.get("view") === "list");
  }, [searchParams]);

  useEffect(() => {
    if (category) {
      setSelectedCategory(category);
    } else {
      setSelectedCategory(categoryList[0]?.camel_case_name);
    }
  }, [category, categoryList]);

  const onChangeCategory = (value: string) => {
    setSelectedCategory(value);
    if (isListView) {
      router.push(`/categories/${value}?view=list`);
    } else {
      router.push(`/categories/${value}`);
    }
  };
  const showSkeleton = seriesLoading && seriesList.length === 0;

  return (
    <div className="container mx-auto pt-[100px] px-4 md:px-2 mb-8">
      <div className="flex justify-between pt-5">
        <p className="text-[16px] text-white font-light mb-[20px]">
          <Link href="/" className="hover:underline">
            Home
          </Link>{" "}
          / Categories
        </p>
        <div>
          <Button
            className="bg-transparent cursor-pointer hover:bg-transparent"
            onClick={handleToggle}
          >
            <Image
              src={isListView ? ImageConstant.gridView : ImageConstant.listView}
              alt=""
              width={50}
              height={50}
            />
          </Button>
        </div>
      </div>
      {isListView ? (
        <CategoriesListView
          categoryList={categoryList}
          selectedCategory={selectedCategory}
          onChangeCategory={onChangeCategory}
          seriesList={seriesList}
          seriesLoading={showSkeleton}
          categoriesLoading={categoriesLoading}
        />
      ) : (
        <CategoriesGridView
          categoryList={categoryList}
          selectedCategory={selectedCategory}
          onChangeCategory={onChangeCategory}
          seriesList={seriesList}
          seriesLoading={showSkeleton}
          categoriesLoading={categoriesLoading}
        />
      )}
      <div ref={lastElementRef} style={{ height: "1px", margin: "-1px" }} />

      {/* Loading indicator for next page fetch */}
      {isFetchingNextPage &&
        //
        (isListView ? (
          <div className="space-y-6">
            {Array.from({ length: 4 })?.map((_, index) => (
              <CategoryListItemSkeleton key={index} />
            ))}
          </div>
        ) : (
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
            {Array.from({ length: 12 })?.map((_, index) => (
              <SeriesCardSkeleton key={index} />
            ))}
          </div>
        ))}

      {/* Optional: Message when all data is loaded */}
      {/* {!hasNextPage && seriesList.length > 0 && !isFetchingNextPage && (
        <div className="text-center text-gray-500 text-lg py-8">
          You have reached the end.
        </div>
      )} */}
    </div>
  );
};

export default Categories;