import Link from "next/link";
import { Suspense } from "react";
import { connection } from "next/server";

import { SiteFooter } from "@/components/public/site-footer";
import { SiteHeader } from "@/components/public/site-header";
import { StygianGuide } from "@/components/public/stygian-guide";
import { LiveRefresh } from "@/components/live-refresh";
import { CommentBoardContent } from "@/components/comments/comment-board-content";
import { CommentBoardSkeleton } from "@/components/comments/comment-skeleton";
import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
import { buttonVariants } from "@/components/ui/button";
import { getCachedStygianSchedule, getCachedStygianSchedules } from "@/lib/cache/stygian";
import { getActiveCatalog } from "@/lib/guides/queries";

export const instant = false;

export default async function StygianPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  await connection();
  const query = await searchParams;
  const schedules = await getCachedStygianSchedules();
  const rawSchedule = Array.isArray(query.schedule) ? query.schedule[0] : query.schedule;
  const requestedId = Number(rawSchedule);
  const selectedId = schedules.some((entry) => entry.scheduleId === requestedId) ? requestedId : schedules[0]?.scheduleId;
  const [schedule, catalog] = await Promise.all([selectedId ? getCachedStygianSchedule(selectedId) : null, getActiveCatalog()]);
  return (
    <div className="flex min-h-svh flex-col bg-background">
      <LiveRefresh endpoint="/api/events/stygian" />
      <SiteHeader editHref="/admin/stygian" />
      <main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-8 px-4 py-10 sm:px-6 sm:py-14">
        <header>
          <p className="text-sm font-medium text-primary">Stygian Onslaught</p>
          <h1 className="font-heading text-4xl font-semibold">ไกด์ Stygian</h1>
          <p className="mt-3 text-muted-foreground">เลือกเวอร์ชัน ระดับบอส และบอสที่ต้องการดู เพื่ออ่านทีมแนะนำและกลไกของบอส</p>
        </header>
        {schedules.length ? <div className="flex flex-col gap-2"><p className="text-sm font-medium">เลือกเวอร์ชัน</p><nav className="flex flex-wrap gap-2" aria-label="เวอร์ชัน Stygian">{schedules.map((entry) =>
          <Link key={entry.scheduleId} href={`/stygian?schedule=${entry.scheduleId}`} aria-current={entry.scheduleId === selectedId ? "page" : undefined}
            className={buttonVariants({ variant: entry.scheduleId === selectedId ? "default" : "outline", size: "sm", className: "max-sm:min-h-11" })}>{entry.challengeName}</Link>)}</nav></div> : null}
        {schedule && catalog ? <StygianGuide schedule={schedule} catalog={catalog} /> : (
          <Empty className="border"><EmptyHeader><EmptyTitle>ยังไม่มีไกด์ Stygian</EmptyTitle><EmptyDescription>กำลังเตรียมข้อมูล กลับมาอ่านได้ภายหลัง หรือเลือกไกด์ตัวละครระหว่างรอ</EmptyDescription></EmptyHeader><Link href="/" className={buttonVariants({ variant: "outline" })}>เลือกไกด์ตัวละคร</Link></Empty>
        )}
        {schedule && <section id="comments" aria-label="ความคิดเห็น Stygian" className="scroll-mt-24 border-t pt-8">
          <Suspense key={`stygian:${schedule.scheduleId}`} fallback={<CommentBoardSkeleton />}>
            <CommentBoardContent target={`stygian:${schedule.scheduleId}`} />
          </Suspense>
        </section>}
      </main>
      <SiteFooter />
    </div>
  );
}