"use client";

import { useState } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Thumbs } from "swiper/modules";
import { withCDN } from "@/lib/utils";

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

export default function ImageSlider({ images: propImages }: { images?: string[] }) {
  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
  const [isFullscreen, setIsFullscreen] = useState(false);

  const fallbackImages = [
     withCDN("/building-instruction/1_4x%201.png"),
     withCDN("/building-instruction/1_4x%201%20(1).png"),
     withCDN("/building-instruction/1_4x%201.png"),
     withCDN("/building-instruction/1_4x%201%20(1).png"),
     withCDN("/building-instruction/1_4x%201.png"),
     withCDN("/building-instruction/1_4x%201%20(1).png"),
     withCDN("/building-instruction/1_4x%201.png"),
     withCDN("/building-instruction/1_4x%201%20(1).png"),
     withCDN("/building-instruction/1_4x%201.png"),
     withCDN("/building-instruction/1_4x%201%20(1).png"),
  ];

  const images = propImages?.length ? propImages : fallbackImages;

  return (
    <>
      {/* MAIN VIEW */}
      <div className="relative w-full max-w-5xl mx-auto">

        {/* MAIN SLIDER */}
        <Swiper
          modules={[Navigation, Thumbs]}
          navigation
          thumbs={{ swiper: thumbsSwiper }}
          className="rounded-3xl overflow-hidden mb-[100px] md:mb-0"
        >
          {images.map((img, i) => (
            <SwiperSlide key={i}>
              <div className="relative w-[90%] max-w-[650px] mx-auto h-[220px] md:h-[457px] border border-[#C6C6C6] rounded-[50px] shadow-[11px_11px_22px_#00000033] bg-white flex items-center justify-center">
                <Image
                  src={img}
                  alt="slide"
                  fill
                  className="object-contain w-full"
                />
              </div>
            </SwiperSlide>
          ))}
        </Swiper>

        {/* FULLSCREEN BUTTON */}
        <button
          onClick={() => setIsFullscreen(true)}
          className="absolute bottom-[170px] right-[42%] md:bottom-0 md:right-0 xl:-right-20 bg-blue-500 text-white p-2 rounded-md cursor-pointer z-1"
        >
          <Image
          src={withCDN("/building-instruction/collaps%20btn.png")}
          alt="fullscreen"
          width={36}
          height={36}
          unoptimized
          className="object-cover w-[61px] h-[61px] md:w-[36px] md:h-[36px]"
          />
        </button>

        {/* THUMBNAILS */}
        <Swiper
          onSwiper={setThumbsSwiper}
          slidesPerView={3}
          spaceBetween={10}
          breakpoints={{
              640: { slidesPerView: 3 },
              1200: { slidesPerView: 5 },
          }}
          className="mt-6 thumbnail-slider"
        >
          {images.map((img, i) => (
            <SwiperSlide key={i}>
              <div className="h-[111px] rounded-[12px] bg-white overflow-hidden cursor-pointer shadow-[12px_12px_24px_#00000033]">
                <Image
                  src={img}
                  alt="thumb"
                  width={100}
                  height={70}
                  className="object-cover w-full h-full"
                />
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>

      {/* FULLSCREEN MODAL */}
      {isFullscreen && (
        <div className="fixed inset-0 bg-[#003B63B2] z-50 flex items-center justify-center pop-up-slider">

          <div className="relative w-[90%] h-[90%]">

            {/* CLOSE */}
            <button
              onClick={() => setIsFullscreen(false)}
              className="absolute top-4 right-4 text-white text-2xl z-50 cursor-pointer"
            >
              ✕
            </button>

             {/* Fullscreen */}
            <button
              onClick={() => setIsFullscreen(false)}
              className="absolute bottom-4 right-16 text-white text-2xl z-50 cursor-pointer hidden md:block"
            >
             <Image
                src={withCDN("/building-instruction/collaps%20btn.png")}
                alt="fullscreen"
                width={64}
                height={64}
                unoptimized
                className="object-cover w-[64px] h-[64px]"
              />
            </button>

            <Swiper
              modules={[Navigation]}
              navigation
              className="w-full h-full"
            >
              {images.map((img, i) => (
                <SwiperSlide key={i}>
                  <div className="relative w-[90%] md:w-full h-full max-w-[1100px] mx-auto !h-[360px] md:min-h-[800px] bg-white max-[767px]:top-[25%]">
                    <Image
                      src={img}
                      alt="fullscreen"
                      width={800}
                      height={600}
                      className="object-contain w-full h-[360px] md:h-[600px]"
                    />
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>

          </div>
        </div>
      )}
    </>
  );
}