const DunningKrugerDemo = () => {
  const [step, setStep] = useState('intro'); // intro, rate, quiz, result
  const [confidence, setConfidence] = useState(50);
  const [score, setScore] = useState(0);
  const [answers, setAnswers] = useState({});

  const questions = [
    {
      id: 1,
      q: "CSSの 'z-index' が効かない主な理由は？",
      opts: ["positionがstatic", "displayがblock", "opacityが1"],
      correct: 0
    },
    {
      id: 2,
      q: "HTTPステータスコード '418' の意味は？",
      opts: ["Bad Request", "I'm a teapot", "Loop Detected"],
      correct: 1
    },
    {
      id: 3,
      q: "JavaScriptで [1, 2] + [3, 4] の結果は？",
      opts: ["[1, 2, 3, 4]", "\"1,23,4\"", "NaN"],
      correct: 1
    }
  ];

  const handleAnswer = (qid, idx) => {
    setAnswers({ ...answers, [qid]: idx });
  };

  const calculateScore = () => {
    let s = 0;
    questions.forEach(q => {
      if (answers[q.id] === q.correct) s++;
    });
    setScore(s);
    setStep('result');
  };

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto">
      
      {step === 'intro' && (
        <div className="text-center">
          <h3 className="font-bold text-card-foreground mb-4">Web開発知識クイズ (全3問)</h3>
          <p className="text-muted-foreground mb-6">
            少しマニアックなWeb開発の知識を問うクイズです。<br/>
            始める前に、自己評価を教えてください。
          </p>
          <button
            onClick={() => setStep('rate')}
            className="bg-primary text-primary-foreground px-6 py-2 rounded-lg font-bold hover:bg-primary/90"
          >
            次へ
          </button>
        </div>
      )}

      {step === 'rate' && (
        <div className="text-center">
          <h3 className="font-bold text-card-foreground mb-4">予想得点は？</h3>
          <div className="mb-8">
            <div className="text-4xl font-bold text-primary mb-2">{Math.round((confidence / 100) * 3)}点 <span className="text-sm text-muted-foreground">/ 3点中</span></div>
            <p className="text-xs text-muted-foreground mb-4">自信度: {confidence}%</p>
            <input
              type="range"
              min="0"
              max="100"
              value={confidence}
              onChange={(e) => setConfidence(e.target.value)}
              className="w-full accent-blue-600"
            />
            <div className="flex justify-between text-xs text-muted-foreground mt-2">
              <span>自信ない</span>
              <span>自信あり</span>
            </div>
          </div>
          <button
            onClick={() => setStep('quiz')}
            className="bg-primary text-primary-foreground px-6 py-2 rounded-lg font-bold hover:bg-primary/90"
          >
            クイズを開始
          </button>
        </div>
      )}

      {step === 'quiz' && (
        <div>
          {questions.map((q, i) => (
            <div key={q.id} className="mb-6 pb-6 border-b last:border-0">
              <p className="font-bold text-card-foreground mb-3">Q{i+1}. {q.q}</p>
              <div className="space-y-2">
                {q.opts.map((opt, optIdx) => (
                  <label key={optIdx} className="flex items-center space-x-2 cursor-pointer">
                    <input
                      type="radio"
                      name={`q-${q.id}`}
                      checked={answers[q.id] === optIdx}
                      onChange={() => handleAnswer(q.id, optIdx)}
                      className="accent-blue-600"
                    />
                    <span className="text-sm text-foreground">{opt}</span>
                  </label>
                ))}
              </div>
            </div>
          ))}
          <button
            onClick={calculateScore}
            disabled={Object.keys(answers).length < questions.length}
            className="w-full bg-green-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            結果を見る
          </button>
        </div>
      )}

      {step === 'result' && (
        <div className="text-center animate-in zoom-in">
          <div className="flex justify-center gap-8 mb-8 text-center">
            <div>
              <div className="text-xs text-muted-foreground uppercase font-bold">予想</div>
              <div className="text-3xl font-bold text-muted-foreground">{Math.round((confidence / 100) * 3)}点</div>
            </div>
            <div>
              <div className="text-xs text-muted-foreground uppercase font-bold">実際</div>
              <div className={`text-4xl font-bold ${score < Math.round((confidence / 100) * 3) ? 'text-destructive' : 'text-green-500'}`}>
                {score}点
              </div>
            </div>
          </div>

          <p className="text-foreground mb-6 font-medium">
            {score < Math.round((confidence / 100) * 3) 
              ? "「思ったよりできなかった」ですか？ それがダニング・クルーガー効果かもしれません。"
              : "素晴らしい！ 正確な自己評価（あるいは謙虚さ）を持っています。"}
          </p>

          <button
            onClick={() => { setStep('intro'); setConfidence(50); setAnswers({}); }}
            className="text-sm text-primary underline"
          >
            もう一度トライ
          </button>
        </div>
      )}

    </div>
  );
};

render(<DunningKrugerDemo />);