"use client";

import {
  ChevronLeft,
  ChevronRight,
  Clock,
  Play,
  Star,
  Timer,
} from "lucide-react";
import Image, { StaticImageData } from "next/image";
import { useState } from "react";

// Import static images
import slider from "../../../public/continuebanner.png";
import slider2 from "../../../public/slider/banner2.jpg";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ImageConstant } from "../../../constant/ImageConstant";
import IconButton from "../icon-button/icon-button";
import LineTitle from "../line-title/line-title";

interface Show {
  id: number;
  title: string;
  description: string;
  rating: number;
  time: string;
  genre: string;
  backgroundImage: StaticImageData;
  thumbnail: StaticImageData;
}

const shows: Show[] = [
  {
    id: 1,
    title: "Game of Heros",
    description:
      "In a world where power corrupts and honor is rare, follow the epic journey of noble houses fighting for the ultimate throne. Witness betrayal, magic, and legendary battles that will determine the fate of kingdoms.",
    rating: 4.8,
    time: "2h : 30m",
    genre: "Fantasy Drama",
    backgroundImage: slider2,
    thumbnail: slider2,
  },
  {
    id: 2,
    title: "From Dusk to Destiny",
    description:
      "A gripping tale of survival and redemption in a post-apocalyptic world. Follow survivors as they navigate through dangerous territories, facing both human and supernatural threats in their quest for a new beginning.",
    rating: 4.6,
    time: "2h : 30m",
    genre: "Sci-Fi Thriller",
    backgroundImage: slider,
    thumbnail: slider,
  },
];

