<template>
  <div class="auth-manage-page">
    <!-- 顶部导航 -->
    <header class="page-header">
      <button class="back-btn" @click="goBack">‹</button>
      <h1 class="page-title">授权管理</h1>
      <button class="add-btn" @click="addAuthorization">+</button>
    </header>

    <!-- 授权列表 -->
    <section class="auth-list" v-if="authList.length > 0">
      <div class="auth-card" v-for="auth in authList" :key="auth.id">
        <div class="auth-icon" :class="auth.targetType">
          {{ getAuthIcon(auth.targetType) }}
        </div>
        <div class="auth-info">
          <h3 class="auth-name">{{ auth.targetName }}</h3>
          <p class="auth-type">{{ getAuthTypeText(auth.targetType) }}</p>
          <div class="auth-permissions">
            <span class="permission-tag" v-for="perm in auth.permissions" :key="perm">
              {{ getPermissionText(perm) }}
            </span>
          </div>
        </div>
        <div class="auth-actions">
          <span class="auth-status" :class="auth.status">
            {{ auth.status === 'active' ? '已授权' : '已撤销' }}
          </span>
          <button class="auth-toggle-btn" @click="toggleAuth(auth)">
            {{ auth.status === 'active' ? '撤销' : '授权' }}
          </button>
        </div>
      </div>
    </section>

    <!-- 空状态 -->
    <section class="empty-state" v-else>
      <div class="empty-icon">🔐</div>
      <h3 class="empty-title">暂无授权</h3>
      <p class="empty-desc">授权其他用户或应用访问你的数字分身</p>
      <button class="empty-btn" @click="addAuthorization">添加授权</button>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAvatarStore } from '@/store/avatar'
import { getAuthorizationList, updateAuthorization } from '@/api'
import { pickAvatarId, unwrapListData } from '@/utils/avatar-page-data.js'

const router = useRouter()
const avatarStore = useAvatarStore()

// 授权列表
const authList = ref<Array<{
  id: string
  targetType: 'user' | 'organization' | 'application'
  targetName: string
  permissions: string[]
  status: 'active' | 'inactive'
}>>([])

// 从后端加载授权列表
const loadAuth = async () => {
  try {
    if (!avatarStore.avatars.length) {
      await avatarStore.loadAvatars()
    }
    const avatarId = pickAvatarId(avatarStore.currentAvatarId, avatarStore.avatars)
    if (!avatarId) {
      authList.value = []
      return
    }
    const res: any = await getAuthorizationList(avatarId)
    authList.value = unwrapListData(res)
  } catch (e) {
    console.error('加载授权失败', e)
  }
}

// 获取授权图标
const getAuthIcon = (type: string) => {
  const map: Record<string, string> = {
    'user': '👤',
    'organization': '🏢',
    'application': '📱'
  }
  return map[type] || '🔑'
}

// 获取授权类型文本
const getAuthTypeText = (type: string) => {
  const map: Record<string, string> = {
    'user': '用户',
    'organization': '组织',
    'application': '应用'
  }
  return map[type] || type
}

// 获取权限文本
const getPermissionText = (perm: string) => {
  const map: Record<string, string> = {
    'read': '读取',
    'write': '写入',
    'reply': '回复',
    'edit': '编辑'
  }
  return map[perm] || perm
}

// 切换授权状态（写入后端）
const toggleAuth = async (auth: any) => {
  const newStatus = auth.status === 'active' ? 'inactive' : 'active'
  try {
    const avatarId = pickAvatarId(avatarStore.currentAvatarId, avatarStore.avatars)
    if (!avatarId) return
    const res: any = await updateAuthorization(avatarId, {
      id: auth.id,
      status: newStatus
    })
    authList.value = unwrapListData(res)
  } catch (e) {
    alert('操作失败，请重试')
  }
}

// 添加授权
const addAuthorization = () => {
  alert('添加授权功能开发中...')
}

// 返回
const goBack = () => {
  router.back()
}

onMounted(() => {
  loadAuth()
})
</script>

<style scoped>
.auth-manage-page {
  min-height: 100vh;
  background: #F8F9FA;
  padding-bottom: 80px;
}

/* 顶部导航 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #EDEEF1;
}

.back-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  color: #18191C;
}

.page-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: #18191C;
}

.add-btn {
  background: #F97316;
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 授权列表 */
.auth-list {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.auth-icon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #FFF0E6;
  flex-shrink: 0;
}

.auth-info {
  flex: 1;
  min-width: 0;
}

.auth-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #18191C;
}

.auth-type {
  font-size: 12px;
  color: #9398AE;
  margin: 0 0 8px;
}

.auth-permissions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.permission-tag {
  padding: 4px 8px;
  background: #F3F4F6;
  border-radius: 6px;
  font-size: 11px;
  color: #6B7280;
}

.auth-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.auth-status {
  font-size: 12px;
  font-weight: 500;
}

.auth-status.active {
  color: #22C55E;
}

.auth-status.inactive {
  color: #9398AE;
}

.auth-toggle-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: #F97316;
  color: white;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.empty-title {
  font-size: 18px;
  font-weight: 600;
  color: #18191C;
  margin: 0 0 10px;
}

.empty-desc {
  font-size: 14px;
  color: #9398AE;
  margin: 0 0 24px;
  text-align: center;
}

.empty-btn {
  padding: 12px 32px;
  background: #F97316;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
</style>
