"use client";

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

// Import static images
import slider from "../../../public/slider/banner1.png";
import slider2 from "../../../public/slider/banner2.jpg";
import ComingSoon from "../../../public/ComingSoon/upcoming.png";

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: slider,
    thumbnail: slider,
  },
  {
    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: slider2,
    thumbnail: slider2,
  },
  {
    id: 3,
    title: "Crown of Shadows",
    description:
      "Enter a realm of political intrigue and dark magic where ancient bloodlines clash for supremacy. Secrets buried for centuries emerge as unlikely heroes rise to challenge an empire built on lies.",
    rating: 4.7,
    time: "2h : 30m",
    genre: "Dark Fantasy",
    backgroundImage: ComingSoon,
    thumbnail: ComingSoon,
  },
];

export default function NewReleases() {
  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="mb-8">
            <LineTitle title="NEW RELEASES" />
          </div>

          <div className="flex flex-col md:flex-row gap-20 items-center">
            {/* Left Thumbnails */}
            <div className="flex flex-col justify-center items-start gap-8">
              <div className="flex flex-col gap-3">
                {thumbnails?.map((showIndex) => {
                  const show = shows[showIndex];
                  const isActive = showIndex === activeShow;

                  return (
                    <div
                      key={show.id}
                      className={`cursor-pointer transform transition-all duration-500 ${
                        isActive
                          ? "scale-105 opacity-100"
                          : "opacity-70 hover:opacity-100 hover:scale-105"
                      }`}
                      onClick={() => setActiveShow(showIndex)}
                    >
                      <Image
                        width={500}
                        height={500}
                        src={show.thumbnail}
                        alt={show.title}
                        className="object-cover w-[360px] h-[180px] rounded-lg"
                      />
                    </div>
                  );
                })}
              </div>

              {/* Navigation */}
              <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>

            {/* Right Content */}
            <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="Watch Now"
                    icon={<Play className="w-5 h-5" />}
                    href="/player"
                    size="lg"
                    className="!p-3 px-6"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}