export default function ContinueWatchingSlider() {
  const [activeShow, setActiveShow] = useState(1); // Start with second as active
  const currentShow = shows[activeShow];

  // const visibleCount = 3; // Number of thumbnails to show vertically

  // Calculate indices so activeShow is in the middle
  // const startIndex = activeShow - Math.floor(visibleCount / 2);
  // const thumbnails = Array.from({ length: visibleCount })?.map((_, i) => {
  //   const index = (startIndex + i + shows.length) % shows.length; // wrap around
  //   return index;
  // });

  return (
    <div className="relative bg-black text-white overflow-hidden py-36 px-4 md:px-2">
      {/* Background Image with Overlay */}
      <div
        className="absolute inset-0 bg-cover bg-center transition-all duration-1000 ease-in-out"
        style={{ backgroundImage: `url(${currentShow.backgroundImage.src})` }}
      >
        <div className="absolute inset-0 bg-gradient-to-r from-black/90 via-black/50 to-black/30" />
      </div>

      {/* Main Content */}
      <div className="relative z-10">
        <div className="container mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
            <div className="md:col-span-8">
              <div className="items-center">
                <div className="mb-8">
                  <LineTitle title="CONTINUE WATCHING" />
                </div>
                <div className="flex-1">
                  <div className="max-w-2xl space-y-6">
                    {/* Title */}
                    <h1 className="text-[40px] md:text-6xl font-bold leading-tight transition-all duration-500 text-[#D4D4D4]">
                      {currentShow.title}
                    </h1>

                    {/* Rating and Info */}
                    <div className="flex items-center text-sm">
                      <span className="px-2 py-1 bg-[#672BFE] rounded-[7px] text-[14px] font-semibold mr-2">
                        {currentShow.genre}
                      </span>
                      <div className="flex items-center space-x-1 mr-6">
                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                        <span className="font-semibold">
                          {currentShow.rating}
                        </span>
                      </div>
                      <Timer className="mr-2" />
                      <div>
                        <span className="text-gray-300">
                          {currentShow.time}
                        </span>
                      </div>
                    </div>

                    {/* Description */}
                    <p className="text-[16px] text-white font-normal leading-relaxed max-w-xl transition-all duration-500">
                      {currentShow.description}
                    </p>

                    {/* Action Buttons */}
                    <div className="flex space-x-4">
                      <IconButton
                        label="Play Now"
                        icon={<Play className="w-5 h-5" />}
                        href="/player" // works as a link
                        size="lg"
                      />
                    </div>
                  </div>
                </div>
                <div className="flex flex-col justify-center items-start gap-8 mt-8">
                  <div className="flex items-center gap-4">
                    <button
                      className="p-1 bg-black/50 rounded-full hover:bg-black/70 transition-colors hover:bg-[linear-gradient(89deg,#ED3A57_34.19%,#FD521E_99.12%)] cursor-pointer border-1 border-white"
                      onClick={() =>
                        setActiveShow((prev) =>
                          prev > 0 ? prev - 1 : shows.length - 1
                        )
                      }
                      aria-label="Previous"
                    >
                      <ChevronLeft />
                    </button>

                    <button
                      className="p-1 bg-black/50 rounded-full hover:bg-black/70 transition-colors hover:bg-[linear-gradient(89deg,#ED3A57_34.19%,#FD521E_99.12%)] cursor-pointer border-1 border-white"
                      onClick={() =>
                        setActiveShow((prev) => (prev + 1) % shows.length)
                      }
                      aria-label="Next"
                    >
                      <ChevronRight />
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div className="md:col-span-4">
              <div className="bg-[#141314] p-8 rounded-[10px]">
                <div className="flex justify-between mb-5">
                  <h5 className="text-[18px] font-bold">All Episodes</h5>{" "}
                  <p className="bg-[linear-gradient(89deg,#ED3A57_34.19%,#FD521E_99.12%)] bg-clip-text text-transparent font-normal text-[18px]">
                    View All
                  </p>
                </div>
                <Tabs defaultValue="account" className="w-full">
                  <TabsList className="bg-transparent border-b border-gray-700 rounded-none w-full justify-start">
                    <TabsTrigger
                      value="account"
                      className="text-white cursor-pointer pb-8 data-[state=active]:bg-transparent  data-[state=active]:border-b-red-500 data-[state=active]:text-white rounded-none bg-transparent"
                    >
                      Ep 1-10
                    </TabsTrigger>
                    <TabsTrigger
                      value="password"
                      className="text-white cursor-pointer pb-8 data-[state=active]:bg-transparent  data-[state=active]:border-b-red-500 data-[state=active]:text-white rounded-none bg-transparent"
                    >
                      Ep 11-20
                    </TabsTrigger>
                  </TabsList>

                  <TabsContent value="account" className="text-white">
                    <div className="flex items-center gap-5 my-5">
                      <Image
                        src={ImageConstant.tabsImg}
                        alt=""
                        width={120}
                        height={85}
                      />
                      <div>
                        <p className="text-[16px]">Island of Secrets</p>
                        <p className="flex gap-2 text-[14px]">
                          {" "}
                          <Clock size="16" /> 45m
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-5 my-5">
                      <Image
                        src={ImageConstant.tabsImg}
                        alt=""
                        width={120}
                        height={85}
                      />
                      <div>
                        <p className="text-[16px]">Island of Secrets</p>
                        <p className="flex gap-2 text-[14px]">
                          {" "}
                          <Clock size="16" /> 45m
                        </p>
                      </div>
                    </div>
                  </TabsContent>
                  <TabsContent value="password" className="text-white">
                    <div className="flex items-center gap-5 my-5">
                      <Image
                        src={ImageConstant.tabsImg}
                        alt=""
                        width={120}
                        height={85}
                      />
                      <div>
                        <p className="text-[16px]">Island of Secrets</p>
                        <p className="flex gap-2 text-[14px]">
                          {" "}
                          <Clock size="16" /> 45m
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-5 my-5">
                      <Image
                        src={ImageConstant.tabsImg}
                        alt=""
                        width={120}
                        height={85}
                      />
                      <div>
                        <p className="text-[16px]">Island of Secrets</p>
                        <p className="flex gap-2 text-[14px]">
                          {" "}
                          <Clock size="16" /> 45m
                        </p>
                      </div>
                    </div>
                  </TabsContent>
                </Tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}