const CognitiveLoadDemo = () => {
  const [step, setStep] = useState('intro'); // intro, task, result
  const [memorizeNum, setMemorizeNum] = useState(0);
  const [inputNum, setInputNum] = useState('');
  const [mathAnswer, setMathAnswer] = useState('');

  const startTask = () => {
    const num = Math.floor(1000 + Math.random() * 9000); // 4 digit number
    setMemorizeNum(num);
    setStep('memorize');
    setTimeout(() => {
      setStep('math');
    }, 3000); // Show number for 3 seconds
  };

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto">
      <h3 className="text-center font-bold text-card-foreground mb-6">脳のcpu使用率テスト</h3>

      {step === 'intro' && (
        <div className="text-center">
          <p className="mb-6 text-sm text-muted-foreground">
            これから表示される<br/>
            <strong>「4桁の数字」</strong>を覚えてください。<br/>
            その直後に、簡単な計算問題が出されます。
          </p>
          <button onClick={startTask} className="bg-primary text-primary-foreground px-8 py-3 rounded-full font-bold hover:bg-primary/90">
            スタート
          </button>
        </div>
      )}

      {step === 'memorize' && (
        <div className="text-center animate-in zoom-in">
          <p className="text-sm text-muted-foreground mb-2">この数字を覚えて！</p>
          <div className="text-6xl font-black text-card-foreground tracking-widest">{memorizeNum}</div>
          <div className="mt-4 w-full bg-muted h-1">
             <div className="bg-primary/100 h-1 w-full animate-[width_3s_linear_to_0]"></div>
          </div>
        </div>
      )}

      {step === 'math' && (
        <div className="animate-in fade-in">
          <div className="mb-6 p-4 bg-yellow-50 dark:bg-yellow-950 rounded border border-yellow-200 dark:border-yellow-800 text-center text-yellow-900 dark:text-yellow-200">
             <p className="font-bold mb-2">邪魔が入ります！計算してください</p>
             <p className="text-3xl font-bold">15 + 27 = ?</p>
             <input 
               type="number" 
               className="mt-2 p-2 border rounded w-24 text-center"
               value={mathAnswer}
               onChange={(e) => setMathAnswer(e.target.value)}
             />
          </div>

          <div className="text-center">
            <p className="mb-2 text-sm text-muted-foreground">さっきの数字は？</p>
             <input 
               type="number" 
               className="p-3 border-2 border-primary/30 rounded-lg w-full text-center text-xl tracking-widest mb-4 outline-blue-500"
               placeholder="????"
               value={inputNum}
               onChange={(e) => setInputNum(e.target.value)}
             />
             <button 
               onClick={() => setStep('result')}
               className="w-full bg-black text-white py-3 rounded font-bold"
               disabled={!inputNum || !mathAnswer}
             >
               回答する
             </button>
          </div>
        </div>
      )}

      {step === 'result' && (
        <div className="animate-in fade-in text-center">
           <div className="mb-4">
             <div className="text-xs text-muted-foreground">正解の数字</div>
             <div className="text-2xl font-bold">{memorizeNum}</div>
           </div>
           
           <div className="mb-6">
             <div className="text-xs text-muted-foreground">あなたの回答</div>
             <div className={`text-4xl font-bold ${parseInt(inputNum) === memorizeNum ? 'text-green-500' : 'text-destructive'}`}>
               {inputNum}
             </div>
           </div>

           <p className="bg-muted p-4 rounded text-sm text-left">
             簡単な数字でも、途中で別のタスク（計算＝認知負荷）が挟まると、記憶が飛びそうになりませんでしたか？<br/>
             ユーザーに「買い物の途中で会員登録させる」ようなフローは、これと同じストレスを与えます。
           </p>

           <button onClick={() => {setStep('intro'); setMathAnswer(''); setInputNum('');}} className="mt-4 text-blue-500 underline text-xs">もう一度</button>
        </div>
      )}
    </div>
  );
};

render(<CognitiveLoadDemo />);