<!-- 头像 -->
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import Popover from '@/components/Popover/index.vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { useGuideTour } from '@/hooks/useGuideTour';
import { useUserStore } from '@/stores';
import { useSessionStore } from '@/stores/modules/session';
import { getUserProfilePicture, isUserVip } from '@/utils/user';

const router = useRouter();
const userStore = useUserStore();
const sessionStore = useSessionStore();
const { startHeaderTour } = useGuideTour();

/* 弹出面板 开始 */
const popoverStyle = ref({
  width: '200px',
  padding: '4px',
  height: 'fit-content',
});
const popoverRef = ref();

// 弹出面板内容
const popoverList = ref([
  {
    key: '1',
    title: '用户信息',
    icon: 'settings-4-fill',
  },
  // 待定
  // {
  //   key: '6',
  //   title: '新手引导',
  //   icon: 'dashboard-fill',
  // },
  {
    key: '4',
    title: '退出登录',
    icon: 'logout-box-r-line',
  },
]);

// 开始引导教程
function handleStartTutorial() {
  startHeaderTour();
}

// 点击
function handleClick(item: any) {
  switch (item.key) {
    case '1':
      router.push('/console/user');
      break;
    case '6':
      handleStartTutorial();
      break;
    case '4':
      popoverRef.value?.hide?.();
      ElMessageBox.confirm('退出登录不会丢失任何数据，你仍可以登录此账号。', '确认退出登录？', {
        confirmButtonText: '确认退出',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'el-button--danger',
        cancelButtonClass: 'el-button--info',
        roundButton: true,
        autofocus: false,
      })
        .then(async () => {
          // 在这里执行退出方法
          await userStore.logout();
          // 清空回话列表并回到默认页
          await sessionStore.requestSessionList(1, true);
          await sessionStore.createSessionBtn();
          ElMessage({
            type: 'success',
            message: '退出成功',
          });
        })
        .catch(() => {
          // 取消退出，不执行任何操作
        });
      break;
    default:
      break;
  }
}

function openVipGuide() {
  ElMessageBox.confirm(
    `
    <div class="text-center leading-relaxed">
      <h3 class="text-lg font-bold mb-3">${isUserVip() ? 'YiXinAI-VIP 会员' : '成为 YiXinAI-VIP'}</h3>
      <p class="mb-2">
        ${
          isUserVip()
            ? '您已是尊贵会员，享受全部 AI 模型与专属服务。感谢支持！'
            : '解锁所有 AI 模型，无限加速，专属客服，尽享尊贵体验。'
        }
      </p>
      ${
        isUserVip()
          ? '<p class="text-sm text-gray-500">您可随时访问产品页面查看更多特权内容。</p>'
          : '<p class="text-sm text-gray-500">点击下方按钮，立即升级为 VIP 会员！</p>'
      }
    </div>
    `,
    isUserVip() ? '会员状态' : '会员尊享',
    {
      confirmButtonText: '前往产品页面',
      cancelButtonText: '关闭',
      dangerouslyUseHTMLString: true,
      type: 'info',
      center: true,
      roundButton: true,
    },
  )
    .then(() => {
      router.push({
        name: 'products', // 使用命名路由
        query: { from: isUserVip() ? 'vip' : 'user' }, // 可选：添加来源标识
      });
    })
    .catch(() => {
      // 点击右上角关闭或"关闭"按钮，不执行任何操作
    });
}
</script>

<template>
  <div class="flex items-center gap-2">
    <!-- 用户信息区域 -->
    <div class="user-info-display cursor-pointer flex flex-col text-right mr-2 leading-tight">
      <div class="text-sm font-semibold text-gray-800">
        {{ userStore.userInfo?.user.nick ?? '未登录用户' }}
      </div>

      <!-- 角色展示 -->
      <div>
        <span
          v-if="isUserVip()"
          class="inline-block px-2 py-0.5 text-xs text-yellow-700 bg-yellow-100 rounded-full font-semibold"
        >
          YiXinAI-VIP
        </span>

        <span
          v-else
          class="inline-block px-2 py-0.5 text-xs text-gray-600 bg-gray-100 rounded-full cursor-pointer hover:bg-yellow-50 hover:text-yellow-700 transition"
          @click="openVipGuide"
        >
          普通用户
        </span>
      </div>
    </div>

    <!-- 头像区域 -->
    <div class="avatar-container">
      <Popover
        ref="popoverRef"
        placement="bottom-end"
        trigger="clickTarget"
        :trigger-style="{ cursor: 'pointer' }"
        popover-class="popover-content"
        :popover-style="popoverStyle"
      >
        <template #trigger>
          <el-avatar :src="getUserProfilePicture()" :size="28" fit="fit" shape="circle" />
        </template>

        <div class="popover-content-box shadow-lg popover-box-item">
          <!-- 用户信息 -->
          <div class="user-info-box flex items-center gap-8px p-8px rounded-lg mb-2">
            <el-avatar :src="getUserProfilePicture()" :size="32" fit="fit" shape="circle" />
            <div class="flex flex-col text-sm">
              <div class="font-semibold text-gray-800">
                {{ userStore.userInfo?.user.nick ?? '未登录用户' }}
              </div>
              <div class="text-xs text-gray-500">
                <span
                  v-if="isUserVip()"
                  class="inline-block px-2 py-0.5 text-xs text-yellow-700 bg-yellow-100 rounded-full font-semibold"
                >
                  YiXinAI-VIP
                </span>

                <span
                  v-else
                  class="inline-block px-2 py-0.5 text-xs text-gray-600 bg-gray-100 rounded-full cursor-pointer hover:bg-yellow-50 hover:text-yellow-700 transition"
                  @click="openVipGuide"
                >
                  普通用户
                </span>
              </div>
            </div>
          </div>
          <div class="divder h-1px bg-gray-200 my-4px" />

          <div v-for="item in popoverList" :key="item.key" class="popover-content-box-items h-full">
            <div
              class="popover-content-box-item flex items-center h-full gap-8px p-8px pl-10px pr-12px rounded-lg hover:cursor-pointer hover:bg-[rgba(0,0,0,.04)]"
              @click="handleClick(item)"
            >
              <SvgIcon :name="item.icon!" size="16" class-name="flex-none" />
              <div class="popover-content-box-item-text font-size-14px text-overflow max-h-120px">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </Popover>
    </div>
  </div>
</template>

<style scoped lang="scss">
.popover-content{
  width: 520px;
  height: 520px;
}
.popover-content-box {
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
}
</style>
