"use client";

import { useRef, useState } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import { useMediaQuery } from "react-responsive";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

// Sample data for the slider
interface SliderItem {
  id: number;
  image: string;
  title: string;
}

const sliderData: SliderItem[] = [
  {
    id: 1,
    image: "/images/property-details/amenities/amenities-1.jpg",
    title: "Grand Double Height Entry",
  },
  {
    id: 2,
    image: "/images/property-details/amenities/amenities-2.jpg",
    title: "Private Pools",
  },
  {
    id: 3,
    image: "/images/property-details/amenities/amenities-3.jpg",
    title: "Furnished Spaces",
  },
  {
    id: 4,
    image: "/images/property-details/amenities/amenities-5.jpg",
    title: "Multi-level Parking",
  },
  {
    id: 5,
    image: "/images/property-details/amenities/amenities-6.jpg",
    title: "High Speed Lifts",
  },
  {
    id: 6,
    image: "/images/property-details/amenities/amenities-4.jpg",
    title: "CCTV Monitoring System",
  },
];

const HexagonalCard = ({
  data,
  scaleDown,
}: {
  data: SliderItem;
  scaleDown: boolean;
}) => (
  <div
    className="relative w-[150px] h-[200px] md:w-[440px] md:h-[585px] lg:w-[468px] lg:h-[622px]"
    style={
      scaleDown
        ? {
            transform: "scale(0.8)",
            transformOrigin: "center",
          }
        : undefined
    }
  >
    <Image
      src={data.image}
      alt={data.title}
      fill={true}
      className="object-cover z-0 h-[60%] pb-12"
      sizes="(max-width: 768px) 100vw, 256px"
    />
    <div className="absolute bottom-0 left-0 z-10">
      <h3 className="text-[#28241E] font-creato font-normal text-[10px] md:text-[20px] tracking-wider text-left">
        {data.title}
      </h3>
    </div>
  </div>
);

const NrelHexagonalSlider = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const swiperRef = useRef<any>(null);
  const isMidDesktop = useMediaQuery({ minWidth: 1280, maxWidth: 1366 });
  const slideGap = isMidDesktop ? 0 : 32; // 15% less gap on mid desktops

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleSlideChange = (swiper: any) => {
    setActiveIndex(swiper.activeIndex);
  };

  const handleDotClick = (index: number) => {
    if (swiperRef.current && swiperRef.current.swiper) {
      swiperRef.current.swiper.slideTo(index);
    }
  };

  return (
    <div className="flex flex-col gap-10 items-center justify-center latest-projects-section">
      <Swiper
        ref={swiperRef}
        modules={[Autoplay]}
        speed={1000}
        spaceBetween={10}
        slidesPerView={2.33}
        breakpoints={{
          // lg breakpoint (1024px) and above - keep original 3 slides with original gap
          1024: {
            slidesPerView: 3,
            spaceBetween: slideGap,
          },
        }}
        onSlideChange={handleSlideChange}
        autoplay={{
          delay: 2800,
          disableOnInteraction: false,
        }}
        className="w-full lg:w-[1200px]"
      >
        {sliderData.map((item) => (
          <SwiperSlide key={item.id}>
            <div className="flex justify-center">
              <HexagonalCard data={item} scaleDown={isMidDesktop} />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      {/* Dot Indicator */}
      <div className="flex gap-3 justify-center">
        {sliderData.map((_, index) => (
          <div
            key={index}
            onClick={() => handleDotClick(index)}
            className={`rounded-full transition-all duration-300 ease-in-out cursor-pointer ${
              index === activeIndex
                ? "w-12 h-2 bg-[#DD577F]"
                : "w-2.5 h-2 bg-[#DD577F]"
            }`}
          />
        ))}
      </div>
    </div>
  );
};

export default NrelHexagonalSlider;