"use client";
import { useEffect, useRef, useState } from "react";
import imagesLoaded from "imagesloaded";
import Isotope from "isotope-layout";
import Link from "next/link";
import { GalleryImages, HomeGalleryImages } from "../../../utils/constant.utils";

const GallerySection = () => {
  const isotope = useRef(null);
  const [active, setActive] = useState(2);
  const [isOpen, setIsOpen] = useState(false);
  const [imageSrc, setImageSrc] = useState("");

  useEffect(() => {
    const imgLoad = imagesLoaded(document.querySelectorAll(".image-container"));

    imgLoad.on("always", () => {
      const container = document.querySelector(".filter-container");

      if (container) {
        isotope.current = new Isotope(container, {
          itemSelector: ".filter-item",
          layoutMode: "masonry",
          percentPosition: true,
        });

        setTimeout(() => {
          if (isotope.current) {
            isotope.current.arrange({ filter: ".pro5" });
          }
        }, 150);
      }
    });

    return () => {
      if (isotope.current) {
        isotope.current.destroy();
        isotope.current = null;
      }
    };
  }, []);

  const handleFilterKeyChange = (key, index) => {
    setActive(index);
    if (isotope.current) {
      isotope.current.arrange({ filter: key });
    }
  };

  const openLightbox = (src) => {
    setImageSrc(src);
    setIsOpen(true);
  };

  const closeLightbox = () => {
    setIsOpen(false);
    setImageSrc("");
  };

  return (
    <div className="portfolio-area-1 space-bottom">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-5">
            <div className="title-area text-center">
              <h2 className="sec-title">Gallery</h2>
            </div>
          </div>

          <div className="col-12">
            <div className="portfolio-tab-1 mb-60">
              <div className="filter-menu-active text-center">
                <button
                  className={`${active === 1 ? "active" : ""} btn style-border3`}
                  type="button"
                  onClick={() => handleFilterKeyChange("*", 1)}
                >
                  All
                </button>
                <button
                  className={`${active === 2 ? "active" : ""} btn style-border3`}
                  type="button"
                  onClick={() => handleFilterKeyChange(".pro5", 2)}
                >
                  2025
                </button>
                <button
                  className={`${active === 3 ? "active" : ""} btn style-border3`}
                  type="button"
                  onClick={() => handleFilterKeyChange(".pro4", 3)}
                >
                  2024
                </button>
                <button
                  className={`${active === 4 ? "active" : ""} btn style-border3`}
                  type="button"
                  onClick={() => handleFilterKeyChange(".pro3", 4)}
                >
                  2020
                </button>
                <button
                  className={`${active === 5 ? "active" : ""} btn style-border3`}
                  type="button"
                  onClick={() => handleFilterKeyChange(".pro2", 5)}
                >
                  2010
                </button>
                <button
                  className={`${active === 6 ? "active" : ""} btn style-border3`}
                  type="button"
                  onClick={() => handleFilterKeyChange(".pro1", 6)}
                >
                  2003
                </button>
              </div>
            </div>
          </div>
        </div>

        <div className="row gy-30 gx-30 filter-container">
          {HomeGalleryImages.map((image, index) => (
            <div
              key={index}
              className={`col-lg-4 col-md-4 col-12 filter-item ${image.category}`}
            >
              <div className="portfolio-card image-container">
                <div className="portfolio-card-thumb">
                  <img
                    src={image.src}
                    alt="Gallery"
                    onClick={() => openLightbox(image.src)}
                    style={{ cursor: "pointer" }}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="d-flex justify-content-center">
        <div className="btn-wrap mt-20">
          <Link href="/gallery" className="btn style2 mt-xl-0 mt-20">
            Read More <i className="fas fa-arrow-right ms-2" />
          </Link>
        </div>
      </div>

      {isOpen && (
        <div className="custom-modal_popup">
          <span className="close-button" onClick={closeLightbox}>
            &times;
          </span>
          <img src={imageSrc} alt="Fullsize" />
        </div>
      )}
    </div>
  );
};

export default GallerySection;
