import Blocks from "@/components/blocks";
import {
  fetchSanityPageBySlug,
  fetchSanitySettings,
  fetchSanityFaqs,
  fetchSanityServices,
} from "@/sanity/lib/fetch";
import { generatePageMetadata } from "@/sanity/lib/metadata";
import { ContactView } 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 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 lg:grid-cols-12 gap-8">
        <div className="lg:col-span-5 h-96 animate-pulse rounded-3xl bg-brand-sand" />
        <div className="lg:col-span-7 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: "contact" },
      perspective,
    })) as { data: PAGE_QUERY_RESULT };

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

  return {
    title: "Connect with Senior Advisory | Vietnam Wedding Guide",
    description:
      "Schedule an independent destination wedding consultation or vendor contract review with Nhi Võ. 100% impartial advice for couples and luxury hospitality brands.",
  };
}

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

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

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

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

async function CachedContactPage({ perspective, stega }: DynamicFetchOptions) {
  const [page, settings, faqs, services] = await Promise.all([
    fetchSanityPageBySlug({
      slug: "contact",
      perspective,
      stega,
    }).catch(() => null),
    fetchSanitySettings({
      perspective,
      stega,
    }).catch(() => null),
    fetchSanityFaqs({
      perspective,
      stega,
    }).catch(() => []),
    fetchSanityServices({
      perspective,
      stega,
    }).catch(() => []),
  ]);

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

  return <ContactView settings={settings} faqs={faqs} services={services} />;
}