<template>
  <div class="admin-orders admin-theme">
    <!-- 管理员模式侧边栏 -->
    <AdminSidebar v-if="isAdminMode" active="orders" />
    <aside v-else class="sidebar">
      <div class="logo">
        <img src="/images/backgrounds/logo-admin.svg" alt="Logo" />
      </div>
      <nav class="nav-menu">
        <div class="nav-item active">
          <ShoppingCartOutlined />
          <span>{{ $t('nav.orders') }}</span>
        </div>
        <div class="nav-item" @click="goToProfile">
          <UserOutlined />
          <span>{{ $t('nav.profile') }}</span>
        </div>
        <div class="nav-item" @click="goToWorks">
          <FileOutlined />
          <span>{{ $t('nav.myWorks') }}</span>
        </div>
      </nav>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 顶部操作栏 -->
      <AdminHeader v-if="isAdminMode" :title="$t('nav.orderManagement')" />
      <header v-else class="top-header">
        <div class="page-title">
          <h2>{{ $t('nav.orderManagement') }}</h2>
        </div>
        <div class="header-actions">
          <LanguageSwitcher />
          <div class="user-avatar" @click="goToProfile">
            <img src="/images/backgrounds/avatar-default.svg" :alt="$t('dashboard.userAvatar')" />
          </div>
        </div>
      </header>

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

        <div class="table-toolbar">
          <div class="toolbar-left">
            <a-select v-model:value="filters.status" :placeholder="$t('orders.allStatus')" size="small" @change="handleFilterChange">
            <a-select-option value="">{{ $t('orders.allStatus') }}</a-select-option>
            <a-select-option value="PENDING">{{ $t('orders.pending') }}</a-select-option>
            <a-select-option value="PAID">{{ $t('orders.paid') }}</a-select-option>
            <a-select-option value="CANCELLED">{{ $t('orders.cancelled') }}</a-select-option>
          </a-select>
            <a-select v-model:value="filters.paymentMethod" :placeholder="$t('orders.allPaymentMethods')" size="small" @change="handleFilterChange">
              <a-select-option value="">{{ $t('orders.allPaymentMethods') }}</a-select-option>
              <a-select-option value="ALIPAY">{{ $t('orders.alipay') }}</a-select-option>
              <a-select-option value="PAYPAL">{{ $t('orders.paypal') }}</a-select-option>
            </a-select>
            </div>
          <div class="toolbar-right">
            <a-button type="danger" size="small" @click="deleteSelected" :disabled="selectedOrders.length === 0">
              <DeleteOutlined />
              {{ $t('common.delete') }}
              </a-button>
          </div>
        </div>

        <div class="table-container">
          <table class="order-table">
            <thead>
              <tr>
                <th class="checkbox-col">
                  <input type="checkbox" @change="toggleAllSelection" :checked="isAllSelected" />
                </th>
                <th>{{ $t('orders.orderNumber') }}</th>
                <th>{{ $t('orders.username') }}</th>
                <th>{{ $t('orders.amount') }}</th>
                <th>{{ $t('orders.paymentMethod') }}</th>
                <th>{{ $t('orders.status') }}</th>
                <th>{{ $t('orders.createTime') }}</th>
                <th>{{ $t('orders.operation') }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="order in orders" :key="order.id" class="table-row">
                <td class="checkbox-col">
                  <input
                    type="checkbox"
                    :checked="selectedOrders.some(o => o.id === order.id)"
                    @change="toggleOrderSelection(order)" />
                </td>
                <td>{{ order.orderNumber || order.id }}</td>
                <td>{{ order.user?.username || $t('orders.unpaid') }}</td>
                <td>{{ order.currency || '¥' }}{{ order.totalAmount || 0 }}</td>
                <td>
                  <span v-if="order.paymentMethod === 'ALIPAY'">
                    <CreditCardOutlined /> {{ $t('orders.alipay') }}
                  </span>
                  <span v-else-if="order.paymentMethod === 'WECHAT'">
                    <CreditCardOutlined /> {{ $t('orders.wechat') }}
                  </span>
                  <span v-else-if="order.paymentMethod === 'PAYPAL'">
                    <WalletOutlined /> {{ $t('orders.paypal') }}
                  </span>
                  <span v-else class="text-muted">{{ $t('orders.unpaid') }}</span>
                </td>
                <td>
                  <span class="status-tag" :class="getStatusClass(order.status)">
                    {{ getStatusText(order.status) }}
                  </span>
                </td>
                <td>{{ formatDate(order.createdAt) }}</td>
                <td>
                  <a type="primary" class="action-link" @click="viewOrder(order)">{{ $t('common.view') }}</a>
                  <a type="danger" class="action-link" @click="deleteOrder(order)">{{ $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="orderDetailVisible"
      :title="$t('orders.orderDetail')"
      width="600px"
      class="order-detail-dialog"
    >
      <div v-if="currentOrderDetail" class="order-detail-content">
        <div class="detail-section">
          <h4>{{ $t('orders.basicInfo') }}</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="label">{{ $t('orders.orderNumber') }}:</span>
              <span class="value">{{ currentOrderDetail.orderNumber || currentOrderDetail.id }}</span>
            </div>
            <div class="detail-item">
              <span class="label">{{ $t('orders.username') }}:</span>
              <span class="value">{{ currentOrderDetail.user?.username || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">{{ $t('orders.orderType') }}:</span>
              <span class="value">{{ getOrderTypeText(currentOrderDetail.orderType) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">{{ $t('orders.status') }}:</span>
              <a-select 
                v-if="isAdminMode" 
                v-model="editingStatus" 
                size="small" 
                style="width: 120px;"
                @change="handleStatusChange"
              >
                <a-select-option value="PENDING">{{ $t('orders.pending') }}</a-select-option>
                <a-select-option value="PAID">{{ $t('orders.paid') }}</a-select-option>
                <a-select-option value="CANCELLED">{{ $t('orders.cancelled') }}</a-select-option>
              </a-select>
              <span v-else class="status-tag" :class="getStatusClass(currentOrderDetail.status)">
                {{ getStatusText(currentOrderDetail.status) }}
              </span>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <h4>{{ $t('orders.paymentInfo') }}</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="label">{{ $t('orders.amount') }}:</span>
              <span class="value amount">{{ currentOrderDetail.currency || '¥' }}{{ currentOrderDetail.totalAmount || 0 }}</span>
            </div>
            <div class="detail-item">
              <span class="label">{{ $t('orders.paymentMethod') }}:</span>
              <span class="value">
                <template v-if="currentOrderDetail.paymentMethod === 'ALIPAY'">{{ $t('orders.alipay') }}</template>
                <template v-else-if="currentOrderDetail.paymentMethod === 'WECHAT'">{{ $t('orders.wechat') }}</template>
                <template v-else-if="currentOrderDetail.paymentMethod === 'PAYPAL'">{{ $t('orders.paypal') }}</template>
                <template v-else>{{ $t('orders.unpaid') }}</template>
              </span>
            </div>
            <div class="detail-item">
              <span class="label">{{ $t('orders.createTime') }}:</span>
              <span class="value">{{ formatDate(currentOrderDetail.createdAt) }}</span>
            </div>
            <div class="detail-item" v-if="currentOrderDetail.paidAt">
              <span class="label">{{ $t('orders.paidTime') }}:</span>
              <span class="value">{{ formatDate(currentOrderDetail.paidAt) }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section" v-if="currentOrderDetail.contactEmail || currentOrderDetail.contactPhone">
          <h4>{{ $t('orders.contactInfo') }}</h4>
          <div class="detail-grid">
            <div class="detail-item" v-if="currentOrderDetail.contactEmail">
              <span class="label">{{ $t('orders.email') }}:</span>
              <span class="value">{{ currentOrderDetail.contactEmail }}</span>
            </div>
            <div class="detail-item" v-if="currentOrderDetail.contactPhone">
              <span class="label">{{ $t('orders.phone') }}:</span>
              <span class="value">{{ currentOrderDetail.contactPhone }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section" v-if="currentOrderDetail.description">
          <h4>{{ $t('orders.description') }}</h4>
          <p class="description-text">{{ currentOrderDetail.description }}</p>
        </div>
      </div>
      <div v-else class="loading-container">
        <LoadingOutlined class="is-loading" />
        <span>{{ $t('common.loading') }}</span>
      </div>
      <template #footer>
        <a-button @click="orderDetailVisible = false">{{ $t('common.close') }}</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { message, Modal } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import {
  ShoppingCartOutlined,
  UserOutlined,
  FileOutlined,
  LeftOutlined,
  RightOutlined,
  DeleteOutlined,
  CreditCardOutlined,
  WalletOutlined,
  LoadingOutlined
} from '@ant-design/icons-vue'
import { getOrders, getAdminOrders, getOrderStats, deleteOrder as deleteOrderAPI, deleteOrders, updateOrderStatus } from '@/api/orders'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
import AdminSidebar from '@/components/AdminSidebar.vue'
import AdminHeader from '@/components/AdminHeader.vue'

const router = useRouter()
const route = useRoute()
const { t } = useI18n()

// 判断是否为管理员模式（基于路由路径）
const isAdminMode = computed(() => route.path.includes('/admin/'))

const loading = ref(false)
const orders = ref([])
const searchText = ref('')
const selectedOrders = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const totalOrders = ref(0)

// 筛选条件
const filters = reactive({
  status: '',
  paymentMethod: '',
  search: ''
})

// 普通用户模式的导航函数
const goToProfile = () => {
  router.push('/profile')
}

const goToWorks = () => {
  router.push('/works')
}

// 获取状态样式类
const getStatusClass = (status) => {
  const statusMap = {
    'PENDING': 'pending',
    'CONFIRMED': 'confirmed',
    'PAID': 'paid',
    'PROCESSING': 'processing',
    'SHIPPED': 'shipped',
    'DELIVERED': 'delivered',
    'COMPLETED': 'completed',
    'CANCELLED': 'cancelled',
    'REFUNDED': 'refunded'
  }
  return statusMap[status] || ''
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'PENDING': t('orders.pending'),
    'CONFIRMED': t('orders.confirmed'),
    'PAID': t('orders.paid'),
    'PROCESSING': t('orders.processing'),
    'SHIPPED': t('orders.shipped'),
    'DELIVERED': t('orders.delivered'),
    'COMPLETED': t('orders.completed'),
    'CANCELLED': t('orders.cancelled'),
    'REFUNDED': t('orders.refunded')
  }
  return statusMap[status] || status
}

// 获取订单类型文本
const getOrderTypeText = (orderType) => {
  const typeMap = {
    'PRODUCT': t('orders.productOrder'),
    'SERVICE': t('orders.serviceOrder'),
    'SUBSCRIPTION': t('orders.subscriptionOrder'),
    'DIGITAL': t('orders.digitalProduct'),
    'PHYSICAL': t('orders.physicalProduct')
  }
  return typeMap[orderType] || orderType
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}



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

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

const visiblePages = computed(() => {
  const pages = []
  const total = totalPages.value
  const current = currentPage.value
  
  if (total <= 7) {
    for (let i = 1; i <= total; i++) {
      pages.push(i)
    }
  } else {
    if (current <= 3) {
      for (let i = 1; i <= 5; i++) {
        pages.push(i)
      }
    } else if (current >= total - 2) {
      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) {
    selectedOrders.value = []
  } else {
    selectedOrders.value = [...orders.value]
  }
}

const toggleOrderSelection = (order) => {
  const index = selectedOrders.value.findIndex(o => o.id === order.id)
  if (index > -1) {
    selectedOrders.value.splice(index, 1)
  } else {
    selectedOrders.value.push(order)
  }
}

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

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

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

// 订单详情弹窗相关
const orderDetailVisible = ref(false)
const currentOrderDetail = ref(null)
const editingStatus = ref('')

const viewOrder = async (order) => {
  currentOrderDetail.value = order
  editingStatus.value = order.status || 'PENDING'
  orderDetailVisible.value = true
}

// 修改订单状态
const handleStatusChange = async (newStatus) => {
  if (!currentOrderDetail.value) return
  
  try {
    const response = await updateOrderStatus(currentOrderDetail.value.id, newStatus)
    if (response.data?.success) {
      // 更新当前详情
      currentOrderDetail.value.status = newStatus
      // 更新列表中的订单
      const orderIndex = orders.value.findIndex(o => o.id === currentOrderDetail.value.id)
      if (orderIndex > -1) {
        orders.value[orderIndex].status = newStatus
      }
      message.success(t('common.orderStatusUpdated'))
    } else {
      message.error(response.data?.message || t('common.updateFailed'))
      editingStatus.value = currentOrderDetail.value.status // 恢复原状态
    }
  } catch (error) {
    console.error('更新订单状态失败:', error)
    message.error(t('common.updateOrderStatusFailed'))
    editingStatus.value = currentOrderDetail.value.status // 恢复原状态
  }
}

const deleteOrder = async (order) => {
  try {
    await new Promise((resolve, reject) => {
      Modal.confirm({
        title: t('orders.confirmDeleteTitle'),
        content: t('orders.confirmDeleteOrder', { orderNumber: order.orderNumber || order.id }),
        okText: t('common.confirm'),
        cancelText: t('common.cancel'),
        onOk() { resolve() },
        onCancel() { reject('cancel') }
      })
    })
    
    const response = await deleteOrderAPI(order.id)
    console.log('Delete order response:', response)
    
    // 检查响应状态
    if (response.data?.success) {
      const index = orders.value.findIndex(o => o.id === order.id)
      if (index > -1) {
        orders.value.splice(index, 1)
        totalOrders.value--
      }
      message.success(t('orders.deleteSuccess'))
    } else {
      message.error(response.data?.message || t('orders.deleteFailed'))
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('Delete failed:', error)
      message.error(t('orders.deleteFailed') + ': ' + (error.message || t('dashboard.unknownError')))
    }
  }
}

const deleteSelected = async () => {
  if (selectedOrders.value.length === 0) {
    message.warning(t('orders.pleaseSelectOrders'))
    return
  }
  
  try {
    await new Promise((resolve, reject) => {
      Modal.confirm({
        title: t('orders.batchDeleteTitle'),
        content: t('orders.confirmBatchDelete', { count: selectedOrders.value.length }),
        okText: t('common.confirm'),
        cancelText: t('common.cancel'),
        onOk() { resolve() },
        onCancel() { reject('cancel') }
      })
    })
    
    const ids = selectedOrders.value.map(o => o.id)
    const response = await deleteOrders(ids)
    console.log('Batch delete orders response:', response)
    
    if (response.data?.success) {
      orders.value = orders.value.filter(o => !ids.includes(o.id))
      totalOrders.value -= response.data?.deletedCount || ids.length
      selectedOrders.value = []
      message.success(response.data?.message || t('orders.batchDeleteSuccess'))
    } else {
      message.error(response.data?.message || t('orders.batchDeleteFailed'))
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('Batch delete failed:', error)
      message.error(t('orders.batchDeleteFailed') + ': ' + (error.message || t('dashboard.unknownError')))
    }
  }
}

// 获取订单列表
const fetchOrders = async () => {
  try {
    loading.value = true

    // 根据模式调用不同的 API
    const apiFunction = isAdminMode.value ? getAdminOrders : getOrders
    const response = await apiFunction({
      page: currentPage.value - 1,
      size: pageSize.value,
      status: filters.status || undefined,
      paymentMethod: filters.paymentMethod || undefined,
      search: filters.search || searchText.value || undefined
    })

    console.log('获取订单列表响应:', response)

    // 后端返回格式: { success: true, data: { content: [...], totalElements: 100, ... } }
    // axios会将响应包装在response.data中
    const responseData = response?.data || response || {}
    console.log('解析后的响应数据:', responseData)

    if (responseData.success && responseData.data) {
      const pageData = responseData.data
      if (pageData.content) {
        // Spring Data Page格式
        orders.value = pageData.content || []
        totalOrders.value = pageData.totalElements || 0
        console.log('设置后的订单列表:', orders.value)
      } else if (Array.isArray(pageData)) {
        // 直接数组格式
        orders.value = pageData
        totalOrders.value = pageData.length
    } else {
        console.error('API data format error: data is not Page object or array', pageData)
        message.error(t('orders.apiDataFormatError'))
      }
    } else if (responseData.content) {
      // 直接返回Page对象（没有success包装）
      orders.value = responseData.content || []
      totalOrders.value = responseData.totalElements || 0
    } else if (responseData.list) {
      // 列表格式
      orders.value = responseData.list || []
      totalOrders.value = responseData.total || 0
    } else {
      console.error('API data format error:', responseData)
      message.error(t('orders.apiDataFormatError'))
    }

  } catch (error) {
    console.error('Get orders list failed:', error)
    message.error(t('orders.loadOrdersFailed') + ': ' + (error.message || t('dashboard.unknownError')))
  } finally {
    loading.value = false
  }
}

// 筛选变化
const handleFilterChange = () => {
  currentPage.value = 1
  fetchOrders()
}


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

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

/* 左侧导航栏 */
.sidebar {
  width: 240px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) 0;
  box-shadow: var(--shadow-sm);
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-6);
  margin-bottom: var(--space-8);
}

.logo img {
  width: 100%;
  height: auto;
  max-width: 180px;
  object-fit: contain;
}

.nav-menu {
  flex: 1;
  padding: 0 var(--space-4);
}

.nav-item {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--primary-glow-light);
  color: var(--primary-500);
}

.nav-item .anticon {
  margin-right: var(--space-3);
  font-size: var(--text-lg);
}

.nav-item span {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  font-size: 12px;
  color: var(--text-tertiary, #64748B);
}

.sidebar-footer .highlight {
  color: #818CF8;
}

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

/* 顶部搜索栏 */
.top-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

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

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.user-avatar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--duration-normal) var(--ease-default);
}

.user-avatar:hover {
  background: var(--bg-hover);
}

.user-avatar img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.user-avatar .arrow-down {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* 订单内容区域 */
.order-content {
  padding: var(--space-6);
  flex: 1;
  background: var(--bg-surface);
  margin: var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.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-elevated);
  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: var(--space-4);
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* 确保下拉框选中值可见 */
.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-tertiary) !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-default);
  margin-bottom: var(--space-6);
}

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

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

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

.order-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;
}

.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);
  color: var(--text-primary);
}

.status-tag.completed {
  background: var(--success-500);
}

.status-tag.cancelled {
  background: var(--error-500);
}

.status-tag.processing {
  background: var(--primary-500);
}

.status-tag.pending {
  background: var(--warning-500);
}

.status-tag.paid {
  background: var(--secondary-500);
}

.status-tag.refunded {
  background: var(--warning-600);
}

.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: var(--space-1);
}

