<template>
  <RouterView />
  <Toaster position="top-right" :duration="5000" close-button />
  <CookieBanner />
  <CompleteProfileModal
    v-if="authStore.user"
    :is-open="authStore.showCompleteProfile"
    :user="authStore.user"
    @complete="authStore.onProfileComplete"
  />
</template>

<script setup lang="ts">
import { Toaster } from "vue-sonner";
import { useAuthStore } from "@/stores/auth";
import { defineAsyncComponent, computed } from "vue";
import { useHead } from "@unhead/vue";
import { useI18n } from "vue-i18n";

const CompleteProfileModal = defineAsyncComponent(() => import("@/components/CompleteProfileModal.vue"));
const CookieBanner = defineAsyncComponent(() => import("@/components/CookieBanner.vue"));

const { t, locale } = useI18n();
const authStore = useAuthStore();

// Skip auth initialization and unnecessary pings during prerendering
const isPrerendering = (window as any).__PRERENDER_INJECTED !== undefined;
if (!isPrerendering) {
  authStore.init();
}

// Global SEO Defaults
useHead({
  titleTemplate: (title: string | undefined) => title ? `${title} | Radionica 3D` : 'Radionica 3D',
  htmlAttrs: {
    lang: computed(() => locale.value)
  },
  meta: [
    { property: 'og:type', content: 'website' },
    { property: 'og:site_name', content: 'Radionica 3D' },
    { property: 'og:image', content: 'https://radionica3d.me/og-image.jpg' },
    { name: 'twitter:card', content: 'summary_large_image' },
  ]
});
</script>
