import Blocks from "@/components/blocks";
import {
  fetchSanityPageBySlug,
  fetchSanityPosts,
  fetchSanityServices,
  fetchSanityVenues,
} from "@/sanity/lib/fetch";
import { generatePageMetadata } from "@/sanity/lib/metadata";
import { HomepageView } from "@/components/templates";
import {
  getDynamicFetchOptions,
  sanityFetchMetadata,
  type DynamicFetchOptions,
} from "@/sanity/lib/live";
import { PAGE_QUERY_RESULT } from "@/sanity.types";
import { PAGE_QUERY } from "@/sanity/queries/page";
import { draftMode } from "next/headers";
import { Suspense } from "react";

function PageFallback() {
  return (
    <div aria-busy className="container py-16">
      <div className="h-8 w-48 animate-pulse rounded bg-brand-sand" />
    </div>
  );
}

export async function generateMetadata() {
  try {
    const { perspective } = await getDynamicFetchOptions();
    const { data: page } = (await sanityFetchMetadata({
      query: PAGE_QUERY,
      params: { slug: "index" },
      perspective,
    })) as { data: PAGE_QUERY_RESULT };

    if (page) {
      return generatePageMetadata({ page, slug: "index" });
    }
  } catch (err) {
    // Ignore when offline or unconfigured
  }

  return {
    title: "Vietnam Wedding Guide | Bespoke Destination Weddings & Editorial Guides",
    description:
      "The premier independent publication and private advisory for bespoke destination weddings across Vietnam.",
  };
}

export default async function IndexPage() {
  const { isEnabled: isDraftMode } = await draftMode();

  if (isDraftMode) {
    return (
      <Suspense fallback={<PageFallback />}>
        <DynamicIndexPage />
      </Suspense>
    );
  }

  return <CachedIndexPage perspective="published" stega={false} />;
}

async function DynamicIndexPage() {
  const { perspective, stega } = await getDynamicFetchOptions();
  return <CachedIndexPage perspective={perspective} stega={stega} />;
}

async function CachedIndexPage({ perspective, stega }: DynamicFetchOptions) {
  const [page, posts, services, venues] = await Promise.all([
    fetchSanityPageBySlug({
      slug: "index",
      perspective,
      stega,
    }).catch(() => null),
    fetchSanityPosts({
      perspective,
      stega,
    }).catch(() => []),
    fetchSanityServices({
      perspective,
      stega,
    }).catch(() => []),
    fetchSanityVenues({
      perspective,
      stega,
    }).catch(() => []),
  ]);

  if (page?.blocks && page.blocks.length > 0) {
    return (
      <Blocks
        blocks={page.blocks}
        perspective={perspective}
        stega={stega}
      />
    );
  }

  return (
    <HomepageView
      posts={posts ?? []}
      services={services ?? []}
      venues={venues ?? []}
    />
  );
}