<template>
  <div class="shell" :class="{ 'shell-collapsed': isSidebarCollapsed }">
    <aside class="shell-sidebar">
      <div class="brand-block">
        <div class="brand-mark">HR</div>
        <div v-if="!isSidebarCollapsed">
          <div class="brand-title">企业缺勤分析台</div>
          <div class="brand-subtitle">Human Resource Insight Console</div>
        </div>
      </div>

      <div class="sidebar-panel">
        <div v-if="!isSidebarCollapsed" class="sidebar-label">导航</div>
        <el-menu :default-active="activeMenu" router class="nav-menu">
          <el-menu-item index="/dashboard">
            <el-icon class="nav-icon"><Grid /></el-icon>
            <span class="nav-label">数据概览</span>
          </el-menu-item>
          <el-menu-item index="/analysis">
            <el-icon class="nav-icon"><DataAnalysis /></el-icon>
            <span class="nav-label">影响因素</span>
          </el-menu-item>
          <el-menu-item index="/prediction">
            <el-icon class="nav-icon"><TrendCharts /></el-icon>
            <span class="nav-label">缺勤预测</span>
          </el-menu-item>
          <el-menu-item index="/clustering">
            <el-icon class="nav-icon"><UserFilled /></el-icon>
            <span class="nav-label">员工画像</span>
          </el-menu-item>
          <el-menu-item index="/jdr-analysis">
            <el-icon class="nav-icon"><Reading /></el-icon>
            <span class="nav-label">JD-R分析</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div v-if="!isSidebarCollapsed" class="sidebar-note">
        <div class="sidebar-label">系统摘要</div>
        <p>面向企业管理场景的缺勤趋势、风险预测与群体画像展示。</p>
      </div>
    </aside>

    <main class="shell-main">
      <header class="topbar">
        <div class="topbar-main">
          <el-button class="collapse-btn" circle @click="isSidebarCollapsed = !isSidebarCollapsed">
            {{ isSidebarCollapsed ? '>' : '<' }}
          </el-button>
          <div>
            <div class="topbar-title">{{ currentMeta.title || '企业缺勤分析台' }}</div>
            <div class="topbar-subtitle">{{ currentMeta.subtitle }}</div>
          </div>
        </div>
        <div class="topbar-badges">
          <el-button class="theme-toggle" @click="toggleTheme">
            {{ isDarkMode ? '浅色模式' : '深色模式' }}
          </el-button>
          <span class="topbar-badge">企业健康运营分析</span>
          <span class="topbar-badge topbar-badge-accent">可视化决策界面</span>
        </div>
      </header>

      <section class="main-content">
        <router-view />
      </section>
    </main>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { DataAnalysis, Grid, TrendCharts, UserFilled, Reading } from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = computed(() => route.path)
const isSidebarCollapsed = ref(false)
const isDarkMode = ref(false)

const metaMap = {
  '/dashboard': {
    title: '数据概览',
    subtitle: '从企业缺勤事件的总量、时序与结构分布切入，建立整体认知。'
  },
  '/analysis': {
    title: '影响因素',
    subtitle: '观察模型最关注的驱动因素，辅助解释缺勤风险的来源。'
  },
  '/prediction': {
    title: '缺勤预测',
    subtitle: '围绕最核心的业务信号输入，快速获得缺勤时长与风险等级。'
  },
  '/clustering': {
    title: '员工画像',
    subtitle: '通过聚类划分典型群体，为答辩演示提供更直观的人群视角。'
  },
  '/jdr-analysis': {
    title: 'JD-R理论分析',
    subtitle: '基于工作要求-资源理论的可解释分析，揭示缺勤的心理学驱动因素。'
  }
}

const currentMeta = computed(() => metaMap[route.path] || { title: '企业缺勤分析台', subtitle: '' })

function applyTheme(isDark) {
  const theme = isDark ? 'dark' : 'light'
  document.documentElement.setAttribute('data-theme', theme)
  localStorage.setItem('ui-theme', theme)
}

function toggleTheme() {
  isDarkMode.value = !isDarkMode.value
}

onMounted(() => {
  const savedTheme = localStorage.getItem('ui-theme')
  isDarkMode.value = savedTheme === 'dark'
  applyTheme(isDarkMode.value)
})

watch(isDarkMode, value => {
  applyTheme(value)
})
</script>

<style scoped>
.shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 0.28s ease;
}

.shell.shell-collapsed {
  grid-template-columns: 96px minmax(0, 1fr);
}

.shell-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100vh;
  padding: 26px 22px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  transition: padding 0.28s ease;
  border-right: 1px solid var(--sidebar-border);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fef3c7, #fdba74);
  color: #7c2d12;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.brand-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--sidebar-text);
}

.brand-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--sidebar-text-subtle);
}

.sidebar-panel,
.sidebar-note {
  padding: 18px;
  border: 1px solid var(--sidebar-border);
  border-radius: 22px;
  background: var(--sidebar-surface);
  backdrop-filter: blur(14px);
}

.sidebar-label {
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sidebar-text-subtle);
}

.nav-menu {
  border: none;
  background: transparent;
}

:deep(.nav-menu .el-menu-item) {
  height: 48px;
  margin-bottom: 8px;
  border-radius: 14px;
  color: var(--sidebar-text);
  background: transparent;
  transition: all 0.2s ease;
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  margin-right: 10px;
  font-size: 17px;
  color: var(--sidebar-text-subtle);
}

.nav-label {
  font-size: 14px;
}

:deep(.nav-menu .el-menu-item.is-active) {
  color: var(--sidebar-text);
  background: var(--sidebar-menu-active);
}

:deep(.nav-menu .el-menu-item:hover) {
  color: var(--sidebar-text);
  background: var(--sidebar-menu-hover);
}

.sidebar-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sidebar-text-subtle);
}

.shell-main {
  min-width: 0;
  padding: 24px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.topbar-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.collapse-btn {
  margin-top: 4px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.82);
  color: var(--brand-strong);
}

.topbar-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-main);
}

.topbar-subtitle {
  margin-top: 8px;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-subtle);
}

.topbar-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  border: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--text-main);
}

.topbar-badge {
  padding: 9px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  color: var(--brand-strong);
}

.topbar-badge-accent {
  color: var(--accent);
}

.main-content {
  min-width: 0;
}

.shell-collapsed .shell-sidebar {
  padding-left: 14px;
  padding-right: 14px;
}

.shell-collapsed .brand-block {
  justify-content: center;
}

.shell-collapsed .sidebar-panel {
  padding: 14px 10px;
}

.shell-collapsed :deep(.nav-menu .el-menu-item) {
  justify-content: center;
  padding: 0;
}

.shell-collapsed .nav-icon {
  margin-right: 0;
  width: 20px;
}

.shell-collapsed .nav-label {
  display: none;
}

@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .shell-sidebar {
    position: static;
    height: auto;
  }
}
</style>
