<template>
  <div class="payment-orders-container">
    <!-- Search and Filter Bar -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="filters" class="filter-form">
        <el-form-item label="用户ID">
          <el-input v-model="filters.userId" placeholder="输入用户ID" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filters.status" placeholder="全部" clearable style="width: 120px">
            <el-option label="全部" value="" />
            <el-option label="有效" value="active" />
            <el-option label="已取消" value="cancelled" />
          </el-select>
        </el-form-item>
        <el-form-item label="货币类型">
          <el-select v-model="filters.currency" placeholder="全部" clearable style="width: 120px">
            <el-option label="全部" value="" />
            <el-option label="人民币" value="rmb" />
            <el-option label="比索" value="peso" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="success" @click="showCreateDialog">创建支付订单</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- Amount Statistics -->
    <el-card class="statistics-card">
      <div class="statistics-wrapper">
        <div class="statistics-item">
          <span class="statistics-label">人民币总额</span>
          <span class="statistics-value rmb">¥{{ statistics.totalRmb }}</span>
        </div>
        <div class="statistics-item">
          <span class="statistics-label">比索总额</span>
          <span class="statistics-value peso">₱{{ statistics.totalPeso }}</span>
        </div>
      </div>
    </el-card>

    <!-- Orders Table -->
    <el-card class="table-card">
      <el-table v-loading="loading" :data="orders" stripe border>
        <el-table-column prop="orderNo" label="订单编号" width="180" />
        <el-table-column label="用户" width="150">
          <template #default="{ row }">
            <span>{{ row.user?.nickname || '-' }}</span>
            <br />
            <small class="text-muted">UID: {{ row.user?.uid || '-' }}</small>
          </template>
        </el-table-column>
        <el-table-column label="金额" width="180">
          <template #default="{ row }">
            <div class="amount-info">
              <span v-if="row.amountPeso" class="amount peso">₱{{ row.amountPeso }}</span>
              <span v-if="row.amountRmb" class="amount rmb">¥{{ row.amountRmb }}</span>
              <span v-if="!row.amountPeso && !row.amountRmb && row.amount" class="amount">¥{{ row.amount }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="serviceContent" label="服务内容" min-width="200" show-overflow-tooltip />
        <el-table-column prop="paymentTime" label="支付时间" width="160">
          <template #default="{ row }">
            {{ formatDate(row.paymentTime) }}
          </template>
        </el-table-column>
        <el-table-column label="佣金" width="120">
          <template #default="{ row }">
            <span v-if="row.commission" class="commission">¥{{ row.commission.amount }}</span>
            <span v-else class="no-commission">无</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'danger'">
              {{ row.status === 'active' ? '有效' : '已取消' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="showDetails(row)">详情</el-button>
            <el-button
              v-if="row.status === 'active'"
              type="danger"
              link
              @click="handleCancel(row)"
            >取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- Pagination -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.limit"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- Create Dialog -->
    <el-dialog v-model="createDialogVisible" title="创建支付订单" width="500px">
      <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="100px">
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="createForm.userId" placeholder="输入用户UID（6位数字）" />
        </el-form-item>
        <el-form-item label="比索金额">
          <el-input-number v-model="createForm.amountPeso" :min="0" :precision="2" placeholder="比索" />
          <span class="currency-hint">₱ 比索（可选）</span>
        </el-form-item>
        <el-form-item label="人民币金额">
          <el-input-number v-model="createForm.amountRmb" :min="0" :precision="2" placeholder="人民币" />
          <span class="currency-hint">¥ 人民币（可选）</span>
        </el-form-item>
        <el-form-item>
          <el-alert type="info" :closable="false" show-icon>
            比索和人民币至少填写一项，如果两个都填写表示客户同时支付了两种货币
          </el-alert>
        </el-form-item>
        <el-form-item label="服务内容" prop="serviceContent">
          <el-input v-model="createForm.serviceContent" type="textarea" :rows="3" placeholder="输入服务内容" />
        </el-form-item>
        <el-form-item label="支付时间" prop="paymentTime">
          <el-date-picker
            v-model="createForm.paymentTime"
            type="datetime"
            placeholder="选择支付时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="关联预约单">
          <el-input v-model="createForm.appointmentId" placeholder="可选，输入预约单ID" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="createForm.notes" type="textarea" :rows="2" placeholder="可选备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="creating" @click="handleCreate">创建</el-button>
      </template>
    </el-dialog>

    <!-- Details Dialog -->
    <el-dialog v-model="detailsDialogVisible" title="订单详情" width="600px">
      <el-descriptions v-if="currentOrder" :column="2" border>
        <el-descriptions-item label="订单编号">{{ currentOrder.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="currentOrder.status === 'active' ? 'success' : 'danger'">
            {{ currentOrder.status === 'active' ? '有效' : '已取消' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="用户">{{ currentOrder.user?.nickname }} (UID: {{ currentOrder.user?.uid }})</el-descriptions-item>
        <el-descriptions-item label="支付金额">
          <div class="amount-detail">
            <span v-if="currentOrder.amountPeso" class="peso">₱{{ currentOrder.amountPeso }} (比索)</span>
            <span v-if="currentOrder.amountRmb" class="rmb">¥{{ currentOrder.amountRmb }} (人民币)</span>
            <span v-if="!currentOrder.amountPeso && !currentOrder.amountRmb && currentOrder.amount">¥{{ currentOrder.amount }}</span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="服务内容" :span="2">{{ currentOrder.serviceContent }}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ formatDate(currentOrder.paymentTime) }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDate(currentOrder.createdAt) }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ currentOrder.notes || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ currentOrder.creator?.realName || currentOrder.creator?.username }}</el-descriptions-item>
        <el-descriptions-item label="关联预约单">{{ currentOrder.appointment?.appointmentNo || '-' }}</el-descriptions-item>
        <el-descriptions-item v-if="currentOrder.status === 'cancelled'" label="取消原因" :span="2">
          <span class="cancel-reason">{{ currentOrder.cancelReason || '-' }}</span>
        </el-descriptions-item>
      </el-descriptions>
      
      <el-divider v-if="currentOrder?.commission">佣金信息</el-divider>
      <el-descriptions v-if="currentOrder?.commission" :column="2" border>
        <el-descriptions-item label="邀请人">{{ currentOrder.commission.inviter?.nickname }} (UID: {{ currentOrder.commission.inviter?.uid }})</el-descriptions-item>
        <el-descriptions-item label="佣金比例">{{ currentOrder.commission.commissionRate }}</el-descriptions-item>
        <el-descriptions-item label="佣金金额">¥{{ currentOrder.commission.commissionAmount }}</el-descriptions-item>
        <el-descriptions-item label="佣金状态">
          <el-tag :type="currentOrder.commission.status === 'credited' ? 'success' : 'danger'">
            {{ currentOrder.commission.status === 'credited' ? '已入账' : '已取消' }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/utils/api'

// State
const loading = ref(false)
const creating = ref(false)
const orders = ref([])
const dateRange = ref([])
const createDialogVisible = ref(false)
const detailsDialogVisible = ref(false)
const currentOrder = ref(null)
const createFormRef = ref(null)

const filters = reactive({
  userId: '',
  status: '',
  currency: '',
})

const statistics = reactive({
  totalRmb: '0.00',
  totalPeso: '0.00',
})

const pagination = reactive({
  page: 1,
  limit: 20,
  total: 0,
})

const createForm = reactive({
  userId: '',
  amountPeso: null,
  amountRmb: null,
  serviceContent: '',
  paymentTime: '',
  appointmentId: '',
  notes: '',
})

const createRules = {
  userId: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
  serviceContent: [{ required: true, message: '请输入服务内容', trigger: 'blur' }],
  paymentTime: [{ required: true, message: '请选择支付时间', trigger: 'change' }],
}

// Methods
async function fetchOrders() {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      limit: pagination.limit,
    }
    if (filters.userId) params.userId = filters.userId
    if (filters.status) params.status = filters.status
    if (filters.currency) params.currency = filters.currency
    if (dateRange.value?.length === 2) {
      params.startDate = dateRange.value[0]
      params.endDate = dateRange.value[1]
    }

    const response = await api.get('/api/v1/admin/payment-orders', { params })
    if (response.data.code === 0) {
      orders.value = response.data.data.records
      pagination.total = response.data.data.pagination.total
      
      // Update statistics from API response
      if (response.data.data.statistics) {
        statistics.totalRmb = response.data.data.statistics.totalRmb || '0.00'
        statistics.totalPeso = response.data.data.statistics.totalPeso || '0.00'
      } else {
        statistics.totalRmb = '0.00'
        statistics.totalPeso = '0.00'
      }
    }
  } catch (error) {
    console.error('Failed to fetch orders:', error)
    ElMessage.error('获取订单列表失败')
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  pagination.page = 1
  fetchOrders()
}

function handleReset() {
  filters.userId = ''
  filters.status = ''
  filters.currency = ''
  dateRange.value = []
  pagination.page = 1
  fetchOrders()
}

function handlePageChange(page) {
  pagination.page = page
  fetchOrders()
}

function handleSizeChange(size) {
  pagination.limit = size
  pagination.page = 1
  fetchOrders()
}

function showCreateDialog() {
  Object.assign(createForm, {
    userId: '',
    amountPeso: null,
    amountRmb: null,
    serviceContent: '',
    paymentTime: '',
    appointmentId: '',
    notes: '',
  })
  createDialogVisible.value = true
}

async function handleCreate() {
  if (!createFormRef.value) return
  
  // Custom validation for amounts - check for null/undefined, not just falsy
  const hasPeso = createForm.amountPeso !== null && createForm.amountPeso !== undefined && createForm.amountPeso > 0
  const hasRmb = createForm.amountRmb !== null && createForm.amountRmb !== undefined && createForm.amountRmb > 0
  
  if (!hasPeso && !hasRmb) {
    ElMessage.warning('请至少填写一种货币金额（比索或人民币）')
    return
  }
  
  await createFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    creating.value = true
    try {
      const response = await api.post('/api/v1/admin/payment-orders', {
        userId: createForm.userId,
        amountPeso: hasPeso ? createForm.amountPeso : undefined,
        amountRmb: hasRmb ? createForm.amountRmb : undefined,
        serviceContent: createForm.serviceContent,
        paymentTime: createForm.paymentTime,
        appointmentId: createForm.appointmentId || undefined,
        notes: createForm.notes || undefined,
      })
      
      if (response.data.code === 0) {
        ElMessage.success('创建成功')
        createDialogVisible.value = false
        fetchOrders()
        
        if (response.data.data.commission) {
          ElMessage.info(`已生成佣金 ¥${response.data.data.commission.commissionAmount}`)
        }
      } else {
        ElMessage.error(response.data.error?.message || '创建失败')
      }
    } catch (error) {
      console.error('Failed to create order:', error)
      const errorMsg = error.response?.data?.error?.message || '创建失败'
      ElMessage.error(errorMsg)
    } finally {
      creating.value = false
    }
  })
}

async function showDetails(row) {
  try {
    const response = await api.get(`/api/v1/admin/payment-orders/${row.id}`)
    if (response.data.code === 0) {
      currentOrder.value = response.data.data
      detailsDialogVisible.value = true
    }
  } catch (error) {
    console.error('Failed to get order details:', error)
    ElMessage.error('获取订单详情失败')
  }
}

async function handleCancel(row) {
  try {
    const { value: cancelReason } = await ElMessageBox.prompt(
      '请输入取消原因，相关佣金也将被取消。',
      '取消订单',
      {
        confirmButtonText: '确认取消',
        cancelButtonText: '返回',
        inputPlaceholder: '请输入取消原因',
        inputType: 'textarea',
        inputValidator: (value) => {
          if (!value || !value.trim()) {
            return '请输入取消原因'
          }
          return true
        },
        type: 'warning',
      }
    )
    
    const response = await api.put(`/api/v1/admin/payment-orders/${row.id}/cancel`, {
      cancelReason
    })
    if (response.data.code === 0) {
      ElMessage.success('订单已取消')
      fetchOrders()
    } else {
      ElMessage.error(response.data.error?.message || '取消失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('Failed to cancel order:', error)
      ElMessage.error(error.response?.data?.error?.message || '取消失败')
    }
  }
}

function formatDate(date) {
  if (!date) return '-'
  return new Date(date).toLocaleString('zh-CN')
}

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

<style lang="scss" scoped>
.payment-orders-container {
  .filter-card {
    margin-bottom: 20px;
  }

  .statistics-card {
    margin-bottom: 20px;
    
    .statistics-wrapper {
      display: flex;
      gap: 40px;
    }
    
    .statistics-item {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .statistics-label {
      color: #606266;
      font-size: 14px;
    }
    
    .statistics-value {
      font-size: 20px;
      font-weight: bold;
      
      &.rmb {
        color: #e6a23c;
      }
      
      &.peso {
        color: #409eff;
      }
    }
  }

  .table-card {
    .amount-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .amount {
      font-weight: bold;
      
      &.peso {
        color: #409eff;
      }
      
      &.rmb {
        color: #e6a23c;
      }
    }

    .commission {
      color: #67c23a;
      font-weight: bold;
    }

    .no-commission {
      color: #909399;
    }

    .text-muted {
      color: #909399;
      font-size: 12px;
    }
  }

  .pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .currency-hint {
    margin-left: 10px;
    color: #909399;
    font-size: 12px;
  }

  .amount-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    
    .peso {
      color: #409eff;
      font-weight: bold;
    }
    
    .rmb {
      color: #e6a23c;
      font-weight: bold;
    }
  }

  .cancel-reason {
    color: #f56c6c;
  }
}
</style>
