<script setup lang="ts">
import { ArrowDownLeft, ArrowUpRight, Loader2, Receipt, RotateCcw } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'

import { BasicPage } from '@/components/global-layout'
import api from '@/services/api'

const { t } = useI18n()

interface Transaction {
  id: number
  type: string
  amount: number
  description: string
  balance: number
  created_at: string
}

const loading = ref(true)
const balance = ref(0)
const transactions = ref<Transaction[]>([])

onMounted(async () => {
  try {
    const data = await api.get<{ balance: number, transactions: Transaction[] }>('/agent/finance')
    balance.value = data?.balance || 0
    transactions.value = data?.transactions || []
  }
  catch (error) {
    console.error('Load finance data failed:', error)
  }
  finally {
    loading.value = false
  }
})

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleString()
}

function getTypeLabel(type: string) {
  const map: Record<string, string> = {
    recharge: '充值',
    consume: '消费',
    refund: '退款',
  }
  return map[type] || type
}

function getTypeClass(type: string) {
  const map: Record<string, string> = {
    recharge: 'text-green-500',
    consume: 'text-red-500',
    refund: 'text-blue-500',
  }
  return map[type] || ''
}
</script>

<template>
  <BasicPage
    :title="t('nav.finance')"
    description="财务管理"
    sticky
  >
    <div class="grid gap-4 md:grid-cols-3">
      <UiCard>
        <UiCardHeader class="pb-2">
          <UiCardTitle class="text-sm font-medium">
            账户余额
          </UiCardTitle>
        </UiCardHeader>
        <UiCardContent>
          <div class="text-3xl font-bold">
            ¥{{ balance.toFixed(2) }}
          </div>
        </UiCardContent>
      </UiCard>
    </div>

    <UiCard class="mt-6">
      <UiCardHeader>
        <UiCardTitle>交易记录</UiCardTitle>
      </UiCardHeader>
      <UiCardContent class="p-0">
        <div v-if="loading" class="flex items-center justify-center py-12">
          <Loader2 class="size-8 animate-spin text-muted-foreground" />
        </div>

        <div v-else-if="transactions.length === 0" class="text-center py-12 text-muted-foreground">
          <Receipt class="size-16 mx-auto mb-4 opacity-30" />
          <p>暂无交易记录</p>
        </div>

        <div v-else class="divide-y">
          <div
            v-for="tx in transactions"
            :key="tx.id"
            class="flex items-center justify-between p-4 hover:bg-muted/30"
          >
            <div class="flex items-center gap-4">
              <div
                class="size-10 rounded-xl flex items-center justify-center"
                :class="tx.type === 'recharge' ? 'bg-green-500/10' : tx.type === 'refund' ? 'bg-blue-500/10' : 'bg-red-500/10'"
              >
                <component
                  :is="tx.type === 'recharge' ? ArrowDownLeft : tx.type === 'refund' ? RotateCcw : ArrowUpRight"
                  :class="getTypeClass(tx.type)"
                  class="size-5"
                />
              </div>
              <div>
                <p class="font-medium">
                  {{ tx.description || getTypeLabel(tx.type) }}
                </p>
                <p class="text-xs text-muted-foreground">
                  {{ formatDate(tx.created_at) }}
                </p>
              </div>
            </div>
            <div class="text-right">
              <p :class="getTypeClass(tx.type)" class="font-semibold text-lg">
                {{ tx.type === 'recharge' || tx.type === 'refund' ? '+' : '-' }}¥{{ tx.amount.toFixed(2) }}
              </p>
              <p class="text-xs text-muted-foreground">
                余额: ¥{{ tx.balance.toFixed(2) }}
              </p>
            </div>
          </div>
        </div>
      </UiCardContent>
    </UiCard>
  </BasicPage>
</template>
