<template>
  <view class="admin-profile">
    <!-- 管理员信息头部 -->
    <view class="profile-header">
      <image :src="adminInfo.avatar_url || '/static/default-avatar.png'" class="admin-avatar" @click="editProfile" />
      <view class="admin-info">
        <text class="admin-name">{{ adminInfo.nickname || adminInfo.phone }}</text>
        <text class="admin-role">{{ getAdminRole() }}</text>
        <view class="admin-stats">
          <text class="stat-item">在线时长: {{ onlineHours }}h</text>
          <text class="stat-item">权限等级: {{ adminLevel }}</text>
        </view>
      </view>
      <view class="settings-icon" @click="goToSettings">⚙️</view>
    </view>

    <!-- 系统概览 -->
    <view class="system-overview">
      <view class="section-title">系统概览</view>
      <view class="overview-grid">
        <view class="overview-card" @click="goToUsers">
          <text class="card-icon">👥</text>
          <text class="card-value">{{ systemStats.users }}</text>
          <text class="card-label">用户总数</text>
          <text class="card-change" :class="{ positive: systemStats.userGrowth > 0 }">
            {{ systemStats.userGrowth > 0 ? '+' : '' }}{{ systemStats.userGrowth }}%
          </text>
        </view>
        <view class="overview-card" @click="goToOrders">
          <text class="card-icon">📋</text>
          <text class="card-value">{{ systemStats.orders }}</text>
          <text class="card-label">订单总数</text>
          <text class="card-change" :class="{ positive: systemStats.orderGrowth > 0 }">
            {{ systemStats.orderGrowth > 0 ? '+' : '' }}{{ systemStats.orderGrowth }}%
          </text>
        </view>
        <view class="overview-card" @click="goToMerchants">
          <text class="card-icon">🏪</text>
          <text class="card-value">{{ systemStats.merchants }}</text>
          <text class="card-label">商家总数</text>
          <text class="card-change" :class="{ positive: systemStats.merchantGrowth > 0 }">
            {{ systemStats.merchantGrowth > 0 ? '+' : '' }}{{ systemStats.merchantGrowth }}%
          </text>
        </view>
        <view class="overview-card" @click="goToRevenue">
          <text class="card-icon">💰</text>
          <text class="card-value">¥{{ systemStats.revenue }}</text>
          <text class="card-label">总营收</text>
          <text class="card-change" :class="{ positive: systemStats.revenueGrowth > 0 }">
            {{ systemStats.revenueGrowth > 0 ? '+' : '' }}{{ systemStats.revenueGrowth }}%
          </text>
        </view>
      </view>
    </view>

    <!-- 待处理事项 -->
    <view class="pending-tasks">
      <view class="section-title">待处理事项</view>
      <view class="task-list">
        <view class="task-item urgent" @click="goToAudit('merchant')">
          <text class="task-icon">🏪</text>
          <view class="task-info">
            <text class="task-title">商家审核</text>
            <text class="task-desc">{{ pendingTasks.merchantAudit }}个商家待审核</text>
          </view>
          <text class="task-badge urgent">{{ pendingTasks.merchantAudit }}</text>
        </view>
        <view class="task-item" @click="goToComplaints">
          <text class="task-icon">📢</text>
          <view class="task-info">
            <text class="task-title">投诉处理</text>
            <text class="task-desc">{{ pendingTasks.complaints }}个投诉待处理</text>
          </view>
          <text class="task-badge">{{ pendingTasks.complaints }}</text>
        </view>
        <view class="task-item" @click="goToRefunds">
          <text class="task-icon">↩️</text>
          <view class="task-info">
            <text class="task-title">退款审核</text>
            <text class="task-desc">{{ pendingTasks.refunds }}个退款待审核</text>
          </view>
          <text class="task-badge">{{ pendingTasks.refunds }}</text>
        </view>
        <view class="task-item" @click="goToReports">
          <text class="task-icon">⚠️</text>
          <view class="task-info">
            <text class="task-title">举报处理</text>
            <text class="task-desc">{{ pendingTasks.reports }}个举报待处理</text>
          </view>
          <text class="task-badge">{{ pendingTasks.reports }}</text>
        </view>
      </view>
    </view>

    <!-- 今日数据 -->
    <view class="today-data">
      <view class="section-title">今日数据</view>
      <view class="data-grid">
        <view class="data-card">
          <text class="data-value">{{ todayData.newUsers }}</text>
          <text class="data-label">新增用户</text>
        </view>
        <view class="data-card">
          <text class="data-value">{{ todayData.newOrders }}</text>
          <text class="data-label">新增订单</text>
        </view>
        <view class="data-card">
          <text class="data-value">¥{{ todayData.revenue }}</text>
          <text class="data-label">平台收入</text>
        </view>
        <view class="data-card">
          <text class="data-value">{{ todayData.activeUsers }}</text>
          <text class="data-label">活跃用户</text>
        </view>
      </view>
    </view>

    <!-- 系统健康状态 -->
    <view class="system-health">
      <view class="section-header">
        <text class="section-title">系统健康状态</text>
        <text class="view-more" @click="goToMonitor">详细监控 ></text>
      </view>
      <view class="health-grid">
        <view class="health-item">
          <text class="health-label">服务器状态</text>
          <view class="health-status">
            <view class="status-dot" :class="{ online: systemHealth.server }"></view>
            <text class="status-text">{{ systemHealth.server ? '正常' : '异常' }}</text>
          </view>
        </view>
        <view class="health-item">
          <text class="health-label">数据库状态</text>
          <view class="health-status">
            <view class="status-dot" :class="{ online: systemHealth.database }"></view>
            <text class="status-text">{{ systemHealth.database ? '正常' : '异常' }}</text>
          </view>
        </view>
        <view class="health-item">
          <text class="health-label">缓存状态</text>
          <view class="health-status">
            <view class="status-dot" :class="{ online: systemHealth.cache }"></view>
            <text class="status-text">{{ systemHealth.cache ? '正常' : '异常' }}</text>
          </view>
        </view>
        <view class="health-item">
          <text class="health-label">支付服务</text>
          <view class="health-status">
            <view class="status-dot" :class="{ online: systemHealth.payment }"></view>
            <text class="status-text">{{ systemHealth.payment ? '正常' : '异常' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 最近操作记录 -->
    <view class="recent-operations">
      <view class="section-header">
        <text class="section-title">最近操作</text>
        <text class="view-all" @click="goToOperationLogs">查看全部 ></text>
      </view>
      <view v-if="recentOperations.length > 0" class="operation-list">
        <view v-for="operation in recentOperations" :key="operation.id" class="operation-item">
          <view class="operation-info">
            <text class="operation-title">{{ operation.title }}</text>
            <text class="operation-desc">{{ operation.description }}</text>
          </view>
          <text class="operation-time">{{ formatTime(operation.created_at) }}</text>
        </view>
      </view>
      <view v-else class="no-data">
        <text class="no-data-text">暂无操作记录</text>
      </view>
    </view>

    <!-- 快捷功能 -->
    <view class="quick-functions">
      <view class="section-title">快捷功能</view>
      <view class="function-grid">
        <view class="function-item" @click="goToUserManagement">
          <text class="function-icon">👥</text>
          <text class="function-label">用户管理</text>
        </view>
        <view class="function-item" @click="goToMerchantManagement">
          <text class="function-icon">🏪</text>
          <text class="function-label">商家管理</text>
        </view>
        <view class="function-item" @click="goToProductManagement">
          <text class="function-icon">📦</text>
          <text class="function-label">商品管理</text>
        </view>
        <view class="function-item" @click="goToOrderManagement">
          <text class="function-icon">📋</text>
          <text class="function-label">订单管理</text>
        </view>
        <view class="function-item" @click="goToFinanceManagement">
          <text class="function-icon">💰</text>
          <text class="function-label">财务管理</text>
        </view>
        <view class="function-item" @click="goToSystemSettings">
          <text class="function-icon">⚙️</text>
          <text class="function-label">系统设置</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="function-menu">
      <view class="menu-group">
        <view class="menu-item" @click="goToReports">
          <text class="menu-icon">📊</text>
          <text class="menu-label">数据报表</text>
          <text class="menu-arrow">></text>
        </view>
        <view class="menu-item" @click="goToAnnouncements">
          <text class="menu-icon">📢</text>
          <text class="menu-label">公告管理</text>
          <text class="menu-arrow">></text>
        </view>
        <view class="menu-item" @click="goToPermissions">
          <text class="menu-icon">🔐</text>
          <text class="menu-label">权限管理</text>
          <text class="menu-arrow">></text>
        </view>
      </view>
      
      <view class="menu-group">
        <view class="menu-item" @click="goToHelp">
          <text class="menu-icon">❓</text>
          <text class="menu-label">帮助中心</text>
          <text class="menu-arrow">></text>
        </view>
        <view class="menu-item" @click="goToFeedback">
          <text class="menu-icon">💬</text>
          <text class="menu-label">意见反馈</text>
          <text class="menu-arrow">></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'
import type { UserType, ApiResponseType } from '@/types/mall-types'

// 响应式数据
const adminInfo = ref({
  id: '',
  phone: '',
  nickname: '系统管理员',
  avatar_url: ''
} as UserType)

const onlineHours = ref(8.5)
const adminLevel = ref('超级管理员')

const systemStats = ref({
  users: '12,568',
  userGrowth: 12.5,
  orders: '8,932',
  orderGrowth: 8.3,
  merchants: '1,234',
  merchantGrowth: 5.2,
  revenue: '1,256,789',
  revenueGrowth: 15.8
})

const pendingTasks = ref({
  merchantAudit: 8,
  complaints: 15,
  refunds: 12,
  reports: 6
})

const todayData = ref({
  newUsers: 156,
  newOrders: 289,
  revenue: '25,680',
  activeUsers: 3456
})

const systemHealth = ref({
  server: true,
  database: true,
  cache: true,
  payment: true
})

const recentOperations = ref([
  {
    id: 'op001',
    title: '商家审核通过',
    description: '审核通过商家"时尚服饰专营店"',
    created_at: '2024-12-01 14:30:00'
  },
  {
    id: 'op002',
    title: '处理用户投诉',
    description: '处理订单#ORD20241201001投诉',
    created_at: '2024-12-01 13:45:00'
  },
  {
    id: 'op003',
    title: '系统配置更新',
    description: '更新了支付配置参数',
    created_at: '2024-12-01 12:20:00'
  }
])

// 生命周期
onMounted(() => {
  loadAdminInfo()
  loadSystemStats()
  loadPendingTasks()
})

// 方法
function loadAdminInfo() {
  // 模拟加载管理员信息
  adminInfo.value = {
    id: 'admin001',
    phone: '13900000000',
    email: 'admin@mall.com',
    nickname: '超级管理员',
    avatar_url: '/static/admin-avatar.png',
    gender: 0,
    user_type: 99,
    status: 1,
    created_at: '2024-01-01'
  }
}

function loadSystemStats() {
  // 模拟加载系统统计
  // 实际应用中从API获取
}

function loadPendingTasks() {
  // 模拟加载待处理任务
  // 实际应用中从API获取
}

function getAdminRole(): string {
  const roleMap = {
    99: '超级管理员',
    98: '系统管理员',
    97: '运营管理员'
  }
  return roleMap[adminInfo.value.user_type] || '管理员'
}

function formatTime(dateStr: string): string {
  const date = new Date(dateStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const hours = Math.floor(diff / (1000 * 60 * 60))
  
  if (hours < 1) {
    return '刚刚'
  } else if (hours < 24) {
    return `${hours}小时前`
  } else {
    return `${Math.floor(hours / 24)}天前`
  }
}

// 导航方法
function editProfile() {
  uni.navigateTo({
    url: '/pages/mall/admin/profile-edit'
  })
}

function goToSettings() {
  uni.navigateTo({
    url: '/pages/mall/admin/settings'
  })
}

function goToUsers() {
  uni.navigateTo({
    url: '/pages/mall/admin/users'
  })
}

function goToOrders() {
  uni.navigateTo({
    url: '/pages/mall/admin/orders'
  })
}

function goToMerchants() {
  uni.navigateTo({
    url: '/pages/mall/admin/merchants'
  })
}

function goToRevenue() {
  uni.navigateTo({
    url: '/pages/mall/admin/revenue'
  })
}

function goToAudit(type: string) {
  uni.navigateTo({
    url: `/pages/mall/admin/audit?type=${type}`
  })
}

function goToComplaints() {
  uni.navigateTo({
    url: '/pages/mall/admin/complaints'
  })
}

function goToRefunds() {
  uni.navigateTo({
    url: '/pages/mall/admin/refunds'
  })
}

function goToReports() {
  uni.navigateTo({
    url: '/pages/mall/admin/reports'
  })
}

function goToMonitor() {
  uni.navigateTo({
    url: '/pages/mall/admin/monitor'
  })
}

function goToOperationLogs() {
  uni.navigateTo({
    url: '/pages/mall/admin/operation-logs'
  })
}

function goToUserManagement() {
  uni.navigateTo({
    url: '/pages/mall/admin/user-management'
  })
}

function goToMerchantManagement() {
  uni.navigateTo({
    url: '/pages/mall/admin/merchant-management'
  })
}

function goToProductManagement() {
  uni.navigateTo({
    url: '/pages/mall/admin/product-management'
  })
}

function goToOrderManagement() {
  uni.navigateTo({
    url: '/pages/mall/admin/order-management'
  })
}

function goToFinanceManagement() {
  uni.navigateTo({
    url: '/pages/mall/admin/finance-management'
  })
}

function goToSystemSettings() {
  uni.navigateTo({
    url: '/pages/mall/admin/system-settings'
  })
}

function goToAnnouncements() {
  uni.navigateTo({
    url: '/pages/mall/admin/announcements'
  })
}

function goToPermissions() {
  uni.navigateTo({
    url: '/pages/mall/admin/permissions'
  })
}

function goToHelp() {
  uni.navigateTo({
    url: '/pages/mall/common/help'
  })
}

function goToFeedback() {
  uni.navigateTo({
    url: '/pages/mall/common/feedback'
  })
}
</script>

<style scoped>
.admin-profile {
  padding: 0 0 120rpx 0;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.profile-header {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
  position: relative;
}

.admin-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 30rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.admin-info {
  flex: 1;
}

.admin-name {
  font-size: 36rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 10rpx;
}

.admin-role {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 15rpx;
}

.admin-stats {
  display: flex;
  gap: 30rpx;
}

.stat-item {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.9);
}

.settings-icon {
  font-size: 36rpx;
  color: white;
  padding: 10rpx;
}

.system-overview, .pending-tasks, .today-data, .system-health, .recent-operations, .quick-functions, .function-menu {
  margin: 20rpx 30rpx;
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.view-all, .view-more {
  font-size: 24rpx;
  color: #a29bfe;
}

.overview-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20rpx;
}

.overview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 150rpx;
  padding: 25rpx 15rpx;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8ecff 100%);
  border-radius: 20rpx;
  position: relative;
}

.card-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.card-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.card-label {
  font-size: 22rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.card-change {
  font-size: 20rpx;
  color: #ff6b6b;
}

.card-change.positive {
  color: #00b894;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f8f9ff;
  border-radius: 15rpx;
  position: relative;
}

.task-item.urgent {
  border-left: 6rpx solid #ff6b6b;
}

.task-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
}

.task-info {
  flex: 1;
}

.task-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 5rpx;
}

