'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import SEOHead from '../../../../components/SEOHead';

interface SlugPageProps {
    params: { locale: string; slug: string };
}

export default function NewsSlugPage({ params }: SlugPageProps) {
    const [article, setArticle] = useState<any>(null);
    const [loading, setLoading] = useState(true);
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [readingProgress, setReadingProgress] = useState(0);
    const [relatedArticles, setRelatedArticles] = useState<any[]>([]);
    const [showBackToTop, setShowBackToTop] = useState(false);

    // 计算阅读时间（基于平均阅读速度）
    const calculateReadingTime = (content: string) => {
        const wordsPerMinute = 200; // 中文阅读速度约200字/分钟
        const wordCount = content.length;
        const readingTime = Math.ceil(wordCount / wordsPerMinute);
        return readingTime;
    };

    // 返回顶部功能
    const scrollToTop = () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    // 阅读进度监听
    useEffect(() => {
        const handleScroll = () => {
            const scrollTop = window.scrollY;
            const docHeight = document.documentElement.scrollHeight - window.innerHeight;
            const progress = (scrollTop / docHeight) * 100;
            setReadingProgress(Math.min(100, Math.max(0, progress)));
            
            // 显示返回顶部按钮
            setShowBackToTop(scrollTop > 300);
        };

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    useEffect(() => {
        const loadArticle = async () => {
            try {

                
                // 直接使用 params.locale 而不是 currentLang 状态
                const markdownRes = await fetch(`/docs/${params.locale}/news/${params.slug}.md`);
                if (markdownRes.ok) {
                    const markdownContent = await markdownRes.text();
                    const { frontmatter, content } = parseMarkdown(markdownContent);
                    setArticle({ ...frontmatter, content });
                    
                    // 加载相关文章
                    await loadRelatedArticles(frontmatter.category, frontmatter.tags);
                } else {

                    // 如果当前语言的文章不存在，尝试检查是否有其他语言版本
                    const fallbackLanguages = ['zh-CN', 'en', 'zh-TW'].filter(lang => lang !== params.locale);
                    let found = false;
                    
                    for (const fallbackLang of fallbackLanguages) {
                        const fallbackRes = await fetch(`/docs/${fallbackLang}/news/${params.slug}.md`);
                        if (fallbackRes.ok) {

                            setArticle({ 
                                error: 'language_not_available',
                                availableLanguage: fallbackLang,
                                slug: params.slug
                            });
                            found = true;
                            break;
                        }
                    }
                    
                    if (!found) {
                        setArticle(null);
                    }
                }
                setLoading(false);
            } catch (error) {
                console.error('Failed to load article:', error);
                setArticle(null);
                setLoading(false);
            }
        };

        loadArticle();
    }, [params.locale, params.slug]);

    // 加载相关文章
    const loadRelatedArticles = async (category: string, tags: string[]) => {
        try {
            const articlesApiRes = await fetch(`/api/articles/${params.locale}`);
            const articlesApiData = await articlesApiRes.json();
            const articleSlugs = articlesApiData.articles || [];
            
            const related: any[] = [];
            for (const slug of articleSlugs) {
                if (slug === params.slug) continue; // 排除当前文章
                
                try {
                    const markdownRes = await fetch(`/docs/${params.locale}/news/${slug}.md`);
                    if (markdownRes.ok) {
                        const markdownContent = await markdownRes.text();
                        const { frontmatter } = parseMarkdown(markdownContent);
                        
                        // 简单的相关性匹配：相同分类或有共同标签
                        if (frontmatter.category === category || 
                            (tags && frontmatter.tags && frontmatter.tags.some((tag: string) => tags.includes(tag)))) {
                            related.push({ ...frontmatter, slug });
                        }
                    }
                } catch (error) {
                    // 忽略错误
                }
                
                if (related.length >= 3) break; // 最多3篇相关文章
            }
            
            setRelatedArticles(related);
        } catch (error) {
            console.error('Failed to load related articles:', error);
        }
    };

    // 分享功能
    const shareArticle = (platform: string) => {
        const url = encodeURIComponent(window.location.href);
        const title = encodeURIComponent(article?.title || '');
        
        const shareUrls = {
            twitter: `https://twitter.com/intent/tweet?url=${url}&text=${title}`,
            facebook: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
            linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
            wechat: `javascript:void(0)`, // 微信需要特殊处理
        };
        
        if (platform === 'wechat') {
            // 复制链接到剪贴板
            navigator.clipboard.writeText(window.location.href).then(() => {
                alert('链接已复制到剪贴板，可以分享到微信了！');
            });
        } else {
            window.open(shareUrls[platform as keyof typeof shareUrls], '_blank', 'width=600,height=400');
        }
    };

    // Helper function to parse markdown frontmatter
    const parseMarkdown = (markdown: string) => {
        // 使用与列表页相同的强健正则表达式
        const frontmatterRegex = /^---\r?\n([\s\S]*?)\r?\n---\r?\n([\s\S]*)$/;
        const match = markdown.match(frontmatterRegex);

        if (!match) {
            return {
                frontmatter: {},
                content: markdown,
            };
        }

        const frontmatterText = match[1];
        const content = match[2];

        const frontmatter: any = {};
        frontmatterText.split('\n').forEach((line) => {
            const colonIndex = line.indexOf(':');
            if (colonIndex === -1) return;

            const key = line.substring(0, colonIndex).trim();
            const value = line.substring(colonIndex + 1).trim();

            if (key && value) {
                if (key === 'tags') {
                    if (value.startsWith('[') && value.endsWith(']')) {
                        frontmatter[key] = value
                            .slice(1, -1)
                            .split(',')
                            .map((tag) => tag.trim().replace(/['"]/g, ''))
                            .filter((tag) => tag.length > 0);
                    } else {
                        frontmatter[key] = [value.replace(/['"]/g, '')];
                    }
                } else if (key === 'featured') {
                    frontmatter[key] = value.toLowerCase() === 'true';
                } else {
                    frontmatter[key] = value.replace(/['"]/g, '');
                }
            }
        });

        return { frontmatter, content };
    };

    // 简单的Markdown渲染器
    const renderMarkdown = (markdown: string) => {
        if (!markdown) return '';
        
        return markdown
            // 标题处理
            .replace(/^### (.*$)/gim, '<h3 class="text-xl font-bold mt-6 mb-4 text-gray-800">$1</h3>')
            .replace(/^## (.*$)/gim, '<h2 class="text-2xl font-bold mt-8 mb-6 text-gray-800">$1</h2>')
            .replace(/^# (.*$)/gim, '<h1 class="text-3xl font-bold mt-8 mb-6 text-gray-800">$1</h1>')
            // 粗体和斜体
            .replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold">$1</strong>')
            .replace(/\*(.*?)\*/g, '<em class="italic">$1</em>')
            // 列表处理
            .replace(/^\s*\* (.*$)/gim, '<li class="ml-4 mb-2">• $1</li>')
            .replace(/^\s*- (.*$)/gim, '<li class="ml-4 mb-2">• $1</li>')
            .replace(/^\s*\d+\. (.*$)/gim, '<li class="ml-4 mb-2 list-decimal">$1</li>')
            // 链接处理
            .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-blue-600 hover:text-blue-800 underline">$1</a>')
            // 代码块处理
            .replace(/```([^`]+)```/g, '<pre class="bg-gray-100 p-4 rounded-lg my-4 overflow-x-auto"><code>$1</code></pre>')
            .replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-2 py-1 rounded text-sm">$1</code>')
            // 段落处理
            .replace(/\n\n/g, '</p><p class="mb-4">')
            // 换行处理
            .replace(/\n/g, '<br />');
    };

    if (loading) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50">
                <div className="text-center">
                    <div className="w-16 h-16 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
                    <p className="text-gray-600">加载中...</p>
                </div>
            </div>
        );
    }

    if (!article) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50">
                <div className="text-center">
                    <h1 className="text-2xl font-bold text-gray-900 mb-4">
                        {params.locale === 'en' ? 'Article Not Found' : 
                         params.locale === 'zh-TW' ? '文章未找到' : '文章未找到'}
                    </h1>
                    <p className="text-gray-600 mb-8">
                        {params.locale === 'en' ? 'Sorry, the article you are looking for does not exist.' :
                         params.locale === 'zh-TW' ? '抱歉，您訪問的文章不存在。' : '抱歉，您访问的文章不存在。'}
                    </p>
                    <Link 
                        href={`/${params.locale}/news`}
                        className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                    >
                        {params.locale === 'en' ? 'Back to News' :
                         params.locale === 'zh-TW' ? '返回新聞列表' : '返回新闻列表'}
                    </Link>
                </div>
            </div>
        );
    }

    // 处理语言不可用的情况
    if (article.error === 'language_not_available') {
        return (
            <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50">
                <div className="text-center max-w-md">
                    <div className="bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6">
                        <svg className="w-12 h-12 text-amber-500 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                        </svg>
                        <h1 className="text-xl font-bold text-gray-900 mb-2">
                            {params.locale === 'en' ? 'Article Not Available in English' :
                             params.locale === 'zh-TW' ? '文章暫無繁體中文版本' : '文章暂无简体中文版本'}
                        </h1>
                        <p className="text-gray-600 mb-4">
                            {params.locale === 'en' ? 'This article is available in other languages.' :
                             params.locale === 'zh-TW' ? '此文章有其他語言版本可供閱讀。' : '此文章有其他语言版本可供阅读。'}
                        </p>
                        <div className="space-y-3">
                            <Link 
                                href={`/${article.availableLanguage}/news/${article.slug}`}
                                className="block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                            >
                                {params.locale === 'en' ? `Read in ${article.availableLanguage === 'zh-CN' ? 'Chinese (Simplified)' : article.availableLanguage === 'zh-TW' ? 'Chinese (Traditional)' : 'English'}` :
                                 params.locale === 'zh-TW' ? `閱讀${article.availableLanguage === 'zh-CN' ? '簡體中文' : article.availableLanguage === 'en' ? '英文' : '繁體中文'}版本` :
                                 `阅读${article.availableLanguage === 'zh-TW' ? '繁体中文' : article.availableLanguage === 'en' ? '英文' : '简体中文'}版本`}
                            </Link>
                            <Link 
                                href={`/${params.locale}/news`}
                                className="block px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
                            >
                                {params.locale === 'en' ? 'Back to News' :
                                 params.locale === 'zh-TW' ? '返回新聞列表' : '返回新闻列表'}
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <>
            <SEOHead
                page="news"
                locale={params.locale as 'zh-CN' | 'zh-TW' | 'en'}
                canonicalUrl={`/news/${params.slug}`}
            />

            <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
                {/* 优雅的阅读进度条 */}
                <div className="fixed top-0 left-0 w-full h-1 bg-transparent z-[60]">
                    <div 
                        className="h-full bg-gradient-to-r from-blue-400/80 via-purple-500/80 to-pink-500/80 transition-all duration-500 ease-out"
                        style={{ 
                            width: `${readingProgress}%`,
                            boxShadow: readingProgress > 0 ? '0 0 10px rgba(139, 92, 246, 0.3)' : 'none'
                        }}
                    ></div>
                </div>

                {/* 悬浮分享按钮 */}
                <div className="fixed right-6 top-1/2 transform -translate-y-1/2 z-40 space-y-3">
                    <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl p-3 flex flex-col space-y-3 border border-gray-100">
                        <button 
                            onClick={() => shareArticle('wechat')}
                            className="w-10 h-10 bg-green-500 text-white rounded-full flex items-center justify-center hover:bg-green-600 transition-colors"
                            title="分享到微信"
                        >
                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18 0 .659-.52 1.188-1.162 1.188-.642 0-1.162-.529-1.162-1.188 0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18 0 .659-.52 1.188-1.162 1.188-.642 0-1.162-.529-1.162-1.188 0-.651.52-1.18 1.162-1.18z"/>
                                <path d="M24 14.388c0-3.14-2.956-5.689-6.594-5.689-3.638 0-6.594 2.549-6.594 5.689 0 3.14 2.956 5.689 6.594 5.689a7.84 7.84 0 0 0 2.276-.336c.237-.063.473-.018.675.078l1.485.87a.24.24 0 0 0 .13.04c.127 0 .23-.103.23-.23 0-.056-.022-.107-.037-.158l-.305-1.115a.463.463 0 0 1 .167-.513C23.05 17.898 24 16.213 24 14.388z"/>
                            </svg>
                        </button>
                        <button 
                            onClick={() => shareArticle('facebook')}
                            className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors"
                            title="分享到Facebook"
                        >
                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                            </svg>
                        </button>
                        <button 
                            onClick={() => shareArticle('twitter')}
                            className="w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center hover:bg-sky-600 transition-colors"
                            title="分享到Twitter"
                        >
                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                            </svg>
                        </button>
                        <button 
                            onClick={() => shareArticle('linkedin')}
                            className="w-10 h-10 bg-blue-700 text-white rounded-full flex items-center justify-center hover:bg-blue-800 transition-colors"
                            title="分享到LinkedIn"
                        >
                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                            </svg>
                        </button>
                    </div>
                </div>

                {/* 返回顶部按钮 */}
                {showBackToTop && (
                    <button
                        onClick={scrollToTop}
                        className="fixed bottom-8 right-6 w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-200 z-40 flex items-center justify-center"
                        title="返回顶部"
                    >
                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
                        </svg>
                    </button>
                )}

                {/* Navigation */}
                <nav className="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0 z-50">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="flex justify-between items-center h-16">
                            <Link href={`/${params.locale}`} className="flex items-center space-x-2">
                                <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                                    <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
                                    </svg>
                                </div>
                                <span className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                                    CloudTech
                                </span>
                            </Link>

                            <div className="hidden md:flex items-center space-x-8">
                                <Link href={`/${params.locale}`} className="text-gray-700 hover:text-blue-600 font-medium transition-colors">
                                    {params.locale === 'en' ? 'Home' : params.locale === 'zh-TW' ? '首頁' : '首页'}
                                </Link>
                                <Link href={`/${params.locale}/products`} className="text-gray-700 hover:text-blue-600 font-medium transition-colors">
                                    {params.locale === 'en' ? 'Products' : params.locale === 'zh-TW' ? '產品與服務' : '产品与服务'}
                                </Link>
                                <Link href={`/${params.locale}/news`} className="text-blue-600 font-medium">
                                    {params.locale === 'en' ? 'News' : params.locale === 'zh-TW' ? '新聞資訊' : '新闻资讯'}
                                </Link>
                                <Link href={`/${params.locale}/support`} className="text-gray-700 hover:text-blue-600 font-medium transition-colors">
                                    {params.locale === 'en' ? 'Support' : params.locale === 'zh-TW' ? '客戶支持' : '客户支持'}
                                </Link>
                                <Link href={`/${params.locale}/about`} className="text-gray-700 hover:text-blue-600 font-medium transition-colors">
                                    {params.locale === 'en' ? 'About' : params.locale === 'zh-TW' ? '關於我們' : '关于我们'}
                                </Link>
                            </div>

                            <div className="flex items-center space-x-4">
                                <select
                                    value={params.locale}
                                    onChange={(e) => {
                                        const newLocale = e.target.value;
                                        const currentPath = window.location.pathname;
                                        const pathWithoutLocale = currentPath.replace(/^\/[^\/]+/, '');
                                        window.location.href = `/${newLocale}${pathWithoutLocale}`;
                                    }}
                                    className="bg-white/50 border border-white/30 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    title={params.locale === 'en' ? 'Select Language' : params.locale === 'zh-TW' ? '選擇語言' : '选择语言'}
                                >
                                    <option value="zh-CN">简体中文</option>
                                    <option value="zh-TW">繁體中文</option>
                                    <option value="en">English</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </nav>

                {/* Article Content */}
                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                    <div className="bg-white rounded-3xl shadow-lg overflow-hidden">
                        {/* Article Header */}
                        <div className="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-8">
                            <div className="flex items-center mb-4">
                                <Link 
                                    href={`/${params.locale}/news`}
                                    className="text-white/80 hover:text-white font-medium 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="M15 19l-7-7 7-7" />
                                    </svg>
                                    {params.locale === 'en' ? 'Back to News' : params.locale === 'zh-TW' ? '返回新聞列表' : '返回新闻列表'}
                                </Link>
                            </div>
                            <h1 className="text-3xl md:text-4xl font-bold mb-4">{article.title}</h1>
                            <div className="flex flex-wrap items-center space-x-6 text-white/80">
                                <div className="flex items-center">
                                    <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
                                    </svg>
                                    {article.date}
                                </div>
                                {article.author && (
                                    <div className="flex items-center">
                                        <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
                                        </svg>
                                        {article.author}
                                    </div>
                                )}
                                {article.category && (
                                    <div className="flex items-center">
                                        <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
                                        </svg>
                                        {article.category}
                                    </div>
                                )}
                                <div className="flex items-center">
                                    <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
                                    </svg>
                                                                                        {params.locale === 'en' ? `About ${calculateReadingTime(article.content || '')} min read` :
                                                     params.locale === 'zh-TW' ? `約 ${calculateReadingTime(article.content || '')} 分鐘閱讀` :
                                                     `约 ${calculateReadingTime(article.content || '')} 分钟阅读`}
                                </div>
                            </div>
                            {article.tags && article.tags.length > 0 && (
                                <div className="flex flex-wrap gap-2 mt-4">
                                    {article.tags.map((tag: string, index: number) => (
                                        <span 
                                            key={index}
                                            className="px-3 py-1 bg-white/20 rounded-full text-sm font-medium"
                                        >
                                            #{tag}
                                        </span>
                                    ))}
                                </div>
                            )}
                        </div>

                        {/* Article Body */}
                        <div className="p-8">
                            {article.summary && (
                                <div className="bg-blue-50 border-l-4 border-blue-500 p-4 mb-8">
                                    <p className="text-blue-700 font-medium">{article.summary}</p>
                                </div>
                            )}
                            <div className="prose prose-lg max-w-none">
                                <div 
                                    dangerouslySetInnerHTML={{ 
                                        __html: `<p class="mb-4">${renderMarkdown(article.content)}</p>` 
                                    }} 
                                />
                            </div>
                        </div>
                    </div>

                    {/* 相关文章推荐 */}
                    {relatedArticles.length > 0 && (
                        <div className="mt-12">
                            <div className="bg-white rounded-3xl shadow-lg p-8">
                                <h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                                    <svg className="w-6 h-6 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    {params.locale === 'en' ? 'Related Articles' : params.locale === 'zh-TW' ? '相關推薦' : '相关推荐'}
                                </h3>
                                <div className="grid md:grid-cols-3 gap-6">
                                    {relatedArticles.map((relatedArticle, index) => (
                                        <Link 
                                            key={index}
                                            href={`/${params.locale}/news/${relatedArticle.slug}`}
                                            className="group block"
                                        >
                                            <div className="bg-gradient-to-br from-slate-50 to-blue-50 rounded-xl p-6 h-full hover:shadow-md transition-all duration-200 border border-gray-100 group-hover:border-blue-200">
                                                <div className="flex items-center mb-3">
                                                    <div className="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
                                                    <span className="text-sm text-gray-500">
                                                        {relatedArticle.category || '技术'}
                                                    </span>
                                                </div>
                                                <h4 className="font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors line-clamp-2">
                                                    {relatedArticle.title}
                                                </h4>
                                                <p className="text-gray-600 text-sm mb-3 line-clamp-3">
                                                    {relatedArticle.summary}
                                                </p>
                                                <div className="flex items-center text-xs text-gray-500">
                                                    <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
                                                    </svg>
                                                    {relatedArticle.date}
                                                </div>
                                            </div>
                                        </Link>
                                    ))}
                                </div>
                            </div>
                        </div>
                    )}

                    {/* 文章操作区域 */}
                    <div className="mt-12">
                        <div className="bg-white rounded-3xl shadow-lg p-8">
                            <div className="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
                                <div className="flex items-center space-x-4">
                                    <div className="flex items-center space-x-2">
                                        <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
                                        </svg>
                                        <span className="text-gray-600 font-medium">
                                            {params.locale === 'en' ? 'Share Article' : params.locale === 'zh-TW' ? '分享文章' : '分享文章'}
                                        </span>
                                    </div>
                                    <div className="flex space-x-2">
                                        <button 
                                            onClick={() => shareArticle('wechat')}
                                            className="px-3 py-1 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors text-sm flex items-center space-x-1"
                                        >
                                            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348z"/>
                                                <path d="M24 14.388c0-3.14-2.956-5.689-6.594-5.689-3.638 0-6.594 2.549-6.594 5.689 0 3.14 2.956 5.689 6.594 5.689a7.84 7.84 0 0 0 2.276-.336c.237-.063.473-.018.675.078l1.485.87a.24.24 0 0 0 .13.04c.127 0 .23-.103.23-.23 0-.056-.022-.107-.037-.158l-.305-1.115a.463.463 0 0 1 .167-.513C23.05 17.898 24 16.213 24 14.388z"/>
                                            </svg>
                                            <span>微信</span>
                                        </button>
                                        <button 
                                            onClick={() => shareArticle('facebook')}
                                            className="px-3 py-1 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors text-sm flex items-center space-x-1"
                                        >
                                            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                            </svg>
                                            <span>Facebook</span>
                                        </button>
                                        <button 
                                            onClick={() => shareArticle('twitter')}
                                            className="px-3 py-1 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors text-sm flex items-center space-x-1"
                                        >
                                            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                                            </svg>
                                            <span>Twitter</span>
                                        </button>
                                    </div>
                                </div>
                                <Link 
                                    href={`/${params.locale}/news`}
                                    className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:shadow-lg transition-all duration-200"
                                >
                                    <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
                                    </svg>
                                    {params.locale === 'en' ? 'View More News' : params.locale === 'zh-TW' ? '查看更多新聞' : '查看更多新闻'}
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}