import React, { useRef, useState, useEffect } from 'react';
import { motion, useScroll, useTransform } from 'motion/react';
import { REAL_YACHT_PHOTOS, BOOKING_FORM_URL } from '../data/yachtData';
import { EntourageLogo } from './EntourageLogo';
import { ChevronDown, Volume2, VolumeX, Play, Pause, Film } from 'lucide-react';
import { VideoPlayerModal } from './VideoPlayerModal';

interface HeroProps {
  onOpenBooking: () => void;
  onOpen3DView: () => void;
}

export const Hero: React.FC<HeroProps> = ({
  onOpenBooking,
  onOpen3DView
}) => {
  const heroRef = useRef<HTMLDivElement>(null);
  const videoRef = useRef<HTMLVideoElement>(null);
  const [isPlaying, setIsPlaying] = useState(true);
  const [isMuted, setIsMuted] = useState(true);
  const [videoLoaded, setVideoLoaded] = useState(false);
  const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);

  const { scrollYProgress } = useScroll({
    target: heroRef,
    offset: ["start start", "end start"]
  });

  const mediaY = useTransform(scrollYProgress, [0, 1], ["0%", "25%"]);
  const mediaScale = useTransform(scrollYProgress, [0, 1], [1, 1.12]);
  const contentY = useTransform(scrollYProgress, [0, 1], ["0%", "-20%"]);
  const opacity = useTransform(scrollYProgress, [0, 0.85], [1, 0]);

  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.play().catch(() => {
        // Autoplay policy fallback
        setIsPlaying(false);
      });
    }
  }, []);

  const togglePlay = () => {
    if (videoRef.current) {
      if (isPlaying) {
        videoRef.current.pause();
        setIsPlaying(false);
      } else {
        videoRef.current.play().then(() => setIsPlaying(true)).catch(() => {});
      }
    }
  };

  const toggleMute = () => {
    if (videoRef.current) {
      videoRef.current.muted = !isMuted;
      setIsMuted(!isMuted);
    }
  };

  const handleOpenVideo = () => {
    setIsVideoModalOpen(true);
  };

  return (
    <>
      <section ref={heroRef} className="relative w-full h-[85vh] sm:h-[90vh] min-h-[600px] flex items-center justify-center overflow-hidden bg-[#1e2a38]">
        
        {/* Top-Left Logo inside Hero Section */}
        <div className="absolute top-6 left-6 sm:top-8 sm:left-8 z-20">
          <button
            onClick={onOpenBooking}
            className="flex items-center gap-2 group cursor-pointer text-left transition-all hover:scale-105 active:scale-95 drop-shadow-[0_4px_16px_rgba(0,0,0,0.7)]"
            aria-label="Entourage Luxury Yacht"
          >
            <EntourageLogo size="xs" variant="orange" layout="horizontal" showText={true} />
          </button>
        </div>

        {/* Video Background Layer with Parallax */}
        <motion.div 
          style={{ y: mediaY, scale: mediaScale }}
          className="absolute inset-0 z-0 h-[120%] -top-[10%] w-full pointer-events-none will-change-transform"
        >
          <video
            ref={videoRef}
            autoPlay
            muted={isMuted}
            loop
            playsInline
            poster={REAL_YACHT_PHOTOS.aerialTopDown}
            onLoadedData={() => setVideoLoaded(true)}
            className="w-full h-full object-cover object-center filter brightness-[0.92] contrast-[1.03]"
          >
            <source src="/videos/entourage_hero.mp4" type="video/mp4" />
            <source src="/videos/entourage_yacht_hero.mp4" type="video/mp4" />
            {/* Fallback to high-res poster image if video not supported */}
            <img
              src={REAL_YACHT_PHOTOS.aerialTopDown}
              alt="Entourage Luxury Superyacht Hong Kong Aerial"
              className="w-full h-full object-cover object-center filter brightness-[0.92] contrast-[1.03]"
            />
          </video>

          {/* Subtle Vignette & Deep Ocean Gradient Overlay */}
          <div className="absolute inset-0 bg-gradient-to-b from-[#1e2a38]/60 via-transparent to-[#1e2a38]/80" />
        </motion.div>

        {/* Centered Hero Content */}
        <motion.div 
          style={{ y: contentY, opacity }}
          className="relative z-10 flex flex-col items-center justify-center text-center px-4 max-w-5xl mx-auto select-none pointer-events-auto"
        >
          <div className="cursor-pointer" onClick={onOpenBooking}>
            <h1 className="text-4xl sm:text-6xl md:text-7xl font-normal tracking-[0.22em] uppercase text-white font-['Cinzel',serif] drop-shadow-[0_10px_30px_rgba(0,0,0,0.85)] hover:text-white/95 transition-colors">
              ENTOURAGE
            </h1>
          </div>
          
          <p className="mt-4 text-xs sm:text-sm uppercase tracking-[0.25em] text-white/95 font-light drop-shadow">
            22m Newly Renovated Luxury Yacht • Up to 60 Guests • Hong Kong
          </p>

          {/* Quick Action Pills with Play Video Button */}
          <div className="mt-8 flex flex-wrap items-center justify-center gap-3 sm:gap-3.5">
            {/* Play Video Button */}
            <button
              id="hero-play-video-btn"
              onClick={handleOpenVideo}
              className="px-6 py-2.5 rounded-full bg-[#e17f52] hover:bg-[#ea8e64] text-white text-xs font-bold tracking-wider uppercase transition-all hover:scale-105 active:scale-95 shadow-xl shadow-[#e17f52]/30 flex items-center gap-2 cursor-pointer group"
            >
              <span className="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                <Play className="w-3 h-3 text-white fill-current translate-x-0.5" />
              </span>
              <span>Play Video</span>
            </button>

            {/* Explore 3D Space */}
            <button
              id="hero-explore-3d-btn"
              onClick={onOpen3DView}
              className="px-6 py-2.5 rounded-full bg-[#2b3b4e]/85 hover:bg-[#3b4e63] text-white text-xs font-semibold tracking-wider uppercase backdrop-blur-md border border-[#517e8a]/40 transition-all hover:scale-105 active:scale-95 shadow-xl flex items-center gap-2 cursor-pointer"
            >
              <span className="w-2 h-2 rounded-full bg-[#517e8a] animate-pulse"></span>
              <span>Explore 3D Space</span>
            </button>

            {/* Booking Enquiry */}
            <button
              id="hero-booking-enquiry-btn"
              onClick={onOpenBooking}
              className="px-6 py-2.5 rounded-full bg-[#1e2a38]/85 hover:bg-[#2b3b4e] text-slate-100 hover:text-white text-xs font-semibold tracking-wider uppercase backdrop-blur-md border border-[#517e8a]/40 transition-all hover:scale-105 active:scale-95 shadow-xl cursor-pointer inline-flex items-center justify-center"
            >
              Booking Enquiry
            </button>
          </div>
        </motion.div>

        {/* Video Play/Pause & Sound Controls */}
        <div className="absolute bottom-6 right-6 z-20 flex items-center gap-2">
          <button
            onClick={handleOpenVideo}
            className="hidden sm:flex items-center gap-2 px-3 py-2 rounded-full bg-[#2b3b4e]/80 hover:bg-[#3b4e63] text-white text-xs font-mono border border-[#517e8a]/40 backdrop-blur-md shadow-lg transition-all hover:scale-105 active:scale-95 cursor-pointer"
            title="Watch full video"
          >
            <Film className="w-3.5 h-3.5 text-[#e17f52]" />
            <span>Full Video</span>
          </button>

          <button
            onClick={togglePlay}
            className="p-2.5 rounded-full bg-[#2b3b4e]/80 hover:bg-[#3b4e63] text-white border border-[#517e8a]/40 backdrop-blur-md shadow-lg transition-all hover:scale-105 active:scale-95 cursor-pointer"
            aria-label={isPlaying ? "Pause background video" : "Play background video"}
            title={isPlaying ? "Pause background video" : "Play background video"}
          >
            {isPlaying ? <Pause className="w-4 h-4 text-slate-200" /> : <Play className="w-4 h-4 text-[#e17f52] fill-current" />}
          </button>

          <button
            onClick={toggleMute}
            className="p-2.5 rounded-full bg-[#2b3b4e]/80 hover:bg-[#3b4e63] text-white border border-[#517e8a]/40 backdrop-blur-md shadow-lg transition-all hover:scale-105 active:scale-95 cursor-pointer"
            aria-label={isMuted ? "Unmute audio" : "Mute audio"}
            title={isMuted ? "Unmute audio" : "Mute audio"}
          >
            {isMuted ? <VolumeX className="w-4 h-4 text-slate-400" /> : <Volume2 className="w-4 h-4 text-[#e17f52]" />}
          </button>
        </div>

        {/* Scroll Down Indicator */}
        <motion.div 
          style={{ opacity }}
          className="absolute bottom-6 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center text-white/70 animate-bounce cursor-pointer" 
          onClick={() => {
            window.scrollTo({ top: window.innerHeight * 0.85, behavior: 'smooth' });
          }}
        >
          <span className="text-[10px] uppercase font-mono tracking-widest text-[#517e8a] mb-1">Scroll</span>
          <ChevronDown className="w-5 h-5 text-white/80" />
        </motion.div>

      </section>

      {/* Fullscreen Video Player Modal */}
      <VideoPlayerModal
        isOpen={isVideoModalOpen}
        onClose={() => setIsVideoModalOpen(false)}
        onOpenBooking={() => {
          setIsVideoModalOpen(false);
          onOpenBooking();
        }}
      />
    </>
  );
};