"use client";

import React, { useState, useEffect } from "react";
import { ChevronLeft, ChevronRight, Play, Download, Sparkles, Film, Flame } from "lucide-react";
import { Movie } from "../types";

interface HeroSliderProps {
  movies: Movie[];
  onSelectMovie: (movie: Movie) => void;
}

export function HeroSlider({ movies, onSelectMovie }: HeroSliderProps) {
  const [currentIndex, setCurrentIndex] = useState(0);

  // Use top 5 movies for slider
  const featured = movies.slice(0, 5);

  useEffect(() => {
    if (featured.length <= 1) return;
    const timer = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % featured.length);
    }, 6000);
    return () => clearInterval(timer);
  }, [featured.length]);

  if (featured.length === 0) return null;

  const currentMovie = featured[currentIndex];

  const handlePrev = (e: React.MouseEvent) => {
    e.stopPropagation();
    setCurrentIndex((prev) => (prev - 1 + featured.length) % featured.length);
  };

  const handleNext = (e: React.MouseEvent) => {
    e.stopPropagation();
    setCurrentIndex((prev) => (prev + 1) % featured.length);
  };

  return (
    <div
      id="hero-slider-section"
      className="relative w-full rounded-[26px] overflow-hidden bg-neutral-950 border border-white/10 shadow-2xl mb-8 group"
    >
      {/* Background Image / Backdrop */}
      <div className="relative w-full min-h-[420px] sm:min-h-[480px] md:min-h-[540px] lg:min-h-[580px] max-h-[640px] aspect-[16/11] sm:aspect-[16/9] md:aspect-[21/10] flex items-end">
        {currentMovie.imageUrl && (
          <img
            src={currentMovie.imageUrl}
            alt={currentMovie.title}
            className="absolute inset-0 w-full h-full object-cover object-top filter brightness-70 scale-105 transition-all duration-1000 ease-out"
          />
        )}

        {/* Ambient Dark Gradients */}
        <div className="absolute inset-0 bg-gradient-to-t from-neutral-950 via-neutral-950/75 to-transparent" />
        <div className="absolute inset-0 bg-gradient-to-r from-neutral-950 via-neutral-950/70 to-transparent w-full md:w-3/4" />
        <div className="absolute inset-0 bg-red-950/20 mix-blend-overlay pointer-events-none" />

        {/* Foreground Content */}
        <div className="relative z-10 w-full flex flex-col md:flex-row items-start md:items-end justify-between p-6 sm:p-10 md:p-12 gap-6">
          <div className="max-w-2xl space-y-4">
            {/* Featured Chip */}
            <div className="flex items-center gap-2.5 flex-wrap">
              <span className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-extrabold uppercase tracking-wider bg-red-600 text-white shadow-lg shadow-red-600/50 border border-red-400/40">
                <Flame className="w-4 h-4 fill-white animate-pulse" />
                Trending Spotlight
              </span>
              {currentMovie.quality && (
                <span className="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-black/70 text-red-400 border border-red-500/40 backdrop-blur-md">
                  {currentMovie.quality}
                </span>
              )}
              <span className="px-3 py-1 rounded-full text-xs font-semibold bg-white/10 text-white/90 border border-white/15 backdrop-blur-md hidden sm:inline-block">
                Ultra HD / 4K
              </span>
            </div>

            {/* Title */}
            <h2 className="text-2xl sm:text-4xl md:text-5xl font-black text-white tracking-tight leading-tight line-clamp-2 drop-shadow-xl">
              {currentMovie.title}
            </h2>

            <p className="text-xs sm:text-sm text-white/70 line-clamp-2 max-w-xl font-medium">
              Stream & download in highest available quality with lightning fast cloud mirrors (HubCloud, GDFlix, Fast-DL).
            </p>

            {/* Action Buttons */}
            <div className="flex items-center gap-3 pt-2">
              <button
                id="hero-slider-download-cta"
                onClick={() => onSelectMovie(currentMovie)}
                className="flex items-center gap-2.5 px-6 sm:px-8 py-3.5 sm:py-4 rounded-2xl bg-red-600 hover:bg-red-500 text-white font-bold text-sm sm:text-base tracking-wide transition-all shadow-xl shadow-red-600/40 hover:shadow-red-600/60 hover:scale-105 active:scale-95 border border-red-400/30 cursor-pointer"
              >
                <Download className="w-5 h-5" />
                <span>Download Now</span>
              </button>

              <button
                onClick={() => onSelectMovie(currentMovie)}
                className="flex items-center gap-2 px-5 sm:px-6 py-3.5 sm:py-4 rounded-2xl bg-white/10 hover:bg-white/20 text-white font-semibold text-sm sm:text-base transition-all backdrop-blur-md border border-white/15 hover:border-white/30 cursor-pointer"
              >
                <Play className="w-4 h-4 fill-white ml-0.5" />
                <span>Movie Details</span>
              </button>
            </div>
          </div>

          {/* Right Floating Poster Card Preview (MD+ screens) */}
          {currentMovie.imageUrl && (
            <div
              onClick={() => onSelectMovie(currentMovie)}
              className="hidden lg:block w-44 aspect-[2/3] rounded-2xl overflow-hidden shadow-2xl border-2 border-white/20 hover:border-red-500 transition-all duration-300 hover:scale-105 cursor-pointer shrink-0"
            >
              <img
                src={currentMovie.imageUrl}
                alt={currentMovie.title}
                className="w-full h-full object-cover"
              />
            </div>
          )}
        </div>

        {/* Carousel Prev/Next Controls */}
        {featured.length > 1 && (
          <div className="absolute right-4 bottom-6 hidden sm:flex items-center gap-2">
            <button
              id="hero-slider-prev-btn"
              onClick={handlePrev}
              aria-label="Previous featured movie"
              className="p-2.5 rounded-full bg-black/60 hover:bg-black/90 text-white/80 hover:text-white border border-white/10 backdrop-blur-md transition-colors"
            >
              <ChevronLeft className="w-5 h-5" />
            </button>
            <button
              id="hero-slider-next-btn"
              onClick={handleNext}
              aria-label="Next featured movie"
              className="p-2.5 rounded-full bg-black/60 hover:bg-black/90 text-white/80 hover:text-white border border-white/10 backdrop-blur-md transition-colors"
            >
              <ChevronRight className="w-5 h-5" />
            </button>
          </div>
        )}

        {/* Carousel Dot Indicators */}
        {featured.length > 1 && (
          <div className="absolute top-4 right-4 sm:top-6 sm:right-6 flex items-center gap-1.5 bg-black/50 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10">
            {featured.map((_, idx) => (
              <button
                key={idx}
                onClick={(e) => {
                  e.stopPropagation();
                  setCurrentIndex(idx);
                }}
                aria-label={`Slide ${idx + 1}`}
                className={`h-1.5 rounded-full transition-all duration-300 ${
                  currentIndex === idx
                    ? "w-6 bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.8)]"
                    : "w-1.5 bg-white/30 hover:bg-white/60"
                }`}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}