import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Sparkles, Clock, MapPin, Coffee, Camera, UtensilsCrossed, TreePine, Building2, Star, Navigation, ChevronRight, Heart, Users } from 'lucide-react';
import { Button } from './ui/button';
import { ImageWithFallback } from './figma/ImageWithFallback';

interface MagicItineraryProps {
  onCreateItineraryClick?: () => void;
}

export function MagicItinerary({ onCreateItineraryClick }: MagicItineraryProps) {
  const [currentTime, setCurrentTime] = useState('9:41');
  const [activeItineraryStep, setActiveItineraryStep] = useState(0);

  // Animate through itinerary steps
  useEffect(() => {
    const interval = setInterval(() => {
      setActiveItineraryStep(prev => (prev + 1) % 6);
    }, 3000);

    return () => clearInterval(interval);
  }, []);

  const itinerarySteps = [
    {
      time: '9:00 AM',
      duration: '2 hours',
      title: 'Royal Botanic Gardens',
      category: 'Nature & Parks',
      description: 'Start your day with a peaceful walk through stunning gardens',
      image: 'https://images.unsplash.com/photo-1670027537688-77def132d556?w=300&h=200&fit=crop',
      icon: TreePine,
      color: 'from-green-500 to-emerald-600',
      bgColor: 'bg-green-100',
      textColor: 'text-green-700',
      status: 'upcoming'
    },
    {
      time: '11:30 AM',
      duration: '1.5 hours',
      title: 'Coffee at Centre Place',
      category: 'Coffee Culture',
      description: 'Experience Melbourne\'s famous coffee culture',
      image: 'https://images.unsplash.com/photo-1583569695977-1e5758f793d1?w=300&h=200&fit=crop',
      icon: Coffee,
      color: 'from-amber-500 to-orange-600',
      bgColor: 'bg-amber-100',
      textColor: 'text-amber-700',
      status: 'current'
    },
    {
      time: '1:00 PM',
      duration: '2 hours',
      title: 'Queen Victoria Market',
      category: 'Food & Markets',
      description: 'Lunch and shopping at Melbourne\'s iconic market',
      image: 'https://images.unsplash.com/photo-1708903965305-f8439248cebd?w=300&h=200&fit=crop',
      icon: UtensilsCrossed,
      color: 'from-red-500 to-pink-600',
      bgColor: 'bg-red-100',
      textColor: 'text-red-700',
      status: 'upcoming'
    },
    {
      time: '3:30 PM',
      duration: '1.5 hours',
      title: 'Street Art Tour',
      category: 'Art & Culture',
      description: 'Explore famous laneways and street art',
      image: 'https://images.unsplash.com/photo-1582076197789-5c2af0bb51fd?w=300&h=200&fit=crop',
      icon: Camera,
      color: 'from-purple-500 to-violet-600',
      bgColor: 'bg-purple-100',
      textColor: 'text-purple-700',
      status: 'upcoming'
    },
    {
      time: '5:00 PM',
      duration: '2 hours',
      title: 'Eureka Skydeck',
      category: 'Views & Landmarks',
      description: 'Sunset views from Melbourne\'s highest observation deck',
      image: 'https://images.unsplash.com/photo-1664738512177-f682a194a91c?w=300&h=200&fit=crop',
      icon: Building2,
      color: 'from-blue-500 to-indigo-600',
      bgColor: 'bg-blue-100',
      textColor: 'text-blue-700',
      status: 'upcoming'
    },
    {
      time: '7:30 PM',
      duration: '2 hours',
      title: 'Dinner at Southbank',
      category: 'Fine Dining',
      description: 'End your day with dinner by the Yarra River',
      image: 'https://images.unsplash.com/photo-1722943661451-1a439d092ff2?w=300&h=200&fit=crop',
      icon: UtensilsCrossed,
      color: 'from-orange-500 to-red-600',
      bgColor: 'bg-orange-100',
      textColor: 'text-orange-700',
      status: 'upcoming'
    }
  ];

  const features = [
    {
      icon: Sparkles,
      title: 'AI-Powered Recommendations',
      description: 'Our smart algorithm analyzes your preferences to create the perfect itinerary'
    },
    {
      icon: Clock,
      title: 'Optimized Timing',
      description: 'Every minute planned to perfection with travel time and queue predictions'
    },
    {
      icon: Navigation,
      title: 'Real-Time Navigation',
      description: 'Turn-by-turn directions and live updates keep you on track'
    }
  ];

  return (
    <section className="relative py-20 lg:py-32 overflow-hidden bg-gradient-to-br from-gray-50 via-white to-blue-50/30">
      {/* Animated Background Elements */}
      <div className="absolute inset-0 overflow-hidden">
        <motion.div
          className="absolute top-20 -left-20 w-96 h-96 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-full blur-3xl"
          animate={{
            x: [0, 100, 0],
            y: [0, -50, 0],
          }}
          transition={{
            duration: 20,
            repeat: Infinity,
            ease: "linear"
          }}
        />
        <motion.div
          className="absolute bottom-20 -right-20 w-96 h-96 bg-gradient-to-r from-secondary/5 to-primary/5 rounded-full blur-3xl"
          animate={{
            x: [0, -100, 0],
            y: [0, 50, 0],
          }}
          transition={{
            duration: 25,
            repeat: Infinity,
            ease: "linear"
          }}
        />
      </div>

      <div className="container mx-auto px-4 relative z-10">
        {/* Header Section */}
        <div className="text-center mb-16 max-w-5xl mx-auto">
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            whileInView={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6, ease: "easeOutBack" }}
            viewport={{ once: true }}
            className="inline-flex items-center gap-3 bg-gradient-to-r from-primary/10 to-secondary/10 px-6 py-3 rounded-full border border-primary/20 mb-8"
          >
            <motion.div
              animate={{ rotate: [0, 360] }}
              transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
            >
              <Sparkles className="w-6 h-6 text-primary" />
            </motion.div>
            <span className="font-poppins font-medium text-base text-primary">Magic Itinerary</span>
            <motion.div
              className="px-3 py-1 bg-gradient-to-r from-primary to-secondary text-white text-sm rounded-full"
              animate={{
                boxShadow: [
                  '0 0 0 rgba(99,102,241,0)',
                  '0 0 20px rgba(99,102,241,0.4)',
                  '0 0 0 rgba(99,102,241,0)'
                ]
              }}
              transition={{ duration: 2, repeat: Infinity }}
            >
              Core Feature
            </motion.div>
          </motion.div>

          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
            className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight mb-6"
          >
            <span className="font-light">A Perfect</span>{' '}
            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">Melbourne</span>{' '}
            <span className="font-normal">Plan,</span>{' '}
            <span className="font-bold">Instantly.</span>
          </motion.h2>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            viewport={{ once: true }}
            className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-4xl mx-auto"
          >
            Our AI creates personalized Melbourne itineraries in seconds. Just tell us your interests, 
            and watch as we craft the perfect day filled with attractions, dining, and experiences 
            tailored specifically for you.
          </motion.p>
        </div>

        {/* Main Content Grid */}
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center max-w-7xl mx-auto">
          
          {/* Left: Phone Mockup with Sample Itinerary */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            viewport={{ once: true }}
            className="relative"
          >
            {/* Phone Frame */}
            <div className="relative mx-auto w-80 h-[640px]">
              {/* Phone Shadow */}
              <motion.div
                className="absolute inset-0 bg-gradient-to-br from-gray-900/20 to-gray-600/20 rounded-[3rem] blur-2xl"
                animate={{
                  scale: [1, 1.02, 1],
                }}
                transition={{
                  duration: 4,
                  repeat: Infinity,
                  ease: "easeInOut"
                }}
                style={{ transform: 'translateY(20px) translateX(10px)' }}
              />
              
              {/* Phone Body */}
              <motion.div
                className="relative w-full h-full bg-gray-900 rounded-[3rem] p-2"
                animate={{
                  boxShadow: [
                    '0 25px 50px rgba(0,0,0,0.3)',
                    '0 35px 70px rgba(99,102,241,0.2)',
                    '0 25px 50px rgba(0,0,0,0.3)'
                  ]
                }}
                transition={{
                  duration: 4,
                  repeat: Infinity,
                  ease: "easeInOut"
                }}
              >
                {/* Screen */}
                <div className="w-full h-full bg-white rounded-[2.5rem] overflow-hidden relative">
                  
                  {/* Status Bar */}
                  <div className="flex items-center justify-between px-6 pt-4 pb-2 bg-white">
                    <span className="text-sm font-semibold text-gray-900">{currentTime}</span>
                    <div className="flex items-center gap-1">
                      <div className="flex gap-1">
                        <div className="w-1 h-1 bg-gray-900 rounded-full"></div>
                        <div className="w-1 h-1 bg-gray-900 rounded-full"></div>
                        <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
                        <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
                      </div>
                      <div className="w-6 h-3 border border-gray-900 rounded-sm ml-2">
                        <div className="w-4 h-full bg-green-500 rounded-sm"></div>
                      </div>
                    </div>
                  </div>

                  {/* App Header */}
                  <div className="px-6 py-4 bg-gradient-to-r from-primary to-secondary">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="text-white font-bold text-lg">Your Melbourne Day</h3>
                        <p className="text-white/90 text-sm">6 stops • 10 hours</p>
                      </div>
                      <motion.div
                        className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center"
                        animate={{ rotate: [0, 360] }}
                        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
                      >
                        <Sparkles className="w-5 h-5 text-white" />
                      </motion.div>
                    </div>
                  </div>

                  {/* Itinerary List */}
                  <div className="flex-1 overflow-hidden">
                    <div className="p-4 space-y-3 h-full overflow-y-auto">
                      {itinerarySteps.map((step, index) => (
                        <motion.div
                          key={index}
                          className={`relative rounded-2xl border-2 overflow-hidden transition-all duration-500 ${
                            index === activeItineraryStep
                              ? 'border-primary/30 bg-gradient-to-r from-primary/5 to-secondary/5 scale-[1.02] shadow-lg'
                              : 'border-gray-200 bg-white hover:border-gray-300'
                          }`}
                          animate={{
                            y: index === activeItineraryStep ? -2 : 0,
                          }}
                          transition={{ duration: 0.3 }}
                        >
                          {/* Current Activity Indicator */}
                          {index === activeItineraryStep && (
                            <motion.div
                              className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-primary to-secondary"
                              initial={{ height: 0 }}
                              animate={{ height: '100%' }}
                              transition={{ duration: 0.5 }}
                            />
                          )}

                          <div className="flex items-center gap-3 p-3">
                            {/* Time and Icon */}
                            <div className="flex-shrink-0">
                              <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
                                index === activeItineraryStep ? step.bgColor : 'bg-gray-100'
                              }`}>
                                <step.icon className={`w-6 h-6 ${
                                  index === activeItineraryStep ? step.textColor : 'text-gray-600'
                                }`} />
                              </div>
                            </div>

                            {/* Content */}
                            <div className="flex-1 min-w-0">
                              <div className="flex items-center justify-between mb-1">
                                <span className={`text-xs font-medium ${
                                  index === activeItineraryStep ? 'text-primary' : 'text-gray-500'
                                }`}>
                                  {step.time} • {step.duration}
                                </span>
                                {index === activeItineraryStep && (
                                  <motion.div
                                    className="flex items-center gap-1 text-green-600"
                                    initial={{ scale: 0 }}
                                    animate={{ scale: 1 }}
                                    transition={{ delay: 0.2 }}
                                  >
                                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                                    <span className="text-xs font-medium">Now</span>
                                  </motion.div>
                                )}
                              </div>
                              
                              <h4 className={`font-semibold mb-1 ${
                                index === activeItineraryStep ? 'text-gray-900' : 'text-gray-800'
                              }`}>
                                {step.title}
                              </h4>
                              
                              <p className="text-xs text-gray-600 mb-2 line-clamp-2">
                                {step.description}
                              </p>

                              <div className="flex items-center justify-between">
                                <span className={`text-xs px-2 py-1 rounded-full ${
                                  index === activeItineraryStep 
                                    ? 'bg-primary/10 text-primary' 
                                    : 'bg-gray-100 text-gray-600'
                                }`}>
                                  {step.category}
                                </span>
                                
                                <div className="flex items-center gap-1">
                                  <Star className="w-3 h-3 text-yellow-500 fill-current" />
                                  <span className="text-xs text-gray-600">4.8</span>
                                </div>
                              </div>
                            </div>

                            {/* Thumbnail */}
                            <div className="flex-shrink-0 w-16 h-16 rounded-xl overflow-hidden">
                              <ImageWithFallback
                                src={step.image}
                                alt={step.title}
                                className="w-full h-full object-cover"
                              />
                            </div>
                          </div>
                        </motion.div>
                      ))}
                    </div>
                  </div>

                  {/* Bottom Navigation */}
                  <div className="flex items-center justify-around py-4 bg-white border-t border-gray-100">
                    {[
                      { icon: MapPin, label: 'Map', active: true },
                      { icon: Clock, label: 'Schedule', active: false },
                      { icon: Heart, label: 'Saved', active: false },
                      { icon: Users, label: 'Share', active: false }
                    ].map((nav, idx) => (
                      <div key={idx} className={`flex flex-col items-center gap-1 ${
                        nav.active ? 'text-primary' : 'text-gray-400'
                      }`}>
                        <nav.icon className="w-5 h-5" />
                        <span className="text-xs">{nav.label}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </motion.div>

              {/* Floating Action Buttons */}
              <motion.div
                className="absolute -right-4 top-32 bg-gradient-to-r from-primary to-secondary text-white p-3 rounded-full shadow-lg"
                animate={{
                  y: [0, -10, 0],
                  boxShadow: [
                    '0 10px 25px rgba(99,102,241,0.3)',
                    '0 20px 40px rgba(99,102,241,0.5)',
                    '0 10px 25px rgba(99,102,241,0.3)'
                  ]
                }}
                transition={{
                  duration: 3,
                  repeat: Infinity,
                  ease: "easeInOut"
                }}
              >
                <Navigation className="w-5 h-5" />
              </motion.div>

              <motion.div
                className="absolute -left-4 bottom-32 bg-green-500 text-white p-3 rounded-full shadow-lg"
                animate={{
                  y: [0, 10, 0],
                  boxShadow: [
                    '0 10px 25px rgba(34,197,94,0.3)',
                    '0 20px 40px rgba(34,197,94,0.5)',
                    '0 10px 25px rgba(34,197,94,0.3)'
                  ]
                }}
                transition={{
                  duration: 3,
                  repeat: Infinity,
                  delay: 1.5,
                  ease: "easeInOut"
                }}
              >
                <Heart className="w-5 h-5" />
              </motion.div>
            </div>
          </motion.div>

          {/* Right: Features and CTA */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.5 }}
            viewport={{ once: true }}
            className="space-y-8"
          >
            
            {/* Features List */}
            <div className="space-y-6">
              {features.map((feature, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: 0.6 + index * 0.1 }}
                  viewport={{ once: true }}
                  className="flex items-start gap-4 p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-white/40 hover:border-primary/20 hover:bg-white/90 transition-all duration-300"
                >
                  <motion.div
                    className="w-12 h-12 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-xl flex items-center justify-center flex-shrink-0"
                    whileHover={{ 
                      scale: 1.1,
                      background: 'linear-gradient(135deg, rgb(99 102 241 / 0.2), rgb(168 85 247 / 0.2))'
                    }}
                    transition={{ duration: 0.2 }}
                  >
                    <feature.icon className="w-6 h-6 text-primary" />
                  </motion.div>
                  
                  <div className="flex-1">
                    <h4 className="font-semibold text-gray-900 mb-2">{feature.title}</h4>
                    <p className="text-gray-600 leading-relaxed">{feature.description}</p>
                  </div>
                </motion.div>
              ))}
            </div>

            {/* Stats */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.9 }}
              viewport={{ once: true }}
              className="grid grid-cols-3 gap-4 p-6 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-2xl border border-primary/10"
            >
              {[
                { number: '15K+', label: 'Itineraries Created' },
                { number: '4.9★', label: 'User Rating' },
                { number: '30s', label: 'Average Plan Time' }
              ].map((stat, index) => (
                <div key={index} className="text-center">
                  <motion.div
                    className="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
                    initial={{ scale: 0 }}
                    whileInView={{ scale: 1 }}
                    transition={{ duration: 0.5, delay: 1 + index * 0.1 }}
                    viewport={{ once: true }}
                  >
                    {stat.number}
                  </motion.div>
                  <div className="text-sm text-gray-600">{stat.label}</div>
                </div>
              ))}
            </motion.div>

            {/* CTA Buttons */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 1.2 }}
              viewport={{ once: true }}
              className="flex flex-col sm:flex-row gap-4"
            >
              <Button 
                withShine={true}
                size="xl"
                className="flex-1 h-14 rounded-2xl text-lg group"
                onClick={onCreateItineraryClick}
              >
                <Sparkles className="w-5 h-5 mr-2 group-hover:animate-spin" />
                Create My Itinerary
              </Button>
              
              <Button 
                variant="outline"
                size="xl"
                className="flex-1 h-14 rounded-2xl text-lg border-2 hover:border-primary/50"
              >
                See Sample Plans
                <ChevronRight className="w-5 h-5 ml-2" />
              </Button>
            </motion.div>

            {/* Trust Indicator */}
            <motion.div
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              transition={{ duration: 0.6, delay: 1.4 }}
              viewport={{ once: true }}
              className="flex items-center gap-3 text-sm text-gray-600"
            >
              <div className="flex items-center gap-1">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="w-4 h-4 text-yellow-500 fill-current" />
                ))}
              </div>
              <span>Trusted by 50,000+ travelers worldwide</span>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}