<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 { useMenuStore } from './stores/menu'
import { storeToRefs } from 'pinia'
import { useSearchHistory } from './composables/useSearchHistory'
import type { LocaleCode } from './plugins/i18n'
import Toast from './components/Toast.vue'
import { getPmTagMain } from './api/category'

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

const { categoryTree, categoryLayers, layerActiveValues } = storeToRefs(menuStore)
const searchHistory = useSearchHistory()
const searchHistoryList = computed(() => searchHistory.list.value)
const searchExpanded = ref(false)
const searchKeyword = ref('')
const searchInputRef = ref<{ focus: () => void } | null>(null)

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 === '/earn-activity' || 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'
    if (p.startsWith('/earn-activity')) return '/earn-activity'
    return '/'
  },
  set(v: string) {
    if (v === '/profile') router.push(mineTargetPath.value)
    else router.push(v)
  },
})

function onBackClick() {
  if (currentRoute.value === '/login') {
    router.replace('/')
  } else {
    router.back()
  }
}

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

function expandSearch() {
  searchExpanded.value = true
  nextTick(() => {
    searchInputRef.value?.focus()
  })
}

function collapseSearch() {
  searchExpanded.value = false
  searchKeyword.value = ''
}

function onSearchBlur() {
  setTimeout(() => {
    collapseSearch()
  }, 200)
}

function onSearchSubmit() {
  const kw = searchKeyword.value.trim()
  if (kw) {
    searchHistory.add(kw)
    // 触发搜索事件的逻辑，可以利用 store 或者 router 跳转
    router.push({ path: '/', query: { q: kw } })
  }
  collapseSearch()
}

function selectHistoryItem(item: string) {
  searchKeyword.value = item
  onSearchSubmit()
}

onMounted(async () => {
  await nextTick()
  console.log('app onMounted')  
  if (layerActiveValues.value.length == 0) {
    const res = await getPmTagMain()
    if (res.code === 0 || res.code === 200) {
      categoryTree.value = res.data
    }
  }
})

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

async function onMenuClick(id: string) {
  if (currentRoute.value != '/') {
    router.push('/')
  }
  await nextTick()
  menuStore.onCategorySelect(0, id)
}
</script>

<template>
  <v-app>
    <v-app-bar color="surface" elevation="0" height="112" class="flex-row">
      <div class="flex-column header-content">
        <div class="app-bar-inner">
          <v-btn v-if="currentRoute !== '/'" icon variant="text" class="back-btn" :aria-label="t('common.back')"
            @click="onBackClick">
            <v-icon>mdi-arrow-left</v-icon>
          </v-btn>
          <v-app-bar-title v-if="currentRoute === '/'" class="brand-title">
            <div class="brand-lockup">
              <img src="/favicon.svg?v=2" alt="FuturePulse logo" class="brand-logo" />
             
              <div class="brand-copy">
                <span class="brand-kicker">Prediction Markets</span>
                <span class="brand-name">FuturePulse</span>
              </div>
            </div>
          </v-app-bar-title>

          <div class="home-category-layer1-row line1">
            <div class="app-tab-bar" height="48" @update:model-value="menuStore.onCategorySelect(0, $event)">
              <div v-for="item in categoryLayers[0]" class="app-tab-bar-item"
                :class="{ 'app-tab-bar-item-active': item.id === layerActiveValues[0] }" :key="item.id" :value="item.id"
                @click="onMenuClick(item.id)">
                {{ item.label }}
              </div>
            </div>
            <v-btn icon variant="text" class="home-search-btn" :aria-label="t('common.search')" @click="expandSearch">
              <v-icon size="24">mdi-magnify</v-icon>
            </v-btn>
          </div>

          <v-spacer class="line2"></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')">
              <div class="balance-group">
                <div class="balance-item">
                  <span class="balance-label">{{ t('wallet.portfolio') }}</span>
                  <span class="balance-value">${{ userStore.totalAssetValue }}</span>
                </div>
                <div class="balance-item">
                  <span class="balance-label">{{ t('wallet.cash') }}</span>
                  <span class="balance-value">${{ userStore.availableAssetValue }}</span>
                </div>
              </div>
            </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>

        <!-- 提取的顶部菜单栏与搜索功能 -->
        <div v-if="categoryLayers.length > 0" class="home-category-layer1-wrap">
          <div class="home-category-layer1-row line2">
            <div class="app-tab-bar" height="48" @update:model-value="menuStore.onCategorySelect(0, $event)">
              <div v-for="item in categoryLayers[0]" class="app-tab-bar-item"
                :class="{ 'app-tab-bar-item-active': item.id === layerActiveValues[0] }" :key="item.id" :value="item.id"
                @click="onMenuClick(item.id)">
                {{ item.label }}
              </div>
            </div>
            <v-btn icon variant="text" class="home-search-btn" :aria-label="t('common.search')" @click="expandSearch">
              <v-icon size="24">mdi-magnify</v-icon>
            </v-btn>
          </div>

          <!-- 搜索展开时：浮层输入框 + 历史记录 -->
          <transition name="home-search-overlay">
            <div v-if="searchExpanded" class="home-search-overlay">
              <div class="home-search-overlay-inner">
                <v-text-field ref="searchInputRef" v-model="searchKeyword" density="compact" hide-details
                  :placeholder="t('home.searchPlaceholder')" prepend-inner-icon="mdi-magnify" variant="outlined"
                  class="home-search-overlay-field" @blur="onSearchBlur" @keydown.enter="onSearchSubmit" />
                <v-btn icon variant="text" size="small" class="home-search-close-btn" :aria-label="t('common.collapse')"
                  @click="collapseSearch">
                  <v-icon size="22">mdi-close</v-icon>
                </v-btn>
              </div>
              <div v-if="searchHistoryList.length > 0" class="home-search-history">
                <div class="home-search-history-header">
                  <span class="home-search-history-title">{{ t('home.searchHistory') }}</span>
                  <v-btn variant="text" size="x-small" color="primary" class="home-search-history-clear"
                    @click="searchHistory.clearAll">
                    {{ t('common.clear') }}
                  </v-btn>
                </div>
                <ul class="home-search-history-list">
                  <li v-for="(item, idx) in searchHistoryList" :key="`${item}-${idx}`" class="home-search-history-item">
                    <button type="button" class="home-search-history-text" @click="selectHistoryItem(item)">
                      {{ item }}
                    </button>
                    <v-btn icon variant="text" size="x-small" class="home-search-history-delete"
                      :aria-label="t('common.delete')" @click.stop="searchHistory.remove(idx)">
                      <v-icon size="20">mdi-close</v-icon>
                    </v-btn>
                  </li>
                </ul>
              </div>
            </div>
          </transition>
        </div>
      </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="/earn-activity" :ripple="false">
        <v-icon size="24">mdi-lock-outline</v-icon>
        <span>{{ t('nav.activity') }}</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 lang="scss">
