import React, { useState, useEffect, useCallback, useRef } from 'react';
import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Eye, Power, AlertTriangle, Zap, Timer, RotateCcw, Check, X, Trophy, Volume2, Music } from 'lucide-react';

// --- Types & Constants ---

type Direction = 'Up' | 'Right' | 'Down' | 'Left';
type ColorType = 'Black' | 'Blue' | 'Red' | 'Yellow';

interface GameConfig {
  useRed: boolean;
  useBlue: boolean;
  useYellow: boolean;
}

interface LandoltState {
  id: number;
  direction: Direction;
  color: ColorType;
  x: number; 
  y: number; 
  spawnTime: number;
  hitsRemaining: number;
}

interface Feedback {
  id: number;
  text: string;
  type: 'success' | 'error' | 'info';
  x: number;
  y: number;
}

const GAME_DURATION = 30; // seconds
const DIRECTIONS: Direction[] = ['Up', 'Right', 'Down', 'Left'];
const RED_LIMIT_MS = 1500; // 赤色は1.5秒以内

// --- Audio Utility ---
// 簡易的なシンセサイザー音を生成
const playSound = (type: 'switch' | 'start' | 'gameover' | 'back') => {
  try {
    const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
    if (!AudioContext) return;
    
    const ctx = new AudioContext();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    
    osc.connect(gain);
    gain.connect(ctx.destination);

    const now = ctx.currentTime;

    if (type === 'switch') {
      // カチッという短い音
      osc.type = 'sine';
      osc.frequency.setValueAtTime(800, now);
      osc.frequency.exponentialRampToValueAtTime(1200, now + 0.05);
      gain.gain.setValueAtTime(0.1, now);
      gain.gain.linearRampToValueAtTime(0, now + 0.05);
      osc.start(now);
      osc.stop(now + 0.05);
    } else if (type === 'start') {
      // ピコーン！という上昇音
      osc.type = 'triangle';
      osc.frequency.setValueAtTime(440, now);
      osc.frequency.linearRampToValueAtTime(880, now + 0.1);
      gain.gain.setValueAtTime(0.1, now);
      gain.gain.linearRampToValueAtTime(0, now + 0.3);
      osc.start(now);
      osc.stop(now + 0.3);
    } else if (type === 'gameover') {
      // ジャジャーン
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(300, now);
      osc.frequency.exponentialRampToValueAtTime(100, now + 0.8);
      gain.gain.setValueAtTime(0.1, now);
      gain.gain.linearRampToValueAtTime(0, now + 0.8);
      osc.start(now);
      osc.stop(now + 0.8);
    } else if (type === 'back') {
      // ポンッ
      osc.type = 'sine';
      osc.frequency.setValueAtTime(400, now);
      gain.gain.setValueAtTime(0.1, now);
      gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
      osc.start(now);
      osc.stop(now + 0.1);
    }

    // クリーンアップ
    setTimeout(() => {
        if(ctx.state !== 'closed') ctx.close();
    }, 1000);

  } catch (e) {
    console.error('Audio play failed', e);
  }
};

// --- Helper Functions ---

const getRandomDirection = (): Direction => DIRECTIONS[Math.floor(Math.random() * DIRECTIONS.length)];

const getOppositeDirection = (dir: Direction): Direction => {
  const index = DIRECTIONS.indexOf(dir);
  return DIRECTIONS[(index + 2) % 4];
};

const getRandomPosition = () => ({
  x: 20 + Math.random() * 60, // 横: 20-80%
  y: 35 + Math.random() * 30, // 縦: 中央エリアに見やすく配置
});

