<template>
  <a-layout-header class="top-header !p-0">
    <div class="h-full px-4 flex items-center justify-between">
      <div class="logo">
        <a-space size="large">
          <div class="logo-brand" @click="navigateTo('/console')">
            <img src="/logo.png" alt="logo" class="logo-img" />
            <span class="logo-name">控制台</span>
          </div>
        </a-space>
      </div>

      <a-dropdown placement="bottomRight" :trigger="['click']">
        <div class="user-trigger">
          <a-space>
            <a-avatar :size="28" :src="user?.avatar || user?.avatarUrl">
              <template #icon>
                <AppstoreOutlined />
              </template>
            </a-avatar>
            <span class="user-name">
              {{ userDisplayName }}
            </span>
          </a-space>
        </div>
        <template #overlay>
          <a-menu @click="onUserMenuClick">
            <a-menu-item v-for="item in mergedUserMenuItems" :key="item.key">
              {{ item.label }}
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>

<script setup lang="ts">
import { AppstoreOutlined } from '@ant-design/icons-vue'
import type { MenuProps } from 'ant-design-vue'
import type { User } from '@/api/system/user/model'

type ConsoleHeaderMenuItem = {
  key: string
  label: string
}

const props = withDefaults(
  defineProps<{
    productLabel?: string
    defaultJumpKey?: 'oa' | 'developer'
    user: User | null
    userDisplayName: string
    userMenuItems?: ConsoleHeaderMenuItem[]
  }>(),
  {
    productLabel: '云·企业官网',
    defaultJumpKey: 'developer',
    userMenuItems: () => [{ key: 'logout', label: '退出登录' }],
  }
)

const emit = defineEmits<{
  (e: 'logout'): void
  (e: 'userMenuClick', key: string): void
}>()

const mergedUserMenuItems = computed<ConsoleHeaderMenuItem[]>(() => {
  const items = Array.isArray(props.userMenuItems) ? props.userMenuItems.slice() : []
  if (!items.some((i) => i.key === 'account')) {
    const accountItem: ConsoleHeaderMenuItem = { key: 'account', label: '账号管理' }
    const logoutIndex = items.findIndex((i) => i.key === 'logout')
    if (logoutIndex >= 0) items.splice(logoutIndex, 0, accountItem)
    else items.push(accountItem)
  }
  return items
})

const consoleJumpTargets = {
  oa: '/oa',
  developer: '/developer',
} as const

function openExternal(url: string) {
  if (!import.meta.client) return
  if (url.startsWith('http://') || url.startsWith('https://')) {
    window.location.href = url
    return
  }
  void navigateTo(url)
}

const handleButtonClick = () => {
  openExternal(consoleJumpTargets[props.defaultJumpKey])
}

const handleProductMenuClick: MenuProps['onClick'] = (e) => {
  const key = String(e.key) as keyof typeof consoleJumpTargets
  const url = consoleJumpTargets[key]
  if (!url) return
  openExternal(url)
}

function onUserMenuClick(info: { key: string }) {
  const key = String(info.key)
  emit('userMenuClick', key)
  if (key === 'account') {
    void navigateTo('/console/account')
    return
  }
  if (key === 'logout') emit('logout')
}
</script>

<style scoped>
.top-header {
  height: 56px;
  line-height: 56px;
  border-radius: 12px;
  background: #111827 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.user-trigger {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 9999px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
}

.user-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
}

.user-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
}

.logo-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}

.logo-brand:hover .logo-img,
.logo-brand:hover .logo-name {
  opacity: 0.8;
}

.logo-img {
  height: 22px;
  width: auto;
  display: block;
}

.logo-name {
  font-family: 'Alimama FangYuanTi VF, sans-serif', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: linear-gradient(135deg, #ffffff 0%, #a5c8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
</style>
