"use client"

import { useTranslations } from "next-intl"
import { CheckCircle2, XCircle, Trophy } from "lucide-react"
import { Badge } from "@/shared/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"

import type { PracticeSessionDetail } from "../types"

interface PracticeResultViewProps {
  session: PracticeSessionDetail
}

/**
 * 练习完成后的结果视图。
 *
 * 展示：
 * - 结果摘要卡片（已答题数、正确数、正确率）
 * - 逐题回顾列表
 *
 * 带有 ARIA role 和 aria-label 供屏幕阅读器识别。
 */
export function PracticeResultView({ session }: PracticeResultViewProps): React.ReactNode {
  const t = useTranslations("practice")

  const total = session.totalQuestions
  const answered = session.answeredQuestions
  const correct = session.correctCount
  const accuracy = answered > 0 ? Math.round((correct / answered) * 100) : 0

  return (
    <Card>
      <CardHeader>
        <CardTitle
          className="flex items-center gap-2"
          aria-label={t("result.title")}
        >
          <Trophy className="h-5 w-5 text-amber-500" aria-hidden="true" />
          {t("result.title")}
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* 结果摘要 */}
        <div
          className="grid grid-cols-3 gap-4"
          role="region"
          aria-label={t("result.title")}
        >
          <div className="rounded-md border p-4 text-center">
            <div className="text-2xl font-bold" aria-label={`${t("result.answered")}: ${answered}`}>
              {answered}
            </div>
            <div className="text-xs text-muted-foreground">{t("result.answered")}</div>
          </div>
          <div className="rounded-md border p-4 text-center">
            <div
              className="text-2xl font-bold text-emerald-600"
              aria-label={`${t("result.correct")}: ${correct}`}
            >
              {correct}
            </div>
            <div className="text-xs text-muted-foreground">{t("result.correct")}</div>
          </div>
          <div className="rounded-md border p-4 text-center">
            <div
              className="text-2xl font-bold"
              aria-label={`${t("result.accuracy")}: ${accuracy}%`}
            >
              {accuracy}%
            </div>
            <div className="text-xs text-muted-foreground">{t("result.accuracy")}</div>
          </div>
        </div>

        {/* 逐题回顾 */}
        <div className="space-y-2" role="list" aria-label={t("result.review")}>
          <h4 className="text-sm font-medium">{t("result.review")}</h4>
          {session.answers.map((a, idx) => (
            <div
              key={a.id}
              className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
              role="listitem"
              aria-label={`${t("session.question")} ${idx + 1}`}
            >
              <span className="flex items-center gap-2">
                {a.isCorrect === true ? (
                  <CheckCircle2 className="h-4 w-4 text-emerald-500" aria-hidden="true" />
                ) : a.isCorrect === false ? (
                  <XCircle className="h-4 w-4 text-rose-500" aria-hidden="true" />
                ) : (
                  <span className="text-muted-foreground" aria-hidden="true">—</span>
                )}
                {t("session.question")} {idx + 1}
              </span>
              <Badge variant="outline">
                {a.status === "answered"
                  ? (a.isCorrect === true
                      ? t("session.correct")
                      : a.isCorrect === false
                        ? t("session.incorrect")
                        : t("session.pendingReview"))
                  : t("session.skipped")}
              </Badge>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
