"use client";

import { useState } from "react";

export default function LightboxGallery({ images }: { images: string[] }) {
  const [isOpen, setIsOpen] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);

  const openLightbox = (index: number) => {
    setCurrentIndex(index);
    setIsOpen(true);
    document.body.style.overflow = "hidden"; // Prevent scrolling
  };

  const closeLightbox = () => {
    setIsOpen(false);
    document.body.style.overflow = "auto";
  };

  const nextImage = (e: React.MouseEvent) => {
    e.stopPropagation();
    setCurrentIndex((prev) => (prev + 1) % images.length);
  };

  const prevImage = (e: React.MouseEvent) => {
    e.stopPropagation();
    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
  };

  return (
    <>
      {/* Gallery Grid */}
      <div 
        className="gallery-grid"
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
          gridAutoRows: "250px",
          gap: "1.5rem",
          gridAutoFlow: "dense"
        }}
      >
        {images.map((src, idx) => {
          // Make some items span 2 rows or 2 columns for a masonry effect
          let gridColumn = "span 1";
          let gridRow = "span 1";
          if (idx === 0 || idx === 5) {
            gridColumn = "span 2";
            gridRow = "span 2";
          } else if (idx === 2 || idx === 7) {
            gridRow = "span 2";
          } else if (idx === 3 || idx === 8) {
            gridColumn = "span 2";
          }

          return (
            <div 
              key={idx} 
              className="hover-zoom image-overlay animate-fade-in-up" 
              style={{ 
                gridColumn,
                gridRow,
                cursor: "pointer", 
                animationDelay: `${(idx % 5) * 0.1}s`,
                borderRadius: "0.75rem",
                overflow: "hidden",
                boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
              }}
              onClick={() => openLightbox(idx)}
            >
              <img 
                src={src} 
                alt={`Gallery Image ${idx + 1}`} 
                style={{ width: "100%", height: "100%", objectFit: "cover" }} 
              />
            </div>
          );
        })}
      </div>

      {/* Lightbox Modal */}
      {isOpen && (
        <div 
          style={{
            position: "fixed",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: "rgba(0, 0, 0, 0.9)",
            zIndex: 9999,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            backdropFilter: "blur(5px)"
          }}
          onClick={closeLightbox}
        >
          {/* Close Button */}
          <button 
            onClick={closeLightbox}
            style={{
              position: "absolute",
              top: "2rem",
              right: "2rem",
              background: "transparent",
              color: "white",
              border: "none",
              fontSize: "3rem",
              cursor: "pointer",
              zIndex: 10000,
            }}
          >
            &times;
          </button>

          {/* Prev Arrow */}
          <button 
            onClick={prevImage}
            style={{
              position: "absolute",
              left: "2rem",
              background: "rgba(255, 255, 255, 0.1)",
              color: "white",
              border: "none",
              borderRadius: "50%",
              width: "50px",
              height: "50px",
              fontSize: "2rem",
              cursor: "pointer",
              zIndex: 10000,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            &#10094;
          </button>

          {/* Main Image */}
          <img 
            src={images[currentIndex]} 
            alt={`Enlarged Image ${currentIndex + 1}`} 
            style={{ 
              maxWidth: "90%", 
              maxHeight: "90vh", 
              objectFit: "contain",
              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
            }} 
            onClick={(e) => e.stopPropagation()} // Prevent clicking image from closing
          />

          {/* Next Arrow */}
          <button 
            onClick={nextImage}
            style={{
              position: "absolute",
              right: "2rem",
              background: "rgba(255, 255, 255, 0.1)",
              color: "white",
              border: "none",
              borderRadius: "50%",
              width: "50px",
              height: "50px",
              fontSize: "2rem",
              cursor: "pointer",
              zIndex: 10000,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            &#10095;
          </button>
        </div>
      )}
    </>
  );
}