<template>
  <v-app>
    <v-app-bar
      app
      class="app-bar-transition"
      :class="{ 'app-bar-pill': !drawer, 'app-bar-rect': drawer }"
      color="primary"
      elevation="4"
      :rounded="drawer ? 'none' : 'pill'"
    >
      <v-app-bar-nav-icon @click="drawer = !drawer" />
      <v-app-bar-title class="text-h6">
        <template v-if="menuItems.length > 0 && menuItems[selectedIndex]">
          {{ menuItems[selectedIndex].title || $t('appTitle') }}
        </template>
      </v-app-bar-title>

      <v-spacer />

      <v-btn icon="mdi-translate" @click="toggleLanguage" />
    </v-app-bar>

    <v-navigation-drawer
      v-model="drawer"
      app
      class="drawer-transition"
      :width="drawerWidth"
    >

      <div class="fill-height d-flex flex-column">
        <v-list-item class="pa-4">
          <v-list-item-title class="text-h6 text-primary">
            {{ $t('calculator') }}
          </v-list-item-title>
          <v-list-item-subtitle>
            {{ $t('appTitle') }}
          </v-list-item-subtitle>
        </v-list-item>

        <v-divider />

        <v-list class="flex-grow-1" density="compact">
          <v-list-item
            v-for="(item, index) in menuItems"
            :key="index"
            :active="selectedIndex === index"
            class="ma-1"
            :color="selectedIndex === index ? 'primary' : undefined"
            rounded="lg"
            :to="item.to"
            @click="handleSelect(index)"
          >
            <v-list-item-title class="text-body-2">
              {{ item.title }}
            </v-list-item-title>
          </v-list-item>
        </v-list>

        <v-divider />

        <div class="pa3">
          <v-btn
            block
            class="mb-2"
            prepend-icon="mdi-information-outline"
            variant="text"
            @click="showAboutDialog = true"
          >
            {{ $t('about') }}
          </v-btn>
        </div>

      </div>

    </v-navigation-drawer>

    <v-dialog
      v-model="showAboutDialog"
      max-width="500px"
    >
      <v-card
        class="mx-auto"
        prepend-icon="mdi-information-outline"
      >
        <template #title>
          <v-card-title class="text-h5">
            {{ appInfo.appName }}
          </v-card-title>
        </template>

        <template #subtitle>
          <div class="text-caption text-secondary">
            {{ appInfo.version }}
            {{ appInfo.copyright }}
          </div>
        </template>

        <template #text>
          <v-card-text>
            <div>
              {{ appInfo.description }}
            </div>
          </v-card-text>

          <div class="mb-3">
            {{ $t('officialWebsite') }}:
            <v-btn
              color="primary"
              :href="appInfo.officialWebsite"
              prepend-icon="mdi-web"
              rel="noopener noreferrer"
              size="small"
              target="_blank"
              variant="text"
            >
              {{ appInfo.officialWebsite }}
            </v-btn>
          </div></template>

        <v-card-actions>
          <v-spacer />
          <v-btn
            color="primary"
            variant="text"
            @click="showAboutDialog = false"
          >
            {{ $t('close') }}
          </v-btn>
        </v-card-actions>

      </v-card></v-dialog>

    <v-main>
      <v-container
        class="pa-6"
        fluid
      />
      <router-view v-slot="{ Component }">
        <v-fade-transition hide-on-leave>
          <component :is="Component" />
        </v-fade-transition>
      </router-view>
    </v-main>

    <!-- 页脚 -->
    <v-footer app class="pa-4 bg-grey-lighten-5">
      <div class="d-flex justify-space-between align-center w-100">
        <div class="text-caption text-disabled">
          &copy; {{ new Date().getFullYear() }} {{ appInfo.author }} - {{ $t('allRightsReserved') }}
        </div>
        <div class="text-caption text-disabled">
          v{{ appInfo.version }}
        </div>
      </div>
    </v-footer>
  </v-app>

</template>

<script lang="ts" setup>
  import { computed, onMounted, onUnmounted, ref } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { navigationConfig } from '@/config/navigation'
  import { useNavigationStore } from '@/stores/navigation'

  const { t, locale } = useI18n()

  const navigationStore = useNavigationStore()

  const drawer = computed({
    get: () => navigationStore.drawer,
    set: (value: boolean) => {
      navigationStore.setDrawerOpen(value)
    },
  })
  const selectedIndex = computed(() => navigationStore.selectedIndex)

  const windowWidth = ref(typeof window === 'undefined' ? 1200 : window.innerWidth)

  const showAboutDialog = ref(false)

  // 应用信息
  const appInfo = computed(() => {
    return {
      appName: t('appTitle'),
      version: '1.0.0',
      author: t('companyName'),
      description: t('appDescription'),
      copyright: `© ${new Date().getFullYear()} ${t('companyName')}. ${t('allRightsReserved')}`,
      officialWebsite: 'http://www.jinshen.cn',
    }
  })

  // 动态设置网页标题
  const pageTitle = computed(() => {
    return t('appTitle')
  })

  // 监听窗口变化
  const handleResize = () => {
    if (typeof window === 'undefined') return
    windowWidth.value = window.innerWidth
  }

  onMounted(() => {
    if (typeof window === 'undefined') return
    window.addEventListener('resize', handleResize)
  })

  onUnmounted(() => {
    if (typeof window === 'undefined') return
    window.removeEventListener('resize', handleResize)
  })

  const drawerWidth = computed(() => {
    const isZh = locale.value === 'zh'

    // 计算菜单项中最长标题的长度
    const maxTitleLength = menuItems.value.reduce((max, item) => {
      return Math.max(max, item.title.length)
    }, 0)

    const isMobile = windowWidth.value < 600
    const isTablet = windowWidth.value < 960

    // 根据屏幕宽度和标题长度计算抽屉宽度
    let calculatedWidth: number

    if (isMobile) {
      // 移动设备：更紧凑的布局
      calculatedWidth = isZh ? maxTitleLength * 12 + 60 : maxTitleLength * 6 + 60
    } else if (isTablet) {
      // 平板设备：中等布局
      calculatedWidth = isZh ? maxTitleLength * 13 + 70 : maxTitleLength * 6.5 + 70
    } else {
      // 桌面设备：宽松布局
      calculatedWidth = isZh ? maxTitleLength * 15 + 80 : maxTitleLength * 7 + 80
    }

    const minWidth = isMobile ? 240 : (isTablet ? 280 : 300)
    const maxWidth = isMobile ? 360 : (isTablet ? 400 : 500)

    const finalWidth = Math.max(minWidth, Math.min(calculatedWidth, maxWidth))

    // 开发环境调试信息
    if (import.meta.env.DEV) {
      console.debug('Navigation drawer width calculation:', {
        locale: locale.value,
        maxTitleLength,
        calculatedWidth,
        finalWidth,
        windowWidth: windowWidth.value,
        device: isMobile ? 'mobile' : (isTablet ? 'tablet' : 'desktop'),
      })
    }

    return finalWidth
  })

  const menuItems = computed(() => {
    return navigationConfig.map((item, _) => {
      return {
        title: t(item.title),
        to: item.to,
      }
    })
  })

  function toggleLanguage () {
    locale.value = locale.value === 'zh' ? 'en' : 'zh'
  }

  function handleSelect (_index: number) {
    drawer.value = false // 选择后自动关闭抽屉
  }

  onMounted(() => {
    document.title = pageTitle.value
  })

  watch(locale, () => {
    document.title = pageTitle.value
  })
</script>
