<template>
  <div class="popover-container" v-show="visible">
    <!-- 顶部 用户头像、昵称、ID -->
    <div class="top-bar">
      <img v-if="user.avatarUrl && !avatarLoadFailed" :src="user.avatarUrl" :alt="user.username || '用户头像'" class="avatar" @error="avatarLoadFailed = true">
      <div v-else class="avatar-placeholder">{{ getAvatarText(user.username) }}</div>
      <div class="user-info-block">
        <div class="username">{{ user.username || '用户' }}</div>
        <div class="user-id">ID {{ user.id || '--' }}</div>
      </div>
    </div>
    <!-- 积分色块 -->
    <div class="score-box">
      <div class="score-left">
        <div class="score-row">
          <div class="score-label">积分</div>
          <div class="score-value">{{ user.points || 0 }}</div>
        </div>
        <div class="score-tip">用于AI任务使用消耗</div>
      </div>
      <button class="score-btn" @click="$emit('recharge')">充值</button>
    </div>
    <!-- 会员订阅横幅 -->
    <div class="subscription-bar">
      <div class="sub-text">
        <span>解锁会员权益，AI创作自由嗨！</span>
        <span>单价最低￥8.9</span>
      </div>
      <button class="sub-btn" @click="$emit('subscribe')">去订阅</button>
    </div>
    <!-- 固定四大操作区 -->
    <div class="op-bar">
      <div class="popover-action-item" @click="$emit('consume')">
        <span class="icon-box">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.33203 4.66667C1.33203 4.29847 1.63051 4 1.9987 4H13.9987C14.3669 4 14.6654 4.29847 14.6654 4.66667V13.3333C14.6654 13.7015 14.3669 14 13.9987 14H1.9987C1.63051 14 1.33203 13.7015 1.33203 13.3333V4.66667Z" fill="#A4A4A4" stroke="#A4A4A4" stroke-width="1.33333" stroke-linejoin="round"/>
            <path d="M6.33203 6.33325L7.9987 7.99992L9.66536 6.33325" stroke="#332E2D" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M6 8.33325H10" stroke="#332E2D" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M6 10.3333H10" stroke="#332E2D" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M8 8V11.3333" stroke="#332E2D" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M2.66797 2H13.3346" stroke="#A4A4A4" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
        <div class="action-text">消费记录</div>
      </div>
      <div class="popover-action-item" @click="$emit('invite')">
        <span class="icon-box">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.6654 14.6667V6.66675H2.33203V14.6667H13.6654Z" fill="#A4A4A4" stroke="#A4A4A4" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M8 13V8" stroke="#363332" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M13.6654 14.6667H2.33203" stroke="#A4A4A4" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M14.6654 4H1.33203V6.66667H14.6654V4Z" fill="#A4A4A4" stroke="#A4A4A4" stroke-width="1.33333" stroke-linejoin="round"/>
            <path d="M5.33203 1.33325L7.9987 3.99992L10.6654 1.33325" stroke="#A4A4A4" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
        <div class="action-text">邀请码</div>
      </div>
      <div class="popover-action-item" @click="$emit('logout')">
        <span class="icon-box">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.75736 1.20995C7.05597 1.12037 7.37139 1.10184 7.67843 1.15584C7.98547 1.20983 8.27564 1.33486 8.52577 1.52094C8.7759 1.70701 8.97907 1.94899 9.11906 2.22755C9.25905 2.5061 9.33198 2.81353 9.33203 3.12528V12.8746C9.33198 13.1864 9.25905 13.4938 9.11906 13.7724C8.97907 14.0509 8.7759 14.2929 8.52577 14.479C8.27564 14.665 7.98547 14.7901 7.67843 14.8441C7.37139 14.8981 7.05597 14.8795 6.75736 14.7899L2.75736 13.5899C2.34543 13.4664 1.9843 13.2133 1.72755 12.8683C1.4708 12.5233 1.3321 12.1047 1.33203 11.6746V4.32528C1.3321 3.89521 1.4708 3.47662 1.72755 3.13161C1.9843 2.78659 2.34543 2.53352 2.75736 2.40995L6.75736 1.20995ZM9.9987 2.66662C9.9987 2.4898 10.0689 2.32024 10.194 2.19521C10.319 2.07019 10.4886 1.99995 10.6654 1.99995H12.6654C13.1958 1.99995 13.7045 2.21066 14.0796 2.58574C14.4547 2.96081 14.6654 3.46952 14.6654 3.99995V4.66662C14.6654 4.84343 14.5951 5.013 14.4701 5.13802C14.3451 5.26304 14.1755 5.33328 13.9987 5.33328C13.8219 5.33328 13.6523 5.26304 13.5273 5.13802C13.4023 5.013 13.332 4.84343 13.332 4.66662V3.99995C13.332 3.82314 13.2618 3.65357 13.1368 3.52854C13.0117 3.40352 12.8422 3.33328 12.6654 3.33328H10.6654C10.4886 3.33328 10.319 3.26304 10.194 3.13802C10.0689 3.013 9.9987 2.84343 9.9987 2.66662ZM13.9987 10.6666C14.1755 10.6666 14.3451 10.7369 14.4701 10.8619C14.5951 10.9869 14.6654 11.1565 14.6654 11.3333V11.9999C14.6654 12.5304 14.4547 13.0391 14.0796 13.4142C13.7045 13.7892 13.1958 13.9999 12.6654 13.9999H10.6654C10.4886 13.9999 10.319 13.9297 10.194 13.8047C10.0689 13.6797 9.9987 13.5101 9.9987 13.3333C9.9987 13.1565 10.0689 12.9869 10.194 12.8619C10.319 12.7369 10.4886 12.6666 10.6654 12.6666H12.6654C12.8422 12.6666 13.0117 12.5964 13.1368 12.4714C13.2618 12.3463 13.332 12.1768 13.332 11.9999V11.3333C13.332 11.1565 13.4023 10.9869 13.5273 10.8619C13.6523 10.7369 13.8219 10.6666 13.9987 10.6666Z" fill="#A4A4A4"/>
            <path d="M5.52729 7.52864C5.65232 7.40361 5.82189 7.33337 5.9987 7.33337C6.17551 7.33337 6.34575 7.40361 6.47077 7.52864C6.59579 7.65366 6.66603 7.82323 6.66603 8.00004C6.66603 8.17685 6.59579 8.34642 6.47077 8.47145C6.34575 8.59647 6.17551 8.66671 5.9987 8.66671C5.82189 8.66671 5.65232 8.59647 5.52729 8.47145C5.40227 8.34642 5.33203 8.17685 5.33203 8.00004C5.33203 7.82323 5.40227 7.65366 5.52729 7.52864Z" fill="#323334"/>
            <path d="M10.668 7.99984H14.0013M14.0013 7.99984L12.668 6.6665M14.0013 7.99984L12.668 9.33317" stroke="#A4A4A4" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
        <div class="action-text">退出登录</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  user: { type: Object, default: () => ({}) },
  visible: Boolean
})
const emits = defineEmits(['recharge','subscribe','consume','invite','logout'])
const avatarLoadFailed = ref(false)
const getAvatarText = (name) => {
  if (!name) return '用'
  return name.charAt(0).toUpperCase()
}
</script>

