import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import '../styles/components/BentoGrid.css';

interface BentoItem {
    id: string;
    title: string;
    description: string;
    className?: string; // For sizing: bento-large, bento-wide, bento-tall
    bgImage: string | string[];
}

const items: BentoItem[] = [
    {
        id: 'gaming',
        title: "Gaming & Tech",
        description: "Wind down with some PC gaming or just appreciating good new gear.",
        className: "bento-large",
        bgImage: "https://placehold.co/800x800/2a1a4a/FFF?text=Gaming+Setup"
    },
    {
        id: 'snowboarding',
        title: "Snowboarding",
        description: "The rush of going down the mountains are unmatched",
        className: "bento-tall",
        bgImage: "https://placehold.co/400x800/a7ffeb/004d40?text=Snowboarding"
    },
    {
        id: 'cooking',
        title: "Culinary Arts",
        description: "Experimenting with new recipes and flavors in the kitchen.",
        className: "", // Standard 1x1
        bgImage: "https://placehold.co/400x400/3e2723/d7ccc8?text=Cooking"
    },
    {
        id: 'social',
        title: "Family & Friends",
        description: "Good times with my favorite people. Including my Girlfriend, Friends and Family",
        className: "", // Standard 1x1
        bgImage: [
            "https://placehold.co/400x400/f8bbd0/880e4f?text=Social+1",
            "https://placehold.co/400x400/d81b60/ffffff?text=Social+2",
            "https://placehold.co/400x400/880e4f/f8bbd0?text=Social+3"
        ]
    },
    {
        id: 'homelab',
        title: "Home Labbing",
        description: "I enjoy the challenge of self-hosting my own digital services at home. I also love tinkering with new hardware and software setups.",
        className: "bento-wide",
        bgImage: "/images/projects/homelabber.png"
    }
];

const BentoCard = ({ item, index, delay }: { item: BentoItem; index: number; delay: number }) => {
    const images = Array.isArray(item.bgImage) ? item.bgImage : [item.bgImage];
    const [currentIndex, setCurrentIndex] = useState(0);

    useEffect(() => {
        if (images.length <= 1) return;
        const interval = setInterval(() => {
            setCurrentIndex((prev) => (prev + 1) % images.length);
        }, 5000);
        return () => clearInterval(interval);
    }, [images.length]);

    return (
        <motion.div
            className={`bento-item ${item.className || ''}`}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: delay + index * 0.1 }}
        >
            <AnimatePresence mode="popLayout" initial={false}>
                <motion.img
                    key={currentIndex}
                    src={images[currentIndex]}
                    alt={item.title}
                    className="bento-bg"
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 0.6 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.8 }}
                    onError={(e) => {
                        e.currentTarget.src = "https://placehold.co/600x400?text=" + item.title;
                    }}
                />
            </AnimatePresence>
            <div className="bento-overlay" />
            <div className="bento-content">
                <h3 className="bento-title">{item.title}</h3>
                <p className="bento-description">{item.description}</p>
            </div>
        </motion.div>
    );
};

export default function BentoGrid({ delay = 0 }: { delay?: number }) {
    return (
        <div className="bento-grid-container">
            {items.map((item, index) => (
                <BentoCard key={item.id} item={item} index={index} delay={delay} />
            ))}
        </div>
    );
}
