import Link from "next/link"
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 {removeHTMLTags} from "@/utils/removeHTMLTags";
import AnimatedSection from "@/components/AnimatedSection";

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>
          <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>
      <AnimatedSection effect="slide" direction="right">
      <div className="container sm:max-w-7/12 mx-auto p-4 space-y-6">
        {/* 顶部大新闻 */}
        <div className="bg-white rounded-2xl shadow 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>
    </>
  )
}
