import React, { useState, useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  BookOpen, 
  GraduationCap, 
  ChevronLeft, 
  Timer, 
  Trophy, 
  CheckCircle2, 
  XCircle, 
  RotateCcw, 
  Calculator, 
  Atom, 
  Microscope, 
  History, 
  Globe2,
  Lock,
  Upload,
  User,
  LogOut,
  FileSpreadsheet,
  Plus,
  Trash2,
  Library,
  AlertCircle,
  Sparkles,
  Rocket,
  Star,
  Gamepad2,
  PartyPopper,
  Ghost,
  Lightbulb,
  LayoutDashboard,
  Target,
  Medal,
  Flame,
  ArrowRight
} from 'lucide-react';

// Muat pustaka XLSX untuk parsing Excel
const loadXLSX = () => {
  return new Promise((resolve) => {
    if (window.XLSX) return resolve(window.XLSX);
    const script = document.createElement('script');
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js";
    script.onload = () => resolve(window.XLSX);
    document.head.appendChild(script);
  });
};

const iconMap = {
  Matematika: <Calculator className="w-6 h-6" />,
  Sains: <Atom className="w-6 h-6" />,
  Biologi: <Microscope className="w-6 h-6" />,
  Sejarah: <History className="w-6 h-6" />,
  Ekonomi: <Globe2 className="w-6 h-6" />,
  English: <BookOpen className="w-6 h-6" />,
  Default: <Library className="w-6 h-6" />
};

const INITIAL_DATA = {
  SD: {
    label: "Sekolah Dasar",
    tagline: "Dunia Bermain & Belajar",
    color: "from-orange-400 to-yellow-400",
    mascot: "🤖",
    bg: "bg-orange-50",
    grades: {
      "Kelas 1": { subjects: [] }, "Kelas 2": { subjects: [] }, "Kelas 3": { subjects: [] },
      "Kelas 4": { subjects: [] }, "Kelas 5": { subjects: [] },
      "Kelas 6": { 
        subjects: [
          {
            id: "mat-6",
            name: "Matematika",
            icon: 'Matematika',
            questions: [
              { q: "Berapakah hasil dari 25 + 17?", o: ["32", "42", "52", "40"], c: 1 },
              { q: "Bangun datar yang memiliki 3 sisi disebut...", o: ["Persegi", "Segitiga", "Lingkaran", "Trapesium"], c: 1 }
            ]
          }
        ] 
      },
    }
  },
  SMP: {
    label: "Sekolah Menengah",
    tagline: "Eksplorasi Pengetahuan",
    color: "from-blue-500 to-cyan-400",
    mascot: "🚀",
    bg: "bg-blue-50",
    grades: {
      "Kelas 7": { subjects: [] }, "Kelas 8": { subjects: [] },
      "Kelas 9": { 
        subjects: [
          {
            id: "bio-9",
            name: "Biologi",
            icon: 'Biologi',
            questions: [
              { q: "Alat pernapasan pada ikan adalah...", o: ["Paru-paru", "Trakea", "Insang", "Kulit"], c: 2 }
            ]
          }
        ] 
      },
    }
  },
  SMA: {
    label: "Sekolah Menengah Atas",
    tagline: "Persiapan Masa Depan",
    color: "from-indigo-600 to-purple-500",
    mascot: "🧠",
    bg: "bg-purple-50",
    grades: {
      "Kelas 10": { subjects: [] }, "Kelas 11": { subjects: [] },
      "Kelas 12": { 
        subjects: [
          {
            id: "fis-12",
            name: "Fisika",
            icon: 'Sains',
            questions: [
              { q: "Apa satuan SI untuk gaya?", o: ["Joule", "Watt", "Newton", "Pascal"], c: 2 }
            ]
          }
        ] 
      },
    }
  }
};

