<!-- SPEC: PJ2026-010405 云端控制台 / Secrets. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<!-- Responsibility: 以脱敏流向和紧凑清单呈现 Secret 库存。 -->

<script setup lang="ts">
import { List, Workflow } from "lucide-vue-next";
import EmptyState from "@/components/common/EmptyState.vue";
import ResourceCollection from "@/components/common/ResourceCollection.vue";
import StatusBadge from "@/components/common/StatusBadge.vue";
import FactPath, { type FactPathStep } from "@/components/console/FactPath.vue";
import ViewModeSwitch from "@/components/console/ViewModeSwitch.vue";
import SectionFrame from "@/components/layout/SectionFrame.vue";
import type { AdminSecretsRow } from "@/stores/admin-secrets-view";

defineProps<{
  selected: AdminSecretsRow | null;
  rows: AdminSecretsRow[];
  factSteps: FactPathStep[];
  generatedAt: string;
  view: "flow" | "list";
}>();
const emit = defineEmits<{
  select: [row: AdminSecretsRow];
  inspect: [row: AdminSecretsRow];
  "update:view": [value: "flow" | "list"];
}>();
const rowKey = (row: AdminSecretsRow): string =>
  `${row.cluster}:${row.namespace}:${row.name}`;
function displayDate(value: string): string {
  if (!value) return "-";
  const date = new Date(value);
  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
}
</script>

<template>
  <div v-if="selected" class="operations-main-stack">
    <div class="view-mode-row">
      <ViewModeSwitch
        :model-value="view"
        :options="[
          { value: 'flow', label: '流向', icon: Workflow },
          { value: 'list', label: '清单', icon: List },
        ]"
        @update:model-value="emit('update:view', $event as 'flow' | 'list')"
      />
    </div>
    <FactPath
      v-if="view === 'flow'"
      :steps="factSteps"
      label="Secret 脱敏事实路径"
    />
    <SectionFrame
      v-else
      title="库存清单"
      description="同一 ExternalSecret DTO 的紧凑字段视图。"
      :body-padding="false"
    >
      <ResourceCollection class="secret-compact-list" :items="rows" :item-key="rowKey" view="list" density="compact" :selected-id="rowKey(selected)" :show-controls="false" empty-text="暂无 ExternalSecret。" aria-label="ExternalSecret 库存清单">
        <template #list="{ item: row }"><button type="button" :data-selected="rowKey(row) === rowKey(selected)" @click="emit('select', row)">
          <strong>{{ row.namespace }}/{{ row.name }}</strong><StatusBadge :status="row.status" :label="row.status" /><code>{{ row.storeKind }}/{{ row.storeName }}</code><code>{{ row.targetSecretName }}</code><span>{{ row.ageText }}</span>
        </button></template>
      </ResourceCollection>
    </SectionFrame>
    <SectionFrame
      title="ExternalSecret 事实"
      description="库存主面只保留可扫描的来源、目标、状态与 fingerprint 元数据。"
    >
      <dl class="fact-grid">
        <div>
          <dt>Status</dt>
          <dd>
            <StatusBadge :status="selected.status" :label="selected.status" />
          </dd>
        </div>
        <div>
          <dt>Reason</dt>
          <dd>{{ selected.reason || "-" }}</dd>
        </div>
        <div>
          <dt>Refresh</dt>
          <dd>{{ selected.refreshInterval || "-" }}</dd>
        </div>
        <div>
          <dt>Age</dt>
          <dd>{{ selected.ageText }}</dd>
        </div>
        <div>
          <dt>Store scope</dt>
          <dd>{{ selected.storeScope || "-" }}</dd>
        </div>
        <div>
          <dt>Resource version</dt>
          <dd>
            <code>{{ selected.targetSecretResourceVersion || "-" }}</code>
          </dd>
        </div>
        <div>
          <dt>Last updated</dt>
          <dd>{{ displayDate(selected.lastUpdated) }}</dd>
        </div>
        <div>
          <dt>Generated</dt>
          <dd>{{ displayDate(generatedAt) }}</dd>
        </div>
      </dl>
    </SectionFrame>
    <SectionFrame
      title="安全边界"
      description="sourceRef/store → ExternalSecret → target Secret → consumer；不从运行面反解。"
      ><p class="muted-box">
        本页不展示 Secret 值、原始 provider payload
        或可逆凭据。Plan、事件、fingerprint 与原始诊断仅在授权详情层披露。
      </p>
      <button
        class="table-action"
        type="button"
        @click="emit('inspect', selected)"
      >
        打开脱敏详情
      </button></SectionFrame
    >
  </div>
  <EmptyState v-else title="没有匹配对象" description="调整库存筛选。" />
</template>
