import React, { useState, useEffect, useRef, useCallback } from 'react';

// === KONFIGURASI GAME ===
const TARGET_SCORE = 500; 
const GAME_1_DURATION = 50; 

const ICONS = [
  { type: 'healthy', emoji: '🍎', points: 10 },
  { type: 'healthy', emoji: '🍊', points: 10 },
  { type: 'healthy', emoji: '🍋', points: 10 },
  { type: 'healthy', emoji: '🍉', points: 10 },
  { type: 'healthy', emoji: '🍯', points: 10 },
  { type: 'unhealthy', emoji: '🍔', points: -10 },
  { type: 'unhealthy', emoji: '🍟', points: -10 },
  { type: 'unhealthy', emoji: '🥤', points: -10 },
];

// --- KOMPONEN: LAYAR UTAMA ---
const Home = ({ playerName, setPlayerName, setScore, setTimeDiff, setScreen, initAudio, audioEnabled, setAudioEnabled }) => (
  <div className="flex flex-col items-center justify-center h-full space-y-6 text-center">
    <div className="text-6xl animate-bounce">🥤🍋</div>
    <h1 className="text-4xl font-extrabold text-green-800">Fresh & Healthy Stand</h1>
    <p className="text-lg text-gray-600 max-w-md">
      Mainkan game singkat ini sebelum memesan dan dapatkan kesempatan memenangkan <b>Minuman GRATIS</b> atau diskon menarik!
    </p>
    
    <div className="flex flex-col w-full max-w-xs space-y-3 mt-4">
      <input 
        type="text" 
        placeholder="Masukkan Nama/IG kamu..." 
        className="p-3 border-2 border-green-300 rounded-xl focus:outline-none focus:border-green-600 text-center text-lg font-semibold"
        value={playerName}
        onChange={(e) => setPlayerName(e.target.value)}
      />
      <button 
        onClick={() => {
          if(playerName.trim() === '') return alert('Isi nama dulu dong!');
          initAudio(); 
          setScore(0);
          setTimeDiff(null);
          setScreen('GAME1');
        }}
        className="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-xl shadow-lg transition transform hover:scale-105"
      >
        MULAI TANTANGAN
      </button>
      <button 
        onClick={() => setScreen('LEADERBOARD')}
        className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-6 rounded-xl shadow transition"
      >
        LIHAT LEADERBOARD
      </button>
    </div>
    
    <div className="absolute top-4 right-4">
       <button 
          onClick={() => setAudioEnabled(!audioEnabled)}
          className="text-2xl opacity-50 hover:opacity-100 transition"
          title="Toggle Sound"
       >
           {audioEnabled ? '🔊' : '🔇'}
       </button>
    </div>
  </div>
);

