<template>
  <div class="board-round-card" :class="[`board-round-card--${role}`]">
    <div class="board-round-card__header">
      <span
        class="board-round-card__avatar"
        :style="avatarStyle"
      >
        {{ avatar || name.charAt(0) }}
      </span>
      <span class="board-round-card__name">{{ name }}</span>
      <span v-if="round" class="board-round-card__round">第 {{ round }} 轮</span>
      <span v-if="roleTag" class="board-round-card__role">{{ roleTag }}</span>
    </div>
    <div class="board-round-card__content">
      <AssistantText :message="textMessage" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { IChatMessage } from '@/api/types'
import AssistantText from './AssistantText.vue'

interface Props {
  name: string
  avatar?: string
  color?: string
  round?: number
  role?: 'moderator' | 'expert' | 'summary'
  content: string
}

const props = withDefaults(defineProps<Props>(), {
  avatar: '',
  role: 'expert',
})

const roleTag = computed(() => {
  const tags: Record<string, string> = {
    moderator: '主持',
    expert: '专家',
    summary: '小结',
  }
  return tags[props.role] || ''
})

const avatarStyle = computed(() => {
  if (props.color) {
    return { background: props.color }
  }
  return { background: 'var(--accent-board)' }
})

const textMessage = computed<IChatMessage>(() => ({
  id: `board-${props.name}-${props.round || 0}`,
  role: 'assistant',
  content: props.content,
  timestamp: new Date().toISOString(),
  status: 'completed',
}))
</script>

<style scoped>
.board-round-card {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-board);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.board-round-card--summary {
  background: var(--accent-board-soft);
  border-left-color: var(--accent-board);
}

.board-round-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color);
}

.board-round-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  font-size: 12px;
  color: var(--text-inverse);
}

.board-round-card__name {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.board-round-card__round {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.board-round-card__role {
  margin-left: auto;
  font-size: var(--font-xs);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-board-soft);
  color: var(--accent-board);
}

.board-round-card__content {
  padding: var(--space-2) var(--space-3);
}

.board-round-card__content :deep(p) {
  margin: 0;
}
</style>
