import { getTranslations, Locale, getNavigationPaths } from '@/lib/i18n';
import { generateMetadata as generateSEOMetadata } from '@/lib/seo';
import Layout from '@/components/Layout';
import Link from 'next/link';

interface NewsPageProps {
    params: {
        locale: Locale;
    };
}

export async function generateStaticParams() {
    const locales = ['zh-CN', 'zh-TW', 'en'];
    return locales.map((locale) => ({
        locale,
    }));
}

export async function generateMetadata({ params }: NewsPageProps) {
    return generateSEOMetadata(params.locale, 'news');
}

export default async function NewsPage({ params }: NewsPageProps) {
    const { locale } = params;
    const [common, news] = await Promise.all([
        getTranslations(locale, 'common'),
        getTranslations(locale, 'news'),
    ]);

    const navigationPaths = getNavigationPaths(locale);
    const navigation = [
        {
            name: common.navigation.home,
            href: navigationPaths.find((p) => p.key === 'home')?.path || '/',
        },
        {
            name: common.navigation.products,
            href: navigationPaths.find((p) => p.key === 'products')?.path || '/products',
        },
        {
            name: common.navigation.news,
            href: navigationPaths.find((p) => p.key === 'news')?.path || '/news',
        },
        {
            name: common.navigation.support,
            href: navigationPaths.find((p) => p.key === 'support')?.path || '/support',
        },
        {
            name: common.navigation.about,
            href: navigationPaths.find((p) => p.key === 'about')?.path || '/about',
        },
    ];

    // Separate featured and regular articles
    const featuredArticles = news.articles.filter((article: any) => article.featured);
    const regularArticles = news.articles.filter((article: any) => !article.featured);

    return (
        <Layout locale={locale} navigation={navigation} common={common} data-oid="0vnem-m">
            {/* Hero Section */}
            <section
                className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-indigo-100"
                data-oid="_z.k3zw"
            >
                <div className="max-w-4xl mx-auto text-center" data-oid="_3g2-tz">
                    <h1
                        className="text-4xl md:text-6xl font-light leading-tight mb-8 text-gray-900"
                        data-oid="hwhf6yk"
                    >
                        {news.title}
                    </h1>
                    <p
                        className="text-xl md:text-2xl text-gray-600 mb-12 font-light max-w-3xl mx-auto"
                        data-oid="475_6p4"
                    >
                        {news.subtitle}
                    </p>
                </div>
            </section>

            {/* Categories Filter */}
            <section className="py-8 px-4 sm:px-6 lg:px-8 bg-white border-b" data-oid=".1agyst">
                <div className="max-w-6xl mx-auto" data-oid="8lpvlgm">
                    <div className="flex flex-wrap justify-center gap-4" data-oid="x9w74q0">
                        <button
                            className="px-4 py-2 bg-blue-600 text-white rounded-full text-sm font-medium"
                            data-oid="m36b8uf"
                        >
                            {locale === 'en' ? 'All' : locale === 'zh-TW' ? '全部' : '全部'}
                        </button>
                        {news.categories.map((category: any) => (
                            <button
                                key={category.id}
                                className="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors"
                                data-oid="1mk88jz"
                            >
                                {category.name}
                            </button>
                        ))}
                    </div>
                </div>
            </section>

            {/* Featured Articles */}
            {featuredArticles.length > 0 && (
                <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50" data-oid="j5o7dgs">
                    <div className="max-w-6xl mx-auto" data-oid="-67:-eb">
                        <h2
                            className="text-3xl font-light mb-12 text-gray-900 text-center"
                            data-oid="f0:azse"
                        >
                            {locale === 'en'
                                ? 'Featured Stories'
                                : locale === 'zh-TW'
                                  ? '精選報導'
                                  : '精选报道'}
                        </h2>
                        <div
                            className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
                            data-oid=":97aius"
                        >
                            {featuredArticles.map((article: any, index: number) => (
                                <article
                                    key={article.id}
                                    className="bg-white rounded-lg shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden group hover:-translate-y-1"
                                    data-oid="f:en70o"
                                >
                                    {/* Article Image */}
                                    <div
                                        className="h-48 bg-gradient-to-br from-blue-500 to-purple-600 relative overflow-hidden"
                                        data-oid="2t.wnic"
                                    >
                                        <div
                                            className="absolute inset-0 bg-black/20"
                                            data-oid="i4ukfzz"
                                        ></div>
                                        <div className="absolute top-4 left-4" data-oid="k71eke4">
                                            <span
                                                className="px-3 py-1 bg-white/90 text-gray-800 text-xs rounded-full font-medium"
                                                data-oid=".sw53_f"
                                            >
                                                {article.category}
                                            </span>
                                        </div>
                                        <div
                                            className="absolute bottom-4 right-4"
                                            data-oid="-h749rl"
                                        >
                                            <span
                                                className="px-2 py-1 bg-red-500 text-white text-xs rounded-full font-medium"
                                                data-oid="hncsyw7"
                                            >
                                                {locale === 'en'
                                                    ? 'Featured'
                                                    : locale === 'zh-TW'
                                                      ? '精選'
                                                      : '精选'}
                                            </span>
                                        </div>
                                    </div>

                                    <div className="p-6" data-oid="ve46565">
                                        <div
                                            className="flex items-center gap-2 mb-3 text-sm text-gray-500"
                                            data-oid=":wckr.6"
                                        >
                                            <span data-oid="ry:qh2b">{article.date}</span>
                                            <span data-oid="f4btvsg">•</span>
                                            <span data-oid="v_wu-ue">{article.readTime}</span>
                                        </div>
                                        <Link
                                            href={`/${locale === 'zh-CN' ? '' : locale + '/'}news/${article.id}`}
                                            data-oid="f2dc6fr"
                                        >
                                            <h3
                                                className="text-xl font-light mb-3 text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-2 cursor-pointer"
                                                data-oid="9m9sdpe"
                                            >
                                                {article.title}
                                            </h3>
                                        </Link>
                                        <p
                                            className="text-gray-600 font-light leading-relaxed mb-4 text-sm line-clamp-3"
                                            data-oid="apln_2n"
                                        >
                                            {article.excerpt}
                                        </p>
                                        <Link
                                            href={`/${locale}/news/${article.id}`}
                                            className="text-blue-600 hover:text-blue-800 font-light text-sm flex items-center gap-1"
                                            data-oid="v7lxwey"
                                        >
                                            {news.readMore}
                                            <svg
                                                className="w-4 h-4"
                                                fill="none"
                                                stroke="currentColor"
                                                viewBox="0 0 24 24"
                                                data-oid="ktuqoe-"
                                            >
                                                <path
                                                    strokeLinecap="round"
                                                    strokeLinejoin="round"
                                                    strokeWidth={2}
                                                    d="M9 5l7 7-7 7"
                                                    data-oid="kvo-txc"
                                                />
                                            </svg>
                                        </Link>
                                    </div>
                                </article>
                            ))}
                        </div>
                    </div>
                </section>
            )}

            {/* Regular Articles */}
            <section className="py-20 px-4 sm:px-6 lg:px-8" data-oid="v4v_qyp">
                <div className="max-w-5xl mx-auto" data-oid="xw5.vf6">
                    <h2
                        className="text-3xl font-light mb-12 text-gray-900 text-center"
                        data-oid="nqeg.nx"
                    >
                        {locale === 'en'
                            ? 'Latest News'
                            : locale === 'zh-TW'
                              ? '最新消息'
                              : '最新消息'}
                    </h2>
                    <div className="space-y-8" data-oid="dvi3cq5">
                        {regularArticles.map((article: any, index: number) => (
                            <article
                                key={article.id}
                                className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-6 border border-gray-100"
                                data-oid="u.554nu"
                            >
                                <div className="flex flex-col lg:flex-row gap-6" data-oid="ak2f2lg">
                                    <div className="lg:w-1/3" data-oid="8qjnsik">
                                        <div
                                            className="aspect-video bg-gradient-to-br from-gray-200 to-gray-300 rounded-lg"
                                            data-oid="a:bubtr"
                                        ></div>
                                    </div>
                                    <div className="lg:w-2/3" data-oid="ov47-2.">
                                        <div
                                            className="flex items-center gap-4 mb-3"
                                            data-oid="5egq_qs"
                                        >
                                            <span
                                                className="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full font-medium"
                                                data-oid="tbtpcc0"
                                            >
                                                {article.category}
                                            </span>
                                            <span
                                                className="text-gray-500 text-sm"
                                                data-oid="mu77._u"
                                            >
                                                {article.date}
                                            </span>
                                            <span
                                                className="text-gray-400 text-sm"
                                                data-oid="tm5xbdm"
                                            >
                                                {article.readTime}
                                            </span>
                                        </div>
                                        <Link
                                            href={`/${locale === 'zh-CN' ? '' : locale + '/'}news/${article.id}`}
                                            data-oid="-rjf7x3"
                                        >
                                            <h3
                                                className="text-2xl font-light mb-4 text-gray-900 hover:text-blue-600 transition-colors cursor-pointer"
                                                data-oid="d.pkpb7"
                                            >
                                                {article.title}
                                            </h3>
                                        </Link>
                                        <p
                                            className="text-gray-600 font-light leading-relaxed mb-4"
                                            data-oid="vo-q4e."
                                        >
                                            {article.excerpt}
                                        </p>
                                        <div
                                            className="flex items-center justify-between"
                                            data-oid="itrnko:"
                                        >
                                            <Link
                                                href={`/${locale}/news/${article.id}`}
                                                className="text-blue-600 hover:text-blue-800 font-light flex items-center gap-1"
                                                data-oid=":0h-66z"
                                            >
                                                {news.readMore}
                                                <svg
                                                    className="w-4 h-4"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    viewBox="0 0 24 24"
                                                    data-oid="ifbxhoc"
                                                >
                                                    <path
                                                        strokeLinecap="round"
                                                        strokeLinejoin="round"
                                                        strokeWidth={2}
                                                        d="M9 5l7 7-7 7"
                                                        data-oid="5s-5dkr"
                                                    />
                                                </svg>
                                            </Link>
                                            <span
                                                className="text-gray-400 text-sm"
                                                data-oid="lw6i.81"
                                            >
                                                {locale === 'en'
                                                    ? 'By'
                                                    : locale === 'zh-TW'
                                                      ? '作者：'
                                                      : '作者：'}{' '}
                                                {article.author}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        ))}
                    </div>
                </div>
            </section>

            {/* Newsletter Subscription */}
            <section
                className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 text-white"
                data-oid="i4p0fxb"
            >
                <div className="max-w-4xl mx-auto text-center" data-oid="bcymkw3">
                    <h2 className="text-3xl md:text-4xl font-light mb-6" data-oid="uk:qclr">
                        {locale === 'en'
                            ? 'Stay Updated'
                            : locale === 'zh-TW'
                              ? '保持更新'
                              : '保持更新'}
                    </h2>
                    <p className="text-xl font-light mb-8 opacity-90" data-oid="jyr:dy3">
                        {locale === 'en'
                            ? 'Subscribe to our newsletter for the latest industry insights and company updates.'
                            : locale === 'zh-TW'
                              ? '訂閱我們的電子報，獲取最新的行業洞察和公司動態。'
                              : '订阅我们的电子报，获取最新的行业洞察和公司动态。'}
                    </p>
                    <div
                        className="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto"
                        data-oid="xi2e::m"
                    >
                        <input
                            type="email"
                            placeholder={
                                locale === 'en'
                                    ? 'Enter your email'
                                    : locale === 'zh-TW'
                                      ? '輸入您的電子郵件'
                                      : '输入您的电子邮件'
                            }
                            className="flex-1 px-4 py-3 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
                            data-oid="04m.s6d"
                        />

                        <button
                            className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors font-light"
                            data-oid="li_uj-8"
                        >
                            {locale === 'en' ? 'Subscribe' : locale === 'zh-TW' ? '訂閱' : '订阅'}
                        </button>
                    </div>
                </div>
            </section>
        </Layout>
    );
}