<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'

import type { WithdrawalDetail } from '@/features/admin/api/adminWithdrawal'
import { reviewWithdrawal, confirmPayment } from '@/features/admin/api/adminWithdrawal'
import { formatCent } from '@/shared/utils/money'

const props = defineProps<{
  modelValue: boolean
  withdrawal: WithdrawalDetail | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void
  (e: 'saved'): void
}>()

const submitting = ref(false)

async function handleReview(approved: boolean) {
  if (!props.withdrawal) return

  const action = approved ? '通过' : '拒绝'
  try {
    const { value: remark } = await ElMessageBox.prompt(
      `请输入${action}原因（可选）`,
      `${action}审核`,
      {
        confirmButtonText: `确认${action}`,
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputPlaceholder: '输入备注信息...',
      }
    )

    submitting.value = true
    await reviewWithdrawal(props.withdrawal.id, {
      approved,
      remark: remark || '',
    })

    ElMessage.success(`审核${action}`)
    emit('saved')
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error(error.response?.data?.message || '操作失败')
    }
  } finally {
    submitting.value = false
  }
}

async function handleConfirmPayment() {
  if (!props.withdrawal) return

  try {
    const { value: remark } = await ElMessageBox.prompt(
      '请输入打款备注（如：已通过支付宝转账）',
      '确认打款',
      {
        confirmButtonText: '确认完成',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputPlaceholder: '输入打款备注...',
        inputValidator: value => {
          return value && value.trim().length > 0
        },
        inputErrorMessage: '请输入打款备注',
      }
    )

    submitting.value = true
    await confirmPayment(props.withdrawal.id, {
      remark: remark || '',
    })

    ElMessage.success('打款完成')
    emit('saved')
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error(error.response?.data?.message || '操作失败')
    }
  } finally {
    submitting.value = false
  }
}

function statusLabel(status: string) {
  const labels: Record<string, string> = {
    pending: '待审核',
    processing: '处理中',
    completed: '已完成',
    rejected: '已拒绝',
    cancelled: '已取消',
  }
  return labels[status] || status
}

function statusType(status: string) {
  return status === 'completed'
    ? 'success'
    : status === 'pending'
      ? 'warning'
      : status === 'processing'
        ? 'primary'
        : status === 'rejected'
          ? 'danger'
          : 'info'
}

function accountTypeLabel(type: string) {
  const labels: Record<string, string> = {
    alipay: '支付宝',
    wechat: '微信',
    bank: '银行卡',
  }
  return labels[type] || type
}
</script>

