import React, { useState, useEffect } from 'react';
import { 
  School, 
  ShieldCheck, 
  Upload, 
  FileText, 
  CheckCircle2, 
  AlertTriangle, 
  MessageSquare, 
  Bell, 
  History, 
  Send, 
  Check, 
  X, 
  FileCheck,
  HelpCircle,
  Sparkles,
  Download,
  ArrowRight,
  Info,
  ChevronRight,
  RefreshCw,
  Search,
  BookOpen,
  FileSignature,
  Percent,
  CheckSquare,
  Award,
  UserCheck
} from 'lucide-react';

// Data awal sekolah dampingan Inspektorat Provinsi NTB (Wilayah Lombok & Sumbawa)
const INITIAL_SCHOOLS = [
  {
    id: 1,
    npsn: "50201234",
    name: "SMA Negeri 1 Mataram",
    status: "Konsultasi Aktif", // Aman, Konsultasi Aktif, Butuh Pendampingan
    lastUpdate: "18 Juni 2026",
    budget: 450000000,
    consultedBudget: 315000000,
    address: "Jl. Pendidikan No. 21, Kota Mataram, Lombok",
    headmaster: "Drs. H. Lalu Muhammad, M.Pd",
    treasurer: "Baiq Rahmawati, S.E",
    complianceScore: 75,
    isReportSubmitted: false,
    signatureName: "",
    isSigned: false
  },
  {
    id: 2,
    npsn: "50205678",
    name: "SMA Negeri 2 Sumbawa Besar",
    status: "Butuh Pendampingan",
    lastUpdate: "15 Juni 2026",
    budget: 520000000,
    consultedBudget: 120000000,
    address: "Jl. Garuda No. 12, Sumbawa Besar, Sumbawa",
    headmaster: "Dr. I Ketut Budi, M.Si",
    treasurer: "Rian Hidayat, A.Md",
    complianceScore: 25,
    isReportSubmitted: false,
    signatureName: "",
    isSigned: false
  },
  {
    id: 3,
    npsn: "50209101",
    name: "SMA Swasta Harapan Lombok Barat",
    status: "Aman",
    lastUpdate: "18 Juni 2026",
    budget: 300000000,
    consultedBudget: 300000000,
    address: "Jl. Raya Senggigi, Lombok Barat",
    headmaster: "Elisa Anastasia, M.Hum",
    treasurer: "Dewi Lestari",
    complianceScore: 100,
    isReportSubmitted: true,
    signatureName: "Elisa Anastasia, M.Hum",
    isSigned: true
  }
];

// Data rancangan rencana belanja yang dikonsultasikan (Terdistribusi per Sekolah)
const INITIAL_PROPOSED_ITEMS = [
  { 
    id: "PROP-101", 
    schoolId: 1,
    activity: "Penyediaan Paket Internet Belajar Siswa Kurang Mampu", 
    plannedCost: 15000000, 
    consultationStatus: "Disetujui APIP", 
    notes: "Sesuai dengan Juknis BOS terkait operasional digital daerah NTB. Pastikan daftar penerima dibuat terperinci."
  },
  { 
    id: "PROP-102", 
    schoolId: 1,
    activity: "Rehab Sedang Sanitasi Toilet Siswa SMA Mataram", 
    plannedCost: 45000000, 
    consultationStatus: "Perbaikan Draft", 
    notes: "Mohon lampirkan rincian volume bahan bangunan lokal NTB dan foto kondisi awal sanitasi toilet."
  },
  { 
    id: "PROP-103", 
    schoolId: 1,
    activity: "Pengadaan Buku Referensi Adat Sasak Samawa Mbojo (SASAMBO)", 
    plannedCost: 20000000, 
    consultationStatus: "Draf Diajukan", 
    notes: "Menunggu penelaahan dari Konsultan Inspektorat NTB."
  },
  { 
    id: "PROP-201", 
    schoolId: 2,
    activity: "Sewa Bus Pariwisata Studi Banding Guru ke Mataram", 
    plannedCost: 35000000, 
    consultationStatus: "Perbaikan Draft", 
    notes: "Pariwisata murni/studi banding guru tidak masuk dalam prioritas komponen Juknis BOS reguler. Harap tinjau kembali usulan Anda."
  },
  { 
    id: "PROP-301", 
    schoolId: 3,
    activity: "Langganan Aplikasi Pembelajaran Digital Interaktif", 
    plannedCost: 40000000, 
    consultationStatus: "Sesuai Juknis (Advisory Issued)", 
    notes: "Disetujui. Advisory Note resmi No. ADV/BOS-NTB/2026/089 telah diterbitkan."
  }
];

// Draft Bukti Transaksi (Kwitansi) sebelum transaksi riil dieksekusi
const INITIAL_DRAFT_SPJ = [
  { 
    id: "CONS-501", 
    schoolId: 1,
    proposedCode: "PROP-101",
    description: "Rencana Kuitansi Pembelian Paket Kuota Seluler - Provider Indolink Mataram", 
    amount: 15000000, 
    date: "14 Mei 2026", 
    file: "Draft_Kwitansi_Internet.pdf",
    hasAdvice: true,
    adviceText: "Draf kwitansi sudah sah secara format perpajakan NTB. Lampirkan lembar penerima manfaat digital saat penutupan.",
    status: "Sesuai" 
  },
  { 
    id: "CONS-502", 
    schoolId: 1,
    proposedCode: "PROP-102",
    description: "Rencana Nota Pembelian Semen & Keramik - Toko Bangunan Mataram Jaya", 
    amount: 28000000, 
    date: "18 Juni 2026", 
    file: "Draft_Nota_Sanitasi.pdf",
    hasAdvice: true,
    adviceText: "Nominal pengadaan di atas 10 juta disarankan melampirkan perbandingan minimal 2 e-commerce atau toko bangunan lokal terdekat di Lombok.",
    status: "Butuh Pendampingan" 
  },
  { 
    id: "CONS-601", 
    schoolId: 2,
    proposedCode: "PROP-201",
    description: "Draf Kontrak Penyewaan Bus Pariwisata Sumbawa - PO Lancar Jaya", 
    amount: 35000000, 
    date: "10 Juni 2026", 
    file: "Draf_Sewa_Bus.pdf",
    hasAdvice: true,
    adviceText: "Sewa transportasi non-operasional harian sekolah dilarang keras dalam petunjuk penggunaan dana BOS reguler.",
    status: "Butuh Pendampingan" 
  }
];

// Riwayat Chat Konsultasi Interaktif
const INITIAL_CHATS = [
  { schoolId: 1, sender: "Sekolah", time: "18 Juni 2026, 10:15", message: "Selamat pagi Pak Auditor Inspektorat NTB, kami berencana melakukan rehabilitasi toilet sekolah senilai 45 juta di SMAN 1 Mataram. Apakah draf rancangan belanja kami sudah aman secara Juknis?" },
  { schoolId: 1, sender: "Konsultan APIP", time: "18 Juni 2026, 11:30", message: "Selamat pagi. Secara prinsip diperbolehkan selama masuk kategori pemeliharaan ringan/sedang. Silakan unggah draf rincian komponen materialnya di Menu Klinik SPJ agar kami teliti terlebih dahulu nilai wajarnya." },
  { schoolId: 2, sender: "Sekolah", time: "15 Juni 2026, 09:00", message: "Mohon bimbingan terkait usulan sewa bus kami yang diberi status Perlu Perbaikan di Sumbawa." },
  { schoolId: 2, sender: "Konsultan APIP", time: "15 Juni 2026, 14:20", message: "Sewa bus pariwisata tidak memiliki landasan hukum di Juknis BOS reguler. Kami sarankan mengalihkan anggaran ini ke penyediaan buku penunjang digital bermuatan lokal NTB (SASAMBO) atau pelatihan guru berbasis modul lokal." }
];

// Kuesioner Kepatuhan Sekolah
const INITIAL_COMPLIANCE_ANSWERS = {
  1: { q1: true, q2: true, q3: false, q4: true },
  2: { q1: false, q2: false, q3: false, q4: true },
  3: { q1: true, q2: true, q3: true, q4: true }
};