.header-content {
  max-width: 1440px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  height: 112px;
  margin: 0 auto;
  flex: 1;
}

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

.brand-title {
  flex: 0 1 auto;
  min-width: 0;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark-wrap {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  border: 1px solid rgba(45, 95, 175, 0.12);
  box-shadow: 0 8px 18px rgba(45, 95, 175, 0.08);
  flex: 0 0 auto;
}

.brand-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.brand-kicker {
  font-size: 0.64rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f7f98;
  white-space: nowrap;
}

.brand-name {
  font-size: 1.04rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #24498a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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 {
  width: 100%;
}

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

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

.balance-group {
  display: flex;
  align-items: stretch;
  gap: 16px;
  white-space: nowrap;
  line-height: 1.1;
}

.balance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.balance-label {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}

.balance-value {
  font-size: 1rem;
  font-weight: 700;
  color: #3a9b5d;
}

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

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

@media (max-width: 600px) {
  .brand-lockup {
    gap: 10px;
  }

  .brand-mark-wrap {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .brand-logo {
    width: 32px;
    height: 32px;
  }

  .brand-kicker {
    font-size: 0.58rem;
  }

  .brand-name {
    font-size: 0.96rem;
  }

  .balance-group {
    gap: 12px;
  }

  .balance-label {
    font-size: 0.64rem;
  }

  .balance-value {
    font-size: 0.9rem;
  }
}

/* 底部导航：整条栏上方淡投影；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;
}

/* 第一层：置顶、全宽；sticky 参照 app-main-scroll，top:0 贴容器顶（即 app-bar 下方） */
.home-category-layer1-wrap {
  width: 100vw;
  background-color: white;
}

.home-category-layer1-row {
  display: none;
  align-items: center;
  flex: 1;
}

.line1 {
  @include gt1024 {
    display: flex;
  };
}

.line2 {
  display: none;
  @include lt1024 {
    display: flex;
  };
}


.app-tab-bar {
  display: flex;
  padding-left: 8px;
  flex: 1;
  cursor: pointer;

  .app-tab-bar-item {
    padding: 0 8px;
  }

  .app-tab-bar-item-active {
    font-weight: bold;
  }
}

.home-category-layer1-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0;
}

.home-search-btn {
  flex-shrink: 0;
}

.home-search-overlay-enter-active,
.home-search-overlay-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.home-search-overlay-enter-from,
.home-search-overlay-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}

.v-tabs-height {
  height: 48px;
}

.home-search-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 2000;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-search-overlay-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-search-overlay-field {
  flex: 1;
}

.home-search-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}

.home-search-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-search-history-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}

.home-search-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-search-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.home-search-history-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.home-search-history-text {
  flex: 1;
  text-align: left;
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.87);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
</style>
