import React from 'react'
import './gallery.css'
import { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { XMarkIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { Button, Card } from '../../components/UI';

function Gallery() {
    const [selectedImage, setSelectedImage] = useState(null);
    const [loading, setLoading] = useState(true);
    const [activeCategory, setActiveCategory] = useState('all');
    const [filteredImages, setFilteredImages] = useState([]);

    const images = [
        { id: 1, src: "1.jpg", alt: "Laboratory Equipment 1", category: "Лабораторија" },
        { id: 2, src: "2.jpg", alt: "Laboratory Equipment 2", category: "Лабораторија" },
        { id: 3, src: "3.jpg", alt: "Laboratory Equipment 3", category: "Лабораторија" },
        { id: 4, src: "4.jpg", alt: "Testing Process 1", category: "Тестирање" },
        { id: 5, src: "5.jpg", alt: "Testing Process 2", category: "Тестирање" },
        { id: 6, src: "6.jpg", alt: "Testing Process 3", category: "Тестирање" },
        { id: 8, src: "8.jpg", alt: "Results 1", category: "Резултати" },
        { id: 9, src: "9.jpg", alt: "Results 2", category: "Резултати" },
        { id: 10, src: "10.jpg", alt: "Results 3", category: "Резултати" }
    ];

    const categories = [...new Set(images.map(img => img.category))];

    useEffect(() => {
        window.scrollTo({ top: 0, behavior: "smooth" })
        // Simulate images loading
        const loadImages = async () => {
            await Promise.all(
                images.map(img => {
                    return new Promise((resolve) => {
                        const image = new Image();
                        image.src = img.src;
                        image.onload = resolve;
                    });
                })
            );
            setLoading(false);
        };
        loadImages();
    }, [])

    useEffect(() => {
        setFilteredImages(
            activeCategory === 'all'
                ? images
                : images.filter(img => img.category === activeCategory)
        );
    }, [activeCategory]);

    const containerVariants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.1
            }
        }
    };

    const itemVariants = {
        hidden: { opacity: 0, y: 20 },
        visible: {
            opacity: 1,
            y: 0,
            transition: {
                duration: 0.5
            }
        }
    };

    return (
        <div className="min-h-screen bg-gradient-to-br from-primary-900 to-primary-800">
            {/* Hero Section */}
            <section className="relative h-[20vh] overflow-hidden">
                {/* <div className="absolute inset-0 bg-pattern opacity-5"></div> */}
                <div className="relative max-w-[90rem] mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-center text-center">
                    <div>
                        <motion.h1
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            className="text-4xl md:text-5xl font-display font-bold mb-6 text-white"
                        >
                            Нашата Галерија
                        </motion.h1>
                        <motion.p
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.2 }}
                            className="text-xl text-neutral-300 max-w-3xl mx-auto"
                        >
                            Погледнете ја нашата опрема и работен процес преку слики
                        </motion.p>
                    </div>
                </div>
            </section>

            {/* Gallery Section */}
            <section className="py-16">
                <div className="max-w-[90rem] mx-auto px-4 sm:px-6 lg:px-8">
                    {/* Category Filter */}
                    <div className="flex flex-wrap gap-3 justify-center mb-12">
                        <Button
                            variant={activeCategory === 'all' ? 'primary' : 'secondary'}
                            onClick={() => setActiveCategory('all')}
                            className={`min-w-[100px] ${
                                activeCategory === 'all'
                                    ? 'bg-primary-600 text-white'
                                    : 'bg-white/10 text-white hover:bg-white/20'
                            }`}
                        >
                            Сите
                        </Button>
                        {categories.map(category => (
                            <Button
                                key={category}
                                variant={activeCategory === category ? 'primary' : 'secondary'}
                                onClick={() => setActiveCategory(category)}
                                className={`min-w-[100px] ${
                                    activeCategory === category
                                        ? 'bg-primary-600 text-white'
                                        : 'bg-white/10 text-white hover:bg-white/20'
                                }`}
                            >
                                {category}
                            </Button>
                        ))}
                    </div>

                    {loading ? (
                        <div className="flex justify-center items-center h-64">
                            <div className="loading-spinner text-primary-400" />
                        </div>
                    ) : (
                        <motion.div
                            layout
                            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6 lg:gap-8"
                        >
                            <AnimatePresence>
                                {filteredImages.map((image) => (
                                    <motion.div
                                        key={image.id}
                                        layout
                                        initial={{ opacity: 0, scale: 0.8 }}
                                        animate={{ opacity: 1, scale: 1 }}
                                        exit={{ opacity: 0, scale: 0.8 }}
                                        transition={{ duration: 0.3 }}
                                    >
                                        <Card
                                            padding="none"
                                            className="group cursor-pointer overflow-hidden bg-primary-800/50 
                                                backdrop-blur-sm border border-primary-700/50 hover:border-primary-600/50
                                                transition-all duration-300"
                                            onClick={() => setSelectedImage(image)}
                                        >
                                            <div className="relative aspect-[4/3]">
                                                <img
                                                    src={image.src}
                                                    alt={image.alt}
                                                    className="absolute inset-0 w-full h-full object-cover transition-transform 
                                                        duration-300 group-hover:scale-105"
                                                />
                                                <div className="absolute inset-0 bg-gradient-to-t from-primary-900/90 
                                                    via-primary-900/30 to-transparent opacity-0 group-hover:opacity-100 
                                                    transition-opacity duration-300">
                                                    <div className="absolute bottom-0 left-0 right-0 p-4">
                                                        <p className="text-white font-medium">{image.alt}</p>
                                                        <span className="text-primary-300 text-sm">{image.category}</span>
                                                    </div>
                                                </div>
                                                <div className="absolute inset-0 flex items-center justify-center 
                                                    opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                                    <div className="bg-primary-600 p-3 rounded-full shadow-lg">
                                                        <MagnifyingGlassIcon className="w-6 h-6 text-white" />
                                                    </div>
                                                </div>
                                            </div>
                                        </Card>
                                    </motion.div>
                                ))}
                            </AnimatePresence>
                        </motion.div>
                    )}
                </div>
            </section>

            {/* Image Modal */}
            <AnimatePresence>
                {selectedImage && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4 md:p-8"
                        onClick={() => setSelectedImage(null)}
                    >
                        <motion.div
                            initial={{ scale: 0.9, opacity: 0 }}
                            animate={{ scale: 1, opacity: 1 }}
                            exit={{ scale: 0.9, opacity: 0 }}
                            className="relative max-w-7xl w-full"
                            onClick={e => e.stopPropagation()}
                        >
                            <img
                                src={selectedImage.src}
                                alt={selectedImage.alt}
                                className="w-full h-auto rounded-lg shadow-2xl"
                            />
                            <Button
                                variant="ghost"
                                className="absolute top-4 right-4 text-white hover:bg-white/10"
                                onClick={() => setSelectedImage(null)}
                            >
                                <XMarkIcon className="w-6 h-6" />
                            </Button>
                            <div className="absolute bottom-4 left-4 text-white">
                                <h3 className="text-lg font-medium">{selectedImage.alt}</h3>
                                <p className="text-sm text-primary-200">{selectedImage.category}</p>
                            </div>
                        </motion.div>
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    );
}

export default Gallery