<script setup lang="ts">
import { NPopover } from 'naive-ui'
import { useRouter } from 'vue-router'

import { useRegionAlias } from '@/composables/useRegionAlias'

/** 租户悬停卡(AI 网关渠道 / 回传日志共用):别名、租户名称、主区域三行
 *  加「前往租户」入口;触发文本本身不承载跳转,避免误触。 */
const props = defineProps<{
  cfgId: number
  /** 触发文本(渠道名 / 租户别名) */
  label: string
  alias?: string
  tenancyName?: string
  region?: string
  /** 触发文本附加类(截断约束等) */
  labelClass?: string
}>()

const router = useRouter()
const { alias: regionAlias } = useRegionAlias()

function go(e: MouseEvent) {
  // 表格行自身可能有点击行为(如回传日志展开详情),跳转不冒泡
  e.stopPropagation()
  void router.push({ name: 'tenant-detail', params: { id: props.cfgId } })
}
</script>

<template>
  <NPopover trigger="hover" placement="top-start" :style="{ maxWidth: '320px' }">
    <template #trigger>
      <span
        class="cursor-help border-b border-dashed border-ink-3/50 text-[13px]"
        :class="labelClass"
      >
        {{ label }}
      </span>
    </template>
    <div class="flex min-w-40 flex-col text-xs">
      <div class="pb-1.5 text-[13px] font-semibold break-all">{{ alias ?? label }}</div>
      <div v-if="tenancyName" class="mono border-t border-line-soft py-1.5 break-all text-ink-2">
        {{ tenancyName }}
      </div>
      <div v-if="region" class="border-t border-line-soft py-1.5 text-ink-2">
        {{ regionAlias(region) }}
      </div>
      <button
        type="button"
        class="cursor-pointer border-t border-line-soft pt-1.5 text-left font-medium text-accent"
        @click="go"
      >
        前往租户
      </button>
    </div>
  </NPopover>
</template>
