"use client";

import { formatTitle } from "@/lib/common-function";
import EmptyState from "../CommonComponents/empty";
import { Checkbox } from "../ui/checkbox";
import CategoryListItemSkeleton from "./categories-list-item-skeleton";
import CategoriesList from "./categories-list-view-card";
import { categoryGridViewProps } from "./categories.type";
import { SearchX } from "lucide-react";

const CategoriesListView = ({
  categoryList = [],
  selectedCategory = "",
  onChangeCategory,
  seriesList,
  seriesLoading = false,
  categoriesLoading = false,
}: categoryGridViewProps) => {

  console.log("seriesList",seriesList)
  const categoriesData =
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    seriesList?.map((item: any) => ({
      id: item?.series_id??item?.video_id,
      src: `${item?.thumbnail_high_3x4 ?? item.series_thumbnail}`,
      title: item.title,
      series_id: item?.series_id,
      video_id: item?.video_id,
      description: item.description,
      duration: `${item.total_episodes} Episodes`,
      viewCount: item.viewCount,
      rating: item.averageRating,
    })) || [];

  return (
    <div>
      <div className="grid grid-cols-1 md:grid-cols-12 gap-6 relative">
        <div className="md:col-span-3 md:sticky md:top-24 h-fit bg-[#252525] p-5 rounded-lg">
          <h2 className="text-[20px] text-white font-semibold">Categories</h2>
          <hr className="borer-1 border-white opacity-35 my-5" />
          {categoriesLoading ? (
            <div className="flex flex-col gap-4 animate-pulse">
              {Array.from({ length: 6 })?.map((_, index) => (
                <div
                  key={index}
                  className="h-7 w-5/6 bg-gray-700 rounded-lg"
                ></div>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-2 gap-6">
              {categoryList?.map((item) => (
                <div key={item.category_id} className="flex gap-3 items-center">
                  <Checkbox
                    id={`checkbox-${item.category_id}`}
                    className="w-7 h-7 cursor-pointer"
                    checked={item.camel_case_name === selectedCategory}
                    onCheckedChange={() => {
                      onChangeCategory(item.camel_case_name);
                    }}
                  />
                  <label
                    htmlFor={`checkbox-${item.category_id}`}
                    className="text-[16px] text-white cursor-pointer"
                  >
                    {item.name}
                  </label>
                </div>
              ))}
            </div>
          )}
        </div>
        <div className="md:col-span-9 bg-[#252525] p-5 rounded-lg">
          {seriesLoading ? (
            <div className="space-y-6">
              {Array.from({ length: 4 })?.map((_, index) => (
                <CategoryListItemSkeleton key={index} />
              ))}
            </div>
          ) : categoriesData && categoriesData?.length > 0 ? (
            <CategoriesList categoriesData={categoriesData} />
          ) : (
            <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" />}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default CategoriesListView;