<template>
  <div class="profile-page">
    <BackNav />
    <div class="profile-card" v-if="user">
      <div class="profile-header">
        <el-avatar :size="64" class="profile-avatar">{{ user.username?.charAt(0).toUpperCase() }}</el-avatar>
        <div class="profile-info">
          <h3>{{ user.username }}</h3>
          <p>{{ user.email }}</p>
          <el-tag :type="user.role === 'admin' ? 'danger' : user.role === 'supplier' ? 'warning' : 'info'" size="small">{{ roleText(user.role) }}</el-tag>
        </div>
      </div>
      <el-descriptions :column="2" border class="profile-desc">
        <el-descriptions-item label="购买资格">{{ user.purchase_credits }}</el-descriptions-item>
        <el-descriptions-item label="邀请码">{{ user.invite_code }}</el-descriptions-item>
      </el-descriptions>
      <div class="profile-actions">
        <el-button @click="$router.push('/addresses')">地址管理</el-button>
        <el-button @click="$router.push('/orders')">我的订单</el-button>
        <el-button v-if="user.role === 'admin'" type="primary" @click="$router.push('/admin')">管理后台</el-button>
        <el-button v-if="user.role === 'supplier'" type="primary" @click="$router.push('/supplier')">供应商后台</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useUserStore } from '../../store/user'
import BackNav from '../../components/BackNav.vue'

const userStore = useUserStore()
const user = computed(() => userStore.user)

const roleMap: Record<string, string> = {
  admin: '管理员',
  supplier: '供应商',
  user: '用户',
}
function roleText(r: string) { return roleMap[r] || r }

onMounted(() => userStore.fetchProfile())
</script>

<style scoped lang="scss">
.profile-page {
  padding: 0;
}

.profile-card {
  background: #2d2d44;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 24px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-avatar {
  background: linear-gradient(135deg, #4e6ef2, #7c5cfc);
  color: #fff;
  font-size: 24px;
  font-weight: 600;
}

.profile-info h3 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.profile-info p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.profile-desc {
  margin-bottom: 24px;
}

.profile-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>
