"use client";

import { useState, useEffect, useRef } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import Link from "next/link";
type Slider2Props = {
  images?: string[];
  titles?: string[];
};

const Slider2 = ({
  images = [
    "https://library.rapid-ui.com/images/blocks/slider2/1.png",
    "https://library.rapid-ui.com/images/blocks/slider2/2.png",
    "https://library.rapid-ui.com/images/blocks/slider2/3.png",
    "https://library.rapid-ui.com/images/blocks/slider2/4.png",
  ],
  titles = [
    "Serene Wellness Retreata",
    "Holistic Healing",
    "Tranquil Escape",
    "Spa & Wellness",
  ],
}: Slider2Props) => {
  // Create duplicated slides array with original slides in the middle
  // and duplicates at the beginning and end for infinite effect
  const [displayTitles, setDisplayTitles] = useState([
    ...titles,
    ...titles,
    ...titles,
  ]);
  const [currentIndex, setCurrentIndex] = useState(titles.length);
  const [isTransitioning, setIsTransitioning] = useState(false);
  const [noTransition, setNoTransition] = useState(false);
  const sliderRef = useRef<HTMLDivElement>(null);
  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
  const [isLeftSide, setIsLeftSide] = useState(true);
  const [isHoveringLink, setIsHoveringLink] = useState(false);
  const [windowWidth, setWindowWidth] = useState(0);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    // Set initial width
    handleResize();

    // Add event listener
    window.addEventListener("resize", handleResize);

    // Cleanup
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  // Get the actual index in the original titles array
  const actualIndex = currentIndex % titles.length;

  const [displayImages, setDisplayImages] = useState([
    ...images,
    ...images,
    ...images,
  ]);

  useEffect(() => {
    if (noTransition) {
      const timer = setTimeout(() => {
        setNoTransition(false);
      }, 50);
      return () => clearTimeout(timer);
    }
  }, [noTransition]);

  // Handle mouse movement to update cursor position
  const handleMouseMove = (e: React.MouseEvent) => {
    setCursorPosition({ x: e.clientX, y: e.clientY });
    setIsLeftSide(e.clientX < window.innerWidth / 2);
  };

  // Handle the transition end to reset position for infinite loop
  const handleTransitionEnd = () => {
    setIsTransitioning(false);

    // Only reset if we're at an edge
    if (currentIndex >= displayTitles.length - titles.length) {
      // If we've gone too far forward, reset to the middle set
      setNoTransition(true);
      setCurrentIndex(titles.length + (currentIndex % titles.length));
    } else if (currentIndex < titles.length) {
      // If we've gone too far backward, reset to the middle set
      setNoTransition(true);
      setCurrentIndex(
        displayTitles.length -
          titles.length * 2 +
          (currentIndex % titles.length)
      );
    }
  };

  const goToNext = () => {
    if (isTransitioning || noTransition) return;
    setIsTransitioning(true);
    setCurrentIndex((prev) => prev + 1);
  };

  const goToPrev = () => {
    if (isTransitioning || noTransition) return;
    setIsTransitioning(true);
    setCurrentIndex((prev) => prev - 1);
  };

  return (
    <section className="pb-40">
      <div
        className="relative w-full h-screen overflow bg-black max-sm:h-[80vh]"
        onMouseMove={handleMouseMove}
      >
        {/* Cursor follower */}
        <div
          className={`max-sm:hidden fixed w-20 h-20 rounded-full bg-gray-500/30 backdrop-blur-md flex items-center justify-center z-50 pointer-events-none ${
            isHoveringLink
              ? "scale-0 transition-transform duration-300"
              : "scale-100"
          }`}
          style={{
            left: `${cursorPosition.x - 40}px`,
            top: `${cursorPosition.y - 40}px`,
          }}
        >
          {isLeftSide ? (
            <ChevronLeft className="w-10 h-10 text-white" />
          ) : (
            <ChevronRight className="w-10 h-10 text-white" />
          )}
        </div>

        {/* Navigation click areas - moved to be the bottom layer but with higher z-index than images */}
        <div
          className="absolute left-0 top-0 w-1/2 h-full z-20 cursor-none"
          onClick={goToPrev}
        />
        <div
          className="absolute right-0 top-0 w-1/2 h-full z-20 cursor-none"
          onClick={goToNext}
        />

        {/* Navigation buttons for mobile */}
        <div className="absolute top-3/5 left-1/2 transform -translate-x-1/2  w-full flex justify-between px-4 z-50 max-sm:flex">
          <button
            className="w-12 h-12 rounded-full bg-gray-500/30 backdrop-blur-md flex items-center justify-center"
            onClick={goToPrev}
          >
            <ChevronLeft className="w-6 h-6 text-white" />
          </button>
          <button
            className="w-12 h-12 rounded-full bg-gray-500/30 backdrop-blur-md flex items-center justify-center"
            onClick={goToNext}
          >
            <ChevronRight className="w-6 h-6 text-white" />
          </button>
        </div>

        {/* Images */}
        {images.map((image, index) => (
          <div
            key={index}
            className={`absolute inset-0 w-full h-full transition-opacity duration-[1000ms] ease-in-out z-10 ${
              index === actualIndex ? "opacity-100" : "opacity-0"
            }`}
          >
            <div className="relative w-full h-full">
              <img
                src={image}
                alt={`Slide ${index + 1}`}
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/40" />
            </div>
          </div>
        ))}

        {/* Titles container - ensure it has pointer-events-none to let clicks pass through */}
        <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 z-30 overflow-hidden pointer-events-none">
          <div
            ref={sliderRef}
            className={`flex transition-transform duration-500 ease-in-out ${
              noTransition ? "transition-none" : ""
            }`}
            style={{
              transform: `translateX(calc(50vw - (${
                currentIndex * (windowWidth <= 640 ? 100 : 50)
              }vw) - ${windowWidth <= 640 ? "50vw" : "25vw"}))`,
              width: `${
                displayTitles.length * (windowWidth <= 640 ? 100 : 50)
              }vw`,
            }}
            onTransitionEnd={handleTransitionEnd}
          >
            {displayTitles.map((title, index) => (
              <div
                key={`slide-${index}`}
                className="w-[50vw] max-sm:w-[100vw] flex items-center justify-center shrink-0"
              >
                <div className="text-center">
                  <p className="text-white text-center mb-4 text-lg">
                    Lorem ipsum
                  </p>
                  <h2
                    className={`text-white font-medium transition-all duration-500 text-6xl max-sm:text-5xl`}
                  >
                    {title}
                  </h2>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Thumbnail Carousel */}
        <div className="absolute bottom-[-150px] left-1/2 -translate-x-1/2 w-[300px] max-md:w-[260px] max-sm:w-[240px] aspect-[3/4] overflow-hidden z-40">
          <div
            className={`flex transition-transform duration-500 ease-in-out w-full h-full ${
              noTransition ? "transition-none" : ""
            }`}
            style={{
              transform: `translateX(${-currentIndex * 300}px)`,
              width: `${displayImages.length * 300}px`,
            }}
            onTransitionEnd={handleTransitionEnd}
          >
            {displayImages.map((image, index) => (
              <div key={`thumb-${index}`} className="w-full h-full">
                <img
                  src={image}
                  alt={`Thumbnail ${index + 1}`}
                  className="w-full h-full object-cover"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Slider2 };
slider-2
