<script lang="ts" setup>
import "vue-sonner/style.css";
const { locale, finalizePendingLocaleChange, t } = useI18n();
const route = useRoute();
const showScrollToTop = computed(() => route.meta.showScrollToTop !== false);
const localeHead = useLocaleHead();
const dir = computed(() => (locale.value === "ar" ? "rtl" : "ltr"));

useSeoMeta({
  title: computed(() => t("homeSeo.title")),
  description: computed(() => t("homeSeo.description")),
  ogSiteName: computed(() => t("generalOg.siteName")),
  ogType: "website",
  twitterCard: "summary",
});

let html: HTMLElement | undefined;

if (import.meta.client) {
  html = document.documentElement;
}
</script>

<template>
  <Html :lang="localeHead.htmlAttrs.lang" :dir="localeHead.htmlAttrs.dir">
    <Head>
      <template v-for="link in localeHead.link" :key="link.key">
        <!-- Skip automatic hreflang/canonical if page has manual SEO (i18n.seo: false) -->
        <Link
          v-if="
            !(
              route.meta.i18n?.seo === false &&
              (link.rel === 'alternate' || link.rel === 'canonical')
            )
          "
          :id="link.key"
          :rel="link.rel"
          :href="link.href"
          :hreflang="link.hreflang"
        />
      </template>
      <template v-for="meta in localeHead.meta" :key="meta.key">
        <Meta
          :id="meta.key"
          :property="meta.property"
          :content="meta.content"
        />
      </template>
    </Head>

    <Body>
      <NuxtLoadingIndicator color="var(--accent)" />
      <LazyToaster position="top-right" :duration="3000" :dir="dir" />
      <LazyNoNetworkBanner />
      <LazyScrollToTop v-if="showScrollToTop" />
      <NuxtLayout>
        <NuxtPage
          :transition="{
            name: 'page',
            mode: 'out-in',

            onBeforeLeave: () => {
              html!.style.overflowX = 'hidden';
            },
            onBeforeEnter: async () => {
              await finalizePendingLocaleChange();
            },
            onAfterEnter: () => {
              html!.style.overflowX = '';
            },
            onEnterCancelled: () => {
              html!.style.overflowX = '';
            },
          }"
        />
      </NuxtLayout>
    </Body>
  </Html>
</template>
