<script setup lang="ts">
import { computed } from 'vue'
import type { FundSummary } from '@/api/commission'

type SummaryMetric = {
  label: string
  amount?: number | null
  cardClass: string
  labelClass: string
}

const props = defineProps<{
  summary?: FundSummary | null
}>()

const metrics = computed<SummaryMetric[]>(() => [
  {
    label: '预充值余额',
    amount: props.summary?.main_balance,
    cardClass: 'bg-[#f4fbf5] border border-[#e3f2e6]',
    labelClass: 'text-[#2f7d32]',
  },
  {
    label: '累计佣金',
    amount: props.summary?.total_commission,
    cardClass: 'bg-[#f8fafc] border border-[#eef2f6]',
    labelClass: 'text-[#6b7280]',
  },
  {
    label: '已提现',
    amount: props.summary?.withdrawn_commission,
    cardClass: 'bg-[#f8fafc] border border-[#eef2f6]',
    labelClass: 'text-[#6b7280]',
  },
  {
    label: '冻结',
    amount: props.summary?.frozen_commission,
    cardClass: 'bg-[#f8fafc] border border-[#eef2f6]',
    labelClass: 'text-[#6b7280]',
  },
])

function formatAmount(amount: number) {
  const yuan = (amount / 100).toFixed(2)
  const parts = yuan.split('.')
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  return `¥${parts.join('.')}`
}

function formatAmountDisplay(amount?: number | null) {
  return typeof amount === 'number' ? formatAmount(amount) : '--'
}
</script>

<template>
  <view class="bg-white rounded-20px shadow-[0_8px_24px_rgba(15,23,42,0.06)] p-5">
    <view class="rounded-18px bg-gradient-to-br from-[#f5fbf5] via-white to-[#f8fafc] p-4">
      <view class="flex items-start justify-between gap-3">
        <view class="min-w-0 flex-1">
          <view class="inline-flex items-center gap-1 rounded-full bg-[#e8f5e9] px-2.5 py-1">
            <i class="i-mdi-wallet-outline text-13px text-[#2f7d32]" />
            <text class="text-11px font-600 text-[#2f7d32]">可提现佣金</text>
          </view>
          <text class="text-34px font-700 leading-none text-[#1f2937] block mt-3 break-all">
            {{ formatAmountDisplay(summary?.available_commission) }}
          </text>
        </view>
        <image src="@/static/icons/佣金中心.png" class="w-16 h-16 shrink-0" mode="aspectFit" />
      </view>
    </view>

    <view class="grid grid-cols-2 gap-3 mt-4">
      <view
        v-for="metric in metrics"
        :key="metric.label"
        :class="metric.cardClass"
        class="rounded-16px px-3 py-3"
      >
        <text :class="metric.labelClass" class="text-11px block">
          {{ metric.label }}
        </text>
        <text class="text-15px font-700 text-[#1f2937] block mt-2 break-all">
          {{ formatAmountDisplay(metric.amount) }}
        </text>
      </view>
    </view>
  </view>
</template>
