import React, { useState, useEffect } from 'react';
import { Download, Plus, Trash2, Send, FileSpreadsheet, ClipboardCheck, BrainCircuit, User, School, GraduationCap, Gauge, BookOpen, Image as ImageIcon, Sparkles, LayoutList, CheckSquare, AlignJustify, ToggleLeft, FileText, Bookmark, Printer, FileText as FileTextIcon, Bot, Target, AlertTriangle, ThumbsUp, Edit2, LayoutGrid, ListOrdered } from 'lucide-react';

// --- HELPER UNTUK FETCH API DENGAN EXPONENTIAL BACKOFF ---
const fetchWithRetry = async (url, options, retries = 5) => {
  let delay = 1000;
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url, options);
      if (response.ok) {
        return response;
      }
      
      // Jika ini adalah percobaan terakhir, lempar error sesuai status HTTP
      if (i === retries - 1) {
        if (response.status === 401 || response.status === 403) {
           throw new Error(`Autentikasi API ditolak (Status: ${response.status}). Pastikan API Key Anda dikonfigurasi dengan benar.`);
        }
        throw new Error(`Server AI sibuk atau menolak permintaan (Status: ${response.status}).`);
      }
    } catch (error) {
      if (i === retries - 1) throw error;
    }
    
    // Tunggu dengan jeda yang meningkat eksponensial (1s, 2s, 4s, 8s, 16s)
    await new Promise(res => setTimeout(res, delay));
    delay *= 2;
  }
};

// --- HELPER UNTUK MERENDER GAMBAR & TEKS ARAB (RTL) ---
const renderText = (text) => {
  if (!text || typeof text !== 'string') return text;
  
  // Pisahkan string berdasarkan tag [GAMBAR:...] dan [ARABIC]...[/ARABIC]
  const parts = text.split(/(\[GAMBAR:.*?\]|\[ARABIC\][\s\S]*?\[\/ARABIC\])/g);
  
  return parts.map((part, index) => {
    if (part.startsWith('[GAMBAR:')) {
       return (
         <div key={index} className="bg-yellow-50 border-2 border-dashed border-yellow-400 rounded-lg p-4 text-center text-yellow-800 my-3 shadow-sm block w-full">
            <ImageIcon className="inline-block w-8 h-8 mb-2 opacity-50"/>
            <p className="font-bold font-mono text-sm">{part}</p>
            <p className="text-xs mt-1 text-yellow-700">(Ganti kotak ini dengan gambar yang sesuai di MS Word)</p>
         </div>
       );
    } else if (part.startsWith('[ARABIC]')) {
       const arabicText = part.replace('[ARABIC]', '').replace('[/ARABIC]', '');
       return (
         <div key={index} dir="rtl" className="text-right text-[22pt] leading-loose my-4 text-slate-900 block" style={{ fontFamily: "'Traditional Arabic', 'Amiri', 'Scheherazade New', serif" }}>
           {arabicText}
         </div>
       );
    } else {
       // Render teks biasa, dukung enter (\n)
       return <span key={index}>{part.split('\n').map((line, i) => <React.Fragment key={i}>{line}{i !== part.split('\n').length - 1 && <br/>}</React.Fragment>)}</span>;
    }
  });
};

// --- HELPER FORMAT EXPORT WORD & PDF ---
const processExportText = (t) => {
  if (!t) return '';
  let str = String(t).replace(/\n/g, '<br/>');
  str = str.replace(/\[GAMBAR:(.*?)\]/g, '<div style="border: 1px solid #000; padding: 20px; text-align: center; margin-bottom: 10px; height: 100px;"><i>[Tempat Gambar: $1]</i></div>');
  str = str.replace(/\[ARABIC\]([\s\S]*?)\[\/ARABIC\]/g, '<div dir="rtl" style="font-family: \'Traditional Arabic\', \'Amiri\', serif; font-size: 22pt; text-align: right; direction: rtl; margin: 15px 0; line-height: 2;">$1</div>');
  return str;
};

// --- HELPER FORMAT KUNCI JAWABAN (ARRAY/OBJECT KE TEKS) ---
const formatKunciJawaban = (kunci, separator = ', ') => {
  if (kunci === null || kunci === undefined) return '-';
  if (typeof kunci === 'string' || typeof kunci === 'number') return String(kunci);
  
  // Jika AI merespons Kunci berupa Array (cth: soal Benar-Salah)
  if (Array.isArray(kunci)) {
    return kunci.map((item, index) => {
      if (typeof item === 'object') return `${index + 1}. ${item.jawaban || item.kunci || JSON.stringify(item)}`;
      return `${index + 1}. ${item}`;
    }).join(separator);
  }
  
  // Jika AI merespons Kunci berupa Object (cth: Menjodohkan / Kategori)
  if (typeof kunci === 'object') {
    return Object.entries(kunci).map(([k, v]) => `${k}: ${v}`).join(separator);
  }
  
  return String(kunci);
};

