<template>
  <v-app>
    <v-img
      src="/src/assets/images/login.jpg"
      cover
      height="100vh"
      style="object-position: center top;"
    >
      <v-layout height="100vh" style="background: rgba(255, 255, 255, 0.85);">
        <AppHeader :drawer-active="drawerActive" @toggle-drawer="toggleDrawer" @logout="showLogoutDialog = true" />
        <AppFooter />
        <AppDrawer v-model="drawerActive" />
        <v-main>
          <v-container fluid class="pt-4 pb-0">
            <v-breadcrumbs :items="breadcrumbs">
              <template #prepend>
                <v-icon :icon="currentBreadcrumbIcon" size="small" class="me-2" />
              </template>
              <template #item="{ item }">
                <v-breadcrumbs-item
                  :disabled="item.disabled"
                  :to="item.to"
                  :exact="true"
                >
                  {{ item.title }}
                </v-breadcrumbs-item>
              </template>
            </v-breadcrumbs>
          </v-container>
          <slot></slot>
        </v-main>
      </v-layout>
    </v-img>
    <!-- 登出确认对话框 -->
    <v-dialog v-model="showLogoutDialog" max-width="400">
      <v-card>
        <v-card-title>{{ $t('components.appHeader.logoutDialog.title') }}</v-card-title>
        <v-card-text>{{ $t('components.appHeader.logoutDialog.message') }}</v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn color="primary" text @click="showLogoutDialog = false">{{ $t('components.appHeader.logoutDialog.cancel') }}</v-btn>
          <v-btn color="primary" text @click="confirmLogout">{{ $t('components.appHeader.logoutDialog.confirm') }}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-app>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import AppHeader from './AppHeader.vue'
import AppDrawer from './AppDrawer.vue'
import AppFooter from './AppFooter.vue'

import { useAuthStore } from '../stores/auth'
import { useRouter, useRoute } from 'vue-router'
import { GLOBAL_MENU_ITEMS } from './constants/menuItems'

const { t } = useI18n()
const auth = useAuthStore()
const router = useRouter()
const route = useRoute()

const drawerActive = ref(false)
const toggleDrawer = () => { drawerActive.value = !drawerActive.value }

const showLogoutDialog = ref(false)
const confirmLogout = () => {
  showLogoutDialog.value = false
  handleLogout()
}
const handleLogout = () => {
  // 1. 调用 Pinia 的登出方法
  auth.logout && auth.logout()

  // 2. 清除 localStorage/sessionStorage（如有）
  localStorage.removeItem('token')
  sessionStorage.removeItem('token')

  // 3. 跳转到登录页
  router.push('/login')
}

// 登录后自动展开 Drawer
onMounted(() => {
  drawerActive.value = true
})

const breadcrumbs = computed(() => {
  const path = route.path

  // 根据路径生成面包屑
  if (path === '/') {
    return [{ title: t('navigation.breadcrumb.home'), to: '/', disabled: true }]
  }

  if (path === '/profile') {
    return [
      { title: t('navigation.breadcrumb.home'), to: '/', disabled: false },
      { title: t('navigation.breadcrumb.profile'), to: '/profile', disabled: true }
    ]
  }

  if (path === '/master-data/students') {
    return [
      { title: t('navigation.breadcrumb.home'), to: '/', disabled: false },
      { title: t('navigation.breadcrumb.masterData'), to: null, disabled: true },
      { title: t('navigation.breadcrumb.students'), to: '/master-data/students', disabled: true }
    ]
  }

  // 默认返回首页
  return [{ title: t('navigation.breadcrumb.home'), to: '/', disabled: true }]
})

const currentBreadcrumbIcon = computed(() => {
  const targetPath = route.path
  const findIconByPath = (items, path) => {
    for (const item of items) {
      if (item.path === path && item.mdiIcon) return item.mdiIcon
      if (item.children) {
        const childIcon = findIconByPath(item.children, path)
        if (childIcon) return childIcon
      }
    }
    return null
  }
  return findIconByPath(GLOBAL_MENU_ITEMS, targetPath) || 'mdi-home'
})
</script>

<style scoped>
</style>
