import React, { useState, useEffect, useRef } from 'react';
import { Heart, MessageCircle, Share2, Menu, Sparkles, ChevronRight, X } from 'lucide-react';

export default function App() {
  const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
  const [showCard, setShowCard] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  
  // Use a map for refs to ensure stability
  const videoRefs = useRef({});

  // The playlist of background vibes
  const videos = [
    "https://res.cloudinary.com/daxmufdti/video/upload/v1766471626/1113256_Bachelorette_Amusing_1920x1080-2_pjgurb.mp4",
    "https://res.cloudinary.com/daxmufdti/video/upload/v1766471264/0_Women_Friends_1920x1080-2_zmxfwo.mp4",
    "https://res.cloudinary.com/daxmufdti/video/upload/v1766471395/5079141_Affection_Loving_1920x1080-2_dqgcsj.mp4"
  ];

  // Handle Playback Logic
  useEffect(() => {
    const playCurrentVideo = async () => {
      const currentVideo = videoRefs.current[currentVideoIndex];
      
      // Safety check
      if (!currentVideo) return;

      try {
        if (currentVideo.paused) {
          currentVideo.currentTime = 0;
          await currentVideo.play();
        }
      } catch (error) {
        console.warn("Video playback interrupted:", error);
      }

      // Pause others
      Object.keys(videoRefs.current).forEach((key) => {
        const idx = parseInt(key);
        if (idx !== currentVideoIndex && videoRefs.current[idx]) {
          videoRefs.current[idx].pause();
        }
      });
    };

    playCurrentVideo();
  }, [currentVideoIndex]);

  const handleVideoEnd = (index) => {
    if (index === currentVideoIndex) {
      setCurrentVideoIndex((prev) => (prev + 1) % videos.length);
    }
  };

  return (
    // 1. Force black background on the absolute outer container
    <div className="min-h-screen flex items-center justify-center font-sans bg-black text-white" style={{ backgroundColor: '#000000' }}>
      
      {/* 2. Main App Container - Removed the opacity animation that was hiding the app */}
      <div className="relative w-full max-w-md h-[100dvh] bg-black overflow-hidden shadow-2xl sm:rounded-[2rem] sm:border-8 sm:border-gray-900">
        
        {/* Background Video Layer */}
        <div className="absolute inset-0 z-0 bg-black">
          {videos.map((src, index) => (
            <div 
              key={src}
              className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
                index === currentVideoIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'
              }`}
            >
              <div className="absolute inset-0 bg-black/20 z-10 pointer-events-none" />
              
              <video
                ref={el => videoRefs.current[index] = el}
                className="w-full h-full object-cover"
                muted
                playsInline
                autoPlay={index === 0} // Autoplay the first one immediately
                preload="auto"
                onEnded={() => handleVideoEnd(index)}
              >
                <source src={src} type="video/mp4" />
              </video>
            </div>
          ))}
        </div>

        {/* Top Navigation */}
        <div className="absolute top-0 left-0 right-0 z-20 p-6 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <div className="bg-white/20 backdrop-blur-md p-2 rounded-full shadow-lg">
              <Sparkles size={18} className="text-pink-300" />
            </div>
            <span className="text-white font-bold tracking-wider text-lg drop-shadow-md">VIBE CHECK</span>
          </div>
          <button 
            onClick={() => setIsMenuOpen(true)}
            className="text-white p-2 hover:bg-white/10 rounded-full transition active:scale-95"
          >
            <Menu size={24} />
          </button>
        </div>

        {/* Floating "Join Squad" Button (Landing State) */}
        <div 
          className={`absolute bottom-10 left-6 right-6 z-20 transition-all duration-500 transform ${
            showCard ? 'translate-y-20 opacity-0 pointer-events-none' : 'translate-y-0 opacity-100 pointer-events-auto'
          }`}
        >
           <button 
              onClick={() => setShowCard(true)}
              className="w-full bg-white/95 backdrop-blur-sm text-black font-extrabold py-5 rounded-2xl flex items-center justify-center gap-3 hover:bg-white transition shadow-[0_0_30px_rgba(236,72,153,0.3)] group"
           >
              <span className="text-lg tracking-wide">Join Our Squad</span>
              <ChevronRight size={20} className="text-pink-500 group-hover:translate-x-1 transition-transform" />
           </button>
        </div>

        {/* Info Card (Expanded State) */}
        <div 
          className={`absolute bottom-0 left-0 right-0 z-30 pointer-events-auto bg-gray-900/40 backdrop-blur-xl border-t border-white/20 rounded-t-[2.5rem] p-8 text-white transform transition-all duration-500 ease-out ${
            showCard ? 'translate-y-0 opacity-100' : 'translate-y-[110%] opacity-0'
          }`}
        >
          {/* Card Header */}
          <div className="flex justify-between items-start mb-6">
            <div className="flex gap-2">
              <span className="bg-gradient-to-r from-pink-500 to-rose-500 text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-widest shadow-lg">Trending</span>
            </div>
            <button 
              onClick={() => setShowCard(false)} 
              className="p-2 bg-white/10 hover:bg-white/20 rounded-full transition -mr-2 -mt-2"
            >
               <X size={20} className="text-white" />
            </button>
          </div>
          
          <h1 className="text-3xl font-bold leading-tight mb-3">
            Find your squad. <br/>
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-pink-300 to-purple-300">
              Live your best life.
            </span>
          </h1>
          
          <p className="text-gray-300 text-sm mb-8 leading-relaxed font-medium">
            The ultimate community for connecting, sharing aesthetics, and planning the next girls' trip. No drama, just vibes.
          </p>

          <button className="w-full bg-white text-black font-bold py-4 rounded-xl flex items-center justify-center gap-2 hover:bg-gray-100 transition active:scale-95 shadow-xl">
            Sign Up Now
          </button>
          
          {/* Social Proof */}
          <div className="flex justify-center items-center gap-8 mt-8 pt-6 border-t border-white/10">
            <button className="flex flex-col items-center gap-1 group">
              <div className="p-2 bg-white/5 rounded-full group-hover:bg-pink-500/20 transition">
                <Heart size={20} className="text-pink-400 group-hover:scale-110 transition-transform" />
              </div>
              <span className="text-[10px] font-medium text-gray-400">24k</span>
            </button>
            <button className="flex flex-col items-center gap-1 group">
              <div className="p-2 bg-white/5 rounded-full group-hover:bg-blue-500/20 transition">
                <MessageCircle size={20} className="text-blue-400 group-hover:scale-110 transition-transform" />
              </div>
              <span className="text-[10px] font-medium text-gray-400">Chat</span>
            </button>
            <button className="flex flex-col items-center gap-1 group">
              <div className="p-2 bg-white/5 rounded-full group-hover:bg-purple-500/20 transition">
                <Share2 size={20} className="text-purple-400 group-hover:scale-110 transition-transform" />
              </div>
              <span className="text-[10px] font-medium text-gray-400">Share</span>
            </button>
          </div>
        </div>

        {/* Side Menu Overlay */}
        {isMenuOpen && (
          <div className="absolute inset-0 z-50 bg-black/95 backdrop-blur-xl transition-all duration-300 animate-in fade-in">
            <div className="p-6 h-full flex flex-col">
              <div className="flex justify-end mb-12">
                <button 
                  onClick={() => setIsMenuOpen(false)} 
                  className="text-white p-2 hover:bg-white/10 rounded-full transition"
                >
                  <X size={32} />
                </button>
              </div>
              <nav className="flex flex-col gap-8 text-3xl font-bold text-white px-4">
                {['Home', 'Discover', 'My Squad', 'Events', 'Profile'].map((item, i) => (
                  <a 
                    key={item} 
                    href="#" 
                    className="flex items-center gap-4 hover:text-pink-300 transition group"
                    style={{ animationDelay: `${i * 50}ms` }}
                  >
                    <span className="w-2 h-2 rounded-full bg-pink-500 opacity-0 group-hover:opacity-100 transition-opacity"/>
                    {item}
                  </a>
                ))}
              </nav>
              
              <div className="mt-auto mb-8 px-4 text-gray-500 text-sm">
                <p>Version 1.0.2</p>
                <p>Made with 💖</p>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}