import Link from "next/link";
import {draftMode} from "next/headers";
import {notFound} from "next/navigation";

import {PreviewBanner} from "@/components/PreviewBanner";
import {ChapterContentPanel} from "@/components/resource/ChapterContentPanel";
import {ChapterSidebarNav} from "@/components/resource/ChapterSidebarNav";
import {ResourceHeader} from "@/components/resource/ResourceHeader";
import {StickyActionBar} from "@/components/resource/StickyActionBar";
import {getSanityClient} from "@/lib/sanity/client";
import {resourceBySlugPreviewQuery, resourceBySlugQuery} from "@/lib/sanity/queries";
import type {Resource} from "@/lib/sanity/types";

type PageProps = {
  params: Promise<{slug: string}>;
  searchParams: Promise<{chapter?: string}>;
};

export default async function ResourcePage({params, searchParams}: PageProps) {
  const {slug} = await params;
  const {chapter: chapterSlug} = await searchParams;

  const preview = await draftMode();
  const isPreview = preview.isEnabled;
  const client = getSanityClient({preview: isPreview});
  const query = isPreview ? resourceBySlugPreviewQuery : resourceBySlugQuery;
  const resource = await client.fetch<Resource | null>(query, {slug});

  if (!resource) {
    notFound();
  }

  if (!resource.chapters || resource.chapters.length === 0) {
    return (
      <main className="mx-auto min-h-screen w-full max-w-4xl px-6 py-12">
        <PreviewBanner previewEnabled={isPreview} />
        <p className="text-slate-700">
          {isPreview ? "This resource has no chapters yet." : "This resource has no published chapters yet."}
        </p>
      </main>
    );
  }

  const activeChapter =
    resource.chapters.find((item) => item.slug === chapterSlug) || resource.chapters[0];
  const activeIndex = resource.chapters.findIndex((item) => item._key === activeChapter._key);
  const previousChapterSlug = activeIndex > 0 ? resource.chapters[activeIndex - 1].slug : undefined;
  const nextChapterSlug =
    activeIndex >= 0 && activeIndex < resource.chapters.length - 1
      ? resource.chapters[activeIndex + 1].slug
      : undefined;

  return (
    <main className="mx-auto min-h-screen w-full max-w-5xl px-6 py-10">
      <PreviewBanner previewEnabled={isPreview} />
      <div className="mb-6 space-y-4">
        <Link href="/" className="text-sm text-slate-600 hover:underline">
          Back to resources
        </Link>
        <ResourceHeader
          title={resource.title}
          excerpt={resource.excerpt}
          chapterCount={resource.chapters.length}
          previewEnabled={isPreview}
        />
      </div>

      <div className="grid gap-8 md:grid-cols-[260px_1fr]">
        <ChapterSidebarNav
          chapters={resource.chapters}
          activeChapterKey={activeChapter._key}
          resourceSlug={resource.slug}
          previewEnabled={isPreview}
        />
        <ChapterContentPanel chapter={activeChapter} />
      </div>
      <StickyActionBar
        resourceSlug={resource.slug}
        previousChapterSlug={previousChapterSlug}
        nextChapterSlug={nextChapterSlug}
      />
    </main>
  );
}