import { useState } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCoverflow, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/effect-coverflow";

const images = [
  { src: "/images/nail1.jpg", alt: "Nail art 1" },
  { src: "/images/nail2.jpg", alt: "Nail art 2" },
  { src: "/images/nail3.jpg", alt: "Nail art 3" },
  { src: "/images/nail1.jpg", alt: "Nail art 1" },
  { src: "/images/nail2.jpg", alt: "Nail art 2" },
  { src: "/images/nail3.jpg", alt: "Nail art 3" },
  { src: "/images/nail1.jpg", alt: "Nail art 1" },
  { src: "/images/nail2.jpg", alt: "Nail art 2" },
  { src: "/images/nail3.jpg", alt: "Nail art 3" },
  { src: "/images/nail1.jpg", alt: "Nail art 1" },
  { src: "/images/nail2.jpg", alt: "Nail art 2" },
  { src: "/images/nail3.jpg", alt: "Nail art 3" },

  // Ajoute plus d’images si tu veux !
];

export default function CoverflowGallery() {
  const [modalOpen, setModalOpen] = useState(false);
  const [modalIndex, setModalIndex] = useState<number>(0);

  const openModal = (idx: number) => {
    setModalIndex(idx);
    setModalOpen(true);
  };
  const closeModal = () => setModalOpen(false);

  const prevImage = () => setModalIndex(prev => (prev === 0 ? images.length - 1 : prev - 1));
  const nextImage = () => setModalIndex(prev => (prev === images.length - 1 ? 0 : prev + 1));

  return (
    <section className="px-4 md:px-0 mt-20 mb-10 flex flex-col items-center">
      <h3 className="text-2xl font-semibold text-[#2D3D53] mb-8 text-center">
        Nos clientes adorent... et nous aussi !!
      </h3>
      <div className="w-full max-w-6xl">
        <Swiper
          modules={[EffectCoverflow, Autoplay]}
          effect="coverflow"
          grabCursor={true}
          centeredSlides={true}
          slidesPerView={window.innerWidth < 768 ? 1.2 : 3}
          coverflowEffect={{
            rotate: 0,
            stretch: 0,
            depth: 60,
            modifier: 2.5,
            slideShadows: false,
          }}
          loop
          autoplay={{
            delay: 3500,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
          }}
          className="gallerySwiper"
        >
          {images.map((img, i) => (
            <SwiperSlide key={i} className="flex justify-center">
              <button
                className="focus:outline-none"
                onClick={() => openModal(i)}
                aria-label={`Agrandir ${img.alt}`}
              >
                <Image
                  src={img.src}
                  alt={img.alt}
                  width={760}
                  height={640}
                  className="rounded-2xl object-cover shadow-xl border-2 border-white"
                  style={{ maxHeight: 640, width: "auto", height: "auto" }}
                />
              </button>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>

      {/* MODALE NAVIGABLE */}
      {modalOpen && (
        <div className="fixed z-50 inset-0 bg-black/60 flex items-center justify-center" onClick={closeModal}>
          <div
            className="bg-white rounded-3xl p-4 max-w-2xl w-full flex flex-col items-center relative"
            onClick={e => e.stopPropagation()}
          >
            <button
              className="absolute top-2 right-3 text-3xl text-[#2178aa] hover:text-[#C97A44] font-bold"
              onClick={closeModal}
              aria-label="Fermer"
            >
              ×
            </button>
            <div className="flex items-center justify-center w-full gap-6">
              <button
                onClick={prevImage}
                className="text-3xl text-[#7CB9E8] hover:text-[#2178aa] font-bold px-2"
                aria-label="Image précédente"
              >
                ‹
              </button>
              <Image
                src={images[modalIndex].src}
                alt={images[modalIndex].alt}
                width={500}
                height={400}
                className="rounded-xl object-cover"
                style={{ maxHeight: 420, width: "auto", height: "auto" }}
              />
              <button
                onClick={nextImage}
                className="text-3xl text-[#7CB9E8] hover:text-[#2178aa] font-bold px-2"
                aria-label="Image suivante"
              >
                ›
              </button>
            </div>
            <div className="text-[#2D3D53] text-base mt-2">{images[modalIndex].alt}</div>
          </div>
        </div>
      )}
    </section>
  );
}
