import { motion } from "framer-motion";

export const EmptyStateIllustration = () => {
    const springTransition = {
        type: "spring",
        stiffness: 100,
        damping: 10
    };
    return (
        <motion.svg
            width="240"
            height="200"
            viewBox="0 0 240 200"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            initial="hidden"
            animate="visible"
            variants={{
                hidden: { opacity: 0, scale: 0.8 },
                visible: {
                    opacity: 1,
                    scale: 1,
                    transition: {
                        when: "beforeChildren",
                        staggerChildren: 0.1
                    }
                }
            }}
            transition={springTransition}
        >

            {/* 书籍堆叠 - 使用更现代的配色方案 */}
            <motion.g
                variants={{
                    hidden: { opacity: 0, y: 30 },
                    visible: {
                        opacity: 1,
                        y: 0,
                        transition: {
                            type: "spring",
                            stiffness: 80,
                            damping: 12
                        }
                    }
                }}
            >
                {/* 底部书籍 */}
                <path
                    d="M90 120H150C152.761 120 155 117.761 155 115V105C155 102.239 152.761 100 150 100H90C87.2386 100 85 102.239 85 105V115C85 117.761 87.2386 120 90 120Z"
                    fill="#EFF6FF"
                    filter="url(#shadow)"
                />
                {/* 中间书籍 */}
                <path
                    d="M95 100H155C157.761 100 160 97.7614 160 95V85C160 82.2386 157.761 80 155 80H95C92.2386 80 90 82.2386 90 85V95C90 97.7614 92.2386 100 95 100Z"
                    fill="#DBEAFE"
                />
                {/* 顶部书籍 */}
                <path
                    d="M100 80H160C162.761 80 165 77.7614 165 75V65C165 62.2386 162.761 60 160 60H100C97.2386 60 95 62.2386 95 65V75C95 77.7614 97.2386 80 100 80Z"
                    fill="#3B82F6"
                />
            </motion.g>

            {/* Magnifying Glass */}
            <motion.g
                variants={{
                    hidden: { scale: 0, rotate: -45, x: 20 },
                    visible: { scale: 1, rotate: 0, x: 0 }
                }}
                transition={{
                    type: "spring",
                    stiffness: 120,
                    damping: 15
                }}
            >
                <circle
                    cx="160"
                    cy="70"
                    r="15"
                    stroke="#3B82F6"
                    strokeWidth="2"
                    fill="white"
                    filter="url(#glow)"
                />
                <line
                    x1="150"
                    y1="82"
                    x2="140"
                    y2="92"
                    stroke="#3B82F6"
                    strokeWidth="2"
                    strokeLinecap="round"
                />
            </motion.g>

            {/* Atom Structure */}
            <motion.g
                variants={{
                    hidden: { rotate: 0, opacity: 0, scale: 0.8 },
                    visible: {
                        rotate: 360,
                        opacity: 1,
                        scale: 1,
                        transition: {
                            rotate: {
                                duration: 25,
                                ease: "linear",
                                repeat: Infinity,
                                repeatType: "loop"
                            },
                            opacity: { duration: 0.5 },
                            scale: { duration: 0.5 }
                        }
                    }
                }}
            >
                <ellipse cx="80" cy="100" rx="20" ry="10" stroke="#3B82F6" strokeWidth="1.5" fill="none" opacity="0.6" />
                <ellipse cx="80" cy="100" rx="20" ry="10" stroke="#3B82F6" strokeWidth="2" fill="none" transform="rotate(60 80 100)" />
                <ellipse cx="80" cy="100" rx="20" ry="10" stroke="#3B82F6" strokeWidth="2" fill="none" transform="rotate(-60 80 100)" />
                <circle cx="80" cy="100" r="3" fill="#3B82F6" />
            </motion.g>

            {/* Mathematical Symbols */}
            <motion.g
                variants={{
                    hidden: { opacity: 0, y: 15 },
                    visible: { opacity: 1, y: 0 }
                }}

                fill="#3B82F6"
            >
                <text x="155" y="140" fontSize="16" fontFamily="serif" fontWeight="600">∫</text>
                <text x="170" y="140" fontSize="16" fontFamily="serif" fontWeight="600">∑</text>
                <text x="185" y="140" fontSize="16" fontFamily="serif" fontWeight="600">π</text>
            </motion.g>


            {/* Connection Lines */}
            <motion.g
                stroke="#BFDBFE"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeDasharray="4,4"
                variants={{
                    hidden: { opacity: 0, pathLength: 0 },
                    visible: { opacity: 0.6, pathLength: 1 }
                }}
                transition={{
                    duration: 2,
                    ease: "easeInOut"
                }}
            >
                <line x1="40" y1="80" x2="60" y2="80" />
                <line x1="180" y1="120" x2="200" y2="120" />
                <line x1="160" y1="160" x2="180" y2="160" />
            </motion.g>
        </motion.svg>

    );
};