'use client';

import { useState, useEffect } from 'react';
import { useTDK } from '../../lib/useTDK';
import { useRouter, usePathname } from 'next/navigation';
import Navigation from '../../components/Navigation';
import MainContent from '../../components/MainContent';
import Footer from '../../components/Footer';
import BackgroundElements from '../../components/BackgroundElements';

interface PageProps {
    params: { locale: string };
}

export default function Page({ params }: PageProps) {
    const [currentLang, setCurrentLang] = useState(params.locale);
    const [isLoaded, setIsLoaded] = useState(false);
    const router = useRouter();
    const pathname = usePathname();

    // Update TDK when language changes
    useTDK(currentLang, 'home');

    const translations = {
        'zh-CN': {
            nav: {
                home: '首页',
                products: '产品',
                pricing: '价格',
                support: '支持',
                contact: '联系我们',
            },
            hero: {
                title: '云服务器代理商',
                subtitle: '专业云计算解决方案',
                description: '为您提供高性能、高可靠性的云服务器服务，助力企业数字化转型',
                cta: '立即开始',
                learn: '了解更多',
            },
            features: {
                title: '核心优势',
                performance: '高性能计算',
                performanceDesc: '采用最新硬件配置，提供卓越计算性能',
                security: '安全可靠',
                securityDesc: '多重安全防护，保障数据安全',
                support: '24/7支持',
                supportDesc: '全天候技术支持，快速响应',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 版权所有.`,
            },
        },
        'zh-TW': {
            nav: {
                home: '首頁',
                products: '產品',
                pricing: '價格',
                support: '支援',
                contact: '聯絡我們',
            },
            hero: {
                title: '雲端伺服器代理商',
                subtitle: '專業雲端運算解決方案',
                description: '為您提供高效能、高可靠性的雲端伺服器服務，助力企業數位化轉型',
                cta: '立即開始',
                learn: '了解更多',
            },
            features: {
                title: '核心優勢',
                performance: '高效能運算',
                performanceDesc: '採用最新硬體配置，提供卓越運算效能',
                security: '安全可靠',
                securityDesc: '多重安全防護，保障資料安全',
                support: '24/7支援',
                supportDesc: '全天候技術支援，快速回應',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 版權所有.`,
            },
        },
        en: {
            nav: {
                home: 'Home',
                products: 'Products',
                pricing: 'Pricing',
                support: 'Support',
                contact: 'Contact',
            },
            hero: {
                title: 'Cloud Server Reseller',
                subtitle: 'Professional Cloud Computing Solutions',
                description:
                    'Providing high-performance, reliable cloud server services to accelerate your digital transformation',
                cta: 'Get Started',
                learn: 'Learn More',
            },
            features: {
                title: 'Core Advantages',
                performance: 'High Performance',
                performanceDesc: 'Latest hardware configuration for exceptional computing power',
                security: 'Secure & Reliable',
                securityDesc: 'Multi-layer security protection for data safety',
                support: '24/7 Support',
                supportDesc: 'Round-the-clock technical support with rapid response',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. All rights reserved.`,
            },
        },
        ko: {
            nav: {
                home: '홈',
                products: '제품',
                pricing: '가격',
                support: '지원',
                contact: '연락처',
            },
            hero: {
                title: '클라우드 서버 리셀러',
                subtitle: '전문 클라우드 컴퓨팅 솔루션',
                description:
                    '고성능, 고신뢰성 클라우드 서버 서비스로 기업의 디지털 전환을 지원합니다',
                cta: '시작하기',
                learn: '자세히 보기',
            },
            features: {
                title: '핵심 장점',
                performance: '고성능 컴퓨팅',
                performanceDesc: '최신 하드웨어 구성으로 뛰어난 컴퓨팅 성능 제공',
                security: '안전하고 신뢰할 수 있는',
                securityDesc: '다중 보안 보호로 데이터 안전 보장',
                support: '24/7 지원',
                supportDesc: '24시간 기술 지원 및 빠른 응답',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 모든 권리 보유.`,
            },
        },
        ja: {
            nav: {
                home: 'ホーム',
                products: '製品',
                pricing: '価格',
                support: 'サポート',
                contact: 'お問い合わせ',
            },
            hero: {
                title: 'クラウドサーバーリセラー',
                subtitle: 'プロフェッショナルクラウドコンピューティングソリューション',
                description:
                    '高性能で信頼性の高いクラウドサーバーサービスを提供し、企業のデジタル変革を支援します',
                cta: '今すぐ始める',
                learn: '詳細を見る',
            },
            features: {
                title: 'コアアドバンテージ',
                performance: '高性能コンピューティング',
                performanceDesc: '最新のハードウェア構成で優れたコンピューティング性能を提供',
                security: '安全で信頼性が高い',
                securityDesc: '多層セキュリティ保護でデータの安全性を保障',
                support: '24/7サポート',
                supportDesc: '24時間技術サポートと迅速な対応',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 全著作権所有.`,
            },
        },
    };

    const t = translations[currentLang as keyof typeof translations] || translations['zh-CN'];

    useEffect(() => {
        setIsLoaded(true);
        setCurrentLang(params.locale);
    }, [params.locale]);

    const handleLanguageChange = (newLang: string) => {
        const currentPath = pathname.replace(`/${currentLang}`, '');
        router.push(`/${newLang}${currentPath}`);
    };

    return (
        <div className="min-h-screen bg-gray-900 text-white overflow-hidden" data-oid="cl489_-">
            <BackgroundElements data-oid="eqevf2." />

            <Navigation
                t={t}
                currentLang={currentLang}
                onLanguageChange={handleLanguageChange}
                isLoaded={isLoaded}
                data-oid="dy35vrq"
            />

            <MainContent t={t} isLoaded={isLoaded} data-oid="bolb342" />

            <Footer t={t} data-oid="2vzc.tv" />
        </div>
    );
}