<script lang="ts" setup>
import { computed } from 'vue'

import { isPrivateConversation } from '#/views/im/utils/constants'
import {
  type CardMessage,
  type CardTarget,
  getCardLabelInfo
} from '#/views/im/utils/message'

import { UserAvatar } from '../user'

defineOptions({ name: 'ImCardBubble' })

const props = withDefaults(
  defineProps<{
    /** 名片数据；CardMessage（接收侧消息体）或 CardTarget（发送侧预览）共用结构 */
    card: CardMessage | CardTarget
    /** 是否显示 cursor: pointer；调用方负责绑 @click 监听 */
    clickable?: boolean
  }>(),
  { clickable: false }
)

/** 是否用户名片：决定 UserAvatar 是否带 id 触发 UserInfoCard */
const isUser = computed(() => isPrivateConversation(props.card.targetType))
/** 名片标签信息 */
const labelInfo = computed(() => getCardLabelInfo(props.card))
</script>

<template>
  <!--
    名片消息气泡 / 名片预览卡（240px）：用户名片 + 群名片通用
    - 头像 + 名字 + 群成员数副标题（仅群名片）+ 底部分隔条「群名片 / 个人名片」
    - 用户名片把 :id 传给 UserAvatar 让点击 avatar 弹 UserInfoCard；群名片不传 id
    - 整卡 click 由调用方监听（@click），组件不内嵌业务逻辑
  -->
  <div
    class="flex flex-col w-[240px] rounded-md overflow-hidden bg-[var(--ant-color-bg-container)] border border-solid border-[var(--im-border-color-lighter)]"
    :class="{ 'cursor-pointer': clickable }"
  >
    <div class="flex gap-2.5 items-center px-3 py-2.5">
      <UserAvatar
        :id="isUser ? card.targetId : undefined"
        :url="card.avatar"
        :name="card.name"
        :size="40"
        :clickable="false"
      />
      <div class="flex flex-col flex-1 min-w-0">
        <div class="text-sm font-medium truncate text-[var(--ant-color-text)]">
          {{ card.name }}
        </div>
        <div
          v-if="!isUser && card.memberCount"
          class="text-12px truncate text-[var(--ant-color-text-placeholder)]"
        >
          {{ card.memberCount }} 人群聊
        </div>
      </div>
    </div>
    <div
      class="px-3 py-1 text-12px border-t border-t-solid text-[var(--ant-color-text-placeholder)] border-[var(--im-border-color-lighter)] bg-[var(--ant-color-fill-tertiary)]"
    >
      {{ labelInfo.label }}
    </div>
  </div>
</template>
