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

const App = () => {
  const [activeTab, setActiveTab] = useState('belajar');
  const [userName, setUserName] = useState('');
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  if (!isLoggedIn) {
    return (
      <div className="min-h-screen bg-blue-50 flex items-center justify-center p-4 font-sans">
        <div className="bg-white p-8 rounded-3xl shadow-xl text-center max-w-md w-full border-4 border-indigo-100">
          <div className="text-7xl mb-4 animate-bounce">🤖</div>
          <h1 className="text-3xl font-extrabold text-indigo-600 mb-2">Petualangan Loopy</h1>
          <p className="text-gray-600 mb-8 text-lg">Siap belajar <strong>Loop</strong> (Perulangan)? Masukkan nama lengkapmu dulu yuk!</p>
          
          <form onSubmit={(e) => {
            e.preventDefault();
            if(userName.trim() !== '') setIsLoggedIn(true);
          }}>
            <input 
              type="text" 
              placeholder="Ketik Nama Lengkap..." 
              value={userName}
              onChange={(e) => setUserName(e.target.value)}
              className="w-full px-4 py-4 rounded-xl border-2 border-indigo-200 focus:outline-none focus:border-indigo-500 mb-6 text-xl text-center shadow-inner"
              required
            />
            <button 
              type="submit"
              className="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-4 px-6 rounded-xl shadow-lg transition-transform hover:scale-105 active:scale-95 text-lg"
            >
              🚀 Mulai Petualangan!
            </button>
          </form>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-blue-50 font-sans text-gray-800">
      {/* Header */}
      <header className="bg-indigo-600 text-white p-6 text-center shadow-md rounded-b-3xl">
        <h1 className="text-4xl font-extrabold mb-2 flex justify-center items-center gap-3">
          🤖 Petualangan Loopy 🔄
        </h1>
        <p className="text-xl font-medium text-indigo-200">
          Halo, <span className="font-bold text-yellow-300">{userName}</span>! Belajar "Loop" itu seru!
        </p>
      </header>

      {/* Navigation */}
      <nav className="flex justify-center gap-4 my-6">
        <button 
          onClick={() => setActiveTab('belajar')}
          className={`px-6 py-3 rounded-full font-bold text-lg transition-transform hover:scale-105 shadow-sm ${activeTab === 'belajar' ? 'bg-yellow-400 text-yellow-900 shadow-md' : 'bg-white text-indigo-600'}`}
        >
          📖 Belajar
        </button>
        <button 
          onClick={() => setActiveTab('main')}
          className={`px-6 py-3 rounded-full font-bold text-lg transition-transform hover:scale-105 shadow-sm ${activeTab === 'main' ? 'bg-green-400 text-green-900 shadow-md' : 'bg-white text-indigo-600'}`}
        >
          🎮 Main Game
        </button>
        <button 
          onClick={() => setActiveTab('kuis')}
          className={`px-6 py-3 rounded-full font-bold text-lg transition-transform hover:scale-105 shadow-sm ${activeTab === 'kuis' ? 'bg-pink-400 text-pink-900 shadow-md' : 'bg-white text-indigo-600'}`}
        >
          🏆 Kuis
        </button>
      </nav>

      {/* Content Area */}
      <main className="max-w-3xl mx-auto p-4">
        {activeTab === 'belajar' && <BelajarSection />}
        {activeTab === 'main' && <GameSection />}
        {activeTab === 'kuis' && <KuisSection userName={userName} />}
      </main>
    </div>
  );
};

// --- SECTION 1: BELAJAR ---
const BelajarSection = () => {
  const [claps, setClaps] = useState([]);
  const [isLooping, setIsLooping] = useState(false);

  const manualClap = () => {
    if (claps.length < 10) setClaps([...claps, '👏']);
  };

  const loopClap = async () => {
    if (isLooping) return;
    setIsLooping(true);
    setClaps([]); // Reset
    
    let currentClaps = [];
    for (let i = 0; i < 5; i++) {
      await new Promise(r => setTimeout(r, 400));
      currentClaps.push('👏');
      setClaps([...currentClaps]);
    }
    setIsLooping(false);
  };

  return (
    <div className="bg-white p-8 rounded-3xl shadow-xl border-4 border-indigo-100">
      <h2 className="text-3xl font-bold text-indigo-600 mb-4">Apa itu Loop? 🤔</h2>
      <p className="text-xl mb-6 leading-relaxed">
        <strong>Loop</strong> artinya <strong>mengulang</strong>! <br/>
        Bayangkan kamu diminta tepuk tangan 5 kali. Daripada kamu disuruh: <br/>
        <span className="italic text-gray-500">"Tepuk tangan, tepuk tangan, tepuk tangan, tepuk tangan, tepuk tangan"</span>... <br/>
        Lebih gampang bilang: <span className="font-bold text-indigo-500">"Ulangi 5 kali: Tepuk tangan!"</span>
      </p>

      <div className="bg-blue-50 p-6 rounded-2xl mb-6">
        <h3 className="text-2xl font-bold text-blue-800 mb-4">Ayo Buktikan!</h3>
        <p className="mb-4">Coba bandingkan membuat 5 tepukan secara manual vs menggunakan Loop.</p>
        
        <div className="flex flex-col sm:flex-row gap-4 mb-6">
          <button 
            onClick={manualClap} 
            className="flex-1 bg-orange-400 hover:bg-orange-500 text-white font-bold py-3 px-4 rounded-xl shadow-md active:scale-95 transition-all"
          >
            👆 Klik Manual 1x
          </button>
          <button 
            onClick={loopClap} 
            disabled={isLooping}
            className="flex-1 bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-3 px-4 rounded-xl shadow-md active:scale-95 transition-all disabled:opacity-50"
          >
            🔄 Pakai Loop (Ulang 5x)
          </button>
          <button 
            onClick={() => setClaps([])} 
            className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-3 px-4 rounded-xl shadow-md active:scale-95 transition-all"
          >
            🗑️ Hapus
          </button>
        </div>

        <div className="min-h-[80px] bg-white border-2 border-dashed border-blue-200 rounded-xl p-4 flex flex-wrap gap-2 text-4xl items-center justify-start">
          {claps.length === 0 && <span className="text-gray-400 text-lg italic">Belum ada tepukan...</span>}
          {claps.map((clap, idx) => (
             <span key={idx} className="animate-bounce">{clap}</span>
          ))}
        </div>
        <p className="text-right text-gray-500 font-bold mt-2">Jumlah: {claps.length}</p>
      </div>
      
      <p className="text-lg bg-yellow-100 p-4 rounded-xl text-yellow-800 border-l-4 border-yellow-400">
        <strong>💡 Fakta Komputer:</strong> Komputer sangat suka Loop! Komputer tidak pernah capek disuruh mengulang perintah ribuan kali.
      </p>
    </div>
  );
};

// --- SECTION 2: GAME ---
const GameSection = () => {
  const [robotPos, setRobotPos] = useState(0);
  const targetPos = 5;
  const [loopCount, setLoopCount] = useState(1);
  const [isRunning, setIsRunning] = useState(false);
  const [message, setMessage] = useState("Bantu Loopy mengambil baterai hijau!");
  const [status, setStatus] = useState("idle"); // idle, success, fail

  const runProgram = async () => {
    if (isRunning) return;
    setIsRunning(true);
    setMessage("Menjalankan Loop...");
    setStatus("idle");
    setRobotPos(0);

    for (let i = 1; i <= loopCount; i++) {
      await new Promise(r => setTimeout(r, 600)); // Jeda agar animasi terlihat
      setRobotPos(i);
    }

    setIsRunning(false);
    
    // Cek hasil
    if (loopCount === targetPos) {
      setMessage("Horeee! 🎉 Loopy berhasil dapat baterainya!");
      setStatus("success");
    } else if (loopCount < targetPos) {
      setMessage("Yah.. Loopy berhenti di tengah jalan. Langkahnya kurang! 😢");
      setStatus("fail");
    } else {
      setMessage("Waduh! Loopy kebablasan jalannya! Kebanyakan langkah! 💥");
      setStatus("fail");
    }
  };

  const resetGame = () => {
    setRobotPos(0);
    setMessage("Bantu Loopy mengambil baterai hijau!");
    setStatus("idle");
    setLoopCount(1);
  }

  // Membuat grid jalanan
  const grid = Array.from({ length: 7 }, (_, i) => i);

  return (
    <div className="bg-white p-8 rounded-3xl shadow-xl border-4 border-green-100 text-center">
      <h2 className="text-3xl font-bold text-green-600 mb-2">Misi: Ambil Baterai! 🔋</h2>
      <p className="text-lg text-gray-600 mb-6">{message}</p>

      {/* Grid Animasi */}
      <div className="flex justify-center mb-8 relative">
        <div className="flex gap-2 bg-gray-100 p-4 rounded-2xl shadow-inner">
          {grid.map((pos) => (
            <div key={pos} className="w-16 h-16 sm:w-20 sm:h-20 bg-white border-2 border-gray-200 rounded-xl flex items-center justify-center text-4xl relative">
              {pos === targetPos && status !== 'success' && <span className="absolute animate-pulse">🔋</span>}
              {pos === robotPos && (
                <span className="absolute transition-all duration-300 z-10" style={{ transform: isRunning ? 'scale(1.1)' : 'scale(1)' }}>
                  {status === 'success' ? '🥳' : status === 'fail' ? '😵' : '🤖'}
                </span>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Control Panel */}
      <div className="bg-gray-800 text-white p-6 rounded-2xl max-w-md mx-auto shadow-lg text-left">
        <div className="flex items-center gap-3 mb-4 text-xl font-mono">
          <span className="text-pink-400">Ulangi</span>
          <select 
            value={loopCount} 
            onChange={(e) => setLoopCount(Number(e.target.value))}
            disabled={isRunning}
            className="bg-gray-700 text-white font-bold py-1 px-3 rounded-lg outline-none focus:ring-2 focus:ring-pink-400"
          >
            {[1, 2, 3, 4, 5, 6].map(num => (
              <option key={num} value={num}>{num}</option>
            ))}
          </select>
          <span className="text-pink-400">kali:</span>
        </div>
        <div className="bg-gray-700 p-3 rounded-xl ml-8 border-l-4 border-blue-400 font-mono text-lg flex items-center gap-2">
          <span>👉</span> <span className="text-blue-300">Jalan Maju 1 Langkah</span>
        </div>
        
        <div className="mt-6 flex gap-3 justify-end">
          <button 
            onClick={resetGame}
            disabled={isRunning}
            className="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-xl disabled:opacity-50"
          >
            Reset
          </button>
          <button 
            onClick={runProgram}
            disabled={isRunning}
            className="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-xl shadow-lg shadow-green-500/50 disabled:opacity-50 flex items-center gap-2"
          >
            ▶️ Jalankan
          </button>
        </div>
      </div>
    </div>
  );
};

// --- SECTION 3: KUIS ---
const KuisSection = ({ userName }) => {
  const [currentQ, setCurrentQ] = useState(0);
  const [score, setScore] = useState(0);
  const [showResult, setShowResult] = useState(false);

  const questions = [
    {
      q: "Apa sebutan lain dari 'Loop' dalam bahasa Indonesia?",
      opts: ["Perulangan", "Pencabangan", "Penjumlahan"],
      ans: 0
    },
    {
      q: "Mengapa kita menggunakan Loop dalam memprogram komputer?",
      opts: ["Biar komputer cepat rusak", "Agar tidak capek menulis perintah yang sama berulang-ulang", "Supaya layarnya warna-warni"],
      ans: 1
    },
    {
      q: "Jika kamu ingin robot maju 10 langkah, perintah mana yang benar?",
      opts: ["Tulis 'Maju' sebanyak 10 baris", "Ulangi 1 kali: [Maju 10]", "Ulangi 10 kali: [Maju]"],
      ans: 2
    },
    {
      q: "Apa yang membuat komputer sangat cocok untuk melakukan tugas Loop?",
      opts: ["Komputer bisa tidur", "Komputer tidak pernah merasa bosan atau capek mengulang", "Komputer suka bermain game"],
      ans: 1
    },
    {
      q: "Jika perintahnya adalah 'Ulangi 3 kali: [Lompat, Jongkok]', berapa kali total kamu akan Jongkok?",
      opts: ["1 kali", "3 kali", "6 kali"],
      ans: 1
    },
    {
      q: "Di antara kegiatan ini, mana yang merupakan contoh Loop di kehidupan sehari-hari?",
      opts: ["Makan permen 1 kali", "Membaca 1 halaman buku", "Mengayuh pedal sepeda berulang kali"],
      ans: 2
    },
    {
      q: "Apa bahasa Inggris dari 'Perulangan'?",
      opts: ["Loop", "Jump", "Run"],
      ans: 0
    },
    {
      q: "Jika kamu disuruh menulis angka 1 sampai 100, lebih cepat pakai cara apa?",
      opts: ["Menulis manual dengan tangan", "Menyuruh teman menuliskannya", "Pakai perintah Loop di komputer"],
      ans: 2
    },
    {
      q: "Gambar sebuah kotak persegi punya 4 sisi. Perintah Loop apa yang cocok untuk menggambar kotak?",
      opts: ["Ulangi 4 kali: [Maju, Belok]", "Ulangi 1 kali: [Kotak]", "Ulangi 2 kali: [Maju]"],
      ans: 0
    },
    {
      q: "Apa yang terjadi jika kita menyuruh komputer mengulang tanpa henti (Loop selamanya)?",
      opts: ["Komputernya jadi lebih cepat", "Komputernya akan terus bekerja tanpa henti/hang", "Komputernya akan meledak"],
      ans: 1
    }
  ];

  const handleAnswer = (optIndex) => {
    if (optIndex === questions[currentQ].ans) {
      setScore(score + 1);
    }
    
    if (currentQ < questions.length - 1) {
      setCurrentQ(currentQ + 1);
    } else {
      setShowResult(true);
    }
  };

  const restartQuiz = () => {
    setCurrentQ(0);
    setScore(0);
    setShowResult(false);
  };

  if (showResult) {
    return (
      <div className="bg-white p-8 rounded-3xl shadow-xl border-4 border-pink-100 text-center">
        <h2 className="text-4xl mb-4">{score === questions.length ? '🌟 Sempurna! 🌟' : 'Kerja Bagus! 👍'}</h2>
        <p className="text-2xl mb-6 text-gray-700">Skor kamu: <span className="font-bold text-indigo-600">{score}</span> dari {questions.length}</p>
        
        {score === questions.length ? (
          <p className="text-lg text-green-600 mb-8">Wah, Kak <span className="font-bold text-indigo-500">{userName}</span> sudah jadi ahli Loop nih! Keren banget!</p>
        ) : (
          <p className="text-lg text-orange-500 mb-8">Kak <span className="font-bold text-indigo-500">{userName}</span> sudah hebat, yuk coba lagi biar dapat bintang penuh!</p>
        )}

        <button 
          onClick={restartQuiz}
          className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-3 px-8 rounded-full shadow-lg text-xl"
        >
          🔄 Ulangi Kuis
        </button>
      </div>
    );
  }

  const q = questions[currentQ];

  return (
    <div className="bg-white p-8 rounded-3xl shadow-xl border-4 border-pink-100">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-2xl font-bold text-pink-600">Pertanyaan {currentQ + 1} / {questions.length}</h2>
        <span className="bg-pink-100 text-pink-800 font-bold py-1 px-3 rounded-full">⭐ Skor: {score}</span>
      </div>
      
      <p className="text-2xl font-medium text-gray-800 mb-8">{q.q}</p>
      
      <div className="flex flex-col gap-4">
        {q.opts.map((opt, idx) => (
          <button 
            key={idx}
            onClick={() => handleAnswer(idx)}
            className="bg-blue-50 hover:bg-blue-100 border-2 border-blue-200 text-left p-4 rounded-2xl text-lg text-blue-900 font-medium transition-all hover:pl-6 hover:shadow-md active:scale-95"
          >
            {['A', 'B', 'C'][idx]}. {opt}
          </button>
        ))}
      </div>
    </div>
  );
};

export default App;