import React, { useState, useEffect } from 'react';
import { BookOpen, Save, Printer, FileText, ChevronRight, Layout, List, CheckSquare, PenTool, Sparkles, Loader2, AlertCircle, Wand2, ChevronLeft, Edit3, User, MapPin, Calendar } from 'lucide-react';

const ModulAjarApp = () => {
  // Mode: 'form' (input data) atau 'preview' (lihat hasil)
  const [viewMode, setViewMode] = useState('form'); 
  
  // State untuk AI Loading
  const [isGenerating, setIsGenerating] = useState(false);
  const [loadingText, setLoadingText] = useState("");
  const [aiError, setAiError] = useState(null);

  // State Data Utama (Input Form)
  const [formData, setFormData] = useState({
    // 1. Identitas
    guru: "Nama Guru Anda",
    kepalaSekolah: "Nama Kepala Sekolah",
    kota: "Malang",
    tanggal: new Date().toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' }),
    jenjang: "SMP",
    kelas: "8",
    
    // 2. Struktur Materi
    mapel: "Informatika",
    tujuan: "Peserta didik mampu memahami komponen sistem komputer.",
    kktp: "", // Akan di-generate atau diisi manual
    jmlPertemuan: 1,
    jamPerPertemuan: 2,
    menitPerJam: 40,
    
    modelPembelajaran: "Problem Based Learning", // Default
    metodePembelajaran: ["Diskusi"], // Array karena bisa multiple
    
    // 3. Asesmen
    asesmenDiagnostik: "Tes Tulis",
    asesmenFormatif: "Ya",
    asesmenSumatif: "Ya",
    buatJobsheet: "Buat"
  });

  // State untuk Hasil Generate (Preview Data)
  const [previewData, setPreviewData] = useState(null);

  // --- HANDLERS ---

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const toggleMetode = (metode) => {
    setFormData(prev => {
      const exists = prev.metodePembelajaran.includes(metode);
      if (exists) {
        return { ...prev, metodePembelajaran: prev.metodePembelajaran.filter(m => m !== metode) };
      } else {
        return { ...prev, metodePembelajaran: [...prev.metodePembelajaran, metode] };
      }
    });
  };

  const setSingleSelection = (key, value) => {
    setFormData(prev => ({ ...prev, [key]: value }));
  };

  // --- GEMINI API HELPERS ---
  
  const callGeminiAPI = async (prompt, isJson = false) => {
    const apiKey = ""; // API Key disuntikkan oleh sistem
    const model = "gemini-2.5-flash-preview-09-2025";
    const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;

    const payload = {
      contents: [{ parts: [{ text: prompt }] }],
      ...(isJson && {
        generationConfig: { responseMimeType: "application/json" }
      })
    };

    try {
      const response = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (!response.ok) throw new Error(`API Error: ${response.status}`);
      const result = await response.json();
      return result.candidates?.[0]?.content?.parts?.[0]?.text;
    } catch (error) {
      console.error("Gemini Error:", error);
      throw error;
    }
  };

  // --- AI ACTIONS ---

  // 1. Generate KKTP saja
  const handleGenerateKKTP = async () => {
    if (!formData.tujuan) {
      setAiError("Isi Tujuan Pembelajaran terlebih dahulu!");
      return;
    }
    setIsGenerating(true);
    setLoadingText("Sedang menyusun kriteria ketuntasan...");
    setAiError(null);
    
    const prompt = `Saya guru ${formData.mapel} kelas ${formData.kelas}. 
    Tujuan Pembelajaran: "${formData.tujuan}".
    Buatkan 3-5 poin Kriteria Ketuntasan Tujuan Pembelajaran (KKTP) yang spesifik dan terukur.
    Langsung berikan poin-poinnya saja (jangan gunakan markdown bullet, gunakan angka).`;

    try {
      const result = await callGeminiAPI(prompt, false);
      setFormData(prev => ({ ...prev, kktp: result }));
    } catch (e) {
      setAiError("Gagal generate KKTP. Coba lagi.");
    } finally {
      setIsGenerating(false);
    }
  };

  // 2. Generate FULL MODUL (The Big Button)
  const handleGenerateFullModul = async () => {
    setIsGenerating(true);
    setLoadingText("Sedang meracik Modul Ajar lengkap (Langkah, Materi, Asesmen)... Mohon tunggu sebentar.");
    setAiError(null);

    // Prompt Raksasa
    const prompt = `
      Bertindaklah sebagai Guru Profesional. Buatkan MODUL AJAR LENGKAP dalam format JSON valid berdasarkan data berikut:
      
      DATA INPUT:
      - Guru: ${formData.guru}
      - Mapel: ${formData.mapel} (Kelas ${formData.kelas} ${formData.jenjang})
      - Alokasi: ${formData.jmlPertemuan} Pertemuan (${formData.jamPerPertemuan} JP x ${formData.menitPerJam} Menit)
      - Tujuan: ${formData.tujuan}
      - KKTP: ${formData.kktp || "Buatkan KKTP yang relevan"}
      - Model: ${formData.modelPembelajaran}
      - Metode: ${formData.metodePembelajaran.join(", ")}
      - Asesmen Diagnostik: ${formData.asesmenDiagnostik}
      - Asesmen Formatif/Sumatif: ${formData.asesmenFormatif}/${formData.asesmenSumatif}
      - Jobsheet: ${formData.buatJobsheet}

      TUGAS:
      Output HARUS JSON valid (tanpa markdown \`\`\`json) dengan struktur persis ini:
      {
        "informasiUmum": {
           "strategiAsesmenAwal": "Deskripsi strategi asesmen diagnostik...",
           "tindakLanjut": {
              "mahir": "...",
              "cakap": "...",
              "butuhBimbingan": "..."
           },
           "profilPancasila": "Daftar dimensi profil pelajar pancasila (poin-poin)"
        },
        "komponenInti": {
           "pemahamanBermakna": "...",
           "pertanyaanPemantik": "...",
           "persiapanPembelajaran": "..."
        },
        "langkahPembelajaran": {
           "pendahuluan": "Deskripsi kegiatan awal (apersepsi, motivasi, dll)",
           "inti": "Deskripsi detail kegiatan inti sesuai sintaks model ${formData.modelPembelajaran}",
           "penutup": "Deskripsi kegiatan penutup (refleksi, doa)"
        },
        "asesmen": {
           "diagnostik": "Deskripsi instrumen diagnostik",
           "formatif": "Deskripsi instrumen formatif",
           "sumatif": "Deskripsi instrumen sumatif"
        },
        "lampiran": {
           "materiAjar": "Ringkasan materi lengkap (3-4 paragraf)",
           "lkpd": "Isi/Soal untuk Lembar Kerja Peserta Didik",
           "rubrik": "Rubrik penilaian detail"
        }
      }
      
      Gunakan format text biasa. Jika ada poin penting gunakan tanda bintang seperti *kata penting* untuk penekanan.
    `;

    try {
      const resultString = await callGeminiAPI(prompt, true);
      const resultJSON = JSON.parse(resultString);
      
      // Gabungkan data input manual dengan data hasil generate AI untuk Preview
      setPreviewData({
        ...formData, // Data identitas dari form
        generated: resultJSON // Data isi dari AI
      });
      
      setViewMode('preview'); // Pindah ke layar preview
    } catch (e) {
      console.error(e);
      setAiError("Gagal membuat modul. Silakan coba klik tombol Generate sekali lagi.");
    } finally {
      setIsGenerating(false);
    }
  };

  // --- RENDERERS ---

  if (viewMode === 'preview' && previewData) {
    return (
      <div className="min-h-screen bg-gray-100 pb-10">
        <nav className="bg-white shadow-sm border-b sticky top-0 z-50 px-6 py-4 flex justify-between items-center print:hidden">
            <button onClick={() => setViewMode('form')} className="flex items-center gap-2 text-gray-600 hover:text-green-700 font-medium transition-colors">
                <ChevronLeft size={20} /> Kembali ke Editor
            </button>
            <div className="flex gap-3">
                 <button onClick={() => window.print()} className="bg-green-700 hover:bg-green-800 text-white px-4 py-2 rounded-lg flex items-center gap-2 shadow-sm font-medium">
                    <Printer size={18} /> Simpan PDF / Cetak
                </button>
            </div>
        </nav>
        <div className="max-w-[21cm] mx-auto bg-white shadow-lg mt-8 p-12 min-h-screen print:mt-0 print:shadow-none print:p-0">
            <FinalDocument data={previewData} />
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-green-50/30 font-sans text-gray-800 pb-20">
      {/* Header */}
      <div className="bg-white shadow-sm border-b px-6 py-4 mb-6">
        <div className="max-w-3xl mx-auto flex items-center gap-3">
          <div className="p-2 bg-green-100 rounded-lg text-green-700">
             <Wand2 size={24} />
          </div>
          <div>
            <h1 className="text-xl font-bold text-gray-800">Modul Ajar Generator</h1>
            <p className="text-xs text-gray-500">SMIPDA MALANG - SMP ISLAM PLUS DAARUL HUDA</p>
          </div>
        </div>
      </div>

      <div className="max-w-3xl mx-auto px-4 space-y-6">
        
        {/* Error Alert */}
        {aiError && (
          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
            <AlertCircle size={20} />
            <p className="text-sm font-medium">{aiError}</p>
            <button onClick={() => setAiError(null)} className="ml-auto text-sm underline">Tutup</button>
          </div>
        )}

        {/* 1. IDENTITAS */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
          <div className="px-6 py-4 border-b border-gray-50 bg-white flex items-center gap-2">
            <span className="text-green-700 font-bold text-lg">1.</span>
            <h2 className="font-bold text-gray-800 text-lg">IDENTITAS & PENANDATANGAN</h2>
          </div>
          <div className="p-6 space-y-4">
            {/* Grid 1: Guru & Kepsek */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1"><User size={14}/> Nama Guru: <span className="text-red-500">*</span></label>
                    <input type="text" name="guru" value={formData.guru} onChange={handleInputChange} className="w-full bg-gray-50 border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-green-500 outline-none" />
                </div>
                 <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1"><User size={14}/> Nama Kepala Sekolah: <span className="text-red-500">*</span></label>
                    <input type="text" name="kepalaSekolah" value={formData.kepalaSekolah} onChange={handleInputChange} className="w-full bg-gray-50 border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-green-500 outline-none" />
                </div>
            </div>

             {/* Grid 2: Kota & Tanggal */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1"><MapPin size={14}/> Kota/Tempat: <span className="text-red-500">*</span></label>
                    <input type="text" name="kota" value={formData.kota} onChange={handleInputChange} className="w-full bg-gray-50 border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-green-500 outline-none" />
                </div>
                 <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1"><Calendar size={14}/> Tanggal Modul: <span className="text-red-500">*</span></label>
                    <input type="text" name="tanggal" value={formData.tanggal} onChange={handleInputChange} className="w-full bg-gray-50 border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-green-500 outline-none" />
                </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Jenjang: <span className="text-red-500">*</span></label>
                    <select name="jenjang" value={formData.jenjang} onChange={handleInputChange} className="w-full bg-gray-50 border border-gray-300 rounded-lg px-4 py-2.5 text-sm outline-none">
                        <option value="SD">SD</option>
                        <option value="SMP">SMP</option>
                        <option value="SMA">SMA</option>
                        <option value="SMK">SMK</option>
                    </select>
                </div>
                 <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Kelas: <span className="text-red-500">*</span></label>
                    <select name="kelas" value={formData.kelas} onChange={handleInputChange} className="w-full bg-gray-50 border border-gray-300 rounded-lg px-4 py-2.5 text-sm outline-none">
                        {[7,8,9,10,11,12].map(k => <option key={k} value={k}>{k}</option>)}
                    </select>
                </div>
            </div>
          </div>
        </div>

        {/* 2. STRUKTUR MATERI */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
          <div className="px-6 py-4 border-b border-gray-50 bg-white flex items-center gap-2">
            <span className="text-green-700 font-bold text-lg">2.</span>
            <h2 className="font-bold text-gray-800 text-lg">STRUKTUR MATERI</h2>
          </div>
          <div className="p-6 space-y-5">
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Nama Mata Pelajaran: <span className="text-red-500">*</span></label>
                <input type="text" name="mapel" value={formData.mapel} onChange={handleInputChange} className="w-full bg-gray-50 border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-green-500 outline-none" />
            </div>
            
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Tujuan Pembelajaran (TP): <span className="text-red-500">*</span></label>
                <textarea name="tujuan" value={formData.tujuan} onChange={handleInputChange} rows={2} className="w-full bg-gray-50 border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-green-500 outline-none resize-none" />
            </div>

            <div>
                <div className="flex justify-between items-center mb-1">
                    <label className="block text-sm font-medium text-gray-700">Kriteria Tujuan Pembelajaran (KKTP): <span className="text-red-500">*</span></label>
                    <button 
                        onClick={handleGenerateKKTP}
                        disabled={isGenerating}
                        className="bg-purple-600 hover:bg-purple-700 text-white text-xs px-3 py-1.5 rounded-md flex items-center gap-1.5 shadow-sm transition-all disabled:opacity-50"
                    >
                        {isGenerating && loadingText.includes('kriteria') ? <Loader2 size={12} className="animate-spin"/> : <Sparkles size={12} />}
                        Generate KKTP
                    </button>
                </div>
                <textarea name="kktp" value={formData.kktp} onChange={handleInputChange} rows={4} placeholder="Klik tombol Generate untuk saran otomatis..." className="w-full bg-gray-50 border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-green-500 outline-none" />
            </div>

            <div className="grid grid-cols-3 gap-4">
                 <div>
                    <label className="block text-xs font-medium text-gray-500 mb-1">Jml Pertemuan</label>
                    <input type="number" name="jmlPertemuan" value={formData.jmlPertemuan} onChange={handleInputChange} className="w-full bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm text-center" />
                </div>
                 <div>
                    <label className="block text-xs font-medium text-gray-500 mb-1">JP / Pertemuan</label>
                    <input type="number" name="jamPerPertemuan" value={formData.jamPerPertemuan} onChange={handleInputChange} className="w-full bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm text-center" />
                </div>
                 <div>
                    <label className="block text-xs font-medium text-gray-500 mb-1">Menit / JP</label>
                    <input type="number" name="menitPerJam" value={formData.menitPerJam} onChange={handleInputChange} className="w-full bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm text-center" />
                </div>
            </div>

            {/* Model Pembelajaran Chips */}
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Model Pembelajaran: <span className="text-red-500">*</span></label>
                <div className="flex flex-wrap gap-2">
                    {["Problem Based Learning", "Project Based Learning", "Inquiry", "Discovery Learning"].map((m) => (
                        <button 
                            key={m} 
                            onClick={() => setSingleSelection('modelPembelajaran', m)}
                            className={`px-4 py-2 rounded-full text-xs font-medium border transition-all ${formData.modelPembelajaran === m ? 'bg-green-600 border-green-600 text-white shadow-md' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}
                        >
                            {m}
                        </button>
                    ))}
                </div>
            </div>

            {/* Metode Pembelajaran Chips (Multi Select) */}
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Metode Pembelajaran (Boleh lebih dari satu): <span className="text-red-500">*</span></label>
                <div className="flex flex-wrap gap-2">
                    {["Ceramah", "Tanya Jawab", "Demonstrasi", "Diskusi", "Praktikum", "Gamifikasi"].map((m) => (
                        <button 
                            key={m} 
                            onClick={() => toggleMetode(m)}
                            className={`px-4 py-2 rounded-full text-xs font-medium border transition-all ${formData.metodePembelajaran.includes(m) ? 'bg-yellow-500 border-yellow-500 text-white shadow-md' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}
                        >
                            {m}
                        </button>
                    ))}
                </div>
            </div>
          </div>
        </div>

        {/* 3. ASESMEN */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
          <div className="px-6 py-4 border-b border-gray-50 bg-white flex items-center gap-2">
            <span className="text-green-700 font-bold text-lg">3.</span>
            <h2 className="font-bold text-gray-800 text-lg">ASESMEN</h2>
          </div>
          <div className="p-6 space-y-6">
             {/* Asesmen Diagnostik */}
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Asesmen Diagnostik:</label>
                <div className="flex flex-wrap gap-2">
                    {["Tes Tulis", "Kuis", "Peta Konsep", "Wawancara", "Demonstrasi"].map((m) => (
                        <button 
                            key={m} 
                            onClick={() => setSingleSelection('asesmenDiagnostik', m)}
                            className={`px-4 py-2 rounded-full text-xs font-medium border transition-all ${formData.asesmenDiagnostik === m ? 'bg-green-600 border-green-600 text-white' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}
                        >
                            {m}
                        </button>
                    ))}
                </div>
            </div>
            
            {/* Toggles */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="flex flex-col gap-2">
                    <label className="text-sm font-medium text-gray-700">Asesmen Formatif:</label>
                    <div className="flex bg-gray-100 p-1 rounded-lg w-fit">
                        {['Ya', 'Tidak'].map(opt => (
                            <button key={opt} onClick={() => setSingleSelection('asesmenFormatif', opt)} className={`px-4 py-1.5 rounded-md text-xs font-medium transition-all ${formData.asesmenFormatif === opt ? 'bg-white text-green-700 shadow-sm border border-gray-200' : 'text-gray-500'}`}>{opt}</button>
                        ))}
                    </div>
                </div>
                <div className="flex flex-col gap-2">
                    <label className="text-sm font-medium text-gray-700">Asesmen Sumatif:</label>
                    <div className="flex bg-gray-100 p-1 rounded-lg w-fit">
                        {['Ya', 'Tidak'].map(opt => (
                            <button key={opt} onClick={() => setSingleSelection('asesmenSumatif', opt)} className={`px-4 py-1.5 rounded-md text-xs font-medium transition-all ${formData.asesmenSumatif === opt ? 'bg-white text-green-700 shadow-sm border border-gray-200' : 'text-gray-500'}`}>{opt}</button>
                        ))}
                    </div>
                </div>
                <div className="flex flex-col gap-2">
                    <label className="text-sm font-medium text-gray-700">Jobsheet Praktikum:</label>
                    <div className="flex bg-gray-100 p-1 rounded-lg w-fit">
                        {['Buat', 'Tidak'].map(opt => (
                            <button key={opt} onClick={() => setSingleSelection('buatJobsheet', opt)} className={`px-4 py-1.5 rounded-md text-xs font-medium transition-all ${formData.buatJobsheet === opt ? 'bg-white text-green-700 shadow-sm border border-gray-200' : 'text-gray-500'}`}>{opt}</button>
                        ))}
                    </div>
                </div>
            </div>

          </div>
        </div>

        {/* ACTION BUTTON */}
        <div className="sticky bottom-6 z-40">
            <button 
                onClick={handleGenerateFullModul}
                disabled={isGenerating}
                className="w-full bg-gradient-to-r from-green-600 to-emerald-700 hover:from-green-700 hover:to-emerald-800 text-white font-bold text-lg py-4 rounded-xl shadow-lg shadow-green-200 transition-all flex items-center justify-center gap-3 disabled:opacity-75 disabled:cursor-not-allowed transform hover:scale-[1.01]"
            >
                {isGenerating ? (
                    <>
                        <Loader2 className="animate-spin" size={24} />
                        <span className="text-sm font-normal">{loadingText}</span>
                    </>
                ) : (
                    <>
                        <Sparkles size={24} className="text-yellow-300" />
                        Generate Modul Ajar
                    </>
                )}
            </button>
        </div>

      </div>
    </div>
  );
};

// --- PREVIEW COMPONENT ---
const FinalDocument = ({ data }) => {
    const ai = data.generated; // Shortcut ke data AI

    // Parser untuk mengubah teks dengan tanda bintang *menjadi bold*
    const formatText = (text) => {
        if (!text) return null;
        
        // Membagi teks berdasarkan double newline untuk paragraf
        return text.split('\n\n').map((paragraph, pIdx) => {
             // Regex untuk menangkap *teks* atau **teks**
             const parts = paragraph.split(/(\*{1,2}.*?\*{1,2})/g);
             
             return (
                 <p key={pIdx} className="mb-2 text-justify">
                    {parts.map((part, index) => {
                        // Jika cocok dengan pola *...* atau **...**
                        if (part.match(/^\*{1,2}.*\*{1,2}$/)) {
                            const cleanText = part.replace(/\*/g, ''); // Hapus bintang
                            return <b key={index} className="font-bold">{cleanText}</b>;
                        }
                        return part;
                    })}
                 </p>
             );
        });
    };

    const listText = (text) => {
        if (!text) return null;
        return (
            <ul className="list-disc pl-5 mb-1 space-y-1">
                {text.split('\n').map((str, index) => {
                    if(!str.trim()) return null;
                    const cleanStr = str.replace(/^[-*•]\s*/, '').replace(/\*/g, ''); // Hapus bullet dan bintang
                    return <li key={index}>{cleanStr}</li>
                })}
            </ul>
        );
    };

    return (
        <div className="font-arial text-sm text-gray-900 leading-relaxed">
            {/* HEADER SEKOLAH */}
            <div className="text-center border-b-4 border-double border-black pb-4 mb-6">
                <h1 className="text-2xl font-bold tracking-wide text-gray-900">SMIPDA MALANG</h1>
                <h2 className="text-xl font-bold text-gray-900">SMP ISLAM PLUS DAARUL HUDA</h2>
                <p className="text-xs text-gray-600 mt-1 italic">Modul Ajar Pembelajaran - Kurikulum Merdeka</p>
            </div>

            <h3 className="text-xl font-bold text-center mb-6 uppercase text-gray-800 border-b border-black pb-2 w-fit mx-auto">
                Modul Ajar: {data.mapel}
            </h3>

            {/* Table Styling: Hijau Kalem (Green-50) & Aksen Kuning (Yellow-50/100) */}
            <table className="w-full border-collapse mb-8 border border-black">
                <tbody>
                    {/* INFO UMUM */}
                    <tr className="border-b border-black">
                        {/* Hijau Kalem untuk Header Kiri */}
                        <th className="bg-[#e8f5e9] w-[25%] p-3 text-left align-top font-bold text-[#1b5e20] border-r border-black">
                            1. Identifikasi Awal & Informasi Umum
                        </th>
                        <td className="p-3 align-top">
                            <ul className="list-none space-y-1 mb-4">
                                <li><b>Nama Guru:</b> {data.guru}</li>
                                <li><b>Jenjang/Kelas:</b> {data.jenjang} / {data.kelas}</li>
                                <li><b>Alokasi Waktu:</b> {data.jmlPertemuan} Pertemuan ({data.jamPerPertemuan} x {data.menitPerJam} Menit)</li>
                                <li><b>Materi Pokok:</b> {data.mapel}</li> 
                            </ul>
                            
                            <div className="mb-4">
                                {/* Variasi Kuning Kalem pada Sub-Header */}
                                <h5 className="font-bold bg-yellow-50 text-gray-800 border-l-4 border-yellow-400 px-2 py-1 mb-2">Profil Pelajar Pancasila</h5>
                                {listText(ai.informasiUmum.profilPancasila)}
                            </div>

                            <div>
                                <h5 className="font-bold bg-yellow-50 text-gray-800 border-l-4 border-yellow-400 px-2 py-1 mb-2">Asesmen Awal (Diagnostik)</h5>
                                <p className="mb-2 italic text-gray-700">{ai.informasiUmum.strategiAsesmenAwal}</p>
                                <p className="font-semibold text-xs text-gray-600 mt-2">Tindak Lanjut:</p>
                                <ul className="list-disc pl-5 text-xs text-gray-700">
                                    <li><b>Mahir:</b> {ai.informasiUmum.tindakLanjut.mahir}</li>
                                    <li><b>Cakap:</b> {ai.informasiUmum.tindakLanjut.cakap}</li>
                                    <li><b>Butuh Bimbingan:</b> {ai.informasiUmum.tindakLanjut.butuhBimbingan}</li>
                                </ul>
                            </div>
                        </td>
                    </tr>

                    {/* KOMPONEN INTI */}
                    <tr className="border-b border-black">
                         <th className="bg-[#e8f5e9] w-[25%] p-3 text-left align-top font-bold text-[#1b5e20] border-r border-black">
                            2. Desain Pembelajaran (Komponen Inti)
                        </th>
                        <td className="p-3 align-top">
                             <h5 className="font-bold text-[#2e7d32] mb-2">Tujuan Pembelajaran</h5>
                             <p className="mb-4 bg-yellow-50 p-2 border border-yellow-200 rounded text-gray-800">{data.tujuan}</p>

                             <h5 className="font-bold text-[#2e7d32] mb-2">Kriteria Ketuntasan (KKTP)</h5>
                             <div className="mb-4">{listText(data.kktp)}</div>

                             <h5 className="font-bold text-[#2e7d32] mb-2">Pemahaman Bermakna</h5>
                             <p className="mb-4">{ai.komponenInti.pemahamanBermakna}</p>

                             <h5 className="font-bold text-[#2e7d32] mb-2">Pertanyaan Pemantik</h5>
                             <p className="mb-4 italic text-gray-600">"{ai.komponenInti.pertanyaanPemantik}"</p>

                             <h5 className="font-bold text-[#2e7d32] mb-1">Model & Metode</h5>
                             <p className="mb-1"><b>Model:</b> {data.modelPembelajaran}</p>
                             <p><b>Metode:</b> {data.metodePembelajaran.join(', ')}</p>
                        </td>
                    </tr>

                    {/* KEGIATAN PEMBELAJARAN */}
                     <tr className="border-b border-black">
                         <th className="bg-[#e8f5e9] w-[25%] p-3 text-left align-top font-bold text-[#1b5e20] border-r border-black">
                            3. Langkah Pembelajaran
                        </th>
                        <td className="p-3 align-top">
                             <div className="mb-4">
                                <h5 className="font-bold text-[#1b5e20] border-b border-green-200 mb-1">A. Pendahuluan</h5>
                                {formatText(ai.langkahPembelajaran.pendahuluan)}
                             </div>
                             <div className="mb-4">
                                <h5 className="font-bold text-[#1b5e20] border-b border-green-200 mb-1">B. Kegiatan Inti ({data.modelPembelajaran})</h5>
                                {formatText(ai.langkahPembelajaran.inti)}
                             </div>
                             <div>
                                <h5 className="font-bold text-[#1b5e20] border-b border-green-200 mb-1">C. Penutup</h5>
                                {formatText(ai.langkahPembelajaran.penutup)}
                             </div>
                        </td>
                    </tr>
                    
                    {/* RENCANA ASESMEN */}
                    <tr className="border-b border-black">
                         <th className="bg-[#e8f5e9] w-[25%] p-3 text-left align-top font-bold text-[#1b5e20] border-r border-black">
                            4. Rencana Asesmen
                        </th>
                        <td className="p-3 align-top">
                            <p className="mb-2"><b>1. Asesmen Diagnostik ({data.asesmenDiagnostik}):</b> {ai.asesmen.diagnostik}</p>
                            {data.asesmenFormatif === 'Ya' && (
                                <p className="mb-2"><b>2. Asesmen Formatif:</b> {ai.asesmen.formatif}</p>
                            )}
                            {data.asesmenSumatif === 'Ya' && (
                                <p className="mb-2"><b>3. Asesmen Sumatif:</b> {ai.asesmen.sumatif}</p>
                            )}
                        </td>
                    </tr>
                </tbody>
            </table>

            {/* LAMPIRAN */}
            <div className="break-before-page mt-8 pt-6">
                 <h2 className="text-xl font-bold text-center text-[#1b5e20] mb-6 uppercase border-b-2 border-green-200 pb-2">Lampiran Modul Ajar</h2>
                 
                 <div className="mb-8">
                    <h3 className="font-bold text-lg text-green-800 mb-2 border-b border-gray-200">1. Ringkasan Materi Ajar</h3>
                    <div className="bg-[#f1f8e9] p-4 rounded text-justify border border-green-100">
                        {formatText(ai.lampiran.materiAjar)}
                    </div>
                 </div>

                 {data.buatJobsheet === 'Buat' && (
                     <div className="mb-8">
                        <h3 className="font-bold text-lg text-green-800 mb-2 border-b border-gray-200">2. Lembar Kerja Peserta Didik (LKPD)</h3>
                        <div className="border border-black p-4 rounded bg-white">
                            {formatText(ai.lampiran.lkpd)}
                        </div>
                     </div>
                 )}

                 <div className="mb-8">
                    <h3 className="font-bold text-lg text-green-800 mb-2 border-b border-gray-200">3. Rubrik Penilaian</h3>
                    <div className="border border-gray-300 p-4 rounded bg-gray-50">
                        {formatText(ai.lampiran.rubrik)}
                    </div>
                 </div>
            </div>

            {/* TANDA TANGAN SECTION */}
            <div className="break-inside-avoid mt-12 pt-8 border-t border-gray-300">
                <div className="flex justify-between px-8 text-center">
                    <div>
                        <p className="mb-20">Mengetahui,<br/>Kepala Sekolah</p>
                        <p className="font-bold underline">{data.kepalaSekolah}</p>
                    </div>
                    <div>
                        <p className="mb-20">{data.kota}, {data.tanggal}<br/>Guru Mata Pelajaran</p>
                        <p className="font-bold underline">{data.guru}</p>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ModulAjarApp;