import React, { useState } from 'react';
import { REAL_YACHT_PHOTOS } from '../data/yachtData';
import { 
  Images, 
  Maximize2, 
  X, 
  ChevronLeft, 
  ChevronRight
} from 'lucide-react';

interface GalleryItem {
  id: string;
  title: string;
  category: 'aerial' | 'interior' | 'deck' | 'water';
  categoryLabel: string;
  image: string;
  caption: string;
}

export const YachtGallery: React.FC = () => {
  const [activeCategory, setActiveCategory] = useState<string>('all');
  const [selectedPhotoIndex, setSelectedPhotoIndex] = useState<number | null>(null);

  const galleryItems: GalleryItem[] = [
    {
      id: "g-1",
      title: "Starboard Cove Anchorage",
      category: "aerial",
      categoryLabel: "Aerial Perspectives",
      image: REAL_YACHT_PHOTOS.heroCove,
      caption: "Entourage anchored in Hong Kong's turquoise cove with all 3 decks and aft sea pool deployed."
    },
    {
      id: "g-2",
      title: "Saloon Backlit Marble Bar",
      category: "interior",
      categoryLabel: "Saloon & Bar",
      image: REAL_YACHT_PHOTOS.saloonMarbleBar,
      caption: "The illuminated curved marble bar with 5 brass stools, royal blue seating and climate control."
    },
    {
      id: "g-3",
      title: "Aft Solid Teak Dining Table",
      category: "deck",
      categoryLabel: "Decks & Dining",
      image: REAL_YACHT_PHOTOS.aftDiningTable,
      caption: "Solid 10-seater teak dining table set with chilled champagne, custom flutes and marina vistas."
    },
    {
      id: "g-4",
      title: "Flybridge Sky Lounge",
      category: "deck",
      categoryLabel: "Decks & Dining",
      image: REAL_YACHT_PHOTOS.flybridgeLounge,
      caption: "Upper sky deck with navy blue canopy, turquoise daybeds, elevated helm and panoramic sky."
    },
    {
      id: "g-5",
      title: "Bow Foredeck Cocktail Lounge",
      category: "deck",
      categoryLabel: "Decks & Dining",
      image: REAL_YACHT_PHOTOS.bowLoungeClose,
      caption: "Signature turquoise banquettes, saffron velvet pillows, and fluted teak cocktail cubes."
    },
    {
      id: "g-6",
      title: "Overhead Drone Cruising",
      category: "aerial",
      categoryLabel: "Aerial Perspectives",
      image: REAL_YACHT_PHOTOS.aerialDeepOcean,
      caption: "High aerial view of Entourage cruising offshore with guests in the floating sea pool."
    },
    {
      id: "g-7",
      title: "Main Saloon Walkthrough to Aft Deck",
      category: "interior",
      categoryLabel: "Saloon & Bar",
      image: REAL_YACHT_PHOTOS.saloonViewAft,
      caption: "Air-conditioned indoor saloon looking through floor-to-ceiling sliding glass to the aft deck."
    },
    {
      id: "g-8",
      title: "Vertical Birds-Eye View",
      category: "aerial",
      categoryLabel: "Aerial Perspectives",
      image: REAL_YACHT_PHOTOS.aerialTopDown,
      caption: "Direct overhead aerial capturing the navy bimini, teak foredeck, and floating aft sea pool."
    },
    {
      id: "g-9",
      title: "Bow Foredeck Layout Overview",
      category: "deck",
      categoryLabel: "Decks & Dining",
      image: REAL_YACHT_PHOTOS.bowLoungeOverview,
      caption: "Overhead look at the spacious bow foredeck with dual banquettes, sunbeds and cocktail tables."
    },
    {
      id: "g-10",
      title: "Victoria Harbour & Skyline Horizon",
      category: "aerial",
      categoryLabel: "Aerial Perspectives",
      image: REAL_YACHT_PHOTOS.bowSkyline,
      caption: "Bow sun lounge facing the iconic skyline towers and Victoria Harbour waterways."
    },
    {
      id: "g-11",
      title: "Main Saloon Banquettes & Panoramas",
      category: "interior",
      categoryLabel: "Saloon & Bar",
      image: REAL_YACHT_PHOTOS.saloonInterior,
      caption: "Panoramic saloon interior with plush cobalt blue sofas, saffron pillows and natural light."
    },
    {
      id: "g-12",
      title: "Side Profile Aerial & Tender",
      category: "aerial",
      categoryLabel: "Aerial Perspectives",
      image: REAL_YACHT_PHOTOS.aerialSideProfile,
      caption: "Profile aerial showing the 75ft hull lines, stern swimming platform, and tender boat."
    }
  ];

  const filteredItems = activeCategory === 'all'
    ? galleryItems
    : galleryItems.filter(item => item.category === activeCategory);

  const openLightbox = (index: number) => {
    setSelectedPhotoIndex(index);
  };

  const closeLightbox = () => {
    setSelectedPhotoIndex(null);
  };

  const nextPhoto = () => {
    if (selectedPhotoIndex !== null) {
      setSelectedPhotoIndex((selectedPhotoIndex + 1) % filteredItems.length);
    }
  };

  const prevPhoto = () => {
    if (selectedPhotoIndex !== null) {
      setSelectedPhotoIndex((selectedPhotoIndex - 1 + filteredItems.length) % filteredItems.length);
    }
  };

  return (
    <section id="gallery" className="py-24 bg-[#1e2a38] border-t border-[#517e8a]/20 relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Section Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
          <div className="space-y-3 max-w-2xl">
            <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-[#2b3b4e] border border-[#517e8a]/30 text-[#517e8a] text-xs tracking-wider uppercase font-mono">
              <Images className="w-3.5 h-3.5 text-[#e17f52]" />
              <span>Authentic Yacht Photography</span>
            </div>
            <h2 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
              Aboard Entourage <span className="text-[#e17f52] font-serif-luxury font-normal">in Detail</span>
            </h2>
            <p className="text-slate-300 text-sm sm:text-base font-light leading-relaxed">
              Explore the real spaces, custom teak finishes, illuminated marble bar, and expansive multideck layouts of Hong Kong's flagship 22m luxury charter yacht.
            </p>
          </div>

          {/* Filter Pills */}
          <div className="flex flex-wrap gap-2">
            {[
              { id: 'all', label: 'All Spaces (12)' },
              { id: 'deck', label: 'Decks & Dining' },
              { id: 'interior', label: 'Saloon & Bar' },
              { id: 'aerial', label: 'Aerials & Cove' },
            ].map(tab => (
              <button
                key={tab.id}
                onClick={() => setActiveCategory(tab.id)}
                className={`px-4 py-2 rounded-xl text-xs font-medium tracking-wider uppercase transition-colors ${
                  activeCategory === tab.id
                    ? 'bg-[#e17f52] text-white font-bold shadow-md shadow-[#e17f52]/20'
                    : 'bg-[#2b3b4e] text-slate-300 hover:text-white border border-[#517e8a]/30 hover:border-[#517e8a]/60'
                }`}
              >
                {tab.label}
              </button>
            ))}
          </div>
        </div>

        {/* Bento Photo Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredItems.map((item, idx) => (
            <div
              key={item.id}
              onClick={() => openLightbox(idx)}
              className="group relative rounded-2xl overflow-hidden bg-[#2b3b4e] border border-[#517e8a]/30 hover:border-[#e17f52]/60 transition-all duration-300 cursor-pointer shadow-lg aspect-[4/3]"
            >
              <img
                src={item.image}
                alt={item.title}
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 filter brightness-95"
              />
              
              {/* Subtle Overlay Info */}
              <div className="absolute inset-0 bg-gradient-to-t from-[#1e2a38] via-[#1e2a38]/30 to-transparent opacity-80 group-hover:opacity-95 transition-opacity flex flex-col justify-end p-5">
                <div className="flex items-center justify-between">
                  <div>
                    <span className="text-[10px] font-mono uppercase tracking-widest text-[#e17f52] block mb-1">
                      {item.categoryLabel}
                    </span>
                    <h3 className="text-base font-bold text-white group-hover:text-[#e17f52] transition-colors">
                      {item.title}
                    </h3>
                  </div>
                  <div className="w-8 h-8 rounded-full bg-[#2b3b4e]/90 border border-[#517e8a]/40 flex items-center justify-center text-white group-hover:bg-[#e17f52] group-hover:text-white transition-colors">
                    <Maximize2 className="w-3.5 h-3.5" />
                  </div>
                </div>
                <p className="text-xs text-slate-300 line-clamp-1 mt-1 font-light">
                  {item.caption}
                </p>
              </div>
            </div>
          ))}
        </div>

      </div>

      {/* Fullscreen Lightbox Modal */}
      {selectedPhotoIndex !== null && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/95 backdrop-blur-xl p-4">
          <div className="relative max-w-5xl w-full max-h-[90vh] flex flex-col justify-between">
            
            {/* Top Bar */}
            <div className="flex items-center justify-between pb-4 text-white">
              <div>
                <span className="text-[11px] font-mono text-[#e17f52] uppercase tracking-wider block">
                  {filteredItems[selectedPhotoIndex].categoryLabel} • {selectedPhotoIndex + 1} of {filteredItems.length}
                </span>
                <h3 className="text-lg font-bold">
                  {filteredItems[selectedPhotoIndex].title}
                </h3>
              </div>

              <button
                onClick={closeLightbox}
                className="w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Main Image Container */}
            <div className="relative rounded-2xl overflow-hidden bg-[#2b3b4e] border border-[#517e8a]/40 max-h-[70vh] flex items-center justify-center">
              <img
                src={filteredItems[selectedPhotoIndex].image}
                alt={filteredItems[selectedPhotoIndex].title}
                className="max-h-[70vh] w-auto object-contain"
              />

              {/* Prev / Next Controls */}
              <button
                onClick={(e) => { e.stopPropagation(); prevPhoto(); }}
                className="absolute left-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-[#1e2a38]/80 border border-[#517e8a]/40 text-white hover:bg-[#2b3b4e] flex items-center justify-center"
              >
                <ChevronLeft className="w-6 h-6" />
              </button>

              <button
                onClick={(e) => { e.stopPropagation(); nextPhoto(); }}
                className="absolute right-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-[#1e2a38]/80 border border-[#517e8a]/40 text-white hover:bg-[#2b3b4e] flex items-center justify-center"
              >
                <ChevronRight className="w-6 h-6" />
              </button>
            </div>

            {/* Bottom Caption */}
            <div className="pt-4 text-center">
              <p className="text-sm text-slate-300 font-light">
                {filteredItems[selectedPhotoIndex].caption}
              </p>
            </div>

          </div>
        </div>
      )}
    </section>
  );
};