<template>
  <div class="board-banner-card">
    <div class="board-banner-card__bar" />
    <div class="board-banner-card__body">
      <div class="board-banner-card__title">
        <span class="board-banner-card__icon">🏛️</span>
        <span>私董会 — {{ topic }}</span>
      </div>
      <div class="board-banner-card__experts">
        <span
          v-for="(expert, idx) in experts"
          :key="`${expert.name}-${idx}`"
          class="board-banner-card__chip"
          :class="{ 'board-banner-card__chip--moderator': expert.is_moderator }"
        >
          <span class="board-banner-card__chip-avatar">{{ expert.avatar }}</span>
          <span>{{ expert.name }}</span>
        </span>
      </div>
      <div class="board-banner-card__meta">
        <span>轮次：第 {{ currentRound }} / {{ maxRounds }} 轮</span>
        <div class="board-banner-card__progress">
          <div
            class="board-banner-card__progress-fill"
            :style="{ width: progressPercent + '%' }"
          />
        </div>
      </div>
    </div>
  </div>
</template>

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

interface Props {
  topic: string
  experts: IBoardExpert[]
  maxRounds: number
  currentRound?: number
}

const props = withDefaults(defineProps<Props>(), {
  currentRound: 1,
})

const progressPercent = computed(() => {
  if (props.maxRounds <= 0) return 0
  return Math.min((props.currentRound / props.maxRounds) * 100, 100)
})
</script>

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

.board-banner-card__bar {
  height: 4px;
  background: var(--accent-board);
}

.board-banner-card__body {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.board-banner-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.board-banner-card__icon {
  font-size: var(--font-lg);
}

.board-banner-card__experts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.board-banner-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--accent-board-soft);
  color: var(--accent-board);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
}

.board-banner-card__chip--moderator {
  background: var(--accent-board);
  color: var(--text-inverse);
}

.board-banner-card__chip-avatar {
  font-size: 12px;
}

.board-banner-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.board-banner-card__progress {
  flex: 1;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.board-banner-card__progress-fill {
  height: 100%;
  background: var(--accent-board);
  border-radius: 2px;
  transition: width 0.3s ease;
}
</style>
