<script setup lang="ts">
import { useTemplateRegistry } from '#layers/composables/useTemplateRegistry'
import type {
  PageDataValue,
  PageDataTemplate,
  PageDataMetaTag,
} from '#layers/types/api/pageData'

interface Props {
  pageData: PageDataValue
}

const props = defineProps<Props>()

const mainContentRef = ref<HTMLElement>()

const { locale } = useI18n()
const { height: viewportH } = useWindowSize()
const { bottom: mainBottom } = useElementBounding(mainContentRef)
const { getTemplateComponent } = useTemplateRegistry()
const loadingStore = useLoadingStore()

const { isPAssApiLoading, hasApiCallStarted } = storeToRefs(loadingStore)

// 개별 메타 태그 표시 여부 확인
const shouldShowMetaTag = computed(() => props.pageData?.meta_tag_type === 2)

const pinToMain = computed(() => {
  if (!mainBottom.value) return false
  return mainBottom.value <= viewportH.value
})

// 템플릿 표시 여부 확인
const isTemplateVisible = (template: PageDataTemplate): boolean => {
  return Boolean(
    template?.page_ver_tmpl_json &&
      Object.keys(template?.page_ver_tmpl_json).length > 0
  )
}

// 템플릿 목록 계산
const visibleTemplates = computed(() =>
  Object.values(props.pageData?.templates).filter(isTemplateVisible)
)
const isShowTopBtn = computed(() => props.pageData?.use_top_btn ?? false)
const isShowSnsBtn = computed(() => props.pageData?.use_sns_btn ?? false)
const isShowLnb = computed(() => props.pageData?.use_lnb ?? false)

// SEO 메타 태그 설정
const setupSeoMeta = (metaTag: PageDataMetaTag) => {
  useSeoMeta({
    title: metaTag?.page_title ?? '',
    description: metaTag?.page_desc ?? '',
    ogTitle: metaTag?.og_title ?? '',
    ogDescription: metaTag?.og_desc ?? '',
    ogImage: formatPathHost(metaTag?.og_image) ?? '',
    twitterTitle: metaTag?.x_title ?? '',
    twitterImage: formatPathHost(metaTag?.x_image) ?? '',
    twitterDescription: metaTag?.x_desc ?? '',
  })
}

// 메타 태그 설정 감시
watchEffect(() => {
  if (shouldShowMetaTag.value && props.pageData?.meta_tag_json) {
    setupSeoMeta(props.pageData?.meta_tag_json)
  }
})

watch(isPAssApiLoading, newVal => {
  if (newVal) {
    loadingStore.stopFullLoading()
  }
})

onMounted(() => {
  const { sendLog } = useAnalytics()
  sendLog(locale.value, useAnalyticsData('view'))

  if (!hasApiCallStarted.value) {
    loadingStore.stopFullLoading()
  }
})
</script>

<template>
  <div ref="mainContentRef" class="main-content">
    <template
      v-for="(template, index) in visibleTemplates"
      :key="template.template_code ?? index"
    >
      <component
        :is="getTemplateComponent(template.template_code)"
        :id="template.page_ver_tmpl_name_en"
        :components="template.page_ver_tmpl_json"
        :page-ver-tmpl-seq="template.page_ver_tmpl_seq"
        :page-ver-tmpl-name-en="template.page_ver_tmpl_name_en"
      />
    </template>
  </div>
  <ClientOnly>
    <BlocksLnb v-if="isShowLnb" />
    <div
      v-if="isShowTopBtn || isShowSnsBtn"
      :class="['utile-wrap', { 'is-stop': pinToMain }]"
    >
      <BlocksButtonScrollTop v-if="isShowTopBtn" />
      <BlocksButtonSns v-if="isShowSnsBtn" />
    </div>
  </ClientOnly>
</template>

<style scoped>
.empty-game + main .main-content {
  @apply pt-0;
}
.main-content {
  @apply relative pt-[48px] md:pt-[64px];
}
.utile-wrap {
  @apply fixed flex flex-col items-end z-[100]
  bottom-[12px] right-[12px] gap-2 md:bottom-[40px] md:right-[40px] md:gap-3;
}
.utile-wrap.is-stop {
  @apply absolute;
}

[data-theme='light'] {
  .main-content {
    @apply bg-theme-foreground;
  }
}
</style>
