<template>
  <view class="page mine-page">
    <view class="profile panel">
      <view class="profile__avatar">{{ avatarText }}</view>
      <view class="profile__body">
        <text class="profile__name">{{ auth.user?.displayName || auth.user?.username || "创作者" }}</text>
        <text class="profile__email">{{ auth.user?.email || "未登录" }}</text>
      </view>
    </view>

    <view class="setting panel">
      <view class="setting__row">
        <text>后端地址</text>
        <text>{{ API_BASE_URL }}</text>
      </view>
      <view class="setting__row">
        <text>当前端</text>
        <text>微信小程序 / H5</text>
      </view>
    </view>

    <button v-if="auth.isLoggedIn" class="secondary-button logout" @tap="auth.logout">退出登录</button>
    <button v-else class="primary-button logout" @tap="goLogin">去登录</button>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { useAuthStore } from "@/stores/auth";
import { API_BASE_URL } from "@/utils/constants";

const auth = useAuthStore();

const avatarText = computed(() => {
  const name = auth.user?.displayName || auth.user?.username || auth.user?.email || "AI";
  return name.slice(0, 2).toUpperCase();
});

onShow(() => {
  auth.hydrate();
});

function goLogin() {
  uni.reLaunch({ url: "/pages/login/index" });
}
</script>

<style scoped lang="scss">
.profile {
  display: flex;
  align-items: center;
  gap: 22rpx;
  padding: 30rpx;
  margin-top: 10rpx;
}

.profile__avatar {
  width: 108rpx;
  height: 108rpx;
  border-radius: 30rpx;
  background: linear-gradient(135deg, #5b5cf6, #1ea7ff);
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile__body {
  min-width: 0;
  flex: 1;
}

.profile__name {
  display: block;
  color: #101828;
  font-size: 32rpx;
  font-weight: 860;
}

.profile__email {
  display: block;
  margin-top: 8rpx;
  color: #667085;
  font-size: 25rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setting {
  margin-top: 24rpx;
  padding: 8rpx 28rpx;
}

.setting__row {
  display: flex;
  justify-content: space-between;
  gap: 24rpx;
  padding: 26rpx 0;
  border-bottom: 1rpx solid #eef1f6;
  color: #475467;
  font-size: 26rpx;
}

.setting__row:last-child {
  border-bottom: 0;
}

.setting__row text:last-child {
  min-width: 0;
  flex: 1;
  color: #101828;
  text-align: right;
  word-break: break-all;
}

.logout {
  margin-top: 28rpx;
}
</style>
