"use client"

import { useTranslations } from "next-intl"

import { RadioGroup, RadioGroupItem } from "@/shared/components/ui/radio-group"
import { Label } from "@/shared/components/ui/label"
import { Checkbox } from "@/shared/components/ui/checkbox"

import { extractOptions } from "../lib/grading"
import { isStringArray } from "../lib/answer-utils"

interface AnswerInputProps {
  questionType: string
  content: unknown
  userAnswer: unknown
  onAnswerChange: (answer: unknown) => void
  /** 是否禁用输入 */
  disabled?: boolean
}

/**
 * 答题输入组件。
 *
 * 根据题目类型渲染不同的输入控件：
 * - single_choice: 单选 RadioGroup
 * - multiple_choice: 多选 Checkbox 组
 * - judgment: 判断 RadioGroup（正确/错误）
 * - text/其他: 文本域
 *
 * 所有控件均带 aria-label 供屏幕阅读器识别。
 */
export function AnswerInput({
  questionType,
  content,
  userAnswer,
  onAnswerChange,
  disabled = false,
}: AnswerInputProps): React.ReactNode {
  const t = useTranslations("practice")

  if (questionType === "single_choice") {
    const options = extractOptions(content)
    const selectedId = typeof userAnswer === "string" ? userAnswer : ""

    return (
      <RadioGroup
        value={selectedId}
        onValueChange={onAnswerChange}
        disabled={disabled}
        aria-label={t("session.submit")}
      >
        <div className="space-y-2">
          {options.map((opt) => (
            <div key={opt.id} className="flex items-center space-x-2">
              <RadioGroupItem
                value={opt.id}
                id={opt.id}
                aria-label={opt.text}
              />
              <Label htmlFor={opt.id}>{opt.text}</Label>
            </div>
          ))}
        </div>
      </RadioGroup>
    )
  }

  if (questionType === "multiple_choice") {
    const options = extractOptions(content)
    const selectedIds = isStringArray(userAnswer) ? userAnswer : []

    function toggle(id: string): void {
      const newIds = selectedIds.includes(id)
        ? selectedIds.filter((v) => v !== id)
        : [...selectedIds, id]
      onAnswerChange(newIds)
    }

    return (
      <div
        className="space-y-2"
        role="group"
        aria-label={t("session.submit")}
      >
        {options.map((opt) => (
          <div key={opt.id} className="flex items-center space-x-2">
            <Checkbox
              checked={selectedIds.includes(opt.id)}
              onCheckedChange={() => toggle(opt.id)}
              id={opt.id}
              disabled={disabled}
              aria-label={opt.text}
            />
            <Label htmlFor={opt.id}>{opt.text}</Label>
          </div>
        ))}
      </div>
    )
  }

  if (questionType === "judgment") {
    const value = typeof userAnswer === "string" ? userAnswer : ""

    return (
      <RadioGroup
        value={value}
        onValueChange={onAnswerChange}
        disabled={disabled}
        aria-label={t("session.submit")}
      >
        <div className="space-y-2">
          <div className="flex items-center space-x-2">
            <RadioGroupItem
              value="true"
              id="judgment-true"
              aria-label={t("session.true")}
            />
            <Label htmlFor="judgment-true">{t("session.true")}</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem
              value="false"
              id="judgment-false"
              aria-label={t("session.false")}
            />
            <Label htmlFor="judgment-false">{t("session.false")}</Label>
          </div>
        </div>
      </RadioGroup>
    )
  }

  // text 题型
  const textValue = typeof userAnswer === "string" ? userAnswer : ""
  return (
    <textarea
      value={textValue}
      onChange={(e) => onAnswerChange(e.target.value)}
      placeholder={t("session.textPlaceholder")}
      disabled={disabled}
      className="w-full min-h-[120px] rounded-md border bg-background p-3 text-sm resize-y focus:outline-none focus:ring-2 focus:ring-ring"
      aria-label={t("session.textPlaceholder")}
    />
  )
}
