<template>
  <div class="layout-wrapper">
    <aside class="sidebar" :class="{ collapsed: sidebarCollapsed, 'mobile-open': mobileMenuOpen }">
      <div class="sidebar-header">
        <div class="logo" @click="$router.push('/admin')">
          <div class="logo-icon">
            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
            </svg>
          </div>
          <span class="logo-text">Admin</span>
        </div>
      </div>

      <nav class="sidebar-nav">
        <router-link to="/admin" class="nav-link" exact-active-class="router-link-active">
          <el-icon><DataAnalysis /></el-icon>
          <span class="nav-text">{{ $t('admin.dashboard') }}</span>
        </router-link>
        <router-link to="/admin/users" class="nav-link">
          <el-icon><User /></el-icon>
          <span class="nav-text">{{ $t('admin.userManagement') }}</span>
        </router-link>
        <router-link to="/admin/categories" class="nav-link">
          <el-icon><Folder /></el-icon>
          <span class="nav-text">{{ $t('admin.categoryManagement') }}</span>
        </router-link>
        <router-link to="/admin/brands" class="nav-link">
          <el-icon><Stamp /></el-icon>
          <span class="nav-text">{{ $t('admin.brandManagement') }}</span>
        </router-link>
        <router-link to="/admin/products" class="nav-link">
          <el-icon><Goods /></el-icon>
          <span class="nav-text">{{ $t('admin.productManagement') }}</span>
        </router-link>
        <router-link to="/admin/orders" class="nav-link">
          <el-icon><List /></el-icon>
          <span class="nav-text">{{ $t('admin.orderManagement') }}</span>
        </router-link>
        <router-link to="/admin/suppliers" class="nav-link">
          <el-icon><Van /></el-icon>
          <span class="nav-text">{{ $t('admin.supplierManagement') }}</span>
        </router-link>
        <router-link to="/admin/lotteries" class="nav-link">
          <el-icon><Trophy /></el-icon>
          <span class="nav-text">{{ $t('admin.lotteryManagement') }}</span>
        </router-link>
        <router-link to="/admin/tickets" class="nav-link">
          <el-icon><ChatDotSquare /></el-icon>
          <span class="nav-text">{{ $t('admin.ticketManagement') }}</span>
        </router-link>
        <router-link to="/admin/articles" class="nav-link">
          <el-icon><Document /></el-icon>
          <span class="nav-text">{{ $t('admin.articleManagement') }}</span>
        </router-link>
        <router-link to="/admin/banners" class="nav-link">
          <el-icon><Picture /></el-icon>
          <span class="nav-text">{{ $t('admin.bannerManagement') }}</span>
        </router-link>
        <router-link to="/admin/payment" class="nav-link">
          <el-icon><Wallet /></el-icon>
          <span class="nav-text">{{ $t('admin.paymentManagement') }}</span>
        </router-link>
        <router-link to="/admin/logs" class="nav-link">
          <el-icon><Notebook /></el-icon>
          <span class="nav-text">日志管理</span>
        </router-link>
        <router-link to="/admin/settings" class="nav-link">
          <el-icon><Setting /></el-icon>
          <span class="nav-text">{{ $t('admin.systemSettings') }}</span>
        </router-link>
      </nav>

      <div class="sidebar-footer">
        <el-dropdown trigger="click" @command="changeLocale" placement="right">
          <div class="nav-link">
            <el-icon><Compass /></el-icon>
            <span class="nav-text">语言</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="zh">中文</el-dropdown-item>
              <el-dropdown-item command="en">English</el-dropdown-item>
              <el-dropdown-item command="ja">日本語</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-dropdown trigger="click" @command="handleCommand" placement="right">
          <div class="nav-link user-link">
            <el-avatar :size="22" class="sidebar-avatar">{{ user?.username?.charAt(0).toUpperCase() }}</el-avatar>
            <span class="nav-text">{{ user?.username }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="home">返回前台</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <div class="nav-link collapse-btn" @click="sidebarCollapsed = !sidebarCollapsed">
          <el-icon><Fold v-if="!sidebarCollapsed" /><Expand v-else /></el-icon>
          <span class="nav-text">收起</span>
        </div>
      </div>
    </aside>

    <div class="main-container" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
      <header class="topbar">
        <button class="menu-btn" @click="mobileMenuOpen = !mobileMenuOpen">
          <el-icon><Expand /></el-icon>
        </button>
        <nav class="breadcrumb">
          <span class="breadcrumb-item" @click="$router.push('/admin')">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </span>
          <el-icon class="breadcrumb-sep"><ArrowRight /></el-icon>
          <span class="breadcrumb-current">{{ currentPageTitle }}</span>
        </nav>
        <div class="topbar-actions">
          <el-tooltip content="返回前台" placement="bottom">
            <button class="action-btn" @click="router.push('/')">
              <el-icon><HomeFilled /></el-icon>
            </button>
          </el-tooltip>
          <el-tooltip content="全屏" placement="bottom">
            <button class="action-btn" @click="toggleFullscreen">
              <el-icon><FullScreen /></el-icon>
            </button>
          </el-tooltip>
          <el-dropdown trigger="click" @command="handleCommand" placement="bottom-end">
            <div class="user-dropdown">
              <el-avatar :size="32" class="user-avatar">{{ user?.username?.charAt(0).toUpperCase() }}</el-avatar>
              <span class="user-name">{{ user?.username }}</span>
              <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="home">
                  <el-icon><HomeFilled /></el-icon>
                  返回前台
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </header>
      <main class="page-content">
        <router-view />
      </main>
    </div>

    <div v-if="mobileMenuOpen" class="overlay" @click="mobileMenuOpen = false"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { DataAnalysis, User, Folder, Stamp, Goods, List, Van, Trophy, ChatDotSquare, Setting, Document, Picture, Compass, Fold, Expand, HomeFilled, FullScreen, ArrowDown, SwitchButton, ArrowRight, Wallet, Notebook } from '@element-plus/icons-vue'
import { useUserStore } from '../store/user'
import { useCartStore } from '../store/cart'

const router = useRouter()
const route = useRoute()
const { locale, t } = useI18n()
const userStore = useUserStore()
const cartStore = useCartStore()
const sidebarCollapsed = ref(false)
const mobileMenuOpen = ref(false)

const user = computed(() => userStore.user)

const pageTitles: Record<string, string> = {
  '/admin': '控制台',
  '/admin/users': '用户管理',
  '/admin/categories': '分类管理',
  '/admin/brands': '品牌管理',
  '/admin/products': '商品管理',
  '/admin/orders': '订单管理',
  '/admin/suppliers': '供应商管理',
  '/admin/lotteries': '抽奖管理',
  '/admin/tickets': '工单管理',
  '/admin/articles': '资讯管理',
  '/admin/banners': '轮播图管理',
  '/admin/payment': '支付管理',
  '/admin/logs': '日志管理',
  '/admin/settings': '系统设置'
}

const currentPageTitle = computed(() => {
  return pageTitles[route.path] || t('admin.dashboard')
})

function changeLocale(lang: string) {
  locale.value = lang
  localStorage.setItem('locale', lang)
}

function handleCommand(command: string) {
  switch (command) {
    case 'home': router.push('/'); break
    case 'logout': userStore.logout(); cartStore.clearCart(); router.push('/login'); break
  }
}

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}
</script>

