<template>
  <n-config-provider :theme="theme" :locale="naiveLocale" :date-locale="naiveDateLocale">
    <n-message-provider>
      <n-dialog-provider>
        <n-notification-provider>
          <router-view />
        </n-notification-provider>
      </n-dialog-provider>
    </n-message-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { zhCN, enUS, dateZhCN, dateEnUS, NMessageProvider, NDialogProvider, NNotificationProvider } from 'naive-ui'
import type { GlobalTheme } from 'naive-ui'
import { initLocale, locale as appLocale, t } from './shared/i18n'

const theme = ref<GlobalTheme | null>(null)

onMounted(() => {
  initLocale()
  updateTitle()
  updateHtmlLang()
})

// Sync Naive UI locale with our app locale
const naiveLocale = computed(() => appLocale.value === 'zh-CN' ? zhCN : enUS)
const naiveDateLocale = computed(() => appLocale.value === 'zh-CN' ? dateZhCN : dateEnUS)

function updateTitle() {
  const appName = localStorage.getItem('appName') || 'Jingrow'
  document.title = `${appName} - ${t('AI Agent Full-Stack Framework')}`
}

watch(appLocale, () => {
  updateTitle()
  updateHtmlLang()
})

function updateHtmlLang() {
  document.documentElement.lang = appLocale.value
}
</script>

<style>
#app {
  height: 100vh;
  width: 100vw;
}
</style>
