"use client";
import { useEffect, 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,
  useSeriesListByCategoryAll,
} from "@/state/categories/categories.action";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { useSettingsStore } from "@/state/store/settings.store";

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, hasHydrated } = useSettingsStore();
  const pathname = usePathname();
  const { data: seriesData, isLoading: seriesLoading = true } =
    useSeriesListByCategoryAll(
      {
        category: selectedCategory,
        languageId: language?.language_id,
        countryId: country?.country_id,
      },
      { enabled: hasHydrated && !!language?.language_id }
    );

  const seriesList = (seriesData ?? []).filter(Boolean);

  // 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}
        />
      )}
      {/* 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;