"use client";
import React, { useEffect, useRef, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Navigation, Thumbs, Pagination } from "swiper/modules";
import ImageWithFallback from "@/components/UiComponents/ImageWithFallback";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import "swiper/css/pagination";

interface ImageCarouselProps {
  carouselImages: any[];
  hasThumbs?: boolean;
}

export default function ImageCarousel({carouselImages = [],hasThumbs = true}: ImageCarouselProps) {
  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
  const [images, setImages] = useState<any>(carouselImages);
  const mainSwiperRef = useRef<any>(null);
  const prevRef = useRef(null);
  const nextRef = useRef(null);
  const [activeIndex, setActiveIndex] = useState(0);
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  useEffect(() => {
    if (isClient &&mainSwiperRef.current && prevRef.current &&nextRef.current ) {
      const swiper = mainSwiperRef.current.swiper;
      if (swiper) {
        swiper.params.navigation.prevEl = prevRef.current;
        swiper.params.navigation.nextEl = nextRef.current;
        swiper.navigation.init();
        swiper.navigation.update();
      }
    }
  }, [isClient, thumbsSwiper]);


  useEffect(()=>{
    setImages(carouselImages)
  },[carouselImages])

  if (!isClient) return null;

  return (
    <div
      className="w-full md:grid md:grid-cols-4 flex flex-col-reverse md:h-[550px] h-fit md:gap-2 overflow-hidden sticky top-10"
      data-aos="zoom-in-up"
    >
      {/* Thumbnails Swiper */}
      {hasThumbs && (
        <div className="relative overflow-hidden md:col-span-1 hidden md:block">
          <Swiper
            direction="vertical"
            spaceBetween={12}
            slidesPerView={4}
            freeMode
            watchSlidesProgress
            slideToClickedSlide
            onSwiper={setThumbsSwiper}
            modules={[Thumbs, FreeMode]}
            className="mySwiper3 !h-full"
          >
            {images.map((image: any, index: number) => (
              <SwiperSlide key={`thumb_slide_${image}`} className="flex items-center justify-center">
                <div className={`transition-opacity duration-300 ${activeIndex === index ? "opacity-100" : "opacity-50"}`}>
                  <ImageWithFallback
                    width={1000}
                    height={1000}
                    alt={`Thumbnail ${index + 1}`}
                    className="h-32 w-32 object-contain border border-greynormal rounded-xl p-4 mx-auto"
                    src={image}
                  />
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      )}

      {/* Main Image Swiper */}
      <div
        className={`relative w-full ${
          hasThumbs ? "md:col-span-3" : "md:col-span-4"
        } bg-greynormal rounded-xl`}
      >
        <Swiper
          ref={mainSwiperRef}
          onSlideChange={(swiper) => setActiveIndex(swiper.activeIndex)}
          thumbs={{
            swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
          }}
          modules={[Navigation, Thumbs, Pagination]}
          className="mySwiper2 !h-full"
        >
          {images.map((image: any, index: number) => (
            <SwiperSlide
              key={`main_slide_${image}`}
              className="product-swiper-slide"
            >
              <ImageWithFallback
                width={1000}
                height={1000}
                alt={`Product Image ${index + 1}`}
                className="cursor-pointer w-full h-[420px] object-contain rounded-3xl"
                loading="eager"
                src={image}
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </div>
  );
}