jiang13-bbs/frontend/app/notifications/page.tsx

import { redirect } from "next/navigation";
import Link from "next/link";
import { cookies } from "next/headers";
import { ChevronRight } from "lucide-react";
import { authCookieHeader } from "@/lib/cookies";
import { getMeCached } from "@/lib/serverData";
import { fetchNotifications } from "@/lib/api";
import Pagination from "@/components/Pagination";
import NotificationsClient from "./NotificationsClient";

interface NotificationsPageProps {
  searchParams: Promise<{ page?: string }>;
}

// SSR 直出通知列表：F5 直接看到内容，不再先渲染"正在加载…"
export default async function NotificationsPage({ searchParams }: NotificationsPageProps) {
  const sp = await searchParams;
  const page = Math.max(1, parseInt(sp.page || "1", 10) || 1);
  const cookie = authCookieHeader(await cookies());
  const me = await getMeCached(cookie || undefined);
  if (!me.user) {
    redirect(`/login?redirect=${encodeURIComponent(`/notifications`)}`);
  }

  let data = null;
  let loadError = false;
  try {
    data = await fetchNotifications(page, cookie);
  } catch {
    loadError = true;
  }

  return (
    <div className="max-w-2xl mx-auto">
      <nav className="meta -mt-4 sm:-mt-6 mb-1.5 flex items-center gap-1 text-[12.5px] leading-none">
        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
        <ChevronRight size={13} />
        <span style={{ color: "var(--accent)" }}>通知中心</span>
      </nav>

      <h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight mb-6" style={{ color: "var(--ink)" }}>
        通知中心
      </h1>

      {loadError || !data ? (
        <div className="panel text-center py-16 px-6" role="alert">
          <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>通知加载失败</p>
          <p className="meta mt-1.5 mb-4">网络异常，请稍后重试</p>
          <Link href="/notifications" className="btn btn-line btn-sm">重新加载</Link>
        </div>
      ) : (
        <>
          <NotificationsClient initialData={data} />
          <Pagination
            total={data.total}
            page={data.page}
            size={data.size}
            basePath="/notifications"
          />
        </>
      )}
    </div>
  );
}