import {useEffect, useState} from "react";
import {Button} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import {pageHjmQuestions} from "@/api/hjm/hjmQuestions";
import {HjmQuestions} from "@/api/hjm/hjmQuestions/model";

/**
 * 简化版考试系统 - 用于测试
 * @constructor
 */
const ExamSimple = () => {
  const [questions, setQuestions] = useState<HjmQuestions[]>([])
  const [loading, setLoading] = useState<boolean>(false)

  // 加载题目
  const loadQuestions = () => {
    setLoading(true)
    console.log('开始加载题目...')
    
    pageHjmQuestions({}).then(data => {
      console.log('API返回数据:', data)
      const questionList = data?.list || []
      setQuestions(questionList)
      console.log('加载题目成功:', questionList)
      
      Taro.showToast({
        title: `加载成功，共${questionList.length}道题`,
        icon: 'success'
      })
    }).catch(error => {
      console.error('加载题目失败:', error)
      Taro.showToast({
        title: '加载题目失败',
        icon: 'error'
      })
    }).finally(() => {
      setLoading(false)
    })
  }

  useEffect(() => {
    loadQuestions()
  }, [])

  return (
    <div style={{ padding: '16px' }}>
      <h1 style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '16px' }}>
        考试系统测试页面
      </h1>
      
      <div style={{ marginBottom: '16px' }}>
        <p>题目数量：{questions.length} 道</p>
        <p>加载状态：{loading ? '加载中...' : '加载完成'}</p>
      </div>

      <div style={{ marginBottom: '16px' }}>
        <Button 
          type="primary" 
          onClick={loadQuestions}
          loading={loading}
        >
          重新加载题目
        </Button>
      </div>

      {questions.length > 0 && (
        <div style={{ backgroundColor: 'white', padding: '16px', borderRadius: '8px' }}>
          <h3 style={{ marginBottom: '12px' }}>题目列表：</h3>
          {questions.slice(0, 5).map((question, index) => (
            <div key={index} style={{ marginBottom: '12px', padding: '8px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
              <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
                第{index + 1}题：{question.question}
              </div>
              <div style={{ fontSize: '12px', color: '#666' }}>
                类型：{question.type === 0 ? '选择题' : question.type === 1 ? '填空题' : '问答题'} | 
                难度：{question.difficulty === 0 ? '简单' : question.difficulty === 1 ? '中等' : '困难'}
              </div>
              {question.type === 0 && (
                <div style={{ fontSize: '12px', marginTop: '4px' }}>
                  {question.choicesList && question.choicesList.length > 0 ? (
                    // 使用 choicesList 显示选项
                    <>
                      {question.choicesList.map((choice, index) => {
                        const optionLabel = String.fromCharCode(65 + index); // A, B, C, D
                        return (
                          <div key={index} style={{ color: choice.isCorrect ? '#52c41a' : '#333' }}>
                            {optionLabel}: {choice.content} {choice.isCorrect && '✓'}
                          </div>
                        );
                      })}
                    </>
                  ) : (
                    // 备用方案：使用传统字段
                    <>
                      A: {question.choicesA}<br/>
                      B: {question.choicesB}<br/>
                      C: {question.choicesC}<br/>
                      D: {question.choicesD}<br/>
                      正确答案: {question.correctAnswer}
                    </>
                  )}
                </div>
              )}
            </div>
          ))}
          {questions.length > 5 && (
            <div style={{ textAlign: 'center', color: '#666', fontSize: '14px' }}>
              还有 {questions.length - 5} 道题目...
            </div>
          )}
        </div>
      )}

      <div style={{ marginTop: '16px' }}>
        <Button 
          type="success" 
          onClick={() => {
            Taro.navigateTo({
              url: '/hjm/exam/exam'
            })
          }}
          disabled={questions.length === 0}
        >
          进入完整考试系统
        </Button>
      </div>
    </div>
  )
}

export default ExamSimple
