<template>
  <div class="expert-message" :style="{ borderLeftColor: expertColor }">
    <div v-if="showExpertHeader" class="expert-message__header">
      <div v-if="expertAvatar" class="expert-message__emoji-avatar">{{ expertAvatar }}</div>
      <div v-else class="expert-message__avatar" :style="{ backgroundColor: expertColor }">
        {{ expertInitial }}
      </div>
      <span class="expert-message__name">{{ expertName }}</span>
      <a-tag v-if="isLead" color="gold" size="small">Lead</a-tag>
      <a-tag v-if="isModerator" color="purple" size="small">主持人</a-tag>
      <a-tag v-if="boardRound" :color="messageTypeColor" size="small">第{{ boardRound }}轮</a-tag>
      <a-tag v-else-if="messageType !== 'chat'" :color="messageTypeColor" size="small">
        {{ messageTypeLabel }}
      </a-tag>
    </div>
    <div class="expert-message__content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Tag as ATag } from 'ant-design-vue'

const props = withDefaults(defineProps<{
  expertName: string
  expertColor: string
  expertAvatar?: string
  isLead?: boolean
  isModerator?: boolean
  boardRound?: number
  messageType?: 'chat' | 'handoff' | 'assist_request' | 'plan_update' | 'milestone' | 'board_speech' | 'board_summary' | 'board_conclusion'
  showExpertHeader?: boolean
}>(), {
  expertAvatar: '',
  isLead: false,
  isModerator: false,
  boardRound: undefined,
  messageType: 'chat',
  showExpertHeader: true,
})

const expertInitial = computed(() => props.expertName.charAt(0).toUpperCase())

const messageTypeLabel = computed(() => {
  const labels: Record<string, string> = {
    handoff: '交接',
    assist_request: '请求协助',
    plan_update: '计划更新',
    milestone: '里程碑',
    board_speech: '发言',
    board_summary: '小结',
    board_conclusion: '总结',
  }
  return labels[props.messageType] || ''
})

const messageTypeColor = computed(() => {
  const colors: Record<string, string> = {
    handoff: 'blue',
    assist_request: 'green',
    plan_update: 'orange',
    milestone: 'purple',
    board_speech: 'cyan',
    board_summary: 'geekblue',
    board_conclusion: 'magenta',
  }
  return colors[props.messageType] || 'default'
})
</script>

<style scoped>
.expert-message {
  border-left: 3px solid var(--border-color);
  padding-left: var(--space-3);
  margin-bottom: var(--space-2);
}

.expert-message__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.expert-message__avatar {
  width: 24px;
  height: 24px;
  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;
}

.expert-message__emoji-avatar {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.expert-message__name {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-sm);
  color: var(--text-primary);
}

.expert-message__content {
  padding-left: 32px;
}
</style>
