'use client';

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { PageHeader } from '@/components/common/PageHeader';
import { toast } from '@/lib/stores/notificationStore';
import {
  Building2,
  ArrowLeft,
  Save,
  Loader2,
  Check
} from 'lucide-react';
import axios from 'axios';
import { cn } from '@/lib/utils';

interface PTItem {
  id: string;
  code: string;
  name: string;
  city: string;
}

interface Indicator {
  id: string;
  no: number;
  text: string;
  pillText?: string;
}

interface FormCategory {
  id: string;
  categoryName: string;
  sectionTitle: string;
  type: 'checklist' | 'input_number' | 'special_radio';
  indicators: Indicator[];
}

const FORM_CATEGORIES: FormCategory[] = [
  {
    id: 'cat_a_1',
    categoryName: 'A. KELEMBAGAAN KEMAHASISWAAN',
    sectionTitle: '1. Regulasi Pembinaan Bidang Kemahasiswaan',
    type: 'checklist',
    indicators: [
      { id: 'a1_1', no: 1, text: 'Kode etik, hak, dan kewajiban mahasiswa.' },
      { id: 'a1_2', no: 2, text: 'Kode etik, hak, dan kewajiban Organisasi Kemahasiswaan (ORMAWA)/Unit Kegiatan Mahasiswa (UKM).' },
      { id: 'a1_3', no: 3, text: 'Prosedur Operasional Baku (POB) layanan kegiatan kemahasiswaan.' },
      { id: 'a1_4', no: 4, text: 'Panduan/peraturan tata kelola pembinaan organisasi/kegiatan kemahasiswaan.' },
      { id: 'a1_5', no: 5, text: 'Surat keputusan pengangkatan pembina kemahasiswaan.' },
      { id: 'a1_6', no: 6, text: 'Lembaga/unit/tim penegakan norma kemahasiswaan.' },
      { id: 'a1_7', no: 7, text: 'Kebijakan kampus sehat dan/atau green campus.' },
      { id: 'a1_8', no: 8, text: 'Kebijakan penggunaan media sosial.' },
      { id: 'a1_9', no: 9, text: 'Regulasi/kebijakan pelampauan standar Sistem Penjaminan Mutu Internal (SPMI) pada bidang kemahasiswaan.' },
      { id: 'a1_10', no: 10, text: 'Regulasi/kebijakan dan POB penyelenggaraan kegiatan kompetisi/lomba oleh ORMAWA/UKM.' },
      { id: 'a1_11', no: 11, text: 'Regulasi/kebijakan dan POB layanan kemahasiswaan inklusif bagi mahasiswa berkebutuhan khusus (MBK).' },
    ]
  },
  {
    id: 'cat_a_2a',
    categoryName: 'A. KELEMBAGAAN KEMAHASISWAAN',
    sectionTitle: '2.a. Beasiswa/Bantuan Biaya Pendidikan - Pengelolaan',
    type: 'checklist',
    indicators: [
      { id: 'a2a_1', no: 1, text: 'SK pengelola/unit pengelola beasiswa/SK penyaluran/distribusi beasiswa.' },
      { id: 'a2a_2', no: 2, text: 'Dokumen kerja sama (MoU/MoA/IA) dengan mitra pemberi beasiswa.' },
      { id: 'a2a_3', no: 3, text: 'POB pengajuan, pengelolaan, dan pencairan beasiswa.' },
      { id: 'a2a_4', no: 4, text: 'Laporan pengelolaan, penyaluran, dan distribusi beasiswa.' },
      { id: 'a2a_5', no: 5, text: 'Laporan pembinaan dan pengembangan kompetensi mahasiswa penerima beasiswa.' },
      { id: 'a2a_6', no: 6, text: 'Penggunaan sistem informasi untuk pengelolaan, penyaluran, dan distribusi beasiswa.' },
    ]
  },
  {
    id: 'cat_a_2b',
    categoryName: 'A. KELEMBAGAAN KEMAHASISWAAN',
    sectionTitle: '2.b. Jumlah Mahasiswa Penerima Beasiswa NonAPBN',
    type: 'input_number',
    indicators: [
      { id: 'a2b_1', no: 1, text: 'Jumlah mahasiswa penerima beasiswa dana NonAPBN.', pillText: 'JUMLAH MAHASISWA' },
      { id: 'a2b_2', no: 2, text: 'Jumlah mahasiswa aktif sarjana (S1) dan diploma (D4/D3/D2/D1).', pillText: 'JUMLAH MAHASISWA AKTIF' }
    ]
  },
  {
    id: 'cat_a_3',
    categoryName: 'A. KELEMBAGAAN KEMAHASISWAAN',
    sectionTitle: '3. Layanan Kesehatan',
    type: 'checklist',
    indicators: [
      { id: 'a3_1', no: 1, text: 'Surat keputusan unit pengelola layanan kesehatan mahasiswa.' },
      { id: 'a3_2', no: 2, text: 'POB layanan kesehatan mahasiswa.' },
      { id: 'a3_3', no: 3, text: 'Ruang khusus layanan atau klinik kesehatan mahasiswa.' },
      { id: 'a3_4', no: 4, text: 'Surat keputusan dokter piket/jaga pada klinik kesehatan mahasiswa.' },
      { id: 'a3_5', no: 5, text: 'Unit transportasi (ambulance) milik perguruan tinggi dan/atau kerja sama pengelolaan.' },
      { id: 'a3_6', no: 6, text: 'Laporan layanan kesehatan mahasiswa.' }
    ]
  },
  {
    id: 'cat_a_4',
    categoryName: 'A. KELEMBAGAAN KEMAHASISWAAN',
    sectionTitle: '4. Konseling Mahasiswa',
    type: 'checklist',
    indicators: [
      { id: 'a4_1', no: 1, text: 'Gedung/ruangan khusus layanan konseling mahasiswa.' },
      { id: 'a4_2', no: 2, text: 'Panduan dan/atau POB konseling mahasiswa.' },
      { id: 'a4_3', no: 3, text: 'Surat keputusan pengelola unit konseling mahasiswa.' },
      { id: 'a4_4', no: 4, text: 'Kualifikasi dan ketersediaan SDM sebagai konselor.' },
      { id: 'a4_5', no: 5, text: 'Sistem informasi untuk layanan konseling secara daring.' },
      { id: 'a4_6', no: 6, text: 'Laporan layanan konseling mahasiswa.' }
    ]
  },
  {
    id: 'cat_a_5',
    categoryName: 'A. KELEMBAGAAN KEMAHASISWAAN',
    sectionTitle: '5. Pencegahan dan Penanganan Kekerasan di Lingkungan Perguruan Tinggi',
    type: 'checklist',
    indicators: [
      { id: 'a5_1', no: 1, text: 'Gedung/ruangan khusus pengelola pencegahan dan penanganan kekerasan di lingkungan perguruan tinggi.' },
      { id: 'a5_2', no: 2, text: 'Surat keputusan unit pengelola pencegahan dan penanganan kekerasan di lingkungan perguruan tinggi.' },
      { id: 'a5_3', no: 3, text: 'Panduan dan/atau POB pencegahan dan penanganan kekerasan di lingkungan perguruan tinggi.' },
      { id: 'a5_4', no: 4, text: 'Program terstruktur tentang pencegahan dan penanganan kekerasan di lingkungan perguruan tinggi.' },
      { id: 'a5_5', no: 5, text: 'Laporan pelaksanaan pencegahan dan penanganan kekerasan di lingkungan perguruan tinggi.' }
    ]
  },
  {
    id: 'cat_a_6',
    categoryName: 'A. KELEMBAGAAN KEMAHASISWAAN',
    sectionTitle: '6. Pencegahan dan Penanganan Anti Intoleransi, Anti Perundungan, atau Anti Korupsi',
    type: 'checklist',
    indicators: [
      { id: 'a6_1', no: 1, text: 'Surat keputusan pengelola/program/struktur/laporan pembinaan anti intoleransi.' },
      { id: 'a6_2', no: 2, text: 'Surat keputusan pengelola/program/struktur/laporan pembinaan anti perundungan.' },
      { id: 'a6_3', no: 3, text: 'Surat keputusan pengelola/program/struktur/laporan pembinaan anti korupsi mahasiswa.' }
    ]
  },
  {
    id: 'cat_a_7',
    categoryName: 'A. KELEMBAGAAN KEMAHASISWAAN',
    sectionTitle: '7. Pembinaan Kewirausahaan Mahasiswa',
    type: 'checklist',
    indicators: [
      { id: 'a7_1', no: 1, text: 'Surat keputusan unit pengelola kewirausahaan mahasiswa.' },
      { id: 'a7_2', no: 2, text: 'Program terstruktur pengembangan kewirausahaan mahasiswa.' },
      { id: 'a7_3', no: 3, text: 'Penyelenggaraan seminar dan/atau kuliah umum kewirausahaan.' },
      { id: 'a7_4', no: 4, text: 'Penyelenggaraan pendidikan dan pelatihan/diklat kewirausahaan.' },
      { id: 'a7_5', no: 5, text: 'Dokumen kerja sama magang kewirausahaan.' },
      { id: 'a7_6', no: 6, text: 'Sarana inkubasi bisnis atau sarana display/galeri/etalase produk (offline/online) kewirausahaan mahasiswa.' }
    ]
  },
  {
    id: 'cat_a_8',
    categoryName: 'A. KELEMBAGAAN KEMAHASISWAAN',
    sectionTitle: '8. Pembinaan Karakter, Bela Negara, atau Wawasan Kebangsaan',
    type: 'checklist',
    indicators: [
      { id: 'a8_1', no: 1, text: 'Surat keputusan pengelola/program/struktur/laporan kegiatan pembinaan karakter.' },
      { id: 'a8_2', no: 2, text: 'Surat keputusan pengelola/program/struktur/laporan kegiatan pembinaan bela negara.' },
      { id: 'a8_3', no: 3, text: 'Surat keputusan pengelola/program/struktur/laporan kegiatan pembinaan nasionalisme dan wawasan kebangsaan.' }
    ]
  },
  {
    id: 'cat_b_1',
    categoryName: 'B. SUMBER DAYA MANUSIA',
    sectionTitle: '1. Level Kelembagaan Bidang Kemahasiswaan',
    type: 'special_radio',
    indicators: [
      { id: 'b1_1', no: 1, text: 'Surat keputusan pengangkatan pimpinan/pengelola yang khusus mengelola bidang kemahasiswaan.' },
      { id: 'b1_2', no: 2, text: 'Struktur organisasi pengelola bidang kemahasiswaan di perguruan tinggi.' }
    ]
  },
  {
    id: 'cat_b_2',
    categoryName: 'B. SUMBER DAYA MANUSIA',
    sectionTitle: '2. Tugas Pokok dan Fungsi Bidang Kemahasiswaan',
    type: 'checklist',
    indicators: [
      { id: 'b2_1', no: 1, text: 'Pengembangan penalaran dan kreativitas.' },
      { id: 'b2_2', no: 2, text: 'Kesejahteraan dan kewirausahaan.' },
      { id: 'b2_3', no: 3, text: 'Minat, bakat, dan organisasi kemahasiswaan.' },
      { id: 'b2_4', no: 4, text: 'Penyelarasan dan pengembangan karir.' },
      { id: 'b2_5', no: 5, text: 'Pengembangan mental spiritual kebangsaan.' },
      { id: 'b2_6', no: 6, text: 'Internasionalisasi.' }
    ]
  },
  {
    id: 'cat_c_1',
    categoryName: 'C. PRASARANA DAN SARANA',
    sectionTitle: 'Prasarana dan Sarana Kegiatan Kemahasiswaan',
    type: 'checklist',
    indicators: [
      { id: 'c1_1', no: 1, text: 'Gedung/ruang sekretariat untuk setiap ORMAWA/UKM.' },
      { id: 'c1_2', no: 2, text: 'Portal/laman website bidang kemahasiswaan yang terintegrasi dengan portal utama perguruan tinggi.' },
      { id: 'c1_3', no: 3, text: 'Prasarana/sarana kegiatan atau latihan mahasiswa untuk pengembangan minat, bakat, penalaran, kreativitas, dan kewirausahaan.' },
      { id: 'c1_4', no: 4, text: 'Prasarana/sarana kegiatan pengembangan kerohanian mahasiswa.' },
      { id: 'c1_5', no: 5, text: 'Peraturan/ketentuan/tata kelola penggunaan prasarana dan sarana bagi ORMAWA/UKM.' },
      { id: 'c1_6', no: 6, text: 'Sistem informasi untuk pelaporan capaian kinerja/prestasi mahasiswa/ORMAWA/UKM.' },
      { id: 'c1_7', no: 7, text: 'Fasilitas aksesibel dan tata kelola penggunaan prasarana/sarana untuk mahasiswa berkebutuhan khusus.' }
    ]
  },
  {
    id: 'cat_d_1',
    categoryName: 'D. PEMBIAYAAN',
    sectionTitle: 'Pembiayaan Kemahasiswaan',
    type: 'input_number',
    indicators: [
      { id: 'd1_1', no: 1, text: 'Jumlah total anggaran perguruan tinggi.', pillText: 'JUMLAH TOTAL ANGGARAN PT' },
      { id: 'd1_2', no: 2, text: 'Jumlah total anggaran kemahasiswaan perguruan tinggi.', pillText: 'JUMLAH TOTAL ANGGARAN KEMAHASISWAAN PT' }
    ]
  },
  {
    id: 'cat_e_1',
    categoryName: 'E. REGULASI PENGHARGAAN CAPAIAN PRESTASI MAHASISWA',
    sectionTitle: 'Regulasi Penghargaan Capaian Prestasi Mahasiswa',
    type: 'checklist',
    indicators: [
      { id: 'e1_1', no: 1, text: 'Peraturan dan/atau buku panduan yang mengatur pemberian penghargaan terhadap prestasi mahasiswa.' },
      { id: 'e1_2', no: 2, text: 'Surat keputusan pemberian penghargaan prestasi mahasiswa sebagai implementasi peraturan pimpinan.' },
      { id: 'e1_3', no: 3, text: 'Peraturan dan/atau buku panduan pengakuan dan penyetaraan prestasi/capaian mahasiswa dengan kredit (SKS) dan nilai akademik.' },
      { id: 'e1_4', no: 4, text: 'Peraturan dan/atau buku panduan pelaksanaan Surat Keterangan Pendamping Ijazah.' },
      { id: 'e1_5', no: 5, text: 'Peraturan dan/atau buku panduan penghargaan bagi mahasiswa atas capaian ekstrakurikuler mahasiswa.' },
      { id: 'e1_6', no: 6, text: 'Sistem informasi untuk pendataan dan pengelolaan capaian prestasi mahasiswa.' }
    ]
  }
];

