const OptimismBiasDemo = () => {
  const [step, setStep] = useState('estimate'); // estimate, working, result
  const [estimate, setEstimate] = useState(5);
  const [startTime, setStartTime] = useState(0);
  const [elapsed, setElapsed] = useState(0);
  const [inputText, setInputText] = useState('');
  
  // A simple but annoying task: Type specific text backwards? Or just correct alphabet.
  // Let's do simple: Type the alphabet "a-z"
  const targetText = "abcdefghijklmnopqrstuvwxyz";
  const timerRef = useRef(null);

  useEffect(() => {
    if (step === 'working') {
      setStartTime(Date.now());
      timerRef.current = setInterval(() => {
        setElapsed((Date.now() - startTime) / 1000);
      }, 100);
    } else {
      clearInterval(timerRef.current);
    }
    return () => clearInterval(timerRef.current);
  }, [step, startTime]);

  // Update timer display while working
  useEffect(() => {
    if (step === 'working' && startTime > 0) {
      const interval = setInterval(() => {
        setElapsed((Date.now() - startTime) / 1000);
      }, 50);
      return () => clearInterval(interval);
    }
  }, [step, startTime]);

  const handleFinish = () => {
    if (inputText === targetText) {
      setStep('result');
    }
  };

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto">
      
      {step === 'estimate' && (
        <div className="text-center">
          <h3 className="font-bold text-card-foreground mb-4">時間見積もりチャレンジ</h3>
          <p className="text-muted-foreground mb-6 text-sm">
            課題：アルファベット「a」から「z」までを正確に入力してください。<br/>
            (abcdefghijklmnopqrstuvwxyz)<br/><br/>
            <strong>何秒でできると思いますか？</strong>
          </p>
          
          <div className="flex items-center justify-center gap-4 mb-8">
            <button onClick={() => setEstimate(Math.max(1, estimate - 1))} className="w-8 h-8 rounded-full bg-muted font-bold">-</button>
            <div className="text-3xl font-bold text-primary w-24">{estimate}秒</div>
            <button onClick={() => setEstimate(estimate + 1)} className="w-8 h-8 rounded-full bg-muted font-bold">+</button>
          </div>

          <button
            onClick={() => { setStep('working'); setStartTime(Date.now()); setInputText(''); }}
            className="bg-primary text-primary-foreground px-8 py-3 rounded-lg font-bold hover:bg-primary/90 w-full"
          >
            スタート！
          </button>
        </div>
      )}

      {step === 'working' && (
        <div className="text-center">
          <div className="mb-4">
             <div className="text-4xl font-mono font-bold text-foreground">{elapsed.toFixed(1)}s</div>
             <div className="text-xs text-muted-foreground">目標: {estimate}秒</div>
          </div>
          
          <p className="mb-2 text-sm text-muted-foreground bg-muted py-2 rounded tracking-widest font-mono">
            abcdefghijklmnopqrstuvwxyz
          </p>
          
          <input
            type="text"
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
            className="w-full border-2 border-blue-500 rounded p-3 text-lg font-mono mb-4 text-center focus:outline-none focus:ring-4 focus:ring-blue-200"
            placeholder="ここにタイプ..."
            autoFocus
          />

          <button
            onClick={handleFinish}
            disabled={inputText !== targetText}
            className={`w-full px-6 py-3 rounded-lg font-bold ${inputText === targetText ? 'bg-green-600 text-white animate-bounce' : 'bg-gray-300 text-muted-foreground cursor-not-allowed'}`}
          >
            {inputText === targetText ? '完了！' : '入力中...'}
          </button>
          {inputText !== targetText && inputText.length > 0 && !targetText.startsWith(inputText) && (
             <p className="text-destructive text-xs mt-2">間違っています！</p>
          )}
        </div>
      )}

      {step === 'result' && (
        <div className="text-center animate-in zoom-in">
          <h3 className="font-bold text-card-foreground mb-6">結果発表</h3>
          
          <div className="flex justify-center gap-4 mb-6 items-end">
             <div className="text-center">
               <div className="text-xs font-bold text-muted-foreground uppercase">予想</div>
               <div className="text-xl font-bold text-blue-500 dark:text-blue-400">{estimate}秒</div>
             </div>
             <div className="text-2xl text-gray-300">vs</div>
             <div className="text-center">
               <div className="text-xs font-bold text-muted-foreground uppercase">実際</div>
               <div className={`text-4xl font-bold ${elapsed > estimate ? 'text-destructive' : 'text-green-500'}`}>
                 {elapsed.toFixed(2)}秒
               </div>
             </div>
          </div>

          <div className="bg-orange-50 dark:bg-orange-950 p-4 rounded text-sm text-orange-900 dark:text-orange-200 leading-relaxed text-left">
            {elapsed > estimate ? (
              <>
                <p className="font-bold mb-2">😅 楽観バイアスが発生しました！</p>
                <p>
                  「簡単だ」と思っていても、タイプミスや迷いで意外と時間がかかりませんでしたか？
                  ユーザーも自分のタスク遂行能力を同様に過大評価します。
                </p>
              </>
            ) : (
              <>
                <p className="font-bold mb-2">🎉 お見事です！</p>
                <p>
                  慎重な見積もり、あるいは優れたタイピングスキルです！
                  しかし、一般のユーザーの多くは見積もりより長くかかってしまう傾向があります。
                </p>
              </>
            )}
          </div>
          
          <button
            onClick={() => { setStep('estimate'); setInputText(''); setEstimate(5); }}
            className="mt-6 text-muted-foreground text-sm underline"
          >
            もう一度
          </button>
        </div>
      )}
    </div>
  );
};

render(<OptimismBiasDemo />);