// --- KOMPONEN RENDER SOAL (WEB PREVIEW) ---
const RenderSoal = ({ soal }) => {
  if (!soal || typeof soal !== 'object') return null;

  try {
    switch (soal.bentuk) {
      case 'Pilihan Ganda': 
      case 'PG':
        return (
          <div className="w-full text-left">
            {soal.stimulus_content && <div className="p-4 bg-white border border-slate-300 rounded text-justify leading-relaxed text-slate-700 mb-3 shadow-sm font-serif">{renderText(soal.stimulus_content)}</div>}
            <div className="font-medium mb-3 text-justify leading-relaxed block">{renderText(soal.pertanyaan)}</div>
            <div className="grid grid-cols-1 gap-2 pl-2">
              {soal.opsi && typeof soal.opsi === 'object' && !Array.isArray(soal.opsi) ? (
                Object.entries(soal.opsi).map(([key, value]) => (
                  <div key={key} className="flex gap-3 items-start">
                    <span className="font-bold text-sm min-w-[20px]">{key}.</span> 
                    <span className="text-sm leading-relaxed block w-full">{renderText(String(value))}</span>
                  </div>
                ))
              ) : (
                 <p className="text-xs text-red-400">Error: Format opsi PG harus object (A: ..., B: ...)</p>
              )}
            </div>
          </div>
        );

      case 'PG Kompleks': 
      case 'Pilihan Ganda Kompleks':
        const opsiPGK = Array.isArray(soal.opsi) ? soal.opsi : (typeof soal.opsi === 'object' && soal.opsi !== null ? Object.values(soal.opsi) : []);
        return (
          <div className="w-full text-left">
            {soal.stimulus_content && <div className="p-4 bg-white border border-slate-300 rounded text-justify leading-relaxed text-slate-700 mb-3 shadow-sm font-serif">{renderText(soal.stimulus_content)}</div>}
            <div className="font-medium mb-3 text-justify leading-relaxed block">{renderText(soal.pertanyaan)}</div>
            <div className="grid grid-cols-1 gap-3 pl-1">
              {opsiPGK.length > 0 ? (
                opsiPGK.map((opsi, idx) => (
                  <div key={idx} className="flex gap-3 items-start">
                    <div className="w-4 h-4 border-2 border-slate-600 rounded-sm flex-shrink-0 mt-0.5 bg-white"></div>
                    <span className="text-sm leading-relaxed block w-full">{renderText(typeof opsi === 'object' ? opsi.teks : opsi)}</span>
                  </div>
                ))
              ) : (
                <p className="text-xs text-red-400">Error: Format opsi PG Kompleks tidak valid</p>
              )}
            </div>
          </div>
        );

      case 'Menjodohkan':
        return (
          <div className="w-full text-left">
            {soal.stimulus_content && <div className="p-4 bg-white border border-slate-300 rounded text-justify leading-relaxed text-slate-700 mb-3 shadow-sm font-serif">{renderText(soal.stimulus_content)}</div>}
            <div className="font-medium mb-4 text-justify leading-relaxed block">{renderText(soal.pertanyaan)}</div>
            
            <div className="grid grid-cols-2 gap-8 border p-6 rounded bg-slate-50 relative">
              {/* Kolom Kiri */}
              <div>
                <strong className="text-xs uppercase text-slate-500 block mb-3 text-center border-b pb-2">Lajur Kiri</strong>
                <ul className="list-none space-y-6">
                  {Array.isArray(soal.premis_kiri) && soal.premis_kiri.map((item, i) => (
                    <li key={i} className="relative text-sm pr-4 flex justify-between items-center h-full">
                      <div className="flex gap-2 items-center w-full">
                        <span className="font-bold min-w-[20px]">{String.fromCharCode(65 + i)}.</span>
                        <span className="leading-relaxed block w-full">{renderText(String(item))}</span>
                      </div>
                      <span className="absolute -right-5 w-2 h-2 bg-slate-400 rounded-full"></span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Kolom Kanan */}
              <div>
                <strong className="text-xs uppercase text-slate-500 block mb-3 text-center border-b pb-2">Lajur Kanan</strong>
                <ul className="list-none space-y-6">
                  {Array.isArray(soal.respon_kanan) && soal.respon_kanan.map((item, i) => (
                    <li key={i} className="relative text-sm pl-4 flex justify-between items-center h-full">
                      <span className="absolute -left-5 w-2 h-2 bg-slate-400 rounded-full"></span>
                      <div className="flex gap-2 items-center w-full">
                         <span className="font-bold min-w-[20px]">{i + 1}.</span>
                         <span className="leading-relaxed block w-full">{renderText(String(item))}</span>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        );

      case 'Benar Salah':
        return (
          <div className="w-full text-left">
            {soal.stimulus_content && <div className="p-4 bg-white border border-slate-300 rounded text-justify leading-relaxed text-slate-700 mb-3 shadow-sm font-serif">{renderText(soal.stimulus_content)}</div>}
            <div className="font-medium mb-3 text-justify leading-relaxed block">{renderText(soal.pertanyaan)}</div>
            <table className="w-full border-collapse border border-slate-400 text-sm mt-2 shadow-sm">
              <thead className="bg-slate-100 text-slate-800">
                <tr>
                  <th className="p-3 text-center border border-slate-400 w-12">No</th>
                  <th className="p-3 text-left border border-slate-400">Pernyataan</th>
                  <th className="p-3 w-20 text-center border border-slate-400">Benar</th>
                  <th className="p-3 w-20 text-center border border-slate-400">Salah</th>
                </tr>
              </thead>
              <tbody>
                {Array.isArray(soal.pernyataan) && soal.pernyataan.map((item, idx) => (
                  <tr key={idx} className="bg-white">
                    <td className="p-3 border border-slate-400 text-center font-bold">{idx + 1}</td>
                    <td className="p-3 border border-slate-400 leading-relaxed">{renderText(typeof item === 'object' ? item.teks : item)}</td>
                    <td className="p-3 border border-slate-400 text-center"><div className="w-5 h-5 border-2 border-slate-400 rounded-sm mx-auto"></div></td>
                    <td className="p-3 border border-slate-400 text-center"><div className="w-5 h-5 border-2 border-slate-400 rounded-sm mx-auto"></div></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        );

      case 'Setuju-Tidak Setuju':
        return (
          <div className="w-full text-left">
            {soal.stimulus_content && <div className="p-4 bg-white border border-slate-300 rounded text-justify leading-relaxed text-slate-700 mb-3 shadow-sm font-serif">{renderText(soal.stimulus_content)}</div>}
            <div className="font-medium mb-3 text-justify leading-relaxed block">{renderText(soal.pertanyaan)}</div>
            <table className="w-full border-collapse border border-slate-400 text-sm mt-2 shadow-sm">
              <thead className="bg-slate-100 text-slate-800">
                <tr>
                  <th className="p-3 text-center border border-slate-400 w-12">No</th>
                  <th className="p-3 text-left border border-slate-400">Pernyataan</th>
                  <th className="p-3 w-24 text-center border border-slate-400">Setuju</th>
                  <th className="p-3 w-28 text-center border border-slate-400">Tidak Setuju</th>
                </tr>
              </thead>
              <tbody>
                {Array.isArray(soal.pernyataan) && soal.pernyataan.map((item, idx) => (
                  <tr key={idx} className="bg-white">
                    <td className="p-3 border border-slate-400 text-center font-bold">{idx + 1}</td>
                    <td className="p-3 border border-slate-400 leading-relaxed">{renderText(typeof item === 'object' ? item.teks : item)}</td>
                    <td className="p-3 border border-slate-400 text-center"><div className="w-5 h-5 border-2 border-slate-400 rounded-sm mx-auto"></div></td>
                    <td className="p-3 border border-slate-400 text-center"><div className="w-5 h-5 border-2 border-slate-400 rounded-sm mx-auto"></div></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        );

      case 'Jawaban Singkat':
        return (
          <div className="w-full text-left">
            {soal.stimulus_content && <div className="p-4 bg-white border border-slate-300 rounded text-justify leading-relaxed text-slate-700 mb-3 shadow-sm font-serif">{renderText(soal.stimulus_content)}</div>}
            <div className="font-medium mb-3 text-justify leading-relaxed block">{renderText(soal.pertanyaan)}</div>
            <div className="mt-4 border-b-2 border-dotted border-slate-400 w-2/3 h-6"></div>
          </div>
        );

      case 'Isian Singkat':
        return (
          <div className="w-full text-left">
             {soal.stimulus_content && <div className="p-4 bg-white border border-slate-300 rounded text-justify leading-relaxed text-slate-700 mb-3 shadow-sm font-serif">{renderText(soal.stimulus_content)}</div>}
            <div className="font-medium mb-3 text-justify leading-relaxed block">{renderText(soal.pertanyaan)}</div>
            <div className="mt-2 border-b-2 border-slate-600 w-40 h-6 flex items-end">
              <span className="text-[10px] text-slate-400 ml-1 mb-1 font-mono">(1 kata)</span>
            </div>
          </div>
        );

      case 'Uraian/ Essay':
        return (
          <div className="w-full text-left">
            {soal.stimulus_content && <div className="p-4 bg-white border border-slate-300 rounded text-justify leading-relaxed text-slate-700 mb-3 shadow-sm font-serif">{renderText(soal.stimulus_content)}</div>}
            <div className="font-medium mb-3 text-justify leading-relaxed block">{renderText(soal.pertanyaan)}</div>
            <div className="mt-4 border border-slate-300 bg-white rounded w-full h-32"></div>
          </div>
        );

      case 'Mengkategorikan':
        return (
          <div className="w-full text-left">
            {soal.stimulus_content && <div className="p-4 bg-white border border-slate-300 rounded text-justify leading-relaxed text-slate-700 mb-3 shadow-sm font-serif">{renderText(soal.stimulus_content)}</div>}
            <div className="font-medium mb-3 text-justify leading-relaxed block">{renderText(soal.pertanyaan)}</div>
            {soal.kategori && soal.item_kategori ? (
              <table className="w-full border border-slate-300 text-sm mt-2">
                <thead className="bg-slate-100 text-slate-700">
                  <tr>
                    <th className="p-3 text-left border border-slate-300">Item / Pernyataan</th>
                    {soal.kategori.map((kat, kIdx) => (
                      <th key={kIdx} className="p-3 text-center border border-slate-300">{kat}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {soal.item_kategori.map((item, idx) => (
                    <tr key={idx}>
                      <td className="p-3 border border-slate-300 leading-relaxed">{renderText(item)}</td>
                      {soal.kategori.map((_, kIdx) => (
                        <td key={kIdx} className="border border-slate-300 text-center text-slate-300">✔</td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            ) : <p className="text-xs text-red-400">Error: Format kategori tidak sesuai.</p>}
          </div>
        );

      case 'Mengurutkan/ Menyusun':
        return (
          <div className="w-full text-left">
             {soal.stimulus_content && <div className="p-4 bg-white border border-slate-300 rounded text-justify leading-relaxed text-slate-700 mb-3 shadow-sm font-serif">{renderText(soal.stimulus_content)}</div>}
            <div className="font-medium mb-3 text-justify leading-relaxed block">{renderText(soal.pertanyaan)}</div>
            <div className="pl-4">
              {Array.isArray(soal.item_acak) && soal.item_acak.map((item, idx) => (
                <div key={idx} className="flex gap-4 items-center mt-3">
                  <div className="w-10 h-8 border border-slate-400 rounded flex items-center justify-center bg-white text-slate-400 text-xs">( ... )</div>
                  <span className="text-sm leading-relaxed block w-full">{renderText(item)}</span>
                </div>
              ))}
            </div>
          </div>
        );

      default:
        return <div className="text-red-500 p-2 border border-red-200 bg-red-50 rounded">Format soal {soal.bentuk} tidak dikenali</div>;
    }
  } catch (err) {
    return <div className="text-red-500 text-xs">Gagal merender soal ini. Data tidak valid.</div>;
  }
};

const App = () => {
  const [loading, setLoading] = useState(false);
  const [loadingProgress, setLoadingProgress] = useState('');
  const [loadingMateri, setLoadingMateri] = useState(false); 
  const [loadingTP, setLoadingTP] = useState(false);
  const [config, setConfig] = useState({
    sekolah: 'SMP Negeri 3 Cikarang Timur',
    tingkatSekolah: 'SMP', 
    mapel: 'Pendidikan Agama Islam dan Budi Pekerti',
    tp: '',
    bab: '',
    subBab: '',
    materiLengkap: '', 
    namaGuru: 'Asep Saefullah',
    kelas: 'Kelas 9 (Fase D)',
    kurikulum: 'Kurikulum Merdeka',
    jumlahPerBentuk: { 'Pilihan Ganda': 10 }, 
    levelKognitif: { L1: 3, L2: 4, L3: 3 },
    jumlahGambar: 0,
  });

  const [generatedData, setGeneratedData] = useState(null);
  const [activeTab, setActiveTab] = useState('input');
  const [errorMsg, setErrorMsg] = useState('');

  const apiKey = ""; 

  // --- SETUP AWAL & PROTEKSI COPY/KLIK KANAN ---
  useEffect(() => {
    // 1. Injeksi Tailwind CSS CDN agar tampilan tetap rapi saat di-deploy ke Netlify/Vercel
    if (!document.getElementById('tailwind-cdn-script')) {
      const script = document.createElement('script');
      script.id = 'tailwind-cdn-script';
      script.src = 'https://cdn.tailwindcss.com';
      document.head.appendChild(script);
    }

    // 2. Mencegah aksi klik kanan dan copy-paste
    const preventAction = (e) => {
      // Izinkan aksi pada input dan textarea agar form tetap bisa digunakan untuk mengetik & menempel teks
      const isInput = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA';
      if (!isInput) {
        e.preventDefault();
      }
    };

    // Mencegah klik kanan (Context Menu)
    document.addEventListener('contextmenu', preventAction);
    // Mencegah Copy dan Cut dari keyboard
    document.addEventListener('copy', preventAction);
    document.addEventListener('cut', preventAction);
    // Mencegah drag/tarik elemen (teks/gambar)
    document.addEventListener('dragstart', preventAction);

    return () => {
      document.removeEventListener('contextmenu', preventAction);
      document.removeEventListener('copy', preventAction);
      document.removeEventListener('cut', preventAction);
      document.removeEventListener('dragstart', preventAction);
    };
  }, []);

  const getKelasOptions = (tingkat) => {
    switch (tingkat) {
      case 'SD': return ["Kelas 1 (Fase A)", "Kelas 2 (Fase A)", "Kelas 3 (Fase B)", "Kelas 4 (Fase B)", "Kelas 5 (Fase C)", "Kelas 6 (Fase C)"];
      case 'SMP': return ["Kelas 7 (Fase D)", "Kelas 8 (Fase D)", "Kelas 9 (Fase D)"];
      case 'SMA':
      case 'SMK': return ["Kelas 10 (Fase E)", "Kelas 11 (Fase F)", "Kelas 12 (Fase F)"];
      default: return ["Pilih Jenjang Dulu"];
    }
  };

  const handleTingkatChange = (e) => {
    const newTingkat = e.target.value;
    const options = getKelasOptions(newTingkat);
    setConfig(prev => ({ ...prev, tingkatSekolah: newTingkat, kelas: options[0] }));
  };

  const totalSoal = Object.values(config.jumlahPerBentuk).reduce((acc, curr) => acc + (parseInt(curr) || 0), 0);
  const totalLevel = (parseInt(config.levelKognitif.L1) || 0) + (parseInt(config.levelKognitif.L2) || 0) + (parseInt(config.levelKognitif.L3) || 0);
  const isConfigValid = totalSoal > 0 && totalSoal <= 100 && totalSoal === totalLevel;

  const handleBentukChange = (type, value) => {
    const val = parseInt(value);
    setConfig(prev => {
      const newBentuk = { ...prev.jumlahPerBentuk };
      if (isNaN(val) || val <= 0) {
        delete newBentuk[type];
      } else {
        newBentuk[type] = val;
      }
      return { ...prev, jumlahPerBentuk: newBentuk };
    });
  };

  const generateTPOtomatis = async () => {
    if (!config.mapel || !config.bab) { alert("Mohon isi 'Mata Pelajaran' dan 'BAB' terlebih dahulu."); return; }
    setLoadingTP(true);
    const userQuery = `Rumuskan Tujuan Pembelajaran (TP) yang spesifik dan terukur dalam 1-2 kalimat pendek. Konteks: Jenjang ${config.tingkatSekolah}, Mapel ${config.mapel}, ${config.kelas}, BAB ${config.bab}, Topik ${config.subBab}. Materi Referensi (Wajib Relevan): """${config.materiLengkap || "Sesuai standar kurikulum"}""" Instruksi: Gunakan KKO sesuai taksonomi Bloom. TP HARUS mencerminkan materi referensi di atas. Hapus simbol markdown (*, #).`;
    try {
      const response = await fetchWithRetry(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: userQuery }] }] })
      });
      const data = await response.json();
      if (data.candidates?.[0]?.content?.parts?.[0]?.text) setConfig(prev => ({ ...prev, tp: data.candidates[0].content.parts[0].text.replace(/[*#]/g, '').trim() }));
    } catch (error) { console.error(error); alert("Gagal generate TP: " + error.message); } finally { setLoadingTP(false); }
  };

  const generateMateriOtomatis = async () => {
    if (!config.mapel || !config.bab) { alert("Mohon isi 'Mata Pelajaran' dan 'BAB' terlebih dahulu."); return; }
    setLoadingMateri(true);
    const userQuery = `Buatkan ringkasan materi pelajaran SANGAT PADAT (Max 150 kata). Identitas: ${config.tingkatSekolah}, ${config.mapel}, ${config.kelas}, BAB ${config.bab}, Sub ${config.subBab}. Instruksi: Paragraf narasi biasa. HAPUS semua markdown (*, #, -). Hapus enter berlebih.`;
    try {
      const response = await fetchWithRetry(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: userQuery }] }] })
      });
      const data = await response.json();
      if (data.candidates?.[0]?.content?.parts?.[0]?.text) setConfig(prev => ({ ...prev, materiLengkap: data.candidates[0].content.parts[0].text.replace(/[*#]/g, '').replace(/\n\s*\n/g, '\n').trim() }));
    } catch (error) { console.error(error); alert("Gagal generate materi: " + error.message); } finally { setLoadingMateri(false); }
  };

  const generateContent = async () => {
    setLoading(true);
    setErrorMsg('');
    setGeneratedData(null);
    setLoadingProgress('Mempersiapkan data...');

    // 1. CHUNKING LOGIC UNTUK MENGHINDARI OUTPUT LIMIT
    // Membagi jumlah soal menjadi potongan per 5 soal agar AI tidak memotong JSON
    const chunks = [];
    let currentChunk = {};
    let currentCount = 0;

    for (const [bentuk, jumlah] of Object.entries(config.jumlahPerBentuk)) {
      let remaining = parseInt(jumlah) || 0;
      while (remaining > 0) {
        // Mengurangi jumlah soal per request dari 10 menjadi 5 untuk mencegah pemotongan JSON
        const take = Math.min(remaining, 5 - currentCount);
        currentChunk[bentuk] = (currentChunk[bentuk] || 0) + take;
        currentCount += take;
        remaining -= take;

        if (currentCount >= 5) {
          chunks.push(currentChunk);
          currentChunk = {};
          currentCount = 0;
        }
      }
    }
    if (currentCount > 0) chunks.push(currentChunk);

    // 2. DISTRIBUSI LEVEL KOGNITIF & GAMBAR SECARA PROPORSIONAL PER CHUNK
    let remainingL1 = parseInt(config.levelKognitif.L1) || 0;
    let remainingL2 = parseInt(config.levelKognitif.L2) || 0;
    let remainingL3 = parseInt(config.levelKognitif.L3) || 0;
    let remainingGambar = parseInt(config.jumlahGambar) || 0;

    const chunkData = chunks.map(chunk => {
      const totalChunk = Object.values(chunk).reduce((a, b) => a + b, 0);
      let cL1 = 0, cL2 = 0, cL3 = 0, cGambar = 0;

      for (let i = 0; i < totalChunk; i++) {
        if (remainingL1 > 0) { cL1++; remainingL1--; }
        else if (remainingL2 > 0) { cL2++; remainingL2--; }
        else if (remainingL3 > 0) { cL3++; remainingL3--; }
      }

      const takeImg = Math.min(remainingGambar, totalChunk);
      cGambar = takeImg;
      remainingGambar -= takeImg;

      return { bentuk: chunk, total: totalChunk, L1: cL1, L2: cL2, L3: cL3, gambar: cGambar };
    });

    let allKisi = [];
    let allSoal = [];

    try {
      // PROSES SETIAP CHUNK SECARA BERURUTAN
      for (let i = 0; i < chunkData.length; i++) {
        const c = chunkData[i];
        setLoadingProgress(`Meracik Soal: Bagian ${i + 1} dari ${chunkData.length} ...`);

        const bentukString = Object.entries(c.bentuk).map(([k, v]) => `${v} soal ${k}`).join(', ');
        const cLevelString = `L1 (Pemahaman/C1-C2): ${c.L1} soal, L2 (Aplikasi/C3): ${c.L2} soal, L3 (Penalaran/HOTS/C4-C6): ${c.L3} soal`;

        const systemPrompt = `Anda adalah pakar evaluasi pendidikan jenjang ${config.tingkatSekolah}.
        Tugas: Susun Kisi-kisi & Soal yang valid.
        REFERENSI UTAMA: """${config.materiLengkap || "Gunakan pengetahuan umum kurikulum yang sesuai."}"""
        
        ATURAN KONTEN SANGAT PENTING:
        1. **STIMULUS LITERASI & NUMERASI (WAJIB)**: SETIAP soal TANPA TERKECUALI WAJIB memiliki 'stimulus_content'. Stimulus harus menuntut siswa untuk berliterasi (wacana/artikel/kasus) atau bernumerasi (tabel/angka/data).
        2. **Pertanyaan**: Harus terkait logis dengan stimulus yang diberikan.
        3. **Distribusi Level Kognitif**: Sesuaikan persis dengan target: ${cLevelString}.
        4. **Menjodohkan**: Gunakan format dua lajur. Lajur Kiri berisi premis, Lajur Kanan berisi pasangan.
        5. **Gambar**: Buat ${c.gambar} soal yang WAJIB memiliki stimulus berupa deskripsi gambar (Gunakan format: [GAMBAR: Deskripsi detil visual gambar...]).
        6. **Kunci Jawaban**: PG cukup huruf kunci. Menjodohkan pasangkan kode.
        7. **Format Tambahan Khusus**:
           - Setuju-Tidak Setuju / Benar Salah: Gunakan array "pernyataan".
           - Mengkategorikan: Gunakan array "kategori" dan "item_kategori".
           - Mengurutkan/ Menyusun: Gunakan array "item_acak". Kunci berisi urutan benar.
           - Isian Singkat: Kunci jawaban WAJIB HANYA 1 KATA.
        8. **Integrasi Ayat Al-Quran & Hadits**: Jika materi terkait Agama Islam/BTA, sertakan teks Arab diapit tag [ARABIC] dan [/ARABIC] (contoh: [ARABIC] بِسْمِ اللَّهِ [/ARABIC]).
        
        ATURAN JSON STRICT:
        1. WAJIB KEMBALIKAN JSON VALID. Jangan terpotong.
        2. Opsi Pilihan Ganda harus OBJECT dengan 4 opsi pasti {"A": "...", "B": "...", "C": "...", "D": "..."}.
        3. Opsi PG Kompleks harus ARRAY string ["...", "...", "...", "..."] (Bukan object).
        
        FORMAT JSON:
        {
          "kisi_kisi": [{ "tp": "...", "materi": "...", "level": "L3", "indikator": "...", "nomor": 1, "bentuk": "...", "kunci": "..." }],
          "soal": [{ "nomor": 1, "bentuk": "...", "pertanyaan": "...", "stimulus_content": "...", "opsi": {"A": "..."}, "kunci": "...", "premis_kiri": ["..."], "respon_kanan": ["..."], "pernyataan": ["..."] }]
        }`;

        const userQuery = `Buat instrumen penilaian ${config.tingkatSekolah} Mapel ${config.mapel} ${config.kelas}.
        BAB: ${config.bab}, Sub: ${config.subBab}. TP: ${config.tp}.
        Bentuk & Jumlah Soal: ${bentukString}. Total: ${c.total} soal.
        Total Bergambar: ${c.gambar} soal.
        Guru: ${config.namaGuru}, Sekolah: ${config.sekolah}.`;

        const response = await fetchWithRetry(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            contents: [{ parts: [{ text: userQuery }] }],
            systemInstruction: { parts: [{ text: systemPrompt }] },
            generationConfig: { 
              responseMimeType: "application/json",
              maxOutputTokens: 8192
            }
          })
        });

        const data = await response.json();
        if (!data.candidates || !data.candidates[0]) {
          throw new Error(`Gagal memuat bagian ${i + 1}. AI tidak merespons dengan format yang benar. Coba lagi.`);
        }
        
        const rawText = data.candidates[0].content.parts[0].text;
        
        // Bersihkan teks dari markdown
        let cleanText = rawText.replace(/```json/gi, '').replace(/```/g, '').trim();
        
        // Ekstrak JSON utuh
        const firstBrace = cleanText.indexOf('{');
        const lastBrace = cleanText.lastIndexOf('}');
        if (firstBrace !== -1 && lastBrace !== -1) {
          cleanText = cleanText.substring(firstBrace, lastBrace + 1);
        }
        
        let result;
        try { 
          result = JSON.parse(cleanText); 
        } catch (e) { 
          console.error("Parse JSON Error:", e.message, "\nRaw Text Length:", cleanText.length);
          throw new Error(`Terjadi pemotongan teks dari AI pada bagian ke-${i + 1}. Mohon kurangi detail materi yang terlalu panjang atau coba generate ulang.`); 
        }

        // NORMALISASI NAMA BENTUK SOAL DARI AI
        const normalisasiBentuk = (dataArray) => {
           if(!dataArray) return;
           dataArray.forEach(item => {
             if(!item.bentuk) return;
             const b = item.bentuk.toLowerCase();
             if (b.includes('uraian') || b.includes('essay')) item.bentuk = 'Uraian/ Essay';
             else if (b.includes('urut') || b.includes('susun')) item.bentuk = 'Mengurutkan/ Menyusun';
             else if (b.includes('benar') && b.includes('salah')) item.bentuk = 'Benar Salah';
             else if (b.includes('setuju')) item.bentuk = 'Setuju-Tidak Setuju';
             else if (b.includes('kategori')) item.bentuk = 'Mengkategorikan';
             else if (b.includes('kompleks')) item.bentuk = 'Pilihan Ganda Kompleks';
           });
        };

        if (result.kisi_kisi) {
           normalisasiBentuk(result.kisi_kisi);
           allKisi.push(...result.kisi_kisi);
        }
        if (result.soal) {
           normalisasiBentuk(result.soal);
           allSoal.push(...result.soal);
        }
      }

      setLoadingProgress('Menyusun dan merapikan urutan...');

      // --- MENGURUTKAN SELURUH SOAL DAN KISI-KISI BERDASARKAN BENTUK ---
      const urutanBentuk = [
        'pilihan ganda', 'pg',
        'pilihan ganda kompleks', 'pg kompleks',
        'menjodohkan',
        'benar salah',
        'setuju-tidak setuju',
        'mengkategorikan',
        'mengurutkan/ menyusun',
        'isian singkat',
        'jawaban singkat',
        'uraian/ essay'
      ];

      const getOrderIndex = (bentuk) => {
        if (!bentuk) return 999;
        const idx = urutanBentuk.indexOf(bentuk.toLowerCase());
        return idx === -1 ? 999 : idx;
      };

      allSoal.sort((a, b) => getOrderIndex(a.bentuk) - getOrderIndex(b.bentuk));
      allKisi.sort((a, b) => getOrderIndex(a.bentuk) - getOrderIndex(b.bentuk));

      // Sinkronisasi ulang nomor urut agar rapi dari 1 hingga N
      allSoal.forEach((s, i) => s.nomor = i + 1);
      allKisi.forEach((k, i) => k.nomor = i + 1);

      setGeneratedData({
        kisi_kisi: allKisi,
        soal: allSoal
      });
      setActiveTab('preview');
    } catch (error) {
      console.error(error);
      setErrorMsg(error.message);
    } finally {
      setLoading(false);
      setLoadingProgress('');
    }
  };

  // --- RENDER KE WORD (DIPERBAIKI UNTUK CETAK RAPI) ---
  const handleDownloadWord = () => {
    if (!generatedData) return;
    let html = `
      <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
      <head><meta charset="utf-8"><title>Soal Naskah</title>
      <style>
        /* Pengaturan Layout Kertas F4/A4 & Margin standar sekolah */
        @page { size: 21.59cm 33.02cm; margin: 2cm 2cm 2cm 2.5cm; }
        body { font-family: 'Times New Roman', serif; font-size: 11.5pt; line-height: 1.4; text-align: justify; color: #000; }
        
        /* Kop Surat */
        .kop-surat { text-align: center; border-bottom: 3px double black; padding-bottom: 10px; margin-bottom: 20px; }
        .kop-surat h2 { font-size: 16pt; margin: 0; padding: 2px 0; font-weight: bold; text-transform: uppercase; }
        .kop-surat h3 { font-size: 14pt; margin: 0; padding: 2px 0; font-weight: bold; text-transform: uppercase; }
        
        /* Tabel Identitas */
        table.identitas { width: 100%; border-collapse: collapse; margin-bottom: 25px; }
        table.identitas td { border: none; padding: 5px 0; font-size: 11.5pt; font-weight: bold; vertical-align: bottom; }
        
        /* Layout Soal menggunakan Tabel Tanpa Garis agar Rapi di MS Word */
        table.soal-layout { width: 100%; border-collapse: collapse; margin-bottom: 25px; page-break-inside: avoid; }
        table.soal-layout td { border: none; padding: 0; vertical-align: top; text-align: justify; }
        .td-nomor { width: 35px; font-weight: bold; font-size: 11.5pt; }
        
        /* Elemen Soal */
        .stimulus-box { border: 1px solid #666; padding: 12px; margin-bottom: 12px; font-size: 11pt; font-style: normal; text-align: justify; }
        .pertanyaan { margin-bottom: 10px; }
        
        /* Tabel Opsi / Komponen dalam Soal */
        table.opsi-layout { width: 100%; border-collapse: collapse; margin-top: 5px; }
        table.opsi-layout td { border: none; padding: 3px 0; vertical-align: top; text-align: justify; }
        .td-abjad { width: 30px; font-weight: normal; }
        
        /* Tabel Formatif (Benar-Salah, Menjodohkan, dsb) */
        table.tabel-formatif { width: 100%; border-collapse: collapse; margin-top: 10px; margin-bottom: 10px; }
        table.tabel-formatif th, table.tabel-formatif td { border: 1px solid black; padding: 8px; text-align: left; vertical-align: middle; }
        table.tabel-formatif th { text-align: center; font-weight: bold; background-color: #f0f0f0; }
        
        /* Kunci Jawaban */
        .kunci-container { page-break-before: always; margin-top: 40px; }
        table.tabel-kunci { width: 50%; border-collapse: collapse; margin-top: 15px; }
        table.tabel-kunci th, table.tabel-kunci td { border: 1px solid black; padding: 8px; text-align: center; }
      </style></head><body>
      
      <div class="kop-surat">
         <h2>NASKAH PENILAIAN HARIAN</h2>
         <h3>${config.sekolah}</h3>
      </div>
      
      <table class="identitas">
         <tr>
           <td width="15%">Mata Pelajaran</td><td width="2%">:</td><td width="33%">${config.mapel}</td>
           <td width="15%">Nama Siswa</td><td width="2%">:</td><td width="33%" style="border-bottom: 1px dotted #000;"></td>
         </tr>
         <tr>
           <td>Kelas/Fase</td><td>:</td><td>${config.kelas}</td>
           <td>No. Absen</td><td>:</td><td style="border-bottom: 1px dotted #000;"></td>
         </tr>
      </table>
      
      <div style="font-weight:bold; margin-bottom:20px; text-align:center;">Jawablah pertanyaan di bawah ini dengan benar dan teliti!</div>
    `;

    generatedData.soal.forEach(s => {
      html += `<table class="soal-layout"><tr>`;
      html += `<td class="td-nomor">${s.nomor}.</td>`;
      html += `<td>`;
      
      if (s.stimulus_content) {
        html += `<div class="stimulus-box">${processExportText(s.stimulus_content)}</div>`;
      }
      
      html += `<div class="pertanyaan">${processExportText(s.pertanyaan)}</div>`;
      
      // RENDER BERDASARKAN BENTUK
      if (['Pilihan Ganda', 'PG'].includes(s.bentuk) && s.opsi) {
        html += `<table class="opsi-layout">`;
        Object.entries(s.opsi).forEach(([k, v]) => {
          html += `<tr><td class="td-abjad">${k}.</td><td>${processExportText(v)}</td></tr>`;
        });
        html += `</table>`;
      } 
      else if (['PG Kompleks', 'Pilihan Ganda Kompleks'].includes(s.bentuk) && s.opsi) {
        html += `<table class="opsi-layout">`;
        const opsiArray = Array.isArray(s.opsi) ? s.opsi : Object.values(s.opsi);
        opsiArray.forEach(o => {
          html += `<tr>
            <td style="width:25px; font-size:14pt; vertical-align:top; line-height:1;">&#9744;</td>
            <td style="vertical-align:top; padding-top:2px;">${processExportText(typeof o === 'object' ? o.teks : o)}</td>
          </tr>`;
        });
        html += `</table>`;
      } 
      else if (['Menjodohkan'].includes(s.bentuk)) {
        html += `<table style="width:100%; border:none; margin-top:10px;"><tr>
          <td valign="top" style="border:none; width:45%;">
            <b style="text-decoration:underline; display:block; margin-bottom:10px;">Lajur Kiri</b>
            <table style="border:none; width:100%;">`;
        (s.premis_kiri || []).forEach((i, idx) => {
          html += `<tr><td style="width:25px; border:none; padding-bottom:8px;">${String.fromCharCode(65 + idx)}.</td><td style="border:none; padding-bottom:8px;">${processExportText(i)}</td></tr>`;
        });
        html += `</table></td>
          <td valign="top" style="border:none; width:10%; text-align:center;">&nbsp;</td>
          <td valign="top" style="border:none; width:45%;">
            <b style="text-decoration:underline; display:block; margin-bottom:10px;">Lajur Kanan</b>
            <table style="border:none; width:100%;">`;
        (s.respon_kanan || []).forEach((i, idx) => {
          html += `<tr><td style="width:25px; border:none; padding-bottom:8px;">${idx+1}.</td><td style="border:none; padding-bottom:8px;">${processExportText(i)}</td></tr>`;
        });
        html += `</table></td></tr></table>`;
      }
      else if (['Benar Salah'].includes(s.bentuk)) {
         html += `<table class="tabel-formatif">
           <thead><tr><th style="width:5%; background-color:#fff;">No</th><th style="text-align:left; background-color:#fff;">Pernyataan</th><th style="width:15%; background-color:#fff;">Benar</th><th style="width:15%; background-color:#fff;">Salah</th></tr></thead>
           <tbody>`;
         (s.pernyataan || []).forEach((p, idx) => { 
           html += `<tr><td style="text-align:center;">${idx+1}</td><td>${processExportText(typeof p === 'object' ? p.teks : p)}</td><td style="text-align:center; font-size:14pt; line-height:1;">&#9744;</td><td style="text-align:center; font-size:14pt; line-height:1;">&#9744;</td></tr>`; 
         });
         html += `</tbody></table>`;
      }
      else if (['Setuju-Tidak Setuju'].includes(s.bentuk)) {
         html += `<table class="tabel-formatif">
           <thead><tr><th style="width:5%; background-color:#fff;">No</th><th style="text-align:left; background-color:#fff;">Pernyataan</th><th style="width:18%; background-color:#fff;">Setuju</th><th style="width:22%; background-color:#fff;">Tidak Setuju</th></tr></thead>
           <tbody>`;
         (s.pernyataan || []).forEach((p, idx) => { 
           html += `<tr><td style="text-align:center;">${idx+1}</td><td>${processExportText(typeof p === 'object' ? p.teks : p)}</td><td style="text-align:center; font-size:14pt; line-height:1;">&#9744;</td><td style="text-align:center; font-size:14pt; line-height:1;">&#9744;</td></tr>`; 
         });
         html += `</tbody></table>`;
      }
      else if (['Mengkategorikan'].includes(s.bentuk) && s.kategori && s.item_kategori) {
         html += `<table class="tabel-formatif">
           <thead><tr><th style="text-align:left; background-color:#fff;">Item / Pernyataan</th>`;
         s.kategori.forEach(k => html += `<th style="background-color:#fff;">${k}</th>`);
         html += `</tr></thead><tbody>`;
         s.item_kategori.forEach(item => { 
           html += `<tr><td>${processExportText(item)}</td>`;
           s.kategori.forEach(() => html += `<td></td>`);
           html += `</tr>`; 
         });
         html += `</tbody></table>`;
      }
      else if (['Mengurutkan/ Menyusun'].includes(s.bentuk) && Array.isArray(s.item_acak)) {
         html += `<table style="width:100%; border:none; margin-left:10px; margin-top:5px;">`;
         s.item_acak.forEach(item => {
            html += `<tr><td style="width:40px; border:none; padding-bottom:8px;">(....)</td><td style="border:none; padding-bottom:8px;">${processExportText(item)}</td></tr>`;
         });
         html += `</table>`;
      }
      else if (['Isian Singkat'].includes(s.bentuk)) {
         html += `<div style="margin-top:15px; margin-bottom:10px;">Jawaban: <span style="display:inline-block; border-bottom:1px dotted #000; width:150px;">&nbsp;</span></div>`;
      }
      else if (['Jawaban Singkat'].includes(s.bentuk)) {
         html += `<div style="margin-top:20px; margin-bottom:10px;">Jawaban: <span style="display:inline-block; border-bottom:1px dotted #000; width:60%;">&nbsp;</span></div>`;
      }
      else if (['Uraian/ Essay'].includes(s.bentuk)) {
         html += `<div style="margin-top:15px; border:1px solid #ccc; width:100%; height:120px; border-radius:3px;"></div>`;
      }

      html += `</td></tr></table>`;
    });

    // KUNCI JAWABAN
    html += `
      <div class="kunci-container">
        <h3 style="text-align:center; text-transform:uppercase; margin-bottom:5px;">KUNCI JAWABAN</h3>
        <h4 style="text-align:center; margin-top:0;">${config.mapel}</h4>
        <center>
          <table class="tabel-kunci">
            <thead><tr><th style="background-color:#f0f0f0;">No</th><th style="background-color:#f0f0f0;">Jawaban</th></tr></thead>
            <tbody>
    `;
    generatedData.soal.forEach(s => {
      // Menggunakan Helper Kunci Jawaban dengan tag <br/> agar baris baru di Word
      html += `<tr><td style="font-weight:bold;">${s.nomor}</td><td>${formatKunciJawaban(s.kunci, '<br/>')}</td></tr>`;
    });
    html += `</tbody></table></center></div></body></html>`;

    const blob = new Blob([html], { type: 'application/msword' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `Naskah_Soal_${config.mapel.replace(/ /g, '_')}.doc`;
    link.click();
  };

  const handleDownloadExcel = () => {
    if (!generatedData) return;
    let html = `<html xmlns:x="urn:schemas-microsoft-com:office:excel"><head><meta charset="utf-8">
      <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid black; padding: 5px; }
      </style>
      </head><body>
      <table border="1">
        <tr><td colspan="6" style="text-align:center; font-weight:bold;">KISI-KISI SOAL ${config.mapel.toUpperCase()}</td></tr>
        <tr><td>Sekolah</td><td>: ${config.sekolah}</td></tr>
        <tr><td>Kelas</td><td>: ${config.kelas}</td></tr>
        <tr>
          <th style="background-color:#cce5ff;">NO</th>
          <th style="background-color:#cce5ff;">TP</th>
          <th style="background-color:#cce5ff;">MATERI</th>
          <th style="background-color:#cce5ff;">LEVEL</th>
          <th style="background-color:#cce5ff;">INDIKATOR</th>
          <th style="background-color:#cce5ff;">BENTUK</th>
          <th style="background-color:#cce5ff;">NO SOAL</th>
          <th style="background-color:#cce5ff;">KUNCI</th>
        </tr>
    `;
    generatedData.kisi_kisi.forEach((item, idx) => {
      html += `<tr>
        <td style="text-align:center;">${idx+1}</td>
        <td>${item.tp}</td>
        <td>${item.materi}</td>
        <td style="text-align:center;">${item.level}</td>
        <td style="text-align:center;">${item.indikator}</td>
        <td style="text-align:center;">${item.bentuk}</td>
        <td style="text-align:center;">${item.nomor}</td>
        <td style="text-align:center;">${formatKunciJawaban(item.kunci, ', ')}</td>
      </tr>`;
    });
    html += `</table></body></html>`;
    const blob = new Blob([html], { type: 'application/vnd.ms-excel' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `Kisi_Kisi_${config.mapel.replace(/ /g, '_')}.xls`;
    link.click();
  };

  const handlePrintPDF = () => {
    if (!generatedData) return;
    const printWindow = window.open('', '_blank');
    printWindow.document.write(`<html><head><title>Print Naskah Soal</title>
    <style>
      @page { size: 21.59cm 33.02cm; margin: 2cm; }
      body { font-family: 'Times New Roman', serif; font-size: 11pt; line-height: 1.4; text-align: justify; }
      .header-print { text-align: center; border-bottom: 3px double black; padding-bottom: 10px; margin-bottom: 20px; }
      .header-print h2, .header-print h3 { margin: 2px 0; }
      table.identitas-print { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
      table.identitas-print td { padding: 4px 0; font-weight: bold; }
      table.tabel-soal-print { width: 100%; border-collapse: collapse; margin-bottom: 20px; page-break-inside: avoid; }
      table.tabel-soal-print td { vertical-align: top; padding: 0; }
      .stimulus-print { border: 1px solid #666; padding: 10px; margin-bottom: 8px; font-size: 10.5pt; }
      .tabel-formatif-print { width: 100%; border-collapse: collapse; margin-top: 10px; }
      .tabel-formatif-print th, .tabel-formatif-print td { border: 1px solid black; padding: 6px; text-align: left; }
      .tabel-formatif-print th { text-align: center; font-weight: bold; }
    </style>
    </head><body onload="window.print()">
      <div class="header-print">
         <h2>NASKAH PENILAIAN HARIAN</h2>
         <h3>${config.sekolah}</h3>
      </div>
      <table class="identitas-print">
         <tr><td width="15%">Mapel</td><td width="2%">:</td><td width="33%">${config.mapel}</td>
             <td width="15%">Nama</td><td width="2%">:</td><td width="33%" style="border-bottom: 1px dotted #000;"></td></tr>
         <tr><td>Kelas</td><td>:</td><td>${config.kelas}</td>
             <td>No. Absen</td><td>:</td><td style="border-bottom: 1px dotted #000;"></td></tr>
      </table>
      
      ${generatedData.soal.map(s => `
        <table class="tabel-soal-print"><tr>
          <td style="width:30px; font-weight:bold;">${s.nomor}.</td>
          <td>
            ${s.stimulus_content ? `<div class="stimulus-print">${processExportText(s.stimulus_content)}</div>` : ''}
            <div style="margin-bottom:8px;">${processExportText(s.pertanyaan)}</div>
            
            ${['Pilihan Ganda', 'PG'].includes(s.bentuk) && s.opsi ? 
              `<table style="width:100%;">` + Object.entries(s.opsi).map(([k,v]) => `<tr><td style="width:25px; vertical-align:top;">${k}.</td><td style="vertical-align:top;">${processExportText(v)}</td></tr>`).join('') + `</table>` : ''}
            
            ${['PG Kompleks', 'Pilihan Ganda Kompleks'].includes(s.bentuk) && s.opsi ? 
              `<table style="width:100%;">` + (Array.isArray(s.opsi) ? s.opsi : Object.values(s.opsi)).map(o => `<tr><td style="width:25px; vertical-align:top; font-size:14pt; line-height:1;">&#9744;</td><td style="vertical-align:top; padding-top:2px;">${processExportText(typeof o === 'object' ? o.teks : o)}</td></tr>`).join('') + `</table>` : ''}

            ${['Menjodohkan'].includes(s.bentuk) ? 
              `<table style="width:100%; margin-top:10px;"><tr>
                 <td style="width:45%; vertical-align:top;"><b>Lajur Kiri</b><br/><table style="width:100%;">${(s.premis_kiri || []).map((i, idx) => `<tr><td style="width:20px; vertical-align:top;">${String.fromCharCode(65+idx)}.</td><td>${processExportText(i)}</td></tr>`).join('')}</table></td>
                 <td style="width:10%;"></td>
                 <td style="width:45%; vertical-align:top;"><b>Lajur Kanan</b><br/><table style="width:100%;">${(s.respon_kanan || []).map((i, idx) => `<tr><td style="width:20px; vertical-align:top;">${idx+1}.</td><td>${processExportText(i)}</td></tr>`).join('')}</table></td>
              </tr></table>` : ''}

            ${['Benar Salah'].includes(s.bentuk) ? 
              `<table class="tabel-formatif-print">
                 <thead><tr><th style="width:30px;">No</th><th>Pernyataan</th><th style="width:60px;">Benar</th><th style="width:60px;">Salah</th></tr></thead>
                 <tbody>${(s.pernyataan || []).map((p, idx) => `<tr><td style="text-align:center;">${idx+1}</td><td>${processExportText(typeof p === 'object' ? p.teks : p)}</td><td style="text-align:center; font-size:14pt;">&#9744;</td><td style="text-align:center; font-size:14pt;">&#9744;</td></tr>`).join('')}</tbody>
               </table>` : ''}
               
            ${['Setuju-Tidak Setuju'].includes(s.bentuk) ? 
              `<table class="tabel-formatif-print">
                 <thead><tr><th style="width:30px;">No</th><th>Pernyataan</th><th style="width:70px;">Setuju</th><th style="width:90px;">Tidak Setuju</th></tr></thead>
                 <tbody>${(s.pernyataan || []).map((p, idx) => `<tr><td style="text-align:center;">${idx+1}</td><td>${processExportText(typeof p === 'object' ? p.teks : p)}</td><td style="text-align:center; font-size:14pt;">&#9744;</td><td style="text-align:center; font-size:14pt;">&#9744;</td></tr>`).join('')}</tbody>
               </table>` : ''}

            ${['Mengkategorikan'].includes(s.bentuk) && s.kategori ? 
              `<table class="tabel-formatif-print">
                 <thead><tr><th>Item</th>${s.kategori.map(k => `<th>${k}</th>`).join('')}</tr></thead>
                 <tbody>${(s.item_kategori || []).map(item => `<tr><td>${processExportText(item)}</td>${s.kategori.map(() => `<td></td>`).join('')}</tr>`).join('')}</tbody>
               </table>` : ''}

            ${['Mengurutkan/ Menyusun'].includes(s.bentuk) ? 
              `<table style="margin-top:10px; margin-left:10px;">${(s.item_acak || []).map(item => `<tr><td style="width:40px; padding-bottom:5px;">(....)</td><td style="padding-bottom:5px;">${processExportText(item)}</td></tr>`).join('')}</table>` : ''}

            ${['Isian Singkat'].includes(s.bentuk) ? `<div style="margin-top:10px;">Jawaban: <span style="display:inline-block; border-bottom: 1px dotted #000; width: 150px;">&nbsp;</span></div>` : ''}
            ${['Jawaban Singkat'].includes(s.bentuk) ? `<div style="margin-top:15px;">Jawaban: <span style="display:inline-block; border-bottom: 1px dotted #000; width: 60%;">&nbsp;</span></div>` : ''}
            ${['Uraian/ Essay'].includes(s.bentuk) ? `<div style="margin-top:10px; border: 1px solid #ccc; width: 100%; height: 100px;"></div>` : ''}
          </td>
        </tr></table>
      `).join('')}
    </body></html>`);
    printWindow.document.close();
  };

  return (
    <div className="min-h-screen bg-slate-50 p-4 md:p-8 font-sans text-slate-800 select-none">
      <div className="max-w-6xl mx-auto">
        {/* HEADER */}
        <header className="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold text-blue-700 flex items-center gap-2">
              <BrainCircuit className="w-8 h-8" /> Generator Soal dan Kisi-Kisi
            </h1>
            <p className="text-slate-500">Dikembangkan Oleh : Asep Saefullah || SMP Negeri 3 Cikarang Timur</p>
          </div>
          <div className="flex bg-white p-1 rounded-xl shadow-sm border self-start">
            <button onClick={() => setActiveTab('input')} className={`px-6 py-2 rounded-lg font-semibold transition ${activeTab === 'input' ? 'bg-blue-600 text-white shadow-md' : 'text-slate-500'}`}>Input Data</button>
            <button disabled={!generatedData} onClick={() => setActiveTab('preview')} className={`px-6 py-2 rounded-lg font-semibold transition ${activeTab === 'preview' ? 'bg-blue-600 text-white shadow-md' : 'text-slate-500 disabled:opacity-50'}`}>Preview Hasil</button>
          </div>
        </header>

        {errorMsg && (
          <div className="mb-6 bg-red-50 border border-red-200 p-4 rounded-xl flex items-center gap-3 text-red-700">
            <AlertTriangle className="w-6 h-6 flex-shrink-0" />
            <div><p className="font-bold">Error</p><p className="text-sm">{errorMsg}</p></div>
          </div>
        )}

        {activeTab === 'input' ? (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
            {/* KOLOM KIRI: Identitas */}
            <div className="lg:col-span-2 space-y-6">
              <div className="bg-white rounded-2xl shadow-sm border p-6 md:p-8">
                <h3 className="text-lg font-bold mb-6 flex items-center gap-2 border-b pb-4"><School className="w-5 h-5 text-blue-600" /> Identitas & Materi</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  
                  {/* JENJANG & KELAS DINAMIS */}
                  <div className="space-y-4">
                    <div>
                      <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Mata Pelajaran</label>
                      <select className="w-full p-3 bg-slate-50 border rounded-xl focus:ring-2 focus:ring-blue-500 outline-none" value={config.mapel} onChange={(e) => setConfig({...config, mapel: e.target.value})}>
                         <option value="Pendidikan Agama Islam dan Budi Pekerti">Pendidikan Agama Islam dan Budi Pekerti</option>
                         <option value="Baca Tulis al-Quran">Baca Tulis al-Quran</option>
                      </select>
                    </div>
                    <div><label className="block text-xs font-bold text-slate-500 uppercase mb-1">Kurikulum</label><select className="w-full p-3 bg-slate-50 border rounded-xl outline-none" value={config.kurikulum} onChange={(e) => setConfig({...config, kurikulum: e.target.value})}><option>Kurikulum Merdeka</option><option>Kurikulum 2013</option><option>Cambridge</option></select></div>
                  </div>
                </div>

                {/* MATERI */}
                <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100">
                    <div className="md:col-span-2"><h4 className="text-sm font-bold text-blue-700 mb-2 flex items-center gap-2"><Bookmark className="w-4 h-4"/> Detail Materi</h4></div>
                    <div><label className="block text-xs font-bold text-slate-500 uppercase mb-1">BAB (Topik)</label><input className="w-full p-3 bg-white border rounded-xl outline-none" placeholder="Contoh: Bab 7 - Iman kepada qada dan qadar" value={config.bab} onChange={(e) => setConfig({...config, bab: e.target.value})} /></div>
                    <div><label className="block text-xs font-bold text-slate-500 uppercase mb-1">Sub Bab</label><input className="w-full p-3 bg-white border rounded-xl outline-none" placeholder="Contoh: Taqdir mubram dan muallaq" value={config.subBab} onChange={(e) => setConfig({...config, subBab: e.target.value})} /></div>
                    <div className="md:col-span-2 mt-2">
                        <div className="flex justify-between items-end mb-1">
                            <label className="block text-xs font-bold text-slate-500 uppercase flex items-center gap-2"><FileTextIcon className="w-4 h-4" /> Materi Lengkap (Opsional)</label>
                            <button onClick={generateMateriOtomatis} disabled={loadingMateri || !config.mapel || !config.bab} className="text-xs bg-indigo-100 text-indigo-700 px-3 py-1.5 rounded-full font-bold hover:bg-indigo-200 transition flex items-center gap-1 disabled:opacity-50">
                                {loadingMateri ? "Menulis..." : "Bantu Buatkan Materi"}
                            </button>
                        </div>
                        <textarea className="w-full p-3 bg-white border rounded-xl outline-none h-40 text-sm" placeholder="Materi ringkas..." value={config.materiLengkap} onChange={(e) => setConfig({...config, materiLengkap: e.target.value})} />
                    </div>
                </div>

                <div className="mt-6">
                    <div className="flex justify-between items-end mb-1">
                        <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Tujuan Pembelajaran (TP)</label>
                        <button onClick={generateTPOtomatis} disabled={loadingTP || !config.mapel} className="text-xs bg-indigo-100 text-indigo-700 px-3 py-1.5 rounded-full font-bold hover:bg-indigo-200 transition flex items-center gap-1 disabled:opacity-50">
                            {loadingTP ? "Merumuskan..." : "Bantu Buatkan TP"}
                        </button>
                    </div>
                    <textarea className="w-full p-3 bg-slate-50 border rounded-xl outline-none h-24 resize-none" placeholder="Tuliskan TP..." value={config.tp} onChange={(e) => setConfig({...config, tp: e.target.value})} />
                </div>
              </div>
            </div>

            {/* KOLOM KANAN: Konfigurasi */}
            <div className="space-y-6">
              <div className="bg-white rounded-2xl shadow-sm border p-6">
                <h3 className="text-lg font-bold mb-6 flex items-center gap-2 border-b pb-4"><Gauge className="w-5 h-5 text-orange-600" /> Konfigurasi Soal</h3>
                
                {/* BENTUK SOAL & JUMLAH */}
                <div className="mb-6">
                  <div className="flex justify-between items-end mb-2">
                    <label className="block text-xs font-bold text-slate-500 uppercase">Bentuk & Jumlah Soal</label>
                    <span className="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded">Total: {totalSoal}/100</span>
                  </div>
                  <div className="grid grid-cols-1 gap-2 max-h-80 overflow-y-auto pr-2">
                    {[
                      { type: 'Pilihan Ganda', icon: <LayoutList className="w-4 h-4"/> },
                      { type: 'Pilihan Ganda Kompleks', icon: <CheckSquare className="w-4 h-4"/> },
                      { type: 'Menjodohkan', icon: <AlignJustify className="w-4 h-4"/> },
                      { type: 'Benar Salah', icon: <ToggleLeft className="w-4 h-4"/> },
                      { type: 'Setuju-Tidak Setuju', icon: <ThumbsUp className="w-4 h-4"/> },
                      { type: 'Mengkategorikan', icon: <LayoutGrid className="w-4 h-4"/> },
                      { type: 'Mengurutkan/ Menyusun', icon: <ListOrdered className="w-4 h-4"/> },
                      { type: 'Isian Singkat', icon: <Edit2 className="w-4 h-4"/> },
                      { type: 'Jawaban Singkat', icon: <Edit2 className="w-4 h-4"/> },
                      { type: 'Uraian/ Essay', icon: <FileText className="w-4 h-4"/> }
                    ].map(({ type, icon }) => {
                      const count = config.jumlahPerBentuk[type] || '';
                      const isActive = count > 0;
                      return (
                        <div key={type} className={`p-2 rounded-lg text-sm font-medium border transition flex items-center justify-between gap-2 ${isActive ? 'border-blue-300 bg-blue-50' : 'bg-white border-slate-200'}`}>
                          <div className="flex items-center gap-2 text-slate-700 w-full">
                             {icon}
                             <span className="truncate">{type}</span>
                          </div>
                          <input 
                            type="number" 
                            min="0" 
                            max="100" 
                            placeholder="0"
                            className="w-16 p-1.5 text-center border rounded outline-none focus:ring-2 focus:ring-blue-500 font-bold bg-white"
                            value={count}
                            onChange={(e) => handleBentukChange(type, e.target.value)}
                          />
                        </div>
                      );
                    })}
                  </div>
                </div>

                {/* LEVEL KOGNITIF */}
                <div className="mb-6 bg-slate-50 p-4 rounded-xl border border-slate-200">
                  <div className="flex justify-between items-center mb-3">
                    <label className="block text-xs font-bold text-slate-500 uppercase">Level Kognitif (Bloom/SOLO)</label>
                    <span className={`text-[10px] font-bold px-2 py-1 rounded ${totalLevel === totalSoal ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'}`}>
                      {totalLevel} / {totalSoal} Soal
                    </span>
                  </div>
                  <div className="grid grid-cols-3 gap-2">
                    <div>
                      <label className="block text-[10px] font-bold text-slate-400 text-center mb-1" title="C1, C2 (Pengetahuan & Pemahaman)">L1 (Mudah)</label>
                      <input type="number" min="0" className="w-full p-2 text-center bg-white border rounded-lg outline-none font-bold" value={config.levelKognitif.L1} onChange={(e) => setConfig({...config, levelKognitif: {...config.levelKognitif, L1: parseInt(e.target.value) || 0}})} />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-amber-500 text-center mb-1" title="C3 (Aplikasi)">L2 (Sedang)</label>
                      <input type="number" min="0" className="w-full p-2 text-center bg-white border border-amber-200 rounded-lg outline-none font-bold text-amber-700" value={config.levelKognitif.L2} onChange={(e) => setConfig({...config, levelKognitif: {...config.levelKognitif, L2: parseInt(e.target.value) || 0}})} />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-red-500 text-center mb-1" title="C4, C5, C6 (Penalaran / HOTS)">L3 (HOTS)</label>
                      <input type="number" min="0" className="w-full p-2 text-center bg-white border border-red-200 rounded-lg outline-none font-bold text-red-700" value={config.levelKognitif.L3} onChange={(e) => setConfig({...config, levelKognitif: {...config.levelKognitif, L3: parseInt(e.target.value) || 0}})} />
                    </div>
                  </div>
                  {totalLevel !== totalSoal && totalSoal > 0 && (
                    <p className="text-[10px] text-red-500 mt-2 text-center font-bold">⚠️ Total Level Kognitif ({totalLevel}) harus sama dengan Total Soal ({totalSoal}).</p>
                  )}
                </div>

                {/* CONFIG GAMBAR */}
                <div className="mt-4">
                   <label className="block text-[10px] font-bold text-purple-500 uppercase mb-1">Jumlah Soal Bergambar</label>
                   <div className="relative">
                      <ImageIcon className="absolute left-3 top-3 w-4 h-4 text-purple-400"/>
                      <input type="number" min="0" max={totalSoal} className="w-full pl-10 p-3 bg-purple-50 border border-purple-100 rounded-xl outline-none font-bold text-purple-700" 
                        value={config.jumlahGambar} onChange={(e) => setConfig({...config, jumlahGambar: Math.min(parseInt(e.target.value) || 0, totalSoal)})} />
                   </div>
                   <p className="text-[10px] text-purple-400 mt-1">*AI akan menyertakan deskripsi gambar pada {config.jumlahGambar} soal.</p>
                </div>

                <button onClick={generateContent} disabled={loading || !config.tp || !isConfigValid} className="mt-8 w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 text-white font-bold py-4 rounded-xl flex items-center justify-center gap-2 transition-all shadow-lg shadow-blue-200 disabled:opacity-50 disabled:from-slate-400 disabled:to-slate-500">
                  {loading ? (
                    <div className="flex flex-col items-center">
                       <span className="animate-pulse">{loadingProgress || "Sedang Meracik Soal..."}</span>
                       <span className="text-[10px] text-blue-200 font-normal">Mohon tunggu, mungkin memakan waktu...</span>
                    </div>
                  ) : <><Sparkles className="w-5 h-5" /> Generate Soal</>}
                </button>
              </div>
            </div>
          </div>
        ) : (
          <div className="space-y-8 animate-in fade-in zoom-in-95 duration-500">
            {/* PREVIEW & DOWNLOAD */}
            <div className="flex flex-wrap gap-4 sticky top-4 z-10 bg-slate-50/90 backdrop-blur-md p-3 rounded-2xl border border-white/50 shadow-sm">
               <button onClick={handleDownloadExcel} className="bg-emerald-600 text-white px-6 py-2.5 rounded-xl flex items-center gap-2 hover:bg-emerald-700 transition shadow-lg shadow-emerald-100 font-medium text-sm"><FileSpreadsheet className="w-4 h-4" /> Excel (Kisi-kisi)</button>
              <button onClick={handleDownloadWord} className="bg-blue-600 text-white px-6 py-2.5 rounded-xl flex items-center gap-2 hover:bg-blue-700 transition shadow-lg shadow-blue-100 font-medium text-sm"><FileText className="w-4 h-4" /> Word (Soal)</button>
              <button onClick={handlePrintPDF} className="bg-red-600 text-white px-6 py-2.5 rounded-xl flex items-center gap-2 hover:bg-red-700 transition shadow-lg shadow-red-100 font-medium text-sm"><Printer className="w-4 h-4" /> Print PDF</button>
            </div>

            {/* PREVIEW KISI-KISI */}
            <div className="bg-white rounded-2xl shadow-sm border overflow-hidden p-6">
              <h2 className="text-xl font-bold mb-6 flex items-center gap-2 text-emerald-700"><FileSpreadsheet className="w-6 h-6" /> Preview Kisi-kisi</h2>
              <div className="overflow-x-auto">
                <table className="w-full border-collapse text-xs md:text-sm border border-slate-800 font-sans">
                  <tbody>
                    <tr className="bg-cyan-100 text-center font-bold text-slate-800"><td className="border p-2">NO</td><td className="border p-2">TP</td><td className="border p-2">MATERI</td><td className="border p-2">LEVEL</td><td className="border p-2 w-1/3">INDIKATOR</td><td className="border p-2">BENTUK</td><td className="border p-2">NO SOAL</td><td className="border p-2">KUNCI</td></tr>
                    {generatedData?.kisi_kisi?.map((item, idx) => (
                      <tr key={idx} className="hover:bg-slate-50">
                        <td className="border p-2 text-center">{idx + 1}</td><td className="border p-2">{item.tp}</td><td className="border p-2">{item.materi}</td><td className="border p-2 text-center">{item.level}</td><td className="border p-2">{item.indikator}</td><td className="border p-2 text-center">{item.bentuk}</td><td className="border p-2 text-center">{item.nomor}</td><td className="border p-2 text-left font-bold text-xs max-w-xs break-words">{formatKunciJawaban(item.kunci, ', ')}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            {/* PREVIEW SOAL */}
            <div className="bg-white rounded-2xl shadow-sm border p-8 md:p-16">
              <div className="text-center mb-10 border-b-4 border-double border-slate-800 pb-6">
                <h2 className="text-2xl font-bold uppercase tracking-wide">NASKAH PENILAIAN HARIAN</h2>
                <h3 className="text-xl font-bold uppercase text-slate-700">{config.mapel}</h3>
                <p className="font-bold">{config.tingkatSekolah} - {config.kelas}</p>
              </div>
              <div className="space-y-10">
                {generatedData?.soal?.map((s, i) => (
                  <div key={i} className="break-inside-avoid flex gap-4">
                      <span className="font-bold text-lg text-slate-400 select-none">{s.nomor}.</span>
                      <RenderSoal soal={s} />
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;