<script setup lang="ts">
import { NButton, NSelect, NSpin, NTabPane, NTabs, NTooltip } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { RouterLink, useRoute, useRouter } from 'vue-router'

import { deleteConfig, getConfig, verifyConfig } from '@/api/configs'
import { listIdentityDomains } from '@/api/tenant'
import AccountTypeBadge from '@/components/AccountTypeBadge.vue'
import AuditLogTab from '@/components/tenant/AuditLogTab.vue'
import ConfirmPop from '@/components/ConfirmPop.vue'
import EmptyCard from '@/components/EmptyCard.vue'
import CostTab from '@/components/tenant/CostTab.vue'
import InvoiceTab from '@/components/tenant/InvoiceTab.vue'
import DeadPlaceholder from '@/components/DeadPlaceholder.vue'
import IdpTab from '@/components/tenant/IdpTab.vue'
import MiscTab from '@/components/tenant/MiscTab.vue'
import OcidText from '@/components/OcidText.vue'
import QuotaTab from '@/components/tenant/QuotaTab.vue'
import StatusBadge from '@/components/StatusBadge.vue'
import SubsTab from '@/components/tenant/SubsTab.vue'
import UsersTab from '@/components/tenant/UsersTab.vue'
import { aliveMeta } from '@/composables/useAliveStatus'
import { fmtTime } from '@/composables/useFormat'
import { useRegionAlias } from '@/composables/useRegionAlias'
import { useAsync } from '@/composables/useAsync'
import { useScopeStore } from '@/stores/scope'
import { useToast } from '@/composables/useToast'

const scope = useScopeStore()
const route = useRoute()
const router = useRouter()
const message = useToast()
const { alias: regionAlias } = useRegionAlias()

const cfgId = computed(() => Number(route.params.id))
const tab = ref('quota')
const verifying = ref(false)

const config = useAsync(() => getConfig(cfgId.value))

/** 失联/暂停租户各 tab 拉不到云端数据，内容区整体换占位 */
const isBlocked = computed(() =>
  ['dead', 'suspended'].includes(config.data.value?.aliveStatus ?? ''),
)

// ---- 身份域:用户 / IDP / 其他 三个 tab 共享的域上下文 ----
// 拉取失败(无权限/老租户)静默降级:不显示选择器,各 tab 走缺省 Default 路径
const domains = useAsync(async () => {
  try {
    return await listIdentityDomains(cfgId.value)
  } catch {
    return []
  }
})
const domainId = ref<string | undefined>(undefined)
watch(domains.data, (list) => {
  if (!list?.length) return
  const preferred = list.find((d) => d.displayName === 'Default') ?? list[0]
  domainId.value ??= preferred.id
})
const domainOptions = computed(
  () => domains.data.value?.map((d) => ({ label: d.displayName, value: d.id })) ?? [],
)
/** 域选择器只在多域租户的域相关 tab 显示 */
const showDomainPicker = computed(
  () => (domains.data.value?.length ?? 0) > 1 && ['users', 'idp', 'misc'].includes(tab.value),
)

async function verify() {
  verifying.value = true
  try {
    const result = await verifyConfig(cfgId.value)
    const changed = Object.keys(result.changes).length
    message.success(changed ? `测活完成，${changed} 个字段有变更` : '测活完成，无变更')
    void config.run()
    void scope.refreshConfigs()
  } catch (e) {
    message.error(e instanceof Error ? e.message : '测活失败')
  } finally {
    verifying.value = false
  }
}

async function remove() {
  try {
    await deleteConfig(cfgId.value)
    message.success('已删除租户及关联本地数据，OCI 云端资源未受影响')
    void scope.refreshConfigs()
    void router.push({ name: 'tenants' })
  } catch (e) {
    message.error(e instanceof Error ? e.message : '删除失败')
  }
}
</script>

