'use client'

import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import type { GalleryItem } from '@/types'

const CATEGORIES = ['All', 'Dinamo', 'Como', 'Croatia', 'Training'] as const

// Placeholder gradient images (will be replaced with real photos)
const galleryItems: GalleryItem[] = [
  { id: 'g1', src: '', alt: 'Martin Baturina — Dinamo Zagreb 2023', category: 'dinamo', caption: 'Zagreb, HNL 2023', width: 4, height: 3 },
  { id: 'g2', src: '', alt: 'HNL Champion celebration', category: 'dinamo', caption: 'HNL Champion 2024', width: 3, height: 4 },
  { id: 'g3', src: '', alt: 'Como 1907 debut season', category: 'como', caption: 'Serie A Debut, 2025', width: 4, height: 3 },
  { id: 'g4', src: '', alt: 'Como training 2026', category: 'como', caption: 'Sinigaglia, 2026', width: 3, height: 4 },
  { id: 'g5', src: '', alt: 'Croatia national team', category: 'croatia', caption: '2026 FIFA World Cup', width: 16, height: 9 },
  { id: 'g6', src: '', alt: 'World Cup goal vs England', category: 'croatia', caption: 'First WC Goal — Jun 17, 2026', width: 4, height: 3 },
  { id: 'g7', src: '', alt: 'Technical training', category: 'training', caption: 'Training session 2025', width: 3, height: 4 },
  { id: 'g8', src: '', alt: 'Champions League 2024-25', category: 'dinamo', caption: 'UEFA Champions League', width: 4, height: 3 },
]

// Gradient palettes per category for placeholder visuals
const GRAD: Record<string, string> = {
  dinamo: 'linear-gradient(135deg, #0044FF22, #07071A)',
  como: 'linear-gradient(135deg, #0055B322, #07071A)',
  croatia: 'linear-gradient(135deg, #CC120022, #07071A)',
  training: 'linear-gradient(135deg, #00E5FF22, #07071A)',
}

function GalleryCard({ item, onClick }: { item: GalleryItem; onClick: () => void }) {
  const aspectClass = item.width / item.height > 1.2 ? 'row-span-1' : 'row-span-2'

  return (
    <motion.div
      layoutId={`gallery-item-${item.id}`}
      className={`${aspectClass} relative rounded-xl overflow-hidden cursor-pointer group`}
      onClick={onClick}
      whileHover={{ scale: 1.02 }}
      transition={{ duration: 0.3 }}
    >
      <div
        className="absolute inset-0"
        style={{ background: GRAD[item.category] }}
      />
      {/* Placeholder visual */}
      <div className="absolute inset-0 flex items-center justify-center">
        <span
          className="font-display opacity-10"
          style={{ fontSize: 'clamp(3rem, 8vw, 8rem)', color: 'white' }}
        >
          MB
        </span>
      </div>

      {/* Hover overlay */}
      <motion.div
        className="absolute inset-0 flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
        style={{ background: 'linear-gradient(to top, rgba(2,2,9,0.8), transparent)' }}
      >
        <p className="font-body text-xs uppercase tracking-widest" style={{ color: 'var(--white)' }}>
          {item.caption}
        </p>
      </motion.div>
    </motion.div>
  )
}

export function Gallery() {
  const [activeCategory, setActiveCategory] = useState<string>('All')
  const [selectedItem, setSelectedItem] = useState<GalleryItem | null>(null)

  const filtered = activeCategory === 'All'
    ? galleryItems
    : galleryItems.filter((i) => i.category === activeCategory.toLowerCase() as GalleryItem['category'])

  return (
    <section
      id="gallery"
      className="relative w-full py-24 overflow-hidden"
      style={{ background: 'var(--bg-primary)' }}
      aria-label="Photo Gallery"
    >
      <div className="px-8 md:px-16 max-w-screen-xl mx-auto">
        {/* Header */}
        <div className="flex flex-col md:flex-row md:items-end gap-8 mb-12">
          <div>
            <p className="font-body text-xs tracking-[0.4em] uppercase mb-2" style={{ color: 'var(--cyan)' }}>
              Visual Archive
            </p>
            <h2 className="font-display leading-none" style={{ fontSize: 'clamp(3rem, 8vw, 8rem)', color: 'var(--white)' }}>
              Gallery
            </h2>
          </div>

          {/* Filter tabs */}
          <div className="flex gap-2 flex-wrap md:ml-auto">
            {CATEGORIES.map((cat) => (
              <button
                key={cat}
                onClick={() => setActiveCategory(cat)}
                className="px-4 py-2 rounded-full font-body text-xs uppercase tracking-widest transition-all duration-300"
                style={{
                  background: activeCategory === cat ? 'var(--blue-primary)' : 'rgba(0,68,255,0.1)',
                  color: activeCategory === cat ? 'var(--white)' : 'rgba(240,240,255,0.5)',
                  border: `1px solid ${activeCategory === cat ? 'var(--blue-primary)' : 'rgba(0,68,255,0.2)'}`,
                }}
                aria-pressed={activeCategory === cat}
              >
                {cat}
              </button>
            ))}
          </div>
        </div>

        {/* Grid */}
        <motion.div
          className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 auto-rows-[200px] gap-4"
          layout
        >
          <AnimatePresence mode="popLayout">
            {filtered.map((item) => (
              <GalleryCard key={item.id} item={item} onClick={() => setSelectedItem(item)} />
            ))}
          </AnimatePresence>
        </motion.div>
      </div>

      {/* Lightbox */}
      <AnimatePresence>
        {selectedItem && (
          <motion.div
            className="fixed inset-0 z-[9980] flex items-center justify-center p-8"
            style={{ backdropFilter: 'blur(20px) saturate(0.3)', background: 'rgba(2,2,9,0.8)' }}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={() => setSelectedItem(null)}
          >
            <motion.div
              layoutId={`gallery-item-${selectedItem.id}`}
              className="relative rounded-2xl overflow-hidden max-w-3xl w-full aspect-video"
              onClick={(e) => e.stopPropagation()}
            >
              <div
                className="absolute inset-0"
                style={{ background: GRAD[selectedItem.category] }}
              />
              <div className="absolute inset-0 flex items-center justify-center">
                <span className="font-display text-[12rem] opacity-10" style={{ color: 'white' }}>MB</span>
              </div>
              <div
                className="absolute bottom-0 left-0 right-0 p-6"
                style={{ background: 'linear-gradient(to top, rgba(2,2,9,0.9), transparent)' }}
              >
                <p className="font-display text-2xl" style={{ color: 'var(--white)' }}>{selectedItem.caption}</p>
                <p className="font-body text-xs uppercase tracking-widest mt-1" style={{ color: 'rgba(240,240,255,0.5)' }}>
                  {selectedItem.alt}
                </p>
              </div>
            </motion.div>

            {/* Close */}
            <button
              className="absolute top-8 right-8 w-12 h-12 rounded-full flex items-center justify-center glass-card"
              onClick={() => setSelectedItem(null)}
              aria-label="Close gallery"
            >
              <span className="text-xl" style={{ color: 'var(--white)' }}>×</span>
            </button>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  )
}