// FeaturedWorks.jsx - Featured Student Works Showcase
const { useState, useEffect } = React;

function FeaturedWorks({ items, isLoading, hasFailed }) {
    const [featuredIndex, setFeaturedIndex] = useState(0);
    const [isAutoPlaying, setIsAutoPlaying] = useState(true);

    // Auto-rotate featured artwork
    useEffect(() => {
        if (!isAutoPlaying || items.length === 0) return;

        const interval = setInterval(() => {
            setFeaturedIndex(prev => (prev + 1) % items.length);
        }, 5000);

        return () => clearInterval(interval);
    }, [isAutoPlaying, items.length]);

    // Loading state
    if (isLoading) {
        return (
            <section className="py-20 bg-charcoal text-white overflow-hidden">
                <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-white mb-4">
                            Featured Student Works
                        </h2>
                        <p className="text-white/70 text-lg max-w-2xl mx-auto">
                            Loading featured artwork...
                        </p>
                    </div>
                    <div className="grid lg:grid-cols-2 gap-8 mb-12">
                        <div className="aspect-[4/5] lg:aspect-square rounded-2xl shimmer"></div>
                        <div className="flex flex-col justify-center">
                            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8">
                                <div className="shimmer h-6 w-24 rounded mb-4"></div>
                                <div className="shimmer h-10 w-3/4 rounded mb-4"></div>
                                <div className="shimmer h-6 w-1/2 rounded mb-6"></div>
                                <div className="shimmer h-12 w-12 rounded-full mb-4"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        );
    }

    // Failed state
    if (hasFailed && items.length === 0) {
        return (
            <section className="py-20 bg-charcoal text-white overflow-hidden">
                <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-white mb-4">
                            Featured Student Works
                        </h2>
                        <p className="text-white/70 text-lg max-w-2xl mx-auto">
                            Celebrating exceptional artwork from our talented students worldwide
                        </p>
                    </div>
                    <div className="text-center py-16">
                        <div className="w-20 h-20 mx-auto mb-4 bg-white/10 rounded-full flex items-center justify-center">
                            <svg className="w-8 h-8 text-white/40" 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-white/80 text-lg font-medium">Unable to load featured artwork</p>
                        <p className="text-white/50 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>
        );
    }

    // Empty state
    if (items.length === 0) {
        return null;
    }

    const currentItem = items[featuredIndex] || items[0];

    // Get 4 adjacent items for the thumbnail strip
    const getAdjacentItems = (index) => {
        const indices = [];
        for (let i = -2; i <= 2; i++) {
            if (i !== 0) {
                const idx = (index + i + items.length) % items.length;
                indices.push(idx);
            }
        }
        return indices;
    };

    const adjacentItems = getAdjacentItems(featuredIndex);

    return (
        <section className="py-20 bg-charcoal text-white overflow-hidden">
            <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-white mb-4">
                        Featured Student Works
                    </h2>
                    <p className="text-white/70 text-lg max-w-2xl mx-auto">
                        Celebrating exceptional artwork from our talented students worldwide
                    </p>
                </div>

                {/* Main Featured Display */}
                <div className="grid lg:grid-cols-2 gap-8 mb-12">
                    {/* Main Image */}
                    <div
                        className="relative aspect-[4/5] lg:aspect-square rounded-2xl overflow-hidden cursor-pointer group"
                        onClick={() => setIsAutoPlaying(!isAutoPlaying)}
                    >
                        <img
                            src={currentItem.image}
                            alt={currentItem.title}
                            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-charcoal/90 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                        <div className="absolute bottom-0 left-0 right-0 p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                            <h3 className="font-serif text-2xl font-semibold text-white mb-1">
                                {currentItem.title}
                            </h3>
                            <p className="text-white/80">by {currentItem.student}</p>
                        </div>
                        {/* Pause indicator */}
                        {!isAutoPlaying && (
                            <div className="absolute top-4 right-4 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-xs text-white">
                                PAUSED
                            </div>
                        )}
                    </div>

                    {/* Info Panel */}
                    <div className="flex flex-col justify-center">
                        <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8">
                            <span className={`inline-block text-xs font-medium px-3 py-1 rounded-full mb-4 ${
                                currentItem.category === 'Portrait' ? 'bg-rose-500/20 text-rose-300' :
                                currentItem.category === 'Landscape' ? 'bg-green-500/20 text-green-300' :
                                currentItem.category === 'Botanical' ? 'bg-emerald-500/20 text-emerald-300' :
                                currentItem.category === 'Sketching' ? 'bg-gray-500/20 text-gray-300' :
                                'bg-gold/20 text-yellow-300'
                            }`}>
                                {currentItem.category}
                            </span>

                            <h3 className="font-serif text-3xl font-semibold text-white mb-2">
                                {currentItem.title}
                            </h3>

                            <p className="text-white/70 text-lg mb-6">
                                {currentItem.class}
                            </p>

                            <div className="flex items-center gap-4">
                                <div className="w-12 h-12 rounded-full overflow-hidden bg-white/10">
                                    <img
                                        src={`https://ui-avatars.com/api/?name=${encodeURIComponent(currentItem.student)}&background=C4553D&color=fff`}
                                        alt={currentItem.student}
                                        className="w-full h-full object-cover"
                                    />
                                </div>
                                <div>
                                    <p className="text-white font-medium">{currentItem.student}</p>
                                    <p className="text-white/50 text-sm">Student at Arpita Art Academy</p>
                                </div>
                            </div>

                            <div className="mt-8 pt-6 border-t border-white/10">
                                <p className="text-white/60 text-sm italic">
                                    "Art is not what you see, but what you make others see."
                                </p>
                            </div>
                        </div>

                        {/* Navigation Controls */}
                        <div className="flex items-center justify-between mt-6">
                            <button
                                onClick={() => setFeaturedIndex(prev => (prev - 1 + items.length) % items.length)}
                                className="flex items-center gap-2 text-white/70 hover:text-white transition-colors"
                            >
                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                                </svg>
                                Previous
                            </button>

                            <div className="flex gap-2">
                                {items.slice(0, 5).map((_, i) => (
                                    <div
                                        key={i}
                                        className={`w-2 h-2 rounded-full transition-all ${
                                            featuredIndex % items.length === i ? 'bg-crimson w-6' : 'bg-white/30'
                                        }`}
                                    />
                                ))}
                            </div>

                            <button
                                onClick={() => setFeaturedIndex(prev => (prev + 1) % items.length)}
                                className="flex items-center gap-2 text-white/70 hover:text-white transition-colors"
                            >
                                Next
                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>

                {/* Thumbnail Strip */}
                <div className="flex gap-4 overflow-x-auto pb-4 scrollbar-hide">
                    {adjacentItems.map((idx) => (
                        <button
                            key={idx}
                            onClick={() => {
                                setFeaturedIndex(idx);
                                setIsAutoPlaying(false);
                            }}
                            className={`flex-shrink-0 w-24 h-24 rounded-xl overflow-hidden transition-all ${
                                featuredIndex === idx ? 'ring-2 ring-crimson scale-105' : 'opacity-50 hover:opacity-80'
                            }`}
                        >
                            <img
                                src={items[idx].image}
                                alt={items[idx].title}
                                className="w-full h-full object-cover"
                            />
                        </button>
                    ))}
                </div>

                {/* Call to Action */}
                <div className="text-center mt-12">
                    <p className="text-white/60 mb-4">Want to showcase your artwork here?</p>
                    <button className="bg-crimson text-white px-8 py-3 rounded-full font-medium hover:bg-opacity-90 transition-colors">
                        Enroll in a Class
                    </button>
                </div>
            </div>
        </section>
    );
}

window.FeaturedWorks = FeaturedWorks;