const FlowStateDemo = () => {
  const [difficulty, setDifficulty] = useState('flow'); // boring, flow, anxiety
  const [targetPos, setTargetPos] = useState(50);
  const [score, setScore] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);

  // Game Loop
  useEffect(() => {
    if (!isPlaying) return;

    const interval = setInterval(() => {
      // Move target randomly
      const speed = difficulty === 'boring' ? 2 : difficulty === 'flow' ? 15 : 60;
      setTargetPos(prev => {
        let next = prev + (Math.random() - 0.5) * speed;
        if (next < 0) next = 0;
        if (next > 90) next = 90;
        return next;
      });
    }, 100);

    return () => clearInterval(interval);
  }, [isPlaying, difficulty]);

  const hit = () => {
    setScore(s => s + 10);
  };

  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">難易度バランス体験</h3>

      <div className="flex justify-center gap-2 mb-6">
        <button onClick={() => {setDifficulty('boring'); setIsPlaying(true); setScore(0);}} className={`px-4 py-2 rounded text-xs transition ${difficulty === 'boring' ? 'bg-green-600 text-white' : 'bg-muted'}`}>退屈 (Easy)</button>
        <button onClick={() => {setDifficulty('flow'); setIsPlaying(true); setScore(0);}} className={`px-4 py-2 rounded text-xs transition ${difficulty === 'flow' ? 'bg-primary/100 text-white shadow-lg scale-105 font-bold' : 'bg-muted'}`}>フロー (Normal)</button>
        <button onClick={() => {setDifficulty('anxiety'); setIsPlaying(true); setScore(0);}} className={`px-4 py-2 rounded text-xs transition ${difficulty === 'anxiety' ? 'bg-destructive text-destructive-foreground' : 'bg-muted'}`}>不安 (Hard)</button>
      </div>

      <div className="relative h-40 bg-gray-900 rounded-xl overflow-hidden cursor-crosshair mb-4 border-4 border-border">
         {/* Target */}
         {isPlaying ? (
           <div 
             className="absolute top-1/2 w-10 h-10 bg-yellow-400 rounded-full transform -translate-y-1/2 transition-all duration-100 flex items-center justify-center cursor-pointer shadow-[0_0_15px_rgba(255,255,0,0.8)] active:bg-card"
             style={{ left: `${targetPos}%` }}
             onMouseDown={hit}
           >
             🎯
           </div>
         ) : (
           <div className="absolute inset-0 flex items-center justify-center text-gray-400 text-sm">
             モードを選んでスタート
           </div>
         )}
      </div>

      <div className="flex justify-between items-end">
        <div className="text-2xl font-bold font-mono">SCORE: {score}</div>
        <div className="text-xs text-right w-1/2 text-muted-foreground">
          {difficulty === 'boring' && "遅すぎて眠くなりませんか？（退屈）"}
          {difficulty === 'flow' && "適度な手応えで楽しくありませんか？（没頭）"}
          {difficulty === 'anxiety' && "速すぎてイライラしませんか？（不安・挫折）"}
        </div>
      </div>
    </div>
  );
};

render(<FlowStateDemo />);