<template>
  <el-dialog
    :model-value="modelValue"
    title="提现详情"
    width="700px"
    @update:model-value="emit('update:modelValue', $event)"
  >
    <div v-if="withdrawal" class="withdrawal-detail">
      <!-- 基本信息 -->
      <el-descriptions :column="2" border>
        <el-descriptions-item label="提现单号" :span="2">
          {{ withdrawal.withdraw_no }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="statusType(withdrawal.status)">
            {{ statusLabel(withdrawal.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请时间">
          {{ new Date(withdrawal.created_at).toLocaleString('zh-CN') }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 用户信息 -->
      <h3 style="margin-top: 20px">用户信息</h3>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="用户ID">
          {{ withdrawal.user_id }}
        </el-descriptions-item>
        <el-descriptions-item label="昵称">
          {{ withdrawal.user_nickname }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号" :span="2">
          {{ withdrawal.user_phone }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 金额信息 -->
      <h3 style="margin-top: 20px">金额信息</h3>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="提现金额">
          <span style="color: #f56c6c; font-weight: 600; font-size: 16px">
            ¥{{ formatCent(withdrawal.amount_cent) }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="手续费">
          ¥{{ formatCent(withdrawal.fee_cent) }}
        </el-descriptions-item>
        <el-descriptions-item label="实际到账" :span="2">
          <span style="color: #67c23a; font-weight: 600; font-size: 16px">
            ¥{{ formatCent(withdrawal.actual_amount_cent) }}
          </span>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 收款账号信息 -->
      <h3 style="margin-top: 20px">收款账号信息</h3>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="账号类型">
          <el-tag>{{ accountTypeLabel(withdrawal.account_type) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="账户名">
          {{ withdrawal.account_name }}
        </el-descriptions-item>
        <el-descriptions-item label="账号" :span="2">
          <span style="font-family: monospace; font-weight: 600">
            {{ withdrawal.account_no }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item v-if="withdrawal.bank_name" label="银行名称">
          {{ withdrawal.bank_name }}
        </el-descriptions-item>
        <el-descriptions-item v-if="withdrawal.bank_branch" label="开户支行">
          {{ withdrawal.bank_branch }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="withdrawal.certificate_urls && withdrawal.certificate_urls.length > 0"
          label="收款二维码"
          :span="2"
        >
          <div style="display: flex; gap: 8px; flex-wrap: wrap">
            <el-image
              v-for="(url, idx) in withdrawal.certificate_urls"
              :key="idx"
              :src="url"
              :preview-src-list="withdrawal.certificate_urls"
              :initial-index="idx"
              fit="cover"
              style="width: 100px; height: 100px; border-radius: 4px; cursor: pointer"
            />
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 审核信息 -->
      <div v-if="withdrawal.reviewed_at">
        <h3 style="margin-top: 20px">审核信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="审核人">
            {{ withdrawal.reviewed_by_name }}
          </el-descriptions-item>
          <el-descriptions-item label="审核时间">
            {{ new Date(withdrawal.reviewed_at).toLocaleString('zh-CN') }}
          </el-descriptions-item>
          <el-descriptions-item v-if="withdrawal.review_remark" label="审核备注" :span="2">
            {{ withdrawal.review_remark }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 打款信息 -->
      <div v-if="withdrawal.paid_at">
        <h3 style="margin-top: 20px">打款信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="打款人">
            {{ withdrawal.paid_by_name }}
          </el-descriptions-item>
          <el-descriptions-item label="打款时间">
            {{ new Date(withdrawal.paid_at).toLocaleString('zh-CN') }}
          </el-descriptions-item>
          <el-descriptions-item v-if="withdrawal.payment_remark" label="打款备注" :span="2">
            {{ withdrawal.payment_remark }}
          </el-descriptions-item>
          <el-descriptions-item v-if="withdrawal.payment_proof_url" label="打款凭证" :span="2">
            <el-link :href="withdrawal.payment_proof_url" target="_blank" type="primary">
              查看凭证
            </el-link>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 操作提示 -->
      <el-alert
        v-if="withdrawal.status === 'pending'"
        type="warning"
        :closable="false"
        show-icon
        style="margin-top: 20px"
      >
        <template #title>
          <div style="font-size: 13px">
            请仔细核对账号信息后进行审核。审核通过后，需要手动转账到用户账号，并确认打款完成。
          </div>
        </template>
      </el-alert>

      <el-alert
        v-if="withdrawal.status === 'processing'"
        type="info"
        :closable="false"
        show-icon
        style="margin-top: 20px"
      >
        <template #title>
          <div style="font-size: 13px">
            请手动转账
            <strong>¥{{ formatCent(withdrawal.actual_amount_cent) }}</strong> 到用户收款账号，
            完成后点击"确认打款"按钮。
          </div>
        </template>
      </el-alert>
    </div>

    <template #footer>
      <div style="display: flex; justify-content: space-between; width: 100%">
        <div>
          <el-button
            v-if="withdrawal?.status === 'pending'"
            type="success"
            :loading="submitting"
            @click="handleReview(true)"
          >
            通过审核
          </el-button>
          <el-button
            v-if="withdrawal?.status === 'pending'"
            type="danger"
            :loading="submitting"
            @click="handleReview(false)"
          >
            拒绝
          </el-button>
          <el-button
            v-if="withdrawal?.status === 'processing'"
            type="primary"
            :loading="submitting"
            @click="handleConfirmPayment"
          >
            确认打款
          </el-button>
        </div>
        <el-button @click="emit('update:modelValue', false)"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.withdrawal-detail h3 {
  margin: 20px 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}

:deep(.el-descriptions__label) {
  width: 120px;
}
</style>
