'use client';

import { calculateCRTResults } from '../../test/private/CRTCalculator';

interface CRTResultProps {
  answers: string[];
}

function summary(score: number) {
  if (score >= 6) return '反思推理表现较强，能较好地抑制直觉错误。';
  if (score >= 3) return '反思推理表现中等，有些题目能停下来重新检查。';
  return '本次更容易受直觉答案影响，建议在关键判断中刻意放慢。';
}

export function CRTResult({ answers }: CRTResultProps) {
  const result = calculateCRTResults(answers);

  return (
    <div className="mt-6 space-y-6">
      <div className="bg-white border rounded-lg p-6 shadow-sm">
        <h3 className="text-lg font-semibold mb-4">CRT 结果</h3>
        <div className="flex items-end gap-3">
          <span className="text-4xl font-semibold text-indigo-600">
            {result.score}
          </span>
          <span className="text-muted-foreground mb-1">/ {result.total} 分</span>
        </div>
        <p className="text-sm text-gray-700 mt-4">{summary(result.score)}</p>
      </div>

      <div className="bg-white border rounded-lg p-6 shadow-sm">
        <h4 className="font-semibold mb-3">逐题判断</h4>
        <div className="space-y-2">
          {result.items.map((item) => (
            <div
              key={item.questionId}
              className="flex items-center justify-between rounded border p-3 text-sm"
            >
              <span>第 {item.questionId} 题</span>
              <span
                className={
                  item.isCorrect
                    ? 'text-green-700 font-medium'
                    : 'text-red-700 font-medium'
                }
              >
                {item.isCorrect ? '正确' : `错误，正确选项：${item.correct}`}
              </span>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-gray-50 border rounded-lg p-4 text-sm text-gray-700">
        CRT 对题目熟悉度很敏感。如果以前见过类似题，分数会偏高；如果当前疲劳或分心，分数也可能偏低。
      </div>
    </div>
  );
}