<!-- SPEC: PJ2026-010405 云端控制台 / API Keys. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<!-- Responsibility: 提供链接拥有交互语义的 API Key 实体卡片。 -->

<script setup lang="ts">
import { KeyRound } from "lucide-vue-next";
import { RouterLink, type RouteLocationRaw } from "vue-router";
import EntityCard from "@/components/common/EntityCard.vue";
import type { ApiKeyRecord } from "@/types";

defineProps<{ apiKey: ApiKeyRecord; selected: boolean; to: RouteLocationRaw }>();
function formatDate(value: string | null | undefined): string { if (!value) return "从未使用"; const date = new Date(value); return Number.isNaN(date.getTime()) ? value : date.toLocaleString(); }
</script>

<template>
  <RouterLink class="industrial-card-link" :to="to">
    <EntityCard
      :icon="KeyRound"
      :title="apiKey.name || apiKey.id"
      :subtitle="apiKey.id"
      :status="apiKey.revokedAt ? 'disabled' : 'active'"
      :status-label="apiKey.revokedAt ? 'revoked' : 'active'"
      :selected="selected"
      :interactive="false"
    >
      <template #meta>
        <code>{{ apiKey.prefix || '-' }}</code>
        <span>LAST USED {{ formatDate(apiKey.lastUsedAt) }}</span>
      </template>
      <template #footer><span>查看 Key 详情</span><span aria-hidden="true">→</span></template>
    </EntityCard>
  </RouterLink>
</template>
