<template>
  <div class="min-h-screen bg-gray-50">
    <nav v-if="showNav" class="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between shadow-sm">
      <div class="flex items-center gap-6">
        <span class="font-bold text-gray-800 text-base">member.ose.tw</span>
        <router-link
          to="/me"
          class="text-sm text-gray-600 hover:text-blue-600 transition-colors"
          active-class="text-blue-600 font-medium"
        >
          我的資料
        </router-link>
        <router-link
          to="/me/permissions"
          class="text-sm text-gray-600 hover:text-blue-600 transition-colors"
          active-class="text-blue-600 font-medium"
        >
          我的權限
        </router-link>

        <div class="flex items-center gap-4 border-l border-gray-300 pl-6">
          <el-dropdown @command="handleAdminNav">
            <span class="text-sm text-gray-600 hover:text-blue-600 cursor-pointer transition-colors">
              管理員 <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="permissions">權限管理</el-dropdown-item>
                <el-dropdown-divider />
                <el-dropdown-item command="systems">系統管理</el-dropdown-item>
                <el-dropdown-item command="modules">模組管理</el-dropdown-item>
                <el-dropdown-item command="companies">公司管理</el-dropdown-item>
                <el-dropdown-item command="sites">站台管理</el-dropdown-item>
                <el-dropdown-item command="members">會員列表</el-dropdown-item>
                <el-dropdown-item command="groups">權限群組</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <el-button v-if="authStore.isLoggedIn" size="small" @click="logout">登出</el-button>
    </nav>
    <main class="p-6 max-w-6xl mx-auto">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ArrowDown } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const showNav = computed(() => {
  const onAuthPage = route.name === 'login' || route.name === 'auth-callback'
  return authStore.isLoggedIn && !onAuthPage
})

function handleAdminNav(command) {
  const routes = {
    permissions: '/admin/permissions',
    systems: '/admin/systems',
    modules: '/admin/modules',
    companies: '/admin/companies',
    sites: '/admin/sites',
    members: '/admin/members',
    groups: '/admin/permission-groups'
  }
  router.push(routes[command])
}

function logout() {
  authStore.logout()
  router.push('/login')
}
</script>