// --- KOMPONEN: GAME 1 (HEALTHY CATCH) ---
const Game1 = ({ score, setScore, setScreen, setReward, saveToLeaderboard, playSound }) => {
  const [timeLeft, setTimeLeft] = useState(GAME_1_DURATION);
  const [items, setItems] = useState([]);
  
  // Timer Mundur
  useEffect(() => {
    if (timeLeft > 0) {
      const timer = setInterval(() => setTimeLeft(t => t - 1), 1000);
      return () => clearInterval(timer);
    }
  }, [timeLeft]);

  // Cek kalau skor langsung tercapai (langsung lanjut ke 10 detik tanpa nunggu waktu abis)
  useEffect(() => {
    if (score >= TARGET_SCORE) {
      playSound('win');
      setScreen('GAME2'); 
    }
  }, [score, playSound, setScreen]);

  // Cek kalau waktu abis tapi skor kurang (TETAP LANJUT KE GAME 2)
  useEffect(() => {
    if (timeLeft <= 0 && score < TARGET_SCORE) {
      playSound('lose'); // Cuma kasih suara "womp womp" penanda waktu habis
      setScreen('GAME2'); // Tapi TETAP lanjut ke game 10 detik
    }
  }, [timeLeft, score, playSound, setScreen]);

  // Game Loop: Munculin Buah
  useEffect(() => {
    const spawner = setInterval(() => {
      const randomIcon = ICONS[Math.floor(Math.random() * ICONS.length)];
      const newItem = {
        id: Math.random().toString(),
        ...randomIcon,
        x: Math.floor(Math.random() * 80) + 10,
        y: -10,
        speed: Math.random() * 2 + 1.5 // Kecepatan variatif
      };
      setItems(prev => [...prev, newItem]);
    }, 350); // Buah dibikin lebih sering turun biar gampang capai target 500

    const mover = setInterval(() => {
      setItems(prev => prev.map(item => ({...item, y: item.y + item.speed})).filter(item => item.y < 110));
    }, 50);

    return () => {
      clearInterval(spawner);
      clearInterval(mover);
    };
  }, []);

  const catchItem = (id, type, points) => {
    if (type === 'healthy') {
        playSound('catchGood');
    } else {
        playSound('catchBad');
    }
    setScore(s => s + points);
    setItems(prev => prev.filter(item => item.id !== id));
  };

  return (
    <div className="flex flex-col h-full w-full">
      <div className="flex justify-between items-center p-4 bg-green-100 rounded-t-2xl shadow z-10">
        <div>
          <p className="text-sm font-bold text-gray-500">TARGET: {TARGET_SCORE}</p>
          <p className={`text-2xl font-black ${score >= TARGET_SCORE ? 'text-green-600' : 'text-gray-700'}`}>Skor: {score}</p>
        </div>
        <div className="text-center">
          <p className="text-sm font-bold text-gray-500">WAKTU</p>
          <p className={`text-3xl font-black ${timeLeft <= 10 ? 'text-red-600 animate-pulse' : 'text-red-500'}`}>{timeLeft}s</p>
        </div>
      </div>
      
      <div className="relative flex-grow bg-blue-50 overflow-hidden cute-cursor rounded-b-2xl border-x-4 border-b-4 border-green-100">
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-gray-300 opacity-50 text-4xl font-bold whitespace-nowrap pointer-events-none">
          Klik yang sehat!
        </div>
        
        {items.map(item => (
          <div
            key={item.id}
            onMouseDown={() => catchItem(item.id, item.type, item.points)} 
            className="absolute text-5xl hover:scale-110 transition-transform select-none drop-shadow-md"
            style={{ left: `${item.x}%`, top: `${item.y}%`, cursor: 'pointer' }}
          >
            {item.emoji}
          </div>
        ))}
      </div>
    </div>
  );
};

