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

defineProps<{ code: RedeemCodeSummary; pending: boolean }>();
const emit = defineEmits<{ close: []; toggle: [code: RedeemCodeSummary] }>();
const formatNumber = (value: unknown): string => Number(value ?? 0).toLocaleString();
function formatDate(value: unknown): string { if (typeof value !== "string" || !value) return "-"; const date = new Date(value); return Number.isNaN(date.getTime()) ? value : date.toLocaleString(); }
</script>

<template>
  <InspectorPanel :title="code.displayName || code.codePrefix || code.id || '兑换码'" :subtitle="code.id" @close="emit('close')">
    <dl class="inspector-facts">
      <div><dt>Status</dt><dd>{{ code.status }}</dd></div>
      <div><dt>Credits</dt><dd>{{ formatNumber(code.creditAmount) }}</dd></div>
      <div><dt>Usage</dt><dd>{{ formatNumber(code.redeemedCount) }} / {{ formatNumber(code.maxRedemptions) }}</dd></div>
      <div><dt>Per user</dt><dd>{{ formatNumber(code.perUserLimit) }}</dd></div>
      <div><dt>Reason</dt><dd>{{ code.reason || "-" }}</dd></div>
      <div><dt>Expires</dt><dd>{{ formatDate(code.expiresAt) }}</dd></div>
    </dl>
    <button class="table-action" type="button" :disabled="pending" @click="emit('toggle', code)">{{ code.status === "disabled" ? "启用" : "禁用" }}</button>
  </InspectorPanel>
</template>
