'use client';

import { useState } from 'react';
import Link from 'next/link';
import Header from '@/app/components/Header';
import Footer from '@/app/components/Footer';
import { supportTranslations, type SupportLanguage } from '../../translations';

interface SupportPageClientProps {
    locale: string;
}

export default function SupportPageClient({ locale }: SupportPageClientProps) {
    const [language, setLanguage] = useState<SupportLanguage>(
        locale === 'zh' ? 'zh-CN' : locale === 'zh-TW' ? 'zh-TW' : 'en',
    );
    const [activeTab, setActiveTab] = useState('faq');

    const t = supportTranslations[language] || supportTranslations['zh-CN'];

    const handleLanguageChange = (newLanguage: string) => {
        const validLanguage = newLanguage as SupportLanguage;
        setLanguage(validLanguage);
    };

    return (
        <div className="min-h-screen bg-white">
            <Header
                language={language}
                setLanguage={handleLanguageChange}
                translations={t}
                locale={locale}
            />

            <section className="bg-blue-600 text-white h-96 flex items-center justify-center">
                <div className="max-w-6xl mx-auto px-4 text-center">
                    <h1 className="text-4xl font-bold mb-4">{t.title}</h1>
                    <p className="text-xl">{t.subtitle}</p>
                </div>
            </section>

            <section className="py-16">
                <div className="max-w-6xl mx-auto px-4">
                    <div className="flex justify-center mb-8">
                        <div className="flex space-x-1 bg-gray-100 p-1 rounded-lg">
                            {Object.entries(t.tabs).map(([key, label]) => (
                                <button
                                    key={key}
                                    onClick={() => setActiveTab(key)}
                                    className={`px-6 py-2 rounded-md ${
                                        activeTab === key
                                            ? 'bg-blue-600 text-white'
                                            : 'text-gray-700 hover:bg-gray-200'
                                    }`}
                                >
                                    {label}
                                </button>
                            ))}
                        </div>
                    </div>

                    {activeTab === 'faq' && (
                        <div>
                            <h2 className="text-3xl font-bold text-center mb-12">{t.faq.title}</h2>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                {t.faq.categories.map((category, index) => (
                                    <div key={index} className="bg-white rounded-lg shadow-lg p-6">
                                        <h3 className="text-xl font-bold mb-4">{category.name}</h3>
                                        <div className="space-y-4">
                                            {category.questions.map((item, qIndex) => (
                                                <div key={qIndex}>
                                                    <h4 className="font-semibold text-gray-800 mb-2">
                                                        {item.q}
                                                    </h4>
                                                    <p className="text-gray-600 text-sm">
                                                        {item.a}
                                                    </p>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {activeTab === 'contact' && (
                        <div>
                            <h2 className="text-3xl font-bold text-center mb-12">
                                {t.contactSupport.title}
                            </h2>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                {t.contactSupport.methods.map((method, index) => (
                                    <div
                                        key={index}
                                        className="bg-white rounded-lg shadow-lg p-6 text-center"
                                    >
                                        <div className="text-4xl mb-4">{method.icon}</div>
                                        <h3 className="text-xl font-bold mb-2">{method.type}</h3>
                                        <p className="text-blue-600 font-semibold mb-2">
                                            {method.value}
                                        </p>
                                        <p className="text-gray-600 text-sm">
                                            {method.description}
                                        </p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {(activeTab === 'docs' || activeTab === 'tickets') && (
                        <div className="text-center py-16">
                            <h2 className="text-2xl font-bold mb-4">功能开发中</h2>
                            <p className="text-gray-600">该功能正在开发中，敬请期待。</p>
                        </div>
                    )}
                </div>
            </section>

            <Footer translations={t} />
        </div>
    );
}