<script setup lang="ts">
import { App as CapacitorApp } from "@capacitor/app";

const userStore = useUserStore();
const { isAuthenticated } = storeToRefs(userStore);
const { locale, loadSavedLanguage } = useLanguage();
const { initializeWallet } = useWalletStore();
const { updateProfile } = useUserStore();
const platform = usePlatform();
const { checkAndPromptUpdate } = useAppUpdate();

onBeforeMount(() => {
  loadSavedLanguage();
});

onMounted(() => {
  if (!isAuthenticated.value)
    return;
  updateProfile();
  initializeWallet();
  CapacitorApp.addListener("appStateChange", ({ isActive }) => {
    if (isActive) {
      userStore.updateProfile();
    }
  });
  if (import.meta.env.MODE === "production") {
    useTimeoutFn(() => {
      checkAndPromptUpdate();
    }, 3000);
  }
});

watch(locale, (newLocale) => {
  document.querySelector("html")?.setAttribute("lang", newLocale);
}, { immediate: true });
</script>

<template>
  <IonApp>
    <Suspense>
      <IonRouterOutlet :animated="platform !== 'browser'" />
    </Suspense>
  </IonApp>
</template>
