<template>
  <div class="review-card" :class="reviewClass">
    <div class="review-card__header">
      <span class="review-card__icon">{{ statusIcon }}</span>
      <span class="review-card__status">{{ statusLabel }}</span>
      <a-tag v-if="review.rework_count !== undefined && review.rework_count > 0" :color="review.passed ? 'green' : 'red'">
        返工 {{ review.rework_count }} 次
      </a-tag>
    </div>
    <div class="review-card__meta">
      <span class="review-card__phase">{{ review.phase_name }}</span>
      <span class="review-card__expert">{{ review.expert }}</span>
    </div>
    <div v-if="review.feedback" class="review-card__feedback">
      <AssistantText :message="feedbackMessage" />
    </div>
  </div>
</template>

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

const props = defineProps<{
  review: IReviewResult
}>()

const reviewClass = computed(() => {
  if (props.review.passed) return 'review-card--passed'
  if (props.review.final_status === 'failed') return 'review-card--failed'
  return 'review-card--rework'
})

const statusLabel = computed(() => {
  if (props.review.passed) return '验收通过'
  if (props.review.final_status === 'failed') return '验收失败'
  return '要求返工'
})

const statusIcon = computed(() => {
  if (props.review.passed) return '\u2713'
  if (props.review.final_status === 'failed') return '\u2717'
  return '\u21bb'
})

const feedbackMessage = computed<IChatMessage>(() => ({
  id: `review-feedback-${props.review.phase_id}`,
  role: 'assistant',
  content: props.review.feedback,
  timestamp: new Date().toISOString(),
  status: 'completed',
}))
</script>

<style scoped>
.review-card {
  padding: 10px 14px;
  border-left: 3px solid #d9d9d9;
  background: #fafafa;
  border-radius: 4px;
}

.review-card--passed {
  border-left-color: #52c41a;
  background: #f6ffed;
}

.review-card--rework {
  border-left-color: #faad14;
  background: #fffbe6;
}

.review-card--failed {
  border-left-color: #ff4d4f;
  background: #fff2f0;
}

.review-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.review-card__icon {
  font-size: 16px;
  font-weight: bold;
}

.review-card--passed .review-card__icon {
  color: #52c41a;
}

.review-card--rework .review-card__icon {
  color: #faad14;
}

.review-card--failed .review-card__icon {
  color: #ff4d4f;
}

.review-card__status {
  font-weight: 600;
  font-size: 14px;
}

.review-card__meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}

.review-card__phase::before {
  content: '阶段: ';
  color: #999;
}

.review-card__expert::before {
  content: '专家: ';
  color: #999;
}

.review-card__feedback {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #d9d9d9;
  font-size: 13px;
}
</style>