<template>
  <div class="flex flex-col gap-4 p-6 pb-8 max-md:p-3">
    <div
      v-if="config.loading.value && !config.data.value"
      class="panel flex items-center justify-center py-20"
    >
      <NSpin size="small" />
    </div>
    <div v-else-if="config.error.value" class="panel">
      <EmptyCard title="租户加载失败" :note="config.error.value" />
    </div>

    <div v-if="config.data.value" class="panel px-5 pt-4 pb-0">
      <RouterLink
        class="mb-2 inline-flex items-center gap-1.5 text-[13px] text-ink-3 hover:text-ink"
        :to="{ name: 'tenants' }"
      >
        ← 返回租户列表
      </RouterLink>

      <div class="flex flex-wrap items-center gap-3">
        <h1 class="page-title">{{ config.data.value.alias }}</h1>
        <NTooltip
          v-if="isBlocked && config.data.value.lastError"
          trigger="hover"
          placement="top-start"
        >
          <template #trigger>
            <StatusBadge
              :kind="aliveMeta(config.data.value.aliveStatus).kind"
              :label="aliveMeta(config.data.value.aliveStatus).label"
            />
          </template>
          <div class="max-w-80 text-xs">{{ config.data.value.lastError }}</div>
        </NTooltip>
        <StatusBadge
          v-else
          :kind="aliveMeta(config.data.value.aliveStatus).kind"
          :label="aliveMeta(config.data.value.aliveStatus).label"
        />
        <AccountTypeBadge :type="config.data.value.accountType" />
        <div class="flex-1" />
        <NButton size="small" :loading="verifying" @click="verify">立即测活</NButton>
        <ConfirmPop
          :title="`删除「${config.data.value.alias}」？`"
          content="将清理面板内关联数据。"
          note="云端日志回传链路请先在「其他」页销毁"
          confirm-text="删除"
          placement="bottom-end"
          :on-confirm="remove"
        >
          <template #trigger>
            <NButton size="small" type="error" ghost>删除租户</NButton>
          </template>
        </ConfirmPop>
      </div>

      <div class="mt-3 grid grid-cols-4 gap-4 pb-4 max-lg:grid-cols-2 max-md:grid-cols-1">
        <div class="min-w-0">
          <div class="text-xs text-ink-3">租户名</div>
          <div class="mono mt-0.5 truncate text-[13px]">{{ config.data.value.tenancyName }}</div>
        </div>
        <div class="min-w-0">
          <div class="text-xs text-ink-3">Tenancy OCID</div>
          <div class="mt-0.5"><OcidText :ocid="config.data.value.tenancyOcid" /></div>
        </div>
        <div class="min-w-0">
          <div class="text-xs text-ink-3">主区域</div>
          <div class="mt-0.5 text-[13px]">{{ regionAlias(config.data.value.region) }}</div>
        </div>
        <div class="min-w-0">
          <div class="text-xs text-ink-3">导入时间</div>
          <div class="mt-0.5 text-[13px]">{{ fmtTime(config.data.value.createdAt).slice(0, 10) }}</div>
        </div>
      </div>

      <NTabs v-model:value="tab" type="line" class="tenant-tabs">
        <NTabPane name="quota" tab="配额" />
        <NTabPane name="idp" tab="IDP" />
        <NTabPane name="users" tab="用户" />
        <NTabPane name="cost" tab="成本" />
        <NTabPane name="invoice" tab="发票" />
        <NTabPane name="subs" tab="订阅" />
        <NTabPane name="audit" tab="审计日志" />
        <NTabPane name="misc" tab="其他" />
        <template #suffix>
          <!-- 多域租户:用户/IDP/其他 tab 按选中域读写 -->
          <div v-if="showDomainPicker" class="w-64 max-md:w-44">
            <NSelect v-model:value="domainId" size="small" :options="domainOptions" placeholder="身份域" />
          </div>
        </template>
      </NTabs>
    </div>

    <template v-if="config.data.value">
      <DeadPlaceholder
        v-if="isBlocked"
        :last-error="config.data.value.lastError"
        :suspended="config.data.value.aliveStatus === 'suspended'"
      />
      <template v-else>
        <QuotaTab v-if="tab === 'quota'" :cfg-id="cfgId" />
        <!-- 域相关 tab 以 domainId 为 key:切域整组件重挂载,状态与数据全量刷新 -->
        <IdpTab v-else-if="tab === 'idp'" :key="`idp-${domainId ?? ''}`" :cfg-id="cfgId" :domain-id="domainId" />
        <UsersTab v-else-if="tab === 'users'" :key="`users-${domainId ?? ''}`" :cfg-id="cfgId" :domain-id="domainId" />
        <CostTab v-else-if="tab === 'cost'" :cfg-id="cfgId" />
        <InvoiceTab v-else-if="tab === 'invoice'" :cfg-id="cfgId" />
        <SubsTab v-else-if="tab === 'subs'" :cfg-id="cfgId" :account-type="config.data.value.accountType" />
        <AuditLogTab v-else-if="tab === 'audit'" :cfg-id="cfgId" />
        <MiscTab v-else :key="`misc-${domainId ?? ''}`" :cfg-id="cfgId" :domain-id="domainId" />
      </template>
    </template>
  </div>
</template>

<style scoped>
.tenant-tabs :deep(.n-tabs-nav) {
  overflow-x: auto;
}
</style>
