import { motion } from "framer-motion";
import { Database, Server, MessageSquare, Box, Globe, Smartphone, MapPin, Link as LinkIcon, Scissors, Film, Play, BrainCircuit, Cpu, ArrowRight } from "lucide-react";

export const ShardingVisual = () => (
    <div className="relative w-full h-full flex items-center justify-center">
        <div className="relative">
            {/* Main Database */}
            <motion.div
                animate={{ scale: [1, 0.8, 1], opacity: [1, 0.5, 1] }}
                transition={{ duration: 3, repeat: Infinity }}
                className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
            >
                <Database className="w-16 h-16 text-blue-500" />
            </motion.div>

            {/* Shards */}
            {[0, 1, 2].map((i) => (
                <motion.div
                    key={i}
                    animate={{
                        x: [0, (i - 1) * 100, (i - 1) * 100, 0],
                        y: [0, 50, 50, 0],
                        opacity: [0, 1, 1, 0]
                    }}
                    transition={{ duration: 3, repeat: Infinity, delay: i * 0.2 }}
                    className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
                >
                    <div className="flex flex-col items-center gap-2">
                        <motion.div
                            animate={{ y: [0, 10, 0] }}
                            transition={{ duration: 1, repeat: Infinity }}
                        >
                            <ArrowRight className="w-6 h-6 text-blue-400 rotate-90" />
                        </motion.div>
                        <Server className="w-10 h-10 text-blue-300" />
                        <div className="text-xs font-mono text-blue-200">Shard {i + 1}</div>
                    </div>
                </motion.div>
            ))}
        </div>
    </div>
);

export const KafkaVisual = () => (
    <div className="relative w-full h-full flex items-center justify-center gap-8">
        {/* Producer */}
        <div className="flex flex-col items-center gap-2">
            <Box className="w-12 h-12 text-green-500" />
            <span className="text-xs text-green-300">Producer</span>
        </div>

        {/* Stream */}
        <div className="flex gap-2">
            {[0, 1, 2, 3].map((i) => (
                <motion.div
                    key={i}
                    animate={{ x: [0, 100], opacity: [0, 1, 0] }}
                    transition={{ duration: 2, repeat: Infinity, delay: i * 0.5, ease: "linear" }}
                    className="bg-green-500/20 p-2 rounded border border-green-500/50"
                >
                    <MessageSquare className="w-4 h-4 text-green-400" />
                </motion.div>
            ))}
        </div>

        {/* Consumer Group */}
        <div className="flex flex-col gap-2">
            {[0, 1].map((i) => (
                <div key={i} className="flex items-center gap-2">
                    <Server className="w-8 h-8 text-green-300" />
                    <span className="text-xs text-green-300">Consumer {i + 1}</span>
                </div>
            ))}
        </div>
    </div>
);

export const TransformersVisual = () => (
    <div className="relative w-full h-full flex items-center justify-center">
        <div className="grid grid-cols-3 gap-8">
            {[0, 1, 2].map((col) => (
                <div key={col} className="flex flex-col gap-4">
                    {[0, 1, 2].map((row) => (
                        <motion.div
                            key={`${col}-${row}`}
                            className="relative"
                        >
                            <BrainCircuit className="w-8 h-8 text-purple-500" />
                            {/* Attention Lines */}
                            {col < 2 && [0, 1, 2].map((targetRow) => (
                                <motion.div
                                    key={targetRow}
                                    className="absolute top-1/2 left-full w-8 h-px bg-purple-500/30 origin-left"
                                    style={{ rotate: `${(targetRow - row) * 20}deg` }}
                                    animate={{ opacity: [0.2, 1, 0.2] }}
                                    transition={{ duration: 2, repeat: Infinity, delay: Math.random() }}
                                />
                            ))}
                        </motion.div>
                    ))}
                </div>
            ))}
        </div>
    </div>
);

export const QuantumVisual = () => (
    <div className="relative w-full h-full flex items-center justify-center">
        <div className="relative w-32 h-32">
            {/* Orbits */}
            {[0, 1, 2].map((i) => (
                <motion.div
                    key={i}
                    className="absolute inset-0 border border-violet-500/30 rounded-full"
                    style={{ rotateX: 60, rotateY: i * 60 }}
                    animate={{ rotateZ: 360 }}
                    transition={{ duration: 10, repeat: Infinity, ease: "linear" }}
                />
            ))}
            {/* Nucleus */}
            <motion.div
                animate={{ scale: [1, 1.2, 1] }}
                transition={{ duration: 2, repeat: Infinity }}
                className="absolute inset-0 m-auto w-8 h-8 bg-violet-500 rounded-full blur-md"
            />
            <div className="absolute inset-0 m-auto w-4 h-4 bg-white rounded-full" />

            {/* Electrons */}
            {[0, 1, 2].map((i) => (
                <motion.div
                    key={i}
                    className="absolute w-2 h-2 bg-violet-300 rounded-full"
                    animate={{
                        offsetDistance: "100%",
                    }}
                    style={{
                        offsetPath: `path("M 16 64 A 48 16 0 1 0 112 64 A 48 16 0 1 0 16 64")`,
                        rotate: i * 120
                    }}
                    transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
                />
            ))}
        </div>
    </div>
);

