import "antd/dist/reset.css"
import MainTitle from "@/components/MainTitle";
import Image from "next/image";
import PaginationClient from "@/components/PaginationClient";
import {serverGet} from "@/utils/request";
import AnimatedSection from "@/components/AnimatedSection";
import News from "@/components/news/NewsList";

// 调整NewsUpdates类型，对齐Article的结构
interface NewsUpdates {
  id: string;
  newsUrl: string;
  newsName: string;
  newsDesc: string;
  newsAuthor?: string; // 可选字段
  content: string;
  newsCategory: string; // 补充分类字段（原逻辑依赖）
}

const getNewsList = async (pageNum: number, pageSize: number) => {
  return serverGet<Page<NewsUpdates>>("/webSite/getNewsUpdatesListWithoutSpecialNews", {
    pageNum,
    pageSize
  }, {
    next: {
      revalidate: 180
    },
    cache: "force-cache"
  })
}

const getSpecialNews = async () => {
  return serverGet<Page<NewsUpdates>>("/webSite/getSpecialNewsUpdatesList", {
    pageNum: 1,
    pageSize: 1
  }, {
    next: {
      revalidate: 180
    },
    cache: "force-cache"
  })
}

export default async function NewsPage({
                                         searchParams,
                                       }: {
  searchParams: Promise<{ page?: string }>
}) {

  const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
  // 等待 searchParams 解析
  const params = await searchParams
  const pageNum = Number.parseInt(params.page || "1", 10)
  const pageSize = 6
  const newsListRes = await getNewsList(pageNum, pageSize)
  const specialNewsRes = await getSpecialNews()
  const specialNews = specialNewsRes.data.records[0]
  const newsList = newsListRes.data.records
  const totalNews = newsListRes.data.total

  return (
    <>
      <AnimatedSection effect="slide" direction="left">
        <div className="w-full h-full flex items-center justify-center text-white text-4xl font-bold">
          <Image src={"/assets/news/1.png"} alt={"banner"} width={1920} height={1080}/>
        </div>
      </AnimatedSection>
      <div className="py-6 sm:py-10">
        <MainTitle title={"新闻动态"} titleLetter={"NEWS_DYNAMIC"}/>
      </div>
      <News newsList={newsList}></News>


      {/*<AnimatedSection effect="slide" direction="right">*/}
      {/*    /!*<div className="container sm:max-w-7/12 mx-auto p-4 space-y-6">*!/*/}
      {/*    <div className="sm:max-w-7/12 mx-auto p-4 space-y-6">*/}
      {/*        /!* 顶部大新闻 *!/*/}
      {/*        <div className="bg-white rounded-2xl p-6">*/}
      {/*            <div className="flex flex-col sm:flex-row gap-6">*/}
      {/*                /!* 模拟图片色块 *!/*/}
      {/*                <div*/}
      {/*                    className="w-full sm:w-1/3 bg-gray-300 rounded-lg sm:h-auto flex items-center justify-center">*/}
      {/*                    <Image src={specialNews?.newsUrl ? BASE_URL + specialNews?.newsUrl : ""}*/}
      {/*                           alt={"特别新闻图片"}*/}
      {/*                           width={300} height={300}/>*/}
      {/*                </div>*/}
      {/*                /!* 右侧文字 *!/*/}
      {/*                <div className="flex-1 flex flex-col justify-between">*/}
      {/*                    <div>*/}
      {/*                        <h2 className="text-lg sm:text-xl font-bold mb-2">{specialNews?.newsName}</h2>*/}
      {/*                        <p className="text-gray-500 text-xs sm:text-sm mb-4">{specialNews?.releaseTime}</p>*/}
      {/*                        <p className="text-gray-700 text-sm sm:text-base leading-relaxed line-clamp-7">*/}
      {/*                            {removeHTMLTags(specialNews?.newsDetails || "")}*/}
      {/*                        </p>*/}
      {/*                    </div>*/}
      {/*                    <Link href={`/news/${specialNews?.id}`}*/}
      {/*                          className="text-blue-500 hover:underline mt-4 self-start text-sm sm:text-base">*/}
      {/*                        了解更多 &gt;*/}
      {/*                    </Link>*/}
      {/*                </div>*/}
      {/*            </div>*/}
      {/*        </div>*/}

      {/*        /!* 下方小新闻卡片 *!/*/}
      {/*        <div className="grid sm:grid-cols-2 gap-4">*/}
      {/*            {newsList.map((item) => (*/}
      {/*                <div*/}
      {/*                    key={item.id}*/}
      {/*                    className="bg-white rounded-2xl shadow p-4 flex flex-col justify-between"*/}
      {/*                >*/}
      {/*                    <div>*/}
      {/*                        <h3 className="text-sm sm:text-base font-semibold mb-2">{item.newsName}</h3>*/}
      {/*                        <p className="text-gray-500 text-xs sm:text-sm">{item.releaseTime}</p>*/}
      {/*                    </div>*/}
      {/*                    <Link href={`/news/${item.id}`}*/}
      {/*                          className="text-blue-500 hover:underline mt-2 self-end text-xs sm:text-sm">*/}
      {/*                        了解更多 &gt;*/}
      {/*                    </Link>*/}
      {/*                </div>*/}
      {/*            ))}*/}
      {/*        </div>*/}

      {/*        /!* 分页器 *!/*/}
      <div className="flex justify-center mt-6">
        <PaginationClient
          current={pageNum}
          total={totalNews}
          pageSize={pageSize}
        />
      </div>
      {/*    </div>*/}
      {/*</AnimatedSection>*/}
    </>
  )
}