import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, collection, doc, setDoc, getDoc, 
  onSnapshot, addDoc, updateDoc, deleteDoc, query, orderBy
} from 'firebase/firestore';
import { 
  getAuth, signInWithCustomToken, signInAnonymously, 
  onAuthStateChanged, signOut 
} from 'firebase/auth';

// --- INITIALIZATION ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'kronika-lms-v3-smk';

// --- CUSTOM SVG ICONS ---
const Icon = ({ name, size = 24, className = "" }) => {
  const paths = {
    book: <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z" />,
    users: (
      <>
        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
        <circle cx="9" cy="7" r="4" />
        <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
      </>
    ),
    award: (
      <>
        <circle cx="12" cy="8" r="7" />
        <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
      </>
    ),
    dashboard: (
      <>
        <rect width="7" height="9" x="3" y="3" rx="1" />
        <rect width="7" height="5" x="14" y="3" rx="1" />
        <rect width="7" height="9" x="14" y="12" rx="1" />
        <rect width="7" height="5" x="3" y="16" rx="1" />
      </>
    ),
    logout: (
      <>
        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
        <polyline points="16 17 21 12 16 7" />
        <line x1="21" x2="9" y1="12" y2="12" />
      </>
    ),
    file: (
      <>
        <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" /><polyline points="14 2 14 8 20 8" />
      </>
    ),
    chevron: <polyline points="9 18 15 12 9 6" />,
    plus: (
      <>
        <line x1="12" x2="12" y1="5" y2="19" />
        <line x1="5" x2="19" y1="12" y2="12" />
      </>
    ),
    lock: <><rect width="18" height="11" x="3" y="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></>,
    cap: (
      <>
        <path d="M22 10v6M2 10l10-5 10 5-10 5z" /><path d="M6 12v5c3 3 9 3 12 0v-5" />
      </>
    ),
    clipboard: <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />,
    pen: <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />,
    check: <polyline points="20 6 9 17 4 12" />,
    clock: <><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></>,
    alert: <><circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" /></>
  };

  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      width={size} height={size} viewBox="0 0 24 24" fill="none" 
      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" 
      className={className}
    >
      {paths[name] || <circle cx="12" cy="12" r="10" />}
    </svg>
  );
};

