"use client"

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

import { Badge } from "@/shared/components/ui/badge"
import { cn } from "@/shared/lib/utils"
import type { Question } from "../types"
import { parseQuestionContent } from "../utils/parse-content"

interface QuestionContentRendererProps {
  question: Question
  /** 是否显示答案（学生端练习前不显示） */
  showAnswer?: boolean
  /** 自定义类名 */
  className?: string
}

/**
 * 题目内容结构化渲染组件。
 *
 * 根据 Question.content（unknown）解析后渲染：
 * - 题干文本
 * - 选项列表（选择题）：单选显示圆点，多选显示方框
 * - 正确答案高亮（showAnswer=true 时）
 * - 答案与解析（showAnswer=true 时）
 *
 * 使用 parseQuestionContent 类型守卫，不使用 `as` 断言。
 *
 * @example
 * <QuestionContentRenderer question={question} showAnswer />
 */
export function QuestionContentRenderer({
  question,
  showAnswer = false,
  className,
}: QuestionContentRendererProps): React.ReactNode {
  const t = useTranslations("questions")
  const content = parseQuestionContent(question.content)
  const isChoice = question.type === "single_choice" || question.type === "multiple_choice"
  const isMultiple = question.type === "multiple_choice"

  return (
    <div className={cn("space-y-3", className)}>
      {/* 题干 */}
      {content.text ? (
        <p className="whitespace-pre-wrap text-sm leading-relaxed">{content.text}</p>
      ) : (
        <p className="text-sm text-muted-foreground italic">{t("empty.withoutFiltersDesc")}</p>
      )}

      {/* 选项列表 */}
      {isChoice && content.options && content.options.length > 0 && (
        <ul className="space-y-2">
          {content.options.map((option, idx) => {
            const label = String.fromCharCode(65 + idx)
            const isCorrect = option.isCorrect
            return (
              <li
                key={option.id || `option-${idx}`}
                className={cn(
                  "flex items-start gap-2 rounded-md border p-2 text-sm",
                  showAnswer && isCorrect && "border-green-500/50 bg-green-500/5"
                )}
              >
                {isMultiple ? (
                  <span
                    className={cn(
                      "mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border",
                      isCorrect ? "border-green-500 bg-green-500 text-white" : "border-muted-foreground/30"
                    )}
                  >
                    {isCorrect && <CheckCircle2 className="h-3 w-3" />}
                  </span>
                ) : (
                  <span
                    className={cn(
                      "mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full border",
                      isCorrect ? "border-green-500 bg-green-500 text-white" : "border-muted-foreground/30"
                    )}
                  >
                    {isCorrect && <CheckCircle2 className="h-3 w-3" />}
                  </span>
                )}
                <span className="font-medium">{label}.</span>
                <span className="flex-1">{option.text}</span>
              </li>
            )
          })}
        </ul>
      )}

      {/* 答案与解析 */}
      {showAnswer && (
        <div className="space-y-2 border-t pt-2">
          {content.answer && (
            <div className="flex items-start gap-2">
              <Badge variant="outline" className="bg-green-500/10 text-green-700 dark:text-green-400">
                {t("actions.detailsContent")}
              </Badge>
              <span className="text-sm">{content.answer}</span>
            </div>
          )}
          {content.explanation && (
            <div className="flex items-start gap-2">
              <Badge variant="outline" className="bg-blue-500/10 text-blue-700 dark:text-blue-400">
                {t("dialog.contentDescription")}
              </Badge>
              <span className="text-sm text-muted-foreground">{content.explanation}</span>
            </div>
          )}
        </div>
      )}
    </div>
  )
}
