<script setup>
definePage({
  layout: 'PageLayout',
  style: {
    navigationBarTitleText: '下级推广收益',
    navigationStyle: 'default',
  },
})

import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useAgentStore } from '@/stores/agentStore'
import { getRevenueInfo, getRebateList } from '@/api/agent'

const agentStore = useAgentStore()
const { isAgent } = storeToRefs(agentStore)

const summary = ref(null)
const list = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const loading = ref(false)
const hasMore = ref(true)

async function loadSummary() {
  if (!isAgent.value) return
  const { data, error } = await getRevenueInfo()
  if (data.value?.code === 200 && !error.value) summary.value = data.value.data
}

async function loadList(isRefresh = false) {
  if (!isAgent.value) return
  if (loading.value) return
  const nextPage = isRefresh ? 1 : page.value
  if (!isRefresh && !hasMore.value) return
  loading.value = true
  try {
    const { data, error } = await getRebateList({ page: nextPage, page_size: pageSize.value })
    if (data.value?.code === 200 && !error.value) {
      const res = data.value.data
      total.value = res?.total ?? 0
      const items = res?.list || []
      if (nextPage === 1) {
        list.value = items
        page.value = 1
      } else {
        list.value = list.value.concat(items)
      }
      page.value = nextPage
      hasMore.value = list.value.length < total.value
    }
  } finally {
    loading.value = false
  }
}

function loadMore() {
  if (!hasMore.value || loading.value) return
  page.value += 1
  loadList(false)
}

function rebateTypeText(type) {
  const map = { 1: '直接上级返佣', 2: '钻石上级返佣', 3: '黄金上级返佣' }
  return map[type] || '返佣'
}

function levelName(level) {
  const map = { 1: '普通', 2: '黄金', 3: '钻石' }
  return map[level] || '—'
}

onMounted(() => {
  if (isAgent.value) {
    loadSummary()
    loadList(true)
  }
})
</script>

<template>
  <view class="p-4 min-h-screen bg-gray-50">
    <view v-if="!isAgent" class="rounded-xl bg-white shadow p-6 text-center">
      <view class="text-gray-500 text-sm">请先注册成为代理</view>
    </view>
    <template v-else>
      <view v-if="summary" class="rounded-xl bg-white shadow p-4 mb-4">
        <view class="text-sm text-gray-500 mb-1">累计下级返佣收益</view>
        <view class="text-2xl font-bold text-green-500">¥ {{ (summary.rebate_total || 0).toFixed(2) }}</view>
        <view class="grid grid-cols-2 gap-3 mt-3 text-center">
          <view class="p-2 rounded-lg bg-gray-50">
            <view class="text-xs text-gray-500">今日</view>
            <view class="text-base font-semibold text-green-500">¥ {{ (summary.rebate_today || 0).toFixed(2) }}</view>
          </view>
          <view class="p-2 rounded-lg bg-gray-50">
            <view class="text-xs text-gray-500">本月</view>
            <view class="text-base font-semibold text-green-500">¥ {{ (summary.rebate_month || 0).toFixed(2) }}</view>
          </view>
        </view>
      </view>
      <view class="rounded-xl bg-white shadow overflow-hidden">
        <view class="p-4 border-b border-gray-100">
          <view class="text-base font-semibold text-gray-800">返佣明细</view>
          <view class="text-xs text-gray-500 mt-1">下级推广与升级产生的返佣</view>
        </view>
        <view v-if="loading && list.length === 0" class="p-6">
          <wd-skeleton :row="4" />
        </view>
        <view v-else-if="list.length === 0" class="p-8 text-center text-gray-500 text-sm">
          暂无返佣记录
        </view>
        <view v-else class="divide-y divide-gray-100">
          <view
            v-for="item in list"
            :key="item.id"
            class="p-4 flex items-center justify-between"
          >
            <view class="flex-1 min-w-0">
              <view class="font-medium text-gray-800">{{ item.source_agent_mobile || '下级代理' }}</view>
              <view class="text-xs text-gray-500 mt-0.5">{{ rebateTypeText(item.rebate_type) }} · {{ levelName(item.source_agent_level) }}代理</view>
              <view class="text-xs text-gray-500 mt-0.5">{{ item.create_time }}</view>
            </view>
            <view class="text-right flex-shrink-0 ml-3">
              <view class="text-lg font-bold text-green-500">+¥{{ (item.amount || 0).toFixed(2) }}</view>
            </view>
          </view>
        </view>
        <view v-if="loading && list.length > 0" class="p-3 text-center text-gray-400 text-sm">加载中…</view>
        <view v-else-if="hasMore && list.length > 0" class="p-3 text-center text-primary text-sm" @click="loadMore">加载更多</view>
      </view>
    </template>
  </view>
</template>
