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";

export const metadata: Metadata = {
  title: "姜十三论坛 - 技术分享与讨论社区",
  description: "姜十三论坛，分享技术、讨论问题、交流心得的社区",
  openGraph: {
    title: "姜十三论坛 - 技术分享与讨论社区",
    description: "姜十三论坛，分享技术、讨论问题、交流心得的社区",
    type: "website",
  },
};

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

export default async function HomePage({ searchParams }: HomePageProps) {
  const { q, page: pageStr } = await searchParams;
  const keyword = q?.trim() || "";
  const page = Math.max(1, parseInt(pageStr || "1", 10) || 1);
  const cookie = (await cookies()).toString();
  const [postsData, boardsData] = await Promise.all([
    fetchPosts(page, 20, undefined, "latest", keyword, cookie),
    fetchBoards(),
  ]);

  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
      {/* 主内容：帖子列表 */}
      <div className="md:col-span-3">
        <h1 className="text-2xl font-bold mb-4">
          {keyword ? `搜索结果："${keyword}"` : "最新帖子"}
        </h1>
        <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-2">
                <span
                  className="text-xs px-2 py-0.5 rounded"
                  style={{ background: "var(--bg-secondary)", color: "var(--primary)" }}
                >
                  {post.board.name}
                </span>
                {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" style={{ color: "var(--text)" }}>
                  {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)" }}>
              {keyword ? "没有找到相关帖子" : "暂无帖子，来发第一篇吧！"}
            </p>
          )}
        </div>
        <Pagination
          total={postsData.total}
          page={page}
          size={20}
          basePath="/"
          query={keyword ? { q: keyword } : {}}
        />
      </div>

      {/* 侧边栏：板块列表 */}
      <aside className="md:col-span-1">
        <h2 className="text-lg font-bold mb-3">板块</h2>
        <div className="space-y-2">
          {boardsData.boards.map((board) => (
            <Link
              key={board.id}
              href={`/board/${board.id}`}
              className="block p-3 rounded-lg border hover:shadow-sm transition-shadow"
              style={{ borderColor: "var(--border)", background: "var(--bg-secondary)" }}
            >
              <div className="font-medium" style={{ color: "var(--text)" }}>{board.name}</div>
              <div className="text-xs mt-1" style={{ color: "var(--text-secondary)" }}>{board.description}</div>
            </Link>
          ))}
        </div>
      </aside>
    </div>
  );
}