import { MapPin, Pause, Plane, Play, Sparkles, Wand2 } from 'lucide-react';
import { motion } from 'motion/react';
import { useState } from 'react';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { Button } from './ui/button';

// Import your video from assets
import cityTourVideo from '../assets/itinenary-animation-vid.mp4';

interface ItineraryCard {
  id: number;
  image: string;
}

// Single itinerary card with generic content
const itineraryCard: ItineraryCard = {
  id: 1,
  image: 'https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
};

export function LandingMagicItinerary() {
  const [isPlaying, setIsPlaying] = useState(true);
  const [videoLoaded, setVideoLoaded] = useState(false);

  const handleVideoLoad = () => {
    setVideoLoaded(true);
  };

  const togglePlayPause = () => {
    setIsPlaying(!isPlaying);
  };

  return (
    <section className="relative py-20 lg:py-32 overflow-hidden -mt-20 pt-32 z-[49]">
      {/* Dynamic Background */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none z-[5]">
        {/* Background Image as fallback */}
        <div className="absolute inset-0">
          <ImageWithFallback
            src={itineraryCard.image}
            alt="City background"
            className="w-full h-full object-cover"
          />
        </div>
        
        {/* Lightened Multi-layer Gradient Overlay */}
        <div className="absolute inset-0 bg-gradient-to-br from-rose-50/50 via-orange-50/40 to-amber-50/50" />
        <div className="absolute inset-0 backdrop-blur-lg" />
        <div className="absolute inset-0 bg-gradient-to-t from-white/30 via-transparent to-white/30" />
      </div>

      {/* White Readability Overlay - 42% Opacity */}
      <div className="absolute inset-0 bg-white/42 pointer-events-none z-[10]" />

      {/* Simplified Decorative Elements */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {/* Single Coral Gradient Blob */}
        <motion.div
          className="absolute top-20 -left-20 w-[500px] h-[500px] bg-gradient-to-br from-warm-coral/20 via-orange-400/10 to-transparent rounded-full blur-3xl will-change-transform"
          animate={{
            scale: [1, 1.15, 1],
            x: [0, 30, 0],
          }}
          transition={{ duration: 15, repeat: Infinity, ease: "easeInOut" }}
        />
        
        {/* Floating Icons */}
        {[...Array(4)].map((_, i) => (
          <motion.div
            key={i}
            className="absolute will-change-transform"
            style={{
              top: `${25 + (i * 20)}%`,
              left: `${15 + (i * 20)}%`,
            }}
            animate={{
              y: [0, -20, 0],
              opacity: [0.15, 0.35, 0.15],
            }}
            transition={{
              duration: 6 + i * 2,
              repeat: Infinity,
              ease: "easeInOut",
              delay: i * 0.8,
            }}
          >
            {i % 2 === 0 ? (
              <Plane className="w-6 h-6 text-warm-coral" />
            ) : (
              <MapPin className="w-6 h-6 text-warm-coral" />
            )}
          </motion.div>
        ))}
      </div>

      <div className="container mx-auto px-4 relative z-[101] flex flex-col items-center">
        {/* Header */}
        <div className="text-center mb-16 max-w-5xl w-full">
          <motion.div
            className="inline-flex items-center gap-3 bg-gradient-to-r from-warm-coral/10 to-orange-100/50 backdrop-blur-sm px-6 py-3 rounded-full border-2 border-warm-coral/30 shadow-xl mb-8"
            initial={{ opacity: 0, scale: 0.8, y: 20 }}
            whileInView={{ opacity: 1, scale: 1, y: 0 }}
            transition={{ duration: 0.7, ease: [0.34, 1.56, 0.64, 1] }}
            viewport={{ once: true }}
          >
            <motion.div
              animate={{
                rotate: [0, 20, -20, 0],
                scale: [1, 1.2, 1.2, 1],
              }}
              transition={{ duration: 2, repeat: Infinity }}
            >
              <Wand2 className="w-6 h-6 text-warm-coral drop-shadow-lg" />
            </motion.div>
            <span className="font-semibold text-gray-800">AI-Powered Magic Itinerary</span>
            <motion.div
              className="w-2 h-2 bg-warm-coral rounded-full"
              animate={{
                scale: [1, 1.5, 1],
                opacity: [1, 0.5, 1],
              }}
              transition={{ duration: 1.5, repeat: Infinity }}
            />
          </motion.div>

          <motion.h2
            className="text-4xl md:text-5xl lg:text-6xl mb-6 leading-tight"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.1, ease: [0.34, 1.56, 0.64, 1] }}
            viewport={{ once: true }}
          >
            <span className="font-light">Plan Your</span>{' '}
            <span className="font-bold italic bg-gradient-to-r from-warm-coral via-orange-500 to-rose-500 bg-clip-text pr-2 text-transparent drop-shadow-lg">
              Dream Journey
            </span>
            <br />
            <span className="font-normal">in Just</span>{' '}
            <span className="font-bold text-warm-coral">3 Seconds</span>
            <motion.span
              className="inline-block ml-2"
              animate={{
                rotate: [0, 10, -10, 0],
                y: [0, -5, 0],
              }}
              transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
            >
              ✨
            </motion.span>
          </motion.h2>

          <motion.p
            className="text-xl md:text-2xl text-gray-700 leading-relaxed max-w-3xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            viewport={{ once: true }}
          >
            Our AI creates <span className="font-semibold text-warm-coral">personalized itineraries</span> with 
            perfectly timed activities, optimized routes, and <span className="font-semibold text-warm-coral">curated experiences</span> tailored 
            just for you.
          </motion.p>
        </div>

        {/* Single Video Player Display */}
        <div className="max-w-6xl w-full">
          <div className="relative flex justify-center items-center">
            {/* Main Video Container - Full Height */}
            <div className="relative w-full max-w-6xl rounded-3xl overflow-hidden shadow-2xl bg-black">
              <div className="relative w-full h-full">
                {/* Single Video Player - Full Height */}
                <video
                  autoPlay
                  muted
                  loop
                  playsInline
                  onLoadedData={handleVideoLoad}
                  className="w-full h-full object-contain max-h-[70vh]"
                >
                  <source src={cityTourVideo} type="video/mp4" />
                  Your browser does not support the video tag.
                </video>

                {/* Loading State */}
                {!videoLoaded && (
                  <div className="absolute inset-0 flex items-center justify-center bg-gray-900">
                    <motion.div
                      animate={{ rotate: 360 }}
                      transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
                      className="w-12 h-12 border-4 border-warm-coral/30 border-t-warm-coral rounded-full"
                    />
                  </div>
                )}

                {/* Video Overlay Content - Minimal */}
                <div className="absolute inset-0">
                  {/* Play/Pause Control */}
                  <motion.button
                    onClick={togglePlayPause}
                    className="absolute top-6 right-6 bg-white/20 backdrop-blur-md hover:bg-white/30 p-4 rounded-full shadow-2xl border border-white/30 transition-all hover:scale-110"
                    whileHover={{ scale: 1.1 }}
                    whileTap={{ scale: 0.95 }}
                    initial={{ scale: 0, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    transition={{ delay: 0.6, duration: 0.5 }}
                  >
                    {isPlaying ? (
                      <Pause className="w-6 h-6 text-white" />
                    ) : (
                      <Play className="w-6 h-6 text-white" />
                    )}
                  </motion.button>
                </div>
              </div>

              {/* Floating Sparkles */}
              {[...Array(3)].map((_, i) => (
                <motion.div
                  key={i}
                  className="absolute pointer-events-none will-change-transform"
                  style={{
                    top: `${20 + i * 30}%`,
                    left: `${10 + i * 40}%`,
                  }}
                  animate={{
                    y: [0, -20, 0],
                    opacity: [0, 0.5, 0],
                    scale: [0, 1, 0],
                  }}
                  transition={{
                    duration: 3,
                    repeat: Infinity,
                    delay: i * 0.8,
                    ease: "easeInOut",
                  }}
                >
                  <Sparkles className="w-5 h-5 text-warm-coral" />
                </motion.div>
              ))}
            </div>
          </div>

          {/* CTA Button */}
          <motion.div
            className="flex flex-col items-center gap-6 mt-12"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            viewport={{ once: true }}
          >
            <Button
              withShine={true}
              className="py-6 px-14 rounded-full text-lg font-bold bg-gradient-to-r from-warm-coral via-orange-500 to-rose-500 hover:from-warm-coral/90 hover:via-orange-500/90 hover:to-rose-500/90 shadow-2xl hover:shadow-warm-coral/50 transition-all hover:scale-105 hover:-translate-y-1"
            >
              <span className="flex items-center gap-3">
                <Wand2 className="w-5 h-5" />
                Create My Perfect Itinerary
              </span>
            </Button>

            <p className="text-gray-600 text-sm flex items-center gap-2">
              <Sparkles className="w-4 h-4 text-warm-coral" />
              <span>Free to use • No credit card required</span>
              <Sparkles className="w-4 h-4 text-warm-coral" />
            </p>
          </motion.div>
        </div>
      </div>
    </section>
  );
}