"use client";

import { useState } from "react";
import Lightbox from "yet-another-react-lightbox";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
import Title from "@/components/atoms/Title";
import ParallaxImage from "@/components/effects/ParallaxImage";

const images = [
  "images/property-details/portfolio/pf-1.jpg",
  "images/property-details/portfolio/pf-2.jpg",
  "images/property-details/portfolio/pf-3.jpg",
  "images/property-details/portfolio/pf-4.jpg",
  "images/property-details/portfolio/pf-5.jpg",
  "images/property-details/portfolio/pf-6.jpg",
  "images/property-details/portfolio/pf-3.jpg",
  "images/property-details/portfolio/pf-5.jpg",
];

interface MasonryGalleryProps {
  title?: string;
}

const MasonryGallery = ({ title = "Visual Theater" }: MasonryGalleryProps) => {
  const [open, setOpen] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);

  // Prepare slides for the lightbox.
  const slides = images.map((src) => ({ src }));

  return (
    <section className="relative py-8 md:py-12 lg:py-16 xl:py-20 2xl:py-24">
      <div className="text-center pb-10 md:pb-16 lg:pb-28 xl:pb-0">
        <Title text={title} Tag={"h3"} className="lg:text-[80px]" />
      </div>
      <div className="relative w-full xl:h-[135dvh] 2xl:h-[150dvh] 2xl:min-[1921px]:h-[50rem] pb-20 md:pb-40 xl:pb-0  xl:pt-48 2xl:pt-56 px-6">
        <div className="max-w-[1400px] mx-auto grid grid-cols-4 gap-2 md:gap-4 xl:gap-6">
          {/* Column 1 (base / lowest) */}
          <div className="space-y-0 translate-y-[3%] md:translate-y-[5%] xl:translate-y-[7%] transition-transform duration-700">
            {images.slice(0, 2).map((src, i) => (
              <div
                key={`col1-${i}`}
                className="aspect-[3/4] w-full overflow-hidden cursor-pointer"
                onClick={() => {
                  setCurrentIndex(0 + i);
                  setOpen(true);
                }}
              >
                <ParallaxImage src={src} alt={`gallery-col1-${i}`} />
              </div>
            ))}
          </div>

          {/* Column 2 (slightly higher) */}
          <div className="space-y-0 -translate-y-[8%] md:-translate-y-[10%] xl:-translate-y-[15%] transition-transform duration-700">
            {images.slice(2, 4).map((src, i) => (
              <div
                key={`col2-${i}`}
                className="aspect-[3/4] w-full overflow-hidden cursor-pointer"
                onClick={() => {
                  setCurrentIndex(2 + i);
                  setOpen(true);
                }}
              >
                <ParallaxImage src={src} alt={`gallery-col2-${i}`} />
              </div>
            ))}
          </div>

          {/* Column 3 (slightly lower than column 2) */}
          <div className="space-y-0 -translate-y-[2%] md:-translate-y-[2%] xl:-translate-y-[3%] transition-transform duration-700">
            {images.slice(4, 6).map((src, i) => (
              <div
                key={`col3-${i}`}
                className="aspect-[3/4] w-full overflow-hidden cursor-pointer"
                onClick={() => {
                  setCurrentIndex(4 + i);
                  setOpen(true);
                }}
              >
                <ParallaxImage src={src} alt={`gallery-col3-${i}`} />
              </div>
            ))}
          </div>

          {/* Column 4 (lowest again — same baseline as col1) */}
          <div className="space-y-0 translate-y-[5%] md:translate-y-[8%] xl:translate-y-[12%] transition-transform duration-700">
            {images.slice(6, 8).map((src, i) => (
              <div
                key={`col4-${i}`}
                className="aspect-[3/4] w-full overflow-hidden cursor-pointer"
                onClick={() => {
                  setCurrentIndex(6 + i);
                  setOpen(true);
                }}
              >
                <ParallaxImage src={src} alt={`gallery-col4-${i}`} />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Lightbox */}
      <Lightbox
        open={open}
        close={() => setOpen(false)}
        index={currentIndex}
        slides={slides}
        plugins={[Zoom, Fullscreen]}
      />
    </section>
  );
};

export default MasonryGallery;