import Link from "next/link";
import { Metadata } from "next";
import { cookies } from "next/headers";
import { fetchPosts, fetchBoards } from "@/lib/api";
import Pagination from "@/components/Pagination";
import LikeButton from "@/components/LikeButton";

interface PageProps {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ page?: string }>;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { id } = await params;
  const { boards } = await fetchBoards();
  const board = boards.find((b) => b.id === Number(id));
  return {
    title: board ? `${board.name} - 姜十三论坛` : "板块 - 姜十三论坛",
    description: board?.description || "板块帖子列表",
  };
}

export default async function BoardPage({ params, searchParams }: PageProps) {
  const { id } = await params;
  const { page: pageStr } = await searchParams;
  const page = Math.max(1, parseInt(pageStr || "1", 10) || 1);
  const cookie = (await cookies()).toString();
  const [postsData, boardsData] = await Promise.all([
    fetchPosts(page, 20, Number(id), "latest", "", cookie),
    fetchBoards(),
  ]);
  const board = boardsData.boards.find((b) => b.id === Number(id));

  return (
    <div>
      <nav className="text-sm mb-4" style={{ color: "var(--text-secondary)" }}>
        <Link href="/" className="hover:underline">首页</Link>
        <span className="mx-2">/</span>
        <span>{board?.name || "板块"}</span>
      </nav>

      <h1 className="text-2xl font-bold mb-2">{board?.name}</h1>
      <p className="mb-6" style={{ color: "var(--text-secondary)" }}>{board?.description}</p>

      <div className="space-y-3">
        {postsData.posts.map((post) => (
          <div
            key={post.id}
            className="p-4 rounded-lg border hover:shadow-md transition-shadow"
            style={{ borderColor: "var(--border)", background: "var(--bg)" }}
          >
            <div className="flex items-center gap-2 mb-1">
              {post.pinned > 0 && (
                <span className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700">置顶</span>
              )}
              {post.recommended && (
                <span className="text-xs px-2 py-0.5 rounded bg-rose-100 text-rose-700">推荐</span>
              )}
            </div>
            <Link href={`/post/${post.id}`}>
              <h2 className="font-semibold mb-1 hover:underline">{post.title}</h2>
            </Link>
            <div className="flex items-center justify-between gap-4 text-sm" style={{ color: "var(--text-secondary)" }}>
              <div className="flex items-center gap-4">
                <Link href={`/u/${post.user.id}`} className="hover:underline" style={{ color: "var(--primary)" }}>
                  {post.user.nickname}
                </Link>
                <span>{new Date(post.created_at).toLocaleDateString("zh-CN")}</span>
                <span>💬 {post.comment_count}</span>
                <span>👁 {post.view_count}</span>
              </div>
              <LikeButton postId={String(post.id)} liked={post.liked} likeCount={post.like_count} variant="compact" />
            </div>
          </div>
        ))}
        {postsData.posts.length === 0 && (
          <p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
            该板块暂无帖子
          </p>
        )}
      </div>
      <Pagination
        total={postsData.total}
        page={page}
        size={20}
        basePath={`/board/${id}`}
      />
    </div>
  );
}