"use client"
import { useState } from 'react';
import { ArrowUpRight, X, ChevronLeft, ChevronRight } from 'lucide-react';
import Image, { type StaticImageData } from 'next/image';

import gallaryImg1 from '../../public/assets/gallary/gallary8.jpg'
import gallaryImg2 from '../../public/assets/gallary/gallery13.jpg'
import gallaryImg3 from '../../public/assets/gallary/Chairmain-Sir and Me.png'
import gallaryImg4 from '../../public/assets/gallary/gallary2.jpg'
import gallaryImg5 from '../../public/assets/gallary/gallary3.jpg'
import gallaryImg6 from '../../public/assets/gallary/gallery35.jpeg'
import gallaryImg7 from '../../public/assets/gallary/gallery36.jpeg'

interface SelectedImageType {
  image: StaticImageData;
  title: string;
}

const GallerySection = () => {
  const galleryItems = [
    {
      id: 1,
      image: gallaryImg6,
      title: "SQ Group & Haier-LONGi MoU",
      description: "MoU Signing Ceremony Between SQ Group with Haier Energy & LONGI Solar Technology Co. Ltd.",
      featured: true,
    },
    {
      id: 2,
      image: gallaryImg7,
      title: "SQ Group & Haier-LONGi MoU",
      description: "MoU Signing Ceremony Between SQ Group with Haier Energy & LONGI Solar Technology Co. Ltd.",
      featured: true,
    },
    {
      id: 3,
      image: gallaryImg1,
      title: "Collaborative Workspace",
      description: "Team collaboration and creative solutions",
      featured: true,
    },
      {
      id: 4,
      image: gallaryImg2,
      title: "Annual Business Conferance 2026-27",
      description: "Team collaboration SQ Electricals LTD",
      featured: false,
    },
    {
      id: 5,
      image: gallaryImg3,
      title: 'Website Launching Day',
      description: 'Celebrating the launch of our new SQ Group Website',
      featured: false,
    },
    {
      id: 6,
      image: gallaryImg4,
      title: "Professional Setting",
      description: "Focused productivity spaces",
      featured: false,
    },
    {
      id: 7,
      image: gallaryImg5,
      title: "Team Collaboration",
      description: "Building together, growing together",
      featured: true,
    }
  ];

  const [hoveredCard, setHoveredCard] = useState<number | null>(null);
  const [selectedImage, setSelectedImage] = useState<SelectedImageType | null>(null);
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);

  const openModal = (index: number) => {
    setSelectedIndex(index);
    setSelectedImage(galleryItems[index]);
  };

  const closeModal = () => {
    setSelectedIndex(null);
    setSelectedImage(null);
  };

  const showNextImage = () => {
    if (selectedIndex === null) return;
    const nextIndex = (selectedIndex + 1) % galleryItems.length;
    setSelectedIndex(nextIndex);
    setSelectedImage(galleryItems[nextIndex]);
  };

  const showPreviousImage = () => {
    if (selectedIndex === null) return;
    const prevIndex = (selectedIndex - 1 + galleryItems.length) % galleryItems.length;
    setSelectedIndex(prevIndex);
    setSelectedImage(galleryItems[prevIndex]);
  };

  return (
    <div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-[280px]">
          {galleryItems.map((item, index) => (
            <div
              key={item.id}
              className={index === 0 || index === 4 ? 'row-span-2' : ''}
              onMouseEnter={() => setHoveredCard(item.id)}
              onMouseLeave={() => setHoveredCard(null)}
            >
              <div
                className="relative overflow-hidden rounded-lg cursor-pointer group h-full"
                onClick={() => openModal(index)}
              >
                <Image
                  src={item.image}
                  alt={item.title}
                  width={800}
                  height={800}
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                />

                {item.featured && hoveredCard !== item.id && (
                  <div className="absolute top-4 left-4 bg-orange-500 text-white px-4 py-2 rounded-full text-sm font-medium">
                    Featured
                  </div>
                )}

                <div
                  className={`absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity duration-300 ${
                    hoveredCard === item.id ? 'opacity-100' : 'opacity-0'
                  }`}
                >
                  <div className="absolute bottom-0 left-0 right-0 p-6 text-white transform transition-transform duration-300">
                    <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
                    <p className="text-sm text-white/80 mb-4">{item.description}</p>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">View Project</span>
                      <div className="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center">
                        <ArrowUpRight className="w-5 h-5" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        
      {selectedImage && (
        <div
          className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4 backdrop-blur-sm  overflow-scroll no-scrollbar"
          onClick={closeModal}
        >
          <div className='absolute top-38'>
              <button
                className="absolute lg:top-5 lg:right-5 top-2 right-2 flex items-center gap-2 rounded-full bg-black/60 px-4 lg:py-2 py-1 text-white hover:bg-black transition-colors z-50 cursor-pointer"
                onClick={closeModal}
              >
                <X size={24} />
                <span className="text-sm font-medium">Close</span>
              </button>

              <div
                className="relative max-w-7xl w-full flex flex-col items-center"
                onClick={(e) => e.stopPropagation()}
              >
                <button
                  type="button"
                  className="absolute left-4 top-1/2 -translate-y-1/2 z-50 rounded-full bg-black/60 text-white p-3 hover:bg-black cursor-pointer"
                  onClick={showPreviousImage}
                >
                  <ChevronLeft size={28} />
                </button>

                <Image
                  src={selectedImage.image}
                  alt={selectedImage.title}
                  width={2000}
                  height={1500}
                  priority
                  className="max-h-[90vh] w-auto object-contain rounded-2xl shadow-2xl"
                />

                <button
                  type="button"
                  className="absolute right-4 top-1/2 -translate-y-1/2 z-50 rounded-full bg-black/60 text-white p-3 hover:bg-black cursor-pointer"
                  onClick={showNextImage}
                >
                  <ChevronRight size={28} />
                </button>

                <h2 className="text-white text-xl lg:text-2xl font-semibold mt-5 text-center">
                  {selectedImage.title}
                </h2>
              </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default GallerySection