<template>
  <div class="debate-conclusion" :class="`debate-conclusion--${decision}`">
    <div class="debate-conclusion__header">
      <span class="debate-conclusion__icon">{{ decisionIcon }}</span>
      <span class="debate-conclusion__decision">{{ decisionLabel }}</span>
    </div>
    <div class="debate-conclusion__body">
      <AssistantText :message="textMessage" />
    </div>
    <div v-if="rationale" class="debate-conclusion__rationale">
      <span class="debate-conclusion__rationale-label">理由：</span>
      <span>{{ rationale }}</span>
    </div>
  </div>
</template>

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

const props = defineProps<{
  conclusion: string
  decision: string
  rationale: string
}>()

const decisionLabels: Record<string, string> = {
  adopt: '采纳',
  compromise: '折中',
  shelve: '搁置',
  inconclusive: '未决',
}
const decisionIcons: Record<string, string> = {
  adopt: '✓',
  compromise: '⇄',
  shelve: '○',
  inconclusive: '?',
}

const decisionLabel = computed(() => decisionLabels[props.decision] || props.decision)
const decisionIcon = computed(() => decisionIcons[props.decision] || '?')

const textMessage = computed<IChatMessage>(() => ({
  id: 'debate-conclusion',
  role: 'assistant',
  content: props.conclusion,
  timestamp: new Date().toISOString(),
  status: 'completed',
}))
</script>

<style scoped>
.debate-conclusion {
  padding: 12px 16px;
  border-left: 3px solid #fa8c16;
  background: #fff7e6;
  border-radius: 4px;
}
.debate-conclusion--adopt { border-left-color: #52c41a; background: #f6ffed; }
.debate-conclusion--compromise { border-left-color: #faad14; background: #fffbe6; }
.debate-conclusion--shelve { border-left-color: #bfbfbf; background: #f5f5f5; }
.debate-conclusion--inconclusive { border-left-color: #ff4d4f; background: #fff2f0; }

.debate-conclusion__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.debate-conclusion__icon { font-size: 18px; font-weight: bold; }
.debate-conclusion__decision { font-weight: 600; font-size: 14px; }
.debate-conclusion__body { margin-bottom: 8px; }
.debate-conclusion__rationale {
  font-size: 12px;
  color: #666;
  padding-top: 8px;
  border-top: 1px dashed #d9d9d9;
}
.debate-conclusion__rationale-label { font-weight: 600; }
</style>
