<!-- SPEC: PJ2026-010405 云端控制台. -->
<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { adminSecretsAPI } from "@/api";
import ApiErrorDiagnostic from "@/components/common/ApiErrorDiagnostic.vue";
import AsyncBoundary from "@/components/common/AsyncBoundary.vue";
import ExternalSecretWorkspace from "@/components/secrets/ExternalSecretWorkspace.vue";
import PageCommandBar from "@/components/layout/PageCommandBar.vue";
import { normalizeAdminSecretsDetail, normalizeAdminSecretsEvents, type AdminSecretsDetailView, type AdminSecretsEventView } from "@/stores/admin-secrets-view";
import type { ApiError, ErrorDiagnostic } from "@/types";

const route = useRoute();
const router = useRouter();
const loading = ref(true);
const refreshing = ref(false);
const error = ref<string | null>(null);
const apiError = ref<ApiError | null>(null);
const diagnostic = ref<ErrorDiagnostic | null>(null);
const detail = ref<AdminSecretsDetailView | null>(null);
const events = ref<AdminSecretsEventView[]>([]);
const activeTab = computed<"details" | "events">({ get: () => route.query.tab === "events" ? "events" : "details", set: (value) => { const query = { ...route.query }; if (value === "details") delete query.tab; else query.tab = value; void router.replace({ query }); } });
const namespaceParam = computed(() => String(route.params.namespace ?? ""));
const nameParam = computed(() => String(route.params.name ?? ""));
const asyncState = computed(() => loading.value ? detail.value ? "refreshing" : "initial-loading" : error.value ? detail.value ? "partial" : "error" : detail.value ? "ready" : "empty");
onMounted(() => void reload());
watch([namespaceParam, nameParam], () => void reload());

async function reload(): Promise<void> {
  const namespace = namespaceParam.value;
  const name = nameParam.value;
  if (!namespace || !name) { error.value = "缺少 ExternalSecret namespace/name。"; loading.value = false; return; }
  refreshing.value = true; if (!detail.value) loading.value = true; error.value = null; apiError.value = null; diagnostic.value = null;
  const [detailResult, eventsResult] = await Promise.all([adminSecretsAPI.detail(namespace, name), adminSecretsAPI.events({ namespace, name, limit: 80 })]);
  if (!detailResult.ok) { error.value = detailResult.error ?? `HTTP ${detailResult.status}`; apiError.value = detailResult.apiError ?? null; diagnostic.value = detailResult.diagnostic ?? null; }
  else { detail.value = normalizeAdminSecretsDetail(detailResult.data?.item); events.value = normalizeAdminSecretsEvents(eventsResult.ok ? eventsResult.data?.events : detailResult.data?.events); }
  loading.value = false; refreshing.value = false;
}
function backToList(): void { void router.push({ name: "AdminSecrets" }); }
</script>

<template>
  <section class="route-stack secrets-admin-page external-secret-detail-page">
    <PageCommandBar eyebrow="Admin / 密钥" :title="detail?.name || nameParam" description="当前 ExternalSecret 的脱敏详情与资源级事件。" />
    <AsyncBoundary :state="asyncState" :has-content="Boolean(detail)" label="加载 ExternalSecret" empty-title="ExternalSecret 不存在" empty-description="当前资源未返回详情。" error-title="ExternalSecret 加载失败" :error="error || '请求未完成'" @retry="reload">
      <template #error><ApiErrorDiagnostic :error="error || '请求未完成'" :api-error="apiError" :diagnostic="diagnostic" /></template>
      <ExternalSecretWorkspace v-if="detail" v-model:active-tab="activeTab" :detail="detail" :events="events" :refreshing="refreshing" @back="backToList" @refresh="reload" />
    </AsyncBoundary>
  </section>
</template>
