import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Navbar from '@/src/components/Navbar.tsx';
import Sidebar from '@/src/components/Sidebar.tsx';
import Footer from '@/src/components/Footer.tsx';
import { CONTENT, HERO_IMAGES } from '../constants.ts';
import { ChevronRight, Play } from 'lucide-react';
import { useLanguage } from '@/src/contexts/LanguageContext.tsx';
import { useTheme } from '@/src/contexts/ThemeContext.tsx';

const Home: React.FC = () => {
  const [activeSlide, setActiveSlide] = useState(0);
  const { language } = useLanguage();
  // Fetch all customizable data from ThemeContext
  const { heroImages, itineraries, ships, dining, videoSection } = useTheme();
  
  // Get static labels based on current language
  const t = CONTENT[language];
  const features = t.features; // Features list is still static/translatable for now

  // Carousel Logic
  useEffect(() => {
    if (heroImages.length === 0) return;
    const timer = setInterval(() => {
      setActiveSlide((prev) => (prev + 1) % heroImages.length);
    }, 5000); // Change slide every 5 seconds
    return () => clearInterval(timer);
  }, [heroImages.length]);

  return (
    <div className="min-h-screen bg-white font-sans text-vista-darkblue overflow-x-hidden">
      <Navbar />
      <Sidebar />

      {/* Hero Section with Carousel */}
      <section className="relative h-screen w-full overflow-hidden">
        {/* Carousel Background Layer */}
        {heroImages.map((img, index) => (
          <div 
            key={index}
            className={`absolute inset-0 z-0 transition-opacity duration-1000 ease-in-out ${
              activeSlide === index ? 'opacity-100' : 'opacity-0'
            }`}
          >
            <img 
              src={img} 
              alt={`Slide ${index + 1}`} 
              className="w-full h-full object-cover object-center scale-105 animate-slow-zoom" 
              loading="lazy"
              onError={(e) => {
                // Fallback to default image if API image fails to load
                const target = e.target as HTMLImageElement;
                target.src = HERO_IMAGES[Math.min(index, HERO_IMAGES.length - 1)];
              }}
            />
            {/* Text Readability Overlay: Light black tint (30%) to contrast white text */}
            <div className="absolute inset-0 bg-black/30 pointer-events-none"></div>
          </div>
        ))}
        
        {/* Carousel Dots */}
        <div className="absolute bottom-10 right-10 z-20 flex space-x-3">
          {heroImages.map((_, index) => (
            <button 
              key={index}
              onClick={() => setActiveSlide(index)}
              className={`w-2 h-2 rounded-full transition-all duration-300 ${
                activeSlide === index ? 'bg-vista-gold w-8' : 'bg-white opacity-50 hover:opacity-100'
              }`}
            />
          ))}
        </div>
        
        {/* Content Layer */}
        <div className="relative z-10 h-full flex flex-col justify-center items-center text-center px-4 drop-shadow-md">
            <h2 className="text-white text-lg md:text-xl uppercase tracking-[0.3em] mb-4 animate-fade-in-up">{t.hero.welcome}</h2>
            <h1 className="text-5xl md:text-7xl lg:text-8xl font-serif text-white mb-8 leading-tight italic">
                {t.hero.title_italic} <span className="not-italic">{t.hero.title_normal}</span>
            </h1>
            <p className="text-white max-w-2xl text-lg md:text-xl font-light mb-10 leading-relaxed opacity-90">
                {t.hero.subtitle}
            </p>
            <div className="flex space-x-6">
                <Link to="/itineraries?section=routes" className="px-8 py-4 bg-vista-gold text-white font-bold tracking-widest uppercase text-sm hover:bg-white hover:text-vista-darkblue transition-all duration-300 shadow-lg">
                    {t.hero.btn_find}
                </Link>
                <Link to="/ships" className="px-8 py-4 border border-white text-white font-bold tracking-widest uppercase text-sm hover:bg-white hover:text-vista-darkblue transition-all duration-300 shadow-lg">
                    {t.hero.btn_ships}
                </Link>
            </div>
        </div>

        {/* Scroll Indicator */}
        <div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce hidden md:block">
            <div className="w-[1px] h-16 bg-white opacity-50"></div>
        </div>
      </section>

      {/* Featured Itineraries & Activity Banner */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
            <div className="flex flex-col md:flex-row justify-between items-end mb-12">
                <div>
                    <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">{t.home.featured_sub}</span>
                    <h2 className="text-4xl font-serif text-vista-darkblue mt-3">{t.home.featured_title}</h2>
                </div>
                <Link to="/itineraries?section=routes" className="hidden md:flex items-center text-vista-darkblue font-bold text-sm tracking-widest uppercase hover:text-vista-gold transition-colors mt-4 md:mt-0">
                    {t.home.view_all} <ChevronRight size={16} className="ml-2" />
                </Link>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                {itineraries.map((item) => (
                    <div key={item.id} className="group bg-white border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer">
                        {/* Media Container: Renders Video if available, else Image */}
                        <div className="relative overflow-hidden h-64">
                            {item.video ? (
                              <video 
                                src={item.video} 
                                poster={item.image}
                                className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700"
                                autoPlay
                                muted
                                loop
                                playsInline
                                loading="lazy"
                              />
                            ) : (
                              <img 
                                src={item.image} 
                                alt={item.title} 
                                className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700" 
                                loading="lazy"
                              />
                            )}
                            <div className="absolute top-4 left-4 bg-white px-3 py-1 text-xs font-bold tracking-widest uppercase z-10 text-vista-darkblue">
                                {item.days} {t.home.days}
                            </div>
                        </div>
                        <div className="p-8">
                            <div className="text-xs text-vista-darkblue/50 uppercase tracking-widest mb-2">{item.route}</div>
                            <h3 className="text-2xl font-serif text-vista-darkblue mb-4 group-hover:text-vista-gold transition-colors">{item.title}</h3>
                            <div className="flex justify-between items-center border-t border-vista-darkblue/10 pt-4">
                                <span className="text-vista-gold font-serif italic text-xl">{item.price}</span>
                                <span className="text-xs font-bold uppercase tracking-widest text-vista-darkblue/50 group-hover:text-vista-darkblue">{t.home.details}</span>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
      </section>

      {/* Banner / Activity Highlight (Customizable Dining) */}
      <section className="relative py-32 flex items-center justify-center">
         <div className="absolute inset-0 z-0">
             <img src={dining.image} alt="Dining" className="w-full h-full object-cover brightness-50" loading="lazy" />
         </div>
         <div className="relative z-10 text-center max-w-4xl px-6">
             <h2 className="text-4xl md:text-5xl font-serif text-white italic mb-6">{dining.title}</h2>
             <p className="text-white text-lg font-light leading-relaxed mb-8">
                 {dining.description}
             </p>
             <button className="px-8 py-3 border border-white text-white font-bold tracking-widest uppercase text-xs hover:bg-white hover:text-vista-darkblue transition-all">
                 {dining.buttonText}
             </button>
         </div>
      </section>

      {/* Ship Gallery (Rolling Display) */}
      <section className="py-24 bg-white overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 mb-12 text-center">
            <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">{t.home.fleet_sub}</span>
            <h2 className="text-4xl font-serif text-vista-darkblue mt-3">{t.home.fleet_title}</h2>
        </div>

        <div className="relative w-full overflow-x-auto no-scrollbar pb-10">
            <div className="flex space-x-6 px-6 md:px-[calc((100vw-80rem)/2)]">
                {ships.map((ship) => (
                    <div key={ship.id} className="min-w-[85vw] md:min-w-[600px] relative group cursor-pointer overflow-hidden">
                        <div className="aspect-[16/9] overflow-hidden">
                            {/* Removed grayscale, added scale transform */}
                            <img src={ship.image} alt={ship.name} className="w-full h-full object-cover transition-transform duration-1000 ease-out group-hover:scale-105" loading="lazy" />
                        </div>
                        <div className="absolute bottom-0 left-0 bg-white p-6 md:p-8 max-w-md shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                            <h3 className="text-3xl font-serif text-vista-darkblue mb-2">{ship.name}</h3>
                            <p className="text-vista-darkblue/70 mb-4 line-clamp-2">{ship.description}</p>
                            <span className="text-xs font-bold uppercase tracking-widest text-vista-gold border-b border-vista-gold pb-1">{t.home.discover_ship}</span>
                        </div>
                    </div>
                ))}
            </div>
        </div>
      </section>

      {/* Video Section (Customizable) - Background Color Changed to Teal */}
      <section className="py-24 bg-vista-teal text-white">
          <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center">
              <div className="md:w-1/2 mb-10 md:mb-0 md:pr-12">
                  <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">{t.home.exp_sub}</span>
                  <h2 className="text-4xl font-serif mt-4 mb-6 leading-tight">
                    {videoSection.title} <br/><i className="font-serif">{videoSection.titleItalic}</i>
                  </h2>
                  <p className="text-white/80 font-light leading-relaxed mb-8">
                      {videoSection.description}
                  </p>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      {features.map((feat, idx) => (
                          <div key={idx} className="flex items-start">
                              <div className="w-2 h-2 bg-vista-gold mt-2 mr-3 rounded-full"></div>
                              <div>
                                  <h4 className="font-serif text-lg mb-1">{feat.title}</h4>
                                  <p className="text-sm text-white/60">{feat.description}</p>
                              </div>
                          </div>
                      ))}
                  </div>
              </div>
              <div className="md:w-1/2 w-full relative group cursor-pointer">
                  {/* Video Section */}
                  <div className="aspect-video w-full bg-black relative overflow-hidden shadow-2xl">
                      {videoSection.video ? (
                          <video 
                              src={videoSection.video} 
                              className="w-full h-full object-cover" 
                              controls 
                              poster={videoSection.thumbnail}
                              loading="lazy"
                          />
                      ) : (
                          <>  
                              <img src={videoSection.thumbnail} className="w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity" alt="Video Thumbnail" loading="lazy" />
                              <div className="absolute inset-0 flex items-center justify-center">
                                  <div className="w-20 h-20 rounded-full border border-white flex items-center justify-center group-hover:bg-white group-hover:text-vista-darkblue transition-all duration-300">
                                      <Play size={32} fill="currentColor" />
                                  </div>
                              </div>
                          </>
                      )}
                  </div>
              </div>
          </div>
      </section>

      <Footer />
    </div>
  );
};

export default Home;