<template>
  <div
    class="message-shell"
    :class="[
      `message-shell--${role}`,
      { 'message-shell--card': isCardBearing, 'message-shell--empty': isEmpty },
    ]"
  >
    <div class="message-shell__avatar">
      <slot name="avatar">
        <div
          v-if="avatar || color"
          class="message-shell__custom-avatar"
          :style="{ backgroundColor: color || '#1a1a1a' }"
        >
          <component :is="avatar" v-if="typeof avatar !== 'string' && avatar" />
          <template v-else>{{ avatar || (name ? name.charAt(0).toUpperCase() : '?') }}</template>
        </div>
        <a-avatar v-else-if="role === 'assistant'" :size="28" class="message-shell__avatar--assistant">
          <template #icon><RobotOutlined /></template>
        </a-avatar>
        <a-avatar v-else :size="28" class="message-shell__avatar--user">
          <template #icon><UserOutlined /></template>
        </a-avatar>
      </slot>
    </div>
    <div class="message-shell__body">
      <div class="message-shell__header">
        <!-- 方案B: 专家名字始终是纯文本 (粗体)，彩色身份由头像背景承担，
             不再渲染彩色 pill 名字徽章 -->
        <span
          v-if="expertName || name"
          class="message-shell__name"
          :class="{ 'message-shell__name--expert': !!expertName }"
        >{{ expertName || name }}</span>
        <span v-if="meta" class="message-shell__meta">{{ meta }}</span>
        <span
          v-if="streaming"
          class="message-shell__streaming-indicator"
          aria-label="正在生成"
        >…</span>
      </div>
      <div class="message-shell__content">
        <slot />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Avatar as AAvatar } from 'ant-design-vue'
import { RobotOutlined, UserOutlined } from '@ant-design/icons-vue'
import type { Component } from 'vue'
import { isCardBearingType } from '../helpers/bubbleUtils'

interface Props {
  role: 'user' | 'assistant'
  name?: string
  meta?: string
  avatar?: string | Component
  color?: string
  /** U4 R10: 专家身份 badge 名称 — 存在时渲染为粗体文本替代普通 name */
  expertName?: string
  /** U4: 流式进行中 — 显示省略号指示器 */
  streaming?: boolean
  /** U3 F4-A: 消息类型 — card-bearing 类型不加气泡 (由 card 自带 chrome) */
  messageType?: string
  /** U3 G1: 消息内容为空 (pre-stream / tool-call-only) — 隐藏空气泡矩形 */
  isEmpty?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  name: undefined,
  meta: undefined,
  avatar: undefined,
  color: undefined,
  expertName: undefined,
  streaming: false,
  messageType: undefined,
  isEmpty: false,
})

const isCardBearing = computed(() => isCardBearingType(props.messageType))
</script>

<style scoped>
.message-shell {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-message-gap);
  animation: shellSlideIn 0.2s ease-out;
}

@keyframes shellSlideIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-shell--user {
  flex-direction: row-reverse;
}

.message-shell__avatar {
  flex-shrink: 0;
  padding-top: 2px;
}

.message-shell__avatar--assistant {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.message-shell__avatar--user {
  background: var(--text-primary);
  color: var(--text-inverse);
}

.message-shell__custom-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

.message-shell__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.message-shell--user .message-shell__body {
  align-items: flex-end;
}

.message-shell--assistant .message-shell__body {
  align-items: flex-start;
  max-width: 100%;
}

.message-shell__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--font-xs);
}

.message-shell__name {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

/* 方案B: 专家名字 — 粗体文本 + 略深色，与普通 name 区分 (无 pill 背景) */
.message-shell__name--expert {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.message-shell__meta {
  color: var(--text-placeholder);
}

/* U4: 流式进行中指示器 */
.message-shell__streaming-indicator {
  color: var(--text-placeholder);
  font-weight: var(--font-weight-semibold);
  animation: shellBlink 1s steps(2, start) infinite;
}

@keyframes shellBlink {
  to {
    opacity: 0.2;
  }
}

.message-shell__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 100%;
}

.message-shell--user .message-shell__content {
  align-items: flex-end;
}

/* U3: assistant 浅灰圆角气泡 (方案B) — 仅 role=assistant 生效，user 不加气泡。
   F1-A: 用独立 token --bg-message-bubble (与 inline code/table 的 --bg-secondary 解耦)。
   不使用 !important，让 AssistantText 内部 pre/hljs/code/table 自然继承。 */
.message-shell--assistant .message-shell__content {
  background: var(--bg-message-bubble);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
}

/* F4-A: card-bearing assistant 类型不加气泡 (共 9 种，Round 4 扩展)。
   这些类型由各自 card 组件自带 chrome (BoardConclusionCard/TeamPlanCard full chrome，
   其余 7 种 partial chrome)，避免气泡嵌套冲突。 */
.message-shell--assistant.message-shell--card .message-shell__content {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* G1: 空内容 (pre-stream / tool-call-only) 隐藏气泡矩形，仅显示 thinking dots。
   替代 Round 1 D4-方案1 的 :empty (AssistantText 总渲染根 div 导致 :empty 永不匹配)。 */
.message-shell--assistant.message-shell--empty .message-shell__content {
  background: transparent;
  border: none;
  padding: 0;
}
</style>
