import Blocks from "@/components/blocks";
import { fetchSanityPageBySlug, fetchSanitySettings } from "@/sanity/lib/fetch";
import { generatePageMetadata } from "@/sanity/lib/metadata";
import { AboutView } 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="space-y-4">
        <div className="h-40 animate-pulse rounded-2xl bg-brand-sand" />
        <div className="h-40 animate-pulse rounded-2xl bg-brand-sand" />
      </div>
    </div>
  );
}

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

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

  return {
    title: "About Vietnam Wedding Guide | Platform Vision, Experiential Tourism & Cultural Bridge",
    description:
      "Vietnam Wedding Guide (VWG) champions high-value experiential tourism and cross-cultural understanding through destination weddings, celebrating Vietnam's destinations, warm hospitality, world-class culinary arts, and local creative mastery.",
  };
}

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

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

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

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

async function CachedAboutPage({ perspective, stega }: DynamicFetchOptions) {
  const [page, settings] = await Promise.all([
    fetchSanityPageBySlug({
      slug: "about",
      perspective,
      stega,
    }).catch(() => null),
    fetchSanitySettings({
      perspective,
      stega,
    }).catch(() => null),
  ]);

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

  return <AboutView settings={settings} />;
}