<script lang="ts" setup>
/**
 * 工作台问候头（Premium）：primary 渐变底 + 装饰光斑，头像光环，按时段问候
 * 右侧铃铛未读角标跳消息中心；头像/姓名可点击进入个人中心，铃铛旁另有「个人中心」按钮
 * 颜色全走主题变量，暗色自动柔化
 */
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { IconifyIcon as VbenIcon } from '@vben/icons';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';

import { Avatar, Badge } from 'ant-design-vue';

import { getNoticeUnreadCountApi } from '#/views/notice/api';

const userStore = useUserStore();
const router = useRouter();

/** 未读消息数（铃铛角标同源接口） */
const unreadCount = ref(0);

/** 按时段生成问候语，比「哈喽」更有质感 */
const greeting = computed(() => {
  const hour = new Date().getHours();
  if (hour < 6) return '夜深了';
  if (hour < 12) return '早上好';
  if (hour < 14) return '中午好';
  if (hour < 18) return '下午好';
  return '晚上好';
});

/**
 * 拉取未读消息数；失败静默（角标非关键路径，不打断工作台加载）
 */
async function fetchUnreadCount() {
  try {
    const res = await getNoticeUnreadCountApi();
    unreadCount.value = Number(res?.count || 0);
  } catch {
    unreadCount.value = 0;
  }
}

/**
 * 点击铃铛跳转消息中心
 */
function goNoticeCenter() {
  router.push('/notice/list');
}

/**
 * 进入个人中心（静态路由 /profile，与顶栏头像下拉同一入口）
 * 头像/姓名区域与右侧按钮都走这里
 */
function goProfile() {
  router.push({ name: 'Profile' });
}

/**
 * 当天日期文案（中文长格式）
 */
function getTodayDate() {
  const today = new Date();
  const options: Intl.DateTimeFormatOptions = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };
  return today.toLocaleDateString('zh-CN', options);
}
const todayDate = getTodayDate();

onMounted(fetchUnreadCount);
</script>

<template>
  <div class="ws-header">
    <!-- 装饰光斑：纯视觉元素，随主题色变化 -->
    <div aria-hidden="true" class="ws-header__orb ws-header__orb--1"></div>
    <div aria-hidden="true" class="ws-header__orb ws-header__orb--2"></div>

    <div
      class="ws-header__left ws-header__left--clickable"
      role="button"
      tabindex="0"
      title="进入个人中心"
      @click="goProfile"
      @keydown.enter="goProfile"
    >
      <div class="ws-header__avatar-ring">
        <Avatar
          :size="44"
          :src="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
        />
      </div>
      <div class="ws-header__text">
        <div class="ws-header__title">
          {{ greeting }}，{{ userStore.userInfo?.nick_name }}
          <span class="ws-header__role">
            {{ userStore.userInfo?.roles?.name }}
          </span>
        </div>
        <div class="ws-header__date">{{ todayDate }} · 开始您一天的工作吧</div>
      </div>
    </div>

    <div class="ws-header__right">
      <button
        aria-label="个人中心"
        class="ws-header__bell"
        title="个人中心"
        type="button"
        @click="goProfile"
      >
        <VbenIcon class="ws-header__bell-icon" icon="lucide:user" />
      </button>
      <Badge :count="unreadCount" :offset="[-2, 2]" :overflow-count="99">
        <button
          aria-label="消息中心"
          class="ws-header__bell"
          type="button"
          @click="goNoticeCenter"
        >
          <VbenIcon class="ws-header__bell-icon" icon="lucide:bell" />
        </button>
      </Badge>
    </div>
  </div>
</template>

<style scoped>
.ws-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  overflow: hidden;
  background:
    linear-gradient(
      120deg,
      hsl(var(--primary) / 0.1),
      hsl(var(--primary) / 0.03) 45%,
      transparent 70%
    ),
    hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: 12px;
}

/* 装饰光斑：低透明度 + 大模糊，暗色主题下自然减弱 */
.ws-header__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}

.ws-header__orb--1 {
  top: -60px;
  right: 10%;
  width: 180px;
  height: 180px;
  background: hsl(var(--primary) / 0.18);
}

.ws-header__orb--2 {
  right: -40px;
  bottom: -80px;
  width: 160px;
  height: 160px;
  background: hsl(var(--primary) / 0.1);
}

.ws-header__left {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

/* 头像/姓名整块可点击进入个人中心：hover 给出轻微反馈但不破坏问候头质感 */
.ws-header__left--clickable {
  padding: 4px 10px 4px 4px;
  margin: -4px -10px -4px -4px;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

.ws-header__left--clickable:hover {
  background: hsl(var(--primary) / 0.08);
}

.ws-header__left--clickable:hover .ws-header__title {
  color: hsl(var(--primary));
}

/* 头像光环：primary 低透明双环 */
.ws-header__avatar-ring {
  display: flex;
  padding: 3px;
  background: hsl(var(--card));
  border-radius: 50%;
  box-shadow:
    0 0 0 2px hsl(var(--primary) / 0.25),
    0 4px 12px hsl(var(--primary) / 0.12);
  flex-shrink: 0;
}

.ws-header__text {
  min-width: 0;
}

.ws-header__title {
  overflow: hidden;
  font-size: 16px;
  font-weight: 650;
  color: hsl(var(--foreground));
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-header__role {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  color: hsl(var(--primary));
  vertical-align: 2px;
  background: hsl(var(--primary) / 0.1);
  border: 1px solid hsl(var(--primary) / 0.2);
  border-radius: 999px;
}

.ws-header__date {
  margin-top: 3px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.ws-header__right {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 铃铛按钮：圆形玻璃感容器 */
.ws-header__bell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  cursor: pointer;
  background: hsl(var(--muted) / 0.4);
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: 50%;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ws-header__bell:hover {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary) / 0.3);
  transform: translateY(-1px);
}

.ws-header__bell-icon {
  width: 17px;
  height: 17px;
  color: hsl(var(--foreground) / 0.75);
}

.ws-header__bell:hover .ws-header__bell-icon {
  color: hsl(var(--primary));
}

@media (prefers-reduced-motion: reduce) {
  .ws-header__bell {
    transition: none;
  }

  .ws-header__bell:hover {
    transform: none;
  }
}
</style>