.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: all var(--duration-normal) var(--ease-default);
}

.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: all var(--duration-normal) var(--ease-default);
  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-primary);
  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);
}

/* 未支付文本样式 */
.text-muted {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .admin-orders {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
  }
  
  .nav-menu {
    display: flex;
    overflow-x: auto;
    padding: 0 var(--space-4);
  }
  
  .nav-item {
    white-space: nowrap;
    margin-right: var(--space-4);
    margin-bottom: 0;
  }
  
  .sidebar-footer {
    display: none;
  }
  
  .search-input {
    width: 200px;
  }
  
  .order-content {
    padding: var(--space-4);
  }
}

/* 订单详情弹窗样式 */
.order-detail-content {
  padding: 0 var(--space-3);
}

.detail-section {
  margin-bottom: var(--space-6);
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

.detail-AppstoreOutlined {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-6);
}

.detail-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.detail-item .label {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  min-width: 80px;
}

.detail-item .value {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.detail-item .value.amount {
  color: var(--warning-500);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
}

.description-text {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
  padding: var(--space-3);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  color: var(--text-tertiary);
  gap: var(--space-3);
}

.loading-container .anticon {
  font-size: var(--text-4xl);
  color: var(--primary-500);
}

:deep(.order-detail-dialog .ant-modal-header) {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  margin-right: 0;
}

:deep(.order-detail-dialog .ant-modal-body) {
  padding: var(--space-5);
}

:deep(.order-detail-dialog .ant-modal-footer) {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-default);
}
</style>



