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

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

    const translations = {
        'zh-CN': {
            nav: {
                home: '首页',
                products: '产品',
                pricing: '价格',
                support: '支持',
                contact: '联系我们',
            },
            support: {
                title: '技术支持',
                subtitle: '我们随时为您提供帮助',
                description: '无论您遇到什么问题，我们的专业团队都会为您提供及时的技术支持',
                faq: {
                    title: '常见问题',
                    items: [
                        {
                            question: '如何开始使用云服务器？',
                            answer: '注册账户后，选择适合的套餐，我们会在5分钟内为您部署服务器。',
                        },
                        {
                            question: '支持哪些操作系统？',
                            answer: '我们支持Ubuntu、CentOS、Debian、Windows Server等主流操作系统。',
                        },
                        {
                            question: '如何备份数据？',
                            answer: '我们提供自动备份服务，您也可以手动创建快照备份。',
                        },
                    ],
                },
                contact: {
                    title: '联系支持',
                    email: '邮箱支持',
                    phone: '电话支持',
                    chat: '在线客服',
                    ticket: '提交工单',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 版权所有.`,
            },
        },
        'zh-TW': {
            nav: {
                home: '首頁',
                products: '產品',
                pricing: '價格',
                support: '支援',
                contact: '聯絡我們',
            },
            support: {
                title: '技術支援',
                subtitle: '我們隨時為您提供幫助',
                description: '無論您遇到什麼問題，我們的專業團隊都會為您提供及時的技術支援',
                faq: {
                    title: '常見問題',
                    items: [
                        {
                            question: '如何開始使用雲端伺服器？',
                            answer: '註冊帳戶後，選擇適合的套餐，我們會在5分鐘內為您部署伺服器。',
                        },
                        {
                            question: '支援哪些作業系統？',
                            answer: '我們支援Ubuntu、CentOS、Debian、Windows Server等主流作業系統。',
                        },
                        {
                            question: '如何備份資料？',
                            answer: '我們提供自動備份服務，您也可以手動建立快照備份。',
                        },
                    ],
                },
                contact: {
                    title: '聯絡支援',
                    email: '郵箱支援',
                    phone: '電話支援',
                    chat: '線上客服',
                    ticket: '提交工單',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 版權所有.`,
            },
        },
        en: {
            nav: {
                home: 'Home',
                products: 'Products',
                pricing: 'Pricing',
                support: 'Support',
                contact: 'Contact',
            },
            support: {
                title: 'Technical Support',
                subtitle: "We're here to help you",
                description:
                    'Whatever issues you encounter, our professional team will provide timely technical support',
                faq: {
                    title: 'Frequently Asked Questions',
                    items: [
                        {
                            question: 'How do I get started with cloud servers?',
                            answer: "After registering an account, choose a suitable plan, and we'll deploy your server within 5 minutes.",
                        },
                        {
                            question: 'Which operating systems are supported?',
                            answer: 'We support mainstream operating systems including Ubuntu, CentOS, Debian, Windows Server, etc.',
                        },
                        {
                            question: 'How do I backup my data?',
                            answer: 'We provide automatic backup services, and you can also manually create snapshot backups.',
                        },
                    ],
                },
                contact: {
                    title: 'Contact Support',
                    email: 'Email Support',
                    phone: 'Phone Support',
                    chat: 'Live Chat',
                    ticket: 'Submit Ticket',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. All rights reserved.`,
            },
        },
        ko: {
            nav: {
                home: '홈',
                products: '제품',
                pricing: '가격',
                support: '지원',
                contact: '연락처',
            },
            support: {
                title: '기술 지원',
                subtitle: '언제든지 도움을 드립니다',
                description: '어떤 문제가 발생하더라도 전문 팀이 신속한 기술 지원을 제공합니다',
                faq: {
                    title: '자주 묻는 질문',
                    items: [
                        {
                            question: '클라우드 서버를 어떻게 시작하나요?',
                            answer: '계정 등록 후 적합한 플랜을 선택하면 5분 내에 서버를 배포해드립니다.',
                        },
                        {
                            question: '어떤 운영체제를 지원하나요?',
                            answer: 'Ubuntu, CentOS, Debian, Windows Server 등 주요 운영체제를 지원합니다.',
                        },
                        {
                            question: '데이터를 어떻게 백업하나요?',
                            answer: '자동 백업 서비스를 제공하며, 수동으로 스냅샷 백업을 생성할 수도 있습니다.',
                        },
                    ],
                },
                contact: {
                    title: '지원 연락',
                    email: '이메일 지원',
                    phone: '전화 지원',
                    chat: '실시간 채팅',
                    ticket: '티켓 제출',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 모든 권리 보유.`,
            },
        },
        ja: {
            nav: {
                home: 'ホーム',
                products: '製品',
                pricing: '価格',
                support: 'サポート',
                contact: 'お問い合わせ',
            },
            support: {
                title: 'テクニカルサポート',
                subtitle: 'いつでもお手伝いします',
                description:
                    'どのような問題が発生しても、専門チームが迅速な技術サポートを提供します',
                faq: {
                    title: 'よくある質問',
                    items: [
                        {
                            question: 'クラウドサーバーの使用を開始するには？',
                            answer: 'アカウント登録後、適切なプランを選択すると、5分以内にサーバーを展開します。',
                        },
                        {
                            question: 'どのオペレーティングシステムがサポートされていますか？',
                            answer: 'Ubuntu、CentOS、Debian、Windows Serverなどの主要なオペレーティングシステムをサポートしています。',
                        },
                        {
                            question: 'データをバックアップするには？',
                            answer: '自動バックアップサービスを提供しており、手動でスナップショットバックアップを作成することもできます。',
                        },
                    ],
                },
                contact: {
                    title: 'サポートに連絡',
                    email: 'メールサポート',
                    phone: '電話サポート',
                    chat: 'ライブチャット',
                    ticket: 'チケット提出',
                },
            },
            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}`);
    };

    return (
        <div className="min-h-screen bg-gray-900 text-white overflow-hidden" data-oid="xriserc">
            <BackgroundElements data-oid="7754l29" />

            <Navigation
                t={t}
                currentLang={currentLang}
                onLanguageChange={handleLanguageChange}
                isLoaded={isLoaded}
                data-oid=".ueot:j"
            />

            <main className="relative z-10 max-w-7xl mx-auto px-6 py-12" data-oid="msfyv6m">
                {/* 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="kw0yeug"
                >
                    <h1 className="text-5xl lg:text-6xl font-bold mb-6" data-oid="8651fb7">
                        <span
                            className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent"
                            data-oid="1t1us0b"
                        >
                            {t.support.title}
                        </span>
                    </h1>
                    <p className="text-xl text-purple-300 mb-4" data-oid="97azn5d">
                        {t.support.subtitle}
                    </p>
                    <p className="text-lg text-gray-300 max-w-3xl mx-auto" data-oid="g6na3pj">
                        {t.support.description}
                    </p>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12" data-oid="ebahobw">
                    {/* FAQ Section */}
                    <div
                        className={`transition-all duration-1000 delay-500 ${isLoaded ? 'translate-x-0 opacity-100' : '-translate-x-20 opacity-0'}`}
                        data-oid="xz9wsi6"
                    >
                        <h2
                            className="text-3xl font-bold mb-8 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
                            data-oid="rwi-i34"
                        >
                            {t.support.faq.title}
                        </h2>
                        <div className="space-y-6" data-oid="ok_ao19">
                            {t.support.faq.items.map((item, index) => (
                                <div
                                    key={index}
                                    className="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 hover:border-purple-500/50 transition-all duration-300"
                                    data-oid="i.1wvtv"
                                >
                                    <h3
                                        className="text-lg font-semibold text-white mb-3"
                                        data-oid=".uip300"
                                    >
                                        {item.question}
                                    </h3>
                                    <p className="text-gray-300 leading-relaxed" data-oid="mu00inz">
                                        {item.answer}
                                    </p>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Contact Support */}
                    <div
                        className={`transition-all duration-1000 delay-700 ${isLoaded ? 'translate-x-0 opacity-100' : 'translate-x-20 opacity-0'}`}
                        data-oid="u57fs8g"
                    >
                        <h2
                            className="text-3xl font-bold mb-8 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
                            data-oid="fck_y7_"
                        >
                            {t.support.contact.title}
                        </h2>
                        <div className="space-y-6" data-oid="3et391e">
                            {[
                                {
                                    title: t.support.contact.email,
                                    icon: (
                                        <svg
                                            className="w-8 h-8 text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            data-oid="aehqj9e"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                                                data-oid="mot6dmt"
                                            />
                                        </svg>
                                    ),

                                    desc: 'support@cloudproxy.com',
                                },
                                {
                                    title: t.support.contact.phone,
                                    icon: (
                                        <svg
                                            className="w-8 h-8 text-green-400 group-hover:text-green-300 transition-colors duration-300"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            data-oid="w6sd_4d"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                                                data-oid=":vdfcau"
                                            />
                                        </svg>
                                    ),

                                    desc: '+1 (555) 123-4567',
                                },
                                {
                                    title: t.support.contact.chat,
                                    icon: (
                                        <svg
                                            className="w-8 h-8 text-blue-400 group-hover:text-blue-300 transition-colors duration-300"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            data-oid="3_.1h6e"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                                                data-oid="zjaeet2"
                                            />
                                        </svg>
                                    ),

                                    desc: '24/7 Live Support',
                                },
                                {
                                    title: t.support.contact.ticket,
                                    icon: (
                                        <svg
                                            className="w-8 h-8 text-orange-400 group-hover:text-orange-300 transition-colors duration-300"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            data-oid="62z1bdc"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"
                                                data-oid=".jnx:32"
                                            />
                                        </svg>
                                    ),

                                    desc: 'Submit Support Ticket',
                                },
                            ].map((contact, index) => (
                                <div
                                    key={index}
                                    className="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group"
                                    data-oid="eyf334c"
                                >
                                    <div className="flex items-center space-x-4" data-oid="cu-n4ae">
                                        <div className="flex-shrink-0" data-oid="8gjwu3l">
                                            {contact.icon}
                                        </div>
                                        <div data-oid="tgee76w">
                                            <h3
                                                className="text-lg font-semibold text-white group-hover:text-purple-300 transition-colors duration-300"
                                                data-oid=":-f-ynz"
                                            >
                                                {contact.title}
                                            </h3>
                                            <p className="text-gray-400" data-oid="0f__c9o">
                                                {contact.desc}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </main>

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