<template>
  <header class="border-b border-gray-200 dark:border-gray-700 px-4 py-2 flex items-center gap-4">
    <h1 class="text-lg font-semibold">Agent Coding Workflow</h1>
    <nav v-if="auth.isAuthenticated" class="flex items-center gap-3 flex-1">
      <RouterLink :to="{ name: 'home' }" class="text-sm hover:underline"> 首页 </RouterLink>
      <RouterLink :to="{ name: 'project-list' }" class="text-sm hover:underline"> 项目 </RouterLink>
      <RouterLink :to="{ name: 'chat-home' }" class="text-sm hover:underline"> 对话 </RouterLink>
      <RouterLink :to="{ name: 'prompt-templates' }" class="text-sm hover:underline">
        模板
      </RouterLink>
      <RouterLink :to="{ name: 'me-usage' }" class="text-sm hover:underline"> 我的用量 </RouterLink>
      <template v-if="auth.isAdmin">
        <span class="text-neutral-300">|</span>
        <RouterLink :to="{ name: 'admin-users' }" class="text-sm hover:underline">
          用户
        </RouterLink>
        <RouterLink :to="{ name: 'admin-llm-endpoints' }" class="text-sm hover:underline">
          LLM Endpoints
        </RouterLink>
        <RouterLink :to="{ name: 'admin-llm-models' }" class="text-sm hover:underline">
          LLM Models
        </RouterLink>
        <RouterLink :to="{ name: 'admin-usage' }" class="text-sm hover:underline">
          全局用量
        </RouterLink>
        <RouterLink :to="{ name: 'admin-mcp-tokens' }" class="text-sm hover:underline">
          MCP Tokens
        </RouterLink>
        <RouterLink :to="{ name: 'admin-acp-sessions' }" class="text-sm hover:underline">
          ACP 会话
        </RouterLink>
        <RouterLink :to="{ name: 'admin-acp-agent-kinds' }" class="text-sm hover:underline">
          ACP 客户端
        </RouterLink>
        <RouterLink :to="{ name: 'admin-terminal' }" class="text-sm hover:underline">
          终端
        </RouterLink>
      </template>
    </nav>
    <span v-else class="flex-1" />
    <NotificationBell v-if="auth.isAuthenticated" />
    <NDropdown v-if="auth.user" :options="menu" @select="onSelect">
      <NButton text>
        {{ auth.user.display_name }}
      </NButton>
    </NDropdown>
  </header>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { NButton, NDropdown } from 'naive-ui'
import { RouterLink, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { authApi } from '@/api/auth'
import NotificationBell from './NotificationBell.vue'

const auth = useAuthStore()
const router = useRouter()

const menu = computed(() => [
  { label: '修改密码', key: 'change-password' },
  { label: '退出登录', key: 'logout' },
])

async function onSelect(key: string) {
  if (key === 'change-password') {
    router.push({ name: 'me-change-password' }).catch(() => {})
    return
  }
  if (key === 'logout') {
    try {
      await authApi.logout()
    } finally {
      auth.clearSession()
      router.replace({ name: 'login' }).catch(() => {})
    }
  }
}
</script>
