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

function PageFallback() {
  return (
    <div aria-busy className="container max-w-7xl mx-auto py-20 px-4">
      <div className="h-10 w-64 animate-pulse rounded bg-brand-sand mb-6" />
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div className="h-96 animate-pulse rounded-3xl bg-brand-sand" />
        <div className="h-96 animate-pulse rounded-3xl bg-brand-sand" />
      </div>
    </div>
  );
}

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

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

  return {
    title: "Bespoke Destination Wedding Advisory Services | Vietnam Wedding Guide",
    description:
      "Independent private advisory and consultancy for destination wedding couples and luxury hospitality brands across Vietnam.",
  };
}

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

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

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

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

async function CachedServicesPage({ perspective, stega }: DynamicFetchOptions) {
  const [page, sanityServices] = await Promise.all([
    fetchSanityPageBySlug({
      slug: "services",
      perspective,
      stega,
    }).catch(() => null),
    fetchSanityServices({
      perspective,
      stega,
    }).catch(() => []),
  ]);

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

  return <ServicesView services={sanityServices ?? []} />;
}