"use client";

import { useState } from "react";
import Image from "next/image";
import { Plus, X } from "lucide-react";
import { withCDN } from "@/lib/utils";
import { useEffect } from "react";

// SWIPER
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";

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




export default function Gallery({ data }: { data: any[] }) {
  const [open, setOpen] = useState(false);
  const [current, setCurrent] = useState(0);

  useEffect(() => {
  if (open) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "auto";
  }

  return () => {
    document.body.style.overflow = "auto";
  };
}, [open]);

  return (
    <>
      {/* SINGLE SLIDER */}
      <Swiper
        modules={[Navigation]}
        navigation
        spaceBetween={0}
        slidesPerView={1}
        breakpoints={{
          640: { slidesPerView: 1 },
          768: { slidesPerView: 2 },
          1024: { slidesPerView: 3 },
          1280: { slidesPerView: 4 },
        }}
        className=" main-slider"
      >
        {data.map((item, index) => (
          <SwiperSlide key={index}>
            <div
              className="relative w-[100%] mx-suto md:w-[170px] h-[150px] rounded-[20px] cursor-pointer group hover:shadow-[0px_10px_20px_#00000040] hover:scale-[1.1]"
              onClick={() => {
                setCurrent(index);
                setOpen(true);
              }}
            >
              <Image
                src={item.img}
                alt={item.name}
                fill
                className="object-contain"
                unoptimized
              />

              {/* Hover */}
              <div className="absolute inset-0 bg-black/0 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                 <Image
                    src={withCDN("/lens.png")}
                    alt="logo"
                    width={30}
                    height={30}
                    unoptimized
                    className="object-contain w-[30px] h-[30px] ml-[60%]"
                    />
              </div>

              {/* Label */}
              <p className="absolute bottom-2 left-1/2 -translate-x-1/2 bg-white px-[18px] py-[6px] w-max rounded-full shadow text-[#0097DC] text-[9px] uppercase">
                {item.name}
              </p>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      {/* MODAL */}
      {open && (
        <div className="fixed inset-0 bg-black/80 z-999 flex items-center justify-center popup-slider">
          <button
            className="absolute top-6 right-6 text-white z-50 cursor-pointer"
            onClick={() => setOpen(false)}
          >
            <X size={28} />
          </button>
          <div className="py-[50px] overflow-hidden">
          <div className="w-[90%] mx-auto max-w-[900px] min-h-[500px] bg-white rounded-[20px] shadow-[0px_4px_4px_#00000040] slider-pop">
            <Swiper
              modules={[Navigation]}
              navigation
              initialSlide={current}
              centeredSlides
              slidesPerView={1.5}
              spaceBetween={5}
              loop
              onSlideChange={(swiper) => {
                setCurrent(swiper.realIndex);
              }}
              breakpoints={{
              640: { slidesPerView: 1.1 },
              1024: { slidesPerView: 2.5 },
             }}
            >
              {data.map((item, index) => (
                <SwiperSlide key={index}>
                    <h2 className="text-[15px] md:text-[25px] font-bold uppercase tracking-[2px] text-[#0097DC] heading">{item.package} package robots</h2>
                  <div className="relative h-[380px] rounded-xl">
                    <Image
                      src={item.img}
                      alt={item.name}
                      fill
                      className="object-contain"
                    />
                    <p className="absolute -bottom-24 md:-bottom-20 left-1/2 -translate-x-1/2 bg-white px-[18px] py-[6px] w-max rounded-full shadow text-[#0097DC] text-[14px] md:text-[24px] tracking-[2px] uppercase shadow-[4px_4px_9px_#00000040] slide-name">
                      {item.name}
                    </p>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>

            <div className="text-[#58585A] text-[16px] text-center mb-4 mt-[-28px]">
              Robot <span className="text-[20px] font-bold">{current + 1}</span> / {data.length}
            </div>
          </div>
        </div>
        </div>
      )}
    </>
  );
}