<template>
  <el-container class="layout-container">
    <!-- Sidebar for desktop / Drawer for mobile -->
    <el-aside
      v-if="!isMobile"
      width="220px"
      class="layout-aside"
    >
      <div class="logo">
        <el-icon size="28" color="#fff"><Collection /></el-icon>
        <span class="logo-text">PropDataGuard</span>
      </div>
      <el-menu
        :default-active="activeRoute"
        router
        background-color="#1a2b4a"
        text-color="#b0c4de"
        active-text-color="#fff"
        class="layout-menu"
      >
        <el-menu-item
          v-for="route in menuRoutes"
          :key="route.path"
          :index="route.path"
        >
          <el-icon>
            <component :is="route.meta?.icon" />
          </el-icon>
          <span>{{ route.meta?.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container direction="vertical">
      <!-- Header -->
      <el-header class="layout-header" height="56px">
        <div class="header-left">
          <el-button
            v-if="isMobile"
            type="primary"
            text
            @click="drawerVisible = true"
          >
            <el-icon size="22"><Expand /></el-icon>
          </el-button>
          <span class="header-title">{{ pageTitle }}</span>
        </div>
        <div class="header-right">
          <el-dropdown @command="handleCommand">
            <span class="user-info">
              <el-avatar :size="32" :icon="UserFilled" />
              <span class="username">{{ userStore.userInfo?.real_name || userStore.userInfo?.username }}</span>
              <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- Main Content -->
      <el-main class="layout-main">
        <router-view />
      </el-main>
    </el-container>

    <!-- Mobile Drawer -->
    <el-drawer
      v-model="drawerVisible"
      direction="ltr"
      size="220px"
      :with-header="false"
      class="mobile-drawer"
    >
      <div class="logo">
        <el-icon size="28" color="#fff"><Collection /></el-icon>
        <span class="logo-text">PropDataGuard</span>
      </div>
      <el-menu
        :default-active="activeRoute"
        router
        background-color="#1a2b4a"
        text-color="#b0c4de"
        active-text-color="#fff"
        class="layout-menu"
        @select="drawerVisible = false"
      >
        <el-menu-item
          v-for="route in menuRoutes"
          :key="route.path"
          :index="route.path"
        >
          <el-icon>
            <component :is="route.meta?.icon" />
          </el-icon>
          <span>{{ route.meta?.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-drawer>
  </el-container>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { UserFilled, Expand, Collection, ArrowDown } from '@element-plus/icons-vue'

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

const drawerVisible = ref(false)
const windowWidth = ref(window.innerWidth)

const isMobile = computed(() => windowWidth.value < 768)
const activeRoute = computed(() => route.path)
const pageTitle = computed(() => (route.meta?.title as string) || 'PropDataGuard')

const menuRoutes = computed(() => {
  const layout = router.getRoutes().find((r) => r.name === 'Layout')
  return layout?.children.filter((r) => r.meta?.title) || []
})

function handleCommand(cmd: string) {
  if (cmd === 'logout') {
    userStore.logout()
    router.push('/login')
  }
}

function onResize() {
  windowWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', onResize)
  if (!userStore.userInfo && userStore.token) {
    userStore.fetchUserInfo()
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', onResize)
})
</script>

<style scoped lang="scss">
.layout-container {
  height: 100vh;
}

.layout-aside {
  background-color: #1a2b4a;
  display: flex;
  flex-direction: column;
}

.logo {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #13203a;
  flex-shrink: 0;

  .logo-text {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
  }
}

.layout-menu {
  border-right: none;
  flex: 1;
}

.layout-header {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 0 16px;

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .header-right {
    .user-info {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      color: #606266;

      .username {
        font-size: 14px;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.layout-main {
  background-color: #f5f7fa;
  padding: 0;
  overflow-y: auto;
}

:deep(.mobile-drawer) {
  .el-drawer__body {
    padding: 0;
    background-color: #1a2b4a;
    display: flex;
    flex-direction: column;
  }
}
</style>
