<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { computed, ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useThemeStore, themeLabels } from '@/stores/theme'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const themeStore = useThemeStore()
const collapsed = ref(false)

interface MenuGroup { label?: string; items: { path: string; label: string; icon: string }[] }

const menuGroups = computed<MenuGroup[]>(() => {
  const groups: MenuGroup[] = [
    {
      label: '汇总',
      items: [
        { path: '/', label: '仪表盘', icon: '<polyline points="4 7 12 3 20 7"></polyline><polyline points="20 7 20 21 4 21 4 7"></polyline><line x1="8" y1="21" x2="8" y2="12"></line><line x1="16" y1="21" x2="16" y2="12"></line>' },
        { path: '/weekly-report', label: '周报', icon: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line>' },
        { path: '/light-board', label: '亮灯表', icon: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>' },
      ],
    },
    {
      label: '工作',
      items: [
        { path: '/work-plans', label: '工作计划', icon: '<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><polyline points="8 14 12 18 16 14"></polyline>' },
        { path: '/mini-business', label: '商机跟单', icon: '<line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>' },
        { path: '/key-visits', label: '要客拜访', icon: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>' },
        { path: '/leaves', label: '请假管理', icon: '<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>' },
      ],
    },
  ]
  if (auth.isManager || auth.isDirector) {
    groups.push({
      label: undefined,
      items: [
        { path: '/workspace', label: '我的数据', icon: '<line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line>' },
      ],
    })
  }
  groups.push({
    label: '管理',
    items: [
      { path: '/customers', label: '客户管理', icon: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle>' },
    ],
  })
  if (auth.isDirector) {
    groups[groups.length - 1].items.push(
      { path: '/users', label: '用户管理', icon: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path>' },
      { path: '/settings', label: '系统设置', icon: '<circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>' },
    )
  }
  return groups
})

const roleLabel = computed(() => {
  if (auth.isDirector) return '支局长'
  if (auth.isLeader) return '分管领导'
  return '客户经理'
})

function cycleTheme() {
  const next = themeStore.currentTheme === 'editorial' ? 'light' : 'editorial'
  themeStore.setTheme(next)
}
</script>

<template>
  <div class="desktop-layout">
    <!-- ═══ Sidebar — Ink & Gold Editorial ═══ -->
    <aside class="sidebar" :class="{ 'sidebar--collapsed': collapsed }">
      <div class="sidebar-brand">
        <h1 class="brand-title">企迹</h1>
        <p class="brand-sub">政企周报管理</p>
        <div class="brand-rule"></div>
      </div>

      <nav class="sidebar-nav">
        <template v-for="group in menuGroups" :key="group.label || 'nogroup'">
          <div v-if="group.label" class="nav-group-label">{{ group.label }}</div>
          <router-link
            v-for="item in group.items"
            :key="item.path"
            :to="item.path"
            class="nav-item"
            :class="{ 'nav-item--active': route.path === item.path }"
          >
            <svg class="nav-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" v-html="item.icon"></svg>
            <span class="nav-label">{{ item.label }}</span>
          </router-link>
        </template>
      </nav>

      <div class="sidebar-footer">
        <span class="footer-role">{{ roleLabel }}</span>
        <span class="footer-name">{{ auth.name }}</span>
      </div>
    </aside>

    <!-- ═══ Main Area ═══ -->
    <div class="main-area">
      <header class="topbar">
        <button class="collapse-btn" @click="collapsed = !collapsed" :title="collapsed ? '展开菜单' : '折叠菜单'">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline :points="collapsed ? '13 17 18 12 13 7' : '11 7 6 12 11 17'"></polyline>
          </svg>
        </button>
        <div class="topbar-actions">
          <button class="topbar-btn" @click="cycleTheme" :title="'切换至' + themeLabels[themeStore.currentTheme === 'editorial' ? 'light' : 'editorial']">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle v-if="themeStore.currentTheme === 'editorial'" cx="12" cy="12" r="5"></circle>
              <path v-if="themeStore.currentTheme === 'editorial'" d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path>
              <path v-if="themeStore.currentTheme === 'light'" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
          </button>
          <button class="topbar-btn" @click="router.push('/m')" title="移动端">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
              <line x1="12" y1="18" x2="12.01" y2="18"></line>
            </svg>
            移动端
          </button>
          <button class="topbar-btn topbar-btn--logout" @click="auth.logout(); router.push('/login')">
            <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"></path>
              <polyline points="16 17 21 12 16 7"></polyline>
              <line x1="21" y1="12" x2="9" y2="12"></line>
            </svg>
            退出
          </button>
        </div>
      </header>
      <main class="content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<style scoped>
/* ═══ Layout ═══ */
.desktop-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ═══ Sidebar ═══ */
.sidebar {
  width: 240px;
  background: var(--sidebar-bg);
  color: var(--sidebar-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.25s ease;
}
.sidebar--collapsed {
  width: 64px;
}
.sidebar--collapsed .brand-sub,
.sidebar--collapsed .brand-rule,
.sidebar--collapsed .nav-label,
.sidebar--collapsed .footer-role,
.sidebar--collapsed .footer-name { display: none; }
.sidebar--collapsed .brand-title { font-size: 20px; text-align: center; }
.sidebar--collapsed .nav-item { justify-content: center; padding: 11px 0; }
.sidebar--collapsed .nav-icon { font-size: 20px; margin: 0; }
.sidebar--collapsed .sidebar-footer { text-align: center; padding: 10px; }

.sidebar-brand {
  padding: 26px 22px 18px;
  border-bottom: 1px solid var(--sidebar-divider);
}

.brand-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--sidebar-brand-color);
  line-height: 1.2;
}

.brand-sub {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--sidebar-brand-sub-color);
  letter-spacing: 0.1em;
}

.brand-rule {
  width: 28px;
  height: 3px;
  background: var(--sidebar-accent);
  margin-top: 14px;
}

/* ═══ Navigation ═══ */
.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.nav-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--sidebar-group-label-color);
  padding: 12px 14px 4px;
  text-transform: uppercase;
}

.sidebar--collapsed .nav-group-label { display: none; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  color: var(--sidebar-nav-text);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: all 0.22s;
  border-left: 2px solid transparent;
}

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

.nav-item--active {
  color: var(--sidebar-nav-text-active);
  background: var(--sidebar-nav-bg-active);
  border-left-color: var(--sidebar-nav-border-active);
}

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

.nav-label {
  font-weight: 500;
}

/* ═══ Sidebar Footer ═══ */
.sidebar-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--sidebar-divider);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-role {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--sidebar-footer-role-color);
  letter-spacing: 0.1em;
}

.footer-name {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--sidebar-footer-name-color);
  letter-spacing: 0.04em;
}

/* ═══ Main Area ═══ */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  min-width: 0;
}

/* ═══ Topbar ═══ */
.topbar {
  background: var(--surface);
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--warm-border);
  flex-shrink: 0;
}

.topbar-greeting {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.04em;
}

.collapse-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: none; border: none;
  color: var(--warm-gray); cursor: pointer;
  transition: all 0.2s; flex-shrink: 0; margin-right: 8px;
  opacity: 0.5;
}
.collapse-btn:hover { color: var(--ink); opacity: 1; }

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

.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: none;
  border: 1px solid var(--warm-border);
  color: var(--warm-gray);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.2s;
}

.topbar-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.topbar-btn--logout:hover {
  color: var(--vermilion);
  border-color: var(--vermilion);
}

/* ═══ Content ═══ */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
</style>
