import { motion } from "framer-motion";

export const BackendVector = () => {
  return (
    <div className="relative w-full h-96 flex items-center justify-center overflow-hidden font-manrope">
      {/* Subtle Background Grid */}
      <div className="absolute inset-0 opacity-5">
        <svg className="w-full h-full" viewBox="0 0 400 400" fill="none">
          <defs>
            <pattern id="gridPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#E5195E" strokeWidth="0.5"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#gridPattern)" />
        </svg>
      </div>

      <div className="relative z-20 flex items-center justify-center">
        {/* API Gateway - Central Component */}
        <motion.div
          initial={{ opacity: 0, scale: 0 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="relative flex flex-col items-center"
        >
          {/* Main API Gateway */}
          <motion.div
            animate={{ y: [0, -6, 0] }}
            transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
            className="w-20 h-16 bg-gradient-to-br from-blue-600 to-blue-800 rounded-xl flex items-center justify-center shadow-lg border border-blue-500/20 relative"
          >
            {/* API Icon */}
            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            
            {/* Pulsing Status Light */}
            <motion.div
              animate={{ scale: [1, 1.3, 1], opacity: [0.8, 1, 0.8] }}
              transition={{ duration: 2, repeat: Infinity }}
              className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full"
            ></motion.div>
          </motion.div>
          
          {/* API Gateway Label */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 1 }}
            className="mt-3 text-xs text-white font-manrope whitespace-nowrap"
          >
            API Gateway
          </motion.div>
        </motion.div>

        {/* Database Cluster - Left Side */}
        <motion.div
          initial={{ opacity: 0, x: -60 }}
          animate={{ opacity: 1, x: -80 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          className="absolute flex flex-col items-center space-y-2"
        >
          {Array.from({ length: 3 }).map((_, i) => (
            <motion.div
              key={`db-${i}`}
              initial={{ opacity: 0, scale: 0 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5, delay: 0.6 + i * 0.1 }}
              className="relative"
            >
              <motion.div
                animate={{ 
                  rotateY: [0, 360],
                  scale: [1, 1.05, 1]
                }}
                transition={{ 
                  duration: 8 + i * 2, 
                  repeat: Infinity, 
                  ease: "linear",
                  delay: i * 1
                }}
                className="w-12 h-8 bg-gradient-to-r from-green-600 to-green-700 rounded-lg flex items-center justify-center border border-green-500/20"
              >
                {/* Database Icon */}
                <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z"/>
                  <path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z"/>
                  <path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z"/>
                </svg>
              </motion.div>
              
              {/* Activity Indicator */}
              <motion.div
                animate={{ scale: [1, 1.5, 1] }}
                transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.5 }}
                className="absolute -top-1 -right-1 w-2 h-2 bg-blue-400 rounded-full"
              ></motion.div>
            </motion.div>
          ))}
          
          {/* Database Label */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 1.2 }}
            className="text-xs text-white font-manrope whitespace-nowrap"
          >
            Database
          </motion.div>
        </motion.div>

        {/* Microservices - Right Side */}
        <motion.div
          initial={{ opacity: 0, x: 60 }}
          animate={{ opacity: 1, x: 80 }}
          transition={{ duration: 0.8, delay: 0.6 }}
          className="absolute flex flex-col items-center space-y-2"
        >
          {Array.from({ length: 4 }).map((_, i) => (
            <motion.div
              key={`service-${i}`}
              initial={{ opacity: 0, scale: 0 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.4, delay: 0.8 + i * 0.1 }}
              className="relative"
            >
              <motion.div
                animate={{ 
                  x: [0, 3, 0],
                  scale: [1, 1.1, 1]
                }}
                transition={{ 
                  duration: 3 + i * 0.5, 
                  repeat: Infinity, 
                  ease: "easeInOut",
                  delay: i * 0.3
                }}
                className="w-10 h-6 bg-gradient-to-r from-purple-600 to-purple-700 rounded flex items-center justify-center border border-purple-500/20"
              >
                <span className="text-xs text-white font-manrope">#{i + 1}</span>
              </motion.div>
              
              {/* Service Status */}
              <motion.div
                animate={{ opacity: [0.5, 1, 0.5] }}
                transition={{ duration: 2, repeat: Infinity, delay: i * 0.4 }}
                className="absolute -top-1 -left-1 w-2 h-2 bg-green-400 rounded-full"
              ></motion.div>
            </motion.div>
          ))}
          
          {/* Microservices Label */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 1.4 }}
            className="text-xs text-white font-manrope whitespace-nowrap"
          >
            Services
          </motion.div>
        </motion.div>
      </div>

      {/* Data Flow Lines */}
      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30 z-15">
        <defs>
          <linearGradient id="flowGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#22c55e" stopOpacity="0.6" />
            <stop offset="50%" stopColor="#3b82f6" stopOpacity="0.8" />
            <stop offset="100%" stopColor="#8b5cf6" stopOpacity="0.6" />
          </linearGradient>
          <linearGradient id="flowGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#8b5cf6" stopOpacity="0.6" />
            <stop offset="50%" stopColor="#3b82f6" stopOpacity="0.8" />
            <stop offset="100%" stopColor="#22c55e" stopOpacity="0.6" />
          </linearGradient>
        </defs>
        
        {/* Database to API Flow */}
        <motion.path
          d="M 30% 50% Q 40% 45% 50% 50%"
          fill="none"
          stroke="url(#flowGradient1)"
          strokeWidth="2"
          strokeDasharray="4,4"
          initial={{ pathLength: 0 }}
          animate={{ pathLength: 1 }}
          transition={{ duration: 2, repeat: Infinity, repeatType: "loop" }}
        />
        
        {/* API to Services Flow */}
        <motion.path
          d="M 50% 50% Q 60% 45% 70% 50%"
          fill="none"
          stroke="url(#flowGradient2)"
          strokeWidth="2"
          strokeDasharray="4,4"
          initial={{ pathLength: 0 }}
          animate={{ pathLength: 1 }}
          transition={{ duration: 2, repeat: Infinity, repeatType: "loop", delay: 0.5 }}
        />
      </svg>

      {/* Performance Metrics - Top Right */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, delay: 1.6 }}
        className="absolute top-6 right-6 z-25"
      >
        <div className="bg-black/40 backdrop-blur-sm rounded-lg p-3 border border-white/10">
          <div className="space-y-2">
            <div className="flex items-center space-x-2">
              <motion.div
                animate={{ scale: [1, 1.2, 1] }}
                transition={{ duration: 2, repeat: Infinity }}
                className="w-2 h-2 bg-green-400 rounded-full"
              ></motion.div>
              <span className="text-green-400 text-xs font-manrope">2ms Latency</span>
            </div>
            <div className="flex items-center space-x-2">
              <motion.div
                animate={{ scale: [1, 1.2, 1] }}
                transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
                className="w-2 h-2 bg-blue-400 rounded-full"
              ></motion.div>
              <span className="text-blue-400 text-xs font-manrope">1M+ Requests/hr</span>
            </div>
            <div className="flex items-center space-x-2">
              <motion.div
                animate={{ scale: [1, 1.2, 1] }}
                transition={{ duration: 2, repeat: Infinity, delay: 1 }}
                className="w-2 h-2 bg-purple-400 rounded-full"
              ></motion.div>
              <span className="text-purple-400 text-xs font-manrope">Auto-Scaling</span>
            </div>
          </div>
        </div>
      </motion.div>

      {/* Tech Stack - Bottom Left */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, delay: 1.8 }}
        className="absolute bottom-6 left-6 z-25"
      >
        <div className="bg-black/40 backdrop-blur-sm rounded-lg p-3 border border-white/10">
          <div className="flex space-x-2">
            {[
              { name: "Node.js", color: "bg-green-600/20 text-green-400" },
              { name: "SQL", color: "bg-blue-600/20 text-blue-400" },
              { name: "Redis", color: "bg-red-600/20 text-red-400" },
              { name: "Docker", color: "bg-cyan-600/20 text-cyan-400" }
            ].map((tech, index) => (
              <motion.div
                key={tech.name}
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ duration: 0.3, delay: 2 + index * 0.1 }}
                className={`px-2 py-1 ${tech.color} border border-current/20 rounded text-xs font-manrope`}
              >
                {tech.name}
              </motion.div>
            ))}
          </div>
        </div>
      </motion.div>

      {/* Load Balancer Indicator */}
      <motion.div
        initial={{ opacity: 0, scale: 0 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.5, delay: 2.2 }}
        className="absolute bottom-6 right-6 z-25"
      >
        <motion.div
          animate={{ rotate: [0, 360] }}
          transition={{ duration: 12, repeat: Infinity, ease: "linear" }}
          className="w-8 h-8 border-2 border-gray-600 border-t-accent rounded-full"
        ></motion.div>
      </motion.div>
    </div>
  );
};