"use client";

import { Clock } from "lucide-react";
import LineTitle from "../line-title/line-title";
import Image, { StaticImageData } from "next/image";
import slider from "../../../public/month/waching2.png";
import slider2 from "../../../public/month/waching1.png";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import Link from "next/link";

interface BoxItem {
  id: number;
  title: string;
  description: string;
  image: string | StaticImageData;
  episode?: string;
  totalEpisodes?: string;
  duration?: string;
  isExclusive?: boolean;
  progress?: number; // percentage 0–100
}

const ContinueWatchingBoxView = () => {
  const boxes: BoxItem[] = [
    {
      id: 1,
      title: "VIGIL",
      description:
        "A mysterious death on a nuclear submarine leads to an investigation that uncovers dangerous secrets.",
      image: slider2,
      isExclusive: true,
      episode: "Ep 05",
      totalEpisodes: "Ep 20",
      duration: "2h : 30m",
      progress: 40,
    },
    {
      id: 2,
      title: "Echoes of Past",
      description:
        "A psychological thriller about family secrets and buried memories.",
      image: slider,
      episode: "Ep 12",
      totalEpisodes: "Ep 20",
      duration: "1h : 45m",
      isExclusive: true,
      progress: 75,
    },
  ];

  return (
    <div className="container mx-auto relative z-10 w-full my-10 px-4 md:px-2">
      <div className="mb-6">
        <LineTitle title="CONTINUE WATCHING" />
      </div>

      <Carousel>
        <CarouselContent>
          {boxes?.map((box) => (
            <CarouselItem
              key={box.id}
              className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6"
            >
              <div className="relative w-full h-[370px] rounded-lg overflow-hidden transition-all duration-300 group cursor-pointer bg-[#282828] hover:p-4">
                <Link href="player">
                  <div className="w-full h-full flex items-center justify-center transition-transform duration-300 group-hover:scale-105 ">
                    <Image
                      src={box.image}
                      alt={box.title}
                      width={500}
                      height={500}
                      className="w-full h-full object-cover rounded-lg"
                    />
                  </div>

                  {/* Progress Bar */}
                  {box.progress !== undefined && (
                    <div className="absolute bottom-0 left-0 right-0 h-1 bg-gray-700 bg-opacity-50">
                      <div
                        className="h-full bg-red-600 transition-all duration-300"
                        style={{ width: `${box.progress}%` }}
                      />
                    </div>
                  )}

                  {/* Overlay Details */}
                  <div className="absolute bottom-0 left-0 right-0 bg-[#282828] opacity-0 group-hover:opacity-100 transform translate-y-6 group-hover:translate-y-0 transition-all duration-300 p-1">
                    <div className="flex flex-col justify-end h-full px-2">
                      {/* Title */}
                      <h3 className="text-white text-[18px] font-bold tracking-wide mb-2 ">
                        {box.title}
                      </h3>

                      {/* Bottom row with episode and duration */}
                      <div className="flex items-center justify-between">
                        {box.episode && (
                          <div className="flex items-center text-base">
                            <span className="text-[#ED3A57] font-bold  py-1 rounded text-[14px] md:text-[16px]">
                              {box.episode}
                            </span>
                            <span className="text-white mx-2">/</span>
                            <span className="text-white">
                              {box.totalEpisodes}
                            </span>
                          </div>
                        )}

                        {box.duration && (
                          <div className="flex items-center gap-2 text-sm md:text-base text-gray-300">
                            <Clock className="w-4 h-4 text-gray-400" />
                            <span>{box.duration}</span>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </Link>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>

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

export default ContinueWatchingBoxView;