import React, { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const images = {
  exterior: [
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext1.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext2.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext3.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext4.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext5.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext6.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext7.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext8.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext9.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext10.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext11.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext12.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext13.webp',
  ],
  interior: [
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int1.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int2.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int3.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int4.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int5.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int6.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int7.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int8.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int9.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int10.webp',
    'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int11.webp',
  ]
};

export default function Gallery() {
  const [activeTab, setActiveTab] = useState<'exterior' | 'interior'>('exterior');
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleTabChange = (tab: 'exterior' | 'interior') => {
    setActiveTab(tab);
    setCurrentIndex(0);
  };

  const nextSlide = () => {
    setCurrentIndex((prev) => (prev + 1) % images[activeTab].length);
  };

  const prevSlide = () => {
    setCurrentIndex((prev) => (prev - 1 + images[activeTab].length) % images[activeTab].length);
  };

  return (
    <section id="gallery" className="py-24 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-4xl md:text-6xl font-serif mb-6 text-gray-900">Gallery</h2>
          <p className="text-gray-500 text-xl font-light">
            Elevated living in Rahatani, Pune — where comfort, space, and luxury meet effortlessly.
          </p>
        </div>

        <div className="flex justify-center gap-6 mb-12">
          <button 
            onClick={() => handleTabChange('exterior')}
            className={`px-10 py-3.5 rounded-full font-medium transition-all duration-300 cursor-pointer ${
              activeTab === 'exterior' ? 'bg-primary text-white shadow-lg shadow-primary/20 scale-105' : 'bg-white text-gray-500 hover:text-gray-900 hover:bg-gray-100 border border-gray-200'
            }`}
          >
            Exterior
          </button>
          <button 
            onClick={() => handleTabChange('interior')}
            className={`px-10 py-3.5 rounded-full font-medium transition-all duration-300 cursor-pointer ${
              activeTab === 'interior' ? 'bg-primary text-white shadow-lg shadow-primary/20 scale-105' : 'bg-white text-gray-500 hover:text-gray-900 hover:bg-gray-100 border border-gray-200'
            }`}
          >
            Interior
          </button>
        </div>

        <div className="max-w-5xl mx-auto relative">
          {/* Main Carousel Image */}
          <div className="relative w-full aspect-[16/9] md:aspect-[21/9] rounded-3xl overflow-hidden shadow-2xl border-4 border-white bg-black mb-6">
            <AnimatePresence mode="wait">
              <motion.img
                key={`${activeTab}-${currentIndex}`}
                src={images[activeTab][currentIndex]}
                alt={`Gallery ${activeTab} ${currentIndex + 1}`}
                initial={{ opacity: 0, x: 50 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -50 }}
                transition={{ duration: 0.4 }}
                className="w-full h-full object-contain"
              />
            </AnimatePresence>
            <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
          </div>

          {/* Navigation Arrows */}
          <button 
            onClick={prevSlide}
            className="absolute top-[40%] md:top-[45%] -left-4 md:-left-8 bg-white text-primary p-3 rounded-full shadow-xl hover:bg-primary hover:text-white transition-colors z-10"
          >
            <ChevronLeft size={24} />
          </button>
          <button 
            onClick={nextSlide}
            className="absolute top-[40%] md:top-[45%] -right-4 md:-right-8 bg-white text-primary p-3 rounded-full shadow-xl hover:bg-primary hover:text-white transition-colors z-10"
          >
            <ChevronRight size={24} />
          </button>

          {/* Thumbnails */}
          <div className="flex gap-4 overflow-x-auto pb-4 snap-x hide-scrollbar justify-center md:justify-start">
            {images[activeTab].map((src, idx) => (
              <button
                key={idx}
                onClick={() => setCurrentIndex(idx)}
                className={`relative shrink-0 w-24 md:w-32 aspect-[4/3] rounded-xl overflow-hidden snap-center transition-all duration-300 ${
                  currentIndex === idx ? 'ring-4 ring-primary scale-105' : 'opacity-60 hover:opacity-100'
                }`}
              >
                <img 
                  src={src} 
                  alt={`Thumbnail ${idx + 1}`}
                  className="w-full h-full object-cover"
                />
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
