"use client"

import { useTranslations } from "next-intl"
import { CheckCircle2, XCircle } from "lucide-react"

import { QuestionContent } from "./question-content"
import type { PracticeAnswerRecord } from "../types"

interface AnswerResultProps {
  answer: PracticeAnswerRecord
  result?: { isCorrect: boolean | null; score: number | null }
}

/**
 * 答题结果展示组件。
 *
 * 展示：
 * - 判分结果（正确/错误/待批阅/已跳过）
 * - 学生答案（使用 QuestionContent 渲染替代 JSON.stringify）
 */
export function AnswerResult({ answer, result }: AnswerResultProps): React.ReactNode {
  const t = useTranslations("practice")
  const isCorrect = result?.isCorrect ?? answer.isCorrect
  const isSkipped = answer.status === "skipped"

  return (
    <div className="space-y-3">
      {/* 判分结果 */}
      {isSkipped ? (
        <div
          className="rounded-md border border-muted bg-muted/30 p-3 text-sm text-muted-foreground"
          role="status"
          aria-label={t("session.skipped")}
        >
          {t("session.skipped")}
        </div>
      ) : isCorrect === true ? (
        <div
          className="flex items-center gap-2 rounded-md border border-emerald-200 bg-emerald-50/50 p-3 text-sm text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950/20 dark:text-emerald-400"
          role="status"
          aria-label={t("session.correct")}
        >
          <CheckCircle2 className="h-5 w-5" aria-hidden="true" />
          {t("session.correct")}
        </div>
      ) : isCorrect === false ? (
        <div
          className="flex items-center gap-2 rounded-md border border-rose-200 bg-rose-50/50 p-3 text-sm text-rose-700 dark:border-rose-900 dark:bg-rose-950/20 dark:text-rose-400"
          role="status"
          aria-label={t("session.incorrect")}
        >
          <XCircle className="h-5 w-5" aria-hidden="true" />
          {t("session.incorrect")}
        </div>
      ) : (
        <div
          className="rounded-md border border-amber-200 bg-amber-50/50 p-3 text-sm text-amber-700 dark:border-amber-900 dark:bg-amber-950/20 dark:text-amber-400"
          role="status"
          aria-label={t("session.pendingReview")}
        >
          {t("session.pendingReview")}
        </div>
      )}

      {/* 学生答案 */}
      {answer.studentAnswer !== null && answer.studentAnswer !== undefined ? (
        <div>
          <h4 className="mb-1 text-sm font-medium">{t("session.yourAnswer")}</h4>
          <div className="rounded-md border bg-muted/30 p-2 text-xs">
            <QuestionContent content={answer.studentAnswer} />
          </div>
        </div>
      ) : null}
    </div>
  )
}
