'use client';

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

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

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

    const supportChannels = [
        {
            key: 'ticket',
            icon: '🎫',
            color: 'from-blue-500 to-cyan-500',
            data: t.pages.support.channels.ticket,
        },
        {
            key: 'chat',
            icon: '💬',
            color: 'from-green-500 to-teal-500',
            data: t.pages.support.channels.chat,
        },
        {
            key: 'phone',
            icon: '📞',
            color: 'from-purple-500 to-pink-500',
            data: t.pages.support.channels.phone,
        },
    ];

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

                {/* Support Channels */}
                <div className="grid md:grid-cols-3 gap-8 mb-20">
                    {supportChannels.map((channel) => (
                        <button
                            key={channel.key}
                            onClick={() => setActiveTab(channel.key)}
                            className={`group relative p-8 border rounded-lg backdrop-blur-sm transition-all duration-300 transform hover:scale-105 ${
                                activeTab === channel.key
                                    ? 'border-green-400 bg-green-500/10'
                                    : 'border-green-500/30 hover:border-green-400'
                            }`}
                        >
                            <div
                                className={`absolute inset-0 bg-gradient-to-br ${channel.color} opacity-0 group-hover:opacity-10 rounded-lg transition-opacity duration-300`}
                            ></div>
                            <div className="relative z-10 text-center">
                                <div className="text-6xl mb-6">{channel.icon}</div>
                                <h3 className="text-2xl font-bold text-green-400 mb-4">
                                    {channel.data.title}
                                </h3>
                                <p className="text-gray-300">{channel.data.description}</p>
                            </div>
                        </button>
                    ))}
                </div>

                {/* Support Content */}
                <div className="bg-black/50 border border-green-500/30 rounded-lg p-8 mb-20">
                    {activeTab === 'ticket' && (
                        <div>
                            <h2 className="text-3xl font-bold text-green-400 mb-8 text-center">
                                提交工单
                            </h2>
                            <div className="max-w-2xl mx-auto">
                                <form className="space-y-6">
                                    <div>
                                        <label className="block text-green-400 mb-2">
                                            问题类型
                                        </label>
                                        <select className="w-full p-3 bg-black border border-green-500/30 rounded text-gray-300 focus:border-green-400 focus:outline-none">
                                            <option>技术问题</option>
                                            <option>账单问题</option>
                                            <option>产品咨询</option>
                                            <option>其他</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label className="block text-green-400 mb-2">
                                            问题标题
                                        </label>
                                        <input
                                            type="text"
                                            className="w-full p-3 bg-black border border-green-500/30 rounded text-gray-300 focus:border-green-400 focus:outline-none"
                                            placeholder="请简要描述您的问题"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-green-400 mb-2">
                                            详细描述
                                        </label>
                                        <textarea
                                            rows={6}
                                            className="w-full p-3 bg-black border border-green-500/30 rounded text-gray-300 focus:border-green-400 focus:outline-none"
                                            placeholder="请详细描述您遇到的问题..."
                                        ></textarea>
                                    </div>
                                    <button
                                        type="submit"
                                        className="w-full px-6 py-3 bg-gradient-to-r from-green-500 to-teal-500 text-black font-bold rounded-lg hover:opacity-90 transition-all duration-300"
                                    >
                                        提交工单
                                    </button>
                                </form>
                            </div>
                        </div>
                    )}

                    {activeTab === 'chat' && (
                        <div>
                            <h2 className="text-3xl font-bold text-green-400 mb-8 text-center">
                                在线客服
                            </h2>
                            <div className="max-w-2xl mx-auto">
                                <div className="bg-black border border-green-500/30 rounded-lg p-6 h-96 mb-4 overflow-y-auto">
                                    <div className="space-y-4">
                                        <div className="flex items-start">
                                            <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-3">
                                                🤖
                                            </div>
                                            <div className="bg-green-500/20 rounded-lg p-3 max-w-xs">
                                                <p className="text-gray-300">
                                                    您好！我是CyberCloud智能客服，有什么可以帮助您的吗？
                                                </p>
                                            </div>
                                        </div>
                                        <div className="flex items-start justify-end">
                                            <div className="bg-blue-500/20 rounded-lg p-3 max-w-xs">
                                                <p className="text-gray-300">
                                                    我想了解云服务器的配置选项
                                                </p>
                                            </div>
                                            <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center ml-3">
                                                👤
                                            </div>
                                        </div>
                                        <div className="flex items-start">
                                            <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-3">
                                                🤖
                                            </div>
                                            <div className="bg-green-500/20 rounded-lg p-3 max-w-xs">
                                                <p className="text-gray-300">
                                                    我们提供多种云服务器配置，从入门级到企业级都有。您可以根据需求选择CPU、内存、存储等配置。需要我为您详细介绍吗？
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="flex">
                                    <input
                                        type="text"
                                        className="flex-1 p-3 bg-black border border-green-500/30 rounded-l text-gray-300 focus:border-green-400 focus:outline-none"
                                        placeholder="输入您的问题..."
                                    />

                                    <button className="px-6 py-3 bg-gradient-to-r from-green-500 to-teal-500 text-black font-bold rounded-r hover:opacity-90 transition-all duration-300">
                                        发送
                                    </button>
                                </div>
                            </div>
                        </div>
                    )}

                    {activeTab === 'phone' && (
                        <div>
                            <h2 className="text-3xl font-bold text-green-400 mb-8 text-center">
                                电话支持
                            </h2>
                            <div className="max-w-2xl mx-auto text-center">
                                <div className="grid md:grid-cols-2 gap-8">
                                    <div className="p-6 border border-green-500/30 rounded-lg">
                                        <h3 className="text-xl font-bold text-green-400 mb-4">
                                            技术支持热线
                                        </h3>
                                        <p className="text-2xl font-bold text-cyan-400 mb-2">
                                            400-123-4567
                                        </p>
                                        <p className="text-gray-400">7x24小时技术支持</p>
                                    </div>
                                    <div className="p-6 border border-green-500/30 rounded-lg">
                                        <h3 className="text-xl font-bold text-green-400 mb-4">
                                            销售咨询热线
                                        </h3>
                                        <p className="text-2xl font-bold text-cyan-400 mb-2">
                                            400-765-4321
                                        </p>
                                        <p className="text-gray-400">工作日 9:00-18:00</p>
                                    </div>
                                </div>
                                <div className="mt-8 p-6 bg-green-500/10 border border-green-500/30 rounded-lg">
                                    <h3 className="text-xl font-bold text-green-400 mb-4">
                                        紧急联系方式
                                    </h3>
                                    <p className="text-gray-300 mb-2">如遇紧急技术故障，请拨打：</p>
                                    <p className="text-2xl font-bold text-red-400">400-999-0000</p>
                                    <p className="text-gray-400 text-sm mt-2">
                                        此热线仅用于紧急故障报告
                                    </p>
                                </div>
                            </div>
                        </div>
                    )}
                </div>

                {/* FAQ Section */}
                <div className="bg-black/50 border border-green-500/30 rounded-lg p-8">
                    <h2 className="text-3xl font-bold text-green-400 mb-8 text-center">常见问题</h2>
                    <div className="grid md:grid-cols-2 gap-8">
                        <div className="space-y-4">
                            {[
                                {
                                    q: '如何创建云服务器实例？',
                                    a: '登录控制台，选择云服务器产品，点击创建实例，按照向导完成配置即可。',
                                },
                                {
                                    q: '支持哪些操作系统？',
                                    a: '我们支持主流的Linux发行版和Windows Server版本。',
                                },
                                {
                                    q: '如何备份数据？',
                                    a: '可以使用自动快照功能或手动创建快照来备份数据。',
                                },
                            ].map((faq, index) => (
                                <div key={index} className="p-4 border border-gray-700 rounded-lg">
                                    <h4 className="text-green-400 font-bold mb-2">{faq.q}</h4>
                                    <p className="text-gray-300 text-sm">{faq.a}</p>
                                </div>
                            ))}
                        </div>
                        <div className="space-y-4">
                            {[
                                {
                                    q: '如何升级服务器配置？',
                                    a: '在控制台中选择实例，点击升级配置，选择新的配置规格即可。',
                                },
                                {
                                    q: '网络延迟如何优化？',
                                    a: '选择距离用户最近的数据中心，使用CDN加速服务。',
                                },
                                {
                                    q: '如何监控服务器状态？',
                                    a: '使用云监控服务，可以实时查看CPU、内存、网络等指标。',
                                },
                            ].map((faq, index) => (
                                <div key={index} className="p-4 border border-gray-700 rounded-lg">
                                    <h4 className="text-green-400 font-bold mb-2">{faq.q}</h4>
                                    <p className="text-gray-300 text-sm">{faq.a}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}