<template>
  <div class="flex flex-1 flex-col overflow-hidden">
    <div class="h-[430px] overflow-y-auto pr-1">
      <div v-if="loading" class="flex h-40 items-center justify-center">
        <div
          class="h-8 w-8 animate-spin rounded-full border-4 border-[#ADFF5B] border-t-transparent"
        ></div>
      </div>
      <div
        v-else-if="list.length === 0"
        class="flex h-40 items-center justify-center text-gray-500"
      >
        {{ emptyText }}
      </div>
      <div v-else class="space-y-[10px]">
        <div
          v-for="item in list"
          :key="item.id"
          class="rounded-[20px] bg-[#CECECF] py-2 text-[14px] font-normal text-black"
        >
          <div v-if="showContent" class="grid grid-cols-2 gap-y-2">
            <div class="pl-4">
              <div class="text-xs text-gray-500">{{ amountLabel }}</div>
              <div class="font-bold text-[#222]">${{ formatAmount(item.amount) }}</div>
            </div>
            <div>
              <div class="text-xs text-gray-500">退费时间</div>
              <div class="whitespace-nowrap">{{ formatTime(item.created_at) }}</div>
            </div>
            <div class="col-span-2 px-4">
              <div class="text-xs text-gray-500">说明</div>
              <div class="break-words leading-snug">{{ item.content || '-' }}</div>
            </div>
          </div>
          <div v-else class="grid grid-cols-2 gap-y-1">
            <div class="pl-4">
              <div class="text-xs text-gray-500">{{ amountLabel }}</div>
              <div class="font-bold text-[#222]">${{ formatAmount(item.amount) }}</div>
            </div>
            <div>
              <div class="text-xs text-gray-500">状态</div>
              <div class="font-medium">{{ statusText(item.status) }}</div>
            </div>

            <div class="pl-4">
              <div class="text-xs text-gray-500">提现方式</div>
              <div>{{ methodText(item.method) }}</div>
            </div>
            <div>
              <div class="text-xs text-gray-500">申请时间</div>
              <div class="whitespace-nowrap">{{ formatTime(item.created_at) }}</div>
            </div>

            <div v-if="item.reason" class="col-span-2 pl-4">
              <div class="text-xs text-gray-500">拒绝原因</div>
              <div class="break-all">{{ item.reason }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="total > 0" class="flex flex-col items-center pt-[18px]">
      <div class="mb-2 flex items-center gap-[10px]">
        <button
          @click="changePage(1)"
          :disabled="page === 1"
          class="flex h-[30px] min-w-[30px] items-center justify-center rounded-full bg-[#EAEAEA] transition-opacity disabled:opacity-30"
        >
          <span class="text-lg font-bold text-[#848484]">&lt;&lt;</span>
        </button>
        <button
          @click="changePage(page - 1)"
          :disabled="page === 1"
          class="flex h-[30px] min-w-[30px] items-center justify-center rounded-full bg-[#EAEAEA] transition-opacity disabled:opacity-30"
        >
          <span class="text-lg font-bold text-[#848484]">&lt;</span>
        </button>

        <div
          class="flex h-[30px] min-w-[65px] items-center justify-center rounded-full bg-[#EAEAEA] px-2"
        >
          <span class="text-base text-[#848484]">{{ page }}</span>
          <span class="ml-1 text-base text-[#848484]">v</span>
        </div>

        <button
          @click="changePage(page + 1)"
          :disabled="page >= totalPages"
          class="flex h-[30px] min-w-[30px] items-center justify-center rounded-full bg-[#EAEAEA] transition-opacity disabled:opacity-30"
        >
          <span class="text-lg font-bold text-[#848484]">&gt;</span>
        </button>
        <button
          @click="changePage(totalPages)"
          :disabled="page >= totalPages"
          class="flex h-[30px] min-w-[30px] items-center justify-center rounded-full bg-[#EAEAEA] transition-opacity disabled:opacity-30"
        >
          <span class="text-lg font-bold text-[#848484]">&gt;&gt;</span>
        </button>
      </div>
      <div class="text-xs font-[300] text-[#848484]">第 {{ page }} / {{ totalPages }} 页</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import request from '@/utils/request'

const props = withDefaults(
  defineProps<{
    bizType?: string
    amountLabel?: string
    emptyText?: string
    showContent?: boolean
  }>(),
  {
    bizType: '',
    amountLabel: '提现金额',
    emptyText: '暂无提现记录',
    showContent: false,
  },
)

interface WithdrawalLog {
  id: number
  amount: number
  status: number
  method: number
  content?: string
  reason?: string
  created_at: number
}

const page = ref(1)
const size = ref(4)
const total = ref(0)
const list = ref<WithdrawalLog[]>([])
const loading = ref(false)

const totalPages = computed(() => Math.ceil(total.value / size.value) || 1)

async function fetchLogs() {
  loading.value = true
  try {
    const res: any = await request.get('/api/v1/public/user/withdrawal_log', {
      page: page.value,
      size: size.value,
      ...(props.bizType ? { biz_type: props.bizType } : {}),
    })
    list.value = res.list || []
    total.value = res.total || 0
  } catch (error) {
    console.error('Fetch withdrawal logs error:', error)
  } finally {
    loading.value = false
  }
}

function refresh() {
  page.value = 1
  fetchLogs()
}

function changePage(p: number) {
  if (p < 1 || p > totalPages.value) return
  page.value = p
  fetchLogs()
}

function statusText(status: number) {
  const map: Record<number, string> = {
    0: '待审核',
    1: '已通过',
    2: '已拒绝',
    3: '已取消',
  }
  return map[status] || '未知'
}

function methodText(method: number) {
  const map: Record<number, string> = {
    0: '其他',
    1: '支付宝',
    2: '微信',
    3: 'USDT(TRC20)',
  }
  return map[method] || '未知'
}

function formatAmount(amount: number) {
  return ((amount || 0) / 100).toFixed(2)
}

function formatTime(timestamp: number) {
  if (!timestamp) return '-'
  const date = new Date(timestamp > 10000000000 ? timestamp : timestamp * 1000)
  return date.toLocaleString('zh-CN', {
    month: 'numeric',
    day: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
  })
}

defineExpose({
  refresh,
})
</script>