// --- KOMPONEN: GAME 2 (10-SECOND CHALLENGE) ---
const Game2 = ({ setScreen, timeDiff, setTimeDiff, setReward, saveToLeaderboard, playSound }) => {
  const [gameState, setGameState] = useState('IDLE'); 
  const [displayTime, setDisplayTime] = useState('0.00');
  const startTimeRef = useRef(null);
  const animationRef = useRef(null);

  const startTimer = () => {
    setGameState('RUNNING');
    playSound('catchGood'); 
    startTimeRef.current = performance.now();
    
    const updateTimer = () => {
      const now = performance.now();
      const elapsed = (now - startTimeRef.current) / 1000;
      
      if (elapsed > 3.0) {
        setDisplayTime('??.??');
      } else {
        setDisplayTime(elapsed.toFixed(2));
      }
      animationRef.current = requestAnimationFrame(updateTimer);
    };
    animationRef.current = requestAnimationFrame(updateTimer);
  };

  const stopTimer = () => {
    cancelAnimationFrame(animationRef.current);
    const now = performance.now();
    const elapsed = (now - startTimeRef.current) / 1000;
    const diff = Math.abs(10 - elapsed);
    
    setDisplayTime(elapsed.toFixed(2)); 
    setGameState('DONE');
    setTimeDiff(diff);

    let finalReward = '';
    if (diff === 0) {
        finalReward = 'GRAND PRIZE: GRATIS 1 CUP!';
        playSound('win');
    }
    else if (diff <= 0.15) {
        finalReward = 'DISKON 50%';
        playSound('win');
    }
    else if (diff <= 0.50) {
        finalReward = 'GRATIS EXTRA TOPPING';
        playSound('win');
    }
    else {
        finalReward = 'Harga Normal. Semangat ya!';
        playSound('lose');
    }

    setReward(finalReward);
    saveToLeaderboard(diff, finalReward);
    
    setTimeout(() => {
      setScreen('RESULT');
    }, 2500); 
  };

  return (
    <div className="flex flex-col items-center justify-center h-full text-center space-y-8 relative">
      <button onClick={() => setScreen('HOME')} className="absolute top-0 left-0 text-gray-300 hover:text-gray-500 text-xs">Menu</button>

      <div>
        <h2 className="text-3xl font-extrabold text-green-800 mb-2">Bonus Round!</h2>
        <p className="text-gray-600">Hentikan timer tepat di angka <b>10.00 detik</b>.<br/>Timer akan menghilang di detik ke-3.</p>
      </div>

      <div className="w-64 h-32 bg-gray-900 rounded-2xl flex items-center justify-center shadow-inner border-4 border-gray-300">
        <span className={`text-6xl font-mono font-bold ${gameState === 'DONE' ? (timeDiff <= 0.5 ? 'text-green-400 animate-bounce' : 'text-red-400') : 'text-yellow-400'}`}>
          {displayTime}
        </span>
      </div>

      {gameState === 'IDLE' && (
        <button 
          onClick={startTimer}
          className="w-48 bg-green-600 hover:bg-green-700 text-white font-black text-2xl py-4 rounded-xl shadow-lg transition transform hover:scale-105 active:scale-95"
        >
          START
        </button>
      )}

      {gameState === 'RUNNING' && (
        <button 
          onClick={stopTimer}
          className="w-48 bg-red-600 hover:bg-red-700 text-white font-black text-2xl py-4 rounded-xl shadow-lg transition transform active:scale-95"
        >
          STOP!
        </button>
      )}
      
      {gameState === 'DONE' && (
        <div className="font-bold text-xl text-green-700 mt-4">
           {timeDiff <= 0.5 ? '🎉 Wah Hampir Tepat! 🎉' : 'Aduh Meleset...'}
        </div>
      )}
    </div>
  );
};

// --- KOMPONEN: LAYAR HASIL ---
const ResultScreen = ({ playerName, setPlayerName, score, timeDiff, reward, setScreen }) => (
  <div className="flex flex-col items-center justify-center h-full text-center space-y-6 relative">
    {timeDiff !== null && timeDiff <= 0.5 && (
       <div className="absolute inset-0 pointer-events-none overflow-hidden">
           {[...Array(20)].map((_, i) => (
               <div key={i} className="absolute w-3 h-3 bg-green-500 rounded-full animate-ping" 
                    style={{
                        left: `${Math.random() * 100}%`, 
                        top: `${Math.random() * 100}%`,
                        animationDelay: `${Math.random() * 2}s`
                    }}></div>
           ))}
       </div>
    )}

    <h2 className="text-4xl font-black text-green-800 z-10">TANTANGAN SELESAI!</h2>
    
    <div className="bg-white p-6 rounded-2xl shadow-xl w-full max-w-sm border-2 border-green-200 z-10">
      <p className="text-gray-500 font-semibold mb-1">Pemain: {playerName}</p>
      <div className="py-3 border-b border-gray-100">
        <p className="text-sm text-gray-500">Skor Nangkep Buah</p>
        <p className="text-2xl font-bold text-green-600">{score} Poin</p>
      </div>
      
      {timeDiff !== null && (
        <div className="py-3 border-b border-gray-100 bg-yellow-50 rounded-lg mt-2">
          <p className="text-sm text-gray-500">Selisih Waktu Fokus</p>
          <p className="text-3xl font-black text-yellow-600">± {timeDiff.toFixed(2)} detik</p>
        </div>
      )}

      <div className="pt-4">
        <p className="text-sm text-gray-500 mb-1">REWARD KAMU:</p>
        <p className={`text-xl font-extrabold text-white py-2 rounded-lg shadow-inner ${timeDiff !== null && timeDiff <= 0.5 ? 'bg-green-600 animate-pulse' : 'bg-gray-500'}`}>
          {reward}
        </p>
      </div>
    </div>

    <div className="flex space-x-4 z-10">
      <button 
        onClick={() => {
          setPlayerName(''); 
          setScreen('HOME');
        }}
        className="bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-6 rounded-xl shadow transition"
      >
        Selesai / Next Player
      </button>
    </div>
  </div>
);