export default function App() {
  // Game State
  const [gameState, setGameState] = useState<'title' | 'playing' | 'gameover'>('title');
  const [config, setConfig] = useState<GameConfig>({ useRed: true, useBlue: true, useYellow: true });
  
  const [score, setScore] = useState(0.1);
  const [level, setLevel] = useState(1);
  const [timeLeft, setTimeLeft] = useState(GAME_DURATION);
  const [landolt, setLandolt] = useState<LandoltState | null>(null);
  const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
  const [levelAlert, setLevelAlert] = useState<string | null>(null);
  
  const [highScore, setHighScore] = useState<number>(() => {
    try {
      const saved = localStorage.getItem('ultraVisionKidsHighScoreV3');
      return saved ? parseFloat(saved) : 0.0;
    } catch {
      return 0.0;
    }
  });

  const timerRef = useRef<number | null>(null);
  const alertTimerRef = useRef<number | null>(null);
  const redTimeoutRef = useRef<number | null>(null);

  // --- Level Logic Helper ---
  // 現在の設定に基づいて、有効な特殊色を難易度順にリストアップする
  // 難易度順: Red(簡単) -> Yellow(普通) -> Blue(難しい) と仮定してソート
  const getActiveSpecialColors = useCallback(() => {
    const list: ColorType[] = [];
    if (config.useRed) list.push('Red');
    if (config.useYellow) list.push('Yellow');
    if (config.useBlue) list.push('Blue');
    return list; 
  }, [config]);

  // --- Game Logic ---

  const handleRedTimeout = useCallback(() => {
    setLandolt(current => {
      if (current && current.color === 'Red') {
        addFeedback('おそい！', 'error', current.x, current.y);
        setScore(prev => Math.max(0.1, parseFloat((prev - 0.2).toFixed(1))));
        return null; 
      }
      return current;
    });
  }, []);

  const spawnLandolt = useCallback(() => {
    let nextColor: ColorType = 'Black';
    let pos = { x: 50, y: 50 }; 

    if (level >= 2) pos = getRandomPosition();

    // アクティブな特殊色リストを取得
    const activeSpecials = getActiveSpecialColors();
    const availableColors: ColorType[] = ['Black'];

    // レベルに応じて解禁する色を決定 (前から順番に詰める)
    if (level >= 3 && activeSpecials.length > 0) availableColors.push(activeSpecials[0]);
    if (level >= 4 && activeSpecials.length > 1) availableColors.push(activeSpecials[1]);
    if (level >= 5 && activeSpecials.length > 2) availableColors.push(activeSpecials[2]);

    // 色の抽選ロジック
    if (availableColors.length > 1) {
        // レベルが高いほど特殊色が出やすくなる確率を調整
        // 修正: 確率を底上げし、後半は黒よりも色付きが多く出るようにする
        let colorChance = 0.5; // Lv3初期値
        if (level >= 4) colorChance = 0.7; // Lv4で7割
        if (level >= 5) colorChance = 0.85; // Lv5で8.5割

        if (Math.random() < colorChance) {
            const specialColors = availableColors.filter(c => c !== 'Black');
            nextColor = specialColors[Math.floor(Math.random() * specialColors.length)];
        }
    }

    const newLandolt: LandoltState = {
      id: Date.now(),
      direction: getRandomDirection(),
      color: nextColor,
      x: pos.x,
      y: pos.y,
      spawnTime: Date.now(),
      hitsRemaining: nextColor === 'Yellow' ? 3 : 1,
    };

    setLandolt(newLandolt);

    if (redTimeoutRef.current) clearTimeout(redTimeoutRef.current);
    if (nextColor === 'Red') {
      redTimeoutRef.current = window.setTimeout(handleRedTimeout, RED_LIMIT_MS);
    }

  }, [level, getActiveSpecialColors, handleRedTimeout]);

  useEffect(() => {
    if (gameState === 'playing' && !landolt) {
      spawnLandolt();
    }
  }, [gameState, landolt, spawnLandolt]);

  const startGame = () => {
    playSound('start');
    setGameState('playing');
    setScore(0.1);
    setLevel(1);
    setTimeLeft(GAME_DURATION);
    setFeedbacks([]);
    setLevelAlert(null);
    spawnLandolt();
  };

  const handleTitleBack = () => {
      playSound('back');
      setGameState('title');
  };

  const endGame = useCallback(() => {
    playSound('gameover');
    setGameState('gameover');
    if (score > highScore) {
      setHighScore(score);
      localStorage.setItem('ultraVisionKidsHighScoreV3', score.toFixed(1));
    }
    if (redTimeoutRef.current) clearTimeout(redTimeoutRef.current);
    if (alertTimerRef.current) clearTimeout(alertTimerRef.current);
  }, [score, highScore]);

  // Main Timer
  useEffect(() => {
    if (gameState === 'playing') {
      timerRef.current = window.setInterval(() => {
        setTimeLeft((prev) => {
          if (prev <= 1) {
            endGame();
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    } else if (timerRef.current) {
      clearInterval(timerRef.current);
    }
    return () => {
      if (timerRef.current) clearInterval(timerRef.current);
    };
  }, [gameState, endGame]);

  // Level Management (Dynamic Adjustment)
  useEffect(() => {
    let newLevel = level;
    // 視力に応じたレベルアップ
    if (score >= 0.3 && level < 2) newLevel = 2; // ランダム位置
    if (score >= 0.7 && level < 3) newLevel = 3; // 特殊色1 解禁
    if (score >= 1.2 && level < 4) newLevel = 4; // 特殊色2 解禁
    if (score >= 1.8 && level < 5) newLevel = 5; // 特殊色3 解禁

    if (newLevel !== level) {
        setLevel(newLevel);
        
        // 新しく解禁された色に基づいてアラートを出す
        const activeSpecials = getActiveSpecialColors();
        let message = '';
        let targetColor: ColorType | undefined;
        
        if (newLevel === 3 && activeSpecials.length > 0) targetColor = activeSpecials[0];
        else if (newLevel === 4 && activeSpecials.length > 1) targetColor = activeSpecials[1];
        else if (newLevel === 5 && activeSpecials.length > 2) targetColor = activeSpecials[2];

        if (targetColor) {
            if (targetColor === 'Red') message = 'あか色は 1.5びょう！';
            if (targetColor === 'Yellow') message = 'きいろは 3かい れんだ！';
            if (targetColor === 'Blue') message = 'あお色は はんたい！';
        }

        if (message) {
            setLevelAlert(message);
            if (alertTimerRef.current) clearTimeout(alertTimerRef.current);
            alertTimerRef.current = window.setTimeout(() => {
                setLevelAlert(null);
            }, 3000);
        }
    }
  }, [score, level, getActiveSpecialColors]);

  const addFeedback = (text: string, type: Feedback['type'], x: number, y: number) => {
    const id = Date.now() + Math.random();
    setFeedbacks(prev => [...prev, { id, text, type, x, y }]);
    setTimeout(() => {
      setFeedbacks(prev => prev.filter(f => f.id !== id));
    }, 400);
  };

  const handleInput = useCallback((inputDir: Direction) => {
    if (gameState !== 'playing' || !landolt) return;

    if (landolt.color === 'Red' && redTimeoutRef.current) {
        clearTimeout(redTimeoutRef.current);
    }

    let isCorrect = false;
    let scoreDelta = 0.1;
    let message = 'ナイス！';

    if (landolt.color === 'Blue') {
      const targetDir = getOppositeDirection(landolt.direction);
      isCorrect = inputDir === targetDir;
    } else {
      isCorrect = inputDir === landolt.direction;
    }

    if (isCorrect) {
      if (landolt.color === 'Yellow') {
        const remaining = landolt.hitsRemaining - 1;
        if (remaining > 0) {
          setLandolt({ ...landolt, hitsRemaining: remaining });
          return; 
        }
      }

      if (landolt.color === 'Red') scoreDelta = 0.2;
      if (landolt.color === 'Blue') scoreDelta = 0.2;
      if (landolt.color === 'Yellow') scoreDelta = 0.3;

      setScore(prev => parseFloat((prev + scoreDelta).toFixed(1)));
      addFeedback(message, 'success', landolt.x, landolt.y);
      spawnLandolt();

    } else {
      addFeedback('ちがう！', 'error', landolt.x, landolt.y);
      setScore(prev => Math.max(0.1, parseFloat((prev - 0.2).toFixed(1))));
    }
  }, [gameState, landolt, spawnLandolt]);

  // Keyboard
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Enter') {
          if (gameState === 'title') startGame();
          else if (gameState === 'gameover') handleTitleBack();
          return;
      }
      if (gameState !== 'playing') return;
      
      switch (e.key) {
        case 'ArrowUp': handleInput('Up'); break;
        case 'ArrowDown': handleInput('Down'); break;
        case 'ArrowLeft': handleInput('Left'); break;
        case 'ArrowRight': handleInput('Right'); break;
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [gameState, handleInput]);


  // --- Components ---

  // Config Toggle Button
  const ToggleBtn = ({ label, isActive, colorClass, icon: Icon, onClick }: any) => (
      <button 
        onClick={() => {
            playSound('switch');
            onClick();
        }}
        className={`flex-1 flex flex-col items-center justify-center p-3 rounded-2xl border-b-4 transition-all active:scale-95 active:border-b-0 active:translate-y-1
            ${isActive 
                ? `bg-white ${colorClass} border-slate-200 shadow-sm` 
                : 'bg-slate-200 text-slate-400 border-slate-300 grayscale opacity-60'
            }
        `}
      >
        <div className={`p-2 rounded-full mb-1 ${isActive ? 'bg-slate-50' : 'bg-slate-300'}`}>
            <Icon size={24} />
        </div>
        <span className="font-black text-sm">{label}</span>
        <div className="mt-1">
            {isActive ? <Check size={16} strokeWidth={4} /> : <X size={16} strokeWidth={4} />}
        </div>
      </button>
  );

  const ArrowMark = ({ data }: { data: LandoltState }) => {
    let rotateDeg = 0;
    switch(data.direction) {
        case 'Up': rotateDeg = 0; break;
        case 'Right': rotateDeg = 90; break;
        case 'Down': rotateDeg = 180; break;
        case 'Left': rotateDeg = 270; break;
    }

    let iconColorClass = 'text-slate-800';
    if (data.color === 'Blue') { iconColorClass = 'text-blue-500'; }
    if (data.color === 'Red') { iconColorClass = 'text-red-500'; }
    if (data.color === 'Yellow') { iconColorClass = 'text-yellow-500'; }

    return (
      <div 
        className="absolute w-32 h-32 flex items-center justify-center z-10"
        style={{ 
            left: `${data.x}%`, 
            top: `${data.y}%`,
            transform: `translate(-50%, -50%)`,
        }}
      >
        <div className="relative">
            <ArrowUp 
                size={110} 
                strokeWidth={4}
                className={`${iconColorClass} drop-shadow-md transition-all duration-300`}
                style={{ transform: `rotate(${rotateDeg}deg)` }}
            />
            {data.color === 'Yellow' && (
            <span className="text-4xl drop-shadow-md bg-white rounded-full w-14 h-14 flex items-center justify-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-slate-900 border-[5px] border-yellow-500 font-black z-20 animate-pulse">
                {data.hitsRemaining}
            </span>
            )}
        </div>
      </div>
    );
  };

  return (
    <div className="w-full h-screen bg-[#E0F2FE] overflow-hidden flex flex-col font-sans select-none touch-manipulation">
      
      {/* Background Decor */}
      <div className="absolute inset-0 opacity-20 pointer-events-none" 
           style={{ backgroundImage: 'radial-gradient(#0EA5E9 3px, transparent 3px)', backgroundSize: '30px 30px' }}></div>

      {/* --- HEADER (Game) --- */}
      {gameState === 'playing' && (
        <div className="bg-white/90 backdrop-blur-sm px-2 py-2 flex items-center gap-2 z-30 shadow-sm border-b-4 border-slate-100 rounded-b-3xl mx-2 mt-2">
            {/* やめるボタン (追加) */}
            <button 
                onClick={handleTitleBack}
                className="flex flex-col items-center justify-center bg-slate-100 hover:bg-red-50 hover:text-red-400 text-slate-400 rounded-2xl w-14 h-14 border-b-4 border-slate-200 active:border-b-0 active:translate-y-[4px] transition-all shrink-0 group"
            >
                <X size={24} strokeWidth={4} className="group-hover:scale-110 transition-transform"/>
                <span className="text-[9px] font-black leading-none mt-1">やめる</span>
            </button>

            <div className="flex flex-col items-center shrink-0">
                <span className="text-[10px] font-black text-slate-400 leading-none mb-1">しりょく</span>
                <span className="text-4xl text-blue-600 font-black tracking-tighter leading-none">{score.toFixed(1)}</span>
            </div>
            
            {/* HINT AREA */}
            <div className="flex-1 flex justify-center items-center px-1 overflow-hidden">
                 {levelAlert ? (
                    <div className="bg-yellow-100 px-3 py-1 rounded-xl border-b-4 border-yellow-300 flex items-center justify-center gap-1 animate-bounce w-full">
                        <AlertTriangle className="w-4 h-4 text-yellow-600 fill-yellow-400 shrink-0" />
                        <span className="text-yellow-700 font-black text-xs whitespace-nowrap overflow-hidden text-ellipsis">{levelAlert}</span>
                    </div>
                 ) : (
                    landolt && (
                        <div className="flex items-center gap-1 animate-in fade-in zoom-in justify-center">
                            {landolt.color === 'Red' && <span className="text-red-500 font-black text-lg flex gap-1 items-center whitespace-nowrap"><Timer className="w-5"/>いそげ！</span>}
                            {landolt.color === 'Blue' && <span className="text-blue-500 font-black text-lg flex gap-1 items-center whitespace-nowrap"><RotateCcw className="w-5"/>はんたい！</span>}
                            {landolt.color === 'Yellow' && <span className="text-yellow-500 font-black text-lg flex gap-1 items-center whitespace-nowrap"><Zap className="w-5"/>れんだ！</span>}
                            {landolt.color === 'Black' && <span className="text-slate-400 font-bold text-sm whitespace-nowrap">むきは？</span>}
                        </div>
                    )
                 )}
            </div>

            <div className="flex flex-col items-center shrink-0">
                <span className="text-[10px] font-black text-slate-400 leading-none mb-1">のこり</span>
                <span className={`text-2xl font-black ${timeLeft < 10 ? 'text-red-500 animate-pulse' : 'text-slate-700'}`}>{timeLeft}</span>
            </div>
        </div>
      )}

      {/* --- TITLE SCREEN --- */}
      {gameState === 'title' && (
          <div className="absolute inset-0 z-50 flex items-center justify-center p-4">
              <div className="bg-white rounded-[2.5rem] p-6 w-full max-w-sm shadow-xl border-4 border-white ring-8 ring-sky-200 flex flex-col gap-6 animate-in zoom-in duration-300">
                  <div className="text-center mt-2">
                      <div className="inline-block bg-sky-100 p-4 rounded-full mb-4 border-4 border-sky-200">
                        <Eye className="w-12 h-12 text-blue-500" />
                      </div>
                      <h1 className="text-3xl font-black text-slate-800 tracking-tight leading-tight drop-shadow-sm">
                          すーぱー<br/>しりょく てすと
                      </h1>
                  </div>

                  <div className="bg-slate-50 rounded-3xl p-5 border-2 border-slate-100">
                      <p className="text-center text-slate-400 text-xs font-black mb-3 bg-white inline-block px-3 py-1 rounded-full mx-auto shadow-sm">あそぶ ルールを えらぼう</p>
                      <div className="flex gap-3">
                          <ToggleBtn 
                            label="あか" 
                            isActive={config.useRed} 
                            colorClass="text-red-500" 
                            icon={Timer}
                            onClick={() => setConfig(p => ({...p, useRed: !p.useRed}))} 
                          />
                          <ToggleBtn 
                            label="きいろ" 
                            isActive={config.useYellow} 
                            colorClass="text-yellow-500" 
                            icon={Zap}
                            onClick={() => setConfig(p => ({...p, useYellow: !p.useYellow}))} 
                          />
                          <ToggleBtn 
                            label="あお" 
                            isActive={config.useBlue} 
                            colorClass="text-blue-500" 
                            icon={RotateCcw}
                            onClick={() => setConfig(p => ({...p, useBlue: !p.useBlue}))} 
                          />
                      </div>
                  </div>

                  <button 
                    onClick={startGame}
                    className="w-full py-5 bg-green-500 hover:bg-green-400 text-white rounded-2xl font-black text-2xl shadow-[0_6px_0_rgb(21,128,61)] active:shadow-none active:translate-y-[6px] transition-all border-b-2 border-green-600 flex items-center justify-center gap-2 group"
                  >
                      <Power className="group-hover:scale-110 transition-transform" strokeWidth={4} />
                      スタート！
                  </button>
              </div>
          </div>
      )}

      {/* --- GAME OVER SCREEN --- */}
      {gameState === 'gameover' && (
          <div className="absolute inset-0 z-50 flex items-center justify-center p-4 bg-sky-900/60 backdrop-blur-sm">
             <div className="bg-white rounded-[2.5rem] p-8 w-full max-w-sm shadow-2xl flex flex-col items-center gap-4 animate-in zoom-in duration-300 text-center relative overflow-hidden border-4 border-white">
                
                <div className="mt-2">
                    <Trophy className="w-16 h-16 text-yellow-400 mx-auto mb-2 drop-shadow-md fill-yellow-200" />
                    <h2 className="text-xl font-black text-slate-400">あなたの しりょくは...</h2>
                </div>
                
                <div className="py-8 px-4 bg-sky-50 rounded-3xl border-b-8 border-sky-100 w-full mb-2">
                    <span className="text-[6rem] font-black text-blue-500 leading-none drop-shadow-sm tracking-tighter">
                        {score.toFixed(1)}
                    </span>
                </div>

                <div className="text-slate-400 font-bold text-xs bg-slate-100 px-4 py-2 rounded-full mb-4">
                    最高きろく: {highScore.toFixed(1)}
                </div>

                <button 
                    onClick={handleTitleBack}
                    className="w-full py-4 bg-slate-700 hover:bg-slate-600 text-white rounded-2xl font-black text-xl shadow-[0_6px_0_rgb(15,23,42)] active:shadow-none active:translate-y-[6px] transition-all border-b-2 border-slate-800 flex items-center justify-center gap-2"
                >
                    <RotateCcw strokeWidth={3} />
                    タイトルへ
                </button>
             </div>
          </div>
      )}

      {/* --- MAIN GAME CANVAS --- */}
      <div className="flex-1 relative w-full overflow-hidden">
        {/* The Mark */}
        {gameState === 'playing' && landolt && <ArrowMark data={landolt} />}

        {/* Feedback Effects */}
        {feedbacks.map(fb => (
            <div 
                key={fb.id}
                className={`absolute font-black text-4xl animate-out fade-out slide-out-to-top-12 duration-500 whitespace-nowrap z-50 pointer-events-none
                    ${fb.type === 'success' ? 'text-green-500 drop-shadow-[0_4px_0_white]' : ''}
                    ${fb.type === 'error' ? 'text-red-500 drop-shadow-[0_4px_0_white]' : ''}
                    ${fb.type === 'info' ? 'text-blue-500' : ''}
                `}
                style={{ left: `${fb.x}%`, top: `${fb.y - 20}%`, transform: 'translateX(-50%)' }}
            >
                {fb.text}
            </div>
        ))}
      </div>

      {/* --- CONTROL PAD --- */}
      {gameState === 'playing' && (
      <div className="bg-white rounded-t-[3rem] border-t-4 border-slate-100 p-6 z-40 pb-10 shadow-[0_-10px_40px_-15px_rgba(0,0,0,0.1)]">
        <div className="max-w-[300px] mx-auto grid grid-cols-3 gap-3">
            <div></div>
            <button 
                className="aspect-square bg-white hover:bg-slate-50 text-slate-300 active:bg-blue-500 active:text-white rounded-2xl flex items-center justify-center border-b-[8px] border-slate-200 active:border-b-0 active:translate-y-[8px] transition-all"
                onClick={() => handleInput('Up')}
            >
                <ArrowUp size={48} strokeWidth={4} />
            </button>
            <div></div>
            
            <button 
                className="aspect-square bg-white hover:bg-slate-50 text-slate-300 active:bg-blue-500 active:text-white rounded-2xl flex items-center justify-center border-b-[8px] border-slate-200 active:border-b-0 active:translate-y-[8px] transition-all"
                onClick={() => handleInput('Left')}
            >
                <ArrowLeft size={48} strokeWidth={4} />
            </button>
            <div className="flex items-center justify-center">
                 <div className="w-4 h-4 bg-slate-200 rounded-full"></div>
            </div>
            <button 
                className="aspect-square bg-white hover:bg-slate-50 text-slate-300 active:bg-blue-500 active:text-white rounded-2xl flex items-center justify-center border-b-[8px] border-slate-200 active:border-b-0 active:translate-y-[8px] transition-all"
                onClick={() => handleInput('Right')}
            >
                <ArrowRight size={48} strokeWidth={4} />
            </button>

            <div></div>
            <button 
                className="aspect-square bg-white hover:bg-slate-50 text-slate-300 active:bg-blue-500 active:text-white rounded-2xl flex items-center justify-center border-b-[8px] border-slate-200 active:border-b-0 active:translate-y-[8px] transition-all"
                onClick={() => handleInput('Down')}
            >
                <ArrowDown size={48} strokeWidth={4} />
            </button>
            <div></div>
        </div>
      </div>
      )}
    </div>
  );
}