'use client';

import Navigation from '../../../../components/Navigation';
import Footer from '../../../../components/Footer';
import { useLanguage } from '../../../../hooks/useLanguage';
import Link from 'next/link';
import { LanguageType } from '../../../../lib/content';

interface ArticlePageProps {
    params: {
        lang: string;
        id: string;
    };
}

export default function ArticlePage({ params }: ArticlePageProps) {
    const { currentLang, setCurrentLang, currentContent, createLocalizedPath } = useLanguage(
        params.lang as LanguageType,
    );
    const articleId = parseInt(params.id, 10);

    const article = currentContent.news.articles.find((a) => a.id === articleId);
    const relatedArticles = currentContent.news.articles
        .filter((a) => a.id !== articleId && a.category === article?.category)
        .slice(0, 3);

    if (!article) {
        return (
            <div className="min-h-screen bg-gray-900 text-white">
                <Navigation
                    currentLang={currentLang}
                    setCurrentLang={setCurrentLang}
                    content={currentContent}
                    createLocalizedPath={createLocalizedPath}
                />

                <div className="flex items-center justify-center min-h-[60vh]">
                    <div className="text-center">
                        <h1 className="text-4xl font-bold mb-4 text-cyan-400">文章未找到</h1>
                        <p className="text-gray-400 mb-8">抱歉，您访问的文章不存在。</p>
                        <Link
                            href={createLocalizedPath('/news')}
                            className="px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-semibold hover:from-cyan-400 hover:to-blue-500 transition-all duration-300"
                        >
                            返回资讯列表
                        </Link>
                    </div>
                </div>

                {/* 🔧 完整调用 Footer，添加 createLocalizedPath */}
                <Footer content={currentContent} createLocalizedPath={createLocalizedPath} />
            </div>
        );
    }

    const getCategoryColor = (category: string) => {
        const colors: Record<string, string> = {
            industry: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
            technology: 'bg-green-500/20 text-green-400 border-green-500/30',
            company: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
            case: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
        };
        return colors[category] ?? 'bg-gray-500/20 text-gray-400 border-gray-500/30';
    };

    return (
        <div className="min-h-screen bg-gray-900 text-white">
            <Navigation
                currentLang={currentLang}
                setCurrentLang={setCurrentLang}
                content={currentContent}
                createLocalizedPath={createLocalizedPath}
            />

            {/* Breadcrumb */}
            <section className="relative z-10 px-6 py-8">
                <div className="max-w-4xl mx-auto">
                    <nav className="flex items-center space-x-2 text-sm text-gray-400">
                        <Link
                            href={createLocalizedPath('/')}
                            className="hover:text-cyan-400 transition-colors"
                        >
                            首页
                        </Link>
                        <span>/</span>
                        <Link
                            href={createLocalizedPath('/news')}
                            className="hover:text-cyan-400 transition-colors"
                        >
                            资讯
                        </Link>
                        <span>/</span>
                        <span className="text-gray-300">{article.title}</span>
                    </nav>
                </div>
            </section>

            {/* Article Header */}
            <section className="relative z-10 px-6 py-8">
                <div className="max-w-4xl mx-auto">
                    <div className="mb-6">
                        <span
                            className={`px-3 py-1 rounded-full text-sm font-medium border ${getCategoryColor(
                                article.category,
                            )}`}
                        >
                            {currentContent.news.categories[article.category]}
                        </span>
                    </div>

                    <h1 className="text-3xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent leading-tight">
                        {article.title}
                    </h1>

                    <div className="flex flex-wrap items-center gap-4 text-gray-400 mb-8">
                        <div className="flex items-center">
                            <svg
                                className="w-5 h-5 mr-2"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                                />
                            </svg>
                            {article.author}
                        </div>
                        <div className="flex items-center">
                            <svg
                                className="w-5 h-5 mr-2"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                                />
                            </svg>
                            {article.date}
                        </div>
                        <div className="flex items-center">
                            <svg
                                className="w-5 h-5 mr-2"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                                />
                            </svg>
                            {article.readTime}
                        </div>
                    </div>

                    {/* Tags */}
                    <div className="flex flex-wrap gap-2 mb-8">
                        {article.tags.map((tag, idx) => (
                            <span
                                key={idx}
                                className="px-3 py-1 bg-gray-700/50 text-gray-400 text-sm rounded-full"
                            >
                                #{tag}
                            </span>
                        ))}
                    </div>
                </div>
            </section>

            {/* Article Content */}
            <section className="relative z-10 px-6 py-8">
                <div className="max-w-4xl mx-auto">
                    <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-8 border border-cyan-500/20">
                        <div className="prose prose-lg prose-invert max-w-none">
                            <p className="text-xl text-gray-300 leading-relaxed mb-6">
                                {article.summary}
                            </p>
                            <div className="text-gray-300 leading-relaxed space-y-4">
                                {article.content.split('\n').map((paragraph, idx) => (
                                    <p key={idx}>{paragraph}</p>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Share Section */}
            <section className="relative z-10 px-6 py-8">
                <div className="max-w-4xl mx-auto">{/* ... 分享按钮等省略 */}</div>
            </section>

            {/* Related Articles */}
            {relatedArticles.length > 0 && (
                <section className="relative z-10 px-6 py-20">{/* ... 相关文章省略 */}</section>
            )}

            {/* 🔧 完整调用 Footer，传入 createLocalizedPath */}
            <Footer content={currentContent} createLocalizedPath={createLocalizedPath} />
        </div>
    );
}