// --- KOMPONEN: LEADERBOARD ---
const LeaderboardScreen = ({ leaderboard, setLeaderboard, setScreen }) => (
  <div className="flex flex-col items-center h-full py-8 space-y-4 w-full max-w-md mx-auto">
    <h2 className="text-3xl font-black text-green-800">🏆 WALL OF FAME 🏆</h2>
    <p className="text-gray-600">Pemain dengan fokus terbaik hari ini!</p>
    
    <div className="w-full bg-white rounded-2xl shadow-xl overflow-hidden border border-green-100">
      <table className="w-full text-left">
        <thead className="bg-green-600 text-white">
          <tr>
            <th className="p-3">Rank</th>
            <th className="p-3">Nama</th>
            <th className="p-3 text-right">Selisih Waktu</th>
          </tr>
        </thead>
        <tbody>
          {leaderboard.length === 0 ? (
            <tr>
              <td colSpan="3" className="p-6 text-center text-gray-500 font-semibold">
                Belum ada yang main. Jadilah yang pertama!
              </td>
            </tr>
          ) : (
            leaderboard.map((entry, index) => (
              <tr key={index} className="border-b border-gray-100 hover:bg-green-50 transition">
                <td className="p-3 font-bold text-center">
                  {index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : index + 1}
                </td>
                <td className="p-3 font-semibold text-gray-800">
                  {entry.name}
                  <div className="text-xs text-green-600">{entry.reward}</div>
                </td>
                <td className="p-3 text-right font-mono font-bold text-gray-600">
                  {entry.diff !== null ? `±${entry.diff.toFixed(2)}s` : 'Gagal Babak 1'}
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>

    <button 
      onClick={() => setScreen('HOME')}
      className="mt-6 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-8 rounded-xl shadow transition"
    >
      KEMBALI KE MENU
    </button>
    
    <button 
      onClick={() => {
        if(window.confirm('Yakin mau hapus semua data leaderboard?')) {
          localStorage.removeItem('standLeaderboard');
          setLeaderboard([]);
        }
      }}
      className="text-xs text-red-300 hover:text-red-500 mt-8"
    >
      Reset Data (Admin)
    </button>
  </div>
);

export default function App() {
  const [screen, setScreen] = useState('HOME'); 
  const [playerName, setPlayerName] = useState('');
  const [score, setScore] = useState(0);
  const [timeDiff, setTimeDiff] = useState(null);
  const [reward, setReward] = useState('');
  const [leaderboard, setLeaderboard] = useState([]);
  const [audioEnabled, setAudioEnabled] = useState(true);

  // Load leaderboard 
  useEffect(() => {
    const saved = localStorage.getItem('standLeaderboard');
    if (saved) setLeaderboard(JSON.parse(saved));
  }, []);

  const saveToLeaderboard = useCallback((finalDiff, finalReward) => {
    const newEntry = {
      name: playerName,
      score: score,
      diff: finalDiff,
      reward: finalReward,
      date: new Date().toLocaleTimeString()
    };
    const newLeaderboard = [...leaderboard, newEntry].sort((a, b) => {
      if (a.diff === null) return 1;
      if (b.diff === null) return -1;
      return a.diff - b.diff;
    }).slice(0, 5); 

    setLeaderboard(newLeaderboard);
    localStorage.setItem('standLeaderboard', JSON.stringify(newLeaderboard));
  }, [leaderboard, playerName, score]);

  const audioCtxRef = useRef(null);

  const initAudio = () => {
    if (!audioCtxRef.current) {
        audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)();
    }
    if (audioCtxRef.current.state === 'suspended') {
        audioCtxRef.current.resume();
    }
  };

  const playSound = useCallback((type) => {
    if (!audioEnabled || !audioCtxRef.current) return;
    
    const ctx = audioCtxRef.current;
    const osc = ctx.createOscillator();
    const gainNode = ctx.createGain();
    
    osc.connect(gainNode);
    gainNode.connect(ctx.destination);
    
    const now = ctx.currentTime;
    
    if (type === 'catchGood') {
      osc.type = 'sine';
      osc.frequency.setValueAtTime(800, now);
      osc.frequency.exponentialRampToValueAtTime(1200, now + 0.1);
      gainNode.gain.setValueAtTime(0.3, now);
      gainNode.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
      osc.start(now);
      osc.stop(now + 0.1);
    } else if (type === 'catchBad') {
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(150, now);
      gainNode.gain.setValueAtTime(0.3, now);
      gainNode.gain.exponentialRampToValueAtTime(0.01, now + 0.2);
      osc.start(now);
      osc.stop(now + 0.2);
    } else if (type === 'win') {
      osc.type = 'square';
      osc.frequency.setValueAtTime(400, now);
      osc.frequency.setValueAtTime(500, now + 0.1);
      osc.frequency.setValueAtTime(600, now + 0.2);
      osc.frequency.setValueAtTime(800, now + 0.3);
      gainNode.gain.setValueAtTime(0.3, now);
      gainNode.gain.linearRampToValueAtTime(0, now + 0.5);
      osc.start(now);
      osc.stop(now + 0.5);
    } else if (type === 'lose') {
       osc.type = 'triangle';
       osc.frequency.setValueAtTime(300, now);
       osc.frequency.exponentialRampToValueAtTime(100, now + 0.5);
       gainNode.gain.setValueAtTime(0.5, now);
       gainNode.gain.linearRampToValueAtTime(0, now + 0.5);
       osc.start(now);
       osc.stop(now + 0.5);
    }
  }, [audioEnabled]);

  return (
    <div className="min-h-screen bg-green-50 flex items-center justify-center p-4 font-sans">
      <style>{`
        .cute-cursor {
          cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' style='font-size:36px'><text y='36'>🖐️</text></svg>") 24 24, auto;
        }
        .cute-cursor:active {
          cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' style='font-size:36px'><text y='36'>✊</text></svg>") 24 24, auto;
        }
      `}</style>
      <div className="w-full max-w-lg h-[800px] max-h-screen bg-white rounded-3xl shadow-2xl p-6 relative overflow-hidden border-8 border-gray-100">
        {screen === 'HOME' && <Home playerName={playerName} setPlayerName={setPlayerName} setScore={setScore} setTimeDiff={setTimeDiff} setScreen={setScreen} initAudio={initAudio} audioEnabled={audioEnabled} setAudioEnabled={setAudioEnabled} />}
        {screen === 'GAME1' && <Game1 score={score} setScore={setScore} setScreen={setScreen} setReward={setReward} saveToLeaderboard={saveToLeaderboard} playSound={playSound} />}
        {screen === 'GAME2' && <Game2 setScreen={setScreen} timeDiff={timeDiff} setTimeDiff={setTimeDiff} setReward={setReward} saveToLeaderboard={saveToLeaderboard} playSound={playSound} />}
        {screen === 'RESULT' && <ResultScreen playerName={playerName} setPlayerName={setPlayerName} score={score} timeDiff={timeDiff} reward={reward} setScreen={setScreen} />}
        {screen === 'LEADERBOARD' && <LeaderboardScreen leaderboard={leaderboard} setLeaderboard={setLeaderboard} setScreen={setScreen} />}
      </div>
    </div>
  );
}