// Deklarasi ekstraksi React Hooks di baris paling atas
const { useState, useEffect, useMemo } = React;

const API_URL = "api.php";

const INITIAL_CLASSES = [
  { id: 1, nama: 'Kelas 1 MI', fase: 'Fase A' },
  { id: 2, nama: 'Kelas 2 MI', fase: 'Fase A' },
  { id: 3, nama: 'Kelas 3 MI', fase: 'Fase B' },
  { id: 4, nama: 'Kelas 4 MI', fase: 'Fase B' },
  { id: 5, nama: 'Kelas 5 MI', fase: 'Fase C' },
  { id: 6, nama: 'Kelas 6 MI', fase: 'Fase C' },
];

function App() {
  const [theme, setTheme] = useState('light');
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  const [classes] = useState(INITIAL_CLASSES);
  const [babList, setBabList] = useState([]);
  const [subBabList, setSubBabList] = useState([]);
  const [materiList, setMateriList] = useState([]);
  const [loading, setLoading] = useState(true);
  
  const [adminLogs, setAdminLogs] = useState([
    { waktu: '2026-06-28 09:00', aksi: 'Sistem Akidah Akhlak MI Kurikulum Berbasis Cinta (KBC) siap di cPanel.', user: 'Sistem' }
  ]);

  const [currentView, setCurrentView] = useState('home');
  const [selectedClass, setSelectedClass] = useState(null);
  const [selectedBab, setSelectedBab] = useState(null);
  const [selectedSubBab, setSelectedSubBab] = useState(null);
  const [selectedMateri, setSelectedMateri] = useState(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [adminActiveTab, setAdminActiveTab] = useState('materi');

  const [editingBabId, setEditingBabId] = useState(null);
  const [editingBabName, setEditingBabName] = useState('');
  const [editingBabNomor, setEditingBabNomor] = useState(1);
  const [selectedAdminClassId, setSelectedAdminClassId] = useState(1);

  const [editingSubBabId, setEditingSubBabId] = useState(null);
  const [editingSubBabName, setEditingSubBabName] = useState('');
  const [editingSubBabNomor, setEditingSubBabNomor] = useState(1);
  const [selectedAdminBabId, setSelectedAdminBabId] = useState(1);

  const [formMode, setFormMode] = useState('add');
  const [materiForm, setMateriForm] = useState({
    id: null, class_id: 1, bab_id: 1, sub_bab_id: 1,
    judul: '', konten: '', gambar: '', pdf_nama: '',
    video_url: '', youtube_url: '', penulis: ''
  });

  const [showLoginModal, setShowLoginModal] = useState(false);
  const [loginForm, setLoginForm] = useState({ username: '', password: '' });
  const [loginError, setLoginError] = useState('');
  const [toast, setToast] = useState({ show: false, message: '', type: 'success' });
  const [isPreviewFormMode, setIsPreviewFormMode] = useState(false);

  const loadDatabaseFromMySQL = async () => {
    setLoading(true);
    try {
      const response = await fetch(`${API_URL}?action=get_data`);
      const data = await response.json();
      if (data.status === 'success') {
        setBabList(data.babList || []);
        setSubBabList(data.subBabList || []);
        setMateriList(data.materiList || []);
      } else {
        showToast('Database MySQL kosong, menggunakan data demo KBC.', 'info');
        loadOfflineData();
      }
    } catch (error) {
      loadOfflineData();
    } finally {
      setLoading(false);
    }
  };

  const loadOfflineData = () => {
    setBabList([
      { id: 1, kelas_id: 1, nomor: 1, nama: "Bab 1: Aku Cinta Dua Kalimat Syahadat" },
      { id: 2, kelas_id: 1, nomor: 2, nama: "Bab 2: Mengenal Allah Melalui Ar-Rahman dan Ar-Rahim" },
      { id: 3, kelas_id: 1, nomor: 3, nama: "Bab 3: Adab Mandi dan Berpakaian Bersih" },
      { id: 4, kelas_id: 1, nomor: 4, nama: "Bab 4: Menghormati Orang Tua dan Guru" },
      { id: 5, kelas_id: 1, nomor: 5, nama: "Bab 5: Kisah Keteladanan Nabi Muhammad SAW" },
      { id: 6, kelas_id: 1, nomor: 6, nama: "Bab 6: Kalimat Tayyibah Basmalah dan Hamdalah" },
      { id: 7, kelas_id: 1, nomor: 7, nama: "Bab 7: Asmaul Husna: Al-Ahad dan Al-Khaliq" },
      { id: 8, kelas_id: 1, nomor: 8, nama: "Bab 8: Berterima Kasih dan Rendah Hati" },
      { id: 9, kelas_id: 1, nomor: 9, nama: "Bab 9: Adab Belajar dan Bermain" },
      { id: 10, kelas_id: 1, nomor: 10, nama: "Bab 10: Kisah Keteladanan Nabi Ismail AS" }
    ]);
    setSubBabList([
      { id: 1, bab_id: 1, nomor: 1, nama: "Sub Bab 1: Tujuan Pembelajaran & Refleksi Mulia" },
      { id: 2, bab_id: 1, nomor: 2, nama: "Sub Bab 2: Kajian Materi & Dalil Al-Qur'an/Hadis" },
      { id: 3, bab_id: 1, nomor: 3, nama: "Sub Bab 3: Implementasi Kurikulum Berbasis Cinta (KBC)" },
      { id: 4, bab_id: 1, nomor: 4, nama: "Sub Bab 4: Kisah Inspiratif Pembawa Hikmah" },
      { id: 5, bab_id: 1, nomor: 5, nama: "Sub Bab 5: Rangkuman Intisari Pembelajaran" },
      { id: 6, bab_id: 1, nomor: 6, nama: "Sub Bab 6: Asesmen Sumatif & Evaluasi Mandiri" }
    ]);
    setMateriList([
      {
        id: 1,
        sub_bab_id: 1,
        judul: "Mari Mengenal Dua Kalimat Syahadat",
        konten: `<p class="text-lg leading-relaxed mb-4"><strong>Assalamu'alaikum Warahmatullahi Wabarakatuh.</strong><br/>Anak-anakku yang hebat, cerdas, dan shalih-shalihah, selamat datang di Kurikulum Berbasis Cinta (KBC)!</p>
        <p class="mb-4">Pada bab pertama ini, kita akan bersama-sama menanamkan rasa cinta kita kepada Allah dan Rasul-Nya melalui pondasi utama keimanan kita, yaitu <strong>Dua Kalimat Syahadat</strong> (Syahadatain).</p>
        <div class="my-6 p-6 bg-emerald-50 dark:bg-emerald-950/30 border-l-4 border-emerald-600 rounded-r-2xl">
          <p class="text-xl font-bold text-emerald-800 dark:text-emerald-400 text-center arabic-text leading-loose mb-2">
            أَشْهَدُ أَنْ لَا إِلَهَ إِلَّا اللهُ وَأَشْهَدُ أَنَّ مُحَمَّدًا رَسُولُ اللهِ
          </p>
          <p class="text-xs text-center text-slate-500 italic">"Aku bersaksi bahwa tiada Tuhan selain Allah, dan aku bersaksi bahwa Nabi Muhammad adalah utusan Allah."</p>
        </div>`,
        media: {
          gambar: "https://images.unsplash.com/photo-1564507592333-c60657eea523?auto=format&fit=crop&w=800&q=80",
          pdf_nama: "syahadatain_kurikulum_kbc_k1.pdf",
          video_url: "https://www.w3schools.com/html/mov_bbb.mp4",
          youtube_url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
        },
        penulis: "Ustadzah Aisyah Rahma, S.Pd",
        diupdate_pada: "2026-06-28 08:30"
      }
    ]);
  };

  const showToast = (message, type = 'success') => {
    setToast({ show: true, message, type });
    setTimeout(() => {
      setToast({ show: false, message: '', type: 'success' });
    }, 4000);
  };

  const addLog = (aksi, user = isLoggedIn ? 'Admin' : 'Tamu') => {
    const waktu = new Date().toISOString().replace('T', ' ').substring(0, 16);
    setAdminLogs(prev => [{ waktu, aksi, user }, ...prev]);
  };

  const filteredBab = useMemo(() => {
    if (!selectedClass) return [];
    return babList.filter(b => Number(b.kelas_id) === selectedClass.id);
  }, [selectedClass, babList]);

  const filteredSubBab = useMemo(() => {
    if (!selectedBab) return [];
    return subBabList.filter(sb => Number(sb.bab_id) === selectedBab.id);
  }, [selectedBab, subBabList]);

  const formSubBabList = useMemo(() => {
    return subBabList.filter(sb => Number(sb.bab_id) === Number(materiForm.bab_id));
  }, [materiForm.bab_id, subBabList]);

  const formBabList = useMemo(() => {
    return babList.filter(b => Number(b.kelas_id) === Number(materiForm.class_id));
  }, [materiForm.class_id, babList]);

  const searchResults = useMemo(() => {
    if (!searchQuery.trim()) return [];
    const query = searchQuery.toLowerCase();
    return materiList.map(materi => {
      const sub = subBabList.find(s => Number(s.id) === Number(materi.sub_bab_id));
      const bab = sub ? babList.find(b => Number(b.id) === Number(sub.bab_id)) : null;
      const klis = bab ? classes.find(c => Number(c.id) === Number(bab.kelas_id)) : null;
      return {
        materi, sub, bab, kelas: klis,
        matchScore: (
          (materi.judul.toLowerCase().includes(query) ? 3 : 0) +
          (materi.konten.toLowerCase().includes(query) ? 1 : 0) +
          (sub?.nama.toLowerCase().includes(query) ? 2 : 0) +
          (bab?.nama.toLowerCase().includes(query) ? 2 : 0)
        )
      };
    }).filter(res => res.matchScore > 0);
  }, [searchQuery, materiList, subBabList, babList, classes]);

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch(`${API_URL}?action=login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(loginForm)
      });
      const data = await response.json();
      if (data.status === 'success') {
        setIsLoggedIn(true);
        setShowLoginModal(false);
        setLoginForm({ username: '', password: '' });
        setLoginError('');
        showToast('Login berhasil sebagai Admin!', 'success');
        addLog('Login admin berhasil terautentikasi.', data.user.nama_lengkap);
      } else {
        setLoginError(data.message);
      }
    } catch (err) {
      if (loginForm.username === 'admin' && loginForm.password === 'akidahmi123') {
        setIsLoggedIn(true);
        setShowLoginModal(false);
        setLoginForm({ username: '', password: '' });
        showToast('Login berhasil (Mode Offline)!', 'success');
      } else {
        setLoginError('Koneksi database cPanel offline. Gunakan kredensial default.');
      }
    }
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
    setCurrentView('home');
    showToast('Logout berhasil.', 'info');
  };

  const navigateToMateri = (subBabId) => {
    const foundSub = subBabList.find(sb => Number(sb.id) === Number(subBabId));
    if (!foundSub) return;
    const foundBab = babList.find(b => Number(b.id) === Number(foundSub.bab_id));
    const foundClass = classes.find(c => Number(c.id) === Number(foundBab.kelas_id));
    const foundMateri = materiList.find(m => Number(m.sub_bab_id) === Number(subBabId));

    setSelectedClass(foundClass);
    setSelectedBab(foundBab);
    setSelectedSubBab(foundSub);
    setSelectedMateri(foundMateri || null);
    setCurrentView('materi-baca');
  };

  const handleDeleteMateri = async (id) => {
    if (confirm('Apakah Anda yakin ingin menghapus materi ini dari database?')) {
      try {
        const response = await fetch(`${API_URL}?action=delete_materi&id=${id}`);
        const data = await response.json();
        if (data.status === 'success') {
          showToast('Materi berhasil dihapus!', 'success');
          loadDatabaseFromMySQL();
        }
      } catch (err) {
        showToast('Koneksi server gagal.', 'error');
      }
    }
  };

  const handleSaveMateri = async (e) => {
    e.preventDefault();
    const payload = {
      id: formMode === 'add' ? null : materiForm.id,
      sub_bab_id: Number(materiForm.sub_bab_id),
      judul: materiForm.judul,
      konten: materiForm.konten,
      penulis: materiForm.penulis || 'Guru Pengampu',
      media: {
        gambar: materiForm.gambar || '',
        pdf_nama: materiForm.pdf_nama || '',
        video_url: materiForm.video_url || '',
        youtube_url: materiForm.youtube_url || ''
      }
    };

    try {
      const response = await fetch(`${API_URL}?action=save_materi`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await response.json();
      if (data.status === 'success') {
        showToast('Materi berhasil disimpan!', 'success');
        await loadDatabaseFromMySQL();
        navigateToMateri(materiForm.sub_bab_id);
      }
    } catch (err) {
      showToast('Gagal terhubung ke database. Data tidak tersimpan.', 'error');
    }
  };

  const handleSaveBab = async (e) => {
    e.preventDefault();
    if (!editingBabName.trim()) return;
    const payload = {
      id: editingBabId,
      kelas_id: Number(selectedAdminClassId),
      nomor: Number(editingBabNomor),
      nama: `Bab ${editingBabNomor}: ${editingBabName.replace(/^Bab \d+:\s*/i, '')}`
    };
    try {
      const response = await fetch(`${API_URL}?action=save_bab`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await response.json();
      if (data.status === 'success') {
        showToast('Bab berhasil disimpan!', 'success');
        setEditingBabId(null);
        setEditingBabName('');
        loadDatabaseFromMySQL();
      }
    } catch (err) {
      showToast('Gagal koneksi server.', 'error');
    }
  };

  const handleDeleteBab = async (id) => {
    if (confirm('Hapus Bab ini dari database?')) {
      try {
        await fetch(`${API_URL}?action=delete_bab&id=${id}`);
        showToast('Bab berhasil dihapus!', 'success');
        loadDatabaseFromMySQL();
      } catch (err) {
        showToast('Gagal menghapus.', 'error');
      }
    }
  };

  const handleSaveSubBab = async (e) => {
    e.preventDefault();
    if (!editingSubBabName.trim()) return;
    const payload = {
      id: editingSubBabId,
      bab_id: Number(selectedAdminBabId),
      nomor: Number(editingSubBabNomor),
      nama: `Sub Bab ${editingSubBabNomor}: ${editingSubBabName.replace(/^Sub Bab \d+:\s*/i, '')}`
    };
    try {
      const response = await fetch(`${API_URL}?action=save_sub_bab`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await response.json();
      if (data.status === 'success') {
        showToast('Sub-Bab berhasil disimpan!', 'success');
        setEditingSubBabId(null);
        setEditingSubBabName('');
        loadDatabaseFromMySQL();
      }
    } catch (err) {
      showToast('Gagal koneksi server.', 'error');
    }
  };

  const handleDeleteSubBab = async (id) => {
    if (confirm('Hapus Sub-Bab ini?')) {
      try {
        await fetch(`${API_URL}?action=delete_sub_bab&id=${id}`);
        showToast('Sub-Bab berhasil dihapus!', 'success');
        loadDatabaseFromMySQL();
      } catch (err) {
        showToast('Gagal menghapus.', 'error');
      }
    }
  };

  const openMateriForm = (mode, targetMateri = null) => {
    if (mode === 'add') {
      setFormMode('add');
      setMateriForm({
        id: null, class_id: selectedClass ? selectedClass.id : 1,
        bab_id: selectedBab ? selectedBab.id : 1,
        sub_bab_id: selectedSubBab ? selectedSubBab.id : 1,
        judul: '', konten: '', gambar: '', pdf_nama: '',
        video_url: '', youtube_url: '', penulis: 'Pendidik KBC'
      });
    } else {
      setFormMode('edit');
      setMateriForm({
        id: targetMateri.id,
        class_id: selectedClass ? selectedClass.id : 1,
        bab_id: selectedBab ? selectedBab.id : 1,
        sub_bab_id: targetMateri.sub_bab_id,
        judul: targetMateri.judul,
        konten: targetMateri.konten,
        gambar: targetMateri.media?.gambar || '',
        pdf_nama: targetMateri.media?.pdf_nama || '',
        video_url: targetMateri.media?.video_url || '',
        youtube_url: targetMateri.media?.youtube_url || '',
        penulis: targetMateri.penulis
      });
    }
    setIsPreviewFormMode(false);
    setCurrentView('admin-materi-form');
  };

  const handleBackup = () => {
    const databaseJSON = JSON.stringify({ classes, babList, subBabList, materiList }, null, 2);
    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(databaseJSON);
    const linkElement = document.createElement('a');
    linkElement.setAttribute('href', dataUri);
    linkElement.setAttribute('download', 'backup_akidah_kbc_mi.json');
    linkElement.click();
    showToast('Backup JSON berhasil diunduh!', 'success');
  };

  const handleImport = (e) => {
    const fileReader = new FileReader();
    if (e.target.files.length > 0) {
      fileReader.readAsText(e.target.files[0], "UTF-8");
      fileReader.onload = (event) => {
        try {
          const parsed = JSON.parse(event.target.result);
          if (parsed.materiList && parsed.babList && parsed.subBabList) {
            setBabList(parsed.babList);
            setSubBabList(parsed.subBabList);
            setMateriList(parsed.materiList);
            showToast('Data materi Kurikulum KBC sukses di-import!', 'success');
          }
        } catch (err) {
          showToast('Gagal memproses berkas JSON.', 'error');
        }
      };
    }
  };

  return (
    <div className="min-h-screen flex flex-col transition-colors duration-300">
      
      {/* ==========================================
          HEADER NAVBAR (PREMIUM STYLE)
          ========================================== */}
      <header className="sticky top-0 z-40 w-full border-b border-emerald-100 dark:border-emerald-950 bg-white/95 dark:bg-slate-950 backdrop-blur-md shadow-sm h-16 flex items-center justify-between px-6">
        <div className="flex items-center gap-4">
          <button onClick={() => setIsSidebarOpen(!isSidebarOpen)} className="p-2 rounded-xl text-emerald-800 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-slate-900 transition-all">
            <i className="fa-solid fa-bars text-xl"></i>
          </button>
          <div className="flex items-center gap-2.5 cursor-pointer" onClick={() => { setCurrentView('home'); setSelectedClass(null); }}>
            <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-emerald-600 to-amber-500 flex items-center justify-center text-white font-bold text-lg shadow-md shadow-emerald-600/10">
              00
            </div>
            <div>
              <h1 className="font-extrabold text-base tracking-tight text-emerald-900 dark:text-emerald-400 leading-none">Akidah Akhlak MI</h1>
              <span className="text-[10px] font-black tracking-widest text-amber-600 dark:text-amber-500 uppercase">Kurikulum Berbasis Cinta (KBC)</span>
            </div>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')} className="p-2.5 rounded-full hover:bg-slate-100 dark:hover:bg-slate-900 transition-colors">
            {theme === 'light' ? <i className="fa-solid fa-moon text-lg text-amber-600"></i> : <i className="fa-solid fa-sun text-lg text-amber-400"></i>}
          </button>
          {isLoggedIn && (
            <button onClick={() => setCurrentView('admin-dashboard')} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold bg-amber-100 text-amber-800 dark:bg-amber-950/50 dark:text-amber-300">
              <i className="fa-solid fa-chart-line"></i>
              Dashboard
            </button>
          )}
          {isLoggedIn ? (
            <button onClick={handleLogout} className="bg-rose-500 hover:bg-rose-600 text-white font-bold text-xs px-4 py-2 rounded-xl transition-all shadow-md">Keluar</button>
          ) : (
            <button onClick={() => setShowLoginModal(true)} className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs px-4 py-2 rounded-xl transition-all shadow-md">Masuk Guru</button>
          )}
        </div>
      </header>

      {/* Loading State Overlay */}
      {loading && (
        <div className="bg-emerald-50 dark:bg-slate-900 p-2.5 text-center text-xs font-bold text-emerald-800 dark:text-emerald-400 flex items-center justify-center gap-2">
          <i className="fa-solid fa-clock animate-spin"></i>
          Mengkoneksikan & memuat data dari database MySQL cPanel...
        </div>
      )}

      <div className="flex-1 flex">
        
        {/* ==========================================
            SIDEBAR NAVIGATION (PREMIUM DESIGN)
            ========================================== */}
        {isSidebarOpen && (
          <aside className="w-80 border-r border-slate-200/60 dark:border-slate-800/80 bg-white dark:bg-slate-950 p-5 h-[calc(100vh-4rem)] overflow-y-auto shrink-0 shadow-sm">
            <div className="mb-5 pb-3 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
              <span className="text-xs font-black tracking-widest text-slate-400 uppercase">STRUKTUR KELAS & ATP</span>
              <span className="bg-emerald-50 dark:bg-emerald-950/60 text-emerald-800 dark:text-emerald-400 text-[9px] font-extrabold px-2 py-0.5 rounded-full border border-emerald-100 dark:border-emerald-900/50">IKM Kemenag</span>
            </div>

            <div className="space-y-2">
              {classes.map((kls) => {
                const isSelected = selectedClass?.id === kls.id;
                return (
                  <div key={kls.id} className="space-y-1">
                    <button 
                      onClick={() => { setSelectedClass(kls); setSelectedBab(null); setCurrentView('kelas-detail'); }}
                      className={`w-full text-left p-3 rounded-xl transition-all text-xs font-bold flex items-center justify-between border ${
                        isSelected 
                          ? 'bg-gradient-to-r from-emerald-800 to-emerald-700 text-white border-transparent shadow-lg shadow-emerald-900/10' 
                          : 'hover:bg-slate-50 dark:hover:bg-slate-900 text-slate-700 dark:text-slate-300 border-transparent'
                      }`}
                    >
                      <div className="flex items-center gap-2.5">
                        <span className={`w-6 h-6 rounded-lg flex items-center justify-center font-black text-[10px] ${
                          isSelected ? 'bg-amber-400 text-emerald-950' : 'bg-emerald-50 dark:bg-emerald-955 text-emerald-800 dark:text-emerald-400'
                        }`}>
                          {kls.id}
                        </span>
                        <span>{kls.nama}</span>
                      </div>
                      <i className={`fa-solid fa-chevron-right text-xs transition-transform duration-200 ${isSelected ? 'rotate-90' : ''}`}></i>
                    </button>
                    
                    {/* Nested Bab and Sub-Bab under selected Class in Sidebar */}
                    {isSelected && (
                      <div className="pl-5 py-2 border-l-2 border-emerald-500/30 space-y-2.5 mt-1 bg-emerald-50/10 dark:bg-slate-900/10 rounded-r-xl">
                        {babList.filter(b => Number(b.kelas_id) === kls.id).length === 0 ? (
                          <span className="text-[10px] text-slate-400 block py-1 italic pl-2">Belum ada Bab pembelajaran</span>
                        ) : (
                          babList.filter(b => Number(b.kelas_id) === kls.id).map(bab => (
                            <div key={bab.id} className="space-y-1">
                              <span className="text-[10px] font-black text-slate-400 dark:text-slate-500 block truncate pl-2 uppercase tracking-wide">{bab.nama}</span>
                              {subBabList.filter(s => Number(s.bab_id) === bab.id).map(sub => (
                                <button
                                  key={sub.id}
                                  onClick={() => {
                                    setSelectedBab(bab);
                                    setSelectedSubBab(sub);
                                    setSelectedMateri(materiList.find(m => Number(m.sub_bab_id) === sub.id) || null);
                                    setCurrentView('materi-baca');
                                  }}
                                  className={`w-full text-left text-[11px] py-1 px-2 rounded-lg transition-colors block truncate ${
                                    selectedSubBab?.id === sub.id 
                                      ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-400 font-bold border-l-2 border-emerald-600 pl-3' 
                                      : 'text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-900'
                                  }`}
                                >
                                  {sub.nama.split(': ')[0]}
                                </button>
                              ))}
                            </div>
                          ))
                        )}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </aside>
        )}

        {/* ==========================================
            MAIN CONTENT WINDOW
            ========================================== */}
        <main className="flex-1 p-6 sm:p-10 h-[calc(100vh-4rem)] overflow-y-auto">
          {currentView === 'home' && (
            <div className="space-y-6 max-w-4xl">
              <div className="bg-gradient-to-tr from-emerald-800 to-emerald-600 text-white rounded-3xl p-8 sm:p-12 shadow-lg relative overflow-hidden">
                <div className="absolute right-0 bottom-0 opacity-10 text-[150px] pointer-events-none select-none translate-x-8 translate-y-8 font-serif">🕌</div>
                <span className="bg-amber-400 text-emerald-950 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider font-sans">Kurikulum Berbasis Cinta (KBC)</span>
                <h1 className="text-3xl sm:text-5xl font-extrabold mt-4 mb-3 font-sans">Portal Belajar Akidah Akhlak</h1>
                <p className="text-emerald-100 leading-relaxed max-w-xl text-sm sm:text-base font-sans">Membangun akhlak mulia dan akidah Islamiah berbasis kecintaan tulus kepada Allah SWT, sesama manusia, dan alam semesta.</p>
              </div>

              {/* INTEGRASI KBC HIGHLIGHT */}
              <div className="bg-amber-500/10 dark:bg-amber-950/20 border border-amber-500/30 rounded-2xl p-6">
                <div className="flex flex-col md:flex-row gap-6 items-center">
                  <div className="w-16 h-16 rounded-2xl bg-amber-500 text-white flex items-center justify-center text-3xl shrink-0 shadow-md">
                    ⭐
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-amber-800 dark:text-amber-400 mb-1 flex items-center gap-2">
                      Fokus Utama: Kurikulum Berbasis Cinta (KBC)
                    </h3>
                    <p className="text-xs text-slate-600 dark:text-slate-355 leading-relaxed font-sans">
                      Kurikulum di Madrasah Ibtidaiyah menekankan pembelajaran bermakna berlandaskan cinta kasih untuk menghasilkan generasi muslim yang tulus, berakhlak mulia melalui pendekatan Kurikulum Berbasis Cinta (KBC), toleran, beradab, serta memiliki empati tinggi. Setiap sub-bab dilengkapi aksi nyata berbasis empati dan cinta kasih yang kontekstual.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {currentView === 'kelas-detail' && selectedClass && (
            <div className="space-y-6 animate-fadeIn">
              <div className="flex justify-between items-center">
                <h2 className="text-2xl font-black text-slate-800 dark:text-white font-sans">Alur Pembelajaran {selectedClass.nama}</h2>
                {isLoggedIn && (
                  <button onClick={() => { setAdminActiveTab('bab'); setCurrentView('admin-dashboard'); }} className="text-xs bg-emerald-600 hover:bg-emerald-700 text-white px-3.5 py-2 rounded-xl font-bold flex items-center gap-1.5 font-sans">
                    <i className="fa-solid fa-plus"></i>
                    <span>Kelola Bab / Sub-Bab</span>
                  </button>
                )}
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {babList.filter(b => Number(b.kelas_id) === selectedClass.id).map((bab) => (
                  <div key={bab.id} className="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 p-5 rounded-2xl shadow-sm">
                    <span className="bg-amber-100 text-amber-800 text-[10px] font-bold px-2.5 py-0.5 rounded-full font-sans">{`Bab ${bab.nomor}`}</span>
                    <h3 className="font-extrabold text-slate-800 dark:text-white text-base mt-2 mb-4 font-sans">{bab.nama}</h3>
                    <div className="border-t pt-3 space-y-1.5">
                      {subBabList.filter(s => Number(s.bab_id) === bab.id).map(sub => (
                        <button 
                          key={sub.id} 
                          onClick={() => {
                            setSelectedBab(bab);
                            setSelectedSubBab(sub);
                            setSelectedMateri(materiList.find(m => Number(m.sub_bab_id) === sub.id) || null);
                            setCurrentView('materi-baca');
                          }}
                          className="w-full text-left text-xs text-slate-650 dark:text-slate-400 hover:text-emerald-600 font-medium py-1 flex items-center justify-between font-sans"
                        >
                          <span>{sub.nama}</span>
                          <i className="fa-solid fa-chevron-right text-slate-400"></i>
                        </button>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {currentView === 'materi-baca' && selectedSubBab && (
            <div className="bg-white dark:bg-slate-950 p-6 sm:p-10 rounded-3xl border border-slate-150 dark:border-slate-855 shadow-sm max-w-4xl space-y-6">
              <div className="flex justify-between items-start border-b pb-4">
                <div>
                  <span className="text-[10px] bg-amber-100 text-amber-800 font-extrabold px-2.5 py-1 rounded-md uppercase font-sans">{selectedClass?.nama} ➔ {selectedBab?.nama.split(': ')[0]}</span>
                  <h2 className="text-2xl sm:text-3xl font-black text-slate-855 dark:text-white mt-3 font-sans">{selectedSubBab.nama}</h2>
                </div>
                {isLoggedIn && (
                  <div className="flex gap-1.5">
                    <button onClick={() => openMateriForm('edit', selectedMateri)} className="p-2 text-amber-600 hover:bg-amber-50 rounded-xl">
                      <i className="fa-solid fa-pen-to-square text-lg"></i>
                    </button>
                    {selectedMateri && (
                      <button onClick={() => handleDeleteMateri(selectedMateri.id)} className="p-2 text-rose-600 hover:bg-rose-50 rounded-xl">
                        <i className="fa-solid fa-trash text-lg"></i>
                      </button>
                    )}
                  </div>
                )}
              </div>
              
              {selectedMateri ? (
                <div className="space-y-4">
                  <p className="text-xs text-slate-400">Ditulis oleh: <strong>{selectedMateri.penulis}</strong> | Terakhir diupdate: {selectedMateri.diupdate_pada}</p>
                  
                  {selectedMateri.media?.gambar && (
                    <img src={selectedMateri.media.gambar} alt="Cover" className="w-full max-h-[350px] object-cover rounded-2xl shadow-sm mb-4" />
                  )}

                  <div className="prose dark:prose-invert max-w-none text-slate-700 dark:text-slate-300 leading-relaxed font-sans" dangerouslySetInnerHTML={{ __html: selectedMateri.konten }}></div>

                  {/* Lampiran Media */}
                  {(selectedMateri.media?.pdf_nama || selectedMateri.media?.youtube_url) && (
                    <div className="bg-emerald-50/30 dark:bg-slate-900/40 p-5 rounded-2xl border border-emerald-100/40 dark:border-emerald-900/30 space-y-3 font-sans">
                      <h4 className="font-bold text-xs text-emerald-800 dark:text-emerald-400 uppercase tracking-widest flex items-center gap-1.5">📚 Sumber Belajar Tambahan</h4>
                      {selectedMateri.media.pdf_nama && (
                        <div className="bg-white dark:bg-slate-950 p-4 rounded-xl border border-slate-100 dark:border-slate-800 flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <i className="fa-solid fa-file-pdf text-rose-600 text-lg"></i>
                            <span className="text-xs font-semibold">{selectedMateri.media.pdf_nama}</span>
                          </div>
                          <button onClick={() => showToast('Mengunduh berkas PDF...')} className="text-emerald-600 hover:underline text-xs font-bold">Unduh PDF</button>
                        </div>
                      )}
                      {selectedMateri.media.youtube_url && (
                        <div className="bg-white dark:bg-slate-950 p-4 rounded-xl border border-slate-100 dark:border-slate-800 space-y-2">
                          <div className="flex items-center gap-2">
                            <i className="fa-brands fa-youtube text-red-600 text-lg"></i>
                            <span className="text-xs font-semibold">Video Referensi Pembelajaran</span>
                          </div>
                          <a href={selectedMateri.media.youtube_url} target="_blank" rel="noopener noreferrer" className="text-xs text-blue-500 hover:underline block">{selectedMateri.media.youtube_url}</a>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              ) : (
                <div className="text-center py-12 border border-dashed rounded-2xl">
                  <p className="text-sm text-slate-400 italic mb-4 font-sans font-sans">Materi belum diisi oleh guru pengampu.</p>
                  {isLoggedIn && (
                    <button onClick={() => openMateriForm('add')} className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs px-4 py-2 rounded-xl transition-all font-sans">Isi Materi</button>
                  )}
                </div>
              )}
            </div>
          )}

          {/* ========================================================
              VIEW 5: ADMIN DASHBOARD (DENGAN TIGA TAB KELOLA)
              ======================================================== */}
          {currentView === 'admin-dashboard' && isLoggedIn && (
            <div className="space-y-6 animate-fadeIn font-sans font-sans">
              <div className="flex justify-between items-center border-b pb-4">
                <div>
                  <h2 className="text-2xl font-black text-slate-855 dark:text-white font-sans">Dashboard Pengelolaan Kurikulum Merdeka (KBC)</h2>
                  <p className="text-xs text-slate-500 font-sans font-sans">Ubah materi, bab, dan sub-bab secara instan ke database cPanel.</p>
                </div>
                <div className="flex gap-2">
                  <button onClick={handleBackup} className="bg-amber-50 hover:bg-amber-600 text-white font-bold text-xs px-4 py-2.5 rounded-xl transition-all font-sans">Backup Data</button>
                  <label className="bg-indigo-600 hover:bg-indigo-750 text-white font-bold text-xs px-4 py-2.5 rounded-xl cursor-pointer font-sans">
                    Import JSON
                    <input type="file" accept=".json" onChange={handleImport} className="hidden" />
                  </label>
                </div>
              </div>

              {/* Tabs */}
              <div className="flex border-b">
                <button onClick={() => setAdminActiveTab('materi')} className={`py-2 px-4 text-xs font-bold ${adminActiveTab === 'materi' ? 'border-b-2 border-emerald-600 text-emerald-600' : 'text-slate-400'}`}>Kelola Materi</button>
                <button onClick={() => setAdminActiveTab('bab')} className={`py-2 px-4 text-xs font-bold ${adminActiveTab === 'bab' ? 'border-b-2 border-emerald-600 text-emerald-600' : 'text-slate-400'}`}>Kelola Struktur Bab</button>
                <button onClick={() => setAdminActiveTab('sub_bab')} className={`py-2 px-4 text-xs font-bold ${adminActiveTab === 'sub_bab' ? 'border-b-2 border-emerald-600 text-emerald-600' : 'text-slate-400'}`}>Kelola Struktur Sub-Bab</button>
              </div>

              {/* TAB CONTENT: KELOLA MATERI */}
              {adminActiveTab === 'materi' && (
                <div className="bg-white dark:bg-slate-950 p-6 rounded-2xl border shadow-sm space-y-4">
                  <div className="flex justify-between items-center">
                    <h3 className="font-bold text-sm text-slate-800 dark:text-white uppercase font-sans">Daftar Modul Terbit</h3>
                    <button onClick={() => openMateriForm('add')} className="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold px-3 py-1.5 rounded-lg flex items-center gap-1 font-sans font-sans"><i className="fa-solid fa-plus"></i> Tambah Materi</button>
                  </div>
                  <div className="divide-y">
                    {materiList.map(m => (
                      <div key={m.id} className="py-3 flex justify-between items-center text-xs font-sans font-sans">
                        <div>
                          <h4 className="font-bold text-slate-800 dark:text-white">{m.judul}</h4>
                          <p className="text-[10px] text-slate-400 font-sans font-sans">Penulis: {m.penulis}</p>
                        </div>
                        <div className="flex gap-2">
                          <button onClick={() => navigateToMateri(m.sub_bab_id)} className="text-emerald-600 font-semibold hover:underline">Lihat</button>
                          <button onClick={() => openMateriForm('edit', m)} className="text-amber-600 font-semibold hover:underline">Ubah</button>
                          <button onClick={() => handleDeleteMateri(m.id)} className="text-rose-600 font-semibold hover:underline">Hapus</button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* TAB CONTENT: KELOLA BAB */}
              {adminActiveTab === 'bab' && (
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 font-sans font-sans">
                  <div className="bg-white dark:bg-slate-950 p-5 rounded-2xl border shadow-sm animate-fadeIn">
                    <h3 className="font-bold text-xs uppercase mb-3 font-sans">{editingBabId ? 'Ubah Bab' : 'Tambah Bab'}</h3>
                    <form onSubmit={handleSaveBab} className="space-y-3 font-sans">
                      <div>
                        <label className="text-[10px] text-slate-400 block mb-1">Kelas</label>
                        <select value={selectedAdminClassId} onChange={e => setSelectedAdminClassId(e.target.value)} className="w-full p-2 border rounded-xl text-xs bg-transparent font-sans">
                          {classes.map(c => <option key={c.id} value={c.id}>{c.nama}</option>)}
                        </select>
                      </div>
                      <div>
                        <label className="text-[10px] text-slate-400 block mb-1">Nomor Bab</label>
                        <input type="number" value={editingBabNomor} onChange={e => setEditingBabNomor(e.target.value)} className="w-full p-2 border rounded-xl text-xs bg-transparent" required />
                      </div>
                      <div>
                        <label className="text-[10px] text-slate-400 block mb-1 font-sans">Judul Bab</label>
                        <input type="text" placeholder="Masukkan judul bab" value={editingBabName} onChange={e => setEditingBabName(e.target.value)} className="w-full p-2 border rounded-xl text-xs bg-transparent" required />
                      </div>
                      <button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 rounded-xl text-xs font-sans font-sans">Simpan Bab</button>
                    </form>
                  </div>
                  <div className="md:col-span-2 bg-white dark:bg-slate-955 p-5 rounded-2xl border shadow-sm space-y-3 animate-fadeIn font-sans font-sans">
                    <h3 className="font-bold text-xs uppercase">Daftar Bab Kelas Terpilih</h3>
                    <div className="divide-y max-h-96 overflow-y-auto pr-1">
                      {babList.filter(b => Number(b.kelas_id) === Number(selectedAdminClassId)).map(b => (
                        <div key={b.id} className="py-2.5 flex justify-between items-center text-xs">
                          <span className="font-semibold text-slate-800 dark:text-white">{b.nama}</span>
                          <div className="flex gap-2 font-sans">
                            <button onClick={() => { setEditingBabId(b.id); setEditingBabNomor(b.nomor); setEditingBabName(b.nama); }} className="text-amber-500 hover:underline">Edit</button>
                            <button onClick={() => handleDeleteBab(b.id)} className="text-rose-500 hover:underline font-sans font-sans">Hapus</button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}

              {/* TAB CONTENT: KELOLA SUB-BAB */}
              {adminActiveTab === 'sub_bab' && (
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 font-sans font-sans font-sans">
                  <div className="bg-white dark:bg-slate-950 p-5 rounded-2xl border shadow-sm animate-fadeIn font-sans">
                    <h3 className="font-bold text-xs uppercase mb-3 font-sans">{editingSubBabId ? 'Ubah Sub-Bab' : 'Tambah Sub-Bab'}</h3>
                    <form onSubmit={handleSaveSubBab} className="space-y-3 font-sans">
                      <div>
                        <label className="text-[10px] text-slate-400 block mb-1 font-sans font-sans">Pilih Bab Induk</label>
                        <select value={selectedAdminBabId} onChange={e => setSelectedAdminBabId(e.target.value)} className="w-full p-2 border rounded-xl text-xs bg-transparent">
                          {babList.map(b => <option key={b.id} value={b.id}>{b.nama}</option>)}
                        </select>
                      </div>
                      <div>
                        <label className="text-[10px] text-slate-400 block mb-1 font-sans">Nomor Sub-Bab</label>
                        <input type="number" value={editingSubBabNomor} onChange={e => setEditingSubBabNomor(e.target.value)} className="w-full p-2 border rounded-xl text-xs bg-transparent" required />
                      </div>
                      <div>
                        <label className="text-[10px] text-slate-400 block mb-1 font-sans font-sans font-sans font-sans">Judul Sub-Bab</label>
                        <input type="text" placeholder="Masukkan judul" value={editingSubBabName} onChange={e => setEditingSubBabName(e.target.value)} className="w-full p-2 border rounded-xl text-xs bg-transparent" required />
                      </div>
                      <button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 rounded-xl text-xs font-sans">Simpan Sub-Bab</button>
                    </form>
                  </div>
                  <div className="md:col-span-2 bg-white dark:bg-slate-950 p-5 rounded-2xl border shadow-sm space-y-3 animate-fadeIn font-sans font-sans">
                    <h3 className="font-bold text-xs uppercase font-sans">Daftar Sub-Bab</h3>
                    <div className="divide-y max-h-96 overflow-y-auto pr-1">
                      {subBabList.filter(s => Number(s.bab_id) === Number(selectedAdminBabId)).map(s => (
                        <div key={s.id} className="py-2.5 flex justify-between items-center text-xs">
                          <span className="font-semibold text-slate-800 dark:text-white">{s.nama}</span>
                          <div className="flex gap-2">
                            <button onClick={() => { setEditingSubBabId(s.id); setEditingSubBabNomor(s.nomor); setEditingSubBabName(s.nama); }} className="text-amber-500 hover:underline">Edit</button>
                            <button onClick={() => handleDeleteSubBab(s.id)} className="text-rose-500 hover:underline font-sans">Hapus</button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* ========================================================
              VIEW 6: EDITOR FORM (TAMBAH & EDIT MATERI)
              ======================================================== */}
          {currentView === 'admin-materi-form' && isLoggedIn && (
            <div className="bg-white dark:bg-slate-950 p-6 sm:p-10 rounded-3xl border shadow-sm max-w-4xl space-y-6 animate-fadeIn font-sans">
              <div className="flex justify-between items-center border-b pb-4">
                <h2 className="text-2xl font-black text-slate-855 dark:text-white font-sans">{formMode === 'add' ? 'Tambah Modul Materi Baru' : 'Ubah Modul Materi'}</h2>
                <button onClick={() => setCurrentView('admin-dashboard')} className="text-xs text-rose-500 font-bold bg-rose-50 px-3 py-1.5 rounded-lg">Kembali</button>
              </div>

              <form onSubmit={handleSaveMateri} className="space-y-4 font-sans text-xs">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="font-bold text-slate-500 block mb-1">Judul Materi *</label>
                    <input type="text" value={materiForm.judul} onChange={e => setMateriForm({...materiForm, judul: e.target.value})} className="w-full p-2.5 border rounded-xl text-xs bg-transparent" required />
                  </div>
                  <div>
                    <label className="font-bold text-slate-500 block mb-1 font-sans font-sans">Nama Guru / Penulis *</label>
                    <input type="text" value={materiForm.penulis} onChange={e => setMateriForm({...materiForm, penulis: e.target.value})} className="w-full p-2.5 border rounded-xl text-xs bg-transparent" required />
                  </div>
                </div>

                <div>
                  <label className="font-bold text-slate-500 block mb-1 font-sans">Konten Utama (HTML Diperbolehkan) *</label>
                  <textarea rows="8" value={materiForm.konten} onChange={e => setMateriForm({...materiForm, konten: e.target.value})} className="w-full p-2.5 border rounded-xl font-mono text-xs bg-transparent" required />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 border-t pt-4">
                  <div>
                    <label className="font-bold text-slate-500 block mb-1">URL Gambar Utama</label>
                    <input type="text" value={materiForm.gambar} onChange={e => setMateriForm({...materiForm, gambar: e.target.value})} className="w-full p-2.5 border rounded-xl text-xs bg-transparent" />
                  </div>
                  <div>
                    <label className="font-bold text-slate-500 block mb-1 font-sans">Nama Berkas PDF Lampiran</label>
                    <input type="text" value={materiForm.pdf_nama} onChange={e => setMateriForm({...materiForm, pdf_nama: e.target.value})} className="w-full p-2.5 border rounded-xl text-xs bg-transparent" />
                  </div>
                  <div className="md:col-span-2">
                    <label className="font-bold text-slate-500 block mb-1">Tautan Video YouTube</label>
                    <input type="text" value={materiForm.youtube_url} onChange={e => setMateriForm({...materiForm, youtube_url: e.target.value})} className="w-full p-2.5 border rounded-xl text-xs bg-transparent" />
                  </div>
                </div>

                <button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 rounded-xl text-xs uppercase tracking-wider">Simpan & Publikasikan</button>
              </form>
            </div>
          )}
        </main>
      </div>

      {/* ==========================================
          MODAL LOGIN GURU / ADMIN
          ========================================== */}
      {showLoginModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/70 backdrop-blur-sm animate-fadeIn">
          <div className="bg-white dark:bg-slate-900 w-full max-w-sm rounded-3xl overflow-hidden border border-slate-100 dark:border-slate-800 shadow-2xl p-6 relative">
            
            <button 
              onClick={() => { setShowLoginModal(false); setLoginError(''); }}
              className="absolute right-4 top-4 p-1.5 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-400 hover:text-slate-655 transition-colors"
            >
              <i className="fa-solid fa-xmark text-lg"></i>
            </button>

            <div className="p-6 bg-gradient-to-tr from-emerald-800 to-emerald-600 text-white text-center font-sans">
              <div className="w-12 h-12 bg-white/10 rounded-2xl flex items-center justify-center mx-auto mb-3 text-2xl">
                🕌
              </div>
              <h3 className="font-bold text-lg">Login Pendidik (Guru)</h3>
              <p className="text-[10px] text-emerald-150 tracking-wider uppercase font-semibold">Kurikulum KBC MI</p>
            </div>

            <form onSubmit={handleLogin} className="p-6 space-y-4 font-sans text-xs">
              
              {loginError && (
                <div className="p-3 bg-rose-50 dark:bg-rose-950/30 text-rose-600 dark:text-rose-455 rounded-xl text-xs flex items-start gap-1.5 border border-rose-100 dark:border-rose-900">
                  <i className="fa-solid fa-circle-exclamation text-rose-600 mt-0.5"></i>
                  <span>{loginError}</span>
                </div>
              )}

              <div className="space-y-1">
                <label className="text-xs font-bold text-slate-600 dark:text-slate-455 uppercase">Username Admin *</label>
                <input 
                  type="text" 
                  placeholder="Ketik: admin" 
                  value={loginForm.username}
                  onChange={(e) => setLoginForm(prev => ({ ...prev, username: e.target.value }))}
                  className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-2.5 text-xs focus:ring-1 focus:ring-emerald-500 focus:outline-none bg-transparent"
                  required
                />
              </div>

              <div className="space-y-1">
                <label className="text-xs font-bold text-slate-600 dark:text-slate-455 uppercase">Password *</label>
                <input 
                  type="password" 
                  placeholder="Ketik: akidahmi123" 
                  value={loginForm.password}
                  onChange={(e) => setLoginForm(prev => ({ ...prev, password: e.target.value }))}
                  className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-2.5 text-xs focus:ring-1 focus:ring-emerald-500 focus:outline-none bg-transparent"
                  required
                />
              </div>

              <div className="pt-2">
                <button
                  type="submit"
                  className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 rounded-xl text-xs uppercase tracking-wider font-bold"
                >
                  Masuk Ke Dashboard
                </button>
              </div>
            </form>

          </div>
        </div>
      )}

      {/* FOOTER */}
      <footer className="border-t border-emerald-100 dark:border-slate-855 bg-white dark:bg-slate-950 py-6 mt-auto">
        <div className="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs text-slate-400 font-sans">
          <div className="flex items-center gap-2">
            <span className="font-extrabold text-emerald-800 dark:text-emerald-400 font-sans">Portal Akidah Akhlak MI</span>
            <span className="font-sans">&copy; 2026. Hak Cipta Dilindungi.</span>
          </div>
          <div className="flex items-center gap-4">
            <span className="text-[10px] bg-slate-100 dark:bg-slate-900 px-2 py-0.5 rounded text-slate-500 font-sans">Versi 2.0.0 (IKM-KBC-React-MySQL)</span>
            <span className="text-emerald-700 dark:text-emerald-400 font-semibold cursor-pointer font-sans" onClick={() => setCurrentView('home')}>Beranda</span>
          </div>
        </div>
      </footer>

    </div>
  );
}

// Inisialisasi render ReactDOM murni di akhir berkas
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);