"use client";

import React from "react";
import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";

export interface Image {
  id: number;
  src: string;
  alt: string;
  description: string;
}

const Modal: React.FC<{
  image: Image;
  originRect: DOMRect | null;
  onClose: () => void;
}> = ({ image, originRect, onClose }) => {
  const handleBackdropClick = (
    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
  ) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  const initial = {
    x: originRect
      ? originRect.left + originRect.width / 2 - window.innerWidth / 2
      : 0,
    y: originRect
      ? originRect.top + originRect.height / 2 - window.innerHeight / 2
      : 0,
    scale: originRect ? originRect.width / window.innerWidth : 0.8,
  };

  return (
    <AnimatePresence>
      <motion.div
        className="fixed inset-0 backdrop-blur bg-black bg-opacity-50 flex items-center justify-center z-50"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        onClick={handleBackdropClick}
        onTouchEnd={handleBackdropClick}
        transition={{ duration: 0.3 }}
      >
        <motion.div
          className="relative max-w-4xl max-h-[90%] w-full h-full overflow-hidden"
          initial={initial}
          animate={{ scale: 1, x: 0, y: 0 }}
          exit={{ scale: initial.scale, x: initial.x, y: initial.y }}
          transition={{
            type: "spring",
            stiffness: 100,
            damping: 20,
            duration: 0.5,
          }}
        >
          <div className="relative w-full h-full">
            <Image
              src={image.src}
              alt={image.alt}
              layout="fill"
              objectFit="contain"
              quality={100}
              className="rounded-lg"
            />
          </div>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  );
};

const ImageGallery: React.FC<{ images: Image[] }> = ({ images }) => {
  const [selectedImage, setSelectedImage] = React.useState<Image | null>(null);
  const [originRect, setOriginRect] = React.useState<DOMRect | null>(null);
  const imageRefs = React.useRef<Map<number, HTMLDivElement>>(new Map());

  const isMobile = typeof window !== "undefined" && window.innerWidth < 640;

  const handleImageClick = (image: Image, ref: HTMLDivElement | null) => {
    if (isMobile) {
      return; // Do nothing on mobile
    }

    if (ref) {
      setOriginRect(ref.getBoundingClientRect());
    }
    setSelectedImage(image);
  };

  return (
    <div
      className={`relative w-full h-screen bg-gradient-to-br from-zinc-900 to-zinc-950 p-4 flex flex-col items-center `}
    >
      <div className="absolute inset-0 bg-[url('/path/to/noise-texture.png')] opacity-5 mix-blend-overlay"></div>
      <div className="relative grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 w-full h-full">
        {images.map((image) => (
          <motion.div
            key={image.id}
            ref={(el) => {
              if (el) {
                imageRefs.current.set(image.id, el);
              } else {
                imageRefs.current.delete(image.id);
              }
            }}
            className={`relative w-full h-64 group cursor-pointer overflow-hidden rounded-lg shadow-lg ${
              selectedImage?.id === image.id ? "opacity-0" : "opacity-100"
            } transition-opacity duration-300`}
            onClick={() =>
              handleImageClick(image, imageRefs.current.get(image.id) || null)
            }
            transition={{ duration: 0.3 }}
          >
            <Image
              src={image.src}
              alt={image.alt}
              layout="fill"
              objectFit="cover"
              quality={75}
              className="transition-opacity duration-300"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-70 transition-opacity duration-300"></div>
            <div className="absolute bottom-4 left-4 bg text-white text-lg group-hover:opacity-100 opacity-0 transition-opacity duration-300">
              <p className="font-semibold">{image.alt}</p>
              <p className=" text-sm font-normal">{image.description}</p>
            </div>
          </motion.div>
        ))}
      </div>
      {selectedImage && originRect && !isMobile && (
        <Modal
          image={selectedImage}
          originRect={originRect}
          onClose={() => setSelectedImage(null)}
        />
      )}
    </div>
  );
};

export default ImageGallery;