import { prisma } from "@/lib/prisma";
import { notFound } from "next/navigation";
import Link from "next/link";
import ForumTopicRow from "@/components/forum/ForumTopicRow";
import NewTopicDialog from "@/components/forum/NewTopicDialog";
import FollowButton from "@/components/forum/FollowButton";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { ArrowLeft, MessageSquare } from "lucide-react";

export const dynamic = "force-dynamic";

interface Props {
  params: { category: string };
  searchParams: { sort?: string; page?: string };
}

export default async function CategoryPage({ params, searchParams }: Props) {
  const session = await getServerSession(authOptions);
  const category = await prisma.forumCategory.findUnique({
    where: { slug: params.category },
  });

  if (!category) notFound();

  const childCategories = await prisma.forumCategory.findMany({
    where: { parentId: category.id },
    select: { id: true, name: true, slug: true, icon: true, topicCount: true },
    orderBy: [{ sortOrder: "asc" }],
  });

  const sort = searchParams.sort || "latest";
  const page = parseInt(searchParams.page || "1", 10);
  const pageSize = 20;

  const orderBy: any = {};
  if (sort === "latest") orderBy.createdAt = "desc";
  else if (sort === "hot") orderBy.viewCount = "desc";
  else if (sort === "active") orderBy.lastReplyAt = "desc";
  else if (sort === "likes") orderBy.likeCount = "desc";
  else orderBy.createdAt = "desc";

  const currentUserId = session?.user?.id
    ? parseInt(session.user.id)
    : null;

  const [topics, totalCount, follow] = await Promise.all([
    prisma.forumTopic.findMany({
      where: { categoryId: category.id },
      include: {
        category: { select: { name: true, slug: true, icon: true } },
        user: { select: { id: true, name: true, email: true, avatarUrl: true, level: true, points: true, isBot: true } },
        _count: { select: { posts: true } },
        tags: { include: { tag: true } },
      },
      orderBy: [{ isPinned: "desc" }, orderBy],
      skip: (page - 1) * pageSize,
      take: pageSize,
    }),
    prisma.forumTopic.count({ where: { categoryId: category.id } }),
    currentUserId
      ? prisma.forumCategoryFollow.findUnique({
          where: {
            categoryId_userId: {
              categoryId: category.id,
              userId: currentUserId,
            },
          },
        })
      : Promise.resolve(null),
  ]);

  const sortTabs = [
    { key: "latest", label: "最新" },
    { key: "active", label: "活跃" },
    { key: "hot", label: "热门" },
    { key: "likes", label: "高赞" },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50/30 to-white">
      <div className="max-w-6xl mx-auto px-4 py-6">
        {/* Breadcrumb */}
        <div className="mb-4 flex items-center gap-2 text-sm">
          <Link
            href="/community"
            className="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
          >
            <ArrowLeft className="h-3.5 w-3.5" />
            返回社区
          </Link>
        </div>

        {/* Category header */}
        <div className="rounded-2xl border border-border/50 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] overflow-hidden mb-6">
          <div className="px-5 py-5 sm:px-6 sm:py-6 flex items-start gap-4">
            <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-sky-50 to-indigo-50 border border-sky-200/40 text-2xl">
              {category.icon || "📌"}
            </div>
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2 flex-wrap">
                <h1 className="text-xl font-bold text-foreground">
                  {category.name}
                </h1>
                <span className="text-[11px] text-muted-foreground/50 tabular-nums">
                  · {totalCount} 帖 · {category.followerCount} 关注
                </span>
              </div>
              {category.description && (
                <p className="mt-1 text-sm text-muted-foreground">
                  {category.description}
                </p>
              )}
            </div>
            <div className="flex items-center gap-2 shrink-0">
              <FollowButton
                categoryId={category.id}
                initialFollowed={!!follow}
                followerCount={category.followerCount}
              />
              <NewTopicDialog
                categories={[
                  { id: category.id, name: category.name, slug: category.slug, icon: category.icon },
                  ...childCategories,
                ]}
                defaultCategorySlug={category.slug}
                variant="primary"
              />
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-[1fr_240px] gap-6">
          <div className="min-w-0 space-y-4">
            {/* Sort tabs */}
            <div className="flex items-center justify-between gap-3 flex-wrap">
              <div className="inline-flex items-center rounded-xl border border-border/50 bg-white p-1 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
                {sortTabs.map((tab) => (
                  <Link
                    key={tab.key}
                    href={`/community/${category.slug}?sort=${tab.key}`}
                    className={`inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
                      sort === tab.key
                        ? "bg-sky-500 text-white shadow-sm"
                        : "text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    {tab.label}
                  </Link>
                ))}
              </div>
              <span className="text-[11px] text-muted-foreground/50">
                共 {totalCount} 个话题
              </span>
            </div>

            {/* Topics list */}
            <section className="rounded-2xl border border-border/50 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] overflow-hidden">
              <div className="divide-y divide-border/20">
                {topics.length === 0 ? (
                  <div className="py-20 text-center">
                    <MessageSquare className="h-8 w-8 text-muted-foreground/30 mx-auto mb-2" />
                    <p className="text-sm text-muted-foreground/60">
                      暂无话题，来发第一帖吧 ✨
                    </p>
                  </div>
                ) : (
                  topics.map((topic) => (
                    <ForumTopicRow
                      key={topic.id}
                      topic={{
                        ...topic,
                        replyCount: topic._count.posts,
                        tags: topic.tags?.map((tt) => tt.tag),
                      }}
                      showCategory={false}
                    />
                  ))
                )}
              </div>
            </section>

            {/* Pagination */}
            {totalCount > pageSize && (
              <div className="flex justify-center items-center gap-1.5 pt-2">
                {page > 1 && (
                  <Link
                    href={`/community/${category.slug}?sort=${sort}&page=${page - 1}`}
                    className="rounded-lg border border-border/40 bg-white px-3 py-1.5 text-xs text-muted-foreground hover:border-sky-200 hover:text-sky-700"
                  >
                    上一页
                  </Link>
                )}
                {Array.from(
                  { length: Math.ceil(totalCount / pageSize) },
                  (_, i) => i + 1
                )
                  .filter((p) => Math.abs(p - page) <= 2)
                  .map((p) => (
                    <Link
                      key={p}
                      href={`/community/${category.slug}?sort=${sort}&page=${p}`}
                      className={`min-w-[32px] inline-flex items-center justify-center rounded-lg px-2.5 py-1.5 text-xs font-medium transition-colors ${
                        page === p
                          ? "bg-sky-500 text-white shadow-sm"
                          : "border border-border/40 bg-white text-muted-foreground hover:border-sky-200 hover:text-sky-700"
                      }`}
                    >
                      {p}
                    </Link>
                  ))}
                {page < Math.ceil(totalCount / pageSize) && (
                  <Link
                    href={`/community/${category.slug}?sort=${sort}&page=${page + 1}`}
                    className="rounded-lg border border-border/40 bg-white px-3 py-1.5 text-xs text-muted-foreground hover:border-sky-200 hover:text-sky-700"
                  >
                    下一页
                  </Link>
                )}
              </div>
            )}
          </div>

          {/* Right sidebar: sub-categories */}
          {childCategories.length > 0 && (
            <aside className="hidden lg:block">
              <div className="sticky top-[68px] rounded-2xl border border-border/50 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] overflow-hidden">
                <div className="px-4 py-3 border-b border-border/30">
                  <h3 className="text-sm font-semibold text-foreground">子板块</h3>
                </div>
                <div className="p-2">
                  <Link
                    href={`/community/${category.slug}`}
                    className="flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs font-medium text-sky-700 bg-sky-50"
                  >
                    <span>{category.icon || "📌"}</span>
                    <span>全部</span>
                  </Link>
                  {childCategories.map((child) => (
                    <Link
                      key={child.id}
                      href={`/community/${child.slug}`}
                      className="flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-slate-50 hover:text-foreground transition-colors"
                    >
                      <span>{child.icon || "📌"}</span>
                      <span className="truncate flex-1">{child.name}</span>
                      <span className="text-[10px] text-muted-foreground/40 tabular-nums">
                        {child.topicCount}
                      </span>
                    </Link>
                  ))}
                </div>
              </div>
            </aside>
          )}
        </div>
      </div>
    </div>
  );
}