'use client';

import { useState } from 'react';
import { GalleryItem } from '@/lib/hbfc-data';
import { Image as ImageIcon, Sparkles, X, MapPin, ZoomIn } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';

interface GallerySectionProps {
  gallery: GalleryItem[];
}

export function GallerySection({ gallery }: GallerySectionProps) {
  const [activeTab, setActiveTab] = useState<string>('all');
  const [previewItem, setPreviewItem] = useState<GalleryItem | null>(null);

  const tabs = [
    { id: 'all', label: 'All Activities' },
    { id: 'walkathon', label: 'Walkathons' },
    { id: 'expedition', label: 'OMR Expeditions' },
    { id: 'fitness', label: 'Aerofit & Workouts' },
    { id: 'community', label: 'Community Outreach' },
  ];

  const filteredItems =
    activeTab === 'all'
      ? gallery
      : gallery.filter((item) => item.category === activeTab);

  return (
    <section id="gallery" className="py-10 sm:py-16 md:py-20 relative bg-white border-t border-neutral-200 overflow-hidden">
      <div className="max-w-7xl mx-auto px-3.5 sm:px-6 lg:px-8">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 25 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="flex flex-col md:flex-row md:items-end justify-between mb-8 sm:mb-12 gap-4 sm:gap-6"
        >
          <div>
            <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-800 text-[10px] sm:text-xs font-bold uppercase tracking-widest mb-2.5">
              <ImageIcon className="w-3 h-3 text-amber-600" />
              <span>Moments in Motion</span>
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-black text-neutral-900 uppercase tracking-tight">
              HBFC Gallery
            </h2>
            <p className="text-neutral-600 text-xs sm:text-sm mt-1">
              Visual snapshots of our walks, mountain climbs, community outreaches, and fraternity.
            </p>
          </div>

          {/* Filter tabs */}
          <div className="flex flex-wrap items-center gap-1 bg-neutral-100 p-1 rounded-xl border border-neutral-200">
            {tabs.map((tab) => (
              <motion.button
                whileHover={{ scale: 1.03 }}
                whileTap={{ scale: 0.97 }}
                key={tab.id}
                id={`gallery-tab-${tab.id}`}
                onClick={() => setActiveTab(tab.id)}
                className={`px-2.5 py-1 rounded-lg text-[10px] sm:text-xs font-bold uppercase tracking-wider transition-all cursor-pointer ${
                  activeTab === tab.id
                    ? 'bg-emerald-600 text-white shadow-xs'
                    : 'text-neutral-600 hover:text-neutral-900 hover:bg-neutral-200'
                }`}
              >
                {tab.label}
              </motion.button>
            ))}
          </div>
        </motion.div>

        {/* Gallery Image Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
          {filteredItems.map((item, idx) => (
            <motion.div
              key={item.id}
              initial={{ opacity: 0, scale: 0.96 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: idx * 0.06 }}
              whileHover={{ y: -6, transition: { duration: 0.2 } }}
              onClick={() => setPreviewItem(item)}
              className="group relative rounded-2xl overflow-hidden aspect-[4/3] bg-neutral-100 border border-neutral-200 shadow-xs cursor-pointer hover:border-amber-300 hover:shadow-xl transition-all"
            >
              <img
                src={item.image}
                alt={item.title}
                className="w-full h-full object-cover group-hover:scale-105 transition-all duration-500"
              />
              {/* Gradient overlay on hover */}
              <div className="absolute inset-0 bg-gradient-to-t from-neutral-950/85 via-neutral-950/20 to-transparent opacity-70 group-hover:opacity-95 transition-opacity" />

              {/* Caption Overlay */}
              <div className="absolute bottom-4 left-4 right-4 flex items-end justify-between">
                <div>
                  <span className="text-[10px] uppercase font-bold text-amber-300 tracking-wider block mb-0.5">
                    {item.category}
                  </span>
                  <h4 className="text-sm font-bold text-white leading-snug drop-shadow-md">
                    {item.title}
                  </h4>
                  <p className="text-[11px] text-neutral-200 flex items-center gap-1 mt-1">
                    <MapPin className="w-3 h-3 text-emerald-400 shrink-0" />
                    <span className="truncate">{item.location}</span>
                  </p>
                </div>

                <div className="p-2 rounded-xl bg-white/90 text-emerald-800 border border-neutral-200 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm">
                  <ZoomIn className="w-4 h-4" />
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        {/* Lightbox Modal */}
        <AnimatePresence>
          {previewItem && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              id="gallery-lightbox-modal"
              className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/85 backdrop-blur-md"
              onClick={() => setPreviewItem(null)}
            >
              <motion.div
                initial={{ opacity: 0, scale: 0.95, y: 20 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.95, y: 20 }}
                className="relative max-w-4xl w-full bg-white border border-neutral-200 rounded-3xl overflow-hidden shadow-2xl"
                onClick={(e) => e.stopPropagation()}
              >
                <div className="relative max-h-[75vh] overflow-hidden bg-neutral-100 flex items-center justify-center">
                  <img
                    src={previewItem.image}
                    alt={previewItem.title}
                    className="max-h-[75vh] w-full object-contain"
                  />
                  <button
                    onClick={() => setPreviewItem(null)}
                    className="absolute top-4 right-4 p-2 rounded-full bg-white/90 text-neutral-800 hover:bg-white transition-colors shadow-sm cursor-pointer"
                  >
                    <X className="w-5 h-5" />
                  </button>
                </div>

                <div className="p-5 sm:p-6 bg-white flex items-center justify-between border-t border-neutral-200">
                  <div>
                    <span className="text-xs uppercase font-bold text-emerald-700 tracking-wider block">
                      {previewItem.category}
                    </span>
                    <h3 className="text-lg font-bold text-neutral-900">{previewItem.title}</h3>
                    <p className="text-xs text-neutral-500 flex items-center gap-1.5 mt-1">
                      <MapPin className="w-3.5 h-3.5 text-amber-600" />
                      <span>{previewItem.location}</span>
                    </p>
                  </div>

                  <button
                    onClick={() => setPreviewItem(null)}
                    className="px-4 py-2 rounded-xl bg-neutral-100 hover:bg-neutral-200 text-xs font-bold uppercase tracking-wider text-neutral-800 transition-colors cursor-pointer"
                  >
                    Close
                  </button>
                </div>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </section>
  );
}

export default GallerySection;