'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import Header from '@/app/components/Header';
import Footer from '@/app/components/Footer';
import HeroBanner from '@/app/components/home/HeroBanner';
import ProcessSection from '@/app/components/home/ProcessSection';
import AdvantagesSection from '@/app/components/home/AdvantagesSection';
import ProductsSection from '@/app/components/home/ProductsSection';
import NewsSection from '@/app/components/home/NewsSection';
import ContactSection from '@/app/components/home/ContactSection';
import { homeTranslations, type HomeTranslations } from '@/lib/home-translations';

interface HomePageClientProps {
    locale: string;
}

// 预加载组件 - 提前加载关键页面资源
function PrefetchLinks({ locale }: { locale: string }) {
    const baseLocale = locale === 'zh' ? '' : `/${locale}`;
    
    return (
        <>
            {/* 预加载关键页面 */}
            <Link href={`${baseLocale}/products`} prefetch={true} style={{ display: 'none' }} />
            <Link href={`${baseLocale}/news`} prefetch={true} style={{ display: 'none' }} />
            <Link href={`${baseLocale}/contact`} prefetch={true} style={{ display: 'none' }} />
            <Link href={`${baseLocale}/support`} prefetch={true} style={{ display: 'none' }} />
            <Link href={`${baseLocale}/about`} prefetch={true} style={{ display: 'none' }} />
        </>
    );
}

export default function HomePageClient({ locale }: HomePageClientProps) {
    const [language, setLanguage] = useState<'zh-CN' | 'zh-TW' | 'en'>('zh-CN');
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
        // Only set language after mounting to prevent hydration mismatch
        const initialLanguage = locale === 'zh' ? 'zh-CN' : locale === 'zh-TW' ? 'zh-TW' : 'en';
        setLanguage(initialLanguage);
    }, [locale]);

    // 添加性能监控
    useEffect(() => {
        if (mounted) {
            // 预加载关键资源
            const preloadCriticalResources = () => {
                // 预加载重要图片
                const criticalImages = [
                    '/images/hero-bg.jpg',
                    '/images/cloud-services.jpg',
                    '/images/aws-logo.png'
                ];
                
                criticalImages.forEach(src => {
                    const link = document.createElement('link');
                    link.rel = 'preload';
                    link.as = 'image';
                    link.href = src;
                    document.head.appendChild(link);
                });
            };

            // 延迟执行以不阻塞初始渲染
            setTimeout(preloadCriticalResources, 100);
        }
    }, [mounted]);

    const t: HomeTranslations = homeTranslations[language] || homeTranslations['zh-CN'];

    const handleLanguageChange = (lang: string) => {
        if (lang === 'zh-CN' || lang === 'zh-TW' || lang === 'en') {
            setLanguage(lang);
        }
    };

    // Show a simple loading placeholder until mounted to prevent hydration issues
    if (!mounted) {
        return (
            <div className="min-h-screen bg-white">
                <div className="animate-pulse">
                    {/* Header placeholder */}
                    <div className="bg-white shadow-sm h-16"></div>
                    {/* Content placeholder */}
                    <div className="max-w-6xl mx-auto px-4 py-8">
                        <div className="h-96 bg-gray-200 rounded mb-8"></div>
                        <div className="space-y-4">
                            {[...Array(4)].map((_, i) => (
                                <div key={i} className="h-20 bg-gray-100 rounded"></div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-white">
            {/* 预加载关键页面 */}
            <PrefetchLinks locale={locale} />
            
            <Header
                language={language}
                setLanguage={handleLanguageChange}
                translations={t}
                locale={locale}
            />

            <HeroBanner />

            <ProcessSection 
                title={t.hero.title}
                steps={t.hero.steps}
            />

            <AdvantagesSection 
                title={t.advantages.title}
                items={t.advantages.items}
            />

            <ProductsSection 
                title={t.products.title}
                items={t.products.items}
            />

            <NewsSection 
                title={t.news.title}
                items={t.news.items}
            />

            <ContactSection 
                contact={t.contact}
                language={language}
            />

            <Footer translations={t} />
        </div>
    );
}