<script setup lang="ts">
defineOptions({ name: 'AgentBets' });

import { ref } from 'vue';
import { useStaleListLifecycle } from '../../composables/useStaleList';
import { useAdminLocale } from '../../composables/useAdminLocale';
import api from '../../api';
import { formatAmount } from '../../utils/format-amount';
import { betStatusLabel, betStatusTagType, betTypeLabel } from '../../utils/bet-labels';

const { t } = useAdminLocale();

interface BetRow {
  id: string;
  betNo: string;
  betType?: string;
  stake: string | number;
  status: string;
  placedAt?: string;
  user?: { username?: string };
}

const bets = ref<BetRow[]>([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);

async function load() {
  const { data } = await api.get('/agent/bets', {
    params: { page: page.value, pageSize: pageSize.value },
  });
  bets.value = (data.data.items ?? []) as BetRow[];
  total.value = data.data.total ?? 0;
}

const { loading, runLoad } = useStaleListLifecycle(() => bets.value.length > 0, load);

function onPageChange(p: number) {
  page.value = p;
  void runLoad(true);
}

function onSizeChange(size: number) {
  pageSize.value = size;
  page.value = 1;
  void runLoad(true);
}
</script>

<template>
  <div class="admin-list-page">
    <div class="page-header">
      <h2 class="page-title">{{ t('page.agent_bets.title') }}</h2>
      <span class="page-desc">{{ t('page.agent_bets.desc') }}</span>
    </div>

    <el-card v-loading="loading" class="data-card" shadow="never">
      <div class="table-wrap">
        <el-table :data="bets" stripe>
          <el-table-column prop="id" :label="t('bet.col.serial')" width="56" align="center" />
          <el-table-column prop="betNo" :label="t('bet.col.bet_no')" width="168" show-overflow-tooltip>
            <template #default="{ row }">
              <span class="bet-no">{{ row.betNo }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="t('bet.col.player')" min-width="100">
            <template #default="{ row }">{{ row.user?.username ?? '—' }}</template>
          </el-table-column>
          <el-table-column :label="t('common.type')" width="88" align="center">
            <template #default="{ row }">
              <el-tag v-if="row.betType" type="info" size="small" effect="plain">
                {{ betTypeLabel(row.betType) }}
              </el-tag>
              <span v-else>—</span>
            </template>
          </el-table-column>
          <el-table-column :label="t('bet.col.stake')" width="110" align="right">
            <template #default="{ row }">{{ formatAmount(row.stake) }}</template>
          </el-table-column>
          <el-table-column :label="t('common.status')" width="96" align="center">
            <template #default="{ row }">
              <el-tag :type="betStatusTagType(row.status)" size="small">
                {{ betStatusLabel(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          background
          @current-change="onPageChange"
          @size-change="onSizeChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.page-header { display: flex; align-items: baseline; gap: 12px; }
.page-title  { font-size: 20px; font-weight: 700; color: #e0e0e0; }
.page-desc   { font-size: 13px; color: #3a3a3a; }
.data-card   { border-radius: 12px; }
.bet-no { font-size: 12px; color: var(--text); font-family: ui-monospace, monospace; word-break: break-all; }
</style>
