<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import logo from '@/assets/icon/logo.svg'
import { navMenus as importedNavMenus } from './_nav-menus.js'

// Components
import UserProfile from './_user-profile.vue'
import Footer from './_footer.vue'

// 接收父组件传递的 themeCustomizerRef
const props = defineProps({
  themeCustomizerRef: {
    type: Object,
    default: null,
  },
})

const tititleName = import.meta.env.VITE_APP_NAME

const route = useRoute()
const router = useRouter()

// 打开主题定制器
const openThemeCustomizer = () => {
  if (props.themeCustomizerRef?.openDrawer) {
    props.themeCustomizerRef.openDrawer()
  }
}

// 左侧导航菜单配置（使用统一的菜单数据）
const sideNavMenus = ref(importedNavMenus)

// 当前激活的菜单
const activeMenuItem = ref(0)

// 根据路由更新激活菜单
const updateActiveMenu = () => {
  const currentPath = route.path
  const index = sideNavMenus.value.findIndex(menu => menu.to === currentPath)
  if (index !== -1) {
    activeMenuItem.value = index
  }
}

// 监听路由变化
watch(() => route.path, updateActiveMenu, { immediate: true })

// 判断菜单是否激活
const isMenuActive = index => {
  return index === activeMenuItem.value
}

// 处理菜单点击
const handleMenuClick = (index, path) => {
  activeMenuItem.value = index
  router.push(path)
}
</script>

<template>
  <v-layout class="top-side-layout-wrapper">
    <!-- 左侧导航栏 -->
    <v-navigation-drawer permanent class="side-nav-drawer" width="64">
      <div class="side-nav-content">
        <div v-for="(menu, index) in sideNavMenus" :key="index" class="side-nav-item"
          :class="{ 'side-nav-item--active': isMenuActive(index) }" @click="handleMenuClick(index, menu.to)">
          <v-icon :icon="menu.icon" size="24" class="side-nav-icon" />
          <span class="side-nav-text">{{ menu.title }}</span>
        </div>
      </div>
    </v-navigation-drawer>

    <!-- 顶部导航栏 -->
    <v-app-bar elevation="0" height="64" class="top-nav-bar">
      <v-container fluid class="px-6">
        <div class="d-flex align-center">
          <!-- Logo 和品牌名 -->
          <RouterLink to="/" class="app-logo d-flex align-center text-decoration-none">
            <v-img class="logo-icon" :src="logo" alt="Logo" />
            <h1 class="logo-title text-uppercase mb-0 ms-2">
              {{ tititleName }}
            </h1>
          </RouterLink>

          <v-spacer />

          <!-- 右侧工具栏 -->
          <div class="d-flex align-center toolbar-actions">
            <!-- 搜索按钮 -->
            <v-btn color="primary" icon variant="text" size="default">
              <v-icon icon="mdi-magnify" size="22" />
            </v-btn>
            <!-- 通知 -->
            <v-btn color="primary" icon variant="text" size="default">
              <v-badge dot color="error" offset-x="2" offset-y="2">
                <v-icon icon="mdi-bell-outline" size="22" />
              </v-badge>
            </v-btn>
            <!-- 设置按钮 -->
            <v-btn color="primary" icon variant="text" size="default" @click="openThemeCustomizer">
              <v-icon icon="mdi-cog-outline" size="22" />
            </v-btn>

            <!-- 用户头像 -->
            <UserProfile />
          </div>
        </div>
      </v-container>
    </v-app-bar>

    <!-- 主要内容区域 -->
    <v-main class="main-content">
      <v-container fluid class="px-6 py-6">
        <slot />
      </v-container>
    </v-main>

    <!-- 页脚 -->
    <Footer />
  </v-layout>
</template>

<style lang="scss" scoped>
.top-side-layout-wrapper {
  min-height: 100vh;
  background-color: rgb(var(--v-theme-background));
}

// 顶部导航栏
.top-nav-bar {
  position: fixed !important;
  top: 0;
  left: 0 !important;
  right: 0;
  z-index: 1000;
  /* 确保在其他元素之上 */
  width: 100% !important;
  box-shadow: 0 4px 4px -4px rgba(var(--v-shadow-key-umbra-color), 42%) !important;

  background-color: rgb(var(--v-theme-surface)) !important;
  border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));

  :deep(.v-toolbar__content) {
    padding-inline: 0;
  }
}

// Logo 样式
.app-logo {
  display: flex;
  align-items: center;
  text-decoration: none;

  .logo-icon {
    inline-size: 32px;
    block-size: 32px;
    display: flex;
    align-items: center;

    :deep(svg) {
      inline-size: 100%;
      block-size: 100%;
    }
  }

  .logo-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgb(var(--v-theme-primary));
  }
}

// 左侧导航栏
.side-nav-drawer {
  position: fixed !important;
  margin-top: 67px;
  border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  background-color: rgb(var(--v-theme-surface));

  :deep(.v-navigation-drawer__content) {
    overflow-y: auto;
  }
}

.side-nav-content {
  height: 100%;
  padding: 16px 0;
}

.side-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 8px 8px 4px;
  margin: 4px 4px 4px 0;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: transparent;

  &:hover {
    background-color: rgba(var(--v-theme-primary), 0.08);

    .side-nav-icon {
      color: rgb(var(--v-theme-primary));
      transform: scale(1.1);
    }

    .side-nav-text {
      color: rgb(var(--v-theme-primary));
    }
  }

  &--active {
    background: linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, #7c3aed 100%);
    box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.3);

    .side-nav-icon {
      color: #ffffff !important;
    }

    .side-nav-text {
      color: #ffffff !important;
      font-weight: 600;
    }

    &:hover {
      background: linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, #7c3aed 100%);
      box-shadow: 0 6px 16px rgba(var(--v-theme-primary), 0.4);

      .side-nav-icon {
        color: #ffffff !important;
      }

      .side-nav-text {
        color: #ffffff !important;
      }
    }
  }
}

.side-nav-icon {
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  transition: all 0.3s ease;
}

.side-nav-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  text-align: center;
  line-height: 1.2;
  transition: all 0.3s ease;
  white-space: nowrap;
}

// 主内容区域
.main-content {
  background-color: rgb(var(--v-theme-background));
  min-height: calc(100vh - 64px);
  padding-bottom: 60px;
}

// 暗黑模式优化
.v-theme--dark {
  .side-nav-drawer {
    border-right-color: rgba(var(--v-border-color), 0.2);
  }
}
</style>