<!-- 用户账户入口，负责资料入口展示和退出登录操作。 -->
<script setup lang="ts">
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import { LogOut, UserRound } from "@/icons";
import { useRouter } from "vue-router";
import { useAuthStore } from "@/stores/auth";

defineProps<{ active?: boolean }>();
const emit = defineEmits<{ navigate: [] }>();
const auth = useAuthStore();
const router = useRouter();
const loggingOut = ref(false);

/** 确认用户主动退出后注销当前会话，取消时保持登录状态。 */
async function logout() {
  if (loggingOut.value) return;
  try {
    await ElMessageBox.confirm("退出后需要重新登录，确定退出当前账号吗？", "退出登录", {
      type: "warning",
      confirmButtonText: "退出登录",
      cancelButtonText: "取消",
    });
  } catch (error) {
    if (error === "cancel" || error === "close") return;
    throw error;
  }
  loggingOut.value = true;
  try {
    await auth.logout();
    await router.replace("/login");
  } finally {
    loggingOut.value = false;
  }
}
</script>

<template>
  <div
    class="web-user-entry"
    :class="{ active }"
  >
    <button
      type="button"
      class="web-user-entry__profile"
      @click="emit('navigate')"
    >
      <span class="web-user-entry__avatar">
        <img
          v-if="auth.profile?.avatar_url"
          :src="auth.profile.avatar_url"
          alt=""
        />
        <UserRound
          v-else
          :size="19"
        />
      </span>
      <span class="web-user-entry__copy">
        <strong>{{ auth.profile?.username || auth.profile?.account || "用户中心" }}</strong>
        <small>{{ Number(auth.account?.point_balance || 0).toFixed(2) }} 积分</small>
      </span>
    </button>
    <button
      type="button"
      class="web-user-entry__logout"
      title="退出登录"
      :disabled="loggingOut"
      @click="logout"
    >
      <LogOut :size="18" />
    </button>
  </div>
</template>

<style scoped lang="scss">
.web-user-entry {
  padding: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--web-surface);
  border: 1px solid var(--web-line);
  border-radius: var(--radius-lg);
}
.web-user-entry.active {
  background: var(--web-brand-soft);
  border-color: transparent;
}
.web-user-entry__profile {
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--space-sm);
  color: var(--web-text);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.web-user-entry__avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--web-muted);
  background: var(--web-raised);
  border-radius: var(--radius-sm);
}
.web-user-entry__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.web-user-entry__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.web-user-entry__copy strong,
.web-user-entry__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.web-user-entry__copy strong {
  font-size: 13px;
}
.web-user-entry__copy small {
  margin-top: 2px;
  color: var(--web-muted);
  font-size: 11px;
}
.web-user-entry__logout {
  width: var(--control-height-md);
  height: var(--control-height-md);
  flex: 0 0 var(--control-height-md);
  display: grid;
  place-items: center;
  color: var(--web-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    color 0.18s,
    background-color 0.18s;
}
.web-user-entry__logout:hover:not(:disabled) {
  color: var(--web-danger);
  background: var(--web-hover);
}
</style>
