"use client";

import { Navigation, Pagination, Scrollbar, Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import Image from "next/image";
import { useRef } from "react";
import gsap from "gsap";
import { Button } from "./ui/button";

const Slider = () => {
  const slides = [
    {
      id: 1,
      title: "WELCOME TO FOCUX",
      subtitle: "Home Remodeling & Renovation",
      description:
        "Whether you’re increasing property value ahead of a sale or making a house your own, Focux brings 15+ years of licensed excellence in Australia’s residential home industry.",
      image: "/images/kitchen/kitchen-3.jpg",
    },
    {
      id: 2,
      title: "Bathroom Renovation",
      subtitle: "Luxury & Functionality Combined",
      description:
        "Reinvent the most utilitarian room with ideas for powder rooms, master baths, and more. Designed with elegance and functionality in mind.",
      image: "/images/kitchen/kitchen-2.jpg",
    },
    {
      id: 3,
      title: "Kitchen Renovation",
      subtitle: "Heart of the Home",
      description:
        "We can help you create a kitchen or dining area in your space – modern designs that bring families and friends together.",
      image: "/images/bathroom/bathroom-2.jpg",
    },
    {
      id: 4,
      title: "WHY FOCUX?",
      subtitle: "Design. Build. Transform.",
      description:
        "The creative experience we provide is highly collaborative and deeply personal, resulting in sophisticated spaces that reflect how our clients love to live.",
      image: "/images/kitchen/kitchen-1.jpg",
    },
  ];

  const swiperRef = useRef(null);
  const slideContentRef = useRef(null);

  const handleSlideChange = (swiper) => {
    // Kill any existing animations on the current slide's content to prevent conflicts
    gsap.killTweensOf(slideContentRef.current);
    console.log(swiper);

    // Get the currently active slide's HTML element
    const activeSlide = swiper.slides[swiper.realIndex];
    if (!activeSlide) return;
    

    // Target the heading, subtitle, and description within the active slide
    const titleElement = activeSlide.querySelector(".slide-title");
    const descriptionElement = activeSlide.querySelector(".slide-description");
    const subtitleElement = activeSlide.querySelector(".slide-subtitle");
    const buttonElement = activeSlide.querySelector(".slide-button");

    const elementsToAnimate = [
      titleElement,
      subtitleElement,
      descriptionElement,
      buttonElement
    ].filter(Boolean);


    // Set the initial state for the new elements immediately
    gsap.set(elementsToAnimate, { y: 30, opacity: 0 });

    // Create a GSAP timeline for the entrance animation with a slight delay
    const tl = gsap.timeline({ delay: 0 });

    if (titleElement) {
      tl.to(titleElement, {
        y: 0,
        opacity: 1,
        duration: 0.5,
        ease: "power2.out",
      });
    }
    if (subtitleElement) {
      tl.to(
        subtitleElement,
        { y: 0, opacity: 1, duration: 0.4, ease: "power2.out" },
        "<0.1"
      );
    }
    if (descriptionElement) {
      tl.to(
        descriptionElement,
        { y: 0, opacity: 1, duration: 0.3, ease: "power2.out" },
        "<0.1"
      );
    } if (buttonElement) {
      tl.to(
        buttonElement,
        { y: 0, opacity: 1, duration: 0.1, ease: "none" },
        "<0.1"
      );
    }
  };

  return (
    <section>
      <Swiper
        ref={swiperRef}
        slidesPerView={1}
     
        pagination={{
          clickable: true,
        }}
        navigation={true}
        autoplay={{
          delay: 5000,
          disableOnInteraction: false,
        }}
        modules={[Pagination, Navigation, Scrollbar, Autoplay]}
        onSwiper={(swiper) => {
          handleSlideChange(swiper);
        }}
        onSlideChange={handleSlideChange}
   
      
        className="mySwiper h-screen flex justify-between items-center"
      >
        {slides.map((slide) => (
          <SwiperSlide key={slide.id} className="relative">
            <Image
              src={slide.image}
              alt={slide.title}
              fill
              className="object-cover z-0"
            />
            <div className="absolute inset-0 z-10 p-4 bg-black/50 text-center">
              <div className="absolute inset-0 max-w-2xl px-10 mx-auto flex flex-col items-center justify-center">
                <span className="text-white text-3xl lg:text-5xl font-extrabold slide-title">
                  {slide.title}
                </span>
                <span className="text-white text-xl md:text-2xl font-medium mt-2 slide-subtitle">
                  {slide.subtitle}
                </span>
                <span className="text-white text-lg mt-4 slide-description">
                  {slide.description}
                </span>
                <Button className="!px-8 !py-6 rounded-full text-base uppercase slide-button mt-2">Contact Us</Button>
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </section>
  );
};

export default Slider;