"use client"

import { isRecord } from "@/shared/lib/type-guards"
import { extractOptions } from "../lib/grading"

interface QuestionContentProps {
  /** 题目内容（字符串或结构化对象） */
  content: unknown
}

/**
 * 题目内容渲染器。
 *
 * 替代原先的 JSON.stringify 兜底渲染，根据内容结构智能展示：
 * - 字符串：直接渲染文本
 * - 对象含 question/stem/prompt 字段：提取题干文本
 * - 对象含 options 字段：渲染选项列表（仅展示，不含交互）
 * - 其他：降级为格式化 JSON（带 aria-label 供屏幕阅读器）
 */
export function QuestionContent({ content }: QuestionContentProps): React.ReactNode {
  // 1. 字符串：直接渲染
  if (typeof content === "string") {
    return (
      <pre
        className="whitespace-pre-wrap break-words font-sans"
        aria-label="题目内容"
      >
        {content}
      </pre>
    )
  }

  // 2. 结构化对象：尝试提取题干
  if (isRecord(content)) {
    const stem = content.question ?? content.stem ?? content.prompt ?? content.text
    const options = extractOptions(content)

    if (typeof stem === "string" || typeof stem === "number") {
      return (
        <div className="space-y-3" aria-label="题目内容">
          <pre className="whitespace-pre-wrap break-words font-sans">
            {String(stem)}
          </pre>
          {options.length > 0 ? (
            <ol className="space-y-1 text-sm text-muted-foreground">
              {options.map((opt, idx) => (
                <li key={opt.id} className="flex gap-2">
                  <span className="font-medium">{String.fromCharCode(65 + idx)}.</span>
                  <span>{opt.text}</span>
                </li>
              ))}
            </ol>
          ) : null}
        </div>
      )
    }
  }

  // 3. 降级：格式化 JSON（带语义化标签）
  return (
    <pre
      className="whitespace-pre-wrap break-words font-mono text-xs"
      aria-label="题目原始内容"
      role="region"
    >
      {JSON.stringify(content, null, 2)}
    </pre>
  )
}
