<!-- SPEC: PJ2026-010405 云端控制台 / Billing. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<script setup lang="ts">
import EntityIndex from "@/components/console/EntityIndex.vue";
import type { RedeemCodeSummary } from "@/types";

defineProps<{ codes: RedeemCodeSummary[]; selectedId: string | null; status: string }>();
const emit = defineEmits<{ select: [code: RedeemCodeSummary]; "update:status": [value: string] }>();
const codeKey = (code: RedeemCodeSummary): string => String(code.id || code.codePrefix || "");
const formatNumber = (value: unknown): string => Number(value ?? 0).toLocaleString();
</script>

<template>
  <EntityIndex :items="codes" :item-key="codeKey" :selected-id="selectedId" label="兑换码索引" @select="emit('select', $event)">
    <template #toolbar>
      <select :value="status" class="input" @change="emit('update:status', ($event.target as HTMLSelectElement).value)">
        <option value="">全部状态</option><option value="active">active</option><option value="disabled">disabled</option><option value="expired">expired</option>
      </select>
      <small>{{ codes.length }} codes</small>
    </template>
    <template #item="{ item }">
      <strong><code>{{ item.codePrefix }}</code> {{ item.displayName || item.id }}</strong>
      <small>{{ formatNumber(item.creditAmount) }} credits · {{ formatNumber(item.redeemedCount) }}/{{ formatNumber(item.maxRedemptions) }}</small>
      <span class="status-pill" :data-status="item.status">{{ item.status }}</span>
    </template>
  </EntityIndex>
</template>