export default function App() {
  const [role, setRole] = useState('sekolah'); // 'sekolah' | 'auditor'
  const [schools, setSchools] = useState(INITIAL_SCHOOLS);
  const [proposedItems, setProposedItems] = useState(INITIAL_PROPOSED_ITEMS);
  const [draftSpjList, setDraftSpjList] = useState(INITIAL_DRAFT_SPJ);
  const [chats, setChats] = useState(INITIAL_CHATS);
  const [complianceAnswers, setComplianceAnswers] = useState(INITIAL_COMPLIANCE_ANSWERS);
  
  // ID Sekolah Aktif yang dikonsultasikan / ditelaah
  const [selectedSchoolId, setSelectedSchoolId] = useState(1);
  
  // Status Langkah Internal Masing-masing Panel
  const [schoolStep, setSchoolStep] = useState(1); // 1: Klinik Perencanaan, 2: Klinik SPJ, 3: Chat Bimbingan & Advisory
  const [auditorStep, setAuditorStep] = useState(1); // 1: Peta Pendampingan, 2: Telaah Kwitansi, 3: Otorisasi Advisory
  
  const [activeSpjTab, setActiveSpjTab] = useState('list'); // 'list' | 'add'
  const [searchQuery, setSearchQuery] = useState('');
  const [filterStatus, setFilterStatus] = useState('Semua');

  // Form Input Rencana Anggaran Baru (Sekolah)
  const [newActivity, setNewActivity] = useState('');
  const [newCost, setNewCost] = useState('');

  // Form Input Telaah Transaksi Baru (Sekolah)
  const [newDraftDesc, setNewDraftDesc] = useState('');
  const [newDraftAmount, setNewDraftAmount] = useState('');
  const [newDraftTarget, setNewDraftTarget] = useState('');
  const [newDraftFile, setNewDraftFile] = useState(null);

  // Custom Modal State untuk Auditor (Coaching Note)
  const [isCoachingModalOpen, setIsCoachingModalOpen] = useState(false);
  const [coachingTargetId, setCoachingTargetId] = useState(null);
  const [coachingText, setCoachingText] = useState('');
  const [coachingStatusValue, setCoachingStatusValue] = useState(true); // true = Sesuai, false = Butuh Pendampingan

  // Form Advisory Note Baru (APIP)
  const [advisoryText, setAdvisoryText] = useState('');
  const [isAdvisoryModalOpen, setIsAdvisoryModalOpen] = useState(false);
  const [selectedDraftId, setSelectedDraftId] = useState(null);

  // States Komunikasi
  const [chatMessage, setChatMessage] = useState('');
  const [notifications, setNotifications] = useState([
    { id: 1, schoolId: 1, type: "info", message: "Auditor Pendamping NTB memberikan saran perbaikan pada draf belanja Sanitasi.", date: "18 Juni 2026", read: false },
    { id: 2, schoolId: 3, type: "success", message: "Advisory Note resmi e-Review untuk Kegiatan Pembelajaran Digital telah diterbitkan.", date: "17 Juni 2026", read: true }
  ]);
  const [consultingLogs, setConsultingLogs] = useState([
    { id: 1, schoolId: 1, time: "18 Juni 2026, 11:30 WIB", user: "Konsultan APIP", action: "Menambahkan bimbingan preventif pada draf belanja Sanitasi" },
    { id: 2, schoolId: 1, time: "18 Juni 2026, 10:15 WIB", user: "Bendahara BOS", action: "Mengirimkan draf perencanaan internet siswa untuk penelaahan awal" }
  ]);

  // States untuk Chatbot AI Juknis BOS (Gemini API)
  const [aiInput, setAiInput] = useState('');
  const [aiChat, setAiChat] = useState([
    { role: 'assistant', text: 'Halo! Saya Asisten AI Resmi e-Review Inspektorat NTB. Saya siap membantu menjawab pertanyaan preventif seputar regulasi Juknis BOS di lingkungan Provinsi Nusa Tenggara Barat. Silakan tanyakan hal-hal terkait kegiatan pengawasan BOS NTB!' }
  ]);
  const [isAiLoading, setIsAiLoading] = useState(false);
  const [toast, setToast] = useState(null);

  // Ambil data sekolah yang aktif saat ini
  const activeSchool = schools.find(s => s.id === selectedSchoolId) || schools[0];

  // Set default draft target dropdown saat komponen di-load / sekolah diganti
  useEffect(() => {
    const schoolProposals = proposedItems.filter(p => p.schoolId === selectedSchoolId);
    if (schoolProposals.length > 0) {
      setNewDraftTarget(schoolProposals[0].id);
    } else {
      setNewDraftTarget('');
    }
  }, [selectedSchoolId, proposedItems]);

  const showToast = (message, type = 'success') => {
    setToast({ message, type });
    setTimeout(() => { setToast(null); }, 4000);
  };

  const handleAskAi = async (e) => {
    e.preventDefault();
    if (!aiInput.trim()) return;

    const userMessage = aiInput;
    setAiChat((prev) => [...prev, { role: 'user', text: userMessage }]);
    setAiInput('');
    setIsAiLoading(true);

    const systemPrompt = `
      Anda adalah "e-Review Smart Advisor", asisten konsultasi kecerdasan buatan resmi dari Inspektorat Provinsi Nusa Tenggara Barat (NTB).
      
      ATURAN SANGAT KETAT / WAJIB DIPATUHI:
      1. Anda HANYA boleh menjawab pertanyaan yang berkaitan dengan kegiatan pengawasan, konsultasi preventif Dana BOS/BOSP, regulasi Juknis BOS, serta hal-hal substantif terkait program kerja di bawah naungan Inspektorat Provinsi Nusa Tenggara Barat (NTB) pada jenjang pendidikan menengah (SMA/SMK/SLB) di wilayah Lombok dan Sumbawa.
      2. Jika pengguna menanyakan pertanyaan di luar konteks tersebut (misalnya tentang resep makanan, tips cinta, ilmu pemrograman umum, berita hiburan, matematika non-sekolah, atau daerah di luar NTB seperti Jakarta, Jawa, dll.), Anda HARUS menolaknya secara halus namun tegas.
      3. Contoh kalimat penolakan wajib: "Mohon maaf, sebagai Asisten AI Resmi e-Review Inspektorat NTB, saya hanya berwenang melayani konsultasi preventif seputar Dana BOS/BOSP dan program pengawasan di lingkungan Provinsi Nusa Tenggara Barat. Silakan ajukan pertanyaan yang relevan."
      4. Jika pertanyaan di dalam konteks, jawablah secara suportif dan berlandaskan aturan hukum nasional Indonesia & peraturan Gubernur NTB yang relevan. Berikan solusi jalan keluar alternatif yang aman apabila hal yang mereka tanyakan dilarang dalam Juknis BOS.
    `;

    try {
      const apiKey = ""; // Canvas menyuntikkan API Key secara otomatis
      const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;

      const payload = {
        contents: [
          { role: 'user', parts: [{ text: userMessage }] }
        ],
        systemInstruction: {
          parts: [{ text: systemPrompt }]
        }
      };

      const response = await fetch(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      const result = await response.json();
      const answer = result?.candidates?.[0]?.content?.parts?.[0]?.text || 
        "Mohon maaf, saya sedang mengalami kendala jaringan pendampingan di server Inspektorat NTB. Silakan coba ajukan pertanyaan Anda kembali.";

      setAiChat((prev) => [...prev, { role: 'assistant', text: answer }]);
    } catch (err) {
      console.error(err);
      setAiChat((prev) => [...prev, { role: 'assistant', text: "Terjadi kesalahan koneksi ke server e-Review Inspektorat NTB. Namun secara umum, harap pastikan belanja Anda tertera dalam rencana kerja sekolah dan didukung kwitansi serta nota yang sah." }]);
    } finally {
      setIsAiLoading(false);
    }
  };

  const handleAddProposedItem = (e) => {
    e.preventDefault();
    if (!newActivity || !newCost) {
      showToast("Mohon isi kegiatan dan estimasi anggaran", "error");
      return;
    }

    const newItem = {
      id: `PROP-${Math.floor(400 + Math.random() * 90)}`,
      schoolId: selectedSchoolId,
      activity: newActivity,
      plannedCost: parseInt(newCost),
      consultationStatus: "Draf Diajukan",
      notes: "Menunggu penelaahan awal oleh Konsultan APIP NTB"
    };

    setProposedItems([...proposedItems, newItem]);
    addLog(`Mengajukan draf anggaran baru: "${newActivity}" senilai Rp ${parseInt(newCost).toLocaleString()}`);
    showToast("Draf berhasil diajukan! Auditor pendamping NTB Anda telah menerima notifikasi.", "success");

    setNewActivity('');
    setNewCost('');
  };

  const handleAddDraftSpj = (e) => {
    e.preventDefault();
    if (!newDraftDesc || !newDraftAmount) {
      showToast("Mohon isi semua data deskripsi draf belanja", "error");
      return;
    }

    const newDraft = {
      id: `CONS-${Math.floor(700 + Math.random() * 90)}`,
      schoolId: selectedSchoolId,
      proposedCode: newDraftTarget,
      description: newDraftDesc,
      amount: parseInt(newDraftAmount),
      date: new Date().toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' }),
      file: newDraftFile ? newDraftFile.name : "Draf_Kwitansi_Belanja.pdf",
      hasAdvice: false,
      adviceText: "",
      status: "Diproses"
    };

    setDraftSpjList([...draftSpjList, newDraft]);
    addLog(`Mengajukan draf kwitansi: "${newDraftDesc}" sebesar Rp ${parseInt(newDraftAmount).toLocaleString()}`);
    showToast("Berkas draf transaksi terkirim! Konsultan APIP NTB kini dapat langsung mengulasnya.", "success");

    setNewDraftDesc('');
    setNewDraftAmount('');
    setNewDraftFile(null);
    setActiveSpjTab('list');
  };

  const handleSendChat = (e, senderLabel) => {
    e.preventDefault();
    if (!chatMessage.trim()) return;

    const newChat = {
      schoolId: selectedSchoolId,
      sender: senderLabel,
      time: "Hari ini, Baru saja",
      message: chatMessage
    };

    setChats([...chats, newChat]);
    addLog(`Mengirim pesan bimbingan: "${chatMessage.substring(0, 30)}..."`);
    setChatMessage('');
    showToast("Pesan bimbingan terkirim!", "success");
  };

  const handleToggleQuestion = (qKey) => {
    const currentSchoolAnswers = complianceAnswers[selectedSchoolId] || { q1: false, q2: false, q3: false, q4: false };
    const updatedAnswers = {
      ...currentSchoolAnswers,
      [qKey]: !currentSchoolAnswers[qKey]
    };
    
    let trueCount = 0;
    if (updatedAnswers.q1) trueCount++;
    if (updatedAnswers.q2) trueCount++;
    if (updatedAnswers.q3) trueCount++;
    if (updatedAnswers.q4) trueCount++;
    const newScore = trueCount * 25;

    setComplianceAnswers({
      ...complianceAnswers,
      [selectedSchoolId]: updatedAnswers
    });

    setSchools(schools.map(sch => {
      if (sch.id === selectedSchoolId) {
        return { 
          ...sch, 
          complianceScore: newScore,
          status: newScore >= 75 ? "Aman" : newScore >= 50 ? "Konsultasi Aktif" : "Butuh Pendampingan"
        };
      }
      return sch;
    }));

    showToast("Jawaban disimpan! Kepatuhan internal sekolah diperbarui.", "info");
  };

  const handleSignAndSubmit = (e) => {
    e.preventDefault();
    const signatureInput = activeSchool.signatureName;
    if (!signatureInput || !signatureInput.trim()) {
      showToast("Mohon ketik nama lengkap Kepala Sekolah sebagai tanda tangan virtual.", "error");
      return;
    }

    setSchools(schools.map(sch => {
      if (sch.id === selectedSchoolId) {
        return {
          ...sch,
          isSigned: true,
          isReportSubmitted: true
        };
      }
      return sch;
    }));

    addLog(`Kepala Sekolah (${signatureInput}) menandatangani draf laporan kepatuhan secara digital.`);
    showToast("Laporan Berkala & Deklarasi Kepatuhan telah resmi terkirim ke e-Review APIP NTB!", "success");
  };

  const handleApplyCoaching = (e) => {
    e.preventDefault();
    if (!coachingText.trim()) {
      showToast("Mohon tuliskan catatan bimbingan atau rekomendasi perbaikan.", "error");
      return;
    }

    setDraftSpjList(draftSpjList.map(item => {
      if (item.id === coachingTargetId) {
        return {
          ...item,
          hasAdvice: true,
          adviceText: coachingText,
          status: coachingStatusValue ? "Sesuai" : "Butuh Pendampingan"
        };
      }
      return item;
    }));

    addLog(`[Auditor NTB] Menambahkan bimbingan preventif pada draf ${coachingTargetId}`);
    
    setNotifications([
      { 
        id: Date.now(), 
        schoolId: selectedSchoolId, 
        type: coachingStatusValue ? "success" : "warning", 
        message: `Inspektorat NTB memperbarui status draf ${coachingTargetId}.`, 
        date: "Baru saja", 
        read: false 
      },
      ...notifications
    ]);

    setIsCoachingModalOpen(false);
    setCoachingText('');
    showToast("Rekomendasi preventif (Coaching Note) berhasil dikirimkan!", "success");
  };

  const handlePublishAdvisoryNote = (e) => {
    e.preventDefault();
    if (!advisoryText.trim()) {
      showToast("Mohon tuliskan pokok saran rekomendasi", "error");
      return;
    }

    setProposedItems(proposedItems.map(item => {
      if (item.id === selectedDraftId) {
        return {
          ...item,
          consultationStatus: "Sesuai Juknis (Advisory Issued)",
          notes: `Rekomendasi Resmi APIP NTB: "${advisoryText}"`
        };
      }
      return item;
    }));

    addLog(`[APIP NTB] Menerbitkan Advisory Note Resmi untuk program ${selectedDraftId}`);
    setIsAdvisoryModalOpen(false);
    setAdvisoryText('');
    showToast("Advisory Note Resmi diterbitkan! Lembar rekomendasi PDF siap diunduh sekolah.", "success");
  };

  const addLog = (action) => {
    const newLog = {
      id: Date.now(),
      schoolId: selectedSchoolId,
      time: new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) + " WITA, Hari ini",
      user: role === 'sekolah' ? 'Sekolah' : 'Auditor APIP NTB',
      action
    };
    setConsultingLogs([newLog, ...consultingLogs]);
  };

  const filteredSchools = schools.filter(sch => {
    const matchesSearch = sch.name.toLowerCase().includes(searchQuery.toLowerCase()) || sch.npsn.includes(searchQuery);
    const matchesStatus = filterStatus === 'Semua' || sch.status === filterStatus;
    return matchesSearch && matchesStatus;
  });

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans flex flex-col antialiased selection:bg-indigo-500 selection:text-white">
      
      {/* HEADER UTAMA */}
      <header className="bg-gradient-to-r from-slate-900 to-indigo-950 text-white shadow-xl sticky top-0 z-40 border-b border-indigo-900/35">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex flex-col md:flex-row items-center justify-between gap-4">
          
          <div className="flex items-center gap-3">
            <div className="bg-emerald-600 p-2.5 rounded-2xl text-white shadow-lg shadow-emerald-500/20 flex items-center justify-center">
              <ShieldCheck className="w-6 h-6 text-white" />
            </div>
            <div>
              <h1 className="text-lg sm:text-xl font-black tracking-tight flex items-center gap-2">
                e-Review Inspektorat NTB
                <span className="text-[10px] bg-emerald-500/20 text-emerald-300 px-2.5 py-0.5 rounded-full border border-emerald-500/20 uppercase font-bold">Lombok & Sumbawa</span>
              </h1>
              <p className="text-xs text-slate-400">Sistem Pendampingan & Pre-Review Anggaran BOS Provinsi Nusa Tenggara Barat</p>
            </div>
          </div>

          {/* ACTOR SWITCHER (Tampilan 1-per-1) */}
          <div className="bg-slate-950/80 p-1.5 rounded-2xl flex items-center gap-1.5 border border-slate-800 shadow-inner w-full md:w-auto justify-center">
            <button 
              onClick={() => { setRole('sekolah'); showToast("Beralih ke Portal Sekolah NTB", "info"); }}
              className={`flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold transition-all duration-300 w-1/2 md:w-auto ${role === 'sekolah' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'}`}
            >
              <School className="w-4 h-4" />
              🏫 Portal Sekolah (NTB)
            </button>
            <button 
              onClick={() => { setRole('auditor'); showToast("Beralih ke Portal Inspektorat NTB", "info"); }}
              className={`flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold transition-all duration-300 w-1/2 md:w-auto ${role === 'auditor' ? 'bg-emerald-600 text-white shadow-md' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'}`}
            >
              <ShieldCheck className="w-4 h-4" />
              🔍 Portal Inspektorat NTB
            </button>
          </div>

        </div>
      </header>

      {/* TOAST NOTIFIKASI */}
      {toast && (
        <div className="fixed bottom-5 right-5 z-50 max-w-sm animate-bounce shadow-2xl">
          <div className={`p-4 rounded-xl border flex items-center gap-3 ${
            toast.type === 'success' ? 'bg-emerald-50 border-emerald-200 text-emerald-800 shadow-emerald-100' :
            toast.type === 'warning' ? 'bg-amber-50 border-amber-200 text-amber-800 shadow-amber-100' :
            toast.type === 'error' ? 'bg-rose-50 border-rose-200 text-rose-800 shadow-rose-100' :
            'bg-sky-50 border-sky-200 text-sky-800 shadow-sky-100'
          }`}>
            {toast.type === 'success' && <CheckCircle2 className="w-5 h-5 text-emerald-600 shrink-0" />}
            {toast.type === 'warning' && <AlertTriangle className="w-5 h-5 text-amber-600 shrink-0" />}
            {toast.type === 'info' && <Bell className="w-5 h-5 text-sky-600 shrink-0" />}
            <span className="text-xs font-bold">{toast.message}</span>
          </div>
        </div>
      )}

      {/* WORKSPACE AREA */}
      <main className="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-6">
        
        {/* RUNNING BANNER UNTUK MEMBERI INSTRUKSI INTERAKSI LIVE */}
        <div className="bg-white border border-slate-200/80 text-slate-700 rounded-3xl p-4 mb-6 text-xs flex flex-col md:flex-row md:items-center justify-between gap-3 shadow-sm">
          <div className="flex items-center gap-2.5">
            <span className="bg-emerald-600 text-white font-black px-2.5 py-1 rounded-lg text-[9px] tracking-wider uppercase">Provinsi NTB</span>
            <p className="font-semibold text-slate-600">
              Aplikasi ini berfokus pada <span className="text-emerald-600 font-extrabold">e-Review Pre-Review Dokumen</span> secara preventif. Anda melihat dashboard: 
              <span className="text-emerald-600 font-extrabold capitalize"> {role === 'sekolah' ? 'Sekolah Binaan NTB' : 'APIP Inspektorat NTB'}</span>.
            </p>
          </div>
          <button 
            onClick={() => { setRole(role === 'sekolah' ? 'auditor' : 'sekolah'); }}
            className="text-[11px] font-bold text-emerald-600 hover:text-emerald-800 flex items-center gap-1.5 transition-colors self-end md:self-auto"
          >
            <RefreshCw className="w-3.5 h-3.5" /> Ganti Peran Cepat
          </button>
        </div>

        {/* ========================================================
            PORTAL SEKOLAH (SMA/SMK DI NTB)
            ======================================================== */}
        {role === 'sekolah' && (
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
            
            {/* Main Area: 3 Steps of e-Review */}
            <div className="lg:col-span-8 space-y-6">
              
              <div className="bg-white rounded-3xl p-6 shadow-sm border border-slate-200/60">
                
                {/* SELECTOR SEKOLAH AKTIF */}
                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between border-b border-slate-100 pb-4 mb-6 gap-3">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-600 text-lg">🏫</div>
                    <div>
                      <h2 className="font-black text-base text-slate-800 leading-none">Portal e-Review Sekolah</h2>
                      <p className="text-xs text-slate-500 mt-1">Ulas rencana belanja Anda bersama tim pendamping Inspektorat NTB</p>
                    </div>
                  </div>
                  
                  <div className="flex items-center gap-2 w-full sm:w-auto">
                    <label className="text-[10px] font-bold uppercase text-slate-400 whitespace-nowrap">Nama Sekolah:</label>
                    <select 
                      value={selectedSchoolId}
                      onChange={(e) => {
                        const newId = parseInt(e.target.value);
                        setSelectedSchoolId(newId);
                        showToast(`Pindah akun ke: ${schools.find(s => s.id === newId).name}`, "info");
                      }}
                      className="bg-slate-100 border border-slate-200 text-xs text-slate-700 rounded-xl px-3 py-2 font-bold focus:outline-none w-full sm:w-auto"
                    >
                      {schools.map(s => (
                        <option key={s.id} value={s.id}>{s.name}</option>
                      ))}
                    </select>
                  </div>
                </div>

                {/* LANGKAH-LANGKAH PREVENTIF SEKOLAH */}
                <div className="grid grid-cols-3 gap-2 p-1.5 bg-slate-100 rounded-2xl mb-6">
                  <button 
                    onClick={() => setSchoolStep(1)}
                    className={`py-2.5 px-2 rounded-xl text-xs font-bold transition-all ${schoolStep === 1 ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-600 hover:text-slate-800 hover:bg-slate-200/60'}`}
                  >
                    1. Klinik Perencanaan
                  </button>
                  <button 
                    onClick={() => setSchoolStep(2)}
                    className={`py-2.5 px-2 rounded-xl text-xs font-bold transition-all ${schoolStep === 2 ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-600 hover:text-slate-800 hover:bg-slate-200/60'}`}
                  >
                    2. Klinik SPJ & Kepatuhan
                  </button>
                  <button 
                    onClick={() => setSchoolStep(3)}
                    className={`py-2.5 px-2 rounded-xl text-xs font-bold transition-all ${schoolStep === 3 ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-600 hover:text-slate-800 hover:bg-slate-200/60'}`}
                  >
                    3. Chat & Advisory Note
                  </button>
                </div>

                {/* INFORMASI DETAIL SEKOLAH BINAAN */}
                <div className="bg-slate-50 rounded-2xl p-4 border border-slate-200/80 text-xs text-slate-600 grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                  <div className="md:col-span-2">
                    <span className="text-slate-400 block uppercase text-[8px] font-black tracking-wider">Identitas Sekolah:</span>
                    <strong className="text-slate-800 text-sm">{activeSchool.name}</strong>
                    <span className="text-slate-500 text-[11px] block mt-0.5">NPSN: {activeSchool.npsn} • {activeSchool.address}</span>
                  </div>
                  <div className="flex flex-col justify-between items-start md:items-end border-t md:border-t-0 md:border-l border-slate-200 pt-3 md:pt-0 md:pl-4">
                    <div>
                      <span className="text-slate-400 block uppercase text-[8px] font-black tracking-wider">Status Bimbingan NTB:</span>
                      <span className={`inline-block mt-1 px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase ${
                        activeSchool.status === 'Aman' ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' :
                        activeSchool.status === 'Konsultasi Aktif' ? 'bg-amber-50 text-amber-700 border border-amber-200' :
                        'bg-indigo-50 text-indigo-700 border border-indigo-200'
                      }`}>
                        {activeSchool.status}
                      </span>
                    </div>
                  </div>
                </div>

                {/* TAHAP 1 SEKOLAH: KLINIK PERENCANAAN */}
                {schoolStep === 1 && (
                  <div className="space-y-6 animate-fadeIn">
                    <div className="bg-amber-50/60 p-4 rounded-xl border border-amber-200/40 text-xs text-amber-900 leading-relaxed flex items-start gap-2.5">
                      <span className="text-lg">💡</span>
                      <div>
                        <strong>Klinik Perencanaan Preventif NTB:</strong> Sebelum rancangan program draf sekolah diajukan secara resmi, unggah rencana belanja Anda di bawah ini agar mendapatkan analisis kesesuaian dari tim auditor Inspektorat Provinsi NTB.
                      </div>
                    </div>

                    <form onSubmit={handleAddProposedItem} className="bg-slate-50/50 p-5 rounded-2xl border border-slate-200/80 space-y-4">
                      <h3 className="text-xs sm:text-sm font-black text-slate-700 uppercase tracking-wider flex items-center gap-2">
                        <HelpCircle className="w-5 h-5 text-indigo-600" />
                        Ajukan Rencana Belanja / Kegiatan Baru
                      </h3>
                      
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <label className="block text-[10px] font-extrabold text-slate-500 mb-1.5 uppercase tracking-wider">Nama Rencana Belanja / Program</label>
                          <input 
                            type="text" 
                            required
                            placeholder="Contoh: Pengadaan Kamus Bahasa Daerah Sasambo SMAN 1 Mataram"
                            value={newActivity}
                            onChange={(e) => setNewActivity(e.target.value)}
                            className="w-full bg-white border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 focus:outline-none transition-all font-semibold"
                          />
                        </div>
                        <div>
                          <label className="block text-[10px] font-extrabold text-slate-500 mb-1.5 uppercase tracking-wider">Estimasi Anggaran (Rp)</label>
                          <input 
                            type="number" 
                            required
                            placeholder="Contoh: 15000000"
                            value={newCost}
                            onChange={(e) => setNewCost(e.target.value)}
                            className="w-full bg-white border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 focus:outline-none transition-all font-semibold"
                          />
                        </div>
                      </div>

                      <div className="flex justify-end">
                        <button 
                          type="submit"
                          className="bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold px-5 py-2.5 rounded-xl transition-all flex items-center gap-2 shadow-sm"
                        >
                          Kirim ke Konsultan APIP NTB
                          <ArrowRight className="w-4 h-4" />
                        </button>
                      </div>
                    </form>

                    {/* DAFTAR DRAF KEGIATAN YANG SEDANG DIKONSULTASIKAN */}
                    <div className="space-y-3">
                      <h4 className="text-xs font-black text-slate-400 uppercase tracking-widest">Riwayat Konsultasi Rencana Belanja</h4>
                      <div className="divide-y divide-slate-100 border border-slate-200 rounded-2xl overflow-hidden shadow-sm bg-white">
                        {proposedItems.filter(p => p.schoolId === selectedSchoolId).length === 0 ? (
                          <p className="text-xs text-slate-400 italic p-6 text-center">Belum ada usulan program yang didaftarkan. Gunakan form di atas untuk berkonsultasi.</p>
                        ) : (
                          proposedItems.filter(p => p.schoolId === selectedSchoolId).map((item) => (
                            <div key={item.id} className="p-4 text-xs space-y-2.5 hover:bg-slate-50/20 transition-all">
                              <div className="flex items-center justify-between">
                                <span className="text-[10px] font-mono font-bold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-md">{item.id}</span>
                                <span className={`text-[9px] font-extrabold px-2.5 py-1 rounded-full uppercase ${
                                  item.consultationStatus === 'Disetujui APIP' || item.consultationStatus.includes('Advisory') ? 'bg-emerald-100 text-emerald-800' :
                                  item.consultationStatus === 'Perbaikan Draft' ? 'bg-amber-100 text-amber-800' :
                                  'bg-indigo-50 text-indigo-700'
                                }`}>
                                  {item.consultationStatus}
                                </span>
                              </div>
                              <h4 className="font-bold text-slate-700 leading-snug">{item.activity}</h4>
                              <p className="text-[11px] text-slate-500 bg-slate-50 p-3 rounded-xl border-l-2 border-indigo-500 leading-normal">
                                💡 <strong>Saran Preventif APIP NTB:</strong> {item.notes}
                              </p>
                              <div className="text-right text-[11px]">
                                Rencana Belanja: <strong className="text-slate-800 font-bold text-xs">Rp {item.plannedCost.toLocaleString()}</strong>
                              </div>
                            </div>
                          ))
                        )}
                      </div>
                    </div>

                  </div>
                )}

                {/* TAHAP 2 SEKOLAH: KLINIK SPJ & KEPATUHAN */}
                {schoolStep === 2 && (
                  <div className="space-y-6 animate-fadeIn">
                    
                    {/* KEPATUHAN MANDIRI */}
                    <div className="border border-slate-200 rounded-2xl p-5 bg-indigo-50/30 space-y-4">
                      <div className="flex items-center justify-between flex-wrap gap-2">
                        <div className="flex items-center gap-2">
                          <CheckSquare className="w-5 h-5 text-indigo-600" />
                          <h3 className="text-xs sm:text-sm font-black text-slate-700 uppercase tracking-wider">Kuesioner Kepatuhan Mandiri (Self-Assessment NTB)</h3>
                        </div>
                        <div className="flex items-center gap-1 bg-white px-3 py-1 rounded-full border border-indigo-200">
                          <Percent className="w-3.5 h-3.5 text-indigo-600" />
                          <span className="text-xs font-extrabold text-slate-800">{activeSchool.complianceScore}% Tertib</span>
                        </div>
                      </div>
                      <p className="text-xs text-slate-500 leading-relaxed">
                        Evaluasi tingkat administrasi sekolah Anda secara teratur terhadap aturan Juknis BOS Nasional dan Petunjuk Teknis Daerah NTB.
                      </p>

                      <div className="space-y-2.5">
                        <label className="flex items-start gap-3 p-3 bg-white rounded-xl border border-slate-200 hover:border-indigo-200 cursor-pointer transition-all">
                          <input 
                            type="checkbox"
                            checked={complianceAnswers[selectedSchoolId]?.q1 || false}
                            onChange={() => handleToggleQuestion('q1')}
                            className="mt-0.5 rounded text-indigo-600 focus:ring-indigo-500"
                          />
                          <div className="text-xs">
                            <span className="font-extrabold text-slate-700 block">Kesesuaian Daftar Harga Pasar:</span>
                            <span className="text-slate-400">Seluruh estimasi harga komponen telah divalidasi sesuai dengan Standar Biaya Masukan Daerah Pemprov NTB / e-Catalog.</span>
                          </div>
                        </label>

                        <label className="flex items-start gap-3 p-3 bg-white rounded-xl border border-slate-200 hover:border-indigo-200 cursor-pointer transition-all">
                          <input 
                            type="checkbox"
                            checked={complianceAnswers[selectedSchoolId]?.q2 || false}
                            onChange={() => handleToggleQuestion('q2')}
                            className="mt-0.5 rounded text-indigo-600 focus:ring-indigo-500"
                          />
                          <div className="text-xs">
                            <span className="font-extrabold text-slate-700 block">Ketersediaan Perbandingan Toko:</span>
                            <span className="text-slate-400">Untuk transaksi di atas Rp10.000.000,- kami memiliki minimal 2 pembanding penawaran harga tertulis dari rekanan ber-NPWP di NTB.</span>
                          </div>
                        </label>

                        <label className="flex items-start gap-3 p-3 bg-white rounded-xl border border-slate-200 hover:border-indigo-200 cursor-pointer transition-all">
                          <input 
                            type="checkbox"
                            checked={complianceAnswers[selectedSchoolId]?.q3 || false}
                            onChange={() => handleToggleQuestion('q3')}
                            className="mt-0.5 rounded text-indigo-600 focus:ring-indigo-500"
                          />
                          <div className="text-xs">
                            <span className="font-extrabold text-slate-700 block">Aspek Bebas Benturan Kepentingan:</span>
                            <span className="text-slate-400">Tidak ada pengurus Tim BOS Sekolah yang memiliki hubungan keluarga atau kepemilikan saham dengan toko/rekanan penyedia barang di Lombok/Sumbawa.</span>
                          </div>
                        </label>

                        <label className="flex items-start gap-3 p-3 bg-white rounded-xl border border-slate-200 hover:border-indigo-200 cursor-pointer transition-all">
                          <input 
                            type="checkbox"
                            checked={complianceAnswers[selectedSchoolId]?.q4 || false}
                            onChange={() => handleToggleQuestion('q4')}
                            className="mt-0.5 rounded text-indigo-600 focus:ring-indigo-500"
                          />
                          <div className="text-xs">
                            <span className="font-extrabold text-slate-700 block">Dokumen Pajak & NPWP Toko:</span>
                            <span className="text-slate-400">Penyedia barang menyetujui penarikan PPN/PPh sesuai aturan pajak daerah NTB yang berlaku secara daring.</span>
                          </div>
                        </label>
                      </div>
                    </div>

                    {/* KLINIK DRAFT SPJ */}
                    <div className="space-y-4 pt-4 border-t border-slate-100">
                      <div className="flex gap-2 border-b border-slate-100 pb-2">
                        <button 
                          onClick={() => setActiveSpjTab('list')}
                          className={`px-4 py-2 text-xs font-bold rounded-lg transition-all ${activeSpjTab === 'list' ? 'bg-indigo-50 text-indigo-600 border border-indigo-100' : 'text-slate-500 hover:text-slate-800'}`}
                        >
                          Draf Kwitansi Aktif ({draftSpjList.filter(d => d.schoolId === selectedSchoolId).length})
                        </button>
                        <button 
                          onClick={() => setActiveSpjTab('add')}
                          className={`px-4 py-2 text-xs font-bold rounded-lg transition-all ${activeSpjTab === 'add' ? 'bg-indigo-50 text-indigo-600 border border-indigo-100' : 'text-slate-500 hover:text-slate-800'}`}
                        >
                          + Ajukan Draft Nota Baru
                        </button>
                      </div>

                      {activeSpjTab === 'list' ? (
                        <div className="space-y-3">
                          <div className="divide-y divide-slate-100 border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-sm">
                            {draftSpjList.filter(d => d.schoolId === selectedSchoolId).length === 0 ? (
                              <p className="text-xs text-slate-400 italic p-6 text-center">Belum ada draf kwitansi yang diulas.</p>
                            ) : (
                              draftSpjList.filter(d => d.schoolId === selectedSchoolId).map((draft) => (
                                <div key={draft.id} className="p-4 text-xs space-y-3 hover:bg-slate-50/20 transition-all">
                                  <div className="flex items-center justify-between flex-wrap gap-2">
                                    <div className="flex items-center gap-2">
                                      <span className="text-[10px] font-mono font-bold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-md">{draft.id}</span>
                                      <span className="text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded font-mono">Pagu: {draft.proposedCode}</span>
                                    </div>
                                    <span className={`text-[9px] font-extrabold px-2.5 py-1 rounded-full uppercase ${
                                      draft.status === 'Sesuai' ? 'bg-emerald-100 text-emerald-800' :
                                      draft.status === 'Butuh Pendampingan' ? 'bg-amber-100 text-amber-800' :
                                      'bg-indigo-50 text-indigo-700'
                                    }`}>
                                      {draft.status}
                                    </span>
                                  </div>
                                  
                                  <h4 className="font-bold text-slate-700 leading-snug">{draft.description}</h4>
                                  <p className="text-[10px] text-slate-400">File Draft SPJ: <span className="underline font-mono text-indigo-500">{draft.file}</span></p>

                                  {draft.hasAdvice && (
                                    <div className="bg-indigo-50/50 border border-dashed border-indigo-200 rounded-xl p-3.5 text-[11px] text-indigo-950 leading-relaxed">
                                      <span className="font-extrabold block text-indigo-900">📑 Saran / Hasil Pre-Review APIP NTB:</span>
                                      <p className="italic">"{draft.adviceText}"</p>
                                    </div>
                                  )}

                                  <div className="text-right text-[11px]">
                                    Estimasi Pengeluaran: <strong className="text-slate-800 font-bold text-xs">Rp {draft.amount.toLocaleString()}</strong>
                                  </div>
                                </div>
                              ))
                            )}
                          </div>
                        </div>
                      ) : (
                        <form onSubmit={handleAddDraftSpj} className="bg-white p-5 rounded-2xl border border-slate-200 space-y-4 shadow-sm">
                          <h3 className="text-xs sm:text-sm font-black text-slate-700 uppercase tracking-wider">Ajukan Draft Nota/Kwitansi untuk Pre-Review</h3>
                          
                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                              <label className="block text-[10px] font-extrabold text-slate-500 mb-1.5 uppercase tracking-wider">Hubungkan Rencana Anggaran</label>
                              <select 
                                value={newDraftTarget}
                                onChange={(e) => setNewDraftTarget(e.target.value)}
                                className="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs focus:ring-1 focus:ring-indigo-500 focus:outline-none font-bold"
                              >
                                {proposedItems.filter(p => p.schoolId === selectedSchoolId).map(item => (
                                  <option key={item.id} value={item.id}>{item.id} - {item.activity.substring(0, 30)}...</option>
                                ))}
                              </select>
                            </div>
                            <div>
                              <label className="block text-[10px] font-extrabold text-slate-500 mb-1.5 uppercase tracking-wider">Estimasi Pengeluaran (Rp)</label>
                              <input 
                                type="number" 
                                required
                                placeholder="Contoh: 15000000"
                                value={newDraftAmount}
                                onChange={(e) => setNewDraftAmount(e.target.value)}
                                className="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs focus:ring-1 focus:ring-indigo-500 focus:outline-none font-semibold"
                              />
                            </div>
                          </div>

                          <div>
                            <label className="block text-[10px] font-extrabold text-slate-500 mb-1.5 uppercase tracking-wider">Deskripsi Detail Transaksi & Rencana Rekanan</label>
                            <input 
                              type="text" 
                              required
                              placeholder="Contoh: Rencana Kwitansi Belanja Buku Kurikulum Merdeka Fase F - CV Toko Buku Mataram"
                              value={newDraftDesc}
                              onChange={(e) => setNewDraftDesc(e.target.value)}
                              className="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs focus:ring-1 focus:ring-indigo-500 focus:outline-none font-semibold"
                            />
                          </div>

                          <div>
                            <label className="block text-[10px] font-extrabold text-slate-500 mb-1.5 uppercase tracking-wider">Unggah Draft Dokumen (Format PDF/Kwitansi Gambar)</label>
                            <div className="border border-dashed border-slate-300 hover:border-indigo-400 rounded-2xl p-6 text-center cursor-pointer relative transition-all bg-slate-50/50">
                              <input 
                                type="file" 
                                onChange={(e) => setNewDraftFile(e.target.files[0])}
                                className="absolute inset-0 opacity-0 cursor-pointer" 
                              />
                              <div className="flex flex-col items-center justify-center space-y-2 text-slate-400">
                                <Upload className="w-8 h-8 text-indigo-500" />
                                <span className="text-xs font-bold text-slate-600">{newDraftFile ? newDraftFile.name : "Pilih file rancangan dokumen"}</span>
                                <span className="text-[10px]">Format PDF / Gambar Maks. 10MB</span>
                              </div>
                            </div>
                          </div>

                          <div className="flex justify-end gap-2.5 pt-2">
                            <button 
                              type="button" 
                              onClick={() => setActiveSpjTab('list')}
                              className="bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold px-4 py-2.5 rounded-xl transition-all"
                            >
                              Batal
                            </button>
                            <button 
                              type="submit" 
                              className="bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold px-4 py-2.5 rounded-xl transition-all"
                            >
                              Kirim ke APIP NTB
                            </button>
                          </div>
                        </form>
                      )}
                    </div>

                    {/* DIGITAL SIGNATURE KEPALA SEKOLAH */}
                    <div className="border-t border-slate-100 pt-6 space-y-4">
                      <div className="flex items-center gap-2">
                        <FileSignature className="w-5 h-5 text-indigo-600" />
                        <h3 className="text-xs sm:text-sm font-black text-slate-700 uppercase tracking-wider">Deklarasi & Persetujuan Kepala Sekolah</h3>
                      </div>
                      <p className="text-xs text-slate-500 leading-relaxed">
                        Sebelum draf diverifikasi secara formal oleh Inspektorat Provinsi NTB, Kepala Sekolah wajib menyetujui pernyataan mandiri kepatuhan ini secara virtual.
                      </p>

                      {activeSchool.isReportSubmitted ? (
                        <div className="bg-emerald-50 border border-emerald-200 rounded-2xl p-5 text-center space-y-2">
                          <Award className="w-8 h-8 text-emerald-600 mx-auto" />
                          <h4 className="text-xs font-black text-emerald-800 uppercase tracking-widest">Laporan Kepatuhan Mandiri Terkirim</h4>
                          <p className="text-xs text-emerald-700">Tanda Tangan Digital Sah: <strong className="font-mono bg-white px-2 py-1 rounded border border-emerald-100">{activeSchool.signatureName || activeSchool.headmaster}</strong></p>
                        </div>
                      ) : (
                        <form onSubmit={handleSignAndSubmit} className="bg-slate-50/50 border border-slate-200 rounded-2xl p-5 space-y-4">
                          <div>
                            <label className="block text-[10px] font-extrabold text-slate-500 mb-1.5 uppercase tracking-wider">Nama Lengkap Kepala Sekolah</label>
                            <input 
                              type="text" 
                              required
                              placeholder="Ketik Nama Lengkap beserta Gelar Kepala Sekolah"
                              value={activeSchool.signatureName}
                              onChange={(e) => {
                                setSchools(schools.map(s => s.id === selectedSchoolId ? { ...s, signatureName: e.target.value } : s));
                              }}
                              className="w-full bg-white border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 focus:outline-none font-bold"
                            />
                          </div>

                          <div className="flex justify-end">
                            <button 
                              type="submit"
                              className="bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold px-5 py-2.5 rounded-xl flex items-center gap-2 shadow-sm"
                            >
                              <UserCheck className="w-4 h-4" />
                              Kunci & Kirim ke Inspektorat NTB
                            </button>
                          </div>
                        </form>
                      )}
                    </div>

                  </div>
                )}

                {/* TAHAP 3 SEKOLAH: CHAT & ADVISORY NOTE */}
                {schoolStep === 3 && (
                  <div className="space-y-6 animate-fadeIn">
                    
                    {/* CHAT PENDAMPINGAN */}
                    <div className="border border-slate-200 rounded-2xl p-4 bg-slate-50/80 space-y-4">
                      <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-1.5">
                        <MessageSquare className="w-4 h-4 text-indigo-500" />
                        Obrolan Konsultasi Aktif (APIP NTB)
                      </span>

                      <div className="space-y-4 max-h-[250px] overflow-y-auto pr-1">
                        {chats.filter(c => c.schoolId === selectedSchoolId).length === 0 ? (
                          <p className="text-xs text-slate-400 italic text-center py-6">Ketik pesan untuk memulai konsultasi langsung dengan Auditor pendamping Anda.</p>
                        ) : (
                          chats.filter(c => c.schoolId === selectedSchoolId).map((chat, idx) => (
                            <div key={idx} className={`flex flex-col gap-1 max-w-[85%] ${chat.sender === 'Sekolah' ? 'ml-auto items-end' : 'mr-auto items-start'}`}>
                              <span className="text-[9px] text-slate-400 font-extrabold">{chat.sender} • {chat.time}</span>
                              <div className={`p-3 rounded-2xl text-xs leading-relaxed ${chat.sender === 'Sekolah' ? 'bg-indigo-600 text-white rounded-tr-none shadow-sm' : 'bg-white text-slate-800 rounded-tl-none shadow-sm border border-slate-100'}`}>
                                {chat.message}
                              </div>
                            </div>
                          ))
                        )}
                      </div>

                      <form onSubmit={(e) => handleSendChat(e, 'Sekolah')} className="flex gap-2 border-t border-slate-200/50 pt-3">
                        <input 
                          type="text" 
                          required
                          placeholder="Ketik pertanyaan konsultasi kepada auditor..."
                          value={chatMessage}
                          onChange={(e) => setChatMessage(e.target.value)}
                          className="flex-1 bg-white border border-slate-200 rounded-xl px-4 py-2.5 text-xs focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 focus:outline-none"
                        />
                        <button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-xl transition-all shadow-sm">
                          <Send className="w-4 h-4" />
                        </button>
                      </form>
                    </div>

                    {/* ADVISORY NOTE RESMI */}
                    <div className="bg-slate-900 text-white rounded-3xl p-5 space-y-4">
                      <div className="flex items-center gap-2">
                        <FileCheck className="text-emerald-400 w-5 h-5" />
                        <h3 className="text-xs sm:text-sm font-black uppercase tracking-widest text-slate-200">
                          🛡️ Advisory Note Resmi e-Review NTB
                        </h3>
                      </div>
                      <p className="text-xs text-slate-400 leading-normal">
                        Lembar Advisory Note bertindak sebagai surat rekomendasi tertulis dari Inspektorat NTB yang menjadi jaminan preventif draf belanja sekolah Anda telah disetujui.
                      </p>

                      <div className="space-y-3">
                        {proposedItems.filter(p => p.schoolId === selectedSchoolId && p.consultationStatus.includes("Advisory")).length === 0 ? (
                          <p className="text-[11px] text-slate-500 italic text-center py-4 bg-slate-800/40 rounded-xl">Belum ada rekomendasi formal yang diterbitkan oleh APIP NTB.</p>
                        ) : (
                          proposedItems.filter(p => p.schoolId === selectedSchoolId && p.consultationStatus.includes("Advisory")).map((item) => (
                            <div key={item.id} className="bg-slate-800 p-4 rounded-2xl border border-slate-700/80 flex items-center justify-between gap-3 text-xs">
                              <div className="space-y-1">
                                <span className="text-[9px] bg-emerald-500/20 text-emerald-400 font-extrabold px-2 py-0.5 rounded border border-emerald-500/10 uppercase tracking-widest">RESMI APIP NTB</span>
                                <h4 className="font-bold text-slate-200">{item.activity}</h4>
                                <p className="text-[11px] text-slate-400 leading-normal">{item.notes}</p>
                              </div>
                              
                              <button 
                                type="button"
                                onClick={() => showToast(`Berkas Advisory Note ${item.id} berhasil diunduh sebagai PDF!`, "success")}
                                className="bg-emerald-600 hover:bg-emerald-700 text-white text-[10px] font-bold px-3 py-2 rounded-lg flex items-center gap-1 shrink-0 transition-all shadow-sm"
                              >
                                <Download className="w-4 h-4" /> Cetak PDF
                              </button>
                            </div>
                          ))
                        )}
                      </div>
                    </div>

                  </div>
                )}

              </div>

            </div>

            {/* Sidebar Kanan Sekolah: Asisten AI */}
            <div className="lg:col-span-4 space-y-6">
              
              {/* ASISTEN AI JUKNIS BOS */}
              <div className="bg-gradient-to-b from-indigo-950 to-slate-900 text-white rounded-3xl shadow-lg border border-indigo-900/35 overflow-hidden">
                <div className="p-4 bg-white/5 border-b border-white/5 flex items-center gap-2.5">
                  <div className="bg-indigo-500/20 p-2 rounded-lg text-indigo-300">
                    <Sparkles className="w-5 h-5 animate-pulse" />
                  </div>
                  <div>
                    <h3 className="text-xs font-bold uppercase tracking-wider">Asisten AI e-Review NTB</h3>
                    <p className="text-[10px] text-indigo-300/80">Kecerdasan Buatan Terbatas Konteks NTB</p>
                  </div>
                </div>

                <div className="p-5 flex flex-col h-[350px]">
                  <div className="flex-1 overflow-y-auto space-y-3 mb-3 pr-1 text-xs leading-relaxed">
                    {aiChat.map((msg, idx) => (
                      <div key={idx} className={`p-3 rounded-2xl ${msg.role === 'user' ? 'bg-indigo-600 text-white ml-5 rounded-tr-none' : 'bg-slate-800 text-slate-200 mr-5 rounded-tl-none border border-slate-700/50'}`}>
                        {msg.text}
                      </div>
                    ))}
                    {isAiLoading && (
                      <div className="bg-slate-800 text-slate-300 p-3 rounded-2xl mr-5 animate-pulse flex items-center gap-2 text-[10px]">
                        <span className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce" />
                        Menganalisis draf dengan parameter Juknis BOS & NTB...
                      </div>
                    )}
                  </div>

                  <div className="pb-3 flex flex-wrap gap-1 border-t border-white/5 pt-3">
                    <button 
                      onClick={() => setAiInput("Bolehkah dana BOS digunakan untuk menyewa kendaraan pariwisata di Sumbawa?")}
                      className="text-[10px] bg-slate-800 hover:bg-slate-700 text-slate-300 px-2 py-1 rounded-md text-left truncate max-w-full"
                    >
                      💡 Sewa Bus Pariwisata?
                    </button>
                    <button 
                      onClick={() => setAiInput("Bagaimana cara membuat sup iga sapi khas Lombok?")}
                      className="text-[10px] bg-slate-800 hover:bg-rose-950/40 text-rose-300 px-2 py-1 rounded-md text-left truncate max-w-full"
                    >
                      ⚠️ Resep Masakan (Luar Konteks)?
                    </button>
                  </div>

                  <form onSubmit={handleAskAi} className="flex gap-2">
                    <input 
                      type="text"
                      placeholder="Tanya Juknis BOS NTB..."
                      value={aiInput}
                      onChange={(e) => setAiInput(e.target.value)}
                      disabled={isAiLoading}
                      className="flex-1 bg-slate-800 text-xs text-white border border-slate-700 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-indigo-500/40 focus:border-indigo-500 focus:outline-none placeholder-slate-500"
                    />
                    <button 
                      type="submit"
                      disabled={isAiLoading}
                      className="bg-indigo-600 hover:bg-indigo-700 text-white p-2.5 rounded-xl transition-all shadow-md shrink-0"
                    >
                      <Send className="w-4 h-4" />
                    </button>
                  </form>
                </div>
              </div>

              {/* AUDIT TRAIL LOG */}
              <div className="bg-white rounded-3xl p-5 shadow-sm border border-slate-200/60 max-h-[250px] flex flex-col">
                <h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2">
                  <History className="w-4 h-4 text-slate-400" />
                  Log Aktivitas e-Review
                </h3>
                <div className="overflow-y-auto flex-1 pr-1 space-y-3">
                  {consultingLogs.filter(l => l.schoolId === selectedSchoolId).map((log) => (
                    <div key={log.id} className="relative pl-4 border-l border-indigo-100 text-[11px] leading-relaxed">
                      <div className="absolute -left-1.5 top-1.5 w-3 h-3 rounded-full bg-indigo-500/20 border-2 border-indigo-600" />
                      <span className="text-slate-400 block text-[9px] font-mono leading-none mb-1">{log.time}</span>
                      <p className="text-slate-700"><strong className="text-slate-900">{log.user}:</strong> {log.action}</p>
                    </div>
                  ))}
                </div>
              </div>

            </div>

          </div>
        )}

        {/* ========================================================
            PORTAL INSPEKTORAT (APIP PROVINSI NTB)
            ======================================================== */}
        {role === 'auditor' && (
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
            
            {/* Main Area: 3 Steps for APIP NTB */}
            <div className="lg:col-span-8 space-y-6">
              
              <div className="bg-white rounded-3xl p-6 shadow-sm border border-slate-200/60">
                <div className="flex items-center justify-between border-b border-slate-100 pb-4 mb-6">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-600 text-lg">🔍</div>
                    <div>
                      <h2 className="font-black text-base text-slate-800 leading-none">Portal Inspektorat NTB (e-Review)</h2>
                      <p className="text-xs text-slate-500 mt-1">Evaluasi pre-review draf usulan preventif sekolah se-NTB</p>
                    </div>
                  </div>
                  <span className="text-xs bg-emerald-50 text-emerald-600 font-extrabold px-3 py-1 rounded-xl">Wilayah NTB</span>
                </div>

                {/* LANGKAH-LANGKAH PREVENTIF APIP */}
                <div className="grid grid-cols-3 gap-2 p-1.5 bg-slate-100 rounded-2xl mb-6">
                  <button 
                    onClick={() => setAuditorStep(1)}
                    className={`py-2.5 px-2 rounded-xl text-xs font-bold transition-all ${auditorStep === 1 ? 'bg-emerald-600 text-white shadow-sm' : 'text-slate-600 hover:text-slate-800 hover:bg-slate-200/60'}`}
                  >
                    1. Peta Dampingan NTB
                  </button>
                  <button 
                    onClick={() => setAuditorStep(2)}
                    className={`py-2.5 px-2 rounded-xl text-xs font-bold transition-all ${auditorStep === 2 ? 'bg-emerald-600 text-white shadow-sm' : 'text-slate-600 hover:text-slate-800 hover:bg-slate-200/60'}`}
                  >
                    2. Telaah Kwitansi/SPJ
                  </button>
                  <button 
                    onClick={() => setAuditorStep(3)}
                    className={`py-2.5 px-2 rounded-xl text-xs font-bold transition-all ${auditorStep === 3 ? 'bg-emerald-600 text-white shadow-sm' : 'text-slate-600 hover:text-slate-800 hover:bg-slate-200/60'}`}
                  >
                    3. Otorisasi Advisory
                  </button>
                </div>

                {/* TAHAP 1 APIP: PETA KATEGORI KEAKTIFAN */}
                {auditorStep === 1 && (
                  <div className="space-y-4 animate-fadeIn">
                    
                    <div className="flex items-center justify-between flex-wrap gap-3 mb-4 bg-slate-50 p-4 rounded-2xl border border-slate-200/40">
                      <div>
                        <h3 className="text-xs sm:text-sm font-bold text-slate-700">Daftar Sekolah Binaan Provinsi NTB</h3>
                        <p className="text-[11px] text-slate-500 mt-0.5">Pilih sekolah di Lombok / Sumbawa untuk melihat pre-review draf anggaran.</p>
                      </div>

                      <select 
                        value={filterStatus}
                        onChange={(e) => setFilterStatus(e.target.value)}
                        className="text-xs bg-white border border-slate-200 rounded-xl px-3 py-2 focus:outline-none font-bold text-slate-700"
                      >
                        <option value="Semua">Semua Tingkat Keaktifan</option>
                        <option value="Aman">Sesuai Juknis / Aman</option>
                        <option value="Konsultasi Aktif">Konsultasi Aktif</option>
                        <option value="Butuh Pendampingan">Butuh Pendampingan</option>
                      </select>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {filteredSchools.map((sch) => (
                        <div 
                          key={sch.id}
                          onClick={() => { setSelectedSchoolId(sch.id); showToast(`Fokus ulasan dialihkan ke: ${sch.name}`, "info"); }}
                          className={`p-4 rounded-2xl border transition-all cursor-pointer relative flex flex-col justify-between h-[140px] ${
                            selectedSchoolId === sch.id ? 'ring-2 ring-emerald-500 bg-emerald-50/10 border-emerald-200 shadow-md shadow-emerald-500/5' : 'bg-white hover:shadow-md border-slate-200/70'
                          }`}
                        >
                          <div className="flex items-start justify-between">
                            <div>
                              <span className="text-[9px] font-mono text-slate-400 bg-slate-100 px-2 py-0.5 rounded-md font-extrabold">{sch.npsn}</span>
                              <h4 className="font-black text-xs text-slate-700 mt-2 line-clamp-1">{sch.name}</h4>
                              <p className="text-[10px] text-slate-400 line-clamp-1 mt-0.5">{sch.address}</p>
                            </div>
                            <span className={`w-3 h-3 rounded-full ${sch.status === 'Aman' ? 'bg-emerald-500' : sch.status === 'Konsultasi Aktif' ? 'bg-amber-500' : 'bg-indigo-500 animate-pulse'}`} />
                          </div>

                          <div className="text-[11px] text-slate-500 pt-2 border-t border-slate-100 flex justify-between items-center mt-3">
                            <span className="flex items-center gap-1">Kepatuhan Mandiri: <strong>{sch.complianceScore}%</strong></span>
                            <span className="text-[10px] font-black text-emerald-600 uppercase">Pilih Sekolah →</span>
                          </div>

                          {selectedSchoolId === sch.id && (
                            <div className="absolute bottom-3 right-3 bg-emerald-600 text-white p-0.5 rounded-full shadow-md">
                              <Check className="w-3.5 h-3.5" />
                            </div>
                          )}
                        </div>
                      ))}
                    </div>

                  </div>
                )}

                {/* TAHAP 2 APIP: PENILAIAN PREVENTIF DRAFT KWITANSI */}
                {auditorStep === 2 && (
                  <div className="space-y-4 animate-fadeIn">
                    <div className="bg-slate-900 text-white p-4 rounded-2xl border border-slate-800 space-y-1">
                      <span className="text-[9px] bg-emerald-500/20 text-emerald-300 font-extrabold px-2 py-0.5 rounded border border-emerald-500/10 font-mono">SEKOLAH TERPILIH NTB</span>
                      <h4 className="text-xs sm:text-sm font-black">{activeSchool.name}</h4>
                      <p className="text-[11px] text-slate-400">Hubungan Binaan: <strong className="text-slate-200">{activeSchool.status}</strong> • Kepatuhan: <strong className="text-emerald-400">{activeSchool.complianceScore}%</strong></p>
                    </div>

                    <div className="space-y-3">
                      <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-1.5">
                        <FileText className="w-5 h-5 text-emerald-600" />
                        Dokumen Draft SPJ Siap Ditelaah
                      </h3>

                      <div className="divide-y divide-slate-100 border border-slate-200 rounded-2xl overflow-hidden shadow-sm bg-white font-semibold">
                        {draftSpjList.filter(d => d.schoolId === selectedSchoolId).length === 0 ? (
                          <p className="text-xs text-slate-400 italic p-6 text-center">Tidak ada draf kwitansi/SPJ yang dikirimkan oleh sekolah ini.</p>
                        ) : (
                          draftSpjList.filter(d => d.schoolId === selectedSchoolId).map((draft) => (
                            <div key={draft.id} className="p-4 text-xs space-y-3 hover:bg-slate-50/20 transition-all">
                              <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-3">
                                <div>
                                  <div className="flex items-center gap-2">
                                    <span className="text-[10px] font-mono font-bold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-md">{draft.id}</span>
                                    <span className={`text-[9px] font-extrabold px-2.5 py-1 rounded-full uppercase ${
                                      draft.status === 'Sesuai' ? 'bg-emerald-100 text-emerald-800' :
                                      draft.status === 'Butuh Pendampingan' ? 'bg-amber-100 text-amber-800' :
                                      'bg-indigo-50 text-indigo-700'
                                    }`}>
                                      {draft.status}
                                    </span>
                                  </div>
                                  <h4 className="font-extrabold text-slate-700 mt-2 leading-tight">{draft.description}</h4>
                                  <p className="text-[11px] text-slate-400 mt-1">Berkas: <span className="underline text-indigo-600 font-mono">{draft.file}</span> • Estimasi: <strong className="text-slate-600">Rp {draft.amount.toLocaleString()}</strong></p>
                                </div>

                                <div className="flex gap-2 shrink-0 self-end sm:self-auto">
                                  <button 
                                    onClick={() => {
                                      setCoachingTargetId(draft.id);
                                      setCoachingStatusValue(true);
                                      setCoachingText("Draf kwitansi sudah memenuhi Juknis BOS.");
                                      setIsCoachingModalOpen(true);
                                    }}
                                    className="bg-emerald-50 hover:bg-emerald-100 text-emerald-700 text-[11px] font-bold px-3 py-1.5 rounded-lg border border-emerald-200 transition-all shadow-sm"
                                  >
                                    ✓ Sesuai Juknis
                                  </button>
                                  <button 
                                    onClick={() => {
                                      setCoachingTargetId(draft.id);
                                      setCoachingStatusValue(false);
                                      setCoachingText("Mohon lampirkan...");
                                      setIsCoachingModalOpen(true);
                                    }}
                                    className="bg-amber-50 hover:bg-amber-100 text-amber-700 text-[11px] font-bold px-3 py-1.5 rounded-lg border border-amber-200 transition-all shadow-sm"
                                  >
                                    ⚠️ Perlu Perbaikan
                                  </button>
                                </div>
                              </div>

                              {draft.hasAdvice && (
                                <div className="bg-slate-50 border border-dashed border-slate-200 p-3 rounded-xl text-[11px] text-slate-700 italic">
                                  <strong>Catatan Bimbingan Anda (APIP NTB):</strong> "{draft.adviceText}"
                                </div>
                              )}
                            </div>
                          ))
                        )}
                      </div>
                    </div>

                  </div>
                )}

                {/* TAHAP 3 APIP: BIMBINGAN CHAT & OTORISASI */}
                {auditorStep === 3 && (
                  <div className="space-y-4 animate-fadeIn">
                    
                    {/* CHAT PENDAMPINGAN SISI AUDITOR */}
                    <div className="border border-slate-200 rounded-2xl p-4 bg-slate-50 space-y-4">
                      <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-1.5">
                        <MessageSquare className="w-4 h-4 text-emerald-600" />
                        Obrolan Pendampingan e-Review NTB
                      </span>

                      <div className="space-y-4 max-h-[200px] overflow-y-auto pr-1">
                        {chats.filter(c => c.schoolId === selectedSchoolId).length === 0 ? (
                          <p className="text-xs text-slate-400 italic text-center py-6">Ketik pesan pertama Anda untuk merespons sekolah.</p>
                        ) : (
                          chats.filter(c => c.schoolId === selectedSchoolId).map((chat, idx) => (
                            <div key={idx} className={`flex flex-col gap-1 max-w-[85%] ${chat.sender === 'Konsultan APIP' ? 'ml-auto items-end' : 'mr-auto items-start'}`}>
                              <span className="text-[9px] text-slate-400 font-extrabold">{chat.sender} • {chat.time}</span>
                              <div className={`p-3 rounded-2xl text-xs leading-relaxed ${chat.sender === 'Konsultan APIP' ? 'bg-emerald-600 text-white rounded-tr-none shadow-sm' : 'bg-white text-slate-800 rounded-tl-none shadow-sm border border-slate-100'}`}>
                                {chat.message}
                              </div>
                            </div>
                          ))
                        )}
                      </div>

                      <form onSubmit={(e) => handleSendChat(e, 'Konsultan APIP')} className="flex gap-2 pt-3 border-t border-slate-200/50">
                        <input 
                          type="text" 
                          required
                          placeholder="Ketik saran preventif untuk sekolah..."
                          value={chatMessage}
                          onChange={(e) => setChatMessage(e.target.value)}
                          className="flex-1 bg-white border border-slate-200 rounded-xl px-4 py-2.5 text-xs focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 focus:outline-none"
                        />
                        <button type="submit" className="bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-xl transition-all shadow-sm">
                          <Send className="w-4 h-4" />
                        </button>
                      </form>
                    </div>

                    {/* FORM PENERBITAN ADVISORY NOTE RESMI */}
                    <div className="border border-slate-200 rounded-2xl p-5 bg-white space-y-4 shadow-sm">
                      <div className="flex items-center gap-2">
                        <FileCheck className="w-5 h-5 text-emerald-600" />
                        <h3 className="text-xs sm:text-sm font-black text-slate-700 uppercase tracking-wider">
                          Otorisasi Dokumen Advisory Note e-Review NTB
                        </h3>
                      </div>
                      <p className="text-xs text-slate-400 leading-normal">
                        Rilis dokumen persetujuan final (Advisory Note) resmi dari Inspektorat NTB sebagai penutup hasil pre-review draf sekolah.
                      </p>

                      <div className="divide-y divide-slate-100 border border-slate-200 rounded-2xl overflow-hidden bg-slate-50 text-xs font-semibold">
                        {proposedItems.filter(p => p.schoolId === selectedSchoolId).length === 0 ? (
                          <p className="text-xs text-slate-400 italic p-6 text-center">Belum ada usulan program belanja dari sekolah ini.</p>
                        ) : (
                          proposedItems.filter(p => p.schoolId === selectedSchoolId).map((item) => (
                            <div key={item.id} className="p-4 flex items-center justify-between gap-3 hover:bg-slate-100/50 transition-all">
                              <div>
                                <span className="text-[10px] font-mono font-bold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-md">{item.id}</span>
                                <h4 className="font-extrabold text-slate-700 mt-2 line-clamp-1">{item.activity}</h4>
                                <p className="text-[11px] text-slate-400 mt-0.5">Rencana Pagu: Rp {item.plannedCost.toLocaleString()}</p>
                              </div>

                              <button 
                                type="button"
                                onClick={() => { setSelectedDraftId(item.id); setAdvisoryText("Berdasarkan Juknis BOS Nasional dan koordinasi Inspektorat Provinsi NTB, program disetujui secara preventif."); setIsAdvisoryModalOpen(true); }}
                                className="bg-emerald-600 hover:bg-emerald-700 text-white text-[10px] font-bold px-3 py-2 rounded-xl transition-all shadow-sm"
                              >
                                Terbitkan Note
                              </button>
                            </div>
                          ))
                        )}
                      </div>
                    </div>

                  </div>
                )}

              </div>

            </div>

            {/* Sidebar Kanan Inspektorat: Informasi & Log */}
            <div className="lg:col-span-4 space-y-6">
              
              {/* DETAIL SEKOLAH */}
              <div className="bg-white rounded-3xl p-5 shadow-sm border border-slate-200/60 space-y-4">
                <div className="flex items-center gap-2 pb-3 border-b border-slate-100">
                  <div className="p-1.5 bg-emerald-50 text-emerald-600 rounded-lg">
                    <Info className="w-4 h-4" />
                  </div>
                  <h3 className="text-xs font-bold text-slate-700 uppercase tracking-wider">Informasi Binaan NTB</h3>
                </div>

                <div className="space-y-3.5 text-xs">
                  <div>
                    <span className="text-slate-400 block uppercase text-[8px] font-black tracking-wider">Sekolah Terpilih:</span>
                    <strong className="text-slate-800 text-sm">{activeSchool.name}</strong>
                  </div>
                  <div className="grid grid-cols-2 gap-2 pt-2 border-t border-slate-100">
                    <div>
                      <span className="text-slate-400 block uppercase text-[8px] font-black tracking-wider">Kepala Sekolah:</span>
                      <span className="text-slate-700 font-bold">{activeSchool.headmaster}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block uppercase text-[8px] font-black tracking-wider">Bendahara BOS:</span>
                      <span className="text-slate-700 font-bold">{activeSchool.treasurer}</span>
                    </div>
                  </div>
                  <div className="pt-2 border-t border-slate-100 flex justify-between items-center">
                    <span className="text-slate-400 uppercase text-[8px] font-black tracking-wider">Status Binaan:</span>
                    <span className={`px-2.5 py-1 rounded-full text-[10px] font-black ${
                      activeSchool.status === 'Aman' ? 'bg-emerald-50 text-emerald-800 border border-emerald-200' :
                      'bg-amber-50 text-amber-800 border border-amber-200'
                    }`}>{activeSchool.status}</span>
                  </div>
                </div>
              </div>

              {/* NOTIFIKASI */}
              <div className="bg-white rounded-3xl p-5 shadow-sm border border-slate-200/60 space-y-4">
                <h3 className="text-xs font-bold text-slate-700 uppercase tracking-wider flex items-center gap-2">
                  <Bell className="w-4 h-4 text-emerald-600" />
                  Notifikasi Masuk
                </h3>
                <div className="space-y-3">
                  {notifications.filter(n => n.schoolId === selectedSchoolId).length === 0 ? (
                    <p className="text-xs text-slate-400 italic text-center py-2">Belum ada notifikasi baru untuk sekolah ini.</p>
                  ) : (
                    notifications.filter(n => n.schoolId === selectedSchoolId).map((notif) => (
                      <div key={notif.id} className="p-3 bg-slate-50 rounded-xl text-[11px] leading-relaxed border border-slate-100">
                        <span className="text-slate-400 block text-[8px] font-mono mb-1">{notif.date}</span>
                        <p className="text-slate-700">{notif.message}</p>
                      </div>
                    ))
                  )}
                </div>
              </div>

              {/* AUDIT TRAIL LOG */}
              <div className="bg-white rounded-3xl p-5 shadow-sm border border-slate-200/60 max-h-[250px] flex flex-col">
                <h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2">
                  <History className="w-4 h-4 text-slate-400" />
                  Log Aktivitas APIP
                </h3>
                <div className="overflow-y-auto flex-1 pr-1 space-y-3">
                  {consultingLogs.filter(l => l.schoolId === selectedSchoolId).map((log) => (
                    <div key={log.id} className="relative pl-4 border-l border-emerald-100 text-[11px] leading-relaxed">
                      <div className="absolute -left-1.5 top-1.5 w-3 h-3 rounded-full bg-emerald-500/20 border-2 border-emerald-600" />
                      <span className="text-slate-400 block text-[9px] font-mono leading-none mb-1">{log.time}</span>
                      <p className="text-slate-700"><strong className="text-slate-900">{log.user}:</strong> {log.action}</p>
                    </div>
                  ))}
                </div>
              </div>

            </div>

          </div>
        )}

        {/* ========================================================
            BUILDING INTERACTIVE CUSTOM MODALS
            ======================================================== */}
        
        {/* COACHING NOTE */}
        {isCoachingModalOpen && (
          <div className="fixed inset-0 bg-slate-950/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <form onSubmit={handleApplyCoaching} className="bg-white text-slate-800 p-6 rounded-3xl border border-slate-200 max-w-md w-full space-y-4 shadow-2xl animate-scaleUp">
              <div className="flex items-center justify-between border-b border-slate-100 pb-3">
                <h3 className="font-black text-xs sm:text-sm text-slate-800 flex items-center gap-1.5">
                  <ShieldCheck className="text-emerald-600 w-5 h-5" />
                  Coaching Note e-Review NTB
                </h3>
                <button type="button" onClick={() => setIsCoachingModalOpen(false)} className="text-slate-400 hover:text-slate-600">
                  <X className="w-4 h-4" />
                </button>
              </div>

              <div className="space-y-4 text-xs">
                <div className="bg-slate-50 p-3.5 rounded-xl text-slate-700 border border-slate-200 leading-normal font-semibold">
                  <strong>Pemberian Review untuk Berkas:</strong> {coachingTargetId}
                </div>

                <div>
                  <label className="block font-black text-slate-600 mb-2 uppercase text-[10px]">Pilih Kategori Status:</label>
                  <div className="grid grid-cols-2 gap-2">
                    <button
                      type="button"
                      onClick={() => setCoachingStatusValue(true)}
                      className={`p-2.5 rounded-xl border text-xs font-bold transition-all ${
                        coachingStatusValue 
                          ? 'bg-emerald-50 border-emerald-400 text-emerald-800' 
                          : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
                      }`}
                    >
                      ✓ Sesuai Juknis
                    </button>
                    <button
                      type="button"
                      onClick={() => setCoachingStatusValue(false)}
                      className={`p-2.5 rounded-xl border text-xs font-bold transition-all ${
                        !coachingStatusValue 
                          ? 'bg-amber-50 border-amber-400 text-amber-800' 
                          : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
                      }`}
                    >
                      ⚠️ Perlu Perbaikan
                    </button>
                  </div>
                </div>

                <div>
                  <label className="block font-black text-slate-600 mb-1.5 uppercase text-[10px]">Saran / Penjelasan Pendampingan</label>
                  <textarea 
                    required
                    rows={3}
                    placeholder="Contoh: Pastikan NPWP rekanan penyedia jasa di Mataram tercantum dengan jelas."
                    value={coachingText}
                    onChange={(e) => setCoachingText(e.target.value)}
                    className="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-xs focus:ring-1 focus:ring-indigo-500 focus:outline-none font-semibold"
                  />
                </div>
              </div>

              <div className="flex justify-end gap-2 pt-3 border-t border-slate-100">
                <button 
                  type="button" 
                  onClick={() => setIsCoachingModalOpen(false)}
                  className="bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold px-4 py-2.5 rounded-xl"
                >
                  Batal
                </button>
                <button 
                  type="submit" 
                  className="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold px-4 py-2.5 rounded-xl shadow-sm"
                >
                  Kirim Coaching Note
                </button>
              </div>
            </form>
          </div>
        )}

        {/* OTORISASI ADVISORY NOTE */}
        {isAdvisoryModalOpen && (
          <div className="fixed inset-0 bg-slate-950/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <form onSubmit={handlePublishAdvisoryNote} className="bg-white text-slate-800 p-6 rounded-3xl border border-slate-200 max-w-md w-full space-y-4 shadow-2xl animate-scaleUp">
              <div className="flex items-center justify-between border-b border-slate-100 pb-3">
                <h3 className="font-black text-xs sm:text-sm text-slate-800 flex items-center gap-1.5">
                  <ShieldCheck className="text-emerald-600 w-5 h-5" />
                  Otorisasi Dokumen Advisory Note
                </h3>
                <button type="button" onClick={() => setIsAdvisoryModalOpen(false)} className="text-slate-400 hover:text-slate-600">
                  <X className="w-4 h-4" />
                </button>
              </div>

              <div className="space-y-4 text-xs">
                <div className="bg-indigo-50 p-3.5 rounded-xl text-indigo-900 border border-indigo-100 leading-normal font-semibold">
                  <strong>Program Target:</strong> {selectedDraftId} - {proposedItems.find(p => p.id === selectedDraftId)?.activity}
                </div>

                <div>
                  <label className="block font-black text-slate-600 mb-1.5 uppercase text-[10px]">Rekomendasi Hukum Preventif APIP NTB</label>
                  <textarea 
                    required
                    rows={4}
                    placeholder="Tulis saran formal hukum..."
                    value={advisoryText}
                    onChange={(e) => setAdvisoryText(e.target.value)}
                    className="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-xs focus:ring-1 focus:ring-indigo-500 focus:outline-none font-semibold"
                  />
                </div>
              </div>

              <div className="flex justify-end gap-2 pt-3 border-t border-slate-100">
                <button 
                  type="button" 
                  onClick={() => setIsAdvisoryModalOpen(false)}
                  className="bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold px-4 py-2.5 rounded-xl"
                >
                  Batal
                </button>
                <button 
                  type="submit" 
                  className="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold px-4 py-2.5 rounded-xl shadow-sm"
                >
                  Terbitkan Rekomendasi
                </button>
              </div>
            </form>
          </div>
        )}

      </main>

      {/* FOOTER */}
      <footer className="bg-slate-950 text-slate-500 text-xs py-6 border-t border-slate-900 mt-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center gap-4">
          <div className="flex items-center gap-2">
            <ShieldCheck className="w-5 h-5 text-emerald-500" />
            <span>© 2026 e-Review Inspektorat NTB. Sistem Pendampingan & Pembinaan Preventif.</span>
          </div>
          <div className="flex items-center gap-4">
            <span className="hover:text-white cursor-pointer transition-colors">Panduan Juknis BOS</span>
            <span>•</span>
            <span className="hover:text-white cursor-pointer transition-colors">Kebijakan Layanan</span>
            <span>•</span>
            <span className="text-slate-400 font-mono flex items-center gap-1.5 border border-slate-800 bg-slate-900/60 px-2.5 py-1 rounded-lg">
              <span className="text-emerald-500">&lt;/&gt;</span> Saka Digital
            </span>
          </div>
        </div>
      </footer>

    </div>
  );
}