<style scoped>
.popover-container {
  width: 315px;
  height: 301px;
  border-radius: 24px;
  background: linear-gradient(135deg,rgba(30, 233, 255, 0.15) 0%, rgba(16,38,96,0.65) 100%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .18);
  position: absolute;

  top: 60px;
  z-index: 9999;
  color: #fbfbfd;
  backdrop-filter: blur(22px);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
}
.top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px 0 20px;
  height: 58px;
}
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #c2ecf9;
  box-shadow:0 0 8px #1af9ff3b;
}
.avatar-placeholder {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;
}
.user-info-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.username {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-align: left;
}
.user-id {
  font-size: 11px;
  color: #d6ecfc;
  margin-top: 2px;
  line-height: 1;
}
.score-box {
  margin: 8px 14px 0 14px;
  height: 78px;
  border-radius: 16px;
  background: linear-gradient(95deg,#d6eeff 0%, #c0e2ff 70%,#81ceff 100%);
  display: flex; align-items: center;
  justify-content: space-between;
  position: relative;
  box-shadow:0 2px 16px #3fcce34d;
}
.score-left {
  display: flex;
  flex-direction: column;
  padding: 10px 0 10px 18px;
}
.score-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
}
.score-label {
  font-size: 16px;
  color: #1975E9;
  font-weight: 500;
}
.score-value {
  font-size: 34px;
  color: #1675e9;
  font-weight: bold;
  margin-top: 0;
}
.score-tip {
  font-size: 11px;
  color: #6ba1d7;
  margin-top: 3px;
}
.score-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 18px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  border-radius: 18px;
  border: none;
  background: linear-gradient(95deg,#2EC6FF 0%,#1877FF 100%);
  box-shadow:0 2px 6px #199cff34;
  cursor: pointer;
  outline: none;
}
.subscription-bar {
  width: 100%;
  height: 44px;
  margin: 7px 0 0 0;
  padding: 0 12px;
  display: flex; align-items: center;
  border-radius: 0;
  background: linear-gradient(91deg, rgba(55,154,200,0.76) 0%, rgba(47,109,137,0.85) 100%);
  color:#e5f6ff;
  font-size: 15px;
  justify-content: space-between;
}
.sub-text {
  color: #e2f1ff;
  font-size:15px;
  font-weight:400;
  line-height:1.18;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.sub-btn {
  background: #dbfbff;
  color: #0561a8;
  border:none;
  border-radius: 999px;
  padding: 5.5px 18px;
  font-size:17px;
  font-weight: 600;
  cursor: pointer;
  white-space:nowrap;
}
/* op-bar操作区，每项纵向，icon+文字上下排列 */
.op-bar {
  flex: 1 0 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: rgba(17,60,113,0.33);
  border-radius: 0 0 24px 24px;
  backdrop-filter: blur(13px);
  margin-top: 4px;
  padding: 0 0 6px 0;
}
.popover-action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0px;
  padding-bottom: 2px;
  color: #b5d3ea;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  user-select: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.15s;
}
.action-text {
  margin-top: 8px;
  font-size: 15px;
  font-weight: bold;
}
.icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.icon-box svg {
  display: block;
  width: 16px;
  height: 16px;
}
</style>
