<template>
  <div class="member-management admin-theme">
    <AdminSidebar active="members" />

    <!-- 主内容区域 -->
    <main class="main-content">
      <AdminHeader :title="$t('nav.memberManagement')" />

      <!-- 会员列表内容 -->
      <section class="member-content">
        <div class="content-header">
          <h2>{{ $t('members.title') }}</h2>
          <div class="selection-info" v-if="selectedMembers.length > 0">
            {{ $t('orders.selected', { count: selectedMembers.length }) }}
          </div>
        </div>

        <div class="table-toolbar">
          <div class="toolbar-left">
            <a-select v-model:value="selectedLevel" :placeholder="$t('members.memberLevel')" size="small" @change="handleFilterChange">
              <a-select-option value="all">{{ $t('members.allLevels') }}</a-select-option>
              <a-select-option value="free">{{ $t('members.freeMember') }}</a-select-option>
              <a-select-option value="starter">{{ $t('members.starterMember') }}</a-select-option>
              <a-select-option value="standard">{{ $t('members.standardMember') }}</a-select-option>
              <a-select-option value="professional">{{ $t('members.professionalMember') }}</a-select-option>
            </a-select>
            <a-select v-model:value="selectedStatus" :placeholder="$t('members.userStatus')" size="small" @change="handleFilterChange" style="margin-left: 10px;">
              <a-select-option value="active">{{ $t('members.activeUsers') }}</a-select-option>
              <a-select-option value="banned">{{ $t('members.bannedUsers') }}</a-select-option>
              <a-select-option value="all">{{ $t('members.allUsers') }}</a-select-option>
            </a-select>
          </div>
          <div class="toolbar-right">
            <a-button type="danger" size="small" @click="deleteSelected" :disabled="selectedMembers.length === 0">
              <DeleteOutlined />
              {{ $t('common.delete') }}
            </a-button>
          </div>
        </div>

        <div class="table-container">
          <table class="member-table">
            <thead>
              <tr>
                <th class="checkbox-col">
                  <input type="checkbox" @change="toggleAllSelection" :checked="isAllSelected" />
                </th>
                <th>{{ $t('members.userId') }}</th>
                <th>{{ $t('members.username') }}</th>
                <th>{{ $t('members.role') }}</th>
                <th>{{ $t('members.level') }}</th>
                <th>{{ $t('members.status') }}</th>
                <th>{{ $t('members.points') }}</th>
                <th>{{ $t('members.expiryDate') }}</th>
                <th>{{ $t('members.operation') }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="member in memberList" :key="member.id" class="table-row">
                <td class="checkbox-col">
                  <input
                    type="checkbox"
                    :checked="selectedMembers.some(m => m.id === member.id)"
                    @change="toggleMemberSelection(member)" />
                </td>
                <td>{{ member.userId || member.id }}</td>
                <td>{{ member.username }}</td>
                <td>
                  <span class="role-tag" :class="getRoleClass(member.role)">
                    {{ getRoleLabel(member.role) }}
                  </span>
                </td>
                <td>
                  <span class="level-tag" :class="member.level === $t('members.professionalMember') ? 'professional' : 'standard'">
                    {{ member.level }}
                  </span>
                </td>
                <td>
                  <span class="status-tag" :class="member.isActive ? 'active' : 'banned'">
                    {{ member.isActive ? $t('members.active') : $t('members.banned') }}
                  </span>
                </td>
                <td>{{ member.points.toLocaleString() }}</td>
                <td>{{ member.expiryDate }}</td>
                <td>
                  <a type="primary" class="action-link" @click="editMember(member)">{{ $t('common.edit') }}</a>
                  <a 
                    v-if="isSuperAdmin && member.role !== 'ROLE_SUPER_ADMIN'"
                    :type="member.role === 'ROLE_ADMIN' ? 'info' : 'primary'" 
                    class="action-link" 
                    @click="toggleRole(member)">
                    {{ member.role === 'ROLE_ADMIN' ? $t('members.revokeAdmin') : $t('members.setAdmin') }}
                  </a>
                  <a 
                    :type="member.isActive ? 'warning' : 'success'" 
                    class="action-link" 
                    @click="toggleBan(member)">
                    {{ member.isActive ? $t('members.ban') : $t('members.unban') }}
                  </a>
                  <a type="danger" class="action-link" @click="deleteMember(member)">{{ $t('common.delete') }}</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <div class="pagination">
            <span class="page-arrow" @click="prevPage" :class="{ disabled: currentPage === 1 }"><LeftOutlined /></span>
            <button 
              v-for="page in visiblePages" 
              :key="page"
              class="page-btn"
              :class="{ active: page === currentPage }"
              @click="goToPage(page)">
              {{ page }}
            </button>
            <template v-if="totalPages > 7 && currentPage < totalPages - 2">
              <span class="page-ellipsis">...</span>
              <button 
                class="page-btn"
                :class="{ active: totalPages === currentPage }"
                @click="goToPage(totalPages)">
                {{ totalPages }}
              </button>
            </template>
            <span class="page-arrow" @click="nextPage" :class="{ disabled: currentPage === totalPages }"><RightOutlined /></span>
          </div>
        </div>
      </section>
    </main>

    <!-- 编辑会员对话框 -->
    <a-modal
      v-model:open="editDialogVisible"
      :title="$t('members.editMember')"
      width="500px"
      @cancel="handleCloseEditDialog">
      <a-form
        ref="editFormRef"
        :model="editForm"
        :rules="editRules"
        label-width="100px">
        <a-form-item :label="$t('members.userId')" prop="id">
          <a-input v-model:value="editForm.id" disabled />
        </a-form-item>
        <a-form-item :label="$t('members.username')" prop="username">
          <a-input v-model:value="editForm.username" :placeholder="$t('members.usernamePlaceholder')" />
        </a-form-item>
        <a-form-item v-if="isSuperAdmin && editForm.role !== 'ROLE_SUPER_ADMIN'" :label="$t('members.userRole')" prop="role">
          <a-select v-model:value="editForm.role" :placeholder="$t('members.selectRole')">
            <a-select-option value="ROLE_USER">{{ $t('members.normalUser') }}</a-select-option>
            <a-select-option value="ROLE_ADMIN">{{ $t('members.admin') }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('members.level')" prop="level">
          <a-select v-model:value="editForm.level" :placeholder="$t('members.levelPlaceholder')">
            <a-select-option 
              v-for="level in membershipLevels" 
              :key="level.id" 
              :value="level.displayName" 
            >{{ level.displayName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('members.points')" prop="points">
          <a-input-number 
            v-model="editForm.points" 
            :min="0" 
            :max="99999"
            :placeholder="$t('members.pointsPlaceholder')" />
        </a-form-item>
        <a-form-item :label="$t('members.expiryDate')" prop="expiryDate">
          <a-date-picker
            v-model:value="editForm.expiryDate"
            type="date"
            :placeholder="$t('members.expiryPlaceholder')"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" />
        </a-form-item>
      </a-form>
      <template #footer>
        <span class="dialog-footer">
          <a-button @click="editDialogVisible = false">{{ $t('common.cancel') }}</a-button>
          <a-button type="primary" @click="saveEdit" :loading="saveLoading">{{ $t('common.save') }}</a-button>
        </span>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { message, Modal } from 'ant-design-vue'
import {
  LeftOutlined,
  RightOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue'
import * as memberAPI from '@/api/members'
import AdminSidebar from '@/components/AdminSidebar.vue'
import AdminHeader from '@/components/AdminHeader.vue'

const { t } = useI18n()

// 数据状态
const selectedMembers = ref([])
const selectedLevel = ref('all')
const selectedStatus = ref('active')  // 默认显示活跃用户
const currentPage = ref(1)
const pageSize = ref(10)
const totalMembers = ref(50)

// 当前用户角色（从 localStorage 或 API 获取）
const currentUserRole = ref('')
const isSuperAdmin = computed(() => currentUserRole.value === 'ROLE_SUPER_ADMIN')

// 编辑相关状态
const editDialogVisible = ref(false)
const editFormRef = ref()
const saveLoading = ref(false)
const editForm = ref({
  id: '',
  username: '',
  role: '',
  level: '',
  points: 0,
  expiryDate: ''
})

// 表单验证规则
const editRules = {
  username: [
    { required: true, message: t('members.usernamePlaceholder'), trigger: 'blur' },
    { min: 2, max: 20, message: t('register.usernameLength'), trigger: 'blur' }
  ],
  level: [
    { required: true, message: t('members.levelPlaceholder'), trigger: 'change' }
  ],
  points: [
    { required: true, message: t('members.pointsPlaceholder'), trigger: 'blur' },
    { type: 'number', min: 0, message: t('systemSettings.enterValidNumber'), trigger: 'blur' }
  ],
  expiryDate: [
    { required: true, message: t('members.expiryPlaceholder'), trigger: 'change' }
  ]
}

// 会员数据
const memberList = ref([])

// 会员等级列表（从API动态获取）
const membershipLevels = ref([])

// 表格操作
const isAllSelected = computed(() => {
  return memberList.value.length > 0 && selectedMembers.value.length === memberList.value.length
})

const totalPages = computed(() => {
  return Math.ceil(totalMembers.value / pageSize.value)
})

const visiblePages = computed(() => {
  const pages = []
  const total = totalPages.value
  const current = currentPage.value
  
  if (total <= 7) {
    // 如果总页数少于等于7，显示所有页码
    for (let i = 1; i <= total; i++) {
      pages.push(i)
    }
  } else {
    // 如果总页数大于7，显示部分页码
    if (current <= 3) {
      // 当前页在前3页
      for (let i = 1; i <= 5; i++) {
        pages.push(i)
      }
    } else if (current >= total - 2) {
      // 当前页在后3页
      for (let i = total - 4; i <= total; i++) {
        pages.push(i)
      }
    } else {
      // 当前页在中间
      for (let i = current - 2; i <= current + 2; i++) {
        pages.push(i)
      }
    }
  }
  return pages
})

const toggleAllSelection = () => {
  if (isAllSelected.value) {
    selectedMembers.value = []
  } else {
    selectedMembers.value = [...memberList.value]
  }
}

const toggleMemberSelection = (member) => {
  const index = selectedMembers.value.findIndex(m => m.id === member.id)
  if (index > -1) {
    selectedMembers.value.splice(index, 1)
  } else {
    selectedMembers.value.push(member)
  }
}

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    loadMembers()
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    loadMembers()
  }
}

const goToPage = (page) => {
  currentPage.value = page
  loadMembers()
}

const editMember = (member) => {
  // 填充编辑表单
  editForm.value = {
    id: member.id,
    username: member.username,
    role: member.role,
    // 这里必须用后端的 displayName，否则 <a-select> 的 value 可能无法命中选项
    level: member.levelDisplayName || member.level,
    points: member.points,
    expiryDate: member.expiryDate
  }
  editDialogVisible.value = true
}

const handleCloseEditDialog = () => {
  editDialogVisible.value = false
  // 重置表单
  editFormRef.value?.resetFields()
}

const saveEdit = async () => {
  if (!editFormRef.value) return
  
  try {
    // 验证表单
    await editFormRef.value.validate()
    
    saveLoading.value = true
    
    // 调用API更新会员信息（超级管理员可以修改角色）
    const updateData = {
      username: editForm.value.username,
      level: editForm.value.level,
      points: editForm.value.points,
      expiryDate: editForm.value.expiryDate
    }
    
    // 只有超级管理员才能修改角色，且不能修改超级管理员的角色
    if (isSuperAdmin.value && editForm.value.role && editForm.value.role !== 'ROLE_SUPER_ADMIN') {
      updateData.role = editForm.value.role
    }
    
    const response = await memberAPI.updateMember(editForm.value.id, updateData)
    
    if (response.data && response.data.success) {
      message.success(t('common.memberUpdateSuccess'))
      editDialogVisible.value = false
      // 重新加载列表以确保数据一致
      await loadMembers()
    } else {
      message.error(response.data?.message || t('common.updateFailed'))
    }
    
  } catch (error) {
    console.error('保存失败:', error)
    message.error(t('common.saveFailed'))
  } finally {
    saveLoading.value = false
  }
}

const deleteMember = async (member) => {
  console.log('deleteMember 函数被调用, member:', member)
  try {
    await new Promise((resolve, reject) => {
      Modal.confirm({
        title: t('common.confirmDeleteTitle'),
        content: t('members.confirmDeleteMember', { username: member.username }),
        okText: t('common.confirm'),
        cancelText: t('common.cancel'),
        onOk() { resolve() },
        onCancel() { reject('cancel') }
      })
    })
    
    // 调用API删除会员
    console.log('准备发送DELETE请求, id:', member.id)
    const response = await memberAPI.deleteMember(member.id)
    console.log('DELETE请求响应:', response)
    
    if (response.data && response.data.success) {
      message.success(t('common.deleteSuccess'))
      // 重新加载列表
      await loadMembers()
    } else {
      console.log('删除失败, response.data:', response.data)
      message.error(response.data?.message || t('common.deleteFailed'))
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      const errorMsg = error.response?.data?.message || t('common.deleteFailed')
      message.error(errorMsg)
    }
  }
}

const deleteSelected = async () => {
  if (selectedMembers.value.length === 0) {
    message.warning(t('common.pleaseSelectMembers'))
    return
  }
  
  try {
    await new Promise((resolve, reject) => {
      Modal.confirm({
        title: t('common.confirmBatchDelete'),
        content: t('members.confirmBatchDeleteMembers', { count: selectedMembers.value.length }),
        okText: t('common.confirm'),
        cancelText: t('common.cancel'),
        onOk() { resolve() },
        onCancel() { reject('cancel') }
      })
    })
    
    const ids = selectedMembers.value.map(m => m.id)
    
    // 调用API批量删除
    const response = await memberAPI.deleteMembers(ids)
    
    if (response.data && response.data.success) {
      message.success(response.data.message || t('members.batchDeleteSuccess'))
      selectedMembers.value = []
      // 重新加载列表
      await loadMembers()
    } else {
      message.error(response.data?.message || t('members.batchDeleteFailed'))
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      const errorMsg = error.response?.data?.message || t('members.batchDeleteFailed')
      message.error(errorMsg)
    }
  }
}

// 监听筛选条件变化
const handleFilterChange = () => {
  currentPage.value = 1
  loadMembers()
}

// 封禁/解封会员
const toggleBan = async (member) => {
  const action = member.isActive ? t('members.ban') : t('members.unban')
  try {
    await new Promise((resolve, reject) => {
      Modal.confirm({
        title: t('members.confirmAction', { action: action }),
        content: t('members.confirmBanAction', { action: action, username: member.username }),
        okText: t('common.confirm'),
        cancelText: t('common.cancel'),
        onOk() { resolve() },
        onCancel() { reject('cancel') }
      })
    })
    
    const response = await memberAPI.toggleBanMember(member.id, !member.isActive)
    
    if (response.data && response.data.success) {
      message.success(response.data.message || t('members.actionSuccess', { action: action }))
      await loadMembers()
    } else {
      message.error(response.data?.message || t('members.actionFailed', { action: action }))
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error(`${action}失败:`, error)
      const errorMsg = error.response?.data?.message || t('members.actionFailed', { action: action })
      message.error(errorMsg)
    }
  }
}

// 加载会员数据
const loadMembers = async () => {
  try {
    const response = await memberAPI.getMembers({
      page: currentPage.value,
      pageSize: pageSize.value,
      level: selectedLevel.value === 'all' ? '' : selectedLevel.value,
      status: selectedStatus.value
    })
    
    console.log('获取会员列表响应:', response)
    
    // 处理API响应数据 - axios会将数据包装在response.data中
    const data = response?.data || response || {}
    console.log('解析后的数据:', data)
    
    if (data && data.list) {
      memberList.value = data.list.map(member => ({
        id: member.id,
        username: member.username,
        role: member.role,
        // 展示用（支持国际化）
        level: getMembershipLevel(member.membership),
        // 提交给后端用：保持与 MembershipLevel.displayName 一致，避免编辑弹窗下拉无法回显
        levelDisplayName: member.membership?.display_name || member.membership?.displayName || member.membership?.display_name,
        isActive: member.isActive,
        points: member.points || 0,
        expiryDate: getMembershipExpiry(member.membership)
      }))
      totalMembers.value = data.total || 0
      console.log('设置后的会员列表:', memberList.value)
    } else {
      console.error('API返回数据格式错误:', data)
      message.error(t('common.updateFailed'))
    }
  } catch (error) {
    console.error('加载会员数据失败:', error)
    message.error(t('common.loadTaskListFailed') + ': ' + (error.message || ''))
  }
}

// 辅助函数：获取会员等级显示名称（支持国际化）
const getMembershipLevel = (membership) => {
  if (!membership) return t('members.standardMember')
  
  // 🔥 优先使用后端返回的 display_name（后端已根据充值记录动态调整）
  const displayName = membership.display_name
  if (displayName) {
    // 直接匹配后端返回的具体名称
    if (displayName === '入门会员') {
      return t('members.starterMember') || '入门会员'
    }
    if (displayName === '免费会员') {
      return t('members.freeMember')
    }
    
    // 模糊匹配（兼容老数据）
    if (displayName.includes('入门') || displayName.toLowerCase().includes('starter')) {
      return t('members.starterMember') || '入门级会员'
    }
    if (displayName.includes('免费') || displayName.toLowerCase().includes('free')) {
      return t('members.freeMember')
    }
    if (displayName.includes('标准') || displayName.toLowerCase().includes('standard')) {
      return t('members.standardMember')
    }
    if (displayName.includes('专业') || displayName.toLowerCase().includes('professional')) {
      return t('members.professionalMember')
    }
  }
  
  // 根据会员等级name进行翻译（fallback）
  const levelName = membership.name || membership.level_name
  if (levelName) {
    const levelMap = {
      'free': t('members.freeMember'),
      'starter': t('members.starterMember'),
      'standard': t('members.standardMember'),
      'professional': t('members.professionalMember')
    }
    if (levelMap[levelName]) {
      return levelMap[levelName]
    }
  }
  
  return membership.display_name || t('members.standardMember')
}

// 辅助函数：获取会员到期时间
const getMembershipExpiry = (membership) => {
  if (!membership) return '2025-12-31'
  return membership.end_date ? membership.end_date.split(' ')[0] : '2025-12-31'
}

// 辅助函数：获取角色显示名称
const getRoleLabel = (role) => {
  const roleMap = {
    'ROLE_SUPER_ADMIN': t('members.superAdmin'),
    'ROLE_ADMIN': t('members.admin'),
    'ROLE_USER': t('members.normalUser')
  }
  return roleMap[role] || t('members.normalUser')
}

// 辅助函数：获取角色样式类
const getRoleClass = (role) => {
  const classMap = {
    'ROLE_SUPER_ADMIN': 'super-admin',
    'ROLE_ADMIN': 'admin',
    'ROLE_USER': 'user'
  }
  return classMap[role] || 'user'
}

// 设置/取消管理员
const toggleRole = async (member) => {
  const newRole = member.role === 'ROLE_ADMIN' ? 'ROLE_USER' : 'ROLE_ADMIN'
  const action = newRole === 'ROLE_ADMIN' ? t('members.setAdmin') : t('members.revokeAdmin')
  
  try {
    await new Promise((resolve, reject) => {
      Modal.confirm({
        title: t('members.confirmAction', { action: action }),
        content: t('members.confirmRoleChange', { username: member.username, action: action }),
        okText: t('common.confirm'),
        cancelText: t('common.cancel'),
        onOk() { resolve() },
        onCancel() { reject('cancel') }
      })
    })
    
    const response = await memberAPI.setUserRole(member.id, newRole)
    
    if (response.data && response.data.success) {
      message.success(response.data.message || t('members.actionSuccess', { action: action }))
      await loadMembers()
    } else {
      message.error(response.data?.message || t('members.actionFailed', { action: action }))
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error(`${action}失败:`, error)
      const errorMsg = error.response?.data?.message || t('members.actionFailed', { action: action })
      message.error(errorMsg)
    }
  }
}

// 获取当前用户角色
const fetchCurrentUserRole = () => {
  try {
    // 登录时保存的是 'user' 而不是 'userInfo'
    const userStr = localStorage.getItem('user')
    if (userStr) {
      const user = JSON.parse(userStr)
      currentUserRole.value = user.role || 'ROLE_USER'
      console.log('当前用户角色:', currentUserRole.value)
    }
  } catch (error) {
    console.error('获取用户角色失败:', error)
    currentUserRole.value = 'ROLE_USER'
  }
}

// 加载会员等级列表
const loadMembershipLevels = async () => {
  try {
    const response = await memberAPI.getMembershipLevels()
    if (response.data && response.data.success) {
      membershipLevels.value = response.data.data || []
    }
  } catch (error) {
    console.error('加载会员等级失败:', error)
  }
}

onMounted(() => {
  fetchCurrentUserRole()
  loadMembershipLevels()
  loadMembers()
})

</script>

<style scoped>
.member-management {
  display: flex;
  min-height: 100vh;
  background: var(--bg-base);
  font-family: var(--font-sans);
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
}

/* 会员内容区域 */
.member-content {
  padding: var(--space-6);
  flex: 1;
  background: var(--bg-surface);
  margin: var(--space-6);
  border-radius: var(--radius-md);
}

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.content-header h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.selection-info {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  background: var(--bg-glass);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 确保下拉框选中值可见 */
.toolbar-left :deep(.ant-select) {
  min-width: 120px;
}

.toolbar-left :deep(.ant-select-selector) {
  color: var(--text-primary) !important;
  font-size: var(--text-sm);
  min-height: 32px;
}

.toolbar-left :deep(.ant-select-selector *) {
  color: var(--text-primary) !important;
}

.toolbar-left :deep(.ant-select-selector) {
  display: flex !important;
  align-items: center !important;
}

.toolbar-left :deep(.ant-select-selection-item) {
  color: var(--text-primary) !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.toolbar-left :deep(.ant-select-selection-placeholder) {
  color: var(--text-disabled) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.table-container {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--space-6);
}

.member-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.member-table thead {
  background: var(--bg-elevated);
}

.member-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.member-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.table-row:hover {
  background: var(--bg-hover);
}

.checkbox-col {
  width: 50px;
  text-align: center;
}

.checkbox-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.level-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-inverse);
}

.level-tag.professional {
  background: var(--secondary-500);
  color: var(--text-inverse);
}

.level-tag.standard {
  background: var(--primary-500);
  color: var(--text-inverse);
}

.status-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.status-tag.active {
  background: var(--accent-500);
  color: var(--text-inverse);
}

.status-tag.banned {
  background: var(--error-500);
  color: var(--text-inverse);
}

.role-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.role-tag.super-admin {
  background: var(--error-600);
  color: var(--text-inverse);
}

.role-tag.admin {
  background: var(--warning-500);
  color: var(--text-inverse);
}

.role-tag.UserOutlined {
  background: var(--text-tertiary);
  color: var(--text-inverse);
}

.role-icon {
  margin-right: 4px;
}

.action-link {
  margin-right: var(--space-3);
  font-size: var(--text-sm);
  text-decoration: none;
}

.action-link:last-child {
  margin-right: 0;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-6);
}

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-arrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: var(--transition-all);
}

.page-arrow:hover:not(.disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.page-arrow.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: var(--transition-all);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.page-btn.active {
  background: var(--primary-500);
  color: var(--text-inverse);
  border-color: var(--primary-500);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-ellipsis {
  padding: 0 var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .member-management {
    flex-direction: column;
  }
  
  .member-content {
    padding: 16px;
  }
}
</style>
