<template>
  <div>
    <section class="py-20 px-4">
      <div class="container mx-auto max-w-6xl">
        <!-- 内容渲染器 -->
        <div class="prose prose-invert prose-lg max-w-none">
          <ContentRenderer :value="n ?? {}">
            <template #empty>
              <div class="text-center py-12">
                <p class="text-gray-400 text-xl">内容加载中...</p>
              </div>
            </template>
          </ContentRenderer>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
const route = useRoute();
const { data: n } = await useAsyncData("new-detail", () =>
  queryCollection("news").path(`/news/${route.params.slug}`).first()
);

if (n.value) {
  // 1. 确定图片：优先用 ogImage，没有就用 cover
  const shareImage = n.value.ogImage || n.value.cover;

  // 2. 确定标题和描述：优先用 seoTitle，没有就用 title
  const shareTitle = n.value.seoTitle || n.value.title;
  const shareDesc = n.value.seoDescription || n.value.description;

  // 3. 注入 SEO
  useSeoMeta({
    // 基础
    title: shareTitle,
    description: shareDesc,

    // Open Graph (Facebook / WhatsApp)
    ogTitle: shareTitle,
    ogDescription: shareDesc,
    ogImage: shareImage,
    ogType: "article",

    // Twitter Card
    twitterCard: "summary_large_image",
    twitterTitle: shareTitle,
    twitterDescription: shareDesc,
    twitterImage: shareImage,
  });

  // 如果你用了 nuxt-og-image 模块生成动态图
  if (shareImage) {
    defineOgImage({ url: shareImage });
  }
}
</script>

<style></style>
