'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 PricingPage({ params }: PageProps) {
    const [currentLang, setCurrentLang] = useState(params.locale);
    const [isLoaded, setIsLoaded] = useState(false);
    const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly');
    const router = useRouter();
    const pathname = usePathname();

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

    const translations = {
        'zh-CN': {
            nav: {
                home: '首页',
                products: '产品',
                pricing: '价格',
                support: '支持',
                contact: '联系我们',
            },
            pricing: {
                title: '选择适合您的方案',
                subtitle: '灵活的价格方案',
                description: '无论您是个人开发者还是大型企业，我们都有适合您的方案',
                monthly: '按月付费',
                yearly: '按年付费',
                yearlyDiscount: '节省20%',
                mostPopular: '最受欢迎',
                getStarted: '开始使用',
                features: '功能特性',
                allFeatures: '查看所有功能',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 版权所有.`,
            },
        },
        'zh-TW': {
            nav: {
                home: '首頁',
                products: '產品',
                pricing: '價格',
                support: '支援',
                contact: '聯絡我們',
            },
            pricing: {
                title: '選擇適合您的方案',
                subtitle: '靈活的價格方案',
                description: '無論您是個人開發者還是大型企業，我們都有適合您的方案',
                monthly: '按月付費',
                yearly: '按年付費',
                yearlyDiscount: '節省20%',
                mostPopular: '最受歡迎',
                getStarted: '開始使用',
                features: '功能特性',
                allFeatures: '查看所有功能',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 版權所有.`,
            },
        },
        en: {
            nav: {
                home: 'Home',
                products: 'Products',
                pricing: 'Pricing',
                support: 'Support',
                contact: 'Contact',
            },
            pricing: {
                title: 'Choose Your Perfect Plan',
                subtitle: 'Flexible Pricing Plans',
                description:
                    "Whether you're an individual developer or a large enterprise, we have the right plan for you",
                monthly: 'Monthly',
                yearly: 'Yearly',
                yearlyDiscount: 'Save 20%',
                mostPopular: 'Most Popular',
                getStarted: 'Get Started',
                features: 'Features',
                allFeatures: 'View All Features',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. All rights reserved.`,
            },
        },
        ko: {
            nav: {
                home: '홈',
                products: '제품',
                pricing: '가격',
                support: '지원',
                contact: '연락처',
            },
            pricing: {
                title: '완벽한 플랜을 선택하세요',
                subtitle: '유연한 가격 플랜',
                description: '개인 개발자든 대기업이든, 귀하에게 적합한 플랜이 있습니다',
                monthly: '월간',
                yearly: '연간',
                yearlyDiscount: '20% 절약',
                mostPopular: '가장 인기',
                getStarted: '시작하기',
                features: '기능',
                allFeatures: '모든 기능 보기',
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 모든 권리 보유.`,
            },
        },
        ja: {
            nav: {
                home: 'ホーム',
                products: '製品',
                pricing: '価格',
                support: 'サポート',
                contact: 'お問い合わせ',
            },
            pricing: {
                title: '最適なプランを選択',
                subtitle: '柔軟な価格プラン',
                description: '個人開発者でも大企業でも、あなたに最適なプランをご用意しています',
                monthly: '月額',
                yearly: '年額',
                yearlyDiscount: '20%節約',
                mostPopular: '最も人気',
                getStarted: '始める',
                features: '機能',
                allFeatures: 'すべての機能を見る',
            },
            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}`);
    };

    const plans = [
        {
            name: 'Starter',
            monthlyPrice: currentLang.startsWith('zh')
                ? '¥99'
                : currentLang === 'ko'
                  ? '₩18,000'
                  : currentLang === 'ja'
                    ? '¥2,000'
                    : '$15',
            yearlyPrice: currentLang.startsWith('zh')
                ? '¥79'
                : currentLang === 'ko'
                  ? '₩14,400'
                  : currentLang === 'ja'
                    ? '¥1,600'
                    : '$12',
            features: ['2 CPU Cores', '4GB RAM', '50GB SSD', '1TB Bandwidth'],
            popular: false,
        },
        {
            name: 'Professional',
            monthlyPrice: currentLang.startsWith('zh')
                ? '¥299'
                : currentLang === 'ko'
                  ? '₩54,000'
                  : currentLang === 'ja'
                    ? '¥6,000'
                    : '$45',
            yearlyPrice: currentLang.startsWith('zh')
                ? '¥239'
                : currentLang === 'ko'
                  ? '₩43,200'
                  : currentLang === 'ja'
                    ? '¥4,800'
                    : '$36',
            features: ['4 CPU Cores', '8GB RAM', '100GB SSD', '3TB Bandwidth', 'SSL Certificate'],
            popular: true,
        },
        {
            name: 'Enterprise',
            monthlyPrice: currentLang.startsWith('zh')
                ? '¥999'
                : currentLang === 'ko'
                  ? '₩179,000'
                  : currentLang === 'ja'
                    ? '¥20,000'
                    : '$149',
            yearlyPrice: currentLang.startsWith('zh')
                ? '¥799'
                : currentLang === 'ko'
                  ? '₩143,200'
                  : currentLang === 'ja'
                    ? '¥16,000'
                    : '$119',
            features: [
                '8 CPU Cores',
                '16GB RAM',
                '500GB SSD',
                'Unlimited Bandwidth',
                '24/7 Support',
            ],

            popular: false,
        },
    ];

    return (
        <div className="min-h-screen bg-gray-900 text-white overflow-hidden" data-oid="9mszz2a">
            <BackgroundElements data-oid="i52vus3" />

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

            <main className="relative z-10 max-w-7xl mx-auto px-6 py-12" data-oid="nw37xp1">
                {/* 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="4k62m0d"
                >
                    <h1 className="text-5xl lg:text-6xl font-bold mb-6" data-oid="9.cr5pu">
                        <span
                            className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent"
                            data-oid="7-8eqli"
                        >
                            {t.pricing.title}
                        </span>
                    </h1>
                    <p className="text-xl text-purple-300 mb-4" data-oid="4ltvzcu">
                        {t.pricing.subtitle}
                    </p>
                    <p className="text-lg text-gray-300 max-w-3xl mx-auto mb-8" data-oid="cdat1b_">
                        {t.pricing.description}
                    </p>

                    {/* Billing Toggle */}
                    <div
                        className="inline-flex items-center bg-gray-800/50 backdrop-blur-sm rounded-xl p-2 border border-gray-700"
                        data-oid="yok0kup"
                    >
                        <button
                            onClick={() => setBillingCycle('monthly')}
                            className={`px-6 py-2 rounded-lg font-medium transition-all duration-300 ${
                                billingCycle === 'monthly'
                                    ? 'bg-purple-600 text-white'
                                    : 'text-gray-400 hover:text-white'
                            }`}
                            data-oid="n4wb2yf"
                        >
                            {t.pricing.monthly}
                        </button>
                        <button
                            onClick={() => setBillingCycle('yearly')}
                            className={`px-6 py-2 rounded-lg font-medium transition-all duration-300 relative ${
                                billingCycle === 'yearly'
                                    ? 'bg-purple-600 text-white'
                                    : 'text-gray-400 hover:text-white'
                            }`}
                            data-oid="9_9ibpw"
                        >
                            {t.pricing.yearly}
                            <span
                                className="absolute -top-2 -right-2 bg-green-500 text-xs px-2 py-1 rounded-full text-white"
                                data-oid="n_bpnjl"
                            >
                                {t.pricing.yearlyDiscount}
                            </span>
                        </button>
                    </div>
                </div>

                {/* Pricing Cards */}
                <div
                    className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
                    data-oid="llz9mj4"
                >
                    {plans.map((plan, 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=":uv.xuu"
                        >
                            {plan.popular && (
                                <div
                                    className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-purple-600 to-pink-600 text-white px-4 py-2 rounded-full text-sm font-medium"
                                    data-oid="93fy91t"
                                >
                                    {t.pricing.mostPopular}
                                </div>
                            )}

                            <div
                                className={`bg-gray-800/50 backdrop-blur-sm p-8 rounded-2xl border transition-all duration-300 hover:transform hover:scale-105 h-full flex flex-col ${
                                    plan.popular
                                        ? 'border-purple-500/50 hover:border-purple-400'
                                        : 'border-gray-700 hover:border-purple-500/50'
                                }`}
                                data-oid="nmca--."
                            >
                                <div className="text-center mb-8" data-oid="_v:rtqn">
                                    <h3
                                        className="text-2xl font-bold text-white mb-4"
                                        data-oid="pp:q6.b"
                                    >
                                        {plan.name}
                                    </h3>
                                    <div
                                        className="text-5xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent mb-2"
                                        data-oid="0-70m1h"
                                    >
                                        {billingCycle === 'monthly'
                                            ? plan.monthlyPrice
                                            : plan.yearlyPrice}
                                    </div>
                                    <p className="text-gray-400" data-oid="wry4s4i">
                                        {billingCycle === 'monthly'
                                            ? t.pricing.monthly
                                            : t.pricing.yearly}
                                    </p>
                                </div>

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

                                <button
                                    className={`w-full px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 mt-auto ${
                                        plan.popular
                                            ? 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white'
                                            : 'border border-purple-500 text-purple-400 hover:bg-purple-500/10'
                                    }`}
                                    data-oid="t4x1qoz"
                                >
                                    {t.pricing.getStarted}
                                </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="x._y7ja"
                            ></div>
                        </div>
                    ))}
                </div>
            </main>

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