export default function App() {
  const [view, setView] = useState('login'); 
  const [userRole, setUserRole] = useState(null);
  const [quizData, setQuizData] = useState(INITIAL_DATA);
  const [levelKey, setLevelKey] = useState(null);
  const [gradeKey, setGradeKey] = useState(null);
  const [subject, setSubject] = useState(null);
  const [currentIdx, setCurrentIdx] = useState(0);
  const [score, setScore] = useState(0);
  const [timeLeft, setTimeLeft] = useState(20);
  const [selectedOption, setSelectedOption] = useState(null);
  const [feedback, setFeedback] = useState(null);
  const [userAnswers, setUserAnswers] = useState([]);
  const [adminPass, setAdminPass] = useState('');
  const [isXlsxLoaded, setIsXlsxLoaded] = useState(false);
  const [toast, setToast] = useState(null);
  
  // Simulated student stats
  const [stats, setStats] = useState({
    points: 1250,
    streak: 5,
    completed: 12,
    rank: "Bintang Pelajar"
  });

  useEffect(() => {
    loadXLSX().then(() => setIsXlsxLoaded(true));
  }, []);

  useEffect(() => {
    if (view !== 'quiz' || feedback) return;
    if (timeLeft === 0) {
      processAnswer(null);
      return;
    }
    const timer = setInterval(() => setTimeLeft(prev => prev - 1), 1000);
    return () => clearInterval(timer);
  }, [timeLeft, view, feedback]);

  const processAnswer = (idx) => {
    const isCorrect = idx === subject.questions[currentIdx].c;
    setFeedback(isCorrect ? 'correct' : 'wrong');
    
    setTimeout(() => {
      if (isCorrect) {
        setScore(s => s + 1);
        setStats(prev => ({ ...prev, points: prev.points + 50 }));
      }
      
      setUserAnswers(prev => [...prev, {
        q: subject.questions[currentIdx].q,
        selected: idx,
        correct: subject.questions[currentIdx].c,
        isCorrect
      }]);

      if (currentIdx + 1 < subject.questions.length) {
        setCurrentIdx(i => i + 1);
        setSelectedOption(null);
        setTimeLeft(20);
        setFeedback(null);
      } else {
        setView('result');
        setFeedback(null);
        setStats(prev => ({ ...prev, completed: prev.completed + 1 }));
      }
    }, 1500);
  };

  const handleExcelUpload = (e) => {
    const file = e.target.files[0];
    if (!file || !window.XLSX) return;
    const reader = new FileReader();
    reader.onload = (evt) => {
      try {
        const bstr = evt.target.result;
        const wb = window.XLSX.read(bstr, { type: 'binary' });
        const ws = wb.Sheets[wb.SheetNames[0]];
        const rawData = window.XLSX.utils.sheet_to_json(ws);
        const newData = JSON.parse(JSON.stringify(quizData));
        let count = 0;
        rawData.forEach(row => {
          const findKey = (name) => {
            const key = Object.keys(row).find(k => k.toLowerCase().trim() === name.toLowerCase());
            return row[key];
          };
          const Jenjang = findKey('Jenjang');
          const Kelas = findKey('Kelas');
          const Mapel = findKey('Mapel');
          const Pertanyaan = findKey('Pertanyaan');
          const A = findKey('A');
          const B = findKey('B');
          const C = findKey('C');
          const D = findKey('D');
          const Kunci = findKey('Kunci');
          if (!Jenjang || !Kelas || !Mapel || !Pertanyaan) return;
          const normalizedLevel = String(Jenjang).toUpperCase().trim();
          if (newData[normalizedLevel]) {
            const currentGrades = newData[normalizedLevel].grades;
            const kelasStr = String(Kelas).trim();
            const targetGrade = kelasStr.startsWith('Kelas') ? kelasStr : `Kelas ${kelasStr}`;
            if (!currentGrades[targetGrade]) { currentGrades[targetGrade] = { subjects: [] }; }
            let subj = currentGrades[targetGrade].subjects.find(s => s.name === Mapel);
            if (!subj) {
              subj = { id: Math.random().toString(36).substr(2, 9), name: Mapel, icon: 'Default', questions: [] };
              currentGrades[targetGrade].subjects.push(subj);
            }
            subj.questions.push({ q: Pertanyaan, o: [A, B, C, D], c: isNaN(parseInt(Kunci)) ? 0 : parseInt(Kunci) });
            count++;
          }
        });
        if (count > 0) { setQuizData(newData); setToast({ type: 'success', message: `Berhasil! ${count} soal ditambahkan.` }); }
      } catch (err) { setToast({ type: 'error', message: "Error membaca file." }); }
      e.target.value = null;
    };
    reader.readAsBinaryString(file);
  };

  const renderToast = () => (
    <AnimatePresence>
      {toast && (
        <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }}
          className={`fixed top-5 right-5 z-[100] p-4 rounded-2xl shadow-xl flex items-center gap-2 border-2 ${toast.type === 'success' ? 'bg-green-50 border-green-200 text-green-700' : 'bg-red-50 border-red-200 text-red-700'}`}>
          {toast.type === 'success' ? <PartyPopper size={20}/> : <AlertCircle size={20}/>}
          <span className="font-bold text-sm">{toast.message}</span>
        </motion.div>
      )}
    </AnimatePresence>
  );

  const renderLogin = () => (
    <motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }}
      className="max-w-md w-full bg-white p-12 rounded-[3.5rem] shadow-2xl text-center space-y-10 relative overflow-hidden">
      <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-yellow-400 via-red-500 to-indigo-600" />
      <div className="space-y-4">
        <motion.div animate={{ rotate: [0, -10, 10, 0] }} transition={{ repeat: Infinity, duration: 2 }}
          className="w-24 h-24 bg-indigo-600 text-white rounded-[2rem] flex items-center justify-center mx-auto shadow-xl shadow-indigo-100">
          <GraduationCap size={50} />
        </motion.div>
        <h1 className="text-5xl font-black text-gray-900 tracking-tighter">EduPintar</h1>
        <p className="text-gray-400 font-bold uppercase tracking-widest text-xs">Pintu Masa Depanmu</p>
      </div>

      <div className="space-y-4">
        <button onClick={() => { setUserRole('student'); setView('home'); }}
          className="w-full p-6 bg-gradient-to-br from-indigo-600 to-indigo-700 text-white rounded-[2rem] font-black text-xl shadow-xl hover:scale-105 transition-all flex items-center justify-center gap-3">
          <Gamepad2 /> MASUK BELAJAR
        </button>
        <div className="pt-6 border-t border-dashed border-gray-100">
          <input type="password" placeholder="Password Admin" value={adminPass} onChange={(e) => setAdminPass(e.target.value)}
            className="w-full px-6 py-4 bg-gray-50 rounded-2xl border-2 border-transparent focus:border-indigo-400 outline-none text-center font-bold mb-3"/>
          <button disabled={adminPass !== 'admin123'} onClick={() => { setUserRole('admin'); setView('admin'); }}
            className="w-full py-4 text-gray-400 font-bold hover:text-indigo-600 disabled:opacity-30 transition-all text-sm uppercase">
            Akses Pengajar
          </button>
        </div>
      </div>
    </motion.div>
  );

  const renderDashboard = () => (
    <div className="max-w-6xl w-full space-y-10 animate-in fade-in zoom-in duration-500">
      {/* Top Bar Dashboard */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 bg-white p-6 rounded-[2.5rem] shadow-xl border-b-8 border-slate-50">
        <div className="flex items-center gap-4">
          <div className="w-16 h-16 bg-indigo-600 rounded-2xl flex items-center justify-center text-white shadow-lg">
            <User size={32} />
          </div>
          <div>
            <h2 className="text-3xl font-black text-gray-900 tracking-tight">Selamat Datang, <span className="text-indigo-600">Sobat Pintar!</span></h2>
            <p className="text-slate-400 font-bold text-sm uppercase flex items-center gap-2">
               <Medal size={16} className="text-yellow-400" /> {stats.rank}
            </p>
          </div>
        </div>
        
        <div className="flex items-center gap-4 w-full md:w-auto">
          <div className="flex-1 md:flex-none flex items-center gap-2 bg-orange-50 text-orange-600 px-4 py-2 rounded-2xl border-2 border-orange-100">
            <Star size={20} fill="currentColor" />
            <span className="font-black">{stats.points}</span>
          </div>
          <div className="flex-1 md:flex-none flex items-center gap-2 bg-red-50 text-red-600 px-4 py-2 rounded-2xl border-2 border-red-100">
            <Flame size={20} fill="currentColor" />
            <span className="font-black">{stats.streak} Hari</span>
          </div>
          {userRole === 'admin' && (
            <button onClick={() => setView('admin')} className="p-3 bg-gray-900 text-white rounded-2xl shadow-lg hover:scale-110 transition-transform">
              <Lock size={20} />
            </button>
          )}
        </div>
      </div>

      <div className="grid lg:grid-cols-4 gap-8">
        {/* Sidebar Stats & Info */}
        <div className="lg:col-span-1 space-y-6">
          <div className="bg-white p-8 rounded-[2.5rem] shadow-xl border-b-8 border-slate-50">
            <h3 className="font-black text-gray-400 text-xs uppercase tracking-widest mb-6">Misi Belajar</h3>
            <div className="space-y-6">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-green-100 text-green-600 rounded-xl flex items-center justify-center"><CheckCircle2 size={24}/></div>
                <div>
                  <p className="font-black text-gray-800">{stats.completed}</p>
                  <p className="text-[10px] text-slate-400 font-bold uppercase">Kuis Selesai</p>
                </div>
              </div>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center"><Target size={24}/></div>
                <div>
                  <p className="font-black text-gray-800">85%</p>
                  <p className="text-[10px] text-slate-400 font-bold uppercase">Rata-rata Skor</p>
                </div>
              </div>
            </div>
            
            <div className="mt-8 pt-8 border-t border-dashed border-slate-100">
              <p className="text-xs font-bold text-slate-500 italic">"Pendidikan adalah senjata paling mematikan di dunia."</p>
              <p className="text-[10px] font-black text-indigo-400 mt-2">— Nelson Mandela</p>
            </div>
          </div>

          <button onClick={() => setView('login')} className="w-full flex items-center justify-center gap-2 py-4 bg-red-50 text-red-400 rounded-2xl font-black hover:bg-red-500 hover:text-white transition-all">
            <LogOut size={20} /> KELUAR SISTEM
          </button>
        </div>

        {/* Main Content: Level Selection */}
        <div className="lg:col-span-3 space-y-8">
          <div className="flex items-center justify-between">
            <h3 className="text-2xl font-black text-gray-800 tracking-tight flex items-center gap-2">
               <Library className="text-indigo-600" /> Jelajahi Tingkatan
            </h3>
            <div className="h-1 flex-1 mx-6 bg-slate-100 rounded-full" />
          </div>

          <div className="grid sm:grid-cols-3 gap-6">
            {Object.entries(quizData).map(([key, data], idx) => (
              <motion.button
                key={key}
                whileHover={{ y: -12, scale: 1.02 }}
                onClick={() => { setLevelKey(key); setView('grades'); }}
                className={`group bg-white p-8 rounded-[3rem] shadow-2xl transition-all text-left relative overflow-hidden border-b-[12px] border-black/5 flex flex-col`}
              >
                <div className={`absolute -right-2 -top-2 text-8xl opacity-10 group-hover:rotate-12 transition-transform`}>{data.mascot}</div>
                <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${data.color} flex items-center justify-center text-white mb-6 shadow-xl`}>
                  <GraduationCap size={32} />
                </div>
                <h3 className="text-3xl font-black text-gray-800 mb-1">{key}</h3>
                <p className="text-[10px] text-indigo-500 font-black uppercase tracking-widest mb-4">{data.tagline}</p>
                <div className="mt-auto flex items-center gap-1 text-xs font-black text-slate-300 group-hover:text-indigo-600 transition-colors">
                  PILIH <ArrowRight size={14} />
                </div>
              </motion.button>
            ))}
          </div>

          {/* Daily Challenge Promo */}
          <div className="bg-gradient-to-r from-indigo-600 to-purple-600 p-8 rounded-[3rem] text-white shadow-xl relative overflow-hidden group">
            <div className="absolute top-0 right-0 p-10 opacity-20 group-hover:scale-110 transition-transform">
              <Rocket size={120} />
            </div>
            <div className="relative z-10 max-w-md space-y-4">
              <span className="bg-white/20 px-3 py-1 rounded-full text-[10px] font-black uppercase">Tantangan Harian</span>
              <h4 className="text-3xl font-black leading-tight">Siap Untuk Menjadi Juara Minggu Ini?</h4>
              <p className="text-white/70 font-medium">Selesaikan 3 kuis hari ini untuk mendapatkan lencana khusus!</p>
              <button className="bg-white text-indigo-600 px-8 py-3 rounded-2xl font-black shadow-lg hover:scale-105 transition-all">
                IKUTI TANTANGAN
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderGradeSelect = () => (
    <div className="max-w-4xl w-full px-4 space-y-12">
      <div className="flex items-center gap-6">
        <button onClick={() => setView('home')} className="p-4 bg-white rounded-3xl shadow-lg border-4 border-transparent hover:border-indigo-400 transition-all"><ChevronLeft size={32}/></button>
        <div>
          <h2 className="text-5xl font-black text-gray-900 tracking-tight">Pilih Kelas</h2>
          <p className="text-indigo-600 font-bold uppercase tracking-widest text-sm">{quizData[levelKey].label}</p>
        </div>
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-3 gap-6">
        {Object.keys(quizData[levelKey].grades).map((grade, idx) => (
          <motion.button key={grade} initial={{ scale: 0.5, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ delay: idx * 0.05 }}
            whileHover={{ scale: 1.1, rotate: idx % 2 === 0 ? 2 : -2 }} onClick={() => { setGradeKey(grade); setView('subjects'); }}
            className="p-10 bg-white rounded-[3rem] shadow-xl border-b-[8px] border-slate-100 hover:border-indigo-400 transition-all group">
            <span className="text-5xl font-black text-gray-800 group-hover:text-indigo-600">{grade.split(' ')[1]}</span>
            <p className="text-xs font-black text-slate-300 uppercase mt-2">{grade.split(' ')[0]}</p>
          </motion.button>
        ))}
      </div>
    </div>
  );

  const renderSubjectSelect = () => {
    const subjects = quizData[levelKey].grades[gradeKey].subjects;
    return (
      <div className="max-w-4xl w-full px-4 space-y-10">
        <div className="flex items-center gap-6">
          <button onClick={() => setView('grades')} className="p-4 bg-white rounded-3xl shadow-lg border-4 border-transparent hover:border-indigo-400 transition-all"><ChevronLeft size={32}/></button>
          <div>
            <h2 className="text-5xl font-black text-gray-900 tracking-tight">Mata Pelajaran</h2>
            <p className="text-indigo-600 font-bold uppercase tracking-widest text-sm">{levelKey} • {gradeKey}</p>
          </div>
        </div>

        {subjects.length > 0 ? (
          <div className="grid md:grid-cols-2 gap-6">
            {subjects.map((subj, idx) => (
              <motion.button key={subj.id} initial={{ x: -50, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: idx * 0.1 }}
                whileHover={{ scale: 1.05 }} onClick={() => { setSubject(subj); setView('quiz'); setCurrentIdx(0); setScore(0); setTimeLeft(20); setUserAnswers([]); setSelectedOption(null); }}
                className="flex items-center gap-6 p-8 bg-white rounded-[3rem] shadow-xl border-b-[8px] border-slate-50 group">
                <div className="p-6 bg-indigo-50 text-indigo-600 rounded-3xl group-hover:bg-indigo-600 group-hover:text-white transition-all">
                  {iconMap[subj.name] || iconMap.Default}
                </div>
                <div className="text-left">
                  <h4 className="text-2xl font-black text-gray-800">{subj.name}</h4>
                  <p className="text-sm font-bold text-slate-400 uppercase">{subj.questions.length} LEVEL</p>
                </div>
              </motion.button>
            ))}
          </div>
        ) : (
          <div className="text-center py-20 bg-white rounded-[3.5rem] border-4 border-dashed border-slate-100">
            <Ghost size={80} className="mx-auto text-slate-100 mb-6" />
            <p className="text-2xl font-black text-slate-300">Belum Ada Soal Disini!</p>
            <button onClick={() => setView('grades')} className="mt-4 text-indigo-600 font-black underline">Kembali</button>
          </div>
        )}
      </div>
    );
  };

  const renderQuiz = () => {
    const q = subject.questions[currentIdx];
    const progress = ((currentIdx + 1) / subject.questions.length) * 100;

    return (
      <div className="max-w-3xl w-full px-4 relative">
        <AnimatePresence>
          {feedback && (
            <motion.div initial={{ opacity: 0, scale: 0.5 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0 }}
              className={`fixed inset-0 z-[100] flex flex-col items-center justify-center gap-6 pointer-events-none ${feedback === 'correct' ? 'bg-green-500/90' : 'bg-red-500/90'}`}>
              <motion.div animate={{ rotate: [0, -10, 10, -10, 0], scale: [1, 1.2, 1] }} className="text-[12rem]">
                {feedback === 'correct' ? '🌟' : '💢'}
              </motion.div>
              <h3 className="text-7xl font-black text-white italic tracking-tighter drop-shadow-xl">
                {feedback === 'correct' ? 'KEREN!' : 'COBA LAGI'}
              </h3>
            </motion.div>
          )}
        </AnimatePresence>

        <div className="flex justify-between items-center mb-10">
          <div className={`px-8 py-4 rounded-3xl border-4 shadow-xl font-black text-2xl flex items-center gap-3 ${timeLeft < 5 ? 'bg-red-500 text-white border-red-400 animate-pulse' : 'bg-white text-indigo-600 border-indigo-50'}`}>
            <Timer size={28} /> {timeLeft}s
          </div>
          <div className="text-right">
            <p className="text-xs font-black text-slate-400 uppercase tracking-widest">{subject.name}</p>
            <h4 className="text-3xl font-black text-gray-900 tracking-tighter">{currentIdx + 1} / {subject.questions.length}</h4>
          </div>
        </div>

        <div className="w-full bg-slate-200 h-5 rounded-full mb-12 border-4 border-white shadow-inner overflow-hidden">
          <motion.div initial={{ width: 0 }} animate={{ width: `${progress}%` }} className="h-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500" />
        </div>

        <AnimatePresence mode="wait">
          <motion.div key={currentIdx} initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: -20, opacity: 0 }}
            className="bg-white p-12 sm:p-16 rounded-[4rem] shadow-2xl border-b-[12px] border-slate-100 relative mb-10 overflow-hidden">
            <div className="absolute top-0 right-0 p-10 opacity-5 text-9xl pointer-events-none">{quizData[levelKey].mascot}</div>
            <h3 className="text-4xl font-black text-gray-800 mb-12 leading-[1.1] relative z-10">{q.q}</h3>
            <div className="grid gap-4 relative z-10">
              {q.o.map((opt, idx) => (
                <button key={idx} disabled={feedback !== null} onClick={() => setSelectedOption(idx)}
                  className={`w-full p-6 rounded-[2rem] text-left border-4 transition-all font-bold text-2xl flex justify-between items-center
                    ${selectedOption === idx ? 'border-indigo-600 bg-indigo-600 text-white shadow-xl scale-[1.02]' : 'border-slate-50 hover:border-indigo-200 text-gray-700 bg-slate-50/50'}`}>
                  {opt}
                  {selectedOption === idx && <Sparkles />}
                </button>
              ))}
            </div>
          </motion.div>
        </AnimatePresence>

        <button disabled={selectedOption === null || feedback !== null} onClick={() => processAnswer(selectedOption)}
          className="w-full py-7 bg-gray-900 text-white rounded-[2.5rem] font-black text-3xl hover:bg-black disabled:opacity-20 shadow-2xl transition-all active:scale-95 flex items-center justify-center gap-4">
          KIRIM JAWABAN <Rocket />
        </button>
      </div>
    );
  };

  const renderResult = () => {
    const percent = Math.round((score / subject.questions.length) * 100);
    return (
      <motion.div initial={{ scale: 0.5, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="max-w-2xl w-full text-center px-4">
        <div className="mb-12 relative inline-block">
          <motion.div animate={{ rotate: [0, 10, -10, 10, 0] }} transition={{ repeat: Infinity, duration: 3 }}
            className="p-16 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full shadow-[0_25px_60px_rgba(245,158,11,0.4)] border-[10px] border-white text-white">
            <Trophy size={120} />
          </motion.div>
          <div className="absolute -bottom-4 -right-4 bg-indigo-600 text-white p-5 rounded-full shadow-lg text-3xl">🎉</div>
        </div>

        <h2 className="text-7xl font-black text-gray-900 mb-4 tracking-tighter">LUAR BIASA!</h2>
        <p className="text-2xl text-slate-400 font-bold mb-12 uppercase tracking-widest">Poin Kamu Bertambah!</p>

        <div className="grid grid-cols-2 gap-8 mb-12">
          <div className="bg-white p-12 rounded-[3.5rem] shadow-xl border-b-[10px] border-indigo-100">
            <p className="text-7xl font-black text-indigo-600">+{score * 50}</p>
            <p className="text-sm font-black text-slate-300 uppercase mt-2">Poin Baru</p>
          </div>
          <div className="bg-white p-12 rounded-[3.5rem] shadow-xl border-b-[10px] border-green-100">
            <p className="text-7xl font-black text-green-500">{percent}%</p>
            <p className="text-sm font-black text-slate-300 uppercase mt-2">Akurasi</p>
          </div>
        </div>

        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <button onClick={() => setView('subjects')} className="flex items-center justify-center gap-4 px-12 py-6 bg-indigo-600 text-white font-black text-2xl rounded-[2.5rem] shadow-2xl hover:scale-105 transition-all">
            <RotateCcw /> MAIN LAGI
          </button>
          <button onClick={() => setView('home')} className="px-12 py-6 bg-white text-gray-800 font-black text-2xl rounded-[2.5rem] shadow-xl border-4 border-slate-50">
            KE DASHBOARD
          </button>
        </div>
      </motion.div>
    );
  };

  const renderAdmin = () => (
    <div className="max-w-6xl w-full p-6 space-y-8 animate-in fade-in duration-500">
      <div className="bg-white p-8 rounded-[2.5rem] shadow-xl flex flex-col md:flex-row justify-between items-center border-b-[10px] border-slate-50 gap-6">
        <div className="flex items-center gap-4">
          <div className="p-4 bg-gray-900 text-white rounded-3xl shadow-lg"><Lock size={32}/></div>
          <div>
            <h2 className="text-3xl font-black text-gray-900 tracking-tight">Ruang Guru</h2>
            <p className="text-slate-400 font-bold uppercase text-xs tracking-widest">Sistem Pengelolaan Soal</p>
          </div>
        </div>
        <button onClick={() => setView('home')} className="px-8 py-4 bg-slate-50 text-slate-400 font-black rounded-2xl hover:bg-indigo-600 hover:text-white transition-all">KE DASHBOARD SISWA</button>
      </div>

      <div className="grid lg:grid-cols-3 gap-8">
        <div className="bg-white p-10 rounded-[3rem] shadow-xl border-b-[10px] border-indigo-50">
          <h3 className="text-2xl font-black mb-8 flex items-center gap-3"><Plus className="text-indigo-600"/> Unggah Berkas</h3>
          <label className="flex flex-col items-center justify-center w-full h-64 border-4 border-dashed border-slate-100 rounded-[2.5rem] cursor-pointer hover:bg-indigo-50 transition-all group">
            <FileSpreadsheet className="w-16 h-16 text-slate-200 mb-4 group-hover:scale-110 transition-transform" />
            <p className="text-sm font-black text-slate-300 text-center px-8 uppercase tracking-widest">Pilih Excel Baru</p>
            <input type="file" className="hidden" accept=".xlsx, .xls, .csv" onChange={handleExcelUpload} />
          </label>
        </div>

        <div className="lg:col-span-2 bg-white rounded-[3rem] shadow-xl border-b-[10px] border-slate-50 overflow-hidden flex flex-col">
          <div className="p-6 bg-slate-50/50 border-b-4 border-slate-50 font-black text-slate-400 text-sm tracking-widest">DAFTAR SOAL TERUNGGAH</div>
          <div className="max-h-[500px] overflow-y-auto p-4 space-y-4">
            {Object.entries(quizData).map(([lvl, lvlData]) => 
              Object.entries(lvlData.grades).map(([grd, grdData]) => 
                grdData.subjects.map(subj => (
                  <div key={subj.id} className="flex items-center justify-between p-6 bg-slate-50/50 rounded-2xl">
                    <div className="flex items-center gap-4">
                      <span className="text-2xl">{lvlData.mascot}</span>
                      <div>
                        <p className="font-black text-gray-800 text-sm">{lvl} - {grd}</p>
                        <p className="text-[10px] font-bold text-slate-400 uppercase">{subj.name}</p>
                      </div>
                    </div>
                    <button onClick={() => {
                      const newData = JSON.parse(JSON.stringify(quizData));
                      newData[lvl].grades[grd].subjects = newData[lvl].grades[grd].subjects.filter(s => s.id !== subj.id);
                      setQuizData(newData);
                      setToast({ type: 'success', message: 'Dihapus!' });
                    }} className="text-slate-200 hover:text-red-500 transition-colors"><Trash2 size={20}/></button>
                  </div>
                ))
              )
            )}
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-[#FDFEFE] flex items-center justify-center p-6 font-sans relative overflow-hidden">
      {renderToast()}
      {!isXlsxLoaded && (
        <div className="fixed inset-0 bg-white z-[200] flex flex-col items-center justify-center">
          <div className="w-20 h-20 border-8 border-indigo-100 border-t-indigo-600 rounded-full animate-spin mb-6" />
          <p className="text-xl font-black text-gray-900 tracking-widest uppercase animate-pulse">Memuat EduPintar...</p>
        </div>
      )}
      
      <main className="w-full flex items-center justify-center relative z-10">
        <AnimatePresence mode="wait">
          {view === 'login' && <div key="login" className="w-full flex justify-center">{renderLogin()}</div>}
          {view === 'home' && <div key="home" className="w-full flex justify-center">{renderDashboard()}</div>}
          {view === 'grades' && <div key="grades" className="w-full flex justify-center">{renderGradeSelect()}</div>}
          {view === 'subjects' && <div key="subjects" className="w-full flex justify-center">{renderSubjectSelect()}</div>}
          {view === 'quiz' && <div key="quiz" className="w-full flex justify-center">{renderQuiz()}</div>}
          {view === 'result' && <div key="result" className="w-full flex justify-center">{renderResult()}</div>}
          {view === 'admin' && <div key="admin" className="w-full flex justify-center">{renderAdmin()}</div>}
        </AnimatePresence>
      </main>

      {/* Decorative BG */}
      <div className="fixed inset-0 -z-10 pointer-events-none">
        <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-indigo-50/50 blur-[120px] rounded-full animate-pulse" />
        <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-orange-50/50 blur-[120px] rounded-full" />
      </div>

      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #FDFEFE; color: #1e293b; overflow-x: hidden; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 20px; }
      `}</style>
    </div>
  );
}