<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'

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

// 侧边栏折叠状态
const sidebarCollapsed = ref(false)

// 主题切换
const isDark = ref(false)

// 用户菜单显示状态
const userMenuOpen = ref(false)

// 导航菜单
const navigation = computed(() => [
  {
    name: '首页',
    path: '/home',
    icon: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'
  },
  {
    name: '新闻',
    path: '/news',
    icon: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'
  },
  {
    name: '统计',
    path: '/statistics',
    icon: 'M3 3v18h18 M18 17V9 M13 17V5 M8 17v-3'
  }
])

// 管理员菜单
const adminNavigation = computed(() => [
  {
    name: '管理后台',
    path: '/admin',
    icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'
  }
])

// 当前页面标题
const pageTitle = computed(() => {
  const allNav = [...navigation.value, ...adminNavigation.value]
  const current = allNav.find(item => route.path.startsWith(item.path))
  return current?.name || 'News Classifier'
})

// 初始化主题
onMounted(() => {
  const saved = localStorage.getItem('theme')
  if (saved === 'dark') {
    isDark.value = true
    document.documentElement.classList.add('dark')
  }
  userStore.loadUserInfo()
})

function toggleSidebar() {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

function toggleTheme() {
  isDark.value = !isDark.value
  if (isDark.value) {
    document.documentElement.classList.add('dark')
    localStorage.setItem('theme', 'dark')
  } else {
    document.documentElement.classList.remove('dark')
    localStorage.setItem('theme', 'light')
  }
}

function toggleUserMenu() {
  userMenuOpen.value = !userMenuOpen.value
}

function handleLogout() {
  userStore.logout()
  router.push('/login')
}

function navigateTo(path: string) {
  router.push(path)
}
</script>

<template>
  <div class="main-layout" :class="{ dark: isDark }">
    <!-- 侧边栏 -->
    <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
      <!-- Logo 区域 -->
      <div class="sidebar-header">
        <div class="logo">
          <div class="logo-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/>
              <path d="M18 14h-8"/>
              <path d="M15 18h-5"/>
              <path d="M10 6h8v4h-8V6Z"/>
            </svg>
          </div>
          <span v-show="!sidebarCollapsed" class="logo-text">NEWS<br/>CLASSIFIER</span>
        </div>
        <button class="collapse-btn" @click="toggleSidebar">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2"/>
            <path d="M9 3v18"/>
            <path d="m14 9 3 3-3 3"/>
          </svg>
        </button>
      </div>

      <!-- 导航菜单 -->
      <nav class="sidebar-nav">
        <div class="nav-section">
          <div v-for="item in navigation" :key="item.path" class="nav-item" :class="{ active: route.path.startsWith(item.path) }" @click="navigateTo(item.path)">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path :d="item.icon"/>
            </svg>
            <span v-show="!sidebarCollapsed">{{ item.name }}</span>
            <div v-show="!sidebarCollapsed" class="nav-indicator"></div>
          </div>
        </div>

        <!-- 管理员菜单 -->
        <div v-if="userStore.isAdmin" class="nav-section admin-section">
          <div v-show="!sidebarCollapsed" class="nav-section-title">ADMIN</div>
          <div v-for="item in adminNavigation" :key="item.path" class="nav-item" :class="{ active: route.path.startsWith(item.path) }" @click="navigateTo(item.path)">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path :d="item.icon"/>
            </svg>
            <span v-show="!sidebarCollapsed">{{ item.name }}</span>
            <div v-show="!sidebarCollapsed" class="nav-indicator"></div>
          </div>
        </div>
      </nav>
    </aside>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 顶部栏 -->
      <header class="header">
        <div class="header-left">
          <h1 class="page-title">{{ pageTitle }}</h1>
        </div>

        <div class="header-right">
          <!-- 主题切换 -->
          <button class="icon-btn" @click="toggleTheme" title="切换主题">
            <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="5"/>
              <line x1="12" y1="1" x2="12" y2="3"/>
              <line x1="12" y1="21" x2="12" y2="23"/>
              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
              <line x1="1" y1="12" x2="3" y2="12"/>
              <line x1="21" y1="12" x2="23" y2="12"/>
              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
            </svg>
            <svg v-else xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
            </svg>
          </button>

          <!-- 用户菜单 -->
          <div class="user-menu">
            <button class="user-btn" @click="toggleUserMenu">
              <div class="user-avatar">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                  <circle cx="12" cy="7" r="4"/>
                </svg>
              </div>
              <span class="user-name">{{ userStore.userInfo?.username || '用户' }}</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="6 9 12 15 18 9"/>
              </svg>
            </button>

            <!-- 用户下拉菜单 -->
            <div v-show="userMenuOpen" class="user-dropdown">
              <div class="dropdown-header">
                <div class="dropdown-avatar">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                  </svg>
                </div>
                <div class="dropdown-info">
                  <div class="dropdown-name">{{ userStore.userInfo?.username || '用户' }}</div>
                  <div class="dropdown-role">{{ userStore.userInfo?.role === 'ADMIN' ? '管理员' : '普通用户' }}</div>
                </div>
              </div>

              <div class="dropdown-divider"></div>

              <button class="dropdown-item" @click="handleLogout">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                  <polyline points="16 17 21 12 16 7"/>
                  <line x1="21" y1="12" x2="9" y2="12"/>
                </svg>
                <span>退出登录</span>
              </button>
            </div>
          </div>
        </div>
      </header>

      <!-- 内容区域 -->
      <main class="content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Archivo Black', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
}

