/* eslint-disable @next/next/no-img-element */
"use client";

import Image from "next/image";
import Link from "next/link";
import { useRef, useState } from "react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperRef, SwiperSlide } from "swiper/react";
import type { Swiper as SwiperType } from "swiper";

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

const sliderData: SliderItem[] = [
  {
    id: 1,
    image: "/images/categories/navana-khodeza-pinewood.jpg",
    title: "Navana Khodeza Pinewood",
    address: "Gulshan",
  },
  {
    id: 2,
    image: "/images/categories/card-1.jpg",
    title: "Resonance by Navana",
    address: "Banani",
  },
  {
    id: 3,
    image: "/images/categories/card-2.jpg",
    title: "Navana Heights",
    address: "Uttara",
  },
];

const HexagonalCard = ({ data }: { data: SliderItem }) => (
  <div className="relative w-full aspect-square md:w-[500px] md:h-[500px] 2xl:w-[625px] 2xl:h-[625px]">
    <Image
      src={data.image}
      alt={data.title}
      fill={true}
      className="object-cover z-0"
      sizes="(max-width: 768px) 100vw, 256px"
    />

    <div className="absolute bottom-4 right-4 sm:bottom-5 sm:right-5 md:bottom-6 md:right-6 z-10">
      <div className="flex flex-col p-2 sm:p-3 md:p-4 space-y-1 md:space-y-2 items-end">
        <h3 className="text-white font-creato font-normal text-base sm:text-lg md:text-xl lg:text-[22px] tracking-wider text-right">
          {data.title}
        </h3>
        <div className="hidden md:inline-flex items-center">
          <img
            src="/icons/map_pin.svg"
            alt="map pin"
            className="mr-2 opacity-80"
          />
          <p className="text-white font-creato font-light text-sm md:text-base lg:text-lg tracking-widest">
            {data.address}
          </p>
        </div>
      </div>
    </div>
    <div
      className="absolute inset-0 z-1"
      style={{
        background: `linear-gradient(180deg, rgba(0, 0, 0, 0.00) 65.63%, rgba(0, 0, 0, 0.20) 79.57%), linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%)`,
      }}
    />
  </div>
);

const NrelHexagonalSlider = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const swiperRef = useRef<SwiperType | null>(null);

  const handleSlideChange = (swiper: SwiperType) => {
    setActiveIndex(swiper.activeIndex);
  };

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

  return (
    <div className="flex flex-col gap-6 sm:gap-8 md:gap-10 items-center justify-center latest-projects-section w-full md:w-[500px] md:h-[600px] 2xl:w-[625px] 2xl:h-[750px] mx-auto order-2 xl:order-1 px-4 md:px-0 xl:scale-90">
      <Swiper
        ref={swiperRef as React.RefObject<SwiperRef | null>}
        modules={[Autoplay]}
        speed={1000}
        spaceBetween={0}
        slidesPerView={1}
        onSlideChange={handleSlideChange}
        autoplay={{
          delay: 2800,
          disableOnInteraction: false,
        }}
        style={{
          clipPath:
            "polygon(0% 0%, 70% 0%, 100% 30%, 100% 100%, 30% 100%, 0% 70%)",
        }}
        className="w-full max-w-[700px]"
      >
        {sliderData.map((item) => (
          <SwiperSlide key={item.id}>
            <Link
              href="/property-details"
              className="flex justify-center relative"
            >
              <HexagonalCard data={item} />
            </Link>
          </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;