'use client';

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

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

export default function ProductsPage({ 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, 'products');

    const translations = {
        'zh-CN': {
            nav: {
                home: '首页',
                products: '产品',
                pricing: '价格',
                support: '支持',
                contact: '联系我们',
            },
            products: {
                title: '我们的产品',
                subtitle: '全面的云服务器解决方案',
                description: '从基础云服务器到企业级解决方案，满足您的所有需求',
                basic: {
                    title: '基础版',
                    price: '¥99/月',
                    features: ['2核CPU', '4GB内存', '50GB SSD', '1TB流量', '基础支持'],
                },
                pro: {
                    title: '专业版',
                    price: '¥299/月',
                    features: ['4核CPU', '8GB内存', '100GB SSD', '3TB流量', '优先支持', 'SSL证书'],
                },
                enterprise: {
                    title: '企业版',
                    price: '¥999/月',
                    features: [
                        '8核CPU',
                        '16GB内存',
                        '500GB SSD',
                        '无限流量',
                        '24/7专属支持',
                        'DDoS防护',
                        '备份服务',
                    ],
                },
                cta: '立即购买',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 版权所有.`,
            },
        },
        'zh-TW': {
            nav: {
                home: '首頁',
                products: '產品',
                pricing: '價格',
                support: '支援',
                contact: '聯絡我們',
            },
            products: {
                title: '我們的產品',
                subtitle: '全面的雲端伺服器解決方案',
                description: '從基礎雲端伺服器到企業級解決方案，滿足您的所有需求',
                basic: {
                    title: '基礎版',
                    price: 'NT$399/月',
                    features: ['2核CPU', '4GB記憶體', '50GB SSD', '1TB流量', '基礎支援'],
                },
                pro: {
                    title: '專業版',
                    price: 'NT$1199/月',
                    features: [
                        '4核CPU',
                        '8GB記憶體',
                        '100GB SSD',
                        '3TB流量',
                        '優先支援',
                        'SSL憑證',
                    ],
                },
                enterprise: {
                    title: '企業版',
                    price: 'NT$3999/月',
                    features: [
                        '8核CPU',
                        '16GB記憶體',
                        '500GB SSD',
                        '無限流量',
                        '24/7專屬支援',
                        'DDoS防護',
                        '備份服務',
                    ],
                },
                cta: '立即購買',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 版權所有.`,
            },
        },
        en: {
            nav: {
                home: 'Home',
                products: 'Products',
                pricing: 'Pricing',
                support: 'Support',
                contact: 'Contact',
            },
            products: {
                title: 'Our Products',
                subtitle: 'Comprehensive Cloud Server Solutions',
                description:
                    'From basic cloud servers to enterprise solutions, we meet all your needs',
                basic: {
                    title: 'Basic',
                    price: '$15/month',
                    features: [
                        '2 CPU Cores',
                        '4GB RAM',
                        '50GB SSD',
                        '1TB Bandwidth',
                        'Basic Support',
                    ],
                },
                pro: {
                    title: 'Professional',
                    price: '$45/month',
                    features: [
                        '4 CPU Cores',
                        '8GB RAM',
                        '100GB SSD',
                        '3TB Bandwidth',
                        'Priority Support',
                        'SSL Certificate',
                    ],
                },
                enterprise: {
                    title: 'Enterprise',
                    price: '$149/month',
                    features: [
                        '8 CPU Cores',
                        '16GB RAM',
                        '500GB SSD',
                        'Unlimited Bandwidth',
                        '24/7 Dedicated Support',
                        'DDoS Protection',
                        'Backup Service',
                    ],
                },
                cta: 'Buy Now',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. All rights reserved.`,
            },
        },
        ko: {
            nav: {
                home: '홈',
                products: '제품',
                pricing: '가격',
                support: '지원',
                contact: '연락처',
            },
            products: {
                title: '우리의 제품',
                subtitle: '포괄적인 클라우드 서버 솔루션',
                description:
                    '기본 클라우드 서버부터 엔터프라이즈 솔루션까지, 모든 요구사항을 충족합니다',
                basic: {
                    title: '베이직',
                    price: '₩18,000/월',
                    features: ['2코어 CPU', '4GB RAM', '50GB SSD', '1TB 대역폭', '기본 지원'],
                },
                pro: {
                    title: '프로페셔널',
                    price: '₩54,000/월',
                    features: [
                        '4코어 CPU',
                        '8GB RAM',
                        '100GB SSD',
                        '3TB 대역폭',
                        '우선 지원',
                        'SSL 인증서',
                    ],
                },
                enterprise: {
                    title: '엔터프라이즈',
                    price: '₩179,000/월',
                    features: [
                        '8코어 CPU',
                        '16GB RAM',
                        '500GB SSD',
                        '무제한 대역폭',
                        '24/7 전용 지원',
                        'DDoS 보호',
                        '백업 서비스',
                    ],
                },
                cta: '지금 구매',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 모든 권리 보유.`,
            },
        },
        ja: {
            nav: {
                home: 'ホーム',
                products: '製品',
                pricing: '価格',
                support: 'サポート',
                contact: 'お問い合わせ',
            },
            products: {
                title: '私たちの製品',
                subtitle: '包括的なクラウドサーバーソリューション',
                description:
                    '基本的なクラウドサーバーからエンタープライズソリューションまで、すべてのニーズにお応えします',
                basic: {
                    title: 'ベーシック',
                    price: '¥2,000/月',
                    features: ['2コアCPU', '4GB RAM', '50GB SSD', '1TB帯域幅', '基本サポート'],
                },
                pro: {
                    title: 'プロフェッショナル',
                    price: '¥6,000/月',
                    features: [
                        '4コアCPU',
                        '8GB RAM',
                        '100GB SSD',
                        '3TB帯域幅',
                        '優先サポート',
                        'SSL証明書',
                    ],
                },
                enterprise: {
                    title: 'エンタープライズ',
                    price: '¥20,000/月',
                    features: [
                        '8コアCPU',
                        '16GB RAM',
                        '500GB SSD',
                        '無制限帯域幅',
                        '24/7専用サポート',
                        'DDoS保護',
                        'バックアップサービス',
                    ],
                },
                cta: '今すぐ購入',
            },
            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="gvokikz">
            <BackgroundElements data-oid="2aoqylo" />

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

            {/* Products Content */}
            <main className="relative z-10 max-w-7xl mx-auto px-6 py-12" data-oid="wy6:ecu">
                {/* Header */}
                <div
                    className={`text-center mb-16 transition-all duration-1000 delay-300 ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-20 opacity-0'}`}
                    data-oid="vf0n.e8"
                >
                    <h1 className="text-5xl lg:text-6xl font-bold mb-6" data-oid="-og2dp_">
                        <span
                            className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent"
                            data-oid="t07m0fd"
                        >
                            {t.products.title}
                        </span>
                    </h1>
                    <p className="text-xl text-purple-300 mb-4" data-oid="_wgog53">
                        {t.products.subtitle}
                    </p>
                    <p className="text-lg text-gray-300 max-w-3xl mx-auto" data-oid="rw5z17i">
                        {t.products.description}
                    </p>
                </div>

                {/* Product Cards */}
                <div
                    className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
                    data-oid="g7la5aa"
                >
                    {[t.products.basic, t.products.pro, t.products.enterprise].map(
                        (product, index) => (
                            <div
                                key={index}
                                className={`group relative transition-all duration-1000 delay-${500 + index * 200} ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-20 opacity-0'}`}
                                data-oid="1v2c_8-"
                            >
                                <div
                                    className="bg-gray-800/50 backdrop-blur-sm p-8 rounded-2xl border border-gray-700 hover:border-purple-500/50 transition-all duration-300 hover:transform hover:scale-105 h-full flex flex-col"
                                    data-oid="n7b.e72"
                                >
                                    <div className="text-center mb-8" data-oid="p:upmr9">
                                        <h3
                                            className="text-2xl font-bold text-white mb-4"
                                            data-oid="ax7p7wz"
                                        >
                                            {product.title}
                                        </h3>
                                        <div
                                            className="text-4xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent mb-6"
                                            data-oid="j3qsrxb"
                                        >
                                            {product.price}
                                        </div>
                                    </div>

                                    <ul className="space-y-4 mb-8 flex-grow" data-oid="o92ug3l">
                                        {product.features.map((feature, featureIndex) => (
                                            <li
                                                key={featureIndex}
                                                className="flex items-center text-gray-300"
                                                data-oid="q33ccbd"
                                            >
                                                <div
                                                    className="w-2 h-2 bg-purple-500 rounded-full mr-3"
                                                    data-oid="16rsuht"
                                                ></div>
                                                {feature}
                                            </li>
                                        ))}
                                    </ul>

                                    <button
                                        className="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105 mt-auto"
                                        data-oid="tqnhyno"
                                    >
                                        {t.products.cta}
                                    </button>
                                </div>

                                {/* Hover effect */}
                                <div
                                    className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300"
                                    data-oid="a1.p4b1"
                                ></div>
                            </div>
                        ),
                    )}
                </div>
            </main>

            <Footer t={t} data-oid="n8k_dlk" />
        </div>
    );
}