export const NetflixVisual = () => (
    <div className="relative w-full h-full flex items-center justify-center flex-col gap-4">
        <motion.div
            animate={{ scale: [1, 1.05, 1] }}
            transition={{ duration: 2, repeat: Infinity }}
            className="text-4xl font-bold text-red-600 tracking-tighter"
        >
            NETFLIX
        </motion.div>
        <div className="flex gap-2 overflow-hidden w-64">
            {[0, 1, 2, 3, 4].map((i) => (
                <motion.div
                    key={i}
                    animate={{ x: [-100, 0] }}
                    transition={{ duration: 5, repeat: Infinity, ease: "linear" }}
                    className="flex-shrink-0 w-16 h-24 bg-slate-800 rounded border border-slate-700 flex items-center justify-center"
                >
                    <Film className="w-8 h-8 text-red-500/50" />
                </motion.div>
            ))}
        </div>
        <div className="flex items-center gap-2 text-slate-400 text-xs">
            <Globe className="w-4 h-4" />
            <span>Global CDN Streaming</span>
        </div>
    </div>
);

export const BlackHoleVisual = () => (
    <div className="relative w-full h-full flex items-center justify-center bg-black">
        {/* Accretion Disk */}
        <motion.div
            animate={{ rotate: 360 }}
            transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
            className="w-48 h-48 rounded-full bg-gradient-to-tr from-orange-500/0 via-orange-500/50 to-orange-500/0 blur-xl"
        />
        <motion.div
            animate={{ scale: [1, 1.1, 1] }}
            transition={{ duration: 3, repeat: Infinity }}
            className="absolute w-32 h-32 rounded-full bg-black border-2 border-orange-500/50 shadow-[0_0_30px_rgba(249,115,22,0.5)]"
        />
        {/* Event Horizon */}
        <div className="absolute w-24 h-24 rounded-full bg-black z-10" />

        {/* Light Bending */}
        <motion.div
            className="absolute w-64 h-1 bg-white/20 blur-sm"
            animate={{ rotate: [0, 180], scale: [1, 0.5, 1], opacity: [0, 1, 0] }}
            transition={{ duration: 5, repeat: Infinity }}
        />
    </div>
);

export const URLShortenerVisual = () => (
    <div className="relative w-full h-full flex flex-col items-center justify-center gap-6">
        <div className="flex items-center gap-4">
            <motion.div
                initial={{ width: 200, opacity: 1 }}
                animate={{ width: 0, opacity: 0 }}
                transition={{ duration: 2, repeat: Infinity, repeatDelay: 1 }}
                className="h-8 bg-emerald-900/50 rounded border border-emerald-500/30 flex items-center px-2 overflow-hidden whitespace-nowrap text-xs text-emerald-400"
            >
                https://very-long-website-name.com/resource/123456
            </motion.div>

            <motion.div
                animate={{ rotate: [0, 360], scale: [1, 1.2, 1] }}
                transition={{ duration: 2, repeat: Infinity }}
            >
                <Scissors className="w-6 h-6 text-emerald-500" />
            </motion.div>

            <motion.div
                initial={{ width: 0, opacity: 0 }}
                animate={{ width: 100, opacity: 1 }}
                transition={{ duration: 2, repeat: Infinity, repeatDelay: 1 }}
                className="h-8 bg-emerald-500/20 rounded border border-emerald-500 flex items-center px-2 overflow-hidden whitespace-nowrap text-xs text-emerald-300 font-bold"
            >
                bit.ly/7x9
            </motion.div>
        </div>
        <div className="flex gap-8 text-xs text-slate-400">
            <div className="flex flex-col items-center gap-1">
                <Database className="w-4 h-4" />
                <span>Mapping DB</span>
            </div>
            <div className="flex flex-col items-center gap-1">
                <Cpu className="w-4 h-4" />
                <span>Base62 Encode</span>
            </div>
        </div>
    </div>
);

export const UberVisual = () => (
    <div className="relative w-full h-full flex items-center justify-center">
        {/* Map Grid */}
        <div className="absolute inset-0 grid grid-cols-6 grid-rows-4 gap-4 opacity-20">
            {Array.from({ length: 24 }).map((_, i) => (
                <div key={i} className="border border-pink-500/30 rounded" />
            ))}
        </div>

        {/* User */}
        <motion.div
            className="absolute left-1/4 top-1/2"
            animate={{ scale: [1, 1.2, 1] }}
            transition={{ duration: 2, repeat: Infinity }}
        >
            <Smartphone className="w-8 h-8 text-pink-400" />
            <div className="absolute -top-4 left-1/2 -translate-x-1/2 text-[10px] text-pink-300">User</div>
        </motion.div>

        {/* Driver */}
        <motion.div
            className="absolute"
            animate={{
                left: ["75%", "25%"],
                top: ["25%", "50%"]
            }}
            transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
        >
            <div className="bg-pink-500 p-1.5 rounded-full shadow-[0_0_15px_rgba(236,72,153,0.5)]">
                <MapPin className="w-4 h-4 text-white" />
            </div>
            <div className="absolute -top-4 left-1/2 -translate-x-1/2 text-[10px] text-pink-300">Driver</div>
        </motion.div>

        {/* Route Line */}
        <svg className="absolute inset-0 w-full h-full pointer-events-none">
            <motion.line
                x1="25%" y1="50%"
                x2="75%" y2="25%"
                stroke="rgba(236, 72, 153, 0.5)"
                strokeWidth="2"
                strokeDasharray="4 4"
                animate={{ strokeDashoffset: [0, -8] }}
                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
            />
        </svg>
    </div>
);