'use client';

import { useState } from 'react';
import Navigation from '../../../components/Navigation';
import Footer from '../../../components/Footer';
import { useLanguage } from '../../../hooks/useLanguage';
import Link from 'next/link';

interface NewsPageProps {
    params: {
        lang: string;
    };
}

export default function NewsPage({ params }: NewsPageProps) {
    const { currentLang, setCurrentLang, currentContent, createLocalizedPath } = useLanguage(
        params.lang,
    );
    const [selectedCategory, setSelectedCategory] = useState('all');

    const filteredArticles =
        selectedCategory === 'all'
            ? currentContent.news.articles
            : currentContent.news.articles.filter(
                  (article) => article.category === selectedCategory,
              );

    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}
            />

            {/* Hero Section */}
            <section className="relative z-10 px-6 py-20">
                <div className="max-w-7xl mx-auto text-center">
                    <h1 className="text-4xl md:text-6xl font-bold mb-8 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
                        {currentContent.news.title}
                    </h1>
                    <p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
                        {currentContent.news.subtitle}
                    </p>
                </div>
            </section>

            {/* Category Filter */}
            <section className="relative z-10 px-6 py-8">
                <div className="max-w-7xl mx-auto">
                    <div className="flex flex-wrap justify-center gap-4 mb-12">
                        {Object.entries(currentContent.news.categories).map(([key, label]) => (
                            <button
                                key={key}
                                onClick={() => setSelectedCategory(key)}
                                className={`px-6 py-3 rounded-full border transition-all duration-300 ${
                                    selectedCategory === key
                                        ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50'
                                        : 'bg-gray-800/50 text-gray-400 border-gray-600/50 hover:border-cyan-500/30 hover:text-cyan-400'
                                }`}
                            >
                                {label}
                            </button>
                        ))}
                    </div>
                </div>
            </section>

            {/* Articles Grid */}
            <section className="relative z-10 px-6 py-8">
                <div className="max-w-7xl mx-auto">
                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {filteredArticles.map((article) => (
                            <article
                                key={article.id}
                                className="bg-gray-800/50 backdrop-blur-sm rounded-xl overflow-hidden border border-cyan-500/20 hover:border-cyan-400/50 transition-all duration-300 group"
                            >
                                {/* Article Image */}
                                <div className="relative h-48 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 overflow-hidden">
                                    <div className="absolute inset-0 bg-gradient-to-t from-gray-900/50 to-transparent" />

                                    <div className="absolute top-4 left-4">
                                        <span
                                            className={`px-3 py-1 rounded-full text-xs font-medium border ${getCategoryColor(article.category)}`}
                                        >
                                            {currentContent.news.categories[article.category]}
                                        </span>
                                    </div>
                                </div>

                                {/* Article Content */}
                                <div className="p-6">
                                    <div className="flex items-center text-sm text-gray-400 mb-3">
                                        <span>{article.author}</span>
                                        <span className="mx-2">•</span>
                                        <span>{article.date}</span>
                                        <span className="mx-2">•</span>
                                        <span>{article.readTime}</span>
                                    </div>

                                    <h3 className="text-xl font-bold mb-3 text-white group-hover:text-cyan-400 transition-colors line-clamp-2">
                                        <Link href={createLocalizedPath(`/news/${article.id}`)}>
                                            {article.title}
                                        </Link>
                                    </h3>

                                    <p className="text-gray-300 mb-4 line-clamp-3 leading-relaxed">
                                        {article.summary}
                                    </p>

                                    {/* Tags */}
                                    <div className="flex flex-wrap gap-2 mb-4">
                                        {article.tags.map((tag, index) => (
                                            <span
                                                key={index}
                                                className="px-2 py-1 bg-gray-700/50 text-gray-400 text-xs rounded-md"
                                            >
                                                #{tag}
                                            </span>
                                        ))}
                                    </div>

                                    <Link
                                        href={createLocalizedPath(`/news/${article.id}`)}
                                        className="inline-flex items-center text-cyan-400 hover:text-cyan-300 transition-colors group"
                                    >
                                        阅读更多
                                        <svg
                                            className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M9 5l7 7-7 7"
                                            />
                                        </svg>
                                    </Link>
                                </div>
                            </article>
                        ))}
                    </div>

                    {/* Load More Button */}
                    {filteredArticles.length > 6 && (
                        <div className="text-center mt-12">
                            <button className="px-8 py-4 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 transform hover:scale-105">
                                加载更多
                            </button>
                        </div>
                    )}
                </div>
            </section>

            {/* Newsletter Subscription */}
            <section className="relative z-10 px-6 py-20 bg-gray-800/30">
                <div className="max-w-4xl mx-auto text-center">
                    <h2 className="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
                        订阅我们的资讯
                    </h2>
                    <p className="text-xl text-gray-300 mb-8">
                        第一时间获取云计算行业最新动态和技术资讯
                    </p>
                    <div className="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto">
                        <input
                            type="email"
                            placeholder="输入您的邮箱地址"
                            className="flex-1 px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:border-cyan-400 transition-colors"
                        />

                        <button 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">
                            订阅
                        </button>
                    </div>
                </div>
            </section>

            <Footer content={currentContent} createLocalizedPath={createLocalizedPath} />
        </div>
    );
}