.dark {
  --color-black: #ffffff;
  --color-white: #000000;
  --color-gray-50: #0a0a0a;
  --color-gray-100: #171717;
  --color-gray-200: #262626;
  --color-gray-300: #404040;
  --color-gray-400: #525252;
  --color-gray-500: #737373;
  --color-gray-600: #a3a3a3;
  --color-gray-700: #d4d4d4;
  --color-gray-800: #e5e5e5;
  --color-gray-900: #f5f5f5;
}

.main-layout {
  display: flex;
  min-height: 100vh;
  background: var(--color-gray-50);
  font-family: var(--font-mono);
}

.dark .main-layout {
  background: var(--color-gray-50);
}

/* 侧边栏样式 */
.sidebar {
  width: 260px;
  background: var(--color-white);
  border-right: 2px solid var(--color-black);
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  position: relative;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: repeating-linear-gradient(
    180deg,
    var(--color-black) 0px,
    var(--color-black) 2px,
    transparent 2px,
    transparent 8px
  );
}

.dark .sidebar {
  background: var(--color-gray-100);
  border-color: var(--color-white);
}

.dark .sidebar::before {
  background: repeating-linear-gradient(
    180deg,
    var(--color-white) 0px,
    var(--color-white) 2px,
    transparent 2px,
    transparent 8px
  );
}

.sidebar.collapsed {
  width: 80px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--color-gray-300);
}

.dark .sidebar-header {
  border-color: var(--color-gray-400);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-black);
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 8px;
  flex-shrink: 0;
}

.dark .logo-icon {
  background: var(--color-white);
  color: var(--color-black);
}

.logo-text {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.collapse-btn {
  padding: 0.5rem;
  color: var(--color-gray-600);
  background: transparent;
  border: 1px solid var(--color-gray-300);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.collapse-btn:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.dark .collapse-btn {
  color: var(--color-gray-500);
  border-color: var(--color-gray-500);
}

.dark .collapse-btn:hover {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}

.sidebar-nav {
  flex: 1;
  padding: 1.5rem 0.75rem;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 1.5rem;
}

.nav-section:last-child {
  margin-bottom: 0;
}

.nav-section-title {
  padding: 0.5rem 0.75rem;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.admin-section {
  border-top: 1px solid var(--color-gray-300);
  padding-top: 1.5rem;
}

.dark .admin-section {
  border-color: var(--color-gray-500);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 6px;
  margin-bottom: 0.25rem;
}

.nav-item:hover {
  background: var(--color-gray-100);
  color: var(--color-black);
}

.dark .nav-item {
  color: var(--color-gray-400);
}

.dark .nav-item:hover {
  background: var(--color-gray-200);
  color: var(--color-white);
}

.nav-item.active {
  background: var(--color-black);
  color: var(--color-white);
}

.dark .nav-item.active {
  background: var(--color-white);
  color: var(--color-black);
}

.nav-item svg {
  flex-shrink: 0;
}

.nav-item span {
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.nav-indicator {
  margin-left: auto;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}

.nav-item.active .nav-indicator {
  opacity: 1;
}

/* 主内容区 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 顶部栏 */
.header {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--color-white);
  border-bottom: 2px solid var(--color-black);
}

.dark .header {
  background: var(--color-gray-100);
  border-color: var(--color-white);
}

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

.page-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-black);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .page-title {
  color: var(--color-white);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.icon-btn {
  padding: 0.625rem;
  color: var(--color-gray-600);
  background: transparent;
  border: 1px solid var(--color-gray-300);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-btn:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.dark .icon-btn {
  color: var(--color-gray-500);
  border-color: var(--color-gray-500);
}

.dark .icon-btn:hover {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}

/* 用户菜单 */
.user-menu {
  position: relative;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.user-btn:hover {
  background: var(--color-gray-200);
  border-color: var(--color-black);
}

.dark .user-btn {
  background: var(--color-gray-200);
  border-color: var(--color-gray-500);
}

.dark .user-btn:hover {
  background: var(--color-gray-300);
  border-color: var(--color-white);
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 6px;
}

.dark .user-avatar {
  background: var(--color-white);
  color: var(--color-black);
}

.user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-black);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .user-name {
  color: var(--color-white);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 260px;
  background: var(--color-white);
  border: 2px solid var(--color-black);
  border-radius: 8px;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
  overflow: hidden;
}

.dark .user-dropdown {
  background: var(--color-gray-100);
  border-color: var(--color-white);
  box-shadow: 8px 8px 0 rgba(255, 255, 255, 0.1);
}

.dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--color-gray-300);
}

.dark .dropdown-header {
  border-color: var(--color-gray-500);
}

.dropdown-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 8px;
}

.dark .dropdown-avatar {
  background: var(--color-white);
  color: var(--color-black);
}

.dropdown-info {
  flex: 1;
  min-width: 0;
}

.dropdown-name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-black);
}

.dark .dropdown-name {
  color: var(--color-white);
}

.dropdown-role {
  font-size: 0.75rem;
  color: var(--color-gray-600);
  margin-top: 0.125rem;
}

.dark .dropdown-role {
  color: var(--color-gray-400);
}

.dropdown-divider {
  height: 1px;
  background: var(--color-gray-300);
}

.dark .dropdown-divider {
  background: var(--color-gray-500);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: transparent;
  border: none;
  color: var(--color-black);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background 0.2s;
}

.dropdown-item:hover {
  background: var(--color-gray-100);
}

.dark .dropdown-item {
  color: var(--color-white);
}

.dark .dropdown-item:hover {
  background: var(--color-gray-200);
}

.dropdown-item svg {
  color: var(--color-gray-600);
}

.dark .dropdown-item svg {
  color: var(--color-gray-500);
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}
</style>
