import { motion } from "motion/react";
import { Button } from "./ui/button";
import { Card, CardContent } from "./ui/card";
import { Badge } from "./ui/badge";
import { Car, Users, Star, Clock, Zap } from "lucide-react";

interface Vehicle {
  id: string;
  type: string;
  name: string;
  price: number;
  capacity: number;
  rating: number;
  estimatedTime: string;
  features: string[];
  image: string;
}

interface VehicleSelectionProps {
  vehicles: Vehicle[];
  onSelect: (vehicle: Vehicle) => void;
}

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const cardVariants = {
  hidden: { opacity: 0, x: -20 },
  visible: {
    opacity: 1,
    x: 0,
    transition: {
      duration: 0.5,
      ease: "easeOut"
    }
  }
};

export function VehicleSelection({ vehicles, onSelect }: VehicleSelectionProps) {
  return (
    <div className="space-y-4">
      <motion.h2 
        className="mb-6"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        Choose Your Vehicle
      </motion.h2>
      
      <motion.div 
        className="grid gap-4"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        {vehicles.map((vehicle, index) => (
          <motion.div
            key={vehicle.id}
            variants={cardVariants}
            whileHover={{ 
              scale: 1.02,
              transition: { duration: 0.2 }
            }}
            whileTap={{ scale: 0.98 }}
          >
            <Card className="hover:shadow-lg transition-all duration-300 cursor-pointer border-2 hover:border-primary/20 group">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <motion.div 
                      className="w-16 h-16 bg-gradient-to-br from-primary/10 to-primary/20 rounded-lg flex items-center justify-center relative overflow-hidden"
                      whileHover={{ rotate: [0, -5, 5, 0] }}
                      transition={{ duration: 0.5 }}
                    >
                      <motion.div
                        animate={{ 
                          y: [0, -2, 0],
                        }}
                        transition={{ 
                          duration: 2,
                          repeat: Infinity,
                          ease: "easeInOut"
                        }}
                      >
                        <Car className="h-8 w-8 text-primary" />
                      </motion.div>
                      
                      {/* Animated sparkle effect */}
                      <motion.div
                        className="absolute top-1 right-1"
                        animate={{ 
                          opacity: [0, 1, 0],
                          scale: [0.5, 1, 0.5]
                        }}
                        transition={{ 
                          duration: 2,
                          repeat: Infinity,
                          delay: index * 0.3
                        }}
                      >
                        <Zap className="h-3 w-3 text-yellow-400" />
                      </motion.div>
                    </motion.div>
                    
                    <div className="space-y-1">
                      <motion.h3 
                        className="font-medium group-hover:text-primary transition-colors"
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ delay: 0.2 }}
                      >
                        {vehicle.name}
                      </motion.h3>
                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        <motion.div
                          animate={{ rotate: [0, 360] }}
                          transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
                        >
                          <Users className="h-4 w-4" />
                        </motion.div>
                        <span>{vehicle.capacity} passengers</span>
                        <span>•</span>
                        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                        <motion.span
                          animate={{ scale: [1, 1.1, 1] }}
                          transition={{ duration: 2, repeat: Infinity }}
                        >
                          {vehicle.rating}
                        </motion.span>
                      </div>
                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        <motion.div
                          animate={{ rotate: [0, 360] }}
                          transition={{ duration: 60, repeat: Infinity, ease: "linear" }}
                        >
                          <Clock className="h-4 w-4" />
                        </motion.div>
                        <span>{vehicle.estimatedTime}</span>
                      </div>
                      <motion.div 
                        className="flex gap-1 mt-2"
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.3 }}
                      >
                        {vehicle.features.map((feature, featureIndex) => (
                          <motion.div
                            key={featureIndex}
                            initial={{ opacity: 0, scale: 0.8 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={{ delay: 0.4 + featureIndex * 0.1 }}
                            whileHover={{ scale: 1.1 }}
                          >
                            <Badge variant="secondary" className="text-xs">
                              {feature}
                            </Badge>
                          </motion.div>
                        ))}
                      </motion.div>
                    </div>
                  </div>
                  
                  <div className="text-right space-y-2">
                    <motion.div 
                      className="text-right"
                      initial={{ scale: 0.8, opacity: 0 }}
                      animate={{ scale: 1, opacity: 1 }}
                      transition={{ delay: 0.2 }}
                      whileHover={{ scale: 1.1 }}
                    >
                      <div className="text-2xl font-semibold text-primary">₹{vehicle.price}</div>
                    </motion.div>
                    <motion.div
                      whileHover={{ scale: 1.05 }}
                      whileTap={{ scale: 0.95 }}
                    >
                      <Button 
                        onClick={() => onSelect(vehicle)} 
                        className="w-full group-hover:shadow-lg transition-shadow"
                      >
                        <motion.span
                          animate={{ x: [0, 2, 0] }}
                          transition={{ duration: 2, repeat: Infinity }}
                        >
                          Select
                        </motion.span>
                      </Button>
                    </motion.div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </motion.div>
    </div>
  );
}