import { Suspense } from "react";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { connection } from "next/server";
import Image from "@/components/ui/resilient-image";
import { SiteHeader } from "@/components/public/site-header";
import { SiteFooter } from "@/components/public/site-footer";
import { buttonVariants } from "@/components/ui/button";
import { CommentBoardContent } from "@/components/comments/comment-board-content";
import { CommentBoardSkeleton } from "@/components/comments/comment-skeleton";
import { getCachedStygianSchedules } from "@/lib/cache/stygian";

export const instant = false;
export const metadata: Metadata = { title: "Stygian" };
export default async function StygianCommentPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  await connection();
  const query = await searchParams;
  const schedules = await getCachedStygianSchedules();
  const raw = Array.isArray(query.schedule) ? query.schedule[0] : query.schedule;
  const selected = raw ? schedules.find((entry) => entry.scheduleId === Number(raw)) : schedules[0];
  if (!selected) notFound();
  const target = `stygian:${selected.scheduleId}`;
  return <div className="flex min-h-svh flex-col bg-background"><SiteHeader editHref="/admin/stygian" />
    <main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-10">
      <header className="flex items-center gap-3"><Image src="/icon/nav/Comment.webp" alt="" width={48} height={48} className="size-12 object-contain" />
        <div><p className="text-sm text-muted-foreground">Stygian · {selected.challengeName}</p><h1 className="font-heading text-3xl font-semibold">ความคิดเห็น</h1></div>
      </header>
      <nav aria-label="เมนู Stygian" className="flex flex-wrap gap-2"><Link href={`/stygian?schedule=${selected.scheduleId}`} className={buttonVariants({ variant: "outline" })}>ไกด์</Link>
        <Link href={`/stygian/comment?schedule=${selected.scheduleId}`} aria-current="page" className={buttonVariants({ variant: "secondary" })}>ความคิดเห็น</Link></nav>
      <nav aria-label="รอบ Stygian" className="flex flex-wrap gap-2">{schedules.map((schedule) => <Link key={schedule.scheduleId}
        href={`/stygian/comment?schedule=${schedule.scheduleId}`} prefetch={false} aria-current={schedule.scheduleId === selected.scheduleId ? "page" : undefined}
        className={buttonVariants({ variant: schedule.scheduleId === selected.scheduleId ? "default" : "outline" })}>{schedule.challengeName}</Link>)}</nav>
      <Suspense key={target} fallback={<CommentBoardSkeleton />}><CommentBoardContent target={target} /></Suspense>
    </main><SiteFooter /></div>;
}