'use client';

import { useState, useEffect } from 'react';
import { getTranslations, type Language } from '@/lib/languages';

export default function DatacenterPageClient({ params }: { params: { lang: string } }) {
    const [isLoaded, setIsLoaded] = useState(false);
    const [selectedRegion, setSelectedRegion] = useState('asia');
    const lang = params.lang as Language;
    const t = getTranslations(lang);

    useEffect(() => {
        setIsLoaded(true);
    }, []);

    const regions = [
        {
            key: 'asia',
            icon: '🌏',
            color: 'from-blue-500 to-cyan-500',
            data: t.pages.datacenter.locations.asia,
        },
        {
            key: 'america',
            icon: '🌎',
            color: 'from-green-500 to-teal-500',
            data: t.pages.datacenter.locations.america,
        },
        {
            key: 'europe',
            icon: '🌍',
            color: 'from-purple-500 to-pink-500',
            data: t.pages.datacenter.locations.europe,
        },
    ];

    return (
        <div className="max-w-7xl mx-auto px-6 py-20">
            <div
                className={`transform transition-all duration-1000 ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}
            >
                {/* Header */}
                <div className="text-center mb-16">
                    <h1 className="text-5xl md:text-7xl font-bold mb-6">
                        <span className="text-blue-400">{t.pages.datacenter.title}</span>
                    </h1>
                    <p className="text-xl md:text-2xl text-cyan-400 mb-4">
                        {t.pages.datacenter.subtitle}
                    </p>
                    <p className="text-lg text-gray-300 max-w-3xl mx-auto">
                        {t.pages.datacenter.description}
                    </p>
                </div>

                {/* Global Map Visualization */}
                <div className="mb-20 relative">
                    <div className="bg-black/50 border border-blue-500/30 rounded-lg p-8 text-center">
                        <h2 className="text-3xl font-bold text-blue-400 mb-8">全球数据中心分布</h2>
                        <div className="grid md:grid-cols-3 gap-6">
                            {regions.map((region) => (
                                <button
                                    key={region.key}
                                    onClick={() => setSelectedRegion(region.key)}
                                    className={`p-6 border rounded-lg transition-all duration-300 ${
                                        selectedRegion === region.key
                                            ? 'border-blue-400 bg-blue-500/10'
                                            : 'border-blue-500/30 hover:border-blue-400'
                                    }`}
                                >
                                    <div className="text-6xl mb-4">{region.icon}</div>
                                    <h3 className="text-xl font-bold text-blue-400 mb-2">
                                        {region.data.title}
                                    </h3>
                                    <p className="text-gray-400">
                                        {region.data.cities.length} 个城市
                                    </p>
                                </button>
                            ))}
                        </div>
                    </div>
                </div>

                {/* Selected Region Details */}
                <div className="mb-20">
                    {regions.map(
                        (region) =>
                            selectedRegion === region.key && (
                                <div
                                    key={region.key}
                                    className="bg-black/50 border border-blue-500/30 rounded-lg p-8"
                                >
                                    <h2 className="text-3xl font-bold text-blue-400 mb-8 text-center">
                                        {region.data.title}
                                    </h2>
                                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                                        {region.data.cities.map((city, index) => (
                                            <div
                                                key={index}
                                                className="group p-6 border border-blue-500/30 rounded-lg hover:border-blue-400 transition-all duration-300 transform hover:scale-105"
                                            >
                                                <div
                                                    className={`absolute inset-0 bg-gradient-to-br ${region.color} opacity-0 group-hover:opacity-10 rounded-lg transition-opacity duration-300`}
                                                ></div>
                                                <div className="relative z-10 text-center">
                                                    <div className="text-4xl mb-4">🏢</div>
                                                    <h3 className="text-xl font-bold text-blue-400 mb-2">
                                                        {city}
                                                    </h3>
                                                    <div className="space-y-1 text-sm text-gray-400">
                                                        <div>延迟: &lt;10ms</div>
                                                        <div>带宽: 10Gbps</div>
                                                        <div>状态: 正常</div>
                                                    </div>
                                                    <div className="mt-4">
                                                        <div className="w-full bg-gray-700 rounded-full h-2">
                                                            <div
                                                                className={`h-2 bg-gradient-to-r ${region.color} rounded-full`}
                                                                style={{
                                                                    width: `${85 + Math.random() * 15}%`,
                                                                }}
                                                            ></div>
                                                        </div>
                                                        <div className="text-xs text-gray-500 mt-1">
                                                            负载
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            ),
                    )}
                </div>

                {/* Infrastructure Stats */}
                <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
                    {[
                        { label: '数据中心', value: '50+', icon: '🏢', color: 'text-blue-400' },
                        { label: '服务器', value: '10,000+', icon: '💻', color: 'text-cyan-400' },
                        {
                            label: '网络容量',
                            value: '100Tbps',
                            icon: '🌐',
                            color: 'text-green-400',
                        },
                        { label: '可用性', value: '99.99%', icon: '⚡', color: 'text-yellow-400' },
                    ].map((stat, index) => (
                        <div
                            key={index}
                            className="text-center p-6 border border-blue-500/30 rounded-lg backdrop-blur-sm hover:border-blue-400 transition-all duration-300"
                        >
                            <div className="text-4xl mb-2">{stat.icon}</div>
                            <div className={`text-3xl font-bold ${stat.color} mb-2`}>
                                {stat.value}
                            </div>
                            <div className="text-gray-400">{stat.label}</div>
                        </div>
                    ))}
                </div>

                {/* Network Performance */}
                <div className="bg-black/50 border border-blue-500/30 rounded-lg p-8">
                    <h2 className="text-3xl font-bold text-blue-400 mb-8 text-center">
                        网络性能监控
                    </h2>
                    <div className="grid md:grid-cols-2 gap-8">
                        <div>
                            <h3 className="text-xl font-bold text-blue-400 mb-4">实时延迟</h3>
                            <div className="space-y-4">
                                {[
                                    { region: '亚太地区', latency: '8ms', status: 'excellent' },
                                    { region: '美洲地区', latency: '12ms', status: 'good' },
                                    { region: '欧洲地区', latency: '15ms', status: 'good' },
                                ].map((item, index) => (
                                    <div
                                        key={index}
                                        className="flex items-center justify-between p-3 border border-gray-700 rounded"
                                    >
                                        <span className="text-gray-300">{item.region}</span>
                                        <div className="flex items-center">
                                            <span className="text-blue-400 font-bold mr-2">
                                                {item.latency}
                                            </span>
                                            <div
                                                className={`w-3 h-3 rounded-full ${
                                                    item.status === 'excellent'
                                                        ? 'bg-green-500'
                                                        : 'bg-yellow-500'
                                                }`}
                                            ></div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                        <div>
                            <h3 className="text-xl font-bold text-blue-400 mb-4">带宽使用率</h3>
                            <div className="space-y-4">
                                {[
                                    { region: '亚太地区', usage: 75 },
                                    { region: '美洲地区', usage: 60 },
                                    { region: '欧洲地区', usage: 45 },
                                ].map((item, index) => (
                                    <div key={index} className="p-3 border border-gray-700 rounded">
                                        <div className="flex justify-between mb-2">
                                            <span className="text-gray-300">{item.region}</span>
                                            <span className="text-blue-400">{item.usage}%</span>
                                        </div>
                                        <div className="w-full bg-gray-700 rounded-full h-2">
                                            <div
                                                className="h-2 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full"
                                                style={{ width: `${item.usage}%` }}
                                            ></div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}