import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { StorageService } from '../services/storageService';
import { UserProfile } from '../types';
import { Logo } from '../components/ui/Logo';
import { TypewriterLoop, TextReveal } from '../components/animations/TextReveal';
import { ArrowRight, Activity, Zap } from 'lucide-react';

const Greeting: React.FC = () => {
  const navigate = useNavigate();
  const [profile, setProfile] = useState<UserProfile | null>(null);
  const [showContent, setShowContent] = useState(false);
  const [showInteraction, setShowInteraction] = useState(false);
  const [showWish, setShowWish] = useState(false);

  useEffect(() => {
    const init = async () => {
      const p = await StorageService.getProfile();
      if (!p) {
        navigate('/auth');
        return;
      }
      setProfile(p);
      
      // Accelerated entrance sequence for better UX
      setTimeout(() => setShowContent(true), 100);

      // Trigger wish text
      setTimeout(() => {
        setShowWish(true);
      }, 1000);

      // Reveal the button much faster so it's not "missed"
      setTimeout(() => {
        setShowInteraction(true);
      }, 2000);
    };
    init();
  }, [navigate]);

  const handleEnter = () => {
    navigate('/');
  };

  if (!profile) return null;

  const firstName = profile.name.split(' ')[0];
  
  // Time-based wish logic
  const hour = new Date().getHours();
  const timeOfDay = hour < 12 ? "morning" : hour < 18 ? "afternoon" : "evening";
  const wishText = `Wishing you a productive ${timeOfDay}.`;

  return (
    <div className="min-h-screen w-full flex flex-col items-center justify-center bg-black relative overflow-hidden font-sans text-white selection:bg-red-500/30 p-6">
       
       {/* High-Resolution Dynamic Background Decor - Updated to Mountain Night */}
       <div 
         className="absolute inset-0 bg-cover bg-center opacity-70"
         style={{ backgroundImage: "url('https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?q=80&w=2400&auto=format&fit=crop')" }}
       ></div>
       
       {/* Overlays - Darker for text legibility without boxes */}
       <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-black/90"></div>
       <div className="absolute inset-0 bg-black/20"></div>

       {/* Massive Background Logo Watermark */}
       <div className="absolute inset-0 flex items-center justify-center pointer-events-none select-none overflow-hidden opacity-[0.05]">
          <Logo className="w-[120vh] h-[120vh] animate-bg-pulse" />
       </div>

       <div className={`z-10 flex flex-col items-center justify-center w-full max-w-5xl relative transition-all duration-1000 transform pb-20 ${showContent ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          
          {/* Top Status Indicators */}
          <div className="flex items-center gap-6 mb-16 px-8 py-3 rounded-full border border-white/5 animate-in fade-in slide-in-from-top-4 duration-1000">
             <div className="flex items-center gap-2.5">
                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse shadow-[0_0_10px_#22c55e]"></div>
                <span className="text-[10px] font-black uppercase tracking-[0.3em] text-gray-300">Identity Verified</span>
             </div>
             <div className="w-px h-3 bg-white/20"></div>
             <div className="flex items-center gap-2.5">
                <Activity size={12} className="text-red-500" />
                <span className="text-[10px] font-black uppercase tracking-[0.3em] text-gray-300">System Ready</span>
             </div>
          </div>

          {/* Logo Section */}
          <div className="relative mb-12 transform hover:scale-110 transition-transform duration-700 animate-in zoom-in duration-1000">
             <div className="absolute inset-0 bg-red-600 blur-[80px] opacity-20 animate-pulse"></div>
             <Logo className="w-28 h-28 md:w-48 md:h-48 relative z-10 drop-shadow-[0_0_50px_rgba(220,38,38,0.8)]" />
          </div>

          {/* Main Welcome Title */}
          <h1 className="text-4xl md:text-[5rem] font-black text-white uppercase italic tracking-tighter mb-8 animate-in fade-in slide-in-from-bottom-2 duration-1000 delay-500 text-center leading-[0.9] drop-shadow-[0_10px_30px_rgba(0,0,0,0.8)]">
             Welcome to <span className="text-red-500 drop-shadow-[0_0_30px_rgba(220,38,38,0.6)]">Rudraksha</span>
          </h1>

          {/* Dynamic Greeting Text - Clean (No Box) */}
          <div className="text-center w-full max-w-4xl animate-in zoom-in duration-700 mb-10">
              <div className="text-3xl md:text-6xl font-black tracking-tighter leading-tight text-white drop-shadow-[0_5px_15px_rgba(0,0,0,1)]">
                <TypewriterLoop 
                  words={[
                    `Namaste, ${firstName}`,
                    `नमस्ते, ${firstName}`,       // Nepali
                    `ज्वजलपा, ${firstName}`,      // Newari
                    `सेवारो, ${firstName}`,       // Limbu
                    `टाशी देलेक, ${firstName}`,    // Sherpa/Tibetan
                    `लसकुस, ${firstName}`,        // Newari (Welcome)
                    "Success awaits.",
                    "Let's begin."
                  ]} 
                  className="inline-block"
                  typingSpeed={70}
                  deletingSpeed={35}
                  pauseDuration={1800}
                />
              </div>
          </div>

          {/* Wish text */}
          <div className={`transition-all duration-1000 absolute bottom-36 ${showWish ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`}>
            {showWish && (
              <div className="text-lg md:text-xl font-medium text-gray-300 tracking-[0.2em] uppercase drop-shadow-md">
                  <TextReveal text={wishText} delay={0} type="stagger" className="justify-center" />
              </div>
            )}
          </div>

          {/* Interaction Button - "START DAY" */}
          <div className={`mt-8 transition-all duration-1000 transform ${showInteraction ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-16 scale-90 pointer-events-none'}`}>
             <button 
                onClick={handleEnter}
                className="group relative px-12 py-6 md:px-20 md:py-10 bg-white text-black rounded-[4rem] flex items-center gap-8 transition-all hover:scale-105 active:scale-95 shadow-[0_0_60px_rgba(255,255,255,0.3)] overflow-hidden border-4 border-transparent hover:border-red-600"
             >
                {/* Visual Effects */}
                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-red-500/20 to-transparent -translate-x-full group-hover:animate-shine transition-all duration-1000"></div>
                
                <span className="relative z-10 text-2xl md:text-4xl font-black tracking-[0.3em] uppercase italic">Start Day</span>
                
                <div className="relative z-10 w-12 h-12 md:w-16 md:h-16 bg-black rounded-full flex items-center justify-center group-hover:rotate-12 transition-all shadow-xl">
                    <ArrowRight size={32} className="text-white group-hover:scale-125 transition-transform" />
                </div>
             </button>
             
             {/* Interaction Hint */}
             <div className="flex flex-col items-center mt-8 gap-3 opacity-50 animate-bounce">
                <Zap size={16} className="fill-white text-white" />
             </div>
          </div>

       </div>

       <style>{`
         @keyframes shine {
           0% { transform: translateX(-100%); }
           100% { transform: translateX(100%); }
         }
         @keyframes bg-pulse {
           0%, 100% { opacity: 0.05; transform: scale(1); }
           50% { opacity: 0.1; transform: scale(1.05); }
         }
         .animate-bg-pulse {
           animation: bg-pulse 12s ease-in-out infinite;
         }
         .group:hover .animate-shine {
           animation: shine 1.2s infinite;
         }
       `}</style>
    </div>
  );
};

export default Greeting;