<script setup lang="ts">
import type { QuizQuestion } from '../api/request'

defineProps<{
  question: QuizQuestion
  index: number
  total: number
  selected?: string
  showResult?: boolean
  isCorrect?: boolean
}>()

defineEmits<{
  select: [answer: string]
}>()

const typeLabel: Record<string, string> = {
  en_to_zh: '看英文选中文',
  zh_to_en: '看中文选英文',
}
</script>

<template>
  <div class="card quiz-card">
    <div class="quiz-meta">
      <span>{{ index + 1 }}/{{ total }}</span>
      <span>{{ typeLabel[question.question_type] || question.question_type }}</span>
    </div>
    <div class="quiz-prompt">{{ question.prompt }}</div>
    <div class="options">
      <button
        v-for="opt in question.options"
        :key="opt.label"
        class="option-btn"
        :class="{
          selected: selected === opt.text,
          correct: showResult && opt.text === question.correct_answer,
          wrong: showResult && selected === opt.text && opt.text !== question.correct_answer,
        }"
        :disabled="showResult"
        @click="$emit('select', opt.text)"
      >
        <span class="opt-label">{{ opt.label }}.</span> {{ opt.text }}
      </button>
    </div>
    <p v-if="showResult" class="result" :class="isCorrect ? 'ok' : 'fail'">
      <template v-if="isCorrect">正确</template>
      <template v-else>错误，答案 {{ question.correct_answer }}</template>
    </p>
  </div>
</template>

<style scoped>
.quiz-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
}
.quiz-prompt {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin: 8px 0 24px;
  line-height: 1.3;
}
.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.option-btn {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.option-btn.selected {
  border-color: var(--primary);
  background: rgba(79, 110, 247, 0.08);
}
.option-btn.correct {
  border-color: var(--success);
  background: #d1fae5;
}
.option-btn.wrong {
  border-color: var(--danger);
  background: #fee2e2;
}
.opt-label {
  font-weight: 700;
  margin-right: 6px;
}
.result {
  margin: 16px 0 0;
  font-size: 14px;
  text-align: center;
}
.result.ok { color: var(--success); }
.result.fail { color: var(--danger); }
</style>
