"use client";

import React, { useState, useEffect, useRef } from "react";
import {
  X,
  Printer,
  FileText,
  User,
  MapPin,
  Users,
  GraduationCap,
  Activity,
  Heart,
  BookOpen,
  Compass,
  FileSpreadsheet,
  CheckCircle2,
  AlertCircle,
  Download,
  Eye,
  Phone,
  Calendar,
  School,
  Building,
  Award,
  Layers,
  Sparkles,
  ShieldCheck,
  Check,
  ExternalLink,
} from "lucide-react";
import { Badge } from "@/components/ui/Badge";
import { Button } from "@/components/ui/Button";
import { useSchoolOfficials } from "@/hooks/useSchoolOfficials";

interface StudentBiodataDetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  studentId: number | null;
  nis: string | null;
  initialStudent?: any;
}

export const StudentBiodataDetailModal: React.FC<StudentBiodataDetailModalProps> = ({
  isOpen,
  onClose,
  studentId,
  nis,
  initialStudent,
}) => {
  const { getOfficial } = useSchoolOfficials();
  const kepalaSekolah = getOfficial("kepala_sekolah");

  const [activeTab, setActiveTab] = useState<
    | "identitas"
    | "tempat_tinggal"
    | "keluarga"
    | "pendidikan"
    | "kesehatan"
    | "hobi"
    | "kegiatan_belajar"
    | "peminatan"
    | "nilai_smp"
    | "berkas"
  >("identitas");

  const [loading, setLoading] = useState<boolean>(true);
  const [student, setStudent] = useState<any>(initialStudent || null);
  const [bukuInduk, setBukuInduk] = useState<any>(null);
  const [savedBiodata, setSavedBiodata] = useState<any>(null);
  const [completion, setCompletion] = useState<number>(0);
  const [isApproved, setIsApproved] = useState<boolean>(false);
  const [penandatangan, setPenandatangan] = useState<string>("");
  const [tanggalPernyataan, setTanggalPernyataan] = useState<string>("");
  const [previewDoc, setPreviewDoc] = useState<{ title: string; url: string } | null>(null);

  // Print Mode State
  const [isPrintMode, setIsPrintMode] = useState<boolean>(false);
  const printRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!isOpen || (!studentId && !nis)) return;

    async function loadData() {
      setLoading(true);
      try {
        const params = new URLSearchParams();
        if (studentId) params.set("student_id", String(studentId));
        if (nis) params.set("nis", nis);

        const res = await fetch(`/api/portal/biodata?${params.toString()}`, { cache: "no-store" });
        const json = await res.json();

        if (json.success) {
          setStudent(json.student || initialStudent);
          setBukuInduk(json.buku_induk || {});
          setSavedBiodata(json.saved_biodata || {});
          setCompletion(json.completion_percentage ?? 0);
          setIsApproved(json.status_pernyataan === 1 || Boolean(json.saved_biodata?.pernyataan?.setuju));
          setPenandatangan(json.penandatangan || json.saved_biodata?.pernyataan?.namaPenandatangan || "");
          setTanggalPernyataan(json.tanggal_pernyataan || json.saved_biodata?.pernyataan?.tanggal || "");
        }
      } catch (err) {
        console.error("Gagal memuat detail biodata siswa:", err);
      } finally {
        setLoading(false);
      }
    }

    loadData();
  }, [isOpen, studentId, nis, initialStudent]);

  if (!isOpen) return null;

  // Helper merger nilai: Prioritaskan saved_biodata > buku_induk > students > default
  const getVal = (...cands: any[]) => {
    for (const c of cands) {
      if (c !== undefined && c !== null && String(c).trim() !== "") {
        return String(c);
      }
    }
    return "-";
  };

  const b = savedBiodata || {};
  const bi = bukuInduk || {};
  const s = student || {};

  // Ekstrak data terstruktur per kategori
  const iden = {
    fotoUrl: b.identitas?.fotoUrl || bi.pasfoto_url || "",
    nis: s.nis || bi.nis || "-",
    nisn: b.identitas?.nisn || s.nisn || bi.nisn || "-",
    namaLengkap: s.nama_lengkap || bi.nama_lengkap || "-",
    namaPanggilan: b.identitas?.namaPanggilan || bi.nama_panggilan || "-",
    jenisKelamin: b.identitas?.jenisKelamin || s.jenis_kelamin || bi.jenis_kelamin || "-",
    nik: b.identitas?.nik || bi.nik || "-",
    tempatLahir: b.identitas?.tempatLahir || s.tempat_lahir || bi.tempat_lahir || "-",
    tanggalLahir: b.identitas?.tanggalLahir || s.tanggal_lahir || bi.tanggal_lahir || "-",
    agama: b.identitas?.agama || bi.agama || "-",
    sukuBangsa: b.identitas?.sukuBangsa || bi.suku_bangsa || "-",
    kewarganegaraan: b.identitas?.kewarganegaraan || bi.kewarganegaraan || "WNI",
    bahasaSehariHari: b.identitas?.bahasaSehariHari || bi.bahasa_sehari_hari || "-",
    asalSmp: b.identitas?.asalSmp || bi.sekolah_asal || "-",
    nomorSeriIjazahSmp: b.identitas?.nomorSeriIjazahSmp || bi.no_ijazah_smp || "-",
    rombel: s.rombel || "-",
    tingkat: s.tingkat || "-",
  };

  const tpt = {
    alamatKk: getVal(b.tempatTinggal?.alamatKk, s.alamat, bi.alamat),
    kelurahanKk: getVal(b.tempatTinggal?.kelurahanKk, bi.desa_kelurahan),
    kecamatanKk: getVal(b.tempatTinggal?.kecamatanKk, bi.kecamatan),
    kotaKk: getVal(b.tempatTinggal?.kotaKk, bi.kota_kabupaten),
    provinsiKk: getVal(b.tempatTinggal?.provinsiKk, bi.provinsi),
    kodePosKk: getVal(b.tempatTinggal?.kodePosKk, bi.kode_pos),
    telpRumah: getVal(b.tempatTinggal?.telpRumah, bi.no_telepon_rumah),
    alamatTinggal: getVal(b.tempatTinggal?.alamatTinggal, s.alamat, bi.alamat),
    kelurahanTinggal: getVal(b.tempatTinggal?.kelurahanTinggal, bi.desa_kelurahan),
    kecamatanTinggal: getVal(b.tempatTinggal?.kecamatanTinggal, bi.kecamatan),
    kotaTinggal: getVal(b.tempatTinggal?.kotaTinggal, bi.kota_kabupaten),
    provinsiTinggal: getVal(b.tempatTinggal?.provinsiTinggal, bi.provinsi),
    kodePosTinggal: getVal(b.tempatTinggal?.kodePosTinggal, bi.kode_pos),
    statusTempatTinggal: getVal(b.tempatTinggal?.statusTempatTinggal, bi.status_tempat_tinggal),
    kondisiTempatTinggal: getVal(b.tempatTinggal?.kondisiTempatTinggal),
    kondisiPenerangan: getVal(b.tempatTinggal?.kondisiPenerangan),
    lingkunganTempatTinggal: getVal(b.tempatTinggal?.lingkunganTempatTinggal),
    mediaTransportasi: getVal(b.tempatTinggal?.mediaTransportasi, bi.transportasi_ke_sekolah),
    jumlahMotor: getVal(b.tempatTinggal?.jumlahMotor),
    jumlahMobil: getVal(b.tempatTinggal?.jumlahMobil),
    jarakSekolahKm: getVal(b.tempatTinggal?.jarakSekolahKm, bi.jarak_ke_sekolah),
    waktuTempuhMenit: getVal(b.tempatTinggal?.waktuTempuhMenit),
    kondisiRuangBelajar: getVal(b.tempatTinggal?.kondisiRuangBelajar),
    kondisiKamarTidur: getVal(b.tempatTinggal?.kondisiKamarTidur),
    perlengkapanBelajar: getVal(b.tempatTinggal?.perlengkapanBelajar),
  };

  const kel = {
    penanggungJawab: getVal(b.keluarga?.penanggungJawab, "Orang Tua"),
    statusHubunganAnak: getVal(b.keluarga?.statusHubunganAnak, bi.status_anak),
    anakKe: getVal(b.keluarga?.anakKe, bi.anak_ke),
    jumlahSaudaraKandung: getVal(b.keluarga?.jumlahSaudaraKandung, bi.saudara_kandung, bi.jumlah_saudara),
    namaAyah: getVal(b.keluarga?.namaAyah, bi.nama_ayah, s.nama_ortu_wali),
    statusAyah: getVal(b.keluarga?.statusAyah, "Masih Hidup"),
    nikAyah: getVal(b.keluarga?.nikAyah, bi.nik_ayah),
    tempatLahirAyah: getVal(b.keluarga?.tempatLahirAyah, bi.tempat_lahir_ayah),
    tanggalLahirAyah: getVal(b.keluarga?.tanggalLahirAyah, bi.tanggal_lahir_ayah),
    agamaAyah: getVal(b.keluarga?.agamaAyah, bi.agama),
    kewarganegaraanAyah: getVal(b.keluarga?.kewarganegaraanAyah, "WNI"),
    pendidikanAyah: getVal(b.keluarga?.pendidikanAyah, bi.pendidikan_ayah),
    pekerjaanAyah: getVal(b.keluarga?.pekerjaanAyah, bi.pekerjaan_ayah),
    penghasilanAyah: getVal(b.keluarga?.penghasilanAyah, bi.penghasilan_ayah),
    hpAyah: getVal(b.keluarga?.hpAyah, s.no_wa_ortu, bi.no_telp_ortu),
    alamatAyah: getVal(b.keluarga?.alamatAyah),
    namaIbu: getVal(b.keluarga?.namaIbu, bi.nama_ibu),
    statusIbu: getVal(b.keluarga?.statusIbu, "Masih Hidup"),
    nikIbu: getVal(b.keluarga?.nikIbu, bi.nik_ibu),
    tempatLahirIbu: getVal(b.keluarga?.tempatLahirIbu, bi.tempat_lahir_ibu),
    tanggalLahirIbu: getVal(b.keluarga?.tanggalLahirIbu, bi.tanggal_lahir_ibu),
    agamaIbu: getVal(b.keluarga?.agamaIbu, bi.agama),
    kewarganegaraanIbu: getVal(b.keluarga?.kewarganegaraanIbu, "WNI"),
    pendidikanIbu: getVal(b.keluarga?.pendidikanIbu, bi.pendidikan_ibu),
    pekerjaanIbu: getVal(b.keluarga?.pekerjaanIbu, bi.pekerjaan_ibu),
    penghasilanIbu: getVal(b.keluarga?.penghasilanIbu, bi.penghasilan_ibu),
    hpIbu: getVal(b.keluarga?.hpIbu),
    alamatIbu: getVal(b.keluarga?.alamatIbu),
    namaWali: getVal(b.keluarga?.namaWali, bi.nama_wali),
    hubunganWali: getVal(b.keluarga?.hubunganWali, bi.hubungan_wali),
    nikWali: getVal(b.keluarga?.nikWali, bi.nik_wali),
    pekerjaanWali: getVal(b.keluarga?.pekerjaanWali, bi.pekerjaan_wali),
    hpWali: getVal(b.keluarga?.hpWali, bi.no_telp_wali),
    alamatWali: getVal(b.keluarga?.alamatWali, bi.alamat_wali),
  };

  const pend = {
    tk: {
      nama: getVal(b.pendidikan?.tk?.nama),
      lamaBelajar: getVal(b.pendidikan?.tk?.lamaBelajar),
      alamat: getVal(b.pendidikan?.tk?.alamat),
    },
    sd: {
      nama: getVal(b.pendidikan?.sd?.nama),
      lamaBelajar: getVal(b.pendidikan?.sd?.lamaBelajar),
      tinggalKelas: getVal(b.pendidikan?.sd?.tinggalKelas),
      alamat: getVal(b.pendidikan?.sd?.alamat),
      prestasi: b.pendidikan?.sd?.prestasi || [],
    },
    smp: {
      nama: getVal(b.pendidikan?.smp?.nama, bi.sekolah_asal),
      lamaBelajar: getVal(b.pendidikan?.smp?.lamaBelajar),
      tinggalKelas: getVal(b.pendidikan?.smp?.tinggalKelas),
      alamat: getVal(b.pendidikan?.smp?.alamat, bi.alamat_sekolah_asal),
      prestasi: b.pendidikan?.smp?.prestasi || [],
    },
    organisasi: b.pendidikan?.organisasi || [],
    kursus: b.pendidikan?.kursus || [],
  };

  const kes = {
    beratBadan: getVal(b.kesehatan?.beratBadan, bi.berat_badan_masuk, bi.berat_badan_lulus),
    tinggiBadan: getVal(b.kesehatan?.tinggiBadan, bi.tinggi_badan_masuk, bi.tinggi_badan_lulus),
    golonganDarah: getVal(b.kesehatan?.golonganDarah, bi.golongan_darah),
    warnaKulit: getVal(b.kesehatan?.warnaKulit),
    bentukWajah: getVal(b.kesehatan?.bentukWajah),
    jenisRambut: getVal(b.kesehatan?.jenisRambut),
    keadaanMata: getVal(b.kesehatan?.keadaanMata),
    alatBantuMata: getVal(b.kesehatan?.alatBantuMata),
    keadaanTelinga: getVal(b.kesehatan?.keadaanTelinga),
    alatBantuTelinga: getVal(b.kesehatan?.alatBantuTelinga),
    penyakitPernahDiderita: getVal(b.kesehatan?.penyakitPernahDiderita, bi.riwayat_penyakit),
    penyakitSeringKambuh: getVal(b.kesehatan?.penyakitSeringKambuh),
    alergiObatMakanan: getVal(b.kesehatan?.alergiObatMakanan),
  };

  const hobi = {
    hobiOlahraga: getVal(b.hobi?.hobiOlahraga),
    perlengkapanOlahraga: getVal(b.hobi?.perlengkapanOlahraga),
    bakatOlahraga: getVal(b.hobi?.bakatOlahraga),
    hobiSeni: getVal(b.hobi?.hobiSeni),
    perlengkapanSeni: getVal(b.hobi?.perlengkapanSeni),
    bakatSeni: getVal(b.hobi?.bakatSeni),
    hobiLainnya: getVal(b.hobi?.hobiLainnya),
    bakatLainnya: getVal(b.hobi?.bakatLainnya),
    mapelFavorit: getVal(b.hobi?.mapelFavorit),
    kegiatanWaktuSenggang: getVal(b.hobi?.kegiatanWaktuSenggang),
  };

  const kb = {
    kelompokBelajar: getVal(b.kegiatanBelajar?.kelompokBelajar),
    detailKelompok: getVal(b.kegiatanBelajar?.detailKelompok),
    lembagaBimbel: getVal(b.kegiatanBelajar?.lembagaBimbel),
    jadwalBelajarRumah: getVal(b.kegiatanBelajar?.jadwalBelajarRumah),
    jamBelajar: getVal(b.kegiatanBelajar?.jamBelajar),
    kebiasaanBelajar: getVal(b.kegiatanBelajar?.kebiasaanBelajar),
    kegiatanLibur: getVal(b.kegiatanBelajar?.kegiatanLibur),
  };

  const pem = {
    prodiDiminatiMasuk: getVal(b.peminatan?.prodiDiminatiMasuk),
    rekomendasiBkSmp: getVal(b.peminatan?.rekomendasiBkSmp),
    rekomendasiPsikotesSmp: getVal(b.peminatan?.rekomendasiPsikotesSmp),
    ptn1: getVal(b.peminatan?.ptn1, s.rencana_karir_universitas),
    ptn2: getVal(b.peminatan?.ptn2),
    ptn3: getVal(b.peminatan?.ptn3),
    pts: getVal(b.peminatan?.pts),
    ptLuarNegeri: getVal(b.peminatan?.ptLuarNegeri),
    kedinasan: getVal(b.peminatan?.kedinasan),
    citaCita: getVal(b.peminatan?.citaCita, s.rencana_karir_jurusan),
    faktorPendukung: getVal(b.peminatan?.faktorPendukung),
  };

  const nilaiSmp = b.nilaiSmp || {};

  const getSmpVal = (semKey: string, ...keys: string[]) => {
    const sem = nilaiSmp?.[semKey];
    if (!sem) return "-";
    for (const k of keys) {
      if (sem[k] !== undefined && sem[k] !== null && String(sem[k]).trim() !== "") {
        return String(sem[k]);
      }
    }
    return "-";
  };

  // Binding dinamis Orang Tua / Wali Siswa secara real-time dari data profil/biodata siswa
  const namaOrtuWali =
    (penandatangan && penandatangan.trim() !== "" && penandatangan !== "-")
      ? penandatangan.trim()
      : (b.pernyataan?.namaPenandatangan && b.pernyataan.namaPenandatangan.trim() !== "" && b.pernyataan.namaPenandatangan !== "-")
      ? b.pernyataan.namaPenandatangan.trim()
      : (b.keluarga?.namaAyah && b.keluarga.namaAyah.trim() !== "" && b.keluarga.namaAyah !== "-")
      ? b.keluarga.namaAyah.trim()
      : (s.nama_ortu_wali && s.nama_ortu_wali.trim() !== "" && s.nama_ortu_wali !== "-")
      ? s.nama_ortu_wali.trim()
      : (bi.nama_ayah && bi.nama_ayah.trim() !== "" && bi.nama_ayah !== "-")
      ? bi.nama_ayah.trim()
      : (b.keluarga?.namaIbu && b.keluarga.namaIbu.trim() !== "" && b.keluarga.namaIbu !== "-")
      ? b.keluarga.namaIbu.trim()
      : (bi.nama_ibu && bi.nama_ibu.trim() !== "" && bi.nama_ibu !== "-")
      ? bi.nama_ibu.trim()
      : (b.keluarga?.namaWali && b.keluarga.namaWali.trim() !== "" && b.keluarga.namaWali !== "-")
      ? b.keluarga.namaWali.trim()
      : (bi.nama_wali && bi.nama_wali.trim() !== "" && bi.nama_wali !== "-")
      ? bi.nama_wali.trim()
      : (kel.namaAyah && kel.namaAyah !== "-")
      ? kel.namaAyah
      : (kel.namaIbu && kel.namaIbu !== "-")
      ? kel.namaIbu
      : (kel.namaWali && kel.namaWali !== "-")
      ? kel.namaWali
      : "Orang Tua / Wali Siswa";

  const handlePrint = () => {
    window.print();
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-3 sm:p-5 print:static print:overflow-visible print:p-0 print:m-0 print:bg-white print:block">
      <div className="bg-white rounded-2xl shadow-2xl border border-slate-200 w-full max-w-5xl max-h-[92vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200 print:hidden">
        
        {/* HEADER MODAL */}
        <div className="px-6 py-4 bg-gradient-to-r from-brand-navy to-slate-900 text-white flex items-center justify-between shrink-0 shadow-md">
          <div className="flex items-center gap-3.5">
            <div className="w-12 h-12 rounded-xl bg-white/10 border border-white/20 overflow-hidden flex items-center justify-center shrink-0">
              {iden.fotoUrl ? (
                <img
                  src={iden.fotoUrl}
                  alt={iden.namaLengkap}
                  className="w-full h-full object-cover"
                />
              ) : (
                <span className="text-lg font-bold text-white uppercase">
                  {iden.namaLengkap.split(" ").slice(0, 2).map((n: string) => n[0]).join("")}
                </span>
              )}
            </div>

            <div>
              <div className="flex items-center gap-2">
                <h2 className="text-base sm:text-lg font-bold tracking-tight text-white">
                  {iden.namaLengkap}
                </h2>
                <Badge
                  variant={
                    completion === 100
                      ? "success"
                      : completion > 0
                      ? "primary"
                      : "neutral"
                  }
                  size="sm"
                >
                  {completion === 100 ? "Lengkap 100%" : `${completion}% Terisi`}
                </Badge>
                {isApproved && (
                  <Badge variant="success" size="sm" className="hidden sm:inline-flex gap-1">
                    <Check className="w-3 h-3" /> Disetujui Ortu
                  </Badge>
                )}
              </div>
              <p className="text-xs text-slate-300 font-mono mt-0.5">
                NIS: {iden.nis} • NISN: {iden.nisn} • Rombel: <strong className="text-white">{iden.rombel}</strong> ({iden.tingkat})
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={handlePrint}
              type="button"
              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/15 hover:bg-white/25 text-white font-medium text-xs transition-colors border border-white/20"
              title="Cetak Formulir Biodata Resmi (PDF)"
            >
              <Printer className="w-4 h-4" />
              <span className="hidden sm:inline">Cetak Form (PDF)</span>
            </button>
            <button
              onClick={onClose}
              type="button"
              className="p-1.5 rounded-lg text-slate-300 hover:text-white hover:bg-white/10 transition-colors"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* TAB NAVIGATION */}
        <div className="flex items-center gap-1 px-4 py-2 bg-slate-100 border-b border-slate-200 overflow-x-auto shrink-0 text-xs font-semibold text-slate-600 no-scrollbar">
          {[
            { id: "identitas", label: "1. Identitas", icon: User },
            { id: "tempat_tinggal", label: "2. Tempat Tinggal", icon: MapPin },
            { id: "keluarga", label: "3. Keluarga", icon: Users },
            { id: "pendidikan", label: "4. Pendidikan", icon: GraduationCap },
            { id: "kesehatan", label: "5. Kesehatan", icon: Activity },
            { id: "hobi", label: "6. Hobi & Minat", icon: Heart },
            { id: "kegiatan_belajar", label: "7. Kegiatan Belajar", icon: BookOpen },
            { id: "peminatan", label: "8. Peminatan & Karir", icon: Compass },
            { id: "nilai_smp", label: "9. Nilai SMP", icon: FileSpreadsheet },
            { id: "berkas", label: "10. Berkas & Pernyataan", icon: FileText },
          ].map((tab) => {
            const Icon = tab.icon;
            const active = activeTab === tab.id;
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as any)}
                className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg whitespace-nowrap transition-all ${
                  active
                    ? "bg-white text-brand-navy shadow-xs border border-slate-200 font-bold"
                    : "hover:bg-slate-200/70 text-slate-600"
                }`}
              >
                <Icon className={`w-3.5 h-3.5 ${active ? "text-brand-blue" : "text-slate-400"}`} />
                <span>{tab.label}</span>
              </button>
            );
          })}
        </div>

        {/* CONTENT BODY */}
        <div className="p-6 overflow-y-auto flex-1 space-y-5 text-xs text-slate-700 bg-slate-50/50">
          {loading ? (
            <div className="flex flex-col items-center justify-center py-16 gap-3 text-slate-400">
              <div className="w-8 h-8 border-3 border-brand-blue border-t-transparent rounded-full animate-spin" />
              <p className="font-medium">Memuat data lengkap biodata siswa...</p>
            </div>
          ) : (
            <>
              {/* TAB 1: IDENTITAS */}
              {activeTab === "identitas" && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between pb-2 border-b border-slate-200">
                    <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
                      <User className="w-4 h-4 text-brand-blue" />
                      Identitas Pokok Peserta Didik
                    </h3>
                    <Badge variant="primary" size="sm">Identitas Kependudukan</Badge>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {/* Foto Siswa */}
                    <div className="p-4 bg-white rounded-xl border border-slate-200 flex flex-col items-center text-center">
                      <div className="w-32 h-40 rounded-lg bg-slate-100 border border-slate-300 overflow-hidden shadow-xs flex items-center justify-center mb-3">
                        {iden.fotoUrl ? (
                          <img src={iden.fotoUrl} alt={iden.namaLengkap} className="w-full h-full object-cover" />
                        ) : (
                          <span className="text-xs text-slate-400">Belum ada foto</span>
                        )}
                      </div>
                      <span className="font-bold text-slate-800 text-sm">{iden.namaLengkap}</span>
                      <span className="text-slate-500 font-mono mt-0.5">{iden.nis} / {iden.nisn}</span>
                    </div>

                    {/* Rincian Identitas */}
                    <div className="md:col-span-2 p-4 bg-white rounded-xl border border-slate-200 grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                      <div>
                        <span className="text-slate-400 block mb-0.5">Nama Panggilan:</span>
                        <span className="font-semibold text-slate-800">{iden.namaPanggilan}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block mb-0.5">Jenis Kelamin:</span>
                        <span className="font-semibold text-slate-800">{iden.jenisKelamin}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block mb-0.5">Nomor Induk Kependudukan (NIK):</span>
                        <span className="font-semibold text-slate-800 font-mono">{iden.nik}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block mb-0.5">Tempat, Tanggal Lahir:</span>
                        <span className="font-semibold text-slate-800">{iden.tempatLahir}, {iden.tanggalLahir}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block mb-0.5">Agama:</span>
                        <span className="font-semibold text-slate-800">{iden.agama}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block mb-0.5">Suku Bangsa:</span>
                        <span className="font-semibold text-slate-800">{iden.sukuBangsa}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block mb-0.5">Kewarganegaraan:</span>
                        <span className="font-semibold text-slate-800">{iden.kewarganegaraan}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block mb-0.5">Bahasa Sehari-hari:</span>
                        <span className="font-semibold text-slate-800">{iden.bahasaSehariHari}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block mb-0.5">Asal SMP / MTs:</span>
                        <span className="font-semibold text-slate-800">{iden.asalSmp}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block mb-0.5">Nomor Seri Ijazah SMP:</span>
                        <span className="font-semibold text-slate-800 font-mono">{iden.nomorSeriIjazahSmp}</span>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {/* TAB 2: TEMPAT TINGGAL */}
              {activeTab === "tempat_tinggal" && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between pb-2 border-b border-slate-200">
                    <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
                      <MapPin className="w-4 h-4 text-emerald-600" />
                      Alamat & Kondisi Tempat Tinggal
                    </h3>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {/* Alamat Kartu Keluarga */}
                    <div className="p-4 bg-white rounded-xl border border-slate-200 space-y-2.5">
                      <h4 className="font-bold text-slate-800 pb-1.5 border-b border-slate-100 flex items-center gap-1.5">
                        <Building className="w-4 h-4 text-brand-blue" />
                        Alamat Sesuai Kartu Keluarga (KK)
                      </h4>
                      <div>
                        <span className="text-slate-400 block">Alamat Lengkap:</span>
                        <span className="font-medium text-slate-800 leading-relaxed">{tpt.alamatKk}</span>
                      </div>
                      <div className="grid grid-cols-2 gap-2 pt-1">
                        <div>
                          <span className="text-slate-400 block">Kelurahan:</span>
                          <span className="font-semibold text-slate-800">{tpt.kelurahanKk}</span>
                        </div>
                        <div>
                          <span className="text-slate-400 block">Kecamatan:</span>
                          <span className="font-semibold text-slate-800">{tpt.kecamatanKk}</span>
                        </div>
                        <div>
                          <span className="text-slate-400 block">Kota / Kabupaten:</span>
                          <span className="font-semibold text-slate-800">{tpt.kotaKk}</span>
                        </div>
                        <div>
                          <span className="text-slate-400 block">Provinsi & Kode Pos:</span>
                          <span className="font-semibold text-slate-800">{tpt.provinsiKk} ({tpt.kodePosKk})</span>
                        </div>
                      </div>
                    </div>

                    {/* Alamat Domisili */}
                    <div className="p-4 bg-white rounded-xl border border-slate-200 space-y-2.5">
                      <h4 className="font-bold text-slate-800 pb-1.5 border-b border-slate-100 flex items-center gap-1.5">
                        <MapPin className="w-4 h-4 text-amber-600" />
                        Alamat Domisili Tinggal Sekarang
                      </h4>
                      <div>
                        <span className="text-slate-400 block">Alamat Tinggal:</span>
                        <span className="font-medium text-slate-800 leading-relaxed">{tpt.alamatTinggal}</span>
                      </div>
                      <div className="grid grid-cols-2 gap-2 pt-1">
                        <div>
                          <span className="text-slate-400 block">Status Tempat Tinggal:</span>
                          <span className="font-semibold text-slate-800">{tpt.statusTempatTinggal}</span>
                        </div>
                        <div>
                          <span className="text-slate-400 block">Kondisi Rumah:</span>
                          <span className="font-semibold text-slate-800">{tpt.kondisiTempatTinggal}</span>
                        </div>
                        <div>
                          <span className="text-slate-400 block">Kondisi Penerangan:</span>
                          <span className="font-semibold text-slate-800">{tpt.kondisiPenerangan}</span>
                        </div>
                        <div>
                          <span className="text-slate-400 block">Transportasi:</span>
                          <span className="font-semibold text-slate-800">{tpt.mediaTransportasi}</span>
                        </div>
                      </div>
                    </div>

                    {/* Fasilitas Belajar */}
                    <div className="md:col-span-2 p-4 bg-white rounded-xl border border-slate-200 grid grid-cols-1 sm:grid-cols-3 gap-3">
                      <div>
                        <span className="text-slate-400 block">Ruang Belajar:</span>
                        <span className="font-semibold text-slate-800">{tpt.kondisiRuangBelajar}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block">Kamar Tidur:</span>
                        <span className="font-semibold text-slate-800">{tpt.kondisiKamarTidur}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block">Perlengkapan Belajar:</span>
                        <span className="font-semibold text-slate-800">{tpt.perlengkapanBelajar}</span>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {/* TAB 3: KELUARGA */}
              {activeTab === "keluarga" && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between pb-2 border-b border-slate-200">
                    <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
                      <Users className="w-4 h-4 text-blue-600" />
                      Profil Orang Tua Kandung & Wali
                    </h3>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {/* Data Ayah */}
                    <div className="p-4 bg-white rounded-xl border border-slate-200 space-y-2.5">
                      <h4 className="font-bold text-slate-800 pb-1.5 border-b border-slate-100 text-blue-700 flex items-center justify-between">
                        <span>Data Ayah Kandung</span>
                        <Badge variant="neutral" size="sm">{kel.statusAyah}</Badge>
                      </h4>
                      <div className="space-y-2">
                        <div>
                          <span className="text-slate-400 block">Nama Lengkap Ayah:</span>
                          <span className="font-semibold text-slate-800">{kel.namaAyah}</span>
                        </div>
                        <div className="grid grid-cols-2 gap-2">
                          <div>
                            <span className="text-slate-400 block">NIK:</span>
                            <span className="font-semibold text-slate-800 font-mono">{kel.nikAyah}</span>
                          </div>
                          <div>
                            <span className="text-slate-400 block">Pendidikan:</span>
                            <span className="font-semibold text-slate-800">{kel.pendidikanAyah}</span>
                          </div>
                          <div>
                            <span className="text-slate-400 block">Pekerjaan:</span>
                            <span className="font-semibold text-slate-800">{kel.pekerjaanAyah}</span>
                          </div>
                          <div>
                            <span className="text-slate-400 block">Penghasilan:</span>
                            <span className="font-semibold text-slate-800">{kel.penghasilanAyah}</span>
                          </div>
                        </div>
                        <div>
                          <span className="text-slate-400 block">No. Telepon / WA:</span>
                          <span className="font-semibold text-emerald-700 flex items-center gap-1 font-mono">
                            <Phone className="w-3.5 h-3.5" /> {kel.hpAyah}
                          </span>
                        </div>
                      </div>
                    </div>

                    {/* Data Ibu */}
                    <div className="p-4 bg-white rounded-xl border border-slate-200 space-y-2.5">
                      <h4 className="font-bold text-slate-800 pb-1.5 border-b border-slate-100 text-pink-700 flex items-center justify-between">
                        <span>Data Ibu Kandung</span>
                        <Badge variant="neutral" size="sm">{kel.statusIbu}</Badge>
                      </h4>
                      <div className="space-y-2">
                        <div>
                          <span className="text-slate-400 block">Nama Lengkap Ibu:</span>
                          <span className="font-semibold text-slate-800">{kel.namaIbu}</span>
                        </div>
                        <div className="grid grid-cols-2 gap-2">
                          <div>
                            <span className="text-slate-400 block">NIK:</span>
                            <span className="font-semibold text-slate-800 font-mono">{kel.nikIbu}</span>
                          </div>
                          <div>
                            <span className="text-slate-400 block">Pendidikan:</span>
                            <span className="font-semibold text-slate-800">{kel.pendidikanIbu}</span>
                          </div>
                          <div>
                            <span className="text-slate-400 block">Pekerjaan:</span>
                            <span className="font-semibold text-slate-800">{kel.pekerjaanIbu}</span>
                          </div>
                          <div>
                            <span className="text-slate-400 block">Penghasilan:</span>
                            <span className="font-semibold text-slate-800">{kel.penghasilanIbu}</span>
                          </div>
                        </div>
                        <div>
                          <span className="text-slate-400 block">No. Telepon / WA:</span>
                          <span className="font-semibold text-emerald-700 flex items-center gap-1 font-mono">
                            <Phone className="w-3.5 h-3.5" /> {kel.hpIbu}
                          </span>
                        </div>
                      </div>
                    </div>

                    {/* Hubungan Anak & Wali */}
                    <div className="md:col-span-2 p-4 bg-white rounded-xl border border-slate-200 grid grid-cols-2 sm:grid-cols-4 gap-3">
                      <div>
                        <span className="text-slate-400 block">Status Hubungan Anak:</span>
                        <span className="font-semibold text-slate-800">{kel.statusHubunganAnak}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block">Anak Ke / Jumlah Saudara:</span>
                        <span className="font-semibold text-slate-800">Ke-{kel.anakKe} dari {kel.jumlahSaudaraKandung} bersaudara</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block">Nama Wali (Jika ada):</span>
                        <span className="font-semibold text-slate-800">{kel.namaWali}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block">Pekerjaan & Kontak Wali:</span>
                        <span className="font-semibold text-slate-800">{kel.pekerjaanWali} ({kel.hpWali})</span>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {/* TAB 4: PENDIDIKAN */}
              {activeTab === "pendidikan" && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between pb-2 border-b border-slate-200">
                    <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
                      <GraduationCap className="w-4 h-4 text-purple-600" />
                      Riwayat Jenjang Pendidikan Siswa
                    </h3>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {/* TK */}
                    <div className="p-4 bg-white rounded-xl border border-slate-200 space-y-2">
                      <h4 className="font-bold text-purple-800 pb-1 border-b border-slate-100">1. Taman Kanak-Kanak (TK)</h4>
                      <div>
                        <span className="text-slate-400 block">Nama TK / RA:</span>
                        <span className="font-semibold text-slate-800">{pend.tk.nama || "-"}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block">Lama Belajar:</span>
                        <span className="font-semibold text-slate-800">{pend.tk.lamaBelajar || "-"}</span>
                      </div>
                    </div>

                    {/* SD */}
                    <div className="p-4 bg-white rounded-xl border border-slate-200 space-y-2">
                      <h4 className="font-bold text-purple-800 pb-1 border-b border-slate-100">2. Sekolah Dasar (SD)</h4>
                      <div>
                        <span className="text-slate-400 block">Nama SD / MI:</span>
                        <span className="font-semibold text-slate-800">{pend.sd.nama || "-"}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block">Lama Belajar:</span>
                        <span className="font-semibold text-slate-800">{pend.sd.lamaBelajar || "-"}</span>
                      </div>
                    </div>

                    {/* SMP */}
                    <div className="p-4 bg-white rounded-xl border border-slate-200 space-y-2">
                      <h4 className="font-bold text-purple-800 pb-1 border-b border-slate-100">3. SMP / MTs</h4>
                      <div>
                        <span className="text-slate-400 block">Nama Sekolah:</span>
                        <span className="font-semibold text-slate-800">{pend.smp.nama}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block">Lama Belajar:</span>
                        <span className="font-semibold text-slate-800">{pend.smp.lamaBelajar}</span>
                      </div>
                      <div>
                        <span className="text-slate-400 block">Alamat Sekolah:</span>
                        <span className="font-semibold text-slate-800">{pend.smp.alamat}</span>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {/* TAB 5: KESEHATAN */}
              {activeTab === "kesehatan" && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between pb-2 border-b border-slate-200">
                    <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
                      <Activity className="w-4 h-4 text-rose-600" />
                      Keterangan Fisik & Riwayat Kesehatan
                    </h3>
                  </div>

                  <div className="p-4 bg-white rounded-xl border border-slate-200 grid grid-cols-2 sm:grid-cols-4 gap-4">
                    <div>
                      <span className="text-slate-400 block">Tinggi Badan:</span>
                      <span className="font-bold text-slate-800 text-sm">{kes.tinggiBadan ? `${kes.tinggiBadan} cm` : "-"}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Berat Badan:</span>
                      <span className="font-bold text-slate-800 text-sm">{kes.beratBadan ? `${kes.beratBadan} kg` : "-"}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Golongan Darah:</span>
                      <span className="font-bold text-rose-600 text-sm">{kes.golonganDarah}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Keadaan Mata:</span>
                      <span className="font-semibold text-slate-800">{kes.keadaanMata} ({kes.alatBantuMata})</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Keadaan Telinga:</span>
                      <span className="font-semibold text-slate-800">{kes.keadaanTelinga}</span>
                    </div>
                    <div className="col-span-2">
                      <span className="text-slate-400 block">Riwayat Penyakit Pernah Diderita:</span>
                      <span className="font-semibold text-slate-800">{kes.penyakitPernahDiderita}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Alergi Obat / Makanan:</span>
                      <span className="font-semibold text-slate-800">{kes.alergiObatMakanan}</span>
                    </div>
                  </div>
                </div>
              )}

              {/* TAB 6: HOBI */}
              {activeTab === "hobi" && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between pb-2 border-b border-slate-200">
                    <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
                      <Heart className="w-4 h-4 text-pink-600" />
                      Hobi, Bakat & Kegemaran Siswa
                    </h3>
                  </div>

                  <div className="p-4 bg-white rounded-xl border border-slate-200 grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                      <span className="text-slate-400 block">Hobi / Cabang Olahraga:</span>
                      <span className="font-semibold text-slate-800">{hobi.hobiOlahraga}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Hobi / Bidang Seni:</span>
                      <span className="font-semibold text-slate-800">{hobi.hobiSeni}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Mata Pelajaran Favorit:</span>
                      <span className="font-semibold text-slate-800 text-brand-blue">{hobi.mapelFavorit}</span>
                    </div>
                    <div className="sm:col-span-3">
                      <span className="text-slate-400 block">Aktivitas Waktu Senggang:</span>
                      <span className="font-semibold text-slate-800 leading-relaxed">{hobi.kegiatanWaktuSenggang}</span>
                    </div>
                  </div>
                </div>
              )}

              {/* TAB 7: KEGIATAN BELAJAR */}
              {activeTab === "kegiatan_belajar" && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between pb-2 border-b border-slate-200">
                    <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
                      <BookOpen className="w-4 h-4 text-indigo-600" />
                      Pola Kegiatan Belajar di Rumah & Luar Sekolah
                    </h3>
                  </div>

                  <div className="p-4 bg-white rounded-xl border border-slate-200 grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <span className="text-slate-400 block">Kelompok Belajar:</span>
                      <span className="font-semibold text-slate-800">{kb.kelompokBelajar}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Lembaga Bimbingan Belajar (Bimbel):</span>
                      <span className="font-semibold text-slate-800">{kb.lembagaBimbel}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Jadwal Belajar Mandiri:</span>
                      <span className="font-semibold text-slate-800">{kb.jadwalBelajarRumah} ({kb.jamBelajar})</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Kebiasaan Belajar:</span>
                      <span className="font-semibold text-slate-800">{kb.kebiasaanBelajar}</span>
                    </div>
                  </div>
                </div>
              )}

              {/* TAB 8: PEMINATAN & KARIR */}
              {activeTab === "peminatan" && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between pb-2 border-b border-slate-200">
                    <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
                      <Compass className="w-4 h-4 text-amber-600" />
                      Rencana Peminatan & Target Karir Masa Depan
                    </h3>
                  </div>

                  <div className="p-4 bg-white rounded-xl border border-slate-200 grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                      <span className="text-slate-400 block">Peminatan yang Diminati:</span>
                      <span className="font-bold text-brand-navy text-sm">{pem.prodiDiminatiMasuk}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Rekomendasi BK SMP:</span>
                      <span className="font-semibold text-slate-800">{pem.rekomendasiBkSmp}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Rekomendasi Psikotes SMP:</span>
                      <span className="font-semibold text-slate-800">{pem.rekomendasiPsikotesSmp}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Pilihan PTN 1:</span>
                      <span className="font-semibold text-slate-800">{pem.ptn1}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Pilihan PTN 2:</span>
                      <span className="font-semibold text-slate-800">{pem.ptn2}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 block">Pilihan PTN 3 / Kedinasan:</span>
                      <span className="font-semibold text-slate-800">{pem.ptn3 || pem.kedinasan}</span>
                    </div>
                    <div className="sm:col-span-3 pt-2 border-t border-slate-100">
                      <span className="text-slate-400 block">Cita-Cita Profesi / Karir:</span>
                      <span className="font-bold text-brand-blue text-sm">{pem.citaCita}</span>
                    </div>
                  </div>
                </div>
              )}

              {/* TAB 9: NILAI SMP */}
              {activeTab === "nilai_smp" && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between pb-2 border-b border-slate-200">
                    <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
                      <FileSpreadsheet className="w-4 h-4 text-emerald-600" />
                      Rekapitulasi Nilai Rapor SMP (Semester 1 s.d 6)
                    </h3>
                  </div>

                  <div className="overflow-x-auto rounded-xl border border-slate-200 bg-white">
                    <table className="w-full text-left text-xs">
                      <thead>
                        <tr className="bg-slate-100 border-b border-slate-200 font-bold text-slate-700">
                          <th className="p-3">Mata Pelajaran</th>
                          <th className="p-3 text-center">Smt 1</th>
                          <th className="p-3 text-center">Smt 2</th>
                          <th className="p-3 text-center">Smt 3</th>
                          <th className="p-3 text-center">Smt 4</th>
                          <th className="p-3 text-center">Smt 5</th>
                          <th className="p-3 text-center">Smt 6</th>
                          <th className="p-3 text-center bg-slate-200">Rata-rata</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-slate-100 font-medium">
                        {[
                          { key: "pai", label: "Pendidikan Agama & Budi Pekerti" },
                          { key: "ind", label: "Bahasa Indonesia" },
                          { key: "ing", label: "Bahasa Inggris" },
                          { key: "mat", label: "Matematika" },
                          { key: "ipa", label: "Ilmu Pengetahuan Alam (IPA)" },
                        ].map((m) => {
                          const v1 = Number(nilaiSmp.vii_1?.[m.key]) || 0;
                          const v2 = Number(nilaiSmp.vii_2?.[m.key]) || 0;
                          const v3 = Number(nilaiSmp.viii_1?.[m.key]) || 0;
                          const v4 = Number(nilaiSmp.viii_2?.[m.key]) || 0;
                          const v5 = Number(nilaiSmp.ix_1?.[m.key]) || 0;
                          const v6 = Number(nilaiSmp.ix_2?.[m.key]) || 0;
                          const filledVals = [v1, v2, v3, v4, v5, v6].filter((v) => v > 0);
                          const avg = filledVals.length > 0 ? (filledVals.reduce((a, b) => a + b, 0) / filledVals.length).toFixed(1) : "-";

                          return (
                            <tr key={m.key} className="hover:bg-slate-50">
                              <td className="p-3 font-semibold text-slate-800">{m.label}</td>
                              <td className="p-3 text-center font-mono">{v1 || "-"}</td>
                              <td className="p-3 text-center font-mono">{v2 || "-"}</td>
                              <td className="p-3 text-center font-mono">{v3 || "-"}</td>
                              <td className="p-3 text-center font-mono">{v4 || "-"}</td>
                              <td className="p-3 text-center font-mono">{v5 || "-"}</td>
                              <td className="p-3 text-center font-mono">{v6 || "-"}</td>
                              <td className="p-3 text-center font-mono font-bold text-brand-navy bg-slate-50">{avg}</td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                </div>
              )}

              {/* TAB 10: BERKAS & PERNYATAAN */}
              {activeTab === "berkas" && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between pb-2 border-b border-slate-200">
                    <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
                      <FileText className="w-4 h-4 text-brand-blue" />
                      Status Berkas Dokumen & Surat Pernyataan Orang Tua
                    </h3>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {/* Daftar Berkas */}
                    <div className="p-4 bg-white rounded-xl border border-slate-200 space-y-3">
                      <h4 className="font-bold text-slate-800 pb-1.5 border-b border-slate-100">Berkas Pendukung Terupload</h4>
                      {[
                        { title: "Pasfoto Resmi Siswa", url: b.identitas?.fotoUrl || bi.pasfoto_url },
                        { title: "Scan Kartu Keluarga (KK)", url: b.identitas?.scanKkUrl },
                        { title: "Scan Akta Kelahiran", url: b.identitas?.scanAktaUrl },
                        { title: "Scan Ijazah SMP", url: b.identitas?.scanIjazahSmpUrl },
                        { title: "Hasil Tes Psikotes SMP", url: b.kegiatanBelajar?.scanPsikotesSmpUrl },
                        { title: "Hasil Tes Psikotes SMA", url: b.kegiatanBelajar?.scanPsikotesSmaUrl },
                      ].map((item, idx) => (
                        <div key={idx} className="flex items-center justify-between py-1.5 px-2.5 rounded-lg bg-slate-50 border border-slate-100">
                          <span className="font-medium text-slate-700">{item.title}</span>
                          {item.url ? (
                            <button
                              type="button"
                              onClick={() => setPreviewDoc({ title: item.title, url: item.url })}
                              className="inline-flex items-center gap-1 text-xs text-brand-blue hover:underline font-semibold"
                            >
                              <Eye className="w-3.5 h-3.5" /> Lihat Berkas
                            </button>
                          ) : (
                            <span className="text-slate-400 text-[11px] italic">Belum diunggah</span>
                          )}
                        </div>
                      ))}
                    </div>

                    {/* Status Pernyataan Orang Tua */}
                    <div className="p-4 bg-white rounded-xl border border-slate-200 space-y-3">
                      <h4 className="font-bold text-slate-800 pb-1.5 border-b border-slate-100">Status Surat Pernyataan</h4>
                      <div className="p-3.5 rounded-xl bg-emerald-50 border border-emerald-200 space-y-2">
                        <div className="flex items-center gap-2 text-emerald-800 font-bold">
                          <CheckCircle2 className="w-5 h-5 text-emerald-600" />
                          <span>{isApproved ? "Sudah Divalidasi & Disetujui" : "Belum Ditandatangani"}</span>
                        </div>
                        <p className="text-slate-600 text-[11px] leading-relaxed">
                          Pernyataan kebenaran fisik data dan persetujuan tata tertib SMA BPI 1 Bandung oleh orang tua/wali siswa.
                        </p>
                        <div className="pt-2 border-t border-emerald-200/60 text-xs">
                          <span className="text-slate-500 block">Nama Penandatangan (Orang Tua / Wali):</span>
                          <span className="font-bold text-slate-800">{penandatangan || kel.namaAyah || "-"}</span>
                          <span className="text-slate-500 block mt-1">Tanggal Persetujuan:</span>
                          <span className="font-semibold text-slate-800">{tanggalPernyataan || "-"}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </>
          )}
        </div>

        {/* FOOTER ACTION */}
        <div className="p-4 bg-slate-100 border-t border-slate-200 flex items-center justify-between shrink-0">
          <div className="flex items-center gap-2 text-xs text-slate-500">
            <ShieldCheck className="w-4 h-4 text-emerald-600" />
            <span>Data tersinkronisasi real-time dengan Master Data Siswa & Buku Induk BPI.</span>
          </div>

          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={handlePrint} leftIcon={<Printer className="w-4 h-4" />}>
              Cetak Form Biodata (PDF)
            </Button>
            <Button variant="primary" size="sm" onClick={onClose}>
              Tutup
            </Button>
          </div>
        </div>

      </div>

      {/* MODAL PREVIEW DOKUMEN / FOTO */}
      {previewDoc && (
        <div className="fixed inset-0 z-60 bg-black/75 flex items-center justify-center p-4 print:hidden">
          <div className="bg-white rounded-2xl max-w-2xl w-full p-4 space-y-3">
            <div className="flex items-center justify-between pb-2 border-b">
              <h4 className="font-bold text-sm text-slate-800">{previewDoc.title}</h4>
              <button onClick={() => setPreviewDoc(null)} className="p-1 hover:bg-slate-100 rounded-lg">
                <X className="w-4 h-4" />
              </button>
            </div>
            <div className="max-h-[70vh] overflow-auto flex items-center justify-center bg-slate-100 rounded-lg p-2">
              <img src={previewDoc.url} alt={previewDoc.title} className="max-h-[65vh] object-contain rounded" />
            </div>
            <div className="flex justify-end gap-2 pt-2">
              <a
                href={previewDoc.url}
                target="_blank"
                rel="noreferrer"
                download
                className="px-3 py-1.5 bg-brand-navy text-white text-xs font-semibold rounded-lg hover:bg-slate-800 flex items-center gap-1"
              >
                <Download className="w-3.5 h-3.5" /> Unduh Dokumen
              </a>
              <Button variant="outline" size="sm" onClick={() => setPreviewDoc(null)}>
                Tutup
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* ========================================================================= */}
      {/* PRINT-ONLY COMPONENT (Lengkap Poin 1 s.d. 9 dengan Kop Surat Resmi BPI)   */}
      {/* ========================================================================= */}
      <style jsx global>{`
        @page {
          size: 215mm 330mm; /* Kertas F4 / Folio Resmi */
          margin: 10mm 15mm 10mm 15mm !important;
        }
        @media print {
          @page {
            size: 215mm 330mm;
            margin: 10mm 15mm 10mm 15mm !important;
          }
          html, body {
            width: 100% !important;
            height: auto !important;
            min-height: 100% !important;
            overflow: visible !important;
            margin: 0 !important;
            padding: 0 !important;
            background: #ffffff !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
          }
          body * {
            visibility: hidden;
          }
          aside,
          header,
          nav,
          footer,
          .no-print,
          .print-hidden,
          .print\\:hidden,
          button {
            display: none !important;
            visibility: hidden !important;
          }
          #print-biodata-area,
          #print-biodata-area * {
            visibility: visible !important;
          }
          #print-biodata-area {
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            width: 100% !important;
            max-width: 185mm !important;
            margin: 0 auto !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            background: #ffffff !important;
            color: #000000 !important;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
            display: block !important;
          }
          .biodata-print-section {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
            margin-bottom: 7px !important;
          }
          .biodata-print-table {
            width: 100% !important;
            border-collapse: collapse !important;
          }
          .biodata-print-table th,
          .biodata-print-table td {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
          }
          .print-signature-block {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
            margin-top: 14px !important;
          }
        }
      `}</style>

      <div id="print-biodata-area" className="hidden print:block text-black font-sans text-xs">
        {/* 1. KOP SURAT RESMI SMA BPI 1 BANDUNG */}
        <div className="w-full pb-1 mb-2 kop-surat-bpi border-b-2 border-black">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/images/kop-surat-bpi.png"
            alt="Kop Surat Resmi Yayasan BPI - SMA BPI 1 Bandung"
            className="w-full h-auto block object-contain mx-auto"
            style={{ width: "100%", maxHeight: "115px" }}
            onError={(e) => {
              (e.currentTarget as HTMLImageElement).style.display = "none";
              const fb = document.getElementById("kop-fallback-biodata");
              if (fb) fb.style.display = "block";
            }}
          />
          <div id="kop-fallback-biodata" style={{ display: "none" }} className="text-center font-serif">
            <div className="flex items-center justify-between pb-1">
              <img src="/images/logo-yayasan-bpi.png" alt="Yayasan BPI" className="w-16 h-auto" />
              <div className="flex-1 px-3">
                <h4 className="text-[12px] font-bold uppercase tracking-wider text-black">YAYASAN BADAN PERGURUAN INDONESIA</h4>
                <h1 className="text-[16px] font-extrabold uppercase tracking-wide text-black">SMA BPI 1 BANDUNG</h1>
                <p className="text-[9px] text-gray-800 font-semibold">TERAKREDITASI &ldquo;A&rdquo; (UNGGUL) &bull; NSS: 30.0.02.60.13.088 &bull; NPSN: 20219738</p>
                <p className="text-[8.5px] text-gray-700">Jl. Burangrang No. 8 Telp. (022) 7301739 - Fax. (022) 7305805 Bandung 40262</p>
              </div>
              <img src="/images/tulisan-bpi.png" alt="BPI" className="w-16 h-auto" />
            </div>
            <div className="w-full border-b-[3px] border-double border-black" />
          </div>
        </div>

        {/* JUDUL DOKUMEN */}
        <div className="text-center mb-3">
          <h2 className="text-[12pt] font-bold underline uppercase tracking-wider text-black">
            Biodata Siswa
          </h2>
          <p className="text-[8pt] text-gray-700 mt-0.5">
            Tahun Ajaran 2026/2027 &bull; SMA BPI 1 Bandung &bull; Rombel: <strong>{iden.rombel}</strong> ({iden.tingkat})
          </p>
        </div>

        {/* POIN 1: IDENTITAS PESERTA DIDIK */}
        <div className="biodata-print-section border border-black mb-2">
          <div className="bg-slate-200 border-b border-black px-2 py-0.5 font-bold uppercase text-[8.5pt] tracking-wide flex justify-between items-center">
            <span>1. IDENTITAS PESERTA DIDIK</span>
            <span className="text-[7.5pt] font-normal normal-case">NIS: {iden.nis} | NISN: {iden.nisn}</span>
          </div>
          <div className="p-2 flex gap-3 items-start">
            {/* Pasfoto */}
            <div className="w-24 h-32 border border-black flex flex-col items-center justify-center shrink-0 bg-slate-50 text-center p-0.5">
              {iden.fotoUrl ? (
                <img src={iden.fotoUrl} alt={iden.namaLengkap} className="w-full h-full object-cover" />
              ) : (
                <div className="text-center text-[7pt] text-gray-500">
                  <span>Pasfoto</span>
                  <br />
                  <span>3 x 4 cm</span>
                </div>
              )}
            </div>

            {/* Rincian Identitas */}
            <table className="flex-1 text-[8pt] leading-tight border-collapse">
              <tbody>
                <tr>
                  <td className="w-44 font-semibold py-0.5 align-top">Nama Lengkap Peserta Didik</td>
                  <td className="w-2.5 text-center align-top">:</td>
                  <td className="font-bold py-0.5 align-top uppercase">{iden.namaLengkap}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Nama Panggilan</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{iden.namaPanggilan}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Jenis Kelamin</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{iden.jenisKelamin}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Nomor Induk Kependudukan (NIK)</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top font-mono">{iden.nik}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Tempat, Tanggal Lahir</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{iden.tempatLahir}, {iden.tanggalLahir}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Agama & Suku Bangsa</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{iden.agama} / Suku: {iden.sukuBangsa}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Kewarganegaraan</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{iden.kewarganegaraan}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Bahasa Sehari-hari</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{iden.bahasaSehariHari}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Sekolah Asal SMP / MTs</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{iden.asalSmp}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Nomor Seri Ijazah SMP</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top font-mono">{iden.nomorSeriIjazahSmp}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* POIN 2: TEMPAT TINGGAL */}
        <div className="biodata-print-section border border-black mb-2">
          <div className="bg-slate-200 border-b border-black px-2 py-0.5 font-bold uppercase text-[8.5pt] tracking-wide">
            2. TEMPAT TINGGAL & FASILITAS BELAJAR
          </div>
          <div className="p-2 space-y-1 text-[8pt]">
            <table className="w-full leading-tight border-collapse">
              <tbody>
                <tr>
                  <td className="w-48 font-semibold py-0.5 align-top">Alamat Kartu Keluarga (KK)</td>
                  <td className="w-2.5 text-center align-top">:</td>
                  <td className="py-0.5 align-top">{tpt.alamatKk}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Wilayah KK</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">Kel. {tpt.kelurahanKk}, Kec. {tpt.kecamatanKk}, {tpt.kotaKk}, Prov. {tpt.provinsiKk} ({tpt.kodePosKk})</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Alamat Domisili Tinggal Sekarang</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{tpt.alamatTinggal} (Kel. {tpt.kelurahanTinggal}, Kec. {tpt.kecamatanTinggal}, {tpt.kotaTinggal})</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Status & Kondisi Rumah</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{tpt.statusTempatTinggal} &bull; Kondisi: {tpt.kondisiTempatTinggal} &bull; Penerangan: {tpt.kondisiPenerangan}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Lingkungan Tempat Tinggal</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{tpt.lingkunganTempatTinggal}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Transportasi ke Sekolah</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{tpt.mediaTransportasi} &bull; Jarak: {tpt.jarakSekolahKm} km &bull; Waktu Tempuh: {tpt.waktuTempuhMenit} menit</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Kepemilikan Kendaraan Rumah</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">Sepeda Motor: {tpt.jumlahMotor || "-"} unit &bull; Mobil: {tpt.jumlahMobil || "-"} unit</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Fasilitas Belajar di Rumah</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">Ruang Belajar: {tpt.kondisiRuangBelajar} &bull; Kamar Tidur: {tpt.kondisiKamarTidur} &bull; Perlengkapan: {tpt.perlengkapanBelajar}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* POIN 3: KELUARGA (ORANG TUA & WALI) */}
        <div className="biodata-print-section border border-black mb-2">
          <div className="bg-slate-200 border-b border-black px-2 py-0.5 font-bold uppercase text-[8.5pt] tracking-wide flex justify-between">
            <span>3. DATA KELUARGA (ORANG TUA / WALI)</span>
            <span className="text-[7.5pt] font-normal normal-case">Anak ke-{kel.anakKe} dari {kel.jumlahSaudaraKandung} bersaudara | Hubungan: {kel.statusHubunganAnak}</span>
          </div>
          <div className="p-2 space-y-2 text-[8pt]">
            {/* Grid Ayah & Ibu */}
            <div className="grid grid-cols-2 gap-3">
              {/* Ayah */}
              <div className="border border-slate-400 p-1.5 rounded-xs bg-slate-50/50">
                <div className="font-bold border-b border-slate-300 pb-0.5 mb-1 text-[8pt] text-slate-900 flex justify-between">
                  <span>A. DATA AYAH KANDUNG</span>
                  <span className="text-[7pt] font-normal">({kel.statusAyah})</span>
                </div>
                <table className="w-full text-[7.5pt] leading-tight">
                  <tbody>
                    <tr><td className="w-28 font-medium">Nama Lengkap</td><td className="w-2">:</td><td className="font-semibold">{kel.namaAyah}</td></tr>
                    <tr><td className="font-medium">NIK Ayah</td><td>:</td><td className="font-mono">{kel.nikAyah}</td></tr>
                    <tr><td className="font-medium">Tempat, Tgl Lahir</td><td>:</td><td>{kel.tempatLahirAyah}, {kel.tanggalLahirAyah}</td></tr>
                    <tr><td className="font-medium">Agama / WN</td><td>:</td><td>{kel.agamaAyah} / {kel.kewarganegaraanAyah}</td></tr>
                    <tr><td className="font-medium">Pendidikan Terakhir</td><td>:</td><td>{kel.pendidikanAyah}</td></tr>
                    <tr><td className="font-medium">Pekerjaan</td><td>:</td><td>{kel.pekerjaanAyah}</td></tr>
                    <tr><td className="font-medium">Penghasilan / Bulan</td><td>:</td><td>{kel.penghasilanAyah}</td></tr>
                    <tr><td className="font-medium">No. Telepon / WA</td><td>:</td><td className="font-mono">{kel.hpAyah}</td></tr>
                  </tbody>
                </table>
              </div>

              {/* Ibu */}
              <div className="border border-slate-400 p-1.5 rounded-xs bg-slate-50/50">
                <div className="font-bold border-b border-slate-300 pb-0.5 mb-1 text-[8pt] text-slate-900 flex justify-between">
                  <span>B. DATA IBU KANDUNG</span>
                  <span className="text-[7pt] font-normal">({kel.statusIbu})</span>
                </div>
                <table className="w-full text-[7.5pt] leading-tight">
                  <tbody>
                    <tr><td className="w-28 font-medium">Nama Lengkap</td><td className="w-2">:</td><td className="font-semibold">{kel.namaIbu}</td></tr>
                    <tr><td className="font-medium">NIK Ibu</td><td>:</td><td className="font-mono">{kel.nikIbu}</td></tr>
                    <tr><td className="font-medium">Tempat, Tgl Lahir</td><td>:</td><td>{kel.tempatLahirIbu}, {kel.tanggalLahirIbu}</td></tr>
                    <tr><td className="font-medium">Agama / WN</td><td>:</td><td>{kel.agamaIbu} / {kel.kewarganegaraanIbu}</td></tr>
                    <tr><td className="font-medium">Pendidikan Terakhir</td><td>:</td><td>{kel.pendidikanIbu}</td></tr>
                    <tr><td className="font-medium">Pekerjaan</td><td>:</td><td>{kel.pekerjaanIbu}</td></tr>
                    <tr><td className="font-medium">Penghasilan / Bulan</td><td>:</td><td>{kel.penghasilanIbu}</td></tr>
                    <tr><td className="font-medium">No. Telepon / WA</td><td>:</td><td className="font-mono">{kel.hpIbu}</td></tr>
                  </tbody>
                </table>
              </div>
            </div>

            {/* Wali */}
            <div className="border border-slate-400 p-1.5 rounded-xs">
              <table className="w-full text-[7.5pt] leading-tight">
                <tbody>
                  <tr>
                    <td className="w-48 font-semibold">C. Data Wali Siswa (Jika Ada)</td>
                    <td className="w-2.5 text-center">:</td>
                    <td>Nama: <strong>{kel.namaWali}</strong> &bull; Hubungan: {kel.hubunganWali} &bull; Pekerjaan: {kel.pekerjaanWali} &bull; HP: {kel.hpWali}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        {/* POIN 4: RIWAYAT PENDIDIKAN */}
        <div className="biodata-print-section border border-black mb-2">
          <div className="bg-slate-200 border-b border-black px-2 py-0.5 font-bold uppercase text-[8.5pt] tracking-wide">
            4. RIWAYAT PENDIDIKAN, PRESTASI & ORGANISASI
          </div>
          <div className="p-2 space-y-1.5 text-[8pt]">
            <table className="w-full text-[8pt] leading-tight border-collapse">
              <tbody>
                <tr>
                  <td className="w-48 font-semibold py-0.5 align-top">Taman Kanak-Kanak (TK / RA)</td>
                  <td className="w-2.5 text-center align-top">:</td>
                  <td className="py-0.5 align-top">{pend.tk.nama || "-"} &bull; Lama Belajar: {pend.tk.lamaBelajar || "-"}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Sekolah Dasar (SD / MI)</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">
                    {pend.sd.nama || "-"} &bull; Lama: {pend.sd.lamaBelajar || "-"} &bull; Tinggal Kelas: {pend.sd.tinggalKelas || "Tidak"}
                    {pend.sd.prestasi && pend.sd.prestasi.length > 0 && (
                      <span className="block text-slate-700 font-medium mt-0.5">
                        Prestasi SD: {pend.sd.prestasi.map((p: any) => `${p.namaLomba} (${p.juara || "Juara"} - ${p.tingkat || "Tingkat"})`).join("; ")}
                      </span>
                    )}
                  </td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">SMP / MTs Asal</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">
                    <strong>{pend.smp.nama}</strong> &bull; Lama: {pend.smp.lamaBelajar} &bull; Tinggal Kelas: {pend.smp.tinggalKelas || "Tidak"} &bull; Alamat: {pend.smp.alamat}
                    {pend.smp.prestasi && pend.smp.prestasi.length > 0 && (
                      <span className="block text-slate-700 font-medium mt-0.5">
                        Prestasi SMP: {pend.smp.prestasi.map((p: any) => `${p.namaLomba} (${p.juara || "Juara"} - ${p.tingkat || "Tingkat"})`).join("; ")}
                      </span>
                    )}
                  </td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Pengalaman Organisasi</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">
                    {pend.organisasi && pend.organisasi.length > 0
                      ? pend.organisasi.map((org: any) => `${org.namaOrganisasi} (${org.jabatan || "-"} - ${org.periode || "-"})`).join("; ")
                      : "-"}
                  </td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Kursus & Keterampilan Khusus</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">
                    {pend.kursus && pend.kursus.length > 0
                      ? pend.kursus.map((k: any) => `${k.namaKursus} di ${k.lembaga || "-"} (${k.bidang || "-"} - ${k.tahun || "-"})`).join("; ")
                      : "-"}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* POIN 5: KETERANGAN KESEHATAN */}
        <div className="biodata-print-section border border-black mb-2">
          <div className="bg-slate-200 border-b border-black px-2 py-0.5 font-bold uppercase text-[8.5pt] tracking-wide">
            5. KETERANGAN KESEHATAN & FISIK JASMANI
          </div>
          <div className="p-2 space-y-1 text-[8pt]">
            <table className="w-full text-[8pt] leading-tight border-collapse">
              <tbody>
                <tr>
                  <td className="w-48 font-semibold py-0.5 align-top">Fisik (TB / BB / Gol. Darah)</td>
                  <td className="w-2.5 text-center align-top">:</td>
                  <td className="py-0.5 align-top">
                    Tinggi: <strong>{kes.tinggiBadan ? `${kes.tinggiBadan} cm` : "-"}</strong> &bull; Berat: <strong>{kes.beratBadan ? `${kes.beratBadan} kg` : "-"}</strong> &bull; Golongan Darah: <strong>{kes.golonganDarah}</strong>
                  </td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Ciri Jasmani (Kulit / Wajah / Rambut)</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">Warna Kulit: {kes.warnaKulit || "-"} &bull; Bentuk Wajah: {kes.bentukWajah || "-"} &bull; Rambut: {kes.jenisRambut || "-"}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Keadaan Panca Indra</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">
                    Mata: {kes.keadaanMata} (Alat Bantu: {kes.alatBantuMata}) &bull; Telinga: {kes.keadaanTelinga} (Alat Bantu: {kes.alatBantuTelinga})
                  </td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Riwayat Penyakit & Alergi</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">
                    Pernah Diderita: {kes.penyakitPernahDiderita} &bull; Sering Kambuh: {kes.penyakitSeringKambuh || "-"} &bull; Alergi Obat/Makanan: {kes.alergiObatMakanan}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* POIN 6: HOBI DAN KEGEMARAN */}
        <div className="biodata-print-section border border-black mb-2">
          <div className="bg-slate-200 border-b border-black px-2 py-0.5 font-bold uppercase text-[8.5pt] tracking-wide">
            6. HOBI, BAKAT & KEGEMARAN
          </div>
          <div className="p-2 space-y-1 text-[8pt]">
            <table className="w-full text-[8pt] leading-tight border-collapse">
              <tbody>
                <tr>
                  <td className="w-48 font-semibold py-0.5 align-top">Bidang Olahraga</td>
                  <td className="w-2.5 text-center align-top">:</td>
                  <td className="py-0.5 align-top">Hobi: {hobi.hobiOlahraga} &bull; Perlengkapan: {hobi.perlengkapanOlahraga || "-"} &bull; Bakat: {hobi.bakatOlahraga}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Bidang Kesenian</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">Hobi: {hobi.hobiSeni} &bull; Perlengkapan: {hobi.perlengkapanSeni || "-"} &bull; Bakat: {hobi.bakatSeni}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Kegemaran Lainnya</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{hobi.hobiLainnya} (Bakat Khusus: {hobi.bakatLainnya || "-"})</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Mata Pelajaran Favorit</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top font-bold">{hobi.mapelFavorit}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Aktivitas Waktu Senggang</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{hobi.kegiatanWaktuSenggang}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* POIN 7: KEGIATAN BELAJAR */}
        <div className="biodata-print-section border border-black mb-2">
          <div className="bg-slate-200 border-b border-black px-2 py-0.5 font-bold uppercase text-[8.5pt] tracking-wide">
            7. KEGIATAN BELAJAR & POLA STUDI
          </div>
          <div className="p-2 space-y-1 text-[8pt]">
            <table className="w-full text-[8pt] leading-tight border-collapse">
              <tbody>
                <tr>
                  <td className="w-48 font-semibold py-0.5 align-top">Kelompok Belajar & Bimbel</td>
                  <td className="w-2.5 text-center align-top">:</td>
                  <td className="py-0.5 align-top">Kelompok: {kb.kelompokBelajar} ({kb.detailKelompok || "-"}) &bull; Lembaga Bimbel: {kb.lembagaBimbel}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Jadwal Belajar Mandiri di Rumah</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{kb.jadwalBelajarRumah} &bull; Waktu: {kb.jamBelajar}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Kebiasaan & Pola Belajar</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{kb.kebiasaanBelajar}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Aktivitas pada Hari Libur</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{kb.kegiatanLibur || "-"}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Catatan Psikotes SMP / SMA</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{pem.rekomendasiPsikotesSmp || "-"}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* POIN 8: RENCANA PEMINATAN & CITA-CITA */}
        <div className="biodata-print-section border border-black mb-2">
          <div className="bg-slate-200 border-b border-black px-2 py-0.5 font-bold uppercase text-[8.5pt] tracking-wide">
            8. RENCANA PEMINATAN & TARGET KARIR
          </div>
          <div className="p-2 space-y-1 text-[8pt]">
            <table className="w-full text-[8pt] leading-tight border-collapse">
              <tbody>
                <tr>
                  <td className="w-48 font-semibold py-0.5 align-top">Peminatan Pilihan di SMA BPI 1</td>
                  <td className="w-2.5 text-center align-top">:</td>
                  <td className="py-0.5 align-top font-bold text-slate-900">{pem.prodiDiminatiMasuk}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Rekomendasi Guru BK SMP</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{pem.rekomendasiBkSmp}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Rekomendasi Hasil Tes Psikotes</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{pem.rekomendasiPsikotesSmp}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Target Perguruan Tinggi Negeri (PTN)</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">1. {pem.ptn1} &bull; 2. {pem.ptn2} &bull; 3. {pem.ptn3}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Target PTS / LN / Kedinasan</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">PTS: {pem.pts} &bull; Luar Negeri: {pem.ptLuarNegeri || "-"} &bull; Kedinasan: {pem.kedinasan}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Cita-Cita Profesi / Karir</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top font-bold">{pem.citaCita}</td>
                </tr>
                <tr>
                  <td className="font-semibold py-0.5 align-top">Faktor Pendukung Cita-Cita</td>
                  <td className="text-center align-top">:</td>
                  <td className="py-0.5 align-top">{pem.faktorPendukung || "-"}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* POIN 9: NILAI RAPOR SMP */}
        <div className="biodata-print-section border border-black mb-2">
          <div className="bg-slate-200 border-b border-black px-2 py-0.5 font-bold uppercase text-[8.5pt] tracking-wide flex justify-between">
            <span>9. REKAPITULASI NILAI RAPOR SMP (SEMESTER 1 S.D. 6)</span>
            <span className="text-[7.5pt] font-normal normal-case">Skala Nilai 0 - 100</span>
          </div>
          <div className="p-2">
            <table className="biodata-print-table w-full text-[7.5pt] border border-black text-center">
              <thead className="bg-slate-100 font-bold border-b border-black">
                <tr>
                  <th className="border border-black p-1 w-7 text-center">No.</th>
                  <th className="border border-black p-1 text-left">Mata Pelajaran Pokok</th>
                  <th className="border border-black p-1 w-14">Smt 1<br /><span className="text-[6.5pt] font-normal">(VII/1)</span></th>
                  <th className="border border-black p-1 w-14">Smt 2<br /><span className="text-[6.5pt] font-normal">(VII/2)</span></th>
                  <th className="border border-black p-1 w-14">Smt 3<br /><span className="text-[6.5pt] font-normal">(VIII/1)</span></th>
                  <th className="border border-black p-1 w-14">Smt 4<br /><span className="text-[6.5pt] font-normal">(VIII/2)</span></th>
                  <th className="border border-black p-1 w-14">Smt 5<br /><span className="text-[6.5pt] font-normal">(IX/1)</span></th>
                  <th className="border border-black p-1 w-14">Smt 6<br /><span className="text-[6.5pt] font-normal">(IX/2)</span></th>
                  <th className="border border-black p-1 w-16 bg-slate-200">Rata-rata</th>
                </tr>
              </thead>
              <tbody>
                {[
                  { label: "Pendidikan Agama & Budi Pekerti", keys: ["pai", "agama"] },
                  { label: "Bahasa Indonesia", keys: ["bahasaIndonesia", "ind"] },
                  { label: "Bahasa Inggris", keys: ["bahasaInggris", "ing"] },
                  { label: "Matematika", keys: ["matematika", "mat"] },
                  { label: "Ilmu Pengetahuan Alam (IPA)", keys: ["ipa"] },
                  { label: "Ilmu Pengetahuan Sosial (IPS)", keys: ["ips"] },
                ].map((m, idx) => {
                  const v1 = Number(getSmpVal("vii_1", ...m.keys)) || 0;
                  const v2 = Number(getSmpVal("vii_2", ...m.keys)) || 0;
                  const v3 = Number(getSmpVal("viii_1", ...m.keys)) || 0;
                  const v4 = Number(getSmpVal("viii_2", ...m.keys)) || 0;
                  const v5 = Number(getSmpVal("ix_1", ...m.keys)) || 0;
                  const v6 = Number(getSmpVal("ix_2", ...m.keys)) || 0;
                  const filled = [v1, v2, v3, v4, v5, v6].filter((v) => v > 0);
                  const avg = filled.length > 0 ? (filled.reduce((a, b) => a + b, 0) / filled.length).toFixed(1) : "-";

                  return (
                    <tr key={idx} className="border-b border-black">
                      <td className="border border-black p-1 font-medium">{idx + 1}.</td>
                      <td className="border border-black p-1 text-left font-semibold">{m.label}</td>
                      <td className="border border-black p-1 font-mono">{v1 || "-"}</td>
                      <td className="border border-black p-1 font-mono">{v2 || "-"}</td>
                      <td className="border border-black p-1 font-mono">{v3 || "-"}</td>
                      <td className="border border-black p-1 font-mono">{v4 || "-"}</td>
                      <td className="border border-black p-1 font-mono">{v5 || "-"}</td>
                      <td className="border border-black p-1 font-mono">{v6 || "-"}</td>
                      <td className="border border-black p-1 font-mono font-bold bg-slate-50">{avg}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        {/* LEMBAR PENGESAHAN & PERNYATAAN RESMI */}
        <div className="biodata-print-section mt-3 pt-2 border-t border-black text-[8pt] print-signature-block">
          <p className="text-justify leading-snug italic mb-3">
            Pernyataan: Seluruh data dan informasi yang tercantum dalam Lembar Biodata ini telah diisi dengan sebenarnya, jujur, dan dapat dipertanggungjawabkan keabsahannya berdasarkan dokumen fisik yang sah. Apabila di kemudian hari terdapat kekeliruan data, maka bersedia dilakukan perbaikan sesuai ketentuan tata tertib SMA BPI 1 Bandung.
          </p>
          <div className="flex justify-between items-start text-center">
            {/* Sisi Kiri: Kepala Sekolah (Dynamic dari Master Data Pejabat Sekolah) */}
            <div className="w-60 text-center">
              <p>Mengetahui,</p>
              <p className="font-bold">{kepalaSekolah.title || "Kepala SMA BPI 1 Bandung"}</p>
              <div className="h-16 flex items-center justify-center">
                {kepalaSekolah.signature_image && (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={kepalaSekolah.signature_image}
                    alt="TTD Kepala Sekolah"
                    className="h-14 object-contain"
                  />
                )}
              </div>
              <p className="font-bold underline">{kepalaSekolah.name || "Tatang, M.Pd."}</p>
              <p className="text-[7.5pt]">
                {kepalaSekolah.nip
                  ? kepalaSekolah.nip.toUpperCase().includes("NIP")
                    ? kepalaSekolah.nip
                    : `NIPY. ${kepalaSekolah.nip}`
                  : "NIPY. 10079"}
              </p>
            </div>

            {/* Sisi Kanan: Orang Tua / Wali Siswa (Dynamic Real-Time dari Biodata Siswa) */}
            <div className="w-60 text-center">
              <p>Bandung, {tanggalPernyataan || new Date().toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" })}</p>
              <p className="font-bold">Orang Tua / Wali Siswa</p>
              <div className="h-16 flex items-center justify-center">
                <span className="text-[7pt] text-gray-400 border border-dashed border-gray-300 px-2 py-0.5 rounded">Materai Rp 10.000</span>
              </div>
              <p className="font-bold underline">{namaOrtuWali}</p>
              <p className="text-[7.5pt] text-gray-600">(Tanda Tangan & Nama Terang)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};