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

import {PreviewBanner} from "@/components/PreviewBanner";
import {Badge} from "@/components/ui/badge";
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
import {getSanityClient} from "@/lib/sanity/client";
import {resourcesListPreviewQuery, resourcesListQuery} from "@/lib/sanity/queries";
import type {ResourceListItem} from "@/lib/sanity/types";

export default async function Home() {
  const preview = await draftMode();
  const isPreview = preview.isEnabled;
  const client = getSanityClient({preview: isPreview});
  const query = isPreview ? resourcesListPreviewQuery : resourcesListQuery;
  const resources = await client.fetch<ResourceListItem[]>(query);

  return (
    <main className="mx-auto min-h-screen w-full max-w-4xl px-6 py-12">
      <PreviewBanner previewEnabled={isPreview} />
      <div className="flex items-center gap-2">
        <Badge variant="secondary">Suturly CMS</Badge>
        <Badge variant="outline">{isPreview ? "Preview" : "Published"}</Badge>
      </div>
      <h1 className="mt-3 text-3xl font-semibold md:text-4xl">Suturly Resources</h1>
      <p className="mt-2 text-muted-foreground">
        {isPreview ? "Draft preview mode (includes unpublished content)." : "Published resources from Sanity."}
      </p>

      <ul className="mt-8 space-y-4">
        {resources.map((resource) => (
          <li key={resource._id}>
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-2xl">{resource.title}</CardTitle>
                {resource.excerpt ? <CardDescription>{resource.excerpt}</CardDescription> : null}
              </CardHeader>
              <CardContent className="flex flex-wrap items-center justify-between gap-3">
                <p className="text-sm text-muted-foreground">
                  {resource.publishedChapterCount} published chapter(s)
                  {typeof resource.totalChapterCount === "number"
                    ? ` / ${resource.totalChapterCount} total chapter(s)`
                    : ""}
                </p>
                <Link
                  href={`/resources/${resource.slug}`}
                  className="inline-flex h-8 items-center justify-center rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground transition hover:opacity-90"
                >
                  Open resource
                </Link>
              </CardContent>
            </Card>
          </li>
        ))}
      </ul>
    </main>
  );
}