<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useDisplay } from 'vuetify'
import { useUserStore } from './stores/user'
import { useLocaleStore } from './stores/locale'
import type { LocaleCode } from './plugins/i18n'
import Toast from './components/Toast.vue'

const route = useRoute()
const { t } = useI18n()
const router = useRouter()
const userStore = useUserStore()
const localeStore = useLocaleStore()
const localeMenuOpen = ref(false)

function chooseLocale(loc: LocaleCode) {
  localeStore.setLocale(loc)
  localeMenuOpen.value = false
}
const display = useDisplay()

const currentRoute = computed(() => route.path)

const showBottomNav = computed(() => {
  if (!display.smAndDown.value) return false
  return currentRoute.value === '/' || currentRoute.value === '/search' || currentRoute.value === '/profile'
})
const mineTargetPath = computed(() =>
  userStore.isLoggedIn ? '/profile' : '/login',
)
const bottomNavValue = computed({
  get() {
    const p = currentRoute.value
    if (p.startsWith('/profile') || p === '/login') return '/profile'
    if (p.startsWith('/search')) return '/search'
    return '/'
  },
  set(v: string) {
    if (v === '/profile') router.push(mineTargetPath.value)
    else router.push(v)
  },
})

async function refreshUserData() {
  if (!userStore.isLoggedIn) return
  await router.isReady()
  await nextTick()
  await userStore.fetchUserInfo()
  await userStore.fetchUsdcBalance()
}

onMounted(() => {
  refreshUserData()
})
watch(
  () => userStore.isLoggedIn,
  (loggedIn) => {
    if (loggedIn) refreshUserData()
  },
  { immediate: true },
)
</script>

<template>
  <v-app>
    <v-app-bar color="surface" elevation="0">
      <div class="app-bar-inner">
        <v-btn
          v-if="currentRoute !== '/'"
          icon
          variant="text"
          class="back-btn"
          :aria-label="t('common.back')"
          @click="$router.back()"
        >
          <v-icon>mdi-arrow-left</v-icon>
        </v-btn>
        <v-app-bar-title v-if="currentRoute === '/'">TestMarket</v-app-bar-title>
        <v-spacer></v-spacer>
        <template v-if="!userStore.isLoggedIn">
          <v-menu
            v-model="localeMenuOpen"
            :close-on-content-click="true"
            location="bottom"
            transition="scale-transition"
          >
            <template #activator="{ props }">
              <v-btn
                icon
                variant="text"
                class="locale-btn"
                :aria-label="t('profile.selectLanguage')"
                v-bind="props"
              >
                <v-icon>mdi-earth</v-icon>
              </v-btn>
            </template>
            <v-list density="compact">
              <v-list-item
                v-for="opt in localeStore.localeOptions"
                :key="opt.value"
                :active="localeStore.currentLocale === opt.value"
                @click="chooseLocale(opt.value)"
              >
                <v-list-item-title>{{ opt.label }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
          <v-btn
            text
            to="/login"
            :class="{ active: currentRoute === '/login' }"
          >
            {{ t('common.login') }}
          </v-btn>
        </template>
        <template v-else>
          <v-btn
            class="balance-btn"
            variant="text"
            min-width="auto"
            padding="4 12"
            @click="$router.push('/wallet')"
          >
            <span class="balance-text">${{ userStore.balance }}</span>
          </v-btn>
          <v-btn
            icon
            variant="text"
            class="avatar-btn"
            :aria-label="t('common.user')"
            @click="$router.push('/profile')"
          >
            <v-avatar size="36" color="primary">
              <v-img v-if="userStore.avatarUrl" :src="userStore.avatarUrl" cover alt="avatar" />
              <v-icon v-else>mdi-account</v-icon>
            </v-avatar>
          </v-btn>
        </template>
      </div>
    </v-app-bar>
    <v-main class="app-main">
      <div class="app-main-scroll" data-main-scroll>
        <div class="main-content">
          <router-view v-slot="{ Component }">
            <keep-alive :include="['Home']">
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
      </div>
    </v-main>

    <v-bottom-navigation
      v-if="showBottomNav"
      v-model="bottomNavValue"
      app
      height="56"
      elevation="0"
    >
      <v-btn value="/" :ripple="false">
        <v-icon size="24">mdi-home-outline</v-icon>
        <span>{{ t('nav.home') }}</span>
      </v-btn>
      <v-btn value="/search" :ripple="false">
        <v-icon size="24">mdi-magnify</v-icon>
        <span>{{ t('nav.search') }}</span>
      </v-btn>
      <v-btn value="/profile" :ripple="false">
        <v-icon size="24">mdi-account-outline</v-icon>
        <span>{{ t('nav.mine') }}</span>
      </v-btn>
    </v-bottom-navigation>

    <Toast />
  </v-app>
</template>

<style scoped>
.app-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 16px;
}

.app-main {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app-main-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.main-content {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.active {
  font-weight: bold;
  text-decoration: underline;
}

.balance-btn {
  color: rgba(0, 0, 0, 0.87);
  text-transform: none;
}

.balance-text {
  font-weight: 500;
  font-size: 0.95rem;
}

.back-btn {
  color: rgba(0, 0, 0, 0.87);
}

.locale-btn {
  color: rgba(0, 0, 0, 0.87);
}

/* 底部导航：整条栏上方淡投影；z-index 确保覆盖滚动条，显示在滚动条上层 */
:deep(.v-bottom-navigation) {
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  z-index: 1100;
  background: #fff !important;
  transform: translateZ(0);
}
/* 底部导航：三个入口等分屏幕宽度 */
:deep(.v-bottom-navigation__content) {
  width: 100%;
}
:deep(.v-bottom-navigation__content > .v-btn) {
  flex: 1 1 0;
  min-width: 0;
}

/* 底部导航未选中态：图标与文字偏灰 */
:deep(.v-bottom-navigation__content > .v-btn:not(.v-btn--selected):not(.v-btn--active)) {
  color: rgba(0, 0, 0, 0.45);
}
:deep(.v-bottom-navigation__content > .v-btn:not(.v-btn--selected):not(.v-btn--active) .v-icon) {
  color: rgba(0, 0, 0, 0.45);
}

/* 底部导航选中态：加粗、无底色 */
:deep(.v-bottom-navigation__content > .v-btn.v-btn--selected),
:deep(.v-bottom-navigation__content > .v-btn.v-btn--active) {
  font-weight: 700;
  background: transparent !important;
}
:deep(.v-bottom-navigation__content > .v-btn .v-btn__overlay),
:deep(.v-bottom-navigation__content > .v-btn .v-btn__underlay) {
  display: none !important;
}

:deep(.v-bottom-navigation__content .v-ripple__container) {
  display: none !important;
}

/* 全局：禁止 body 滚动，由 app-main-scroll 内部滚动，滚动条不覆盖底部导航 */
:global(html),
:global(body) {
  background: rgb(252, 252, 252);
  height: 100%;
  overflow: hidden;
}
:global(.v-application) {
  background: rgb(252, 252, 252);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
</style>
