import Link from "next/link";
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 { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
import { Button } 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 Guide</h1>
        </header>
        {schedules.length ? <nav className="flex flex-wrap gap-2" aria-label="Stygian versions">{schedules.map((entry) => entry.scheduleId === selectedId
          ? <Button key={entry.scheduleId} disabled variant="secondary" size="sm">{entry.challengeName}</Button>
          : <Button key={entry.scheduleId} variant="outline" size="sm" nativeButton={false} render={<Link href={`/stygian?schedule=${entry.scheduleId}`} />}>{entry.challengeName}</Button>)}</nav> : null}
        {schedule && catalog ? <StygianGuide schedule={schedule} catalog={catalog} /> : (
          <Empty className="border"><EmptyHeader><EmptyTitle>No Stygian versions yet</EmptyTitle><EmptyDescription>An administrator must sync the Lunaris archive first.</EmptyDescription></EmptyHeader></Empty>
        )}
      </main>
      <SiteFooter />
    </div>
  );
}