'use client';

import { usePathname } from 'next/navigation';
import { Button } from '@/app/components/ui/button';
import Header from '@/app/components/Header';
import Footer from '@/app/components/Footer';
import Link from 'next/link';
import { FileX, Home, ArrowLeft } from 'lucide-react';

export default function NotFound() {
    const pathname = usePathname();
    
    // 从路径中检测语言
    const getLocaleFromPath = (path: string) => {
        if (path.startsWith('/zh-TW')) return 'zh-TW';
        if (path.startsWith('/en')) return 'en';
        return 'zh-CN';
    };

    const locale = getLocaleFromPath(pathname);
    
    // 根据语言设置翻译 - 与详情页面保持一致的结构
    const translations = {
        'zh-CN': {
            nav: {
                home: '首页',
                products: '产品与服务',
                news: '新闻资讯',
                support: '客户支持',
                about: '关于我们',
                contact: '联系我们',
            },
            footer: {
                sections: [
                    {
                        title: '目录',
                        items: ['首页', '产品与服务', '新闻资讯', '客户支持', '关于我们'],
                    },
                    {
                        title: '热门产品',
                        items: ['轻量云服务器', '站群服务器', 'EC2服务器', '高防服务器', 'S3云存储'],
                    },
                    {
                        title: '客户支持',
                        items: ['技术支持', '在线客服', '帮助文档', '服务状态'],
                    },
                    {
                        title: '公司信息',
                        items: ['关于我们', '联系我们', '隐私政策', '服务条款'],
                    },
                ],
            },
            // 404页面特有的翻译
            notFound: {
                title: '页面未找到',
                description: '抱歉，您访问的页面不存在或已被移除。',
                articleNotFound: '该文章可能没有对应的中文版本。',
                suggestion: '建议您：',
                checkUrl: '检查网址是否正确',
                backHome: '返回首页',
                backNews: '返回新闻列表',
                contactUs: '如果问题持续存在，请联系我们',
                brand: 'AwsLinker'
            }
        },
        'zh-TW': {
            nav: {
                home: '首頁',
                products: '產品與服務',
                news: '新聞資訊',
                support: '客戶支持',
                about: '關於我們',
                contact: '聯繫我們',
            },
            footer: {
                sections: [
                    {
                        title: '目錄',
                        items: ['首頁', '產品與服務', '新聞資訊', '客戶支持', '關於我們'],
                    },
                    {
                        title: '熱門產品',
                        items: ['輕量雲服務器', '站群服務器', 'EC2服務器', '高防服務器', 'S3雲存儲'],
                    },
                    {
                        title: '客戶支持',
                        items: ['技術支持', '在線客服', '幫助文檔', '服務狀態'],
                    },
                    {
                        title: '公司信息',
                        items: ['關於我們', '聯繫我們', '隱私政策', '服務條款'],
                    },
                ],
            },
            // 404页面特有的翻译
            notFound: {
                title: '頁面未找到',
                description: '抱歉，您訪問的頁面不存在或已被移除。',
                articleNotFound: '該文章可能沒有對應的繁體中文版本。',
                suggestion: '建議您：',
                checkUrl: '檢查網址是否正確',
                backHome: '返回首頁',
                backNews: '返回新聞列表',
                contactUs: '如果問題持續存在，請聯繫我們',
                brand: 'AwsLinker'
            }
        },
        'en': {
            nav: {
                home: 'Home',
                products: 'Products & Services',
                news: 'News',
                support: 'Support',
                about: 'About Us',
                contact: 'Contact Us',
            },
            footer: {
                sections: [
                    {
                        title: 'Directory',
                        items: ['Home', 'Products & Services', 'News', 'Support', 'About Us'],
                    },
                    {
                        title: 'Popular Products',
                        items: ['Lightweight Cloud Server', 'Station Group Server', 'EC2 Server', 'High-Defense Server', 'S3 Cloud Storage'],
                    },
                    {
                        title: 'Customer Support',
                        items: ['Technical Support', 'Online Service', 'Documentation', 'Service Status'],
                    },
                    {
                        title: 'Company Info',
                        items: ['About Us', 'Contact Us', 'Privacy Policy', 'Terms of Service'],
                    },
                ],
            },
            // 404页面特有的翻译
            notFound: {
                title: 'Page Not Found',
                description: 'Sorry, the page you are looking for does not exist or has been removed.',
                articleNotFound: 'This article may not be available in English.',
                suggestion: 'We suggest you:',
                checkUrl: 'Check if the URL is correct',
                backHome: 'Go to Homepage',
                backNews: 'Back to News',
                contactUs: 'Contact us if the problem persists',
                brand: 'DongYun Tech'
            }
        }
    };

    const currentTranslations = translations[locale];
    const t = currentTranslations.notFound;
    
    // 检查是否是文章页面
    const isArticlePage = pathname.includes('/news/');
    
    return (
        <div className="min-h-screen bg-gray-50 flex flex-col">
            <Header 
                language={locale} 
                setLanguage={() => {}} 
                translations={currentTranslations} 
                locale={locale} 
            />
            
            <main className="flex-1 flex items-center justify-center px-4 py-12">
                <div className="max-w-md w-full text-center">
                    <div className="mb-8">
                        <div className="mx-auto w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                            <FileX className="w-12 h-12 text-blue-600" />
                        </div>
                        <h1 className="text-3xl font-bold text-gray-900 mb-4">
                            404
                        </h1>
                        <h2 className="text-xl font-semibold text-gray-700 mb-2">
                            {t.title}
                        </h2>
                        <p className="text-gray-600 mb-4">
                            {t.description}
                        </p>
                        {isArticlePage && (
                            <p className="text-blue-600 text-sm mb-6">
                                {t.articleNotFound}
                            </p>
                        )}
                    </div>

                    <div className="space-y-4">
                        <p className="text-sm text-gray-600 font-medium">
                            {t.suggestion}
                        </p>
                        
                        <div className="space-y-3">
                            <Link href={locale === 'zh-CN' ? '/' : `/${locale}`}>
                                <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
                                    <Home className="w-4 h-4 mr-2" />
                                    {t.backHome}
                                </Button>
                            </Link>
                            
                            {isArticlePage && (
                                <Link href={locale === 'zh-CN' ? '/news' : `/${locale}/news`}>
                                    <Button variant="outline" className="w-full">
                                        <ArrowLeft className="w-4 h-4 mr-2" />
                                        {t.backNews}
                                    </Button>
                                </Link>
                            )}
                        </div>
                        
                        <p className="text-xs text-gray-500 mt-6">
                            {t.contactUs}
                        </p>
                    </div>
                </div>
            </main>
            
            <Footer translations={currentTranslations} />
        </div>
    );
}