'use client';

import { useState } from 'react';

interface SupportTabsProps {
    translations: any;
}

export default function SupportTabs({ translations }: SupportTabsProps) {
    const [activeTab, setActiveTab] = useState('faq');
    const t = translations;

    return (
        <>
            <div className="flex justify-center mb-8">
                <div className="flex space-x-1 bg-gray-100 p-1 rounded-lg">
                    {t.tabs && 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 as string}
                        </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: any, index: number) => (
                            <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: any, qIndex: number) => (
                                        <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: any, index: number) => (
                            <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>
            )}
        </>
    );
}