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[];
    videoSrc?: string; // Optional video source
}

const items: BentoItem[] = [
    {
        id: 'gaming',
        title: "Gaming",
        description: "From Old Classic Fighting Game Tournaments to New PC Gaming Experiences. I enjoy it all",
        className: "bento-large",
        bgImage: "/images/about/slab.jpg"
    },
    {
        id: 'snowboarding',
        title: "Snowboarding",
        description: "Here is me teaching my girlfriend😅",
        className: "bento-tall",
        bgImage: "https://placehold.co/400x800/a7ffeb/004d40?text=Snowboarding",
        videoSrc: "/images/about/snowboard2.mp4"
    },
    {
        id: 'cooking',
        title: "Cooking",
        description: "Everyone cooks sure, I'll give you that. But I want to master the art of cooking a excellent steak.",
        className: "",
        bgImage: "/images/about/steak.jpg"
    },
    {
        id: 'social',
        title: "Family & Friends",
        description: "Good times with my favorite people. Including my Girlfriend, Friends and Family",
        className: "bento-tall",
        bgImage: [
            "/images/about/girl1.jpg",
            "/images/about/family1.jpg",
            "/images/about/family2.jpg",
            "/images/about/friend2.jpg",
        ]
    },
    {
        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"
    },
    {
        id: 'controller-modding',
        title: "Controller Modding",
        description: "Restoring and modifying retro game controllers. Giving new life to old hardware.",
        className: "", // Standard 1x1
        bgImage: "/images/about/gamecube.jpg"
    },
    {
        id: 'outdoor-exploring',
        title: "Outdoor Exploring",
        description: "Hiking mountains, exploring caves, beaches and more.",
        className: "bento-tall",
        bgImage: [
            "/images/about/outdoor1.jpg",
            "/images/about/outdoor2.jpg",
            "/images/about/beach1.jpg",
        ]
    },
    {
        id: 'smart-home',
        title: "Smart Home",
        description: "Automating my living space with smart devices and custom integrations.",
        className: "", // Standard 1x1
        bgImage: "https://placehold.co/400x400/0288d1/e1f5fe?text=Smart+Home"
    },
    {
        id: 'pc-building',
        title: "Computer Building",
        description: "Designing and assembling custom PC builds for performance and aesthetics.",
        className: "bento-wide",
        bgImage: "/images/about/pcBuild.jpg"
    },
    {
        id: 'small-town',
        title: "Small Town Origin",
        description: "I'm from Melfort, Saskatchewan. A small town with a big heart.",
        className: "", // Standard 1x1
        bgImage: [
            "/images/about/melfort1.jpg",
            "/images/about/melfort2.jpg",
            "/images/about/melfort3.png",
            "/images/about/melfort4.jpg",
            "/images/about/melfort5.jpg",
        ]
    },
    {
        id: 'cats',
        title: "Cats",
        description: "I see a cat, I pet a cat. Simple as that.",
        className: "bento-large",
        bgImage: "https://placehold.co/800x800/ffccbc/bf360c?text=Cats", // Fallback
        videoSrc: "/images/about/kitty.mp4"
    }
];

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 }}
        >
            {item.videoSrc ? (
                <video
                    src={item.videoSrc}
                    autoPlay
                    loop
                    muted
                    playsInline
                    className="bento-bg"
                    style={{ objectFit: 'cover', opacity: 0.6 }}
                />
            ) : (
                <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>
    );
}