.task-desc {
  font-size: 22rpx;
  color: #666;
}

.task-badge {
  background: #a29bfe;
  color: white;
  font-size: 20rpx;
  padding: 6rpx 12rpx;
  border-radius: 15rpx;
  min-width: 30rpx;
  text-align: center;
}

.task-badge.urgent {
  background: #ff6b6b;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.data-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20rpx;
}

.data-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 150rpx;
  padding: 20rpx;
  background: #f8f9ff;
  border-radius: 15rpx;
}

.data-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #a29bfe;
  margin-bottom: 5rpx;
}

.data-label {
  font-size: 24rpx;
  color: #666;
}

.health-grid {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.health-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #f8f9ff;
  border-radius: 15rpx;
}

.health-label {
  font-size: 26rpx;
  color: #333;
}

.health-status {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.status-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #ff6b6b;
}

.status-dot.online {
  background: #00b894;
}

.status-text {
  font-size: 24rpx;
  color: #666;
}

.operation-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.operation-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20rpx;
  background: #f8f9ff;
  border-radius: 15rpx;
}

.operation-info {
  flex: 1;
}

.operation-title {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 5rpx;
}

.operation-desc {
  font-size: 22rpx;
  color: #666;
}

.operation-time {
  font-size: 20rpx;
  color: #999;
}

.function-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20rpx;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 140rpx;
  padding: 25rpx 15rpx;
  background: #f8f9ff;
  border-radius: 15rpx;
}

.function-icon {
  font-size: 48rpx;
  margin-bottom: 15rpx;
}

.function-label {
  font-size: 24rpx;
  color: #333;
}

.menu-group {
  margin-bottom: 30rpx;
}

.menu-group:last-child {
  margin-bottom: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  font-size: 36rpx;
  width: 60rpx;
  margin-right: 25rpx;
}

.menu-label {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.menu-arrow {
  font-size: 24rpx;
  color: #ccc;
}

.no-data {
  text-align: center;
  padding: 60rpx 0;
}

.no-data-text {
  font-size: 24rpx;
  color: #999;
}
</style>
