"use client"

import { Flame } from "lucide-react"
import { useTranslations } from "next-intl"

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"
import { extractQuestionPreview } from "@/shared/lib/question-content"

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

interface TopWrongQuestionsProps {
  questions: TopWrongQuestion[]
}

const KNOWN_QUESTION_TYPES = [
  "single_choice",
  "multiple_choice",
  "judgment",
  "text",
  "composite",
] as const
type KnownQuestionType = (typeof KNOWN_QUESTION_TYPES)[number]

function isKnownQuestionType(v: string): v is KnownQuestionType {
  return (KNOWN_QUESTION_TYPES as readonly string[]).includes(v)
}

export function TopWrongQuestions({ questions }: TopWrongQuestionsProps) {
  const t = useTranslations("errorBook")

  if (questions.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Flame className="h-4 w-4" />
            {t("topWrong.title")}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <EmptyState
            icon={Flame}
            title={t("topWrong.emptyTitle")}
            description={t("topWrong.emptyDesc")}
            className="h-[200px]"
          />
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base">
          <Flame className="h-4 w-4" />
          {t("topWrong.topTitle")}
        </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">
                    {extractQuestionPreview(q.questionContent, t("itemCard.questionContent"), 120)}
                  </p>
                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                    <Badge variant="secondary" className="text-xs">
                      {isKnownQuestionType(q.questionType)
                        ? t(`questionType.${q.questionType}`)
                        : q.questionType}
                    </Badge>
                    <span>{t("topWrong.errorCount", { count: q.errorCount })}</span>
                    <span>·</span>
                    <span className="text-emerald-600 dark:text-emerald-400">
                      {t("topWrong.masteredCount", { count: q.masteredCount })}
                    </span>
                    <span>·</span>
                    <span>{t("topWrong.masteryRate", { rate: Math.round(masteryRate * 100) })}</span>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </CardContent>
    </Card>
  )
}
