<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { formatMoneyCompact, parseAmount } from '../utils/localeDisplay';

interface Transaction {
  transactionType: string;
  amount: string;
  createdAt: string;
  transactionId?: string;
}

const props = withDefaults(defineProps<{
  items: Transaction[];
  cashbackTotal?: string;
}>(), {
  cashbackTotal: '0',
});
const { t, locale } = useI18n();

const CASHBACK_TYPES = new Set(['CASHBACK', 'CASHBACK_DEPOSIT']);

const stats = computed(() => {
  let income = 0;
  let expense = 0;
  let cashback = 0;

  for (const tx of props.items) {
    const amt = parseAmount(tx.amount);
    const isCb = CASHBACK_TYPES.has(tx.transactionType.toUpperCase());
    if (isCb) {
      cashback += Math.abs(amt);
    }
    if (amt >= 0) income += amt;
    else expense += Math.abs(amt);
  }

  // Use server-side cashback total if provided (more accurate across all pages)
  if (props.cashbackTotal !== '0') {
    cashback = Math.abs(parseAmount(props.cashbackTotal));
  }

  const net = income - expense;

  return { income, expense, net, cashback };
});
</script>

<template>
  <div class="wallet-stats-panel">
    <div class="stats-row">
      <div class="stat-item">
        <span class="stat-val income">{{ formatMoneyCompact(stats.income, locale) }}</span>
        <span class="stat-label">{{ t('wallet.stats_income') }}</span>
      </div>
      <div class="stat-divider" />
      <div class="stat-item">
        <span class="stat-val expense">{{ formatMoneyCompact(stats.expense, locale) }}</span>
        <span class="stat-label">{{ t('wallet.stats_expense') }}</span>
      </div>
      <div class="stat-divider" />
      <div class="stat-item">
        <span class="stat-val" :class="stats.net >= 0 ? 'income' : 'expense'">
          {{ formatMoneyCompact(stats.net, locale) }}
        </span>
        <span class="stat-label">{{ t('wallet.stats_net') }}</span>
      </div>
      <div class="stat-divider" />
      <div class="stat-item">
        <span class="stat-val cashback">{{ formatMoneyCompact(stats.cashback, locale) }}</span>
        <span class="stat-label">{{ t('wallet.stats_cashback') }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.wallet-stats-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  margin-bottom: 12px;
  backdrop-filter: blur(10px);
}

.stats-row {
  display: flex;
  align-items: center;
}

.stat-item {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.stat-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0;
}

.stat-val {
  display: block;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-val.income { color: #3db865; }
.stat-val.expense { color: #e05050; }
.stat-val.cashback { color: #f0b90b; }

.stat-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 3px;
}
</style>
