/**
 * Reference Solution: Sanity Integration with Nuxt
 *
 * Demonstrates:
 * - Installing and configuring @sanity/nuxt module
 * - Setting up the Sanity module in nuxt.config.ts
 * - Using useSanityQuery composable for data fetching
 * - Rendering portable text content in Vue components
 *
 * Note: Vue template syntax is shown in comments since this is a .ts file.
 */

// === Part 1: Nuxt Configuration (nuxt.config.ts) ===

export default defineNuxtConfig({
  modules: ["@sanity/nuxt"],
  sanity: {
    projectId: "your-project-id",
    dataset: "production",
    apiVersion: "2024-01-01",
    // useCdn: true is the default for production
  },
})

// === Part 2: Posts List Page (pages/posts/index.vue) ===
//
// <template>
//   <main>
//     <h1>Blog Posts</h1>
//     <ul v-if="data">
//       <li v-for="post in data" :key="post._id">
//         <NuxtLink :to="`/posts/${post.slug}`">
//           <h2>{{ post.title }}</h2>
//           <p>{{ post.excerpt }}</p>
//         </NuxtLink>
//       </li>
//     </ul>
//   </main>
// </template>
//
// <script setup lang="ts">
// import { groq } from "groq"
//
// const query = groq`*[_type == "post"] | order(publishedAt desc) {
//   _id,
//   title,
//   "slug": slug.current,
//   excerpt,
// }`
//
// const { data } = useSanityQuery(query)
// </script>

// === Part 3: Individual Post Page (pages/posts/[slug].vue) ===
//
// <template>
//   <article v-if="data">
//     <h1>{{ data.title }}</h1>
//     <time :datetime="data.publishedAt">
//       {{ new Date(data.publishedAt).toLocaleDateString() }}
//     </time>
//     <SanityContent :blocks="data.body" />
//   </article>
// </template>
//
// <script setup lang="ts">
// import { groq } from "groq"
//
// const route = useRoute()
// const query = groq`*[_type == "post" && slug.current == $slug][0] {
//   _id,
//   title,
//   body,
//   publishedAt,
// }`
//
// const { data } = useSanityQuery(query, { slug: route.params.slug })
// </script>

// === Part 4: Sanity Studio Embedded (nuxt.config.ts addition) ===

// To embed Sanity Studio directly in the Nuxt app:
export const studioConfig = defineNuxtConfig({
  modules: ["@sanity/nuxt"],
  sanity: {
    projectId: "your-project-id",
    dataset: "production",
    apiVersion: "2024-01-01",
    // Enable the embedded studio at /studio route
    studio: {
      studioHost: "your-studio-host",
    },
  },
})

// === Part 5: Server API Route (server/api/posts.ts) ===
//
// For server-side data fetching with full control:

import { createClient } from "@sanity/client"

const client = createClient({
  projectId: "your-project-id",
  dataset: "production",
  apiVersion: "2024-01-01",
  useCdn: true,
})

const POSTS_QUERY = `*[_type == "post"] | order(publishedAt desc) {
  _id,
  title,
  "slug": slug.current,
}`

// In Nuxt server routes, export defineEventHandler
export default defineEventHandler(async () => {
  const posts = await client.fetch(POSTS_QUERY)
  return posts
})
