import { Flame } from "lucide-react"

import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { EmptyState } from "@/shared/components/ui/empty-state"

interface TopWrongQuestion {
  questionId: string
  questionContent: unknown
  questionType: string
  errorCount: number
  masteredCount: number
}

interface TopWrongQuestionsProps {
  questions: TopWrongQuestion[]
}

function extractPreview(content: unknown): string {
  if (typeof content === "string") return content.slice(0, 120)
  if (Array.isArray(content)) {
    const texts: string[] = []
    for (const node of content) {
      if (typeof node === "string") texts.push(node)
      else if (typeof node === "object" && node !== null) {
        const n = node as Record<string, unknown>
        if (typeof n.text === "string") texts.push(n.text)
      }
    }
    return texts.join("").slice(0, 120)
  }
  return "题目内容"
}

const QUESTION_TYPE_LABEL: Record<string, string> = {
  single_choice: "单选",
  multiple_choice: "多选",
  judgment: "判断",
  text: "简答",
  composite: "复合",
}

export function TopWrongQuestions({ questions }: TopWrongQuestionsProps) {
  if (questions.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Flame className="h-4 w-4" />
            高频错题
          </CardTitle>
        </CardHeader>
        <CardContent>
          <EmptyState
            icon={Flame}
            title="暂无高频错题"
            description="学生完成作业或考试后，错频统计会显示在这里。"
            className="h-[200px]"
          />
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base">
          <Flame className="h-4 w-4" />
          高频错题 Top 10
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {questions.map((q, idx) => {
            const masteryRate = q.errorCount > 0 ? q.masteredCount / q.errorCount : 0
            return (
              <div
                key={q.questionId}
                className="flex items-start gap-3 rounded-md border p-3"
              >
                <Badge variant="outline" className="mt-0.5 shrink-0">
                  #{idx + 1}
                </Badge>
                <div className="flex-1 min-w-0 space-y-1">
                  <p className="text-sm line-clamp-2">
                    {extractPreview(q.questionContent)}
                  </p>
                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                    <Badge variant="secondary" className="text-xs">
                      {QUESTION_TYPE_LABEL[q.questionType] ?? q.questionType}
                    </Badge>
                    <span>{q.errorCount} 人错</span>
                    <span>·</span>
                    <span className="text-emerald-600 dark:text-emerald-400">
                      {q.masteredCount} 人已掌握
                    </span>
                    <span>·</span>
                    <span>掌握率 {Math.round(masteryRate * 100)}%</span>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </CardContent>
    </Card>
  )
}
