"use client";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { truncateWords } from "@/lib/common-function";
import { Star } from "lucide-react";
import Image from "next/image";
import React from "react";
import { ImageConstant } from "../../../constant/ImageConstant";
import SeriesCard, { SeriesItem } from "../CommonComponents/series-card";
import IconButton from "../icon-button/icon-button";

export interface PosterCardProps {
  items: SeriesItem[];
  id: string;
  categoryKey?: string;
  refetch?: () => void;
  recommendData?: SeriesItem[];
  recommendTrendingList?: SeriesItem[];
  indexSet?: number;
  description?: string;
}

const PosterCard: React.FC<PosterCardProps> = ({
  items,
  id,
  categoryKey,
  refetch,
  recommendData,
  description,
  indexSet,
}) => {
  const limitedRecommendData = recommendData?.slice(0, 3) ?? [];

  const recommendationBadges = [
    ImageConstant.recom1,
    ImageConstant.recom2,
    ImageConstant.recom3,
  ];
  console.log("limitedRecommendData", limitedRecommendData);

  return (
    <Carousel>
      <CarouselContent key={id}>
        {limitedRecommendData.length > 0 ? (
          <CarouselItem
            key={"11"}
            className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6"
          >
            {limitedRecommendData.length > 0 ? (
              <div
                className={`p-4 rounded-lg h-full flex flex-col justify-between ${
                  indexSet === 5
                    ? "bg-gradient-to-t from-[#000000] to-[#8F1D1E]"
                    : "bg-gradient-to-t from-[#000000] to-[#517891]"
                }`}
              >
                <h3 className="text-[16px] font-semibold mb-2 flex items-center justify-center gap-2">
                  <Image
                    src={ImageConstant.RecommendedLeft}
                    alt="Recommended"
                    width={20}
                    height={20}
                    className="h-[40px] w-auto"
                  />{" "}
                  {indexSet === 5 ? "TRENDING" : "Recommended"}
                  <Image
                    src={ImageConstant.RecommendedRight}
                    alt="Recommended"
                    width={20}
                    height={30}
                    className="h-[40px] w-auto"
                  />
                </h3>
                <ul className="space-y-2">
                  {limitedRecommendData?.map((rec, idx) => (
                    <li key={idx} className="text-xs">
                      <div className="grid grid-cols-12 gap-2">
                        <div className="col-span-4 relative">
                          {rec?.thumbnail_high_1x1 ? (
                            <>
                              <Image
                                src={
                                  rec?.thumbnail_high_1x1?.startsWith("http")
                                    ? rec.thumbnail_high_1x1
                                    : rec?.thumbnail_high_1x1
                                      ? `${process.env.NEXT_PUBLIC_IMAGE_BASE_URL}/${rec.thumbnail_high_1x1}`
                                      : rec?.thumbnail_high_1x1?.startsWith(
                                            "http"
                                          )
                                        ? rec.thumbnail_high_1x1
                                        : rec?.thumbnail_high_1x1
                                          ? `${process.env.NEXT_PUBLIC_IMAGE_BASE_URL}/${rec.thumbnail_high_1x1}`
                                          : ImageConstant.imagePlaceHolder
                                }
                                alt={rec?.title || "Series thumbnail"}
                                width={80}
                                height={100}
                              />
                              <Image
                                src={
                                  recommendationBadges[
                                    idx % recommendationBadges.length
                                  ]
                                }
                                alt=""
                                width={20}
                                height={20}
                                className="absolute bottom-2 z-10"
                              />
                            </>
                          ) : (
                            <>
                              <Image
                                src={ImageConstant.imagePlaceHolder}
                                alt=""
                                width={80}
                                height={100}
                              />
                              <Image
                                src={
                                  recommendationBadges[
                                    idx % recommendationBadges.length
                                  ]
                                }
                                alt=""
                                width={20}
                                height={20}
                                className="absolute bottom-2 z-10"
                              />
                            </>
                          )}
                        </div>
                        <div className="col-span-8">
                          <h6 className="mb-1 text-[14px] font-bold">
                            {" "}
                            {truncateWords(rec?.title || "", 5)}
                          </h6>
                          <p className="mb-1 text-[10px] ">
                            {truncateWords(rec?.description || "", 5)}
                          </p>
                          <div className="flex gap-1">
                            <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />{" "}
                            {rec?.averageRating ?? "Untitled"}
                          </div>
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
                <div>
                  {/* {indexSet === 5 ? "TRENDING" : "Recommended"} */}
                  <IconButton
                    label="Explore More"
                    href={
                      indexSet === 5
                        ? "/categories/trending"
                        : "/categories/recommended"
                    }
                    iconShow={false}
                    className="!p-2 px-6 font-bold text-[16px] w-fit"
                  />
                </div>
              </div>
            ) : (
              ""
            )}
          </CarouselItem>
        ) : (
          ""
        )}

        {items?.map((item) => (
          <>
            <CarouselItem
              key={item.id}
              className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6"
            >
              <SeriesCard
                item={item}
                categoryKey={categoryKey}
                refetch={refetch}
              />
            </CarouselItem>
          </>
        ))}
      </CarouselContent>

      <CarouselPrevious className="cursor-pointer left-2 xl:-left-2 xxl:-left-12 bg-black" />
      <CarouselNext className="cursor-pointer right-2 xl:-right-2 xxl:-right-12 bg-black" />
    </Carousel>
  );
};

export default PosterCard;