'use client';

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

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

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

    const menuItems = [
        { key: 'overview', label: '概览', icon: '📊' },
        { key: 'servers', label: '云服务器', icon: '💻' },
        { key: 'storage', label: '存储', icon: '💾' },
        { key: 'network', label: '网络', icon: '🌐' },
        { key: 'security', label: '安全', icon: '🛡️' },
        { key: 'monitoring', label: '监控', icon: '📈' },
        { key: 'billing', label: '账单', icon: '💳' },
    ];

    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-purple-400">控制台</span>
                    </h1>
                    <p className="text-xl md:text-2xl text-cyan-400 mb-4">云资源管理中心</p>
                    <p className="text-lg text-gray-300 max-w-3xl mx-auto">
                        统一管理您的云服务器、存储、网络等资源
                    </p>
                </div>

                {/* Console Layout */}
                <div className="grid lg:grid-cols-4 gap-8">
                    {/* Sidebar */}
                    <div className="lg:col-span-1">
                        <div className="bg-black/50 border border-purple-500/30 rounded-lg p-6">
                            <h3 className="text-xl font-bold text-purple-400 mb-6">导航菜单</h3>
                            <nav className="space-y-2">
                                {menuItems.map((item) => (
                                    <button
                                        key={item.key}
                                        onClick={() => setActiveSection(item.key)}
                                        className={`w-full flex items-center p-3 rounded-lg transition-all duration-300 ${
                                            activeSection === item.key
                                                ? 'bg-purple-500/20 border border-purple-400 text-purple-400'
                                                : 'text-gray-400 hover:text-purple-400 hover:bg-purple-500/10'
                                        }`}
                                    >
                                        <span className="mr-3 text-xl">{item.icon}</span>
                                        {item.label}
                                    </button>
                                ))}
                            </nav>
                        </div>
                    </div>

                    {/* Main Content */}
                    <div className="lg:col-span-3">
                        <div className="bg-black/50 border border-purple-500/30 rounded-lg p-8">
                            {activeSection === 'overview' && (
                                <div>
                                    <h2 className="text-3xl font-bold text-purple-400 mb-8">
                                        资源概览
                                    </h2>

                                    {/* Quick Stats */}
                                    <div className="grid md:grid-cols-4 gap-6 mb-8">
                                        {[
                                            {
                                                label: '云服务器',
                                                value: '12',
                                                icon: '💻',
                                                color: 'text-blue-400',
                                            },
                                            {
                                                label: '存储空间',
                                                value: '2.5TB',
                                                icon: '💾',
                                                color: 'text-green-400',
                                            },
                                            {
                                                label: '网络流量',
                                                value: '156GB',
                                                icon: '🌐',
                                                color: 'text-cyan-400',
                                            },
                                            {
                                                label: '本月费用',
                                                value: '¥1,234',
                                                icon: '💳',
                                                color: 'text-yellow-400',
                                            },
                                        ].map((stat, index) => (
                                            <div
                                                key={index}
                                                className="p-4 border border-gray-700 rounded-lg text-center"
                                            >
                                                <div className="text-3xl mb-2">{stat.icon}</div>
                                                <div
                                                    className={`text-2xl font-bold ${stat.color} mb-1`}
                                                >
                                                    {stat.value}
                                                </div>
                                                <div className="text-gray-400 text-sm">
                                                    {stat.label}
                                                </div>
                                            </div>
                                        ))}
                                    </div>

                                    {/* Recent Activities */}
                                    <div className="grid md:grid-cols-2 gap-8">
                                        <div>
                                            <h3 className="text-xl font-bold text-purple-400 mb-4">
                                                最近活动
                                            </h3>
                                            <div className="space-y-3">
                                                {[
                                                    {
                                                        action: '创建云服务器',
                                                        time: '2分钟前',
                                                        status: 'success',
                                                    },
                                                    {
                                                        action: '备份数据',
                                                        time: '1小时前',
                                                        status: 'success',
                                                    },
                                                    {
                                                        action: '升级配置',
                                                        time: '3小时前',
                                                        status: 'warning',
                                                    },
                                                    {
                                                        action: '重启服务器',
                                                        time: '1天前',
                                                        status: 'info',
                                                    },
                                                ].map((activity, index) => (
                                                    <div
                                                        key={index}
                                                        className="flex items-center justify-between p-3 border border-gray-700 rounded"
                                                    >
                                                        <div>
                                                            <div className="text-gray-300">
                                                                {activity.action}
                                                            </div>
                                                            <div className="text-gray-500 text-sm">
                                                                {activity.time}
                                                            </div>
                                                        </div>
                                                        <div
                                                            className={`w-3 h-3 rounded-full ${
                                                                activity.status === 'success'
                                                                    ? 'bg-green-500'
                                                                    : activity.status === 'warning'
                                                                      ? 'bg-yellow-500'
                                                                      : activity.status === 'info'
                                                                        ? 'bg-blue-500'
                                                                        : 'bg-gray-500'
                                                            }`}
                                                        ></div>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>

                                        <div>
                                            <h3 className="text-xl font-bold text-purple-400 mb-4">
                                                系统状态
                                            </h3>
                                            <div className="space-y-3">
                                                {[
                                                    {
                                                        service: '云服务器',
                                                        status: '正常',
                                                        uptime: '99.9%',
                                                    },
                                                    {
                                                        service: '云存储',
                                                        status: '正常',
                                                        uptime: '99.8%',
                                                    },
                                                    {
                                                        service: '网络服务',
                                                        status: '正常',
                                                        uptime: '99.9%',
                                                    },
                                                    {
                                                        service: '安全防护',
                                                        status: '正常',
                                                        uptime: '100%',
                                                    },
                                                ].map((service, index) => (
                                                    <div
                                                        key={index}
                                                        className="flex items-center justify-between p-3 border border-gray-700 rounded"
                                                    >
                                                        <div>
                                                            <div className="text-gray-300">
                                                                {service.service}
                                                            </div>
                                                            <div className="text-gray-500 text-sm">
                                                                可用性: {service.uptime}
                                                            </div>
                                                        </div>
                                                        <div className="text-green-400 font-bold">
                                                            {service.status}
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )}

                            {activeSection === 'servers' && (
                                <div>
                                    <div className="flex justify-between items-center mb-8">
                                        <h2 className="text-3xl font-bold text-purple-400">
                                            云服务器管理
                                        </h2>
                                        <button className="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold rounded-lg hover:opacity-90 transition-all duration-300">
                                            创建实例
                                        </button>
                                    </div>

                                    <div className="space-y-4">
                                        {[
                                            {
                                                name: 'web-server-01',
                                                status: '运行中',
                                                cpu: '2核',
                                                memory: '4GB',
                                                ip: '192.168.1.10',
                                            },
                                            {
                                                name: 'db-server-01',
                                                status: '运行中',
                                                cpu: '4核',
                                                memory: '8GB',
                                                ip: '192.168.1.11',
                                            },
                                            {
                                                name: 'app-server-01',
                                                status: '已停止',
                                                cpu: '2核',
                                                memory: '4GB',
                                                ip: '192.168.1.12',
                                            },
                                        ].map((server, index) => (
                                            <div
                                                key={index}
                                                className="p-6 border border-gray-700 rounded-lg"
                                            >
                                                <div className="flex items-center justify-between">
                                                    <div>
                                                        <h3 className="text-xl font-bold text-purple-400 mb-2">
                                                            {server.name}
                                                        </h3>
                                                        <div className="flex items-center space-x-4 text-gray-400">
                                                            <span>{server.cpu}</span>
                                                            <span>{server.memory}</span>
                                                            <span>{server.ip}</span>
                                                        </div>
                                                    </div>
                                                    <div className="flex items-center space-x-4">
                                                        <span
                                                            className={`px-3 py-1 rounded-full text-sm ${
                                                                server.status === '运行中'
                                                                    ? 'bg-green-500/20 text-green-400'
                                                                    : 'bg-red-500/20 text-red-400'
                                                            }`}
                                                        >
                                                            {server.status}
                                                        </span>
                                                        <button className="px-4 py-2 border border-purple-500/30 rounded text-purple-400 hover:border-purple-400 transition-colors">
                                                            管理
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}

                            {activeSection === 'monitoring' && (
                                <div>
                                    <h2 className="text-3xl font-bold text-purple-400 mb-8">
                                        监控中心
                                    </h2>

                                    <div className="grid md:grid-cols-2 gap-8">
                                        <div className="p-6 border border-gray-700 rounded-lg">
                                            <h3 className="text-xl font-bold text-purple-400 mb-4">
                                                CPU 使用率
                                            </h3>
                                            <div className="space-y-4">
                                                {[
                                                    { server: 'web-server-01', usage: 45 },
                                                    { server: 'db-server-01', usage: 78 },
                                                    { server: 'app-server-01', usage: 23 },
                                                ].map((item, index) => (
                                                    <div key={index}>
                                                        <div className="flex justify-between mb-2">
                                                            <span className="text-gray-300">
                                                                {item.server}
                                                            </span>
                                                            <span className="text-purple-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-purple-500 to-pink-500 rounded-full"
                                                                style={{ width: `${item.usage}%` }}
                                                            ></div>
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>

                                        <div className="p-6 border border-gray-700 rounded-lg">
                                            <h3 className="text-xl font-bold text-purple-400 mb-4">
                                                内存使用率
                                            </h3>
                                            <div className="space-y-4">
                                                {[
                                                    { server: 'web-server-01', usage: 62 },
                                                    { server: 'db-server-01', usage: 89 },
                                                    { server: 'app-server-01', usage: 34 },
                                                ].map((item, index) => (
                                                    <div key={index}>
                                                        <div className="flex justify-between mb-2">
                                                            <span className="text-gray-300">
                                                                {item.server}
                                                            </span>
                                                            <span className="text-purple-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>
                            )}

                            {/* Other sections can be added similarly */}
                            {activeSection !== 'overview' &&
                                activeSection !== 'servers' &&
                                activeSection !== 'monitoring' && (
                                    <div className="text-center py-20">
                                        <div className="text-6xl mb-4">🚧</div>
                                        <h3 className="text-2xl font-bold text-purple-400 mb-4">
                                            功能开发中
                                        </h3>
                                        <p className="text-gray-400">
                                            该功能正在开发中，敬请期待...
                                        </p>
                                    </div>
                                )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}