<template>
  <div v-if="chatStore.boardState" class="board-status-view">
    <div class="board-status-view__header">
      <div class="board-status-view__title">
        <span class="board-status-view__label">私董会</span>
        <span class="board-status-view__topic">{{ chatStore.boardState.topic }}</span>
      </div>
      <span class="board-status-view__round">
        第 {{ chatStore.boardState.current_round }} / {{ chatStore.boardState.max_rounds }} 轮
      </span>
    </div>
    <div class="board-status-view__experts">
      <span
        v-for="expert in chatStore.boardState.experts"
        :key="expert.name"
        class="board-status-view__expert"
        :class="{ 'board-status-view__expert--moderator': expert.is_moderator }"
      >
        {{ expert.name }}
        <span v-if="expert.is_moderator" class="board-status-view__role">主持人</span>
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useChatStore } from '@/stores/chat'

const chatStore = useChatStore()
</script>

<style scoped>
.board-status-view {
  margin: 0 var(--space-5);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
}

.board-status-view__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.board-status-view__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  overflow: hidden;
}

.board-status-view__label {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  flex-shrink: 0;
}

.board-status-view__topic {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-status-view__round {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.board-status-view__experts {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.board-status-view__expert {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.board-status-view__expert--moderator {
  color: var(--accent-board);
}

.board-status-view__role {
  margin-left: 4px;
  color: var(--text-tertiary);
}
</style>
