// Gallery.jsx - Student Gallery with Masonry Layout
const { useState } = React;

function Gallery({ items, isLoading, hasFailed }) {
    const [activeFilter, setActiveFilter] = useState('All');
    const [selectedItem, setSelectedItem] = useState(null);

    const categories = ['All', 'Portrait', 'Landscape', 'Botanical', 'Sketching', 'Composition', 'Still Life'];

    const filteredItems = activeFilter === 'All'
        ? items
        : items.filter(item => item.category === activeFilter);

    // Loading skeleton
    if (isLoading) {
        return (
            <section id="gallery" className="py-20 bg-cream">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center mb-12">
                        <h2 className="font-serif text-3xl md:text-4xl font-semibold text-charcoal mb-4">
                            Student Gallery
                        </h2>
                        <p className="text-gray-600 text-lg max-w-2xl mx-auto">
                            Loading student artwork from Supabase...
                        </p>
                    </div>
                    <div className="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
                        {[1,2,3,4,5,6].map(i => (
                            <div key={i} className="break-inside-avoid rounded-xl overflow-hidden">
                                <div className="shimmer w-full" style={{ height: i % 3 === 0 ? '350px' : i % 3 === 1 ? '250px' : '300px' }}></div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        );
    }

    // Failed state
    if (hasFailed && items.length === 0) {
        return (
            <section id="gallery" className="py-20 bg-cream">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center mb-12">
                        <h2 className="font-serif text-3xl md:text-4xl font-semibold text-charcoal mb-4">
                            Student Gallery
                        </h2>
                        <p className="text-gray-600 text-lg max-w-2xl mx-auto">
                            Celebrating the beautiful artwork created by our talented students
                        </p>
                    </div>
                    <div className="text-center py-16">
                        <div className="w-20 h-20 mx-auto mb-4 bg-gray-200 rounded-full flex items-center justify-center">
                            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <p className="text-charcoal-light text-lg font-medium">Unable to load artwork</p>
                        <p className="text-charcoal-light/70 text-sm mt-1">Please check your connection and refresh</p>
                        <button
                            onClick={() => window.location.reload()}
                            className="mt-4 bg-crimson text-white px-6 py-2 rounded-lg font-medium hover:bg-crimson-dark transition-colors"
                        >
                            Try Again
                        </button>
                    </div>
                </div>
            </section>
        );
    }

    return (
        <section id="gallery" className="py-20 bg-cream">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center mb-12">
                    <h2 className="font-serif text-3xl md:text-4xl font-semibold text-charcoal mb-4">
                        Student Gallery
                    </h2>
                    <p className="text-gray-600 text-lg max-w-2xl mx-auto">
                        Celebrating the beautiful artwork created by our talented students
                    </p>
                </div>

                {/* Filters */}
                <div className="flex flex-wrap justify-center gap-3 mb-12">
                    {categories.map(category => (
                        <button
                            key={category}
                            onClick={() => setActiveFilter(category)}
                            className={`px-5 py-2 rounded-full text-sm font-medium transition-all ${
                                activeFilter === category
                                    ? 'bg-crimson text-white'
                                    : 'bg-white text-charcoal hover:bg-gray-100 shadow-sm'
                            }`}
                        >
                            {category}
                        </button>
                    ))}
                </div>

                {/* Masonry Grid */}
                <div className="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
                    {filteredItems.map((item, index) => (
                        <div
                            key={item.id}
                            className="break-inside-avoid group relative overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer"
                            onClick={() => setSelectedItem(item)}
                        >
                            <img
                                src={item.image}
                                loading="lazy"
                                alt={item.title}
                                className="w-full object-cover group-hover:scale-105 transition-transform duration-500 animate-fade-in"
                                style={{
                                    height: index % 4 === 0 ? '300px' : index % 4 === 1 ? '250px' : index % 4 === 2 ? '350px' : '280px',
                                    objectFit: 'cover'
                                }}
                            />

                            {/* Hover Overlay */}
                            <div className="absolute inset-0 bg-gradient-to-t from-charcoal/90 via-charcoal/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-5">
                                <h3 className="font-serif text-xl font-semibold text-white">
                                    {item.title}
                                </h3>
                                <p className="text-white/80 text-sm">
                                    by {item.student}
                                </p>
                                <span className={`text-xs mt-2 px-2 py-1 rounded-full inline-block w-fit ${
                                    item.category === 'Portrait' ? 'bg-rose-500/20 text-rose-300' :
                                    item.category === 'Landscape' ? 'bg-green-500/20 text-green-300' :
                                    item.category === 'Botanical' ? 'bg-emerald-500/20 text-emerald-300' :
                                    item.category === 'Sketching' ? 'bg-gray-500/20 text-gray-300' :
                                    item.category === 'Composition' ? 'bg-indigo-500/20 text-indigo-300' :
                                    'bg-gold/20 text-yellow-200'
                                }`}>
                                    {item.category}
                                </span>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Lightbox */}
                {selectedItem && (
                    <div
                        className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
                        onClick={() => setSelectedItem(null)}
                    >
                        <div className="max-w-4xl w-full">
                            <img
                                src={selectedItem.image}
                                alt={selectedItem.title}
                                className="w-full rounded-lg shadow-2xl"
                            />
                            <div className="mt-4 text-center">
                                <h3 className="font-serif text-2xl font-semibold text-white">
                                    {selectedItem.title}
                                </h3>
                                <p className="text-white/80">
                                    by {selectedItem.student} • {selectedItem.class}
                                </p>
                            </div>
                        </div>
                        <button
                            className="absolute top-4 right-4 text-white hover:text-crimson transition-colors"
                            onClick={() => setSelectedItem(null)}
                        >
                            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                )}
            </div>
        </section>
    );
}

window.Gallery = Gallery;