"use client";

import { useState, useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import type { Swiper as SwiperType } from "swiper";

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

import Image from "next/image";
import { withCDN } from "@/src/lib/utils";
import ImageLightbox from "../ui/ImageLightbox";

import { Thumbs, Navigation } from "swiper/modules";

interface GallerySlide {
  img: string;
  title: string;
}

interface ProgramGallerySliderProps {
  slides: GallerySlide[];
}

export default function ProgramGallerySlider({
  slides = [],
}: ProgramGallerySliderProps) {
  const safeSlides = Array.isArray(slides) ? slides : [];

  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
  const [activeIndex, setActiveIndex] = useState(0);
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);

  const prevRef = useRef<HTMLButtonElement>(null);
  const nextRef = useRef<HTMLButtonElement>(null);

  return (
    <div className="w-full relative pl-0">
      {/* Navigation Buttons */}
      <button
        ref={prevRef}
        className="absolute left-0 bottom-[0px] md:bottom-[20px] z-10 -translate-y-1/2 bg-white rounded-full flex items-center justify-center btn-left"
      >
        <Image
          src={withCDN("/arrow-left.svg")}
          alt="Previous"
          width={32}
          height={32}
          className="object-contain cursor-pointer"
        />
      </button>

      <button
        ref={nextRef}
        className="absolute sm:-right-[0px] -right-[2px] bottom-[0px] md:bottom-[20px] z-10 -translate-y-1/2 bg-white rounded-full flex items-center justify-center btn-right"
      >
        <Image
          src={withCDN("/arrow-right.svg")}
          alt="Next"
          width={32}
          height={32}
          className="object-contain cursor-pointer"
        />
      </button>

      {/* MAIN SLIDER */}
      <Swiper
        spaceBetween={10}
        modules={[Thumbs, Navigation]}
        thumbs={{
          swiper:
            thumbsSwiper && !thumbsSwiper.destroyed
              ? thumbsSwiper
              : null,
        }}
        onSlideChange={(swiper) => setActiveIndex(swiper.activeIndex)}
        onBeforeInit={(swiper) => {
          // @ts-ignore
          swiper.params.navigation.prevEl = prevRef.current;
          // @ts-ignore
          swiper.params.navigation.nextEl = nextRef.current;
        }}
        navigation={{
          prevEl: prevRef.current,
          nextEl: nextRef.current,
        }}
        className="rounded-2xl overflow-hidden"
      >
        {safeSlides.map((slide, i) => (
          <SwiperSlide key={i}>
            <div
              className="relative h-[300px] md:h-[400px] xl:h-[500px] main-slider-pro cursor-pointer"
              onClick={() => setLightboxIndex(i)}
            >
              <img
                src={slide.img}
                alt={slide.title}
                className="absolute inset-0 w-full h-full object-contain"
              />

              <div className="absolute inset-0 flex flex-col justify-end p-4">
                <h3 className="text-[#0097dc] text-[15px] uppercase py-[10px] px-[30px] rounded-full bg-white shadow-[6px_6px_14px_#00000040] w-fit ml-auto mr-[7px] mb-[0px] lg:mr-[97px] lg:mb-[60px] md:mr-[50px] md:mb-[20px]">
                  {slide.title}
                </h3>
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      {/* THUMBNAILS */}
      <Swiper
        onSwiper={setThumbsSwiper}
        spaceBetween={10}
        slidesPerView={3}
        breakpoints={{
          640: {
            slidesPerView: 4,
          },
        }}
        watchSlidesProgress
        modules={[Thumbs]}
        className="mt-3 thumbnail-gal"
      >
        {safeSlides.map((slide, i) => (
          <SwiperSlide key={i}>
            <div
              className={`
                relative 
                md:h-[100px] 
                lg:h-[130px] 
                h-[60px] 
                cursor-pointer 
                overflow-hidden
                border-b-[2px]
                transition-all duration-300
                pb-1 thumbnail-slider-box
                ${
                  activeIndex === i
                    ? "border-[#0097dc]"
                    : "border-transparent"
                }
              `}
            >
              <img
                src={slide.img}
                alt={slide.title}
                className="w-full h-full object-contain md:object-contain"
              />

              {/* Active underline */}
              <span
                className={`
                  absolute 
                  bottom-0 
                  left-0 
                  h-[1px] 
                  transition-all duration-300

                  ${
                    activeIndex === i
                      ? "w-full"
                      : "w-0"
                  }
                `}
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      <ImageLightbox
        images={safeSlides.map((s) => s.img)}
        index={lightboxIndex}
        onClose={() => setLightboxIndex(null)}
      />
    </div>
  );
}