import {Button} from "antd"
import {ArrowRightOutlined} from "@ant-design/icons"
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";

export default async function SolutionsPage({
                                              searchParams,
                                            }: {
  searchParams: Promise<{ page?: string }>
}) {
  // 等待 searchParams 解析
  const params = await searchParams
  const pageNum = Number.parseInt(params.page || "1", 10)
  const pageSize = 6
  const res = await serverGet<Page<Solution>>("/webSite/getSolution", {
    pageNum: pageNum,
    pageSize: pageSize,
  },{
    next: {
      revalidate: 180
    },
    cache: "force-cache"
  })
  const solutionsData = res.data.records

  return (
    <>
      <AnimatedSection effect="slide" direction="left">
        <div>
          <Image src={"/assets/solutions/1.jpg"} alt={"banner"} width={1920} height={1080}/>
        </div>
      </AnimatedSection>

      <div className={"py-6 sm:py-10"}>
        <MainTitle title={"解决方案"} titleLetter={"SOLUTIONS"}/>
      </div>

      <AnimatedSection effect="scale">
      <div className="" style={{ background: "linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%)" }}>
        <div className="w-9/10 sm:w-7/10 mx-auto px-3 sm:px-4 py-4 sm:py-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-6 mb-4 sm:mb-8">
            {solutionsData.map((solution, index) => (
              <div
                key={solution.id}
                className="h-full shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 rounded-xl overflow-hidden bg-white relative"
                style={{
                  backgroundImage: `url("/assets/solutions/2.png")`,
                  backgroundSize: "cover",
                }}
              >
                {/* 内容容器 */}
                <div className="p-4 sm:p-6 h-full flex flex-col relative z-10">
                  <div className="mb-2 sm:mb-3">
                    <h3
                      className="text-base sm:text-lg font-semibold text-black mb-1 sm:mb-2 line-clamp-2 leading-tight sm:leading-normal drop-shadow-sm">
                      {solution.programName}
                    </h3>
                    <p className="text-xs sm:text-sm text-black/80 mb-2 sm:mb-3 drop-shadow-sm">
                      {solution.releaseTime}
                    </p>
                  </div>

                  <div className="flex-1 mb-4">
                    <p
                      className="text-black/90 text-xs sm:text-sm leading-relaxed line-clamp-3 sm:line-clamp-4 drop-shadow-sm">
                      {removeHTMLTags(solution.programDetails)}
                    </p>
                  </div>

                  {/* 按钮区域 */}
                  <div className="mt-auto pt-3 border-t border-white/20">
                    <Button
                      href={`/solutions/${solution.id}`}
                      type="link"
                      icon={<ArrowRightOutlined/>}
                      className="text-white hover:text-white/80 p-0 h-auto font-medium transition-colors duration-200"
                      style={{
                        color: "black",
                        textShadow: "0 1px 2px rgba(0,0,0,0.3)",
                      }}
                    >
                      了解更多
                    </Button>
                  </div>
                </div>

                {/* 装饰性元素 */}
                <div
                  className="absolute top-0 right-0 w-20 h-20 opacity-10"
                  style={{
                    background: "radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)",
                    transform: "translate(25%, -25%)",
                  }}
                />
              </div>
            ))}
          </div>

          <div className="flex justify-center">
            <PaginationClient current={pageNum} total={solutionsData.length} pageSize={pageSize}/>
          </div>
        </div>
      </div>
      </AnimatedSection>
    </>
  )
}