<template>
  <header class="system-status-bar">
    <div class="system-status-bar__left">
      <span class="system-status-bar__period" v-if="periodName">
        <span class="status-dot" :class="`status-dot--${phaseClass}`"></span>
        {{ periodName }}
        <span class="system-status-bar__phase" v-if="phase">{{ phaseLabel }}</span>
      </span>
      <span class="system-status-bar__period" v-else>无活跃周期</span>
    </div>
    <div class="system-status-bar__right">
      <el-badge :value="unreadCount" :hidden="!unreadCount" class="system-status-bar__bell">
        <el-button :icon="Bell" text size="small" @click="$router.push('/notifications')" />
      </el-badge>
      <el-dropdown trigger="click">
        <span class="system-status-bar__user">
          <el-icon :size="16"><UserFilled /></el-icon>
          <span>{{ userName }}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="$router.push('/scores/my')">我的绩效</el-dropdown-item>
            <el-dropdown-item @click="handleLogout" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
</template>

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

const props = defineProps({
  periodName: { type: String, default: '' },
  phase: { type: String, default: '' },
  unreadCount: { type: Number, default: 0 }
})

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

const userName = computed(() => auth.user?.realName || auth.user?.username || '')

const phaseClass = computed(() => {
  const map = { DRAFT: 'info', OKR_ALIGN: 'active', EXECUTING: 'active', ASSESSING: 'warning', ARCHIVED: 'info' }
  return map[props.phase] || 'info'
})

const phaseLabel = computed(() => {
  const map = { DRAFT: '草稿', OKR_ALIGN: 'OKR 对齐', EXECUTING: '执行中', ASSESSING: '考评中', ARCHIVED: '已归档' }
  return map[props.phase] ? `· ${map[props.phase]}` : ''
})

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

<style scoped>
.system-status-bar {
  height: var(--shell-status-height, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--workspace-surface, #fff);
  border-bottom: 1px solid var(--color-border, #dfe7ee);
  font-size: 12px;
}
.system-status-bar__left { display: flex; align-items: center; gap: 12px; }
.system-status-bar__period { color: var(--color-text-secondary, #5f6b7a); display: flex; align-items: center; gap: 6px; }
.system-status-bar__phase { color: var(--color-text-muted, #8a97a8); }
.system-status-bar__right { display: flex; align-items: center; gap: 8px; }
.system-status-bar__bell { margin-right: 4px; }
.system-status-bar__user {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text-secondary, #5f6b7a);
  padding: 4px 8px;
  border-radius: var(--radius-xs, 4px);
  transition: background-color var(--motion-fast, 160ms ease);
}
.system-status-bar__user:hover { background: var(--color-surface-subtle, #f8fafc); }

/* Inline status dot */
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.status-dot--active { background: var(--color-success, #2e9d65); }
.status-dot--warning { background: var(--color-warning, #c98219); }
.status-dot--info { background: var(--color-text-muted, #8a97a8); }
</style>
