<script setup>
import CityRentalPageRenderer from '~/components/city-rental/CityRentalPageRenderer.vue'
import { buildCityRentalAutoRentalSchema, buildCityRentalFaqSchema } from '~/content/city-rental'
import { buildResolvedPageSeo } from '~/content/utils'
import { resolvePageBySlug } from '~/content/pages'
import { buildPublicSeoLinks } from '~/utils/public-seo'
import { usePublicLocale } from '~/composables/usePublicLocale'
import { normalizePublicLocale } from '~/utils/public-locales'

definePageMeta({
  siteHeaderTheme: 'light',
  siteHeaderOverlay: true,
})

const route = useRoute()
const { locale } = usePublicLocale()
const ui = usePublicUi()
const runtimeConfig = useRuntimeConfig()
const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const routePath = computed(() => route.path || '/')
const { data: page } = await useAsyncData(
  () => `city-rental-page:${normalizePublicLocale(locale.value)}:${routePath.value}`,
  () => resolvePageBySlug(routePath.value, locale.value),
  {
    watch: [routePath, locale],
    default: () => null,
  },
)

const pageTemplate = computed(() => String(page.value?.structuredContent?.ui?.template || '').trim())

if (!page.value || pageTemplate.value !== 'city-rental') {
  throw createError({
    statusCode: 404,
    statusMessage: ui.value.pages?.notFound || 'Page not found',
  })
}

const pageSeo = computed(() => buildResolvedPageSeo(page.value, pageOrigin.value, {
  ogImage: page.value?.heroImage || page.value?.featuredImage || '',
}))
const faqSchema = computed(() => buildCityRentalFaqSchema(page.value))
const rentalSchema = computed(() => buildCityRentalAutoRentalSchema(page.value))

useSeoMeta({
  title: () => pageSeo.value.title,
  description: () => pageSeo.value.description,
  ogTitle: () => pageSeo.value.ogTitle,
  ogDescription: () => pageSeo.value.ogDescription,
  ogImage: () => pageSeo.value.ogImage || undefined,
  robots: () => pageSeo.value.robots,
})

useHead(() => ({
  link: buildPublicSeoLinks(pageSeo.value),
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify(faqSchema.value),
    },
    {
      type: 'application/ld+json',
      children: JSON.stringify(rentalSchema.value),
    },
  ],
}))
</script>

<template>
  <CityRentalPageRenderer :page="page" />
</template>
