import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { categoryGridViewProps } from "./categories.type";
import SeriesCard from "../CommonComponents/series-card";
import { SeriesCardSkeleton } from "../CommonComponents/series-card-skeleton";
import { formatTitle } from "@/lib/common-function";
import EmptyState from "../CommonComponents/empty";
import { SearchX } from "lucide-react";

const CategoriesGridView = ({
  categoryList = [],
  selectedCategory = "",
  onChangeCategory,
  seriesList,
  seriesLoading = false,
  categoriesLoading = false,
}: categoryGridViewProps) => {
  const carouselItems =
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    seriesList?.map((item: any) => ({
      id: item?.series_id ?? item?.video_id,
      series_id: item?.series_id,
      video_id: item?.video_id,
      src: `${item?.thumbnail_high_3x4 ?? item.series_thumbnail}`,
      title: item?.title,
      genres:
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        item?.seriesCategories?.map((cat: any) => cat?.category?.name) ?? [],
      content_tag: item?.content_tag,
      blurHash: item?.thumbnail_blurhash_9x16,
      early_access_datetime: item?.early_access_datetime,
      schedule_datetime: item?.schedule_datetime,
    })) || [];

  return (
    <div>
      <Tabs
        value={selectedCategory}
        className="w-full"
        onValueChange={onChangeCategory}
      >
        {categoriesLoading ? (
          <div className="flex flex-wrap h-full justify-start gap-4 animate-pulse">
            {Array.from({ length: 8 })?.map((_, index) => (
              <div
                key={index}
                className="bg-[#3D3D3D] h-[70px] w-36 rounded-[14px] mb-2"
              ></div>
            ))}
          </div>
        ) : (
          <TabsList className="bg-transparent md:flex md:flex-wrap h-full overflow-auto w-full rounded-none justify-start gap-2">
            {categoryList?.map((item) => (
              <TabsTrigger
                key={item.category_id}
                value={item.camel_case_name}
                // className="text-white text-[16px] cursor-pointer pb-8 data-[state=active]:font-bold
                // data-[state=active]:bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E] max-w-fit
                // data-[state=active]:text-white bg-[#3D3D3D] p-0 h-[50px] md:h-[50px] px-6 rounded-[14px] mb-2 hover:bg-gradient-to-r hover:from-[#ED3A57]  hover:via-[#ED3A57] hover:to-[#FD521E]"
                className="text-white text-[16px] cursor-pointer  data-[state=active]:font-bold  
                data-[state=active]:bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E] max-w-fit
                data-[state=active]:text-white bg-transparent border-1 border-white 
                data-[state=active]:border-[#ED3A57] rounded-full
                p-0 h-[40px] md:h-[40px] px-6  mb-2 hover:bg-gradient-to-r hover:from-[#ED3A57]  hover:via-[#ED3A57] hover:to-[#FD521E]"
              >
                {item.name}
              </TabsTrigger>
            ))}
          </TabsList>
        )}
        <TabsContent value={selectedCategory} className="mt-2">
          {seriesLoading ? (
            <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>
          ) : carouselItems.length > 0 ? (
            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
              {carouselItems?.map((item) => (
                <SeriesCard key={item.id} item={item} />
              ))}
            </div>
          ) : (
            <EmptyState
              title="No Series Found"
              description={`We couldn't find any series in the "${formatTitle(selectedCategory)}" category. Please select another one.`}
              icon={<SearchX className="h-24 w-24" />}
            />
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default CategoriesGridView;