// --- APP COMPONENT ---
export default function App() {
  const [user, setUser] = useState(null);
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [view, setView] = useState('landing'); 
  
  const [materials, setMaterials] = useState([]);
  const [quizzes, setQuizzes] = useState([]);
  const [assignments, setAssignments] = useState([]);
  const [allStudents, setAllStudents] = useState([]);
  const [selectedItem, setSelectedItem] = useState(null);
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
  
  // States for Forms
  const [regForm, setRegForm] = useState({ name: '', class: '10', nisn: '' });
  const [guruPass, setGuruPass] = useState('');
  const [authError, setAuthError] = useState('');

  // States for Quiz Taking
  const [currentQuiz, setCurrentQuiz] = useState(null);
  const [answers, setAnswers] = useState({});
  const [quizScore, setQuizScore] = useState(null);

  // 1. Firebase Auth
  useEffect(() => {
    const init = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) { 
        console.error("Auth Init Error:", err); 
        setAuthError("Gagal menghubungkan ke server autentikasi.");
      }
    };
    init();

    const unsub = onAuthStateChanged(auth, async (u) => {
      setUser(u);
      if (u) {
        try {
          const userRef = doc(db, 'artifacts', appId, 'public', 'data', 'users', u.uid);
          const snap = await getDoc(userRef);
          if (snap.exists()) {
            setUserData(snap.data());
            setView('dashboard');
          }
        } catch (err) {
          console.error("Fetch User Data Error:", err);
        }
      }
      setLoading(false);
    });
    return () => unsub();
  }, []);

  // 2. Real-time Listeners
  useEffect(() => {
    if (!user || !userData) return;

    // Listen to Materials
    const unsubM = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'materials'), (snap) => {
      setMaterials(snap.docs.map(d => ({ id: d.id, ...d.data() })));
    }, (err) => console.error("Materials Listener Error:", err));

    // Listen to Quizzes
    const unsubQ = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'quizzes'), (snap) => {
      setQuizzes(snap.docs.map(d => ({ id: d.id, ...d.data() })));
    }, (err) => console.error("Quizzes Listener Error:", err));

    // Listen to Assignments
    const unsubA = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'assignments'), (snap) => {
      setAssignments(snap.docs.map(d => ({ id: d.id, ...d.data() })));
    }, (err) => console.error("Assignments Listener Error:", err));

    // Listen to Students (Teacher Only)
    let unsubS = () => {};
    if (userData.role === 'guru') {
      unsubS = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'users'), (snap) => {
        const list = snap.docs.map(d => ({ id: d.id, ...d.data() }));
        setAllStudents(list.filter(s => s.role === 'siswa'));
      }, (err) => console.error("Students Listener Error:", err));
    }

    return () => { unsubM(); unsubQ(); unsubA(); unsubS(); };
  }, [user, userData]);

  // 3. Actions
  const handleRegisterSiswa = async (e) => {
    e.preventDefault();
    if (!regForm.name || !regForm.nisn) return setAuthError("Semua field wajib diisi.");
    
    // Safety check for user UID
    const currentUid = user?.uid || auth.currentUser?.uid;
    if (!currentUid) {
      return setAuthError("Sesi belum siap. Silakan coba sesaat lagi.");
    }

    setLoading(true);
    const profile = {
      uid: currentUid,
      name: String(regForm.name),
      nisn: String(regForm.nisn),
      class: String(regForm.class),
      role: 'siswa',
      points: 0,
      progress: 0,
      joinedAt: new Date().toISOString()
    };

    try {
      await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'users', currentUid), profile);
      setUserData(profile);
      setView('dashboard');
    } catch (err) { 
      console.error("Register Error:", err);
      setAuthError("Gagal mendaftar ke database."); 
    } finally { 
      setLoading(false); 
    }
  };

  const handleLoginGuru = async (e) => {
    e.preventDefault();
    if (guruPass === 'GURU123') {
      const currentUid = user?.uid || auth.currentUser?.uid;
      if (!currentUid) return setAuthError("Sesi belum siap.");

      const profile = { 
        uid: currentUid, 
        name: "Admin Guru Sejarah", 
        role: 'guru', 
        joinedAt: new Date().toISOString() 
      };

      try {
        await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'users', currentUid), profile);
        setUserData(profile);
        setView('dashboard');
      } catch (err) {
        console.error("Guru Login Save Error:", err);
        setAuthError("Gagal mengaktifkan mode guru.");
      }
    } else { 
      setAuthError("Password salah."); 
    }
  };

  const addMaterial = async () => {
    if (!userData || userData.role !== 'guru') return;
    const title = prompt("Judul Materi:");
    if (!title) return;
    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'materials'), {
        title, 
        content: "Konten materi sejarah baru...", 
        level: "10", 
        createdAt: new Date().toISOString(), 
        author: userData.name
      });
    } catch (err) { console.error("Add Material Error:", err); }
  };

  const addQuiz = async () => {
    if (!userData || userData.role !== 'guru') return;
    const title = prompt("Judul Kuis:");
    if (!title) return;
    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'quizzes'), {
        title,
        level: "10",
        questions: [
          { q: "Siapa yang menjahit Bendera Pusaka?", a: "Fatmawati", options: ["Fatmawati", "Kartini", "Sayuti Melik", "Sukarni"] },
          { q: "Kapan Proklamasi dikumandangkan?", a: "17 Agustus 1945", options: ["17 Agustus 1945", "18 Agustus 1945", "16 Agustus 1945", "1 Juni 1945"] }
        ],
        createdAt: new Date().toISOString()
      });
    } catch (err) { console.error("Add Quiz Error:", err); }
  };

  const addAssignment = async () => {
    if (!userData || userData.role !== 'guru') return;
    const title = prompt("Judul Penugasan:");
    if (!title) return;
    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'assignments'), {
        title, 
        description: "Buatlah esai tentang revolusi industri...", 
        level: "10", 
        createdAt: new Date().toISOString()
      });
    } catch (err) { console.error("Add Assignment Error:", err); }
  };

  const submitQuiz = async () => {
    if (!userData || !user) return;
    let score = 0;
    currentQuiz.questions.forEach((q, idx) => {
      if (answers[idx] === q.a) score += 50; 
    });
    setQuizScore(score);
    
    const newPoints = (userData.points || 0) + score;
    try {
      await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'users', user.uid), { points: newPoints });
      setUserData({ ...userData, points: newPoints });
    } catch (err) { console.error("Update Points Error:", err); }
  };

  const logout = async () => {
    setLoading(true);
    try {
      await signOut(auth);
      setUserData(null);
      setUser(null);
      setView('landing');
    } catch (err) { console.error("Logout Error:", err); }
    setLoading(false);
  };

  // --- UI RENDER LOGIC ---

  if (loading) return (
    <div className="fixed inset-0 bg-[#FDFBF7] flex flex-col items-center justify-center">
      <div className="w-16 h-16 border-4 border-[#EEDC82] border-t-[#8B4513] rounded-full animate-spin"></div>
      <p className="mt-4 font-serif font-bold text-[#8B4513]">Kronika V3 Memuat...</p>
    </div>
  );

  if (view === 'landing') return (
    <div className="min-h-screen bg-[#FDFBF7] flex flex-col items-center justify-center p-6 text-center">
      <div className="p-6 bg-[#8B4513] rounded-[40px] text-white shadow-2xl mb-8 rotate-3">
        <Icon name="book" size={64} />
      </div>
      <h1 className="text-7xl font-serif font-black text-[#3E2723] mb-4">KRONIKA <span className="text-[#8B4513]">LMS</span></h1>
      <p className="text-xl text-gray-500 max-w-xl italic mb-10">Sistem Manajemen Pembelajaran Sejarah SMK Terintegrasi Kurikulum Merdeka.</p>
      <button onClick={() => setView('selection')} className="px-12 py-5 bg-[#8B4513] text-white rounded-3xl font-black text-xl shadow-2xl hover:scale-105 transition-all">Mulai Eksplorasi</button>
    </div>
  );

  if (view === 'selection') return (
    <div className="min-h-screen bg-[#FDFBF7] flex items-center justify-center p-6">
      <div className="max-w-md w-full bg-white p-12 rounded-[50px] shadow-2xl border border-[#EEDC82]/30 text-center">
        <h2 className="text-3xl font-serif font-black mb-10 text-[#3E2723]">Masuk Sebagai</h2>
        <div className="grid gap-4">
          <button onClick={() => setView('register')} className="flex items-center gap-4 p-6 border-2 border-[#EEDC82] rounded-3xl hover:bg-[#8B4513] hover:text-white transition-all group">
            <div className="p-3 bg-[#FEF3C7] rounded-xl text-[#8B4513] group-hover:bg-white/20"><Icon name="cap" /></div>
            <div className="text-left"><p className="font-black text-lg">Halaman Siswa</p><p className="text-xs opacity-60">Registrasi Akun Baru</p></div>
          </button>
          <button onClick={() => { setView('login_guru'); setAuthError(""); }} className="flex items-center gap-4 p-6 border-2 border-gray-100 rounded-3xl hover:bg-[#3E2723] hover:text-white transition-all group">
            <div className="p-3 bg-gray-100 rounded-xl text-[#3E2723] group-hover:bg-white/20"><Icon name="award" /></div>
            <div className="text-left"><p className="font-black text-lg">Halaman Guru</p><p className="text-xs opacity-60">Akses Administrator</p></div>
          </button>
        </div>
        <button onClick={() => setView('landing')} className="mt-8 text-sm font-bold text-gray-400">← Kembali</button>
      </div>
    </div>
  );

  if (view === 'register') return (
    <div className="min-h-screen bg-[#FDFBF7] flex items-center justify-center p-6">
      <form onSubmit={handleRegisterSiswa} className="max-w-md w-full bg-white p-12 rounded-[50px] shadow-2xl border border-[#EEDC82]/30">
        <h2 className="text-3xl font-serif font-black mb-2 text-[#3E2723]">Pendaftaran</h2>
        <p className="text-gray-400 text-sm mb-8 italic">Buat profil belajar sejarahmu.</p>
        <div className="space-y-4">
          <input required className="w-full p-4 bg-[#FDFBF7] border border-[#EEDC82]/50 rounded-2xl outline-none" placeholder="Nama Lengkap" value={regForm.name} onChange={e => setRegForm({...regForm, name: e.target.value})} />
          <div className="flex gap-4">
            <select className="flex-1 p-4 bg-[#FDFBF7] border border-[#EEDC82]/50 rounded-2xl outline-none" value={regForm.class} onChange={e => setRegForm({...regForm, class: e.target.value})}><option value="10">Kelas X</option><option value="11">Kelas XI</option></select>
            <input required className="flex-1 p-4 bg-[#FDFBF7] border border-[#EEDC82]/50 rounded-2xl outline-none" placeholder="NISN" value={regForm.nisn} onChange={e => setRegForm({...regForm, nisn: e.target.value})} />
          </div>
        </div>
        {authError && <p className="mt-4 text-xs text-red-500 font-bold">{authError}</p>}
        <button type="submit" className="w-full mt-8 py-5 bg-[#8B4513] text-white rounded-2xl font-black text-lg shadow-xl hover:bg-[#5D2E0A]">Daftar & Masuk</button>
        <button type="button" onClick={() => setView('selection')} className="w-full mt-2 text-sm font-bold text-gray-400 py-2">Batal</button>
      </form>
    </div>
  );

  if (view === 'login_guru') return (
    <div className="min-h-screen bg-[#FDFBF7] flex items-center justify-center p-6">
      <form onSubmit={handleLoginGuru} className="max-w-md w-full bg-[#3E2723] p-12 rounded-[50px] shadow-2xl text-white">
        <h2 className="text-3xl font-serif font-black text-center mb-2">Login Guru</h2>
        <p className="text-center opacity-50 text-sm mb-10 italic">Masukkan sandi khusus administrator.</p>
        <input type="password" name="guru-password" autoComplete="current-password" className="w-full p-5 bg-white/5 border border-white/10 rounded-2xl outline-none focus:ring-2 focus:ring-[#EEDC82]" placeholder="Password Guru" value={guruPass} onChange={e => setGuruPass(e.target.value)} />
        <p className="mt-2 text-[10px] opacity-40 text-center">Simulasi: GURU123</p>
        {authError && <p className="mt-4 text-xs text-red-400 font-bold text-center">{authError}</p>}
        <button type="submit" className="w-full mt-8 py-5 bg-[#EEDC82] text-[#3E2723] rounded-2xl font-black text-lg shadow-xl hover:bg-white">Masuk Panel</button>
        <button type="button" onClick={() => setView('selection')} className="w-full mt-4 text-sm font-bold opacity-30">Kembali</button>
      </form>
    </div>
  );

  // --- DASHBOARD ---
  return (
    <div className="min-h-screen bg-[#FDFBF7] flex font-sans">
      <aside className={`${isSidebarOpen ? 'w-80' : 'w-24'} bg-white border-r border-[#EEDC82]/50 transition-all duration-500 fixed h-full z-40 flex flex-col`}>
        <div className="p-10 flex items-center gap-3">
          <div className="p-2 bg-[#8B4513] rounded-xl text-white shadow-lg"><Icon name="book" size={24} /></div>
          {isSidebarOpen && <span className="font-serif font-black text-2xl text-[#3E2723]">KRONIKA</span>}
        </div>
        <div className="flex-1 px-4 space-y-2 overflow-y-auto">
          <button onClick={() => { setSelectedItem(null); setQuizScore(null); setCurrentQuiz(null); }} className={`w-full flex items-center gap-4 p-4 rounded-3xl ${!selectedItem && !currentQuiz ? 'bg-[#8B4513] text-white shadow-xl' : 'text-gray-500 hover:bg-[#FDFBF7]'}`}>
            <Icon name="dashboard" size={20} />
            {isSidebarOpen && <span className="font-bold">Dashboard</span>}
          </button>
          <div className="pt-6">
            <p className={`px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-gray-400 ${!isSidebarOpen && 'hidden'}`}>Materi Ajar</p>
            {materials.map(m => (
              <button key={m.id} onClick={() => setSelectedItem({ type: 'material', ...m })} className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all group mt-1 ${selectedItem?.id === m.id ? 'bg-[#8B4513]/10 text-[#8B4513]' : 'text-gray-500 hover:bg-[#FDFBF7]'}`}>
                <Icon name="file" size={20} />
                {isSidebarOpen && <span className="font-bold text-sm truncate">{String(m.title)}</span>}
              </button>
            ))}
          </div>
          <div className="pt-6">
            <p className={`px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-gray-400 ${!isSidebarOpen && 'hidden'}`}>Evaluasi & Tugas</p>
            {quizzes.map(q => (
              <button key={q.id} onClick={() => { setCurrentQuiz(q); setSelectedItem(null); setQuizScore(null); setAnswers({}); }} className="w-full flex items-center gap-4 p-4 rounded-2xl text-gray-500 hover:bg-[#FDFBF7] mt-1">
                <Icon name="clipboard" size={20} />
                {isSidebarOpen && <span className="font-bold text-sm truncate">{String(q.title)}</span>}
              </button>
            ))}
          </div>
        </div>
        <div className="p-8 border-t border-[#EEDC82]/30 text-center">
          <button onClick={logout} className="w-full flex items-center justify-center gap-4 p-4 rounded-2xl text-red-500 hover:bg-red-50 font-bold transition-all"><Icon name="logout" size={20} />{isSidebarOpen && <span>Keluar Akun</span>}</button>
        </div>
      </aside>

      <main className={`${isSidebarOpen ? 'ml-80' : 'ml-24'} flex-1 p-12 transition-all duration-500`}>
        <div className="flex justify-between items-center mb-12">
          <div className="flex items-center gap-5">
            <div className="w-16 h-16 rounded-2xl bg-[#8B4513] text-white flex items-center justify-center font-black text-2xl shadow-xl">{String(userData?.name?.[0] || '?')}</div>
            <div>
              <h2 className="text-3xl font-serif font-black text-[#3E2723]">{String(userData?.name || 'User')}</h2>
              <p className="text-xs font-bold text-[#8B4513] uppercase tracking-widest bg-[#FEF3C7] px-2 py-0.5 rounded-md inline-block">{String(userData?.role || 'Siswa')}</p>
            </div>
          </div>
          <div className="flex items-center gap-4">
             <div className="px-8 py-4 bg-white border border-[#EEDC82]/50 rounded-[24px] shadow-sm text-center">
                <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Kredit Poin</p>
                <p className="text-2xl font-black text-[#8B4513]">{userData?.points || 0} XP</p>
             </div>
          </div>
        </div>

        {currentQuiz ? (
          <div className="max-w-3xl mx-auto animate-in fade-in slide-in-from-bottom-6 duration-500">
            <button onClick={() => setCurrentQuiz(null)} className="mb-6 text-sm font-bold text-[#8B4513]">← Tutup Kuis</button>
            <div className="bg-white rounded-[40px] shadow-2xl border border-[#EEDC82]/30 p-12">
              <h3 className="text-3xl font-serif font-black text-[#3E2723] mb-8">{String(currentQuiz.title)}</h3>
              {quizScore !== null ? (
                <div className="text-center py-12">
                  <div className="w-32 h-32 bg-[#FEF3C7] rounded-full flex items-center justify-center mx-auto mb-6 text-4xl font-black text-[#8B4513]">{quizScore}</div>
                  <h4 className="text-2xl font-bold">Kuis Selesai!</h4>
                  <p className="text-gray-500 mt-2">Poin Anda telah ditambahkan ke profil.</p>
                </div>
              ) : (
                <div className="space-y-10">
                  {currentQuiz.questions.map((q, qIdx) => (
                    <div key={qIdx} className="space-y-4">
                      <p className="font-bold text-xl text-[#3E2723]">{qIdx + 1}. {String(q.q)}</p>
                      <div className="grid gap-3">
                        {q.options.map((opt, oIdx) => (
                          <button key={oIdx} onClick={() => setAnswers({...answers, [qIdx]: opt})} className={`w-full text-left p-4 rounded-2xl border-2 transition-all font-medium ${answers[qIdx] === opt ? 'border-[#8B4513] bg-[#FEF3C7]' : 'border-gray-100 hover:border-[#EEDC82]'}`}>
                            {String(opt)}
                          </button>
                        ))}
                      </div>
                    </div>
                  ))}
                  <button onClick={submitQuiz} className="w-full py-5 bg-[#8B4513] text-white rounded-[24px] font-black text-xl shadow-2xl">Kirim Jawaban</button>
                </div>
              )}
            </div>
          </div>
        ) : selectedItem ? (
          <div className="max-w-4xl mx-auto animate-in fade-in slide-in-from-bottom-6 duration-500">
            <button onClick={() => setSelectedItem(null)} className="mb-8 text-sm font-bold text-[#8B4513]">← Dashboard</button>
            <div className="bg-white rounded-[50px] shadow-2xl border border-[#EEDC82]/30 p-12 space-y-8">
              <div className="flex justify-between items-center">
                <span className="px-3 py-1 bg-[#FEF3C7] text-[#92400E] rounded-full text-[10px] font-bold uppercase tracking-widest">Modul Kelas {String(selectedItem.level)}</span>
                <span className="text-xs text-gray-400 font-medium">Author: {String(selectedItem.author || "Guru")}</span>
              </div>
              <h1 className="text-5xl font-serif font-black text-[#3E2723] leading-tight">{String(selectedItem.title)}</h1>
              <div className="prose prose-brown max-w-none text-[#3E2723]/80 leading-relaxed text-lg border-l-4 border-[#8B4513] pl-10 italic">
                {String(selectedItem.content || selectedItem.description)}
              </div>
              {selectedItem.type === 'assignment' && (
                <div className="mt-12 p-8 bg-gray-50 rounded-3xl border border-dashed border-[#EEDC82]">
                  <h5 className="font-black mb-4 uppercase text-xs tracking-widest">Kumpulkan Tugas</h5>
                  <textarea className="w-full h-32 p-4 rounded-2xl border border-[#EEDC82]/50 outline-none" placeholder="Tulis jawaban atau link file tugas di sini..."></textarea>
                  <button className="mt-4 px-8 py-3 bg-[#8B4513] text-white rounded-xl font-bold shadow-lg">Kirim Tugas</button>
                </div>
              )}
            </div>
          </div>
        ) : (
          <div className="space-y-12">
            {userData?.role === 'guru' ? (
              <div className="space-y-12">
                <div className="bg-[#3E2723] p-12 rounded-[50px] text-white shadow-2xl flex flex-col md:flex-row justify-between items-center gap-10">
                  <div className="space-y-3">
                    <h3 className="text-4xl font-serif font-black">Admin Panel Kronika</h3>
                    <p className="opacity-60 max-w-md font-medium italic">Kelola seluruh aspek pembelajaran digital sejarah dalam satu kendali terpusat.</p>
                  </div>
                  <div className="flex flex-wrap gap-4">
                    <button onClick={addMaterial} className="px-8 py-4 bg-[#8B4513] text-white rounded-2xl font-black text-sm shadow-xl hover:bg-white hover:text-[#8B4513] transition-all flex items-center gap-2"><Icon name="plus" size={18} /> Modul</button>
                    <button onClick={addQuiz} className="px-8 py-4 bg-[#EEDC82] text-[#3E2723] rounded-2xl font-black text-sm shadow-xl hover:bg-white transition-all flex items-center gap-2"><Icon name="clipboard" size={18} /> Kuis</button>
                    <button onClick={addAssignment} className="px-8 py-4 bg-white/10 text-white rounded-2xl font-black text-sm shadow-xl border border-white/10 hover:bg-white/20 transition-all flex items-center gap-2"><Icon name="pen" size={18} /> Tugas</button>
                  </div>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  <div className="bg-white p-10 rounded-[40px] border border-[#EEDC82]/50 shadow-sm">
                    <h5 className="text-sm font-black uppercase text-gray-400 mb-6 tracking-widest">Daftar Siswa Aktif ({allStudents.length})</h5>
                    <div className="space-y-4 max-h-80 overflow-y-auto pr-2">
                      {allStudents.map(s => (
                        <div key={s.uid} className="flex justify-between items-center p-5 bg-[#FDFBF7] rounded-3xl border border-[#EEDC82]/20">
                          <div><p className="font-bold text-lg">{String(s.name)}</p><p className="text-[10px] text-gray-400">Kelas {String(s.class)} • NISN {String(s.nisn)}</p></div>
                          <div className="text-right"><p className="font-black text-[#8B4513]">{s.points || 0} XP</p><span className="text-[10px] bg-green-50 text-green-700 px-2 rounded-md font-bold">Aktif</span></div>
                        </div>
                      ))}
                    </div>
                  </div>
                  <div className="bg-[#8B4513] p-10 rounded-[40px] text-white shadow-xl flex flex-col justify-center items-center text-center">
                     <Icon name="award" size={64} className="mb-6 opacity-30" />
                     <h4 className="text-2xl font-serif font-black">Statistik Global</h4>
                     <p className="opacity-60 mt-2 italic">Pantau keterlibatan siswa secara menyeluruh di platform Kronika.</p>
                     <div className="grid grid-cols-2 gap-4 mt-8 w-full">
                        <div className="bg-white/10 p-4 rounded-2xl"><p className="text-2xl font-black">{materials.length}</p><p className="text-[10px] uppercase font-bold opacity-60">Materi</p></div>
                        <div className="bg-white/10 p-4 rounded-2xl"><p className="text-2xl font-black">{quizzes.length}</p><p className="text-[10px] uppercase font-bold opacity-60">Kuis</p></div>
                     </div>
                  </div>
                </div>
              </div>
            ) : (
              <div className="space-y-12">
                <div className="bg-[#8B4513] p-12 rounded-[50px] text-white shadow-2xl relative overflow-hidden group">
                   <div className="relative z-10 flex flex-col md:flex-row justify-between items-center gap-10">
                    <div className="space-y-3">
                      <h3 className="text-4xl font-serif font-black tracking-tight">Eksplorasi Sejarah</h3>
                      <p className="opacity-70 max-w-lg font-medium leading-relaxed italic">"Bangsa yang besar adalah bangsa yang menghargai jasa para pahlawannya." Lanjutkan progres belajarmu hari ini.</p>
                    </div>
                    <div className="shrink-0 p-10 bg-white/10 rounded-[40px] border border-white/10 text-center backdrop-blur-xl">
                       <p className="text-[10px] font-black uppercase tracking-widest opacity-50 mb-2">Progres Keseluruhan</p>
                       <h4 className="text-5xl font-black">{userData?.progress || 0}%</h4>
                       <div className="w-32 h-2 bg-white/20 rounded-full mt-4 mx-auto overflow-hidden"><div className="h-full bg-white transition-all duration-1000" style={{ width: `${userData?.progress || 0}%` }}></div></div>
                    </div>
                  </div>
                </div>
                <div className="space-y-8">
                  <h3 className="text-2xl font-serif font-black text-[#3E2723]">Modul & Tugas Terbaru</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {materials.map(m => (
                      <div key={m.id} onClick={() => setSelectedItem({ type: 'material', ...m })} className="bg-white rounded-[40px] border border-[#EEDC82]/50 p-8 shadow-sm hover:shadow-2xl transition-all cursor-pointer group hover:-translate-y-2">
                        <div className="flex justify-between items-start mb-6">
                          <div className="p-3 bg-gray-50 text-[#8B4513] rounded-2xl group-hover:bg-[#8B4513] group-hover:text-white transition-all"><Icon name="file" /></div>
                          <span className="text-[10px] font-black uppercase px-2 py-1 bg-[#FEF3C7] text-[#92400E] rounded-md">Materi {m.level}</span>
                        </div>
                        <h4 className="text-xl font-bold mb-4 line-clamp-2 leading-snug">{String(m.title)}</h4>
                        <p className="text-sm text-gray-400 line-clamp-2 italic leading-relaxed">{String(m.content)}</p>
                        <div className="mt-8 flex justify-between items-center opacity-40">
                           <div className="flex items-center gap-2 text-[10px] font-bold"><Icon name="clock" size={14} /> 15 MIN</div>
                           <Icon name="chevron" size={20} />
                        </div>
                      </div>
                    ))}
                    {assignments.map(a => (
                      <div key={a.id} onClick={() => setSelectedItem({ type: 'assignment', ...a })} className="bg-[#3E2723] rounded-[40px] p-8 shadow-xl cursor-pointer group hover:-translate-y-2 text-white">
                        <div className="flex justify-between items-start mb-6">
                          <div className="p-3 bg-white/10 rounded-2xl text-[#EEDC82]"><Icon name="pen" /></div>
                          <span className="text-[10px] font-black uppercase px-2 py-1 bg-[#EEDC82] text-[#3E2723] rounded-md">TUGAS</span>
                        </div>
                        <h4 className="text-xl font-bold mb-4 line-clamp-2 leading-snug">{String(a.title)}</h4>
                        <p className="text-sm opacity-50 line-clamp-2 italic leading-relaxed">{String(a.description)}</p>
                        <div className="mt-8 flex justify-end"><Icon name="chevron" size={20} className="opacity-40" /></div>
                      </div>
                    ))}
                  </div>
                  {(materials.length === 0 && assignments.length === 0) && (
                    <div className="py-24 text-center border-4 border-dashed border-[#EEDC82]/20 rounded-[50px] opacity-40">
                       <Icon name="book" size={64} className="mx-auto text-gray-200 mb-4" />
                       <p className="font-bold text-gray-400 italic">Belum ada konten pembelajaran yang diunggah guru.</p>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        )}
      </main>
    </div>
  );
}