const TOTAL_INDICATORS_COUNT = 72;

export default function CreateInstitusiPage() {
  const router = useRouter();
  const [reportId, setReportId] = useState<string | null>(null);
  const [pts, setPts] = useState<PTItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);

  // Form states
  const [formPTId, setFormPTId] = useState('');
  const [formPTCode, setFormPTCode] = useState('071032');
  const [formPTName, setFormPTName] = useState('Universitas Muhammadiyah Jember');
  const [formTahun, setFormTahun] = useState('2026');
  const [formStatus, setFormStatus] = useState<'draft' | 'menunggu_verifikasi' | 'terverifikasi' | 'ditolak'>('menunggu_verifikasi');

  // Question lists tracking
  const [checkedIndicators, setCheckedIndicators] = useState<Record<string, boolean>>({});
  const [documentLinks, setDocumentLinks] = useState<Record<string, string>>({});

  // Multiple numeric inputs for 2.b and D.1
  const [numberInputs, setNumberInputs] = useState<Record<string, number>>({
    a2b_1: 0,
    a2b_2: 0,
    d1_1: 0,
    d1_2: 0
  });

  // Specific Section B.1 states
  const [b1Level, setB1Level] = useState<'Level 1' | 'Level 2' | 'Level 3' | ''>('');
  const [b1Doc1, setB1Doc1] = useState('');
  const [b1Doc2, setB1Doc2] = useState('');

  useEffect(() => {
    const fetchPTsAndReport = async () => {
      setLoading(true);
      try {
        const urlParams = new URLSearchParams(window.location.search);
        const id = urlParams.get('id');

        const ptsRes = await axios.get('/api/institusi?action=pts');
        let ptsData: PTItem[] = [];
        if (ptsRes.data.success) {
          setPts(ptsRes.data.data);
          ptsData = ptsRes.data.data;
        }

        // Initialize checklist states
        const initialChecked: Record<string, boolean> = {};
        const initialLinks: Record<string, string> = {};
        FORM_CATEGORIES.forEach(cat => {
          cat.indicators.forEach(ind => {
            initialChecked[ind.id] = false;
            initialLinks[ind.id] = '';
          });
        });

        if (id) {
          setReportId(id);
          const reportRes = await axios.get(`/api/institusi?id=${id}`);
          if (reportRes.data.success) {
            const report = reportRes.data.data;
            setFormTahun(report.tahun);
            setFormPTId(report.perguruan_tinggi_id);
            setFormPTCode(report.pt_code);
            setFormPTName(report.pt_name);
            setFormStatus(report.status);

            let parsed: any = {};
            try {
              parsed = JSON.parse(report.checklist_data) || {};
            } catch (e) {
              parsed = {};
            }

            setCheckedIndicators(parsed.checkedIndicators || initialChecked);
            setDocumentLinks(parsed.documentLinks || initialLinks);
            setNumberInputs(parsed.numberInputs || { a2b_1: 0, a2b_2: 0, d1_1: 0, d1_2: 0 });
            setB1Level(parsed.b1Level || '');
            setB1Doc1(parsed.b1Doc1 || '');
            setB1Doc2(parsed.b1Doc2 || '');
          } else {
            toast.error('Laporan tidak ditemukan');
          }
        } else {
          setCheckedIndicators(initialChecked);
          setDocumentLinks(initialLinks);
          const umjPT = ptsData.find(pt => pt.code === '071032' || pt.name.toLowerCase().includes('jember'));
          if (umjPT) {
            setFormPTId(umjPT.id);
            setFormPTCode(umjPT.code);
            setFormPTName(umjPT.name);
          } else if (ptsData.length > 0) {
            setFormPTId(ptsData[0].id);
            setFormPTCode(ptsData[0].code);
            setFormPTName(ptsData[0].name);
          }
        }
      } catch (error) {
        console.error('Error initializing page:', error);
        toast.error('Gagal memuat data');
      } finally {
        setLoading(false);
      }
    };

    fetchPTsAndReport();
  }, []);

  const handleToggleCheck = (id: string) => {
    setCheckedIndicators(prev => ({
      ...prev,
      [id]: !prev[id]
    }));
  };

  const handleLinkChange = (id: string, value: string) => {
    setDocumentLinks(prev => ({
      ...prev,
      [id]: value
    }));
  };

  // Count checked items
  const getCheckedCount = () => {
    let count = Object.values(checkedIndicators).filter(Boolean).length;
    // Add special check for B.1 radio button level
    if (b1Level) count += 1;
    // Add check for B.1 document links (since they don't have checkboxes, they count as checked if filled)
    if (b1Doc1) count += 1;
    if (b1Doc2) count += 1;
    // Add check for 2.b inputs (considered checked if value is > 0)
    if (numberInputs.a2b_1 > 0) count += 1;
    if (numberInputs.a2b_2 > 0) count += 1;
    // Add check for D.1 inputs (considered checked if value is > 0)
    if (numberInputs.d1_1 > 0) count += 1;
    if (numberInputs.d1_2 > 0) count += 1;
    return Math.min(TOTAL_INDICATORS_COUNT, count);
  };

  const checkedCount = getCheckedCount();
  const completionPercentage = Math.round((checkedCount / TOTAL_INDICATORS_COUNT) * 100);

  const saveReport = async (customStatus?: 'draft' | 'menunggu_verifikasi') => {
    if (!formPTId) {
      toast.error('Harap pilih perguruan tinggi terlebih dahulu.');
      return;
    }

    const currentStatus = customStatus || formStatus;
    setSubmitting(true);
    try {
      const payload = {
        id: reportId || undefined,
        tahun: formTahun,
        perguruan_tinggi_id: formPTId,
        status: currentStatus,
        kelengkapan: `${checkedCount}/${TOTAL_INDICATORS_COUNT}`,
        checklist_data: {
          checkedIndicators,
          documentLinks,
          numberInputs,
          b1Level,
          b1Doc1,
          b1Doc2
        }
      };

      const res = await axios.post('/api/institusi', payload);
      if (res.data.success) {
        toast.success(currentStatus === 'draft' ? 'Laporan berhasil disimpan sebagai Draft!' : 'Laporan berhasil disimpan dan diajukan!');
        router.push('/dashboard/admin/institusi');
      } else {
        toast.error(res.data.message || 'Gagal menyimpan laporan.');
      }
    } catch (error) {
      console.error(error);
      toast.error('Gagal menyimpan laporan.');
    } finally {
      setSubmitting(false);
    }
  };

  const handleSubmitForm = (e: React.FormEvent) => {
    e.preventDefault();
    saveReport();
  };

  if (loading) {
    return (
      <div className="min-h-[50vh] flex flex-col items-center justify-center gap-2">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <span className="text-sm font-medium text-slate-500">Memuat form pelaporan...</span>
      </div>
    );
  }

  const getStatusLabel = (status: string) => {
    if (status === 'menunggu_verifikasi') return 'Submitted';
    if (status === 'draft') return 'Draft';
    if (status === 'terverifikasi') return 'Approved';
    if (status === 'ditolak') return 'Rejected';
    return status;
  };

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <PageHeader
        title="Institusi"
        description="Isi kuesioner checklist institusi dan lampirkan tautan dokumen pada setiap indikator yang dicentang."
      />

      {/* Styled Top Card (Greenish-Teal matching screenshot) */}
      <div className="bg-[#E6F4F1] border border-[#CDE5E0] rounded-2xl p-6 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 shadow-sm animate-fade-in">
        <div className="space-y-3">
          <span className="inline-flex items-center px-3 py-1 bg-[#D3ECE6] text-[#0F6F57] text-xs font-bold rounded-full uppercase tracking-wide">
            Laporan Institusi
          </span>
          <div>
            <h2 className="text-2xl font-bold text-slate-800 leading-tight">
              {formPTName}
            </h2>
            <p className="text-sm text-slate-500 font-semibold mt-1">
              Kode PT: {formPTCode}
            </p>
          </div>
        </div>

        {/* Status and Progress Container inside Banner */}
        <div className="bg-white border border-slate-100 rounded-2xl p-4 shadow-sm w-full lg:w-80 space-y-4">
          <div className="flex justify-between items-center text-xs font-bold text-slate-500">
            <span>Indikator tercentang</span>
            <span className="text-slate-800">{checkedCount} / {TOTAL_INDICATORS_COUNT}</span>
          </div>

          <div className="space-y-1">
            <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden">
              <div
                className="bg-[#0F6F57] h-2 rounded-full transition-all duration-300"
                style={{ width: `${completionPercentage}%` }}
              />
            </div>
            <div className="text-[10px] text-right font-bold text-slate-400">
              {completionPercentage}% kelengkapan
            </div>
          </div>

          <div className="border-t border-slate-100 pt-3 space-y-2 text-xs">
            <div className="flex justify-between items-center">
              <span className="font-semibold text-slate-400">Status</span>
              <span className="font-bold text-slate-800">{getStatusLabel(formStatus)}</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="font-semibold text-slate-400">Tahun pelaporan</span>
              <span className="font-bold text-[#0F6F57] bg-[#E6F4F1] px-2 py-0.5 rounded text-[11px]">{formTahun}</span>
            </div>
          </div>
        </div>
      </div>

      <form onSubmit={handleSubmitForm} className="space-y-6">
        {/* Main configuration white card */}
        <div className="bg-white border border-slate-100 rounded-2xl p-6 shadow-[0_8px_30px_rgb(0,0,0,0.02)] grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
          <div className="lg:col-span-1 space-y-4">

            {/* Tahun Pelaporan Input */}
            <div>
              <label className="block text-xs font-bold text-slate-700 mb-1.5">
                Tahun Pelaporan <span className="text-rose-500">*</span>
              </label>
              <select
                value={formTahun}
                onChange={(e) => setFormTahun(e.target.value)}
                required
                className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 font-medium focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
              >
                <option value="2026">2026</option>
                <option value="2025">2025</option>
                <option value="2024">2024</option>
                <option value="2023">2023</option>
              </select>
            </div>

          </div>

          {/* Petunjuk Alert Box */}
          <div className="lg:col-span-2 bg-[#F0F5FF] border border-[#DBE5FF] p-5 rounded-2xl">
            <p className="text-xs text-[#2A4494] font-medium leading-relaxed">
              <strong>Petunjuk:</strong> centang indikator yang tersedia di PT Anda, lalu isi URL dokumen pendukung pada baris yang sama. Khusus butir 2.b, isi jumlah mahasiswa dan tautan buktinya. Khusus B.1, pilih level kelembagaan melalui radio button lalu lampirkan dua dokumen pendukungnya di dalam tabel.
            </p>
          </div>
        </div>

        {/* Dynamic Questionnaire Form Categories */}
        {FORM_CATEGORIES.map((category, index) => {
          const showHeader = index === 0 || FORM_CATEGORIES[index - 1].categoryName !== category.categoryName;
          return (
            <div key={category.id} className="space-y-4">
              {showHeader && (
                <span className="block text-xs font-bold text-slate-400 tracking-wider mt-8 mb-2 uppercase">
                  {category.categoryName}
                </span>
              )}

              {/* Category Card */}
              <div className="bg-white border border-slate-100 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.02)] overflow-hidden">
                {/* Card Header */}
                <div className="p-5 border-b border-slate-100 flex justify-between items-center bg-white">
                  <h3 className="font-bold text-slate-800 text-sm md:text-base">
                    {category.sectionTitle}
                  </h3>
                  <span className="inline-flex items-center px-3 py-1 bg-[#EBF3FF] text-[#1E4ED8] text-xs font-semibold rounded-full">
                    Checklist Section
                  </span>
                </div>

                {/* Special Level Selector Cards for B.1 */}
                {category.id === 'cat_b_1' && (
                  <div className="p-6 border-b border-slate-100 bg-slate-50/20">
                    <h4 className="text-xs font-bold text-slate-700 mb-3 uppercase tracking-wider">
                      Level Kelembagaan Bidang Kemahasiswaan
                    </h4>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      {[
                        { level: 'Level 1', text: 'Setingkat Kepala Seksi/Koordinator' },
                        { level: 'Level 2', text: 'Setingkat Wakil Direktur/Kepala Sub Direktorat/Kepala Bagian' },
                        { level: 'Level 3', text: 'Setingkat Wakil Rektor/Direktur' }
                      ].map((item) => (
                        <label
                          key={item.level}
                          className={cn(
                            "flex items-start gap-3.5 p-5 rounded-2xl border-2 cursor-pointer transition-all hover:border-[#1E4ED8]/45 select-none bg-white",
                            b1Level === item.level
                              ? "border-[#1E4ED8] bg-[#EBF3FF]/45 shadow-sm"
                              : "border-slate-200/70"
                          )}
                        >
                          <input
                            type="radio"
                            name="b1_level_kelembagaan"
                            value={item.level}
                            checked={b1Level === item.level}
                            onChange={() => setB1Level(item.level as any)}
                            className="mt-1 h-4.5 w-4.5 text-[#1E4ED8] focus:ring-[#1E4ED8] border-slate-300"
                          />
                          <div className="space-y-1">
                            <span className={cn("block font-extrabold text-sm", b1Level === item.level ? "text-[#1E4ED8]" : "text-slate-800")}>{item.level}</span>
                            <span className="block text-xs font-semibold text-slate-500 leading-relaxed">{item.text}</span>
                          </div>
                        </label>
                      ))}
                    </div>
                  </div>
                )}

                {/* Questionnaire Table */}
                <div className="overflow-x-auto">
                  <table className="w-full border-collapse text-left">
                    <thead>
                      <tr className="bg-slate-50/40 border-b border-slate-100 text-xs font-bold text-slate-400 uppercase">
                        <th className="px-6 py-4 w-16 text-center">No</th>
                        <th className="px-6 py-4">Indikator</th>
                        <th className="px-6 py-4 w-40 text-center">Isian</th>
                        <th className="px-6 py-4 w-80">Link Dokumen</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100 text-slate-700">
                      {/* Indicators Rendering */}
                      {category.indicators.map((indicator) => {
                        const displayNo = indicator.no;
                        const isChecked = !!checkedIndicators[indicator.id];

                        return (
                          <tr key={indicator.id} className="hover:bg-slate-50/20 align-middle">
                            <td className="px-6 py-5 text-sm text-center font-bold text-slate-400">
                              {displayNo}
                            </td>
                            <td className="px-6 py-5 text-sm max-w-xl">
                              <div className="font-semibold text-slate-700 leading-relaxed">
                                {indicator.text}
                              </div>
                            </td>
                            <td className="px-6 py-5 text-sm text-center">
                              <div className="flex justify-center items-center">
                                {category.id === 'cat_b_1' ? (
                                  <span className="inline-flex items-center px-3.5 py-1.5 bg-[#FEF3C7] text-[#D97706] text-[11px] font-bold rounded-full border border-[#FDE68A] whitespace-nowrap uppercase tracking-wider">
                                    Dokumen Pendukung
                                  </span>
                                ) : category.type === 'input_number' ? (
                                  /* Special Input Number for 2.b */
                                  <div className="flex flex-col items-center gap-1.5 bg-slate-50/60 p-2 rounded-xl border border-slate-100">
                                    <span className="text-[9px] uppercase font-extrabold tracking-wider text-primary bg-primary/10 px-2 py-0.5 rounded-full whitespace-nowrap">
                                      {indicator.pillText || 'Jumlah Mahasiswa'}
                                    </span>
                                    <input
                                      type="number"
                                      min="0"
                                      value={numberInputs[indicator.id] || 0}
                                      onChange={(e) => {
                                        const val = parseInt(e.target.value) || 0;
                                        setNumberInputs(prev => ({ ...prev, [indicator.id]: val }));
                                      }}
                                      className="w-20 text-center border border-slate-200 rounded-lg py-1 text-xs font-bold focus:outline-none focus:border-primary transition-all shadow-inner"
                                    />
                                  </div>
                                ) : (
                                  /* Custom Checkbox */
                                  <div
                                    onClick={() => handleToggleCheck(indicator.id)}
                                    className={cn(
                                      "w-7 h-7 rounded-xl border-2 flex items-center justify-center cursor-pointer transition-all shadow-sm",
                                      isChecked
                                        ? "border-primary bg-primary text-white"
                                        : "border-slate-200 bg-white hover:border-slate-300"
                                    )}
                                  >
                                    {isChecked && <Check className="w-4.5 h-4.5 stroke-[3.5]" />}
                                  </div>
                                )}
                              </div>
                            </td>
                            <td className="px-6 py-5 text-sm">
                              {category.id === 'cat_b_1' ? (
                                <input
                                  type="text"
                                  value={indicator.no === 1 ? b1Doc1 : b1Doc2}
                                  onChange={(e) => {
                                    if (indicator.no === 1) setB1Doc1(e.target.value);
                                    else setB1Doc2(e.target.value);
                                  }}
                                  placeholder="https://..."
                                  className="w-full px-3 py-2 bg-white border border-slate-200 rounded-lg text-xs placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all shadow-sm"
                                />
                              ) : (
                                <input
                                  type="text"
                                  value={documentLinks[indicator.id] || ''}
                                  onChange={(e) => handleLinkChange(indicator.id, e.target.value)}
                                  placeholder="https://..."
                                  className="w-full px-3 py-2 bg-white border border-slate-200 rounded-lg text-xs placeholder:text-slate-400 text-slate-800 font-medium focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all shadow-sm"
                                />
                              )}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>

                {/* Sub-category Footer */}
                <div className="p-4 border-t border-slate-100 flex justify-end bg-slate-50/20">
                  <button
                    type="button"
                    onClick={() => saveReport('draft')}
                    className="border border-slate-800 text-slate-800 hover:bg-slate-100 rounded-xl px-5 py-2.5 text-xs font-bold transition-all"
                  >
                    Simpan Draft
                  </button>
                </div>
              </div>
            </div>
          );
        })}

        {/* Global form buttons */}
        <div className="flex items-center justify-between pt-6 border-t border-slate-100">
          <button
            type="button"
            onClick={() => router.push('/dashboard/admin/institusi')}
            className="flex items-center gap-2 px-5 py-2.5 bg-white hover:bg-slate-50 border border-slate-200 text-slate-600 rounded-xl text-xs font-bold transition-all hover:shadow-sm"
          >
            <ArrowLeft className="h-4 w-4" />
            Kembali
          </button>

          <div className="flex items-center gap-3">
            <button
              type="button"
              onClick={() => saveReport('draft')}
              className="border border-slate-300 hover:bg-slate-50 text-slate-700 bg-white rounded-xl px-5 py-2.5 text-xs font-bold transition-all"
            >
              Simpan Sebagai Draft
            </button>
            <button
              type="submit"
              disabled={submitting}
              className="flex items-center gap-2 px-6 py-2.5 bg-[#0B1936] hover:bg-[#12254B] text-white rounded-xl text-xs font-bold shadow-md transition-all disabled:opacity-50"
            >
              {submitting ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <Save className="h-4 w-4" />
              )}
              Simpan Laporan
            </button>
          </div>
        </div>
      </form>
    </div>
  );
}