<template>
  <div class="layout">
    <aside v-if="isAdmin" class="sidebar">
      <div class="brand">
        <div class="brand-logo">LM</div>
        <div class="brand-text">LAN Manager</div>
      </div>
      <nav class="nav">
        <router-link to="/machines" class="nav-item" active-class="active">
          <el-icon><Monitor /></el-icon>
          <span>机器列表</span>
        </router-link>
        <router-link v-if="isAdmin" to="/topology" class="nav-item" active-class="active">
          <el-icon><Share /></el-icon>
          <span>拓扑图</span>
        </router-link>
        <router-link v-if="isAdmin" to="/logs" class="nav-item" active-class="active">
          <el-icon><Document /></el-icon>
          <span>操作日志</span>
        </router-link>
      </nav>
      <div class="theme-toggle" @click="toggleTheme">
        <el-icon class="theme-icon"><component :is="isDark ? Sunny : Moon" /></el-icon>
        <span>{{ isDark ? '浅色模式' : '深色模式' }}</span>
      </div>
      <div class="sidebar-footer">
        <div class="user-info">
          <el-icon class="user-icon"><User /></el-icon>
          <span class="user-name">{{ isAdmin ? '管理员' : '访客' }}</span>
        </div>
        <el-button text class="logout-btn" @click="logout">
          <el-icon><SwitchButton /></el-icon>
          <span>退出</span>
        </el-button>
      </div>
    </aside>

    <main class="main" :class="{ 'no-sidebar': !isAdmin }">
      <div class="main-inner">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Monitor, Share, Document, User, SwitchButton, Sunny, Moon } from '@element-plus/icons-vue'
import { getAuth, refreshAuth } from '@/router'
import { logout as apiLogout } from '@/api'
import { ElMessage } from 'element-plus'

const router = useRouter()
const isAdmin = computed(() => getAuth().is_admin)
const isDark = ref(false)

onMounted(() => {
  isDark.value = document.documentElement.classList.contains('dark')
})

function toggleTheme() {
  isDark.value = !isDark.value
  document.documentElement.classList.toggle('dark', isDark.value)
  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
}

async function logout() {
  try {
    await apiLogout()
  } catch (e) {}
  refreshAuth()
  ElMessage.success('已退出')
  router.push('/login')
}
</script>

<style scoped>
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 220px;
  background: #0f172a;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
}

.brand {
  padding: 22px 18px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}
.brand-text {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
}

.nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
}
.nav-item.active {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
  font-weight: 600;
}
.nav-item .el-icon {
  font-size: 16px;
}

.sidebar-footer {
  padding: 12px 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.user-icon {
  font-size: 14px;
}
.user-name {
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}
.logout-btn {
  justify-content: flex-start;
  width: 100%;
  color: rgba(255,255,255,0.55);
  padding: 8px 10px;
  border-radius: 8px;
}
.logout-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.logout-btn span {
  margin-left: 8px;
  font-size: 12px;
}

.main {
  flex: 1;
  margin-left: 220px;
  min-height: 100vh;
  background: var(--bg);
}
.main-inner {
  padding: 10px;
}

.theme-toggle {
  margin: 0 10px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
}
.theme-icon {
  font-size: 16px;
}

.main.no-sidebar {
  margin-left: 0;
}

@media (max-width: 768px) {
  .sidebar { width: 64px; }
  .brand-text, .nav-item span, .user-name, .logout-btn span { display: none; }
  .brand { justify-content: center; padding: 18px 10px; }
  .nav-item { justify-content: center; }
  .main { margin-left: 64px; }
  .main.no-sidebar { margin-left: 0; }
}
</style>
