"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Thumbs, Navigation } from "swiper/modules";
import { useState } from "react";
import type { Swiper as SwiperType } from "swiper";
import ImageLightbox from "../ui/ImageLightbox";
import Image from "next/image";
import { withCDN, optimizedImage } from "@/src/lib/utils";

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

interface SliderProps {
  images?: string[];
}

const defaultImages = [
  "https://yefranchisees.b-cdn.net/frontend/About/img-01.jpg.jpeg",
  "https://yefranchisees.b-cdn.net/frontend/About/img-02.jpg.jpeg",
  "https://yefranchisees.b-cdn.net/frontend/About/img-03.jpg.jpeg",
  "https://yefranchisees.b-cdn.net/frontend/About/img-04.jpg.jpeg",
];

export default function Slider({ images = defaultImages }: SliderProps) {
  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);

  return (
    <div className="flex flex-col lg:flex-row gap-4 max-w-5xl mx-auto lg:mt-[50px] mt-[10px] about-slider">

      {/* MAIN IMAGE SLIDER */}
      <Swiper
  modules={[Thumbs, Navigation]}
  loop={typeof window !== "undefined" && window.innerWidth < 768}
  thumbs={{
    swiper:
      thumbsSwiper && !thumbsSwiper.destroyed
        ? thumbsSwiper
        : null,
  }}
  navigation={{
    prevEl: ".about-slider-prev",
    nextEl: ".about-slider-next",
  }}
  onSetTranslate={(swiper) => {
    if (window.innerWidth >= 768) return;

    swiper.slides.forEach((slide, index) => {
      const slideEl = slide as HTMLElement;
      const slideOffset =
        swiper.slidesGrid[index] + swiper.translate;

      const distance = Math.min(
        Math.abs(slideOffset) / swiper.width,
        1
      );

      const scale = 1 - distance * 0.2;
      const opacity = 1 - distance * 0.2;

      slideEl.style.transform = `scale(${scale})`;
      slideEl.style.opacity = `${opacity}`;
    });
  }}
  onSetTransition={(swiper, duration) => {
    if (window.innerWidth >= 768) return;

    swiper.slides.forEach((slide) => {
      (slide as HTMLElement).style.transitionDuration = `${duration}ms`;
    });
  }}
  className="
    w-full
    h-[210px] sm:h-[320px] md:h-[320px] lg:h-[540px] xl:h-[490px]
    rounded-3xl overflow-hidden
    about-main-swiper
  "
>
  {images.map((img, i) => (
    <SwiperSlide key={i}>
      <div className="slider-inner w-full h-full">
        <img
          src={optimizedImage(img, 1080)}
          alt={`About image ${i + 1}`}
          className="w-full h-full object-cover cursor-pointer"
          onClick={() => setLightboxIndex(i)}
        />
      </div>
    </SwiperSlide>
  ))}

  <button
    className="
      about-slider-prev
      absolute left-0 top-1/2 -translate-y-1/2 z-10
      w-9 h-9 rounded-full
      md:hidden
    "
    aria-label="Previous image"
  >
    <Image
      src={withCDN("/arrow-left.svg")}
      alt="Previous"
      width={28}
      height={28}
      className="w-[24px] h-[24px] md:w-[28px] md:h-[28px]"
    unoptimized
    />
  </button>

  <button
    className="
      about-slider-next
      absolute right-[-10px] top-1/2 -translate-y-1/2 z-10
      w-9 h-9 rounded-full
      md:hidden
    "
    aria-label="Next image"
  >
    <Image
      src={withCDN("/arrow-right.svg")}
      alt="Next"
      width={28}
      height={28}
      className="w-[24px] h-[24px] md:w-[28px] md:h-[28px]"
    unoptimized
    />
  </button>
</Swiper>

      {/* THUMBNAILS - DESKTOP ONLY */}
      <Swiper
        onSwiper={setThumbsSwiper}
        slidesPerView={4}
        spaceBetween={10}
        direction="horizontal"
        watchSlidesProgress
        breakpoints={{
          768: {
            direction: "vertical",
          },
        }}
        className="
          hidden md:block
          w-full lg:w-[130px]
          h-[70px] lg:h-[550px] xl:h-[490px]
        "
      >
        {images.map((img, i) => (
          <SwiperSlide key={i}>
            <img
              src={optimizedImage(img, 384)}
              alt={`Thumbnail ${i + 1}`}
              className="
                rounded-xl cursor-pointer object-cover
                w-full lg:w-[130px]
                h-[60px] md:h-[70px] lg:h-[115px]
              "
            />
          </SwiperSlide>
        ))}
      </Swiper>

      <ImageLightbox
        images={images}
        index={lightboxIndex}
        onClose={() => setLightboxIndex(null)}
      />
    </div>
  );
}