"use client";

import React, { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { Movie } from "@/types/movie";
import { getBackdropUrl, getPosterUrl } from "@/lib/tmdb";

interface HeroBannerProps {
  movies: Movie[];
}

export default function HeroBanner({ movies }: HeroBannerProps) {
  const heroMovies = useMemo(() => movies?.slice(0, 6) || [], [movies]);
  const [activeIndex, setActiveIndex] = useState(0);

  const movie = heroMovies[activeIndex];

  useEffect(() => {
    if (heroMovies.length <= 1) return;

    const timer = setInterval(() => {
      setActiveIndex((prev) => (prev + 1) % heroMovies.length);
    }, 5500);

    return () => clearInterval(timer);
  }, [heroMovies.length]);

  if (!movie) return null;

  const year = movie.release_date ? movie.release_date.substring(0, 4) : "N/A";
  const rating = movie.vote_average ? movie.vote_average.toFixed(1) : "0.0";

  const goPrev = () => {
    setActiveIndex((prev) =>
      prev === 0 ? heroMovies.length - 1 : prev - 1
    );
  };

  const goNext = () => {
    setActiveIndex((prev) => (prev + 1) % heroMovies.length);
  };

  return (
    <section className="hero-slider position-relative w-100 overflow-hidden">
      {/* Background */}
      <div className="hero-slider-bg position-absolute top-0 start-0 w-100 h-100">
        <img
          key={movie.id}
          src={getBackdropUrl(movie.backdrop_path, "original")}
          alt={movie.title}
          className="hero-slider-bg-img"
        />

        <div className="hero-slider-overlay" />
      </div>

      <div className="container position-relative z-3 h-100">
        <div className="row align-items-center h-100 g-4">
          {/* Left Content */}
          <div className="col-12 col-lg-7">
            <div className="hero-slider-content text-white">
              <div className="d-flex align-items-center flex-wrap gap-2 mb-3">
                <span className="badge bg-danger rounded-pill px-3 py-2 fw-bold small">
                  TRENDING NOW
                </span>

                <span className="hero-chip">
                  <i className="bi bi-star-fill text-warning me-1"></i>
                  {rating}
                </span>

                <span className="hero-chip">{year}</span>
              </div>

              <h1 className="hero-slider-title mb-3">{movie.title}</h1>

              <p className="hero-slider-desc mb-4">
                {movie.overview?.length > 190
                  ? `${movie.overview.substring(0, 190)}...`
                  : movie.overview}
              </p>

              <div className="d-flex flex-wrap gap-3">
                <Link
                  href={`/watch/${movie.id}?type=movie`}
                  className="btn-primary-custom d-flex align-items-center gap-2 px-4 py-3"
                >
                  <i className="bi bi-play-fill fs-5"></i>
                  <span className="fw-bold">Watch Now</span>
                </Link>

                <Link
                  href={`/movie/${movie.id}`}
                  className="btn-secondary-custom d-flex align-items-center gap-2 px-4 py-3"
                >
                  <i className="bi bi-info-circle fs-5"></i>
                  <span className="fw-bold">View Details</span>
                </Link>
              </div>
            </div>
          </div>

          {/* Right Poster */}
          <div className="col-lg-5 d-none d-lg-flex justify-content-end">
            <Link href={`/movie/${movie.id}`} className="hero-poster-card">
              <img
                key={`poster-${movie.id}`}
                src={getPosterUrl(movie.poster_path, "w500")}
                alt={movie.title}
              />

              <div className="hero-poster-glow" />
            </Link>
          </div>
        </div>
      </div>

      {/* Slider Arrows */}
      {heroMovies.length > 1 && (
        <>
          <button
            type="button"
            className="hero-slider-arrow hero-slider-arrow-left"
            onClick={goPrev}
            aria-label="Previous movie"
          >
            <i className="bi bi-chevron-left"></i>
          </button>

          <button
            type="button"
            className="hero-slider-arrow hero-slider-arrow-right"
            onClick={goNext}
            aria-label="Next movie"
          >
            <i className="bi bi-chevron-right"></i>
          </button>
        </>
      )}

      {/* Dots */}
      {heroMovies.length > 1 && (
        <div className="hero-slider-dots">
          {heroMovies.map((item, index) => (
            <button
              key={item.id}
              type="button"
              className={`hero-slider-dot ${
                activeIndex === index ? "active" : ""
              }`}
              onClick={() => setActiveIndex(index)}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </div>
      )}
    </section>
  );
}