<script setup lang="ts">
const route = useRoute()
const { locale } = useI18n()
const gameDataStore = useGameDataStore()
const { gameName } = storeToRefs(gameDataStore)
const runtimeConfig = useRuntimeConfig()

// BreadcrumbList Schema 생성
const breadcrumbSchema = computed(() => {
  if (!gameName.value || !runtimeConfig.public.baseDomain) return null

  const baseUrl = `https://${runtimeConfig.public.baseDomain}`
  const pathSegments = route.path.split('/').filter(Boolean)
  const currentLocale = pathSegments[0] || locale.value

  const itemListElement: Array<{
    '@type': string
    position: number
    name: string
    item: string
  }> = [
    {
      '@type': 'ListItem',
      position: 1,
      name: gameName.value,
      item: `${baseUrl}/${currentLocale}`,
    },
  ]

  // 로케일 이후의 경로 세그먼트들을 breadcrumb에 추가
  pathSegments.slice(1).forEach((segment, index) => {
    const path = `/${pathSegments.slice(0, index + 2).join('/')}`
    const displayName = segment
      .replace(/-/g, ' ')
      .replace(/\b\w/g, l => l.toUpperCase())

    itemListElement.push({
      '@type': 'ListItem',
      position: index + 2,
      name: displayName,
      item: `${baseUrl}${path}`,
    })
  })

  return {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement,
  }
})

// Schema를 head에 추가
watchEffect(() => {
  if (breadcrumbSchema.value) {
    useHead({
      script: [
        {
          type: 'application/ld+json',
          innerHTML: JSON.stringify(breadcrumbSchema.value),
        },
      ],
    })
  }
})
</script>

<template>
  <LayoutsHeader />
  <main class="main-promotion relative">
    <slot />
    <LayoutsEventNavigation />
    <BlocksButtonHome />
  </main>
  <LayoutsFooter />
</template>
