<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import api from '../api';
import { formatMoney } from '../utils/localeDisplay';

const { t, locale } = useI18n();
const transactions = ref<
  Array<{ transactionType: string; amount: string; createdAt: string; transactionId?: string }>
>([]);

const TX_KEY_MAP: Record<string, string> = {
  MANUAL_DEPOSIT: 'wallet.tx_deposit',
  MANUAL_WITHDRAW: 'wallet.tx_withdraw',
  MANUAL_ADJUST: 'wallet.tx_adjust',
  BET_FREEZE: 'wallet.tx_bet_freeze',
  BET_DEDUCT: 'wallet.tx_bet_deduct',
  BET_SETTLE_WIN: 'wallet.tx_bet_win',
  BET_SETTLE_LOSE: 'wallet.tx_bet_lose',
  BET_SETTLE_PUSH: 'wallet.tx_bet_push',
  BET_WIN: 'wallet.tx_bet_win',
  BET_REFUND: 'wallet.tx_bet_refund',
  BET_VOID: 'wallet.tx_bet_void',
  BET_VOID_REFUND: 'wallet.tx_bet_void',
  CASHBACK: 'wallet.tx_cashback',
  RESETTLE_REVERSE: 'wallet.tx_resettle',
  DEPOSIT: 'wallet.tx_deposit',
  WITHDRAW: 'wallet.tx_withdraw',
};

function txLabel(type: string): string {
  const key = TX_KEY_MAP[type.toUpperCase()];
  if (key) {
    const translated = t(key);
    if (translated !== key) return translated;
  }
  return type;
}

onMounted(async () => {
  const { data } = await api.get('/player/wallet/transactions');
  transactions.value = data.data.items ?? [];
});
</script>

<template>
  <div>
    <h2 class="section-title">{{ t('nav.wallet') }}</h2>
    <div v-if="transactions.length" class="card">
      <div
        v-for="tx in transactions"
        :key="tx.transactionId ?? tx.createdAt"
        class="tx-row"
      >
        <span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
        <span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
          {{ formatMoney(tx.amount, locale) }}
        </span>
        <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
      </div>
    </div>
    <div v-else class="empty">{{ t('wallet.no_records') }}</div>
  </div>
</template>

<style scoped>
.tx-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.tx-row:last-child {
  border-bottom: none;
}
.tx-type { font-weight: 700; color: var(--text); }
.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
.neg { color: var(--danger); font-weight: 700; }
.tx-time { width: 100%; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
</style>
