import { motion } from "motion/react";
import { Button } from "./ui/button";
import { Card, CardContent } from "./ui/card";
import { CheckCircle, Star, Car, Gift, Mail } from "lucide-react";
import { Vehicle } from "../types/booking";
import { useSuccessAudio } from "../hooks/useSuccessAudio";
import { useEffect } from "react";

interface SuccessStepProps {
  selectedVehicle: Vehicle;
  onBookAnother: () => void;
}

// Confetti animation variants
const confettiElements = Array.from({ length: 20 }, (_, i) => ({
  id: i,
  x: Math.random() * 100,
  delay: Math.random() * 2,
  duration: 3 + Math.random() * 2
}));

export function SuccessStep({ selectedVehicle, onBookAnother }: SuccessStepProps) {
  const { playSuccessSound } = useSuccessAudio();

  // Play success sound when component mounts
  useEffect(() => {
    // Small delay to ensure the component is visible before playing sound
    const timer = setTimeout(() => {
      playSuccessSound();
    }, 600);

    return () => clearTimeout(timer);
  }, [playSuccessSound]);

  return (
    <motion.div 
      className="container mx-auto px-4 py-8 relative overflow-hidden"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      {/* Animated Confetti */}
      {confettiElements.map((confetti) => (
        <motion.div
          key={confetti.id}
          className="absolute w-2 h-2 bg-primary rounded-full"
          style={{ left: `${confetti.x}%`, top: '-10px' }}
          animate={{
            y: [0, window.innerHeight + 20],
            rotate: [0, 360],
            opacity: [1, 0]
          }}
          transition={{
            duration: confetti.duration,
            delay: confetti.delay,
            ease: "easeOut"
          }}
        />
      ))}
      
      <div className="max-w-2xl mx-auto relative z-10">
        <motion.div
          initial={{ scale: 0.8, opacity: 0, y: 20 }}
          animate={{ scale: 1, opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
        >
          <Card className="text-center shadow-xl border-green-200">
            <CardContent className="p-8">
              {/* Success Icon with Animation */}
              <motion.div
                className="relative mx-auto mb-6"
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ 
                  delay: 0.3, 
                  duration: 0.6, 
                  type: "spring", 
                  stiffness: 200 
                }}
              >
                <motion.div
                  animate={{ 
                    rotate: [0, 360],
                    scale: [1, 1.1, 1]
                  }}
                  transition={{ 
                    duration: 2,
                    repeat: Infinity,
                    ease: "easeInOut"
                  }}
                >
                  <CheckCircle className="h-16 w-16 text-green-500 mx-auto" />
                </motion.div>
                
                {/* Sparkle effects around the check */}
                {[0, 45, 90, 135, 180, 225, 270, 315].map((angle, index) => (
                  <motion.div
                    key={angle}
                    className="absolute w-1 h-1 bg-yellow-400 rounded-full"
                    style={{
                      top: '50%',
                      left: '50%',
                      transformOrigin: '0 0',
                      transform: `rotate(${angle}deg) translate(40px, -1px)`
                    }}
                    animate={{
                      opacity: [0, 1, 0],
                      scale: [0, 1, 0]
                    }}
                    transition={{
                      duration: 1.5,
                      repeat: Infinity,
                      delay: index * 0.2
                    }}
                  />
                ))}
              </motion.div>
              
              <motion.h1 
                className="mb-4 text-green-600"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.5 }}
              >
                Booking Confirmed!
              </motion.h1>
              
              <motion.p 
                className="text-muted-foreground mb-6"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.6 }}
              >
                Your ride has been booked successfully. Confirmation emails have been sent to both you and Sangwari Taxi.
              </motion.p>
              
              <div className="space-y-4">
                <motion.div 
                  className="bg-gradient-to-r from-muted to-muted/50 p-4 rounded-lg relative overflow-hidden"
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.7 }}
                >
                  <motion.div
                    className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-green-400 to-green-600"
                    initial={{ width: 0 }}
                    animate={{ width: '100%' }}
                    transition={{ delay: 0.8, duration: 1 }}
                  />
                  <div className="flex items-center gap-2">
                    <Gift className="h-5 w-5 text-primary" />
                    <div>
                      <p className="font-medium">Booking Reference</p>
                      <motion.p 
                        className="text-muted-foreground font-mono"
                        animate={{ color: ['#666', '#22c55e', '#666'] }}
                        transition={{ duration: 2, repeat: Infinity }}
                      >
                        #RN{Date.now().toString().slice(-6)}
                      </motion.p>
                    </div>
                  </div>
                </motion.div>
                
                <motion.div 
                  className="bg-gradient-to-r from-blue-50 to-blue-100 p-4 rounded-lg relative"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.75 }}
                >
                  <div className="flex items-center gap-2">
                    <motion.div
                      animate={{ rotate: [0, 10, -10, 0] }}
                      transition={{ duration: 2, repeat: Infinity }}
                    >
                      <Mail className="h-5 w-5 text-blue-600" />
                    </motion.div>
                    <div>
                      <p className="font-medium">Booking Confirmed</p>
                      <p className="text-sm text-muted-foreground">
                        You will be contacted at bookme@sangwaritaxi.com
                      </p>
                    </div>
                  </div>
                </motion.div>
                
                <motion.div 
                  className="bg-gradient-to-r from-primary/5 to-primary/10 p-4 rounded-lg relative"
                  initial={{ opacity: 0, x: 20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.8 }}
                >
                  <div className="flex items-center gap-2">
                    <motion.div
                      animate={{ x: [0, 3, 0] }}
                      transition={{ duration: 2, repeat: Infinity }}
                    >
                      <Car className="h-5 w-5 text-primary" />
                    </motion.div>
                    <div>
                      <motion.p 
                        className="text-lg font-semibold text-primary"
                        animate={{ scale: [1, 1.02, 1] }}
                        transition={{ duration: 1.5, repeat: Infinity }}
                      >
                        {selectedVehicle.estimatedTime}
                      </motion.p>
                    </div>
                  </div>
                </motion.div>
              </div>
              
              <motion.div 
                className="mt-6"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.9 }}
              >
                <motion.div 
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                >
                  <Button variant="outline" onClick={onBookAnother} className="w-full">
                    <Star className="h-4 w-4 mr-2" />
                    Book Another Ride
                  </Button>
                </motion.div>
              </motion.div>
            </CardContent>
          </Card>
        </motion.div>
      </div>
    </motion.div>
  );
}