import { Suspense } from "react";
import Link from "next/link";
import { ArrowLeftIcon } from "lucide-react";
import { notFound, redirect } from "next/navigation";
import { connection } from "next/server";

import { AdminHeader } from "@/components/admin/admin-header";
import { GuideSectionNav } from "@/components/admin/guide-section-nav";
import { GuideVisibilityControl } from "@/components/admin/guide-visibility-control";
import { CommentBoardContent } from "@/components/comments/comment-board-content";
import { CommentBoardSkeleton } from "@/components/comments/comment-skeleton";
import { Button } from "@/components/ui/button";
import Image from "@/components/ui/resilient-image";
import { getAdminSession } from "@/lib/auth/server";
import { getGuideEditorHeader } from "@/lib/guides/queries";

export const instant = false;

export default async function GuideCommentPage({
  params,
}: {
  params: Promise<{ character: string }>;
}) {
  await connection();
  if (!(await getAdminSession())) redirect("/auth/login?next=%2Fadmin");
  const { character } = await params;
  const guide = await getGuideEditorHeader(character);
  if (!guide) notFound();
  const extras = guide.sections
    .filter((section) => section.kind === "extra")
    .map(({ id, slug, title }) => ({ id, slug, title }));

  return (
    <div className="min-h-svh">
      <AdminHeader />
      <main lang="th" className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 pb-4 sm:px-6 sm:pb-6 lg:px-8 lg:pb-8">
        <div className="flex flex-col">
          <header className="flex flex-wrap items-center gap-4">
            <Button variant="ghost" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="กลับหน้าภาพรวม">
              <ArrowLeftIcon />
            </Button>
            <div className="relative size-16 shrink-0 overflow-hidden rounded-lg border">
              <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
            </div>
            <div className="min-w-0 flex-1">
              <p className="text-sm text-muted-foreground">{guide.name}</p>
              <h1 className="font-heading text-3xl font-semibold">ความคิดเห็น</h1>
            </div>
            <GuideVisibilityControl
              guideId={guide.id}
              guideName={guide.name}
              isPublic={guide.isPublic}
              version={guide.version}
            />
          </header>
          <GuideSectionNav guideId={guide.id} characterKey={guide.characterKey} current="comment" extras={extras} />
        </div>
        <Suspense fallback={<CommentBoardSkeleton />}>
          <CommentBoardContent target={`guide:${guide.id}`} />
        </Suspense>
      </main>
    </div>
  );
}