"use client";

import React, { useRef, useMemo, useState } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Mousewheel } from "swiper/modules";
import "swiper/css";

import { withCDN } from "@/src/lib/utils";

type Photo = {
  id: string | number;
  src: string;
  alt: string;
};

export default function PhotosCarousel({ photos }: { photos: Photo[] }) {
  const swiperRef = useRef<any>(null);
  const [selectedImage, setSelectedImage] = useState<Photo | null>(null);
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
  const lightboxSwiperRef = useRef<any>(null);

  // Infinite logic
  const MIN_SLIDES = 25;
  const MAX_REPEAT = 40;

  const extendedPhotos = useMemo(() => {
    if (!photos || photos.length === 0) return [];

    const repeatCount = Math.min(
      MAX_REPEAT,
      Math.max(1, Math.ceil(MIN_SLIDES / photos.length))
    );

    const list: Array<{ photo: Photo; r: number }> = [];

    for (let r = 0; r < repeatCount; r++) {
      for (let i = 0; i < photos.length; i++) {
        list.push({ photo: photos[i], r });
      }
    }

    return list;
  }, [photos]);

  return (
    <>
      <div className="relative w-full flex items-center gap-2 mt-4 discover-carousel">
        {/* LEFT BUTTON */}
        <button
          onClick={() => swiperRef.current?.slidePrev()}
          aria-label="Prev"
          className="flex-shrink-0 transition mt-[-50px]"
        >
          <Image
            src={withCDN("/arrow-left.svg")}
            alt="Prev"
            width={28}
            height={28}
            className="cursor-pointer w-[20px] h-[20px] md:w-[28px] md:h-[28px]"
          />
        </button>

        {/* SWIPER */}
        <Swiper
          modules={[Mousewheel]}
          onSwiper={(swiper) => (swiperRef.current = swiper)}
          slidesPerView={"auto"}
          spaceBetween={12}
          loop={true}
          grabCursor={true}
          mousewheel={{ forceToAxis: true }}
          slidesOffsetBefore={0}
          slidesOffsetAfter={0}
          breakpoints={{
            768: {
              slidesPerView: 3.5,
              spaceBetween: 16,
            },
            1024: {
              slidesPerView: 5,
              spaceBetween: 10,
              centeredSlides: false,
            },
          }}
          className="flex-grow py-2 overflow-hidden"
        >
          {extendedPhotos.map(({ photo, r }, idx) => (
            <SwiperSlide
              key={`${photo.id}-${r}-${idx}`}
              className="flex-shrink-0 pb-2 xl:w-auto max-[767px]:!w-auto"
            >
              <div
                onClick={() => setSelectedIndex(photos.findIndex(p => p.id === photo.id))}
                className="
                  w-[142px] h-[90px]
                  sm:w-[160px] sm:h-[100px]
                  md:w-[180px] md:h-[110px]
                  lg:w-full lg:h-[145px]
                  rounded-2xl transition-transform hover:scale-105 
                  discover-slider-box cursor-pointer
                "
                style={{ boxShadow: "9px 14px 14px rgba(0,0,0,0.15)" }}
              >
                <Image
                  src={withCDN(photo.src)}
                  alt={photo.alt}
                  width={232}
                  height={145}
                  className="w-full h-full object-cover rounded-2xl"
                />
              </div>
            </SwiperSlide>
          ))}
        </Swiper>

        {/* RIGHT BUTTON */}
        <button
          onClick={() => swiperRef.current?.slideNext()}
          aria-label="Next"
          className="flex-shrink-0 transition rotate-180 cursor-pointer bg-white rounded-[50%] mt-[-50px] mr-0 xl:mr-0"
        >
          <Image
            src={withCDN("/arrow-left.svg")}
            alt="Next"
            width={28}
            height={28}
            className="w-[20px] h-[20px] md:w-[28px] md:h-[28px]"
          />
        </button>
      </div>

      {/* LIGHTBOX */}
      {selectedIndex !== null && (
        <div
          className="fixed inset-0 bg-black/90 z-[9999] flex items-center justify-center"
          onClick={() => setSelectedIndex(null)}
        >
          {/* Close */}
          <button
            onClick={() => setSelectedIndex(null)}
            className="absolute top-20 right-5 md:top-25 md:right-12 text-white text-2xl md:text-4xl z-50"
          >
            ✕
          </button>
           
          <div className="flex items-center justify-between w-full max-w-5xl  z-90 absolute top-1/2 transform -translate-y-1/2 px-4 md:px-10">
          {/* Previous */}
          <button
            onClick={(e) => {
              e.stopPropagation();
              lightboxSwiperRef.current?.slidePrev();
            }}
            className="absolute left-4 md:left-10 z-50"
          >
           <Image
            src={withCDN("/arrow-left-white.svg")}
            alt="Prev"
            width={28}
            height={28}
            className="cursor-pointer w-[20px] h-[20px] md:w-[40px] md:h-[40px]"
          />
          </button>

          {/* Next */}
          <button
            onClick={(e) => {
              e.stopPropagation();
              lightboxSwiperRef.current?.slideNext();
            }}
            className="absolute right-4 md:right-10 z-50 transition rotate-180"
          >
           <Image
            src={withCDN("/arrow-left-white.svg")}
            alt="Next"
            width={28}
            height={28}
            className="w-[20px] h-[20px] md:w-[40px] md:h-[40px]"
          />
          </button>
          </div>

          <div
            className="w-full max-w-6xl"
            onClick={(e) => e.stopPropagation()}
          >
            <Swiper
              initialSlide={selectedIndex}
              onSwiper={(swiper) => (lightboxSwiperRef.current = swiper)}
              slidesPerView={1}
              spaceBetween={20}
              loop
            >
              {photos.map((photo) => (
                <SwiperSlide key={photo.id}>
                  <div className="flex justify-center items-center h-[90vh] p-4">
                    <Image
                      src={withCDN(photo.src)}
                      alt={photo.alt}
                      width={1200}
                      height={800}
                      className="max-h-[90vh] w-auto object-contain rounded-xl transition-transform md:scale-150"
                    />
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        </div>
      )}
    </>
  );
}