'use client';

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

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

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

    const securityServices = [
        {
            icon: '🛡️',
            color: 'from-red-500 to-pink-500',
            data: t.pages.security.ddosProtection,
        },
        {
            icon: '🔥',
            color: 'from-orange-500 to-red-500',
            data: t.pages.security.firewall,
        },
        {
            icon: '🔒',
            color: 'from-green-500 to-emerald-500',
            data: t.pages.security.ssl,
        },
    ];

    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-red-400">{t.pages.security.title}</span>
                    </h1>
                    <p className="text-xl md:text-2xl text-pink-400 mb-4">
                        {t.pages.security.subtitle}
                    </p>
                    <p className="text-lg text-gray-300 max-w-3xl mx-auto">
                        {t.pages.security.description}
                    </p>
                </div>

                {/* Security Services */}
                <div className="grid md:grid-cols-3 gap-8 mb-20">
                    {securityServices.map((service, index) => (
                        <div
                            key={index}
                            className="group relative p-8 border border-red-500/30 rounded-lg backdrop-blur-sm hover:border-red-400 transition-all duration-300 transform hover:scale-105"
                        >
                            <div
                                className={`absolute inset-0 bg-gradient-to-br ${service.color} opacity-0 group-hover:opacity-10 rounded-lg transition-opacity duration-300`}
                            ></div>
                            <div className="relative z-10">
                                <div className="text-6xl mb-6 text-center">{service.icon}</div>
                                <h3 className="text-2xl font-bold text-red-400 mb-4 text-center">
                                    {service.data.title}
                                </h3>
                                <p className="text-gray-300 mb-6 text-center">
                                    {service.data.description}
                                </p>
                                <ul className="space-y-2">
                                    {service.data.features.map((feature, featureIndex) => (
                                        <li
                                            key={featureIndex}
                                            className="flex items-center text-gray-400"
                                        >
                                            <span className="text-red-400 mr-2">✓</span>
                                            {feature}
                                        </li>
                                    ))}
                                </ul>
                                <button
                                    className={`w-full mt-6 px-6 py-3 bg-gradient-to-r ${service.color} text-white font-bold rounded-lg hover:opacity-90 transition-all duration-300`}
                                >
                                    启用防护
                                </button>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Security Stats */}
                <div className="grid md:grid-cols-4 gap-6 mb-20">
                    {[
                        { label: '攻击拦截', value: '99.9%', icon: '🛡️' },
                        { label: '响应时间', value: '<1ms', icon: '⚡' },
                        { label: '全球节点', value: '50+', icon: '🌍' },
                        { label: '防护带宽', value: '1Tbps', icon: '📊' },
                    ].map((stat, index) => (
                        <div
                            key={index}
                            className="text-center p-6 border border-red-500/30 rounded-lg backdrop-blur-sm"
                        >
                            <div className="text-4xl mb-2">{stat.icon}</div>
                            <div className="text-3xl font-bold text-red-400 mb-2">{stat.value}</div>
                            <div className="text-gray-400">{stat.label}</div>
                        </div>
                    ))}
                </div>

                {/* Threat Map */}
                <div className="bg-black/50 border border-red-500/30 rounded-lg p-8">
                    <h2 className="text-3xl font-bold text-red-400 mb-8 text-center">
                        实时威胁监控
                    </h2>
                    <div className="grid md:grid-cols-2 gap-8">
                        <div>
                            <h3 className="text-xl font-bold text-red-400 mb-4">今日拦截统计</h3>
                            <div className="space-y-4">
                                {[
                                    { type: 'DDoS 攻击', count: '1,234', color: 'bg-red-500' },
                                    { type: 'SQL 注入', count: '567', color: 'bg-orange-500' },
                                    { type: '恶意爬虫', count: '890', color: 'bg-yellow-500' },
                                    { type: 'CC 攻击', count: '345', color: 'bg-pink-500' },
                                ].map((threat, index) => (
                                    <div key={index} className="flex items-center justify-between">
                                        <div className="flex items-center">
                                            <div
                                                className={`w-3 h-3 ${threat.color} rounded-full mr-3`}
                                            ></div>
                                            <span className="text-gray-300">{threat.type}</span>
                                        </div>
                                        <span className="text-red-400 font-bold">
                                            {threat.count}
                                        </span>
                                    </div>
                                ))}
                            </div>
                        </div>
                        <div>
                            <h3 className="text-xl font-bold text-red-400 mb-4">防护状态</h3>
                            <div className="space-y-4">
                                {[
                                    {
                                        service: 'DDoS 防护',
                                        status: '正常',
                                        color: 'text-green-400',
                                    },
                                    {
                                        service: '云防火墙',
                                        status: '正常',
                                        color: 'text-green-400',
                                    },
                                    {
                                        service: 'SSL 证书',
                                        status: '正常',
                                        color: 'text-green-400',
                                    },
                                    {
                                        service: '威胁检测',
                                        status: '正常',
                                        color: 'text-green-400',
                                    },
                                ].map((item, index) => (
                                    <div key={index} className="flex items-center justify-between">
                                        <span className="text-gray-300">{item.service}</span>
                                        <span className={`font-bold ${item.color}`}>
                                            {item.status}
                                        </span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}