<script setup lang="ts">
import { computed, onMounted, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import { fetchWrongQuestions } from '@/api/quiz'
import type { WrongQuestion } from '@/types/api'

const router = useRouter()
const route = useRoute()
const loading = shallowRef(false)
const wrongQuestions = shallowRef<WrongQuestion[]>([])

const totalWrong = computed(() => wrongQuestions.value.reduce((sum, item) => sum + item.wrong_count, 0))

async function loadWrongQuestions() {
  loading.value = true
  try {
    const response = await fetchWrongQuestions({
      per_page: 100,
      question_bank_id: route.query.bank_id,
    })
    wrongQuestions.value = response.data.items
  } finally {
    loading.value = false
  }
}

onMounted(loadWrongQuestions)
</script>

<template>
  <main class="wrong-page">
    <section class="wrong-head">
      <ElButton :icon="ArrowLeft" text @click="router.push('/quiz')">返回学习入口</ElButton>
      <div>
        <h1>错题回顾</h1>
        <p>集中复盘还没有掌握的题目。</p>
      </div>
      <div class="wrong-stat">
        <strong>{{ wrongQuestions.length }}</strong>
        <span>未掌握</span>
      </div>
      <div class="wrong-stat">
        <strong>{{ totalWrong }}</strong>
        <span>累计错题</span>
      </div>
    </section>

    <section v-loading="loading" class="wrong-body">
      <div v-if="wrongQuestions.length > 0" class="wrong-list">
        <article v-for="item in wrongQuestions" :key="item.id" class="wrong-card">
          <div class="wrong-card-head">
            <h2>
              {{ item.question.content }}
              <ElTag class="wrong-count-tag" type="warning" effect="plain">错 {{ item.wrong_count }} 次</ElTag>
            </h2>
          </div>
          <div class="question-block">
            <div v-if="item.question.type !== 'blank'" class="option-list">
              <div
                v-for="option in item.question.options"
                :key="option.id"
                class="option-item"
                :class="{ 'option-item--right': option.is_correct }"
              >
                {{ option.content }}
              </div>
            </div>
            <div class="answer-box">
              <template v-if="item.question.type === 'blank'">
                <strong>正确答案</strong>
                <p>{{ item.question.answers?.join('、') || '暂无标准答案' }}</p>
              </template>
              <strong>解析</strong>
              <p>{{ item.question.explanation || '暂无解析' }}</p>
            </div>
          </div>
        </article>
      </div>
      <ElEmpty v-else-if="!loading" description="暂无未掌握错题" />
    </section>
  </main>
</template>

<style scoped>
.wrong-page {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 24px 16px 72px;
}

.wrong-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.wrong-head h1 {
  margin: 0 0 6px;
  font-size: 28px;
}

.wrong-head p {
  margin: 0;
  color: var(--qq-muted);
}

.wrong-stat {
  min-width: 86px;
  padding: 10px 12px;
  border: 1px solid var(--qq-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  backdrop-filter: blur(6px);
  text-align: center;
}

.wrong-stat strong {
  display: block;
  color: var(--qq-ink);
  font-size: 22px;
}

.wrong-stat span {
  color: var(--qq-muted);
  font-size: 12px;
}

.wrong-body {
  min-height: 320px;
}

.wrong-list {
  display: grid;
  gap: 14px;
}

.wrong-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--qq-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
}

.wrong-card-head {
  display: grid;
  gap: 10px;
  align-items: start;
}

.wrong-card-head h2 {
  margin: 0;
  color: var(--qq-ink);
  font-size: 18px;
  line-height: 1.55;
}

.wrong-count-tag {
  margin-left: 8px;
  vertical-align: 2px;
}

.question-block {
  display: grid;
  gap: 14px;
  padding: 4px 2px 12px;
}

.question-content {
  margin: 0;
  color: var(--qq-ink);
  line-height: 1.65;
}

.option-list {
  display: grid;
  gap: 8px;
}

.option-item {
  padding: 10px 12px;
  border: 1px solid var(--qq-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
}

.option-item--right {
  border-color: rgba(31, 111, 91, 0.35);
  background: rgba(31, 111, 91, 0.08);
}

.answer-box {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(201, 133, 34, 0.35);
  background: rgba(201, 133, 34, 0.08);
}

.answer-box p {
  margin: 6px 0 12px;
}

.answer-box p:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .wrong-head {
    grid-template-columns: 1fr 1fr;
  }

  .wrong-head > div:nth-child(2) {
    grid-column: 1 / -1;
  }

  .wrong-stat {
    min-width: 0;
  }
}
</style>