<style scoped lang="scss">
.layout-wrapper {
  display: flex;
  min-height: 100vh;
  background: #1a1a2e;
}

.sidebar {
  width: 220px;
  background: #16162a;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: width 0.2s, transform 0.2s;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4e6ef2, #7c5cfc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.logo-text {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.sidebar.collapsed .logo-text {
  display: none;
}

.sidebar-nav {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  margin-bottom: 2px;
}

.nav-link:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
}

.nav-link.router-link-active {
  color: #fff;
  background: rgba(78, 110, 242, 0.15);
}

.nav-link .el-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.nav-text {
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed .nav-text {
  display: none;
}

.sidebar-footer {
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-avatar {
  background: linear-gradient(135deg, #4e6ef2, #7c5cfc);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.user-link {
  gap: 8px;
}

.collapse-btn {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
}

.main-container {
  margin-left: 220px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.2s;
}

.main-container.sidebar-collapsed {
  margin-left: 60px;
}

.topbar {
  height: 56px;
  background: rgba(26, 26, 46, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  cursor: pointer;
}

.menu-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}

.breadcrumb-item:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
}

.breadcrumb-sep {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.2);
}

.breadcrumb-current {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.user-dropdown:hover {
  background: rgba(255, 255, 255, 0.06);
}

.user-avatar {
  background: linear-gradient(135deg, #4e6ef2, #7c5cfc);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.user-name {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
}

.dropdown-arrow {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

.page-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.overlay {
  display: none;
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: 220px !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .sidebar.collapsed {
    width: 220px !important;
  }

  .main-container,
  .main-container.sidebar-collapsed {
    margin-left: 0;
  }

  .topbar {
    padding: 0 12px;
  }

  .menu-btn {
    display: flex;
  }

  .breadcrumb-item span {
    display: none;
  }

  .user-name {
    display: none;
  }

  .dropdown-arrow {
    display: none;
  }

  .user-dropdown {
    padding: 4px;
  }

  .collapse-btn {
    display: none;
  }

  .overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }

  .page-content {
    padding: 16px 12px;
  }
}
</style>
