"use client";

import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
import { useAuth } from "@/context/AuthContext";
import {
  User,
  MapPin,
  Users,
  GraduationCap,
  Activity,
  Heart,
  BookOpen,
  Compass,
  FileSpreadsheet,
  CheckSquare,
  CheckCircle2,
  AlertCircle,
  Clock,
  Save,
  Upload,
  Eye,
  Trash2,
  Plus,
  ArrowRight,
  ArrowLeft,
  Sparkles,
  ShieldCheck,
  Building,
  Phone,
  Calendar,
  FileText,
  Copy,
  ExternalLink,
  ChevronRight,
  Check,
  X,
} from "lucide-react";
import { Button } from "@/components/ui/Button";
import { Badge } from "@/components/ui/Badge";
import { Toast } from "@/components/ui/Toast";

// TAB DEFINITIONS
export type BiodataTabKey =
  | "identitas"
  | "tempat_tinggal"
  | "keluarga"
  | "pendidikan"
  | "kesehatan"
  | "hobi"
  | "kegiatan_belajar"
  | "peminatan"
  | "nilai_smp"
  | "pernyataan";

interface TabConfig {
  key: BiodataTabKey;
  number: number;
  title: string;
  shortTitle: string;
  icon: any;
  description: string;
}

const BIODATA_TABS: TabConfig[] = [
  {
    key: "identitas",
    number: 1,
    title: "Identitas Peserta",
    shortTitle: "Identitas",
    icon: User,
    description: "Data pokok peserta didik, dokumen identitas kependudukan, dan foto profil",
  },
  {
    key: "tempat_tinggal",
    number: 2,
    title: "Tempat Tinggal",
    shortTitle: "Tempat Tinggal",
    icon: MapPin,
    description: "Alamat kartu keluarga, domisili saat ini, dan kondisi fasilitas belajar",
  },
  {
    key: "keluarga",
    number: 3,
    title: "Keluarga",
    shortTitle: "Keluarga",
    icon: Users,
    description: "Profil orang tua kandung (Ayah & Ibu) serta wali peserta didik",
  },
  {
    key: "pendidikan",
    number: 4,
    title: "Riwayat Pendidikan",
    shortTitle: "Pendidikan",
    icon: GraduationCap,
    description: "Jejak sekolah dasar, menengah pertama, kursus, dan organisasi",
  },
  {
    key: "kesehatan",
    number: 5,
    title: "Keterangan Kesehatan",
    shortTitle: "Kesehatan",
    icon: Activity,
    description: "Data fisik jasmani, golongan darah, riwayat penyakit, dan alergi",
  },
  {
    key: "hobi",
    number: 6,
    title: "Hobi dan Kegemaran",
    shortTitle: "Hobi & Minat",
    icon: Heart,
    description: "Minat bakat bidang olahraga, kesenian, dan aktivitas waktu senggang",
  },
  {
    key: "kegiatan_belajar",
    number: 7,
    title: "Kegiatan Belajar",
    shortTitle: "Kegiatan Belajar",
    icon: BookOpen,
    description: "Pola belajar mandiri di rumah, bimbingan belajar, dan psikotes",
  },
  {
    key: "peminatan",
    number: 8,
    title: "Rencana Peminatan & Cita-Cita",
    shortTitle: "Peminatan & Karir",
    icon: Compass,
    description: "Studi lanjut perguruan tinggi, kedinasan, dan target karir masa depan",
  },
  {
    key: "nilai_smp",
    number: 9,
    title: "Nilai Rapor SMP",
    shortTitle: "Nilai Rapor SMP",
    icon: FileSpreadsheet,
    description: "Rekap nilai pengetahuan 5 mata pelajaran pokok Semester 1 s.d 6 SMP",
  },
  {
    key: "pernyataan",
    number: 10,
    title: "Surat Pernyataan",
    shortTitle: "Pernyataan",
    icon: CheckSquare,
    description: "Persetujuan keabsahan data fisik dan penandatanganan resmi orang tua",
  },
];

// SUB-TAB SEMESTER NILAI SMP
export const SMP_SEMESTERS = [
  { id: "vii_1", label: "Kelas VII - Smt 1", grade: "VII", smt: "1" },
  { id: "vii_2", label: "Kelas VII - Smt 2", grade: "VII", smt: "2" },
  { id: "viii_1", label: "Kelas VIII - Smt 1", grade: "VIII", smt: "1" },
  { id: "viii_2", label: "Kelas VIII - Smt 2", grade: "VIII", smt: "2" },
  { id: "ix_1", label: "Kelas IX - Smt 1", grade: "IX", smt: "1" },
  { id: "ix_2", label: "Kelas IX - Smt 2", grade: "IX", smt: "2" },
];

export const StudentBiodataView: React.FC = () => {
  const { user } = useAuth();
  const [activeTab, setActiveTab] = useState<BiodataTabKey>("identitas");
  const [activeSmpSemester, setActiveSmpSemester] = useState<string>("vii_1");

  // State Data Mahasiswa / Siswa
  const [studentBase, setStudentBase] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [saving, setSaving] = useState<boolean>(false);
  const [toastMessage, setToastMessage] = useState<string | null>(null);
  const [toastType, setToastType] = useState<"success" | "error">("success");
  const [lastSavedTime, setLastSavedTime] = useState<string | null>(null);

  // File Preview Modal
  const [previewDoc, setPreviewDoc] = useState<{ title: string; url: string; type: string } | null>(null);

  // 1. Identitas Peserta
  // 1. Identitas Peserta (PPDB dihapus)
  const [identitas, setIdentitas] = useState({
    fotoUrl: "",
    nisn: "",
    namaPanggilan: "",
    jenisKelamin: "",
    nik: "",
    tempatLahir: "",
    tanggalLahir: "",
    agama: "",
    sukuBangsa: "",
    kewarganegaraan: "WNI",
    bahasaSehariHari: "",
    asalSmp: "",
    nomorSeriIjazahSmp: "",
    scanKkUrl: "",
    scanAktaUrl: "",
    scanIjazahSmpUrl: "",
  });

  // 2. Tempat Tinggal
  const [tempatTinggal, setTempatTinggal] = useState({
    // Sesuai KK
    alamatKk: "",
    kelurahanKk: "",
    kecamatanKk: "",
    kotaKk: "",
    provinsiKk: "",
    kodePosKk: "",
    telpRumah: "",
    // Domisili
    alamatTinggal: "",
    kelurahanTinggal: "",
    kecamatanTinggal: "",
    kotaTinggal: "",
    provinsiTinggal: "",
    kodePosTinggal: "",
    // Kondisi Lingkungan & Transportasi
    statusTempatTinggal: "",
    kondisiTempatTinggal: "",
    kondisiPenerangan: "",
    mediaTransportasi: "",
    jumlahMotor: "" as number | "",
    jumlahMobil: "" as number | "",
    jarakSekolahKm: "" as number | "",
    waktuTempuhMenit: "" as number | "",
    lingkunganTempatTinggal: "",
    // Fasilitas Belajar
    kondisiRuangBelajar: "",
    kondisiKamarTidur: "",
    perlengkapanBelajar: "",
  });

  // 3. Keluarga
  const [keluarga, setKeluarga] = useState({
    penanggungJawab: "",
    statusHubunganAnak: "",
    anakKe: "" as number | "",
    jumlahSaudaraKandung: "" as number | "",
    // Ayah
    namaAyah: "",
    statusAyah: "",
    tempatLahirAyah: "",
    tanggalLahirAyah: "",
    agamaAyah: "",
    kewarganegaraanAyah: "WNI",
    nikAyah: "",
    pendidikanAyah: "",
    pekerjaanAyah: "",
    penghasilanAyah: "",
    hpAyah: "",
    telpAyah: "",
    alamatAyah: "",
    kelurahanAyah: "",
    kecamatanAyah: "",
    kotaAyah: "",
    provinsiAyah: "",
    kodePosAyah: "",
    // Ibu
    namaIbu: "",
    statusIbu: "",
    tempatLahirIbu: "",
    tanggalLahirIbu: "",
    agamaIbu: "",
    kewarganegaraanIbu: "WNI",
    nikIbu: "",
    pendidikanIbu: "",
    pekerjaanIbu: "",
    penghasilanIbu: "",
    hpIbu: "",
    telpIbu: "",
    alamatIbu: "",
    kelurahanIbu: "",
    kecamatanIbu: "",
    kotaIbu: "",
    provinsiIbu: "",
    kodePosIbu: "",
    // Wali Tambahan
    hasWaliTambahan: false,
    namaWali: "",
    hubunganWali: "",
    nikWali: "",
    pekerjaanWali: "",
    hpWali: "",
    alamatWali: "",
  });

  // 4. Riwayat Pendidikan
  const [pendidikan, setPendidikan] = useState({
    tk: {
      nama: "",
      lamaBelajar: "",
      alamat: "",
      kelurahan: "",
      kecamatan: "",
      kota: "",
      provinsi: "",
      kodePos: "",
    },
    sd: {
      nama: "",
      lamaBelajar: "",
      tinggalKelas: "",
      alamat: "",
      kelurahan: "",
      kecamatan: "",
      kota: "",
      provinsi: "",
      kodePos: "",
      prestasi: [] as Array<{ id: string; namaLomba: string; tingkat: string; juara: string; tahun: string }>,
    },
    smp: {
      nama: "",
      lamaBelajar: "",
      tinggalKelas: "",
      alamat: "",
      kelurahan: "",
      kecamatan: "",
      kota: "",
      provinsi: "",
      kodePos: "",
      prestasi: [] as Array<{ id: string; namaLomba: string; tingkat: string; juara: string; tahun: string }>,
    },
    organisasi: [] as Array<{ id: string; namaOrganisasi: string; jabatan: string; periode: string; deskripsi: string }>,
    kursus: [] as Array<{ id: string; namaKursus: string; bidang: string; lembaga: string; durasi: string; tahun: string }>,
  });

  // 5. Keterangan Kesehatan
  const [kesehatan, setKesehatan] = useState({
    beratBadan: "" as number | "",
    tinggiBadan: "" as number | "",
    golonganDarah: "",
    warnaKulit: "",
    bentukWajah: "",
    jenisRambut: "",
    keadaanMata: "",
    alatBantuMata: "",
    keadaanTelinga: "",
    alatBantuTelinga: "",
    penyakitPernahDiderita: "",
    penyakitSeringKambuh: "",
    alergiObatMakanan: "",
  });

  // 6. Hobi dan Kegemaran
  const [hobi, setHobi] = useState({
    hobiOlahraga: "",
    perlengkapanOlahraga: "",
    bakatOlahraga: "",
    hobiSeni: "",
    perlengkapanSeni: "",
    bakatSeni: "",
    hobiLainnya: "",
    bakatLainnya: "",
    mapelFavorit: "",
    kegiatanWaktuSenggang: "",
  });

  // 7. Kegiatan Belajar
  const [kegiatanBelajar, setKegiatanBelajar] = useState({
    kelompokBelajar: "",
    detailKelompok: "",
    lembagaBimbel: "",
    jadwalBelajarRumah: "",
    jamBelajar: "",
    kebiasaanBelajar: "",
    kegiatanLibur: "",
    scanPsikotesSmpUrl: "",
    scanPsikotesSmaUrl: "",
  });

  // 8. Rencana Peminatan & Cita-Cita
  const [peminatan, setPeminatan] = useState({
    prodiDiminatiMasuk: "",
    rekomendasiBkSmp: "",
    rekomendasiPsikotesSmp: "",
    ptn1: "",
    ptn2: "",
    ptn3: "",
    ptLuarNegeri: "",
    pts: "",
    kedinasan: "",
    citaCita: "",
    faktorPendukung: "",
  });

  // 9. Nilai Rapor SMP (6 Semester x 5 Mapel Pokok)
  type SmpGradeRecord = {
    matematika: number | "";
    bahasaIndonesia: number | "";
    bahasaInggris: number | "";
    ipa: number | "";
    ips: number | "";
  };

  const [nilaiSmp, setNilaiSmp] = useState<Record<string, SmpGradeRecord>>({
    vii_1: { matematika: "", bahasaIndonesia: "", bahasaInggris: "", ipa: "", ips: "" },
    vii_2: { matematika: "", bahasaIndonesia: "", bahasaInggris: "", ipa: "", ips: "" },
    viii_1: { matematika: "", bahasaIndonesia: "", bahasaInggris: "", ipa: "", ips: "" },
    viii_2: { matematika: "", bahasaIndonesia: "", bahasaInggris: "", ipa: "", ips: "" },
    ix_1: { matematika: "", bahasaIndonesia: "", bahasaInggris: "", ipa: "", ips: "" },
    ix_2: { matematika: "", bahasaIndonesia: "", bahasaInggris: "", ipa: "", ips: "" },
  });

  // 10. Surat Pernyataan
  const [pernyataan, setPernyataan] = useState({
    setujuPernyataan: false,
    penandatangan: "",
    namaPenandatangan: "",
    tanggalPernyataan: new Date().toISOString().split("T")[0],
  });

  // Show Toast
  const showToast = (msg: string, type: "success" | "error" = "success") => {
    setToastMessage(msg);
    setToastType(type);
    setTimeout(() => setToastMessage(null), 3500);
  };

  // LOAD INITIAL DATA REAL-TIME FROM API (AUTO-PREFILL DARI MASTER DATA SISWA & BUKU INDUK)
  useEffect(() => {
    async function fetchBiodata() {
      setLoading(true);
      try {
        const params = new URLSearchParams();
        if (user?.username) params.set("username", user.username);
        if (user?.reference_id) params.set("student_id", String(user.reference_id));
        if (user?.id_induk) params.set("id_induk", user.id_induk);

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

        if (json.success && json.student) {
          const s = json.student;
          const bi = json.buku_induk || {};
          const b = json.saved_biodata || {};
          setStudentBase(s);

          // Helper: kembalikan nilai pertama yang tidak kosong, jika tidak ada kembalikan "" (kosong)
          const val = (...candidates: any[]) => {
            for (const c of candidates) {
              if (c !== undefined && c !== null && String(c).trim() !== "") {
                return c;
              }
            }
            return "";
          };

          // 1. Identitas Peserta (Hapus input PPDB, ambil real-time dari data siswa)
          setIdentitas({
            fotoUrl: val(b.identitas?.fotoUrl, bi.pasfoto_url),
            nisn: val(b.identitas?.nisn, s.nisn, bi.nisn),
            namaPanggilan: val(b.identitas?.namaPanggilan, bi.nama_panggilan, s.nama_lengkap ? s.nama_lengkap.split(" ")[0] : ""),
            jenisKelamin: val(b.identitas?.jenisKelamin, s.jenis_kelamin, bi.jenis_kelamin),
            nik: val(b.identitas?.nik, bi.nik),
            tempatLahir: val(b.identitas?.tempatLahir, s.tempat_lahir, bi.tempat_lahir),
            tanggalLahir: val(b.identitas?.tanggalLahir, s.tanggal_lahir, bi.tanggal_lahir),
            agama: val(b.identitas?.agama, bi.agama),
            sukuBangsa: val(b.identitas?.sukuBangsa, bi.suku_bangsa),
            kewarganegaraan: val(b.identitas?.kewarganegaraan, bi.kewarganegaraan, "WNI"),
            bahasaSehariHari: val(b.identitas?.bahasaSehariHari, bi.bahasa_sehari_hari),
            asalSmp: val(b.identitas?.asalSmp, bi.sekolah_asal),
            nomorSeriIjazahSmp: val(b.identitas?.nomorSeriIjazahSmp, bi.no_ijazah_smp, bi.nomor_ijazah_smp),
            scanKkUrl: val(b.identitas?.scanKkUrl),
            scanAktaUrl: val(b.identitas?.scanAktaUrl),
            scanIjazahSmpUrl: val(b.identitas?.scanIjazahSmpUrl),
          });

          // 2. Tempat Tinggal (Sinkronkan alamat dari data induk siswa)
          setTempatTinggal({
            alamatKk: val(b.tempatTinggal?.alamatKk, s.alamat, bi.alamat),
            kelurahanKk: val(b.tempatTinggal?.kelurahanKk, bi.desa_kelurahan),
            kecamatanKk: val(b.tempatTinggal?.kecamatanKk, bi.kecamatan),
            kotaKk: val(b.tempatTinggal?.kotaKk, bi.kota_kabupaten),
            provinsiKk: val(b.tempatTinggal?.provinsiKk, bi.provinsi),
            kodePosKk: val(b.tempatTinggal?.kodePosKk, bi.kode_pos),
            telpRumah: val(b.tempatTinggal?.telpRumah, bi.no_telepon_rumah),
            alamatTinggal: val(b.tempatTinggal?.alamatTinggal, s.alamat, bi.alamat),
            kelurahanTinggal: val(b.tempatTinggal?.kelurahanTinggal, bi.desa_kelurahan),
            kecamatanTinggal: val(b.tempatTinggal?.kecamatanTinggal, bi.kecamatan),
            kotaTinggal: val(b.tempatTinggal?.kotaTinggal, bi.kota_kabupaten),
            provinsiTinggal: val(b.tempatTinggal?.provinsiTinggal, bi.provinsi),
            kodePosTinggal: val(b.tempatTinggal?.kodePosTinggal, bi.kode_pos),
            statusTempatTinggal: val(b.tempatTinggal?.statusTempatTinggal, bi.status_tempat_tinggal, bi.tinggal_dengan),
            kondisiTempatTinggal: val(b.tempatTinggal?.kondisiTempatTinggal),
            kondisiPenerangan: val(b.tempatTinggal?.kondisiPenerangan),
            mediaTransportasi: val(b.tempatTinggal?.mediaTransportasi, bi.transportasi_ke_sekolah),
            jumlahMotor: val(b.tempatTinggal?.jumlahMotor),
            jumlahMobil: val(b.tempatTinggal?.jumlahMobil),
            jarakSekolahKm: val(b.tempatTinggal?.jarakSekolahKm, bi.jarak_ke_sekolah),
            waktuTempuhMenit: val(b.tempatTinggal?.waktuTempuhMenit),
            lingkunganTempatTinggal: val(b.tempatTinggal?.lingkunganTempatTinggal),
            kondisiRuangBelajar: val(b.tempatTinggal?.kondisiRuangBelajar),
            kondisiKamarTidur: val(b.tempatTinggal?.kondisiKamarTidur),
            perlengkapanBelajar: val(b.tempatTinggal?.perlengkapanBelajar),
          });

          // 3. Data Keluarga
          setKeluarga({
            penanggungJawab: val(b.keluarga?.penanggungJawab),
            statusHubunganAnak: val(b.keluarga?.statusHubunganAnak, bi.status_anak),
            anakKe: val(b.keluarga?.anakKe, bi.anak_ke),
            jumlahSaudaraKandung: val(b.keluarga?.jumlahSaudaraKandung, bi.saudara_kandung, bi.jumlah_saudara),
            namaAyah: val(b.keluarga?.namaAyah, bi.nama_ayah, s.nama_ortu_wali),
            statusAyah: val(b.keluarga?.statusAyah, (bi.nama_ayah || s.nama_ortu_wali ? "Masih Hidup" : "")),
            tempatLahirAyah: val(b.keluarga?.tempatLahirAyah, bi.tempat_lahir_ayah),
            tanggalLahirAyah: val(b.keluarga?.tanggalLahirAyah, bi.tanggal_lahir_ayah),
            agamaAyah: val(b.keluarga?.agamaAyah, bi.agama),
            kewarganegaraanAyah: val(b.keluarga?.kewarganegaraanAyah, bi.kewarganegaraan_ayah, "WNI"),
            nikAyah: val(b.keluarga?.nikAyah, bi.nik_ayah),
            pendidikanAyah: val(b.keluarga?.pendidikanAyah, bi.pendidikan_ayah),
            pekerjaanAyah: val(b.keluarga?.pekerjaanAyah, bi.pekerjaan_ayah),
            penghasilanAyah: val(b.keluarga?.penghasilanAyah, bi.penghasilan_ayah),
            hpAyah: val(b.keluarga?.hpAyah, s.no_wa_ortu, bi.no_telp_ortu),
            telpAyah: val(b.keluarga?.telpAyah, bi.no_telepon_rumah),
            alamatAyah: val(b.keluarga?.alamatAyah, bi.alamat_ayah, s.alamat, bi.alamat),
            kelurahanAyah: val(b.keluarga?.kelurahanAyah, bi.desa_kelurahan),
            kecamatanAyah: val(b.keluarga?.kecamatanAyah, bi.kecamatan),
            kotaAyah: val(b.keluarga?.kotaAyah, bi.kota_kabupaten),
            provinsiAyah: val(b.keluarga?.provinsiAyah, bi.provinsi),
            kodePosAyah: val(b.keluarga?.kodePosAyah, bi.kode_pos),
            namaIbu: val(b.keluarga?.namaIbu, bi.nama_ibu),
            statusIbu: val(b.keluarga?.statusIbu, (bi.nama_ibu ? "Masih Hidup" : "")),
            tempatLahirIbu: val(b.keluarga?.tempatLahirIbu, bi.tempat_lahir_ibu),
            tanggalLahirIbu: val(b.keluarga?.tanggalLahirIbu, bi.tanggal_lahir_ibu),
            agamaIbu: val(b.keluarga?.agamaIbu, bi.agama),
            kewarganegaraanIbu: val(b.keluarga?.kewarganegaraanIbu, bi.kewarganegaraan_ibu, "WNI"),
            nikIbu: val(b.keluarga?.nikIbu, bi.nik_ibu),
            pendidikanIbu: val(b.keluarga?.pendidikanIbu, bi.pendidikan_ibu),
            pekerjaanIbu: val(b.keluarga?.pekerjaanIbu, bi.pekerjaan_ibu),
            penghasilanIbu: val(b.keluarga?.penghasilanIbu, bi.penghasilan_ibu),
            hpIbu: val(b.keluarga?.hpIbu),
            telpIbu: val(b.keluarga?.telpIbu),
            alamatIbu: val(b.keluarga?.alamatIbu, bi.alamat_ibu),
            kelurahanIbu: val(b.keluarga?.kelurahanIbu, bi.desa_kelurahan),
            kecamatanIbu: val(b.keluarga?.kecamatanIbu, bi.kecamatan),
            kotaIbu: val(b.keluarga?.kotaIbu, bi.kota_kabupaten),
            provinsiIbu: val(b.keluarga?.provinsiIbu, bi.provinsi),
            kodePosIbu: val(b.keluarga?.kodePosIbu, bi.kode_pos),
            hasWaliTambahan: Boolean(b.keluarga?.hasWaliTambahan || bi.nama_wali),
            namaWali: val(b.keluarga?.namaWali, bi.nama_wali),
            hubunganWali: val(b.keluarga?.hubunganWali, bi.hubungan_wali),
            nikWali: val(b.keluarga?.nikWali, bi.nik_wali),
            pekerjaanWali: val(b.keluarga?.pekerjaanWali, bi.pekerjaan_wali),
            hpWali: val(b.keluarga?.hpWali, bi.no_telp_wali),
            alamatWali: val(b.keluarga?.alamatWali, bi.alamat_wali),
          });

          // 4. Riwayat Pendidikan
          setPendidikan({
            tk: {
              nama: val(b.pendidikan?.tk?.nama),
              lamaBelajar: val(b.pendidikan?.tk?.lamaBelajar),
              alamat: val(b.pendidikan?.tk?.alamat),
              kelurahan: val(b.pendidikan?.tk?.kelurahan),
              kecamatan: val(b.pendidikan?.tk?.kecamatan),
              kota: val(b.pendidikan?.tk?.kota),
              provinsi: val(b.pendidikan?.tk?.provinsi),
              kodePos: val(b.pendidikan?.tk?.kodePos),
            },
            sd: {
              nama: val(b.pendidikan?.sd?.nama),
              lamaBelajar: val(b.pendidikan?.sd?.lamaBelajar),
              tinggalKelas: val(b.pendidikan?.sd?.tinggalKelas),
              alamat: val(b.pendidikan?.sd?.alamat),
              kelurahan: val(b.pendidikan?.sd?.kelurahan),
              kecamatan: val(b.pendidikan?.sd?.kecamatan),
              kota: val(b.pendidikan?.sd?.kota),
              provinsi: val(b.pendidikan?.sd?.provinsi),
              kodePos: val(b.pendidikan?.sd?.kodePos),
              prestasi: b.pendidikan?.sd?.prestasi || [],
            },
            smp: {
              nama: val(b.pendidikan?.smp?.nama, bi.sekolah_asal),
              lamaBelajar: val(b.pendidikan?.smp?.lamaBelajar),
              tinggalKelas: val(b.pendidikan?.smp?.tinggalKelas),
              alamat: val(b.pendidikan?.smp?.alamat, bi.alamat_sekolah_asal),
              kelurahan: val(b.pendidikan?.smp?.kelurahan),
              kecamatan: val(b.pendidikan?.smp?.kecamatan),
              kota: val(b.pendidikan?.smp?.kota),
              provinsi: val(b.pendidikan?.smp?.provinsi),
              kodePos: val(b.pendidikan?.smp?.kodePos),
              prestasi: b.pendidikan?.smp?.prestasi || [],
            },
            organisasi: b.pendidikan?.organisasi || [],
            kursus: b.pendidikan?.kursus || [],
          });

          // 5. Keterangan Kesehatan
          setKesehatan({
            beratBadan: val(b.kesehatan?.beratBadan, bi.berat_badan_masuk, bi.berat_badan_lulus),
            tinggiBadan: val(b.kesehatan?.tinggiBadan, bi.tinggi_badan_masuk, bi.tinggi_badan_lulus),
            golonganDarah: val(b.kesehatan?.golonganDarah, bi.golongan_darah),
            warnaKulit: val(b.kesehatan?.warnaKulit),
            bentukWajah: val(b.kesehatan?.bentukWajah),
            jenisRambut: val(b.kesehatan?.jenisRambut),
            keadaanMata: val(b.kesehatan?.keadaanMata),
            alatBantuMata: val(b.kesehatan?.alatBantuMata),
            keadaanTelinga: val(b.kesehatan?.keadaanTelinga),
            alatBantuTelinga: val(b.kesehatan?.alatBantuTelinga),
            penyakitPernahDiderita: val(b.kesehatan?.penyakitPernahDiderita, bi.riwayat_penyakit),
            penyakitSeringKambuh: val(b.kesehatan?.penyakitSeringKambuh),
            alergiObatMakanan: val(b.kesehatan?.alergiObatMakanan),
          });

          // 6. Hobi dan Kegemaran
          setHobi({
            hobiOlahraga: val(b.hobi?.hobiOlahraga),
            perlengkapanOlahraga: val(b.hobi?.perlengkapanOlahraga),
            bakatOlahraga: val(b.hobi?.bakatOlahraga),
            hobiSeni: val(b.hobi?.hobiSeni),
            perlengkapanSeni: val(b.hobi?.perlengkapanSeni),
            bakatSeni: val(b.hobi?.bakatSeni),
            hobiLainnya: val(b.hobi?.hobiLainnya),
            bakatLainnya: val(b.hobi?.bakatLainnya),
            mapelFavorit: val(b.hobi?.mapelFavorit),
            kegiatanWaktuSenggang: val(b.hobi?.kegiatanWaktuSenggang),
          });

          // 7. Kegiatan Belajar
          setKegiatanBelajar({
            kelompokBelajar: val(b.kegiatanBelajar?.kelompokBelajar),
            detailKelompok: val(b.kegiatanBelajar?.detailKelompok),
            lembagaBimbel: val(b.kegiatanBelajar?.lembagaBimbel),
            jadwalBelajarRumah: val(b.kegiatanBelajar?.jadwalBelajarRumah),
            jamBelajar: val(b.kegiatanBelajar?.jamBelajar),
            kebiasaanBelajar: val(b.kegiatanBelajar?.kebiasaanBelajar),
            kegiatanLibur: val(b.kegiatanBelajar?.kegiatanLibur),
            scanPsikotesSmpUrl: val(b.kegiatanBelajar?.scanPsikotesSmpUrl),
            scanPsikotesSmaUrl: val(b.kegiatanBelajar?.scanPsikotesSmaUrl),
          });

          // 8. Rencana Peminatan & Cita-Cita
          setPeminatan({
            prodiDiminatiMasuk: val(b.peminatan?.prodiDiminatiMasuk),
            rekomendasiBkSmp: val(b.peminatan?.rekomendasiBkSmp),
            rekomendasiPsikotesSmp: val(b.peminatan?.rekomendasiPsikotesSmp),
            ptn1: val(b.peminatan?.ptn1, s.rencana_karir_universitas),
            ptn2: val(b.peminatan?.ptn2),
            ptn3: val(b.peminatan?.ptn3),
            ptLuarNegeri: val(b.peminatan?.ptLuarNegeri),
            pts: val(b.peminatan?.pts),
            kedinasan: val(b.peminatan?.kedinasan),
            citaCita: val(b.peminatan?.citaCita, s.rencana_karir_jurusan),
            faktorPendukung: val(b.peminatan?.faktorPendukung),
          });

          // 9. Nilai SMP
          if (b.nilaiSmp) {
            setNilaiSmp((prev) => ({ ...prev, ...b.nilaiSmp }));
          }

          // 10. Surat Pernyataan
          if (b.pernyataan) {
            setPernyataan((prev) => ({ ...prev, ...b.pernyataan }));
          } else if (bi.nama_ayah || s.nama_ortu_wali) {
            setPernyataan((prev) => ({
              ...prev,
              namaPenandatangan: bi.nama_ayah || s.nama_ortu_wali || "",
            }));
          }

          if (json.updated_at) {
            setLastSavedTime(new Date(json.updated_at).toLocaleTimeString("id-ID"));
          }
        }
      } catch (e: any) {
        console.error("Gagal load biodata:", e);
      } finally {
        setLoading(false);
      }
    }

    fetchBiodata();
  }, [user]);

  // HITUNG STATUS KELENGKAPAN PER TAB DAN TOTAL (Indikator [Terisi] / [Total Field])
  const tabProgress = useMemo(() => {
    // 1. Identitas (PPDB dihapus, total 16 field)
    const idFields = [
      identitas.fotoUrl,
      identitas.nisn,
      identitas.namaPanggilan,
      identitas.jenisKelamin,
      identitas.nik,
      identitas.tempatLahir,
      identitas.tanggalLahir,
      identitas.agama,
      identitas.sukuBangsa,
      identitas.kewarganegaraan,
      identitas.bahasaSehariHari,
      identitas.asalSmp,
      identitas.nomorSeriIjazahSmp,
      identitas.scanKkUrl,
      identitas.scanAktaUrl,
      identitas.scanIjazahSmpUrl,
    ];
    const idFilled = idFields.filter((v) => Boolean(v && String(v).trim())).length;

    // 2. Tempat Tinggal
    const ttFields = [
      tempatTinggal.alamatKk,
      tempatTinggal.kelurahanKk,
      tempatTinggal.kecamatanKk,
      tempatTinggal.kotaKk,
      tempatTinggal.provinsiKk,
      tempatTinggal.kodePosKk,
      tempatTinggal.alamatTinggal,
      tempatTinggal.kelurahanTinggal,
      tempatTinggal.kecamatanTinggal,
      tempatTinggal.kotaTinggal,
      tempatTinggal.provinsiTinggal,
      tempatTinggal.kodePosTinggal,
      tempatTinggal.statusTempatTinggal,
      tempatTinggal.kondisiTempatTinggal,
      tempatTinggal.kondisiPenerangan,
      tempatTinggal.mediaTransportasi,
      tempatTinggal.lingkunganTempatTinggal,
      tempatTinggal.kondisiRuangBelajar,
      tempatTinggal.kondisiKamarTidur,
      tempatTinggal.perlengkapanBelajar,
    ];
    const ttFilled = ttFields.filter((v) => Boolean(v && String(v).trim())).length;

    // 3. Keluarga
    const kelFields = [
      keluarga.penanggungJawab,
      keluarga.statusHubunganAnak,
      keluarga.anakKe,
      keluarga.jumlahSaudaraKandung,
      keluarga.namaAyah,
      keluarga.statusAyah,
      keluarga.nikAyah,
      keluarga.pendidikanAyah,
      keluarga.pekerjaanAyah,
      keluarga.penghasilanAyah,
      keluarga.hpAyah,
      keluarga.namaIbu,
      keluarga.statusIbu,
      keluarga.nikIbu,
      keluarga.pendidikanIbu,
      keluarga.pekerjaanIbu,
      keluarga.penghasilanIbu,
      keluarga.hpIbu,
    ];
    const kelFilled = kelFields.filter((v) => Boolean(v && String(v).trim())).length;

    // 4. Pendidikan
    const pendFields = [
      pendidikan.tk.nama,
      pendidikan.sd.nama,
      pendidikan.sd.lamaBelajar,
      pendidikan.sd.alamat,
      pendidikan.smp.nama,
      pendidikan.smp.lamaBelajar,
      pendidikan.smp.alamat,
    ];
    const pendFilled = pendFields.filter((v) => Boolean(v && String(v).trim())).length;

    // 5. Kesehatan
    const kesFields = [
      kesehatan.beratBadan,
      kesehatan.tinggiBadan,
      kesehatan.golonganDarah,
      kesehatan.warnaKulit,
      kesehatan.bentukWajah,
      kesehatan.jenisRambut,
      kesehatan.keadaanMata,
      kesehatan.alatBantuMata,
      kesehatan.keadaanTelinga,
      kesehatan.alatBantuTelinga,
      kesehatan.penyakitPernahDiderita,
      kesehatan.alergiObatMakanan,
    ];
    const kesFilled = kesFields.filter((v) => Boolean(v && String(v).trim())).length;

    // 6. Hobi
    const hobiFields = [
      hobi.hobiOlahraga,
      hobi.bakatOlahraga,
      hobi.hobiSeni,
      hobi.bakatSeni,
      hobi.hobiLainnya,
      hobi.mapelFavorit,
      hobi.kegiatanWaktuSenggang,
    ];
    const hobiFilled = hobiFields.filter((v) => Boolean(v && String(v).trim())).length;

    // 7. Kegiatan Belajar
    const kbFields = [
      kegiatanBelajar.kelompokBelajar,
      kegiatanBelajar.detailKelompok,
      kegiatanBelajar.lembagaBimbel,
      kegiatanBelajar.jadwalBelajarRumah,
      kegiatanBelajar.jamBelajar,
      kegiatanBelajar.kebiasaanBelajar,
      kegiatanBelajar.kegiatanLibur,
    ];
    const kbFilled = kbFields.filter((v) => Boolean(v && String(v).trim())).length;

    // 8. Peminatan & Cita-Cita
    const pemFields = [
      peminatan.prodiDiminatiMasuk,
      peminatan.rekomendasiBkSmp,
      peminatan.rekomendasiPsikotesSmp,
      peminatan.ptn1,
      peminatan.ptn2,
      peminatan.citaCita,
      peminatan.faktorPendukung,
    ];
    const pemFilled = pemFields.filter((v) => Boolean(v && String(v).trim())).length;

    // 9. Nilai Rapor SMP (Total 30 Nilai)
    let smpCount = 0;
    let smpFilled = 0;
    Object.values(nilaiSmp).forEach((sem) => {
      [sem.matematika, sem.bahasaIndonesia, sem.bahasaInggris, sem.ipa, sem.ips].forEach((n) => {
        smpCount++;
        if (n !== "" && n !== null && n !== undefined && !isNaN(Number(n))) smpFilled++;
      });
    });

    // 10. Pernyataan
    const perCount = 2;
    const perFilled = (pernyataan.setujuPernyataan ? 1 : 0) + (pernyataan.penandatangan ? 1 : 0);

    const map: Record<BiodataTabKey, { filled: number; total: number; isComplete: boolean }> = {
      identitas: { filled: idFilled, total: idFields.length, isComplete: idFilled >= idFields.length - 2 },
      tempat_tinggal: { filled: ttFilled, total: ttFields.length, isComplete: ttFilled >= ttFields.length - 2 },
      keluarga: { filled: kelFilled, total: kelFields.length, isComplete: kelFilled >= kelFields.length - 2 },
      pendidikan: { filled: pendFilled, total: pendFields.length, isComplete: pendFilled >= 5 },
      kesehatan: { filled: kesFilled, total: kesFields.length, isComplete: kesFilled >= kesFields.length - 2 },
      hobi: { filled: hobiFilled, total: hobiFields.length, isComplete: hobiFilled >= hobiFields.length - 1 },
      kegiatan_belajar: { filled: kbFilled, total: kbFields.length, isComplete: kbFilled >= kbFields.length - 1 },
      peminatan: { filled: pemFilled, total: pemFields.length, isComplete: pemFilled >= pemFields.length - 1 },
      nilai_smp: { filled: smpFilled, total: smpCount, isComplete: smpFilled >= 25 },
      pernyataan: { filled: perFilled, total: perCount, isComplete: pernyataan.setujuPernyataan },
    };

    let totalAllFilled = 0;
    let totalAllCount = 0;
    Object.values(map).forEach((item) => {
      totalAllFilled += item.filled;
      totalAllCount += item.total;
    });

    const overallPct = Math.round((totalAllFilled / totalAllCount) * 100);

    return {
      perTab: map,
      totalFilled: totalAllFilled,
      totalCount: totalAllCount,
      overallPercentage: overallPct,
    };
  }, [identitas, tempatTinggal, keluarga, pendidikan, kesehatan, hobi, kegiatanBelajar, peminatan, nilaiSmp, pernyataan]);

  // SAVE TO DATABASE & MASTER SISWA REAL-TIME
  const handleSaveData = async (advanceNext = false) => {
    setSaving(true);
    try {
      const payload = {
        student_id: studentBase?.id,
        nis: studentBase?.nis || identitas.nisn,
        nisn: identitas.nisn || studentBase?.nisn,
        data_json: {
          identitas,
          tempatTinggal,
          keluarga,
          pendidikan,
          kesehatan,
          hobi,
          kegiatanBelajar,
          peminatan,
          nilaiSmp,
          pernyataan,
        },
        completion_percentage: tabProgress.overallPercentage,
        completed_fields: tabProgress.totalFilled,
        total_fields: tabProgress.totalCount,
        status_pernyataan: pernyataan.setujuPernyataan,
        penandatangan: pernyataan.penandatangan,
        tanggal_pernyataan: pernyataan.tanggalPernyataan,
      };

      const res = await fetch("/api/portal/biodata", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      const resJson = await res.json();
      if (!res.ok || !resJson.success) {
        throw new Error(resJson.error || "Gagal menyimpan biodata.");
      }

      setLastSavedTime(new Date().toLocaleTimeString("id-ID"));
      showToast("Biodata mandiri berhasil disimpan ke Master Data Siswa secara real-time!");

      if (advanceNext) {
        const curIdx = BIODATA_TABS.findIndex((t) => t.key === activeTab);
        if (curIdx < BIODATA_TABS.length - 1) {
          setActiveTab(BIODATA_TABS[curIdx + 1].key);
        }
      }
    } catch (err: any) {
      showToast(err.message || "Gagal menyimpan biodata.", "error");
    } finally {
      setSaving(false);
    }
  };

  // QUICK-FILL HELPERS
  const handleCopyKkToDomisili = () => {
    setTempatTinggal((prev) => ({
      ...prev,
      alamatTinggal: prev.alamatKk,
      kelurahanTinggal: prev.kelurahanKk,
      kecamatanTinggal: prev.kecamatanKk,
      kotaTinggal: prev.kotaKk,
      provinsiTinggal: prev.provinsiKk,
      kodePosTinggal: prev.kodePosKk,
    }));
    showToast("Alamat Domisili berhasil disamakan dengan Alamat Kartu Keluarga!");
  };

  const handleCopyDomisiliToAyah = () => {
    setKeluarga((prev) => ({
      ...prev,
      alamatAyah: tempatTinggal.alamatTinggal || tempatTinggal.alamatKk,
      kelurahanAyah: tempatTinggal.kelurahanTinggal || tempatTinggal.kelurahanKk,
      kecamatanAyah: tempatTinggal.kecamatanTinggal || tempatTinggal.kecamatanKk,
      kotaAyah: tempatTinggal.kotaTinggal || tempatTinggal.kotaKk,
      provinsiAyah: tempatTinggal.provinsiTinggal || tempatTinggal.provinsiKk,
      kodePosAyah: tempatTinggal.kodePosTinggal || tempatTinggal.kodePosKk,
    }));
    showToast("Alamat Ayah berhasil disamakan dengan Alamat Siswa!");
  };

  const handleCopyAyahToIbu = () => {
    setKeluarga((prev) => ({
      ...prev,
      alamatIbu: prev.alamatAyah,
      kelurahanIbu: prev.kelurahanAyah,
      kecamatanIbu: prev.kecamatanAyah,
      kotaIbu: prev.kotaAyah,
      provinsiIbu: prev.provinsiAyah,
      kodePosIbu: prev.kodePosAyah,
    }));
    showToast("Alamat Ibu berhasil disamakan dengan Alamat Ayah!");
  };

  // FILE UPLOAD SIMULATION & BASE64 CONVERTER
  const handleFileUpload = (
    e: React.ChangeEvent<HTMLInputElement>,
    setter: (val: string) => void,
    fieldTitle: string
  ) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (file.size > 2 * 1024 * 1024) {
      showToast(`Ukuran file '${file.name}' melebihi batas maksimal 2MB.`, "error");
      return;
    }

    const reader = new FileReader();
    reader.onload = () => {
      const result = reader.result as string;
      setter(result);
      showToast(`Berkas '${fieldTitle}' berhasil diunggah.`);
    };
    reader.readAsDataURL(file);
  };

  // ACTIVE TAB DETAILS
  const currentTabInfo = useMemo(() => {
    return BIODATA_TABS.find((t) => t.key === activeTab) || BIODATA_TABS[0];
  }, [activeTab]);

  return (
    <div className="space-y-6 pb-16">
      {/* HEADER SECTION WITH COMPLETION METRICS */}
      <div className="bg-gradient-to-r from-blue-900 via-indigo-900 to-slate-900 text-white p-5 sm:p-6 rounded-2xl shadow-sm border border-blue-800/40 relative overflow-hidden">
        <div className="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl pointer-events-none" />

        <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 relative z-10">
          <div className="space-y-1.5 max-w-2xl">
            <div className="flex items-center gap-2">
              <span className="px-2.5 py-1 rounded-full bg-blue-500/20 text-blue-200 text-[11px] font-bold border border-blue-400/30 flex items-center gap-1.5">
                <Sparkles className="w-3.5 h-3.5 text-amber-300" />
                Portal Mandiri Peserta Didik
              </span>
              <span className="text-xs text-blue-300 font-mono">TA 2026/2027</span>
            </div>
            <h1 className="text-2xl sm:text-3xl font-black text-white tracking-tight">
              Lengkapi Biodata Siswa
            </h1>
            <p className="text-xs sm:text-sm text-blue-200 leading-relaxed">
              Formulir pendataan mandiri resmi SMA BPI 1 Bandung. Seluruh data terhubung langsung ke Master Data Siswa,
              Buku Induk TU, dan Profil Kumulatif Siswa.
            </p>
          </div>

          {/* Progress Indicator Card */}
          <div className="bg-white/10 backdrop-blur-md border border-white/15 p-4 rounded-xl min-w-[280px] space-y-3">
            <div className="flex items-center justify-between">
              <span className="text-xs font-semibold text-blue-200 uppercase tracking-wider">
                Kelengkapan Biodata
              </span>
              <span className="text-sm font-black text-amber-300 font-mono">
                {tabProgress.overallPercentage}%
              </span>
            </div>

            {/* Progress Bar */}
            <div className="w-full bg-black/30 h-2.5 rounded-full overflow-hidden p-0.5 border border-white/10">
              <div
                className={`h-full rounded-full transition-all duration-500 ${
                  tabProgress.overallPercentage >= 80
                    ? "bg-emerald-400"
                    : tabProgress.overallPercentage >= 50
                    ? "bg-amber-400"
                    : "bg-blue-400"
                }`}
                style={{ width: `${tabProgress.overallPercentage}%` }}
              />
            </div>

            <div className="flex items-center justify-between text-[11px] text-blue-200">
              <span className="flex items-center gap-1">
                <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
                <strong>{tabProgress.totalFilled}</strong> dari <strong>{tabProgress.totalCount}</strong> Field
              </span>
              {lastSavedTime && (
                <span className="text-[10px] text-blue-300 font-mono">
                  Tersimpan: {lastSavedTime}
                </span>
              )}
            </div>
          </div>
        </div>

        {/* Student Quick Pill */}
        {studentBase && (
          <div className="mt-4 pt-4 border-t border-white/10 flex flex-wrap items-center gap-3 text-xs text-blue-100">
            <span className="font-bold text-white">{studentBase.nama_lengkap}</span>
            <span className="text-blue-300">•</span>
            <span className="font-mono">NIS: {studentBase.nis}</span>
            <span className="text-blue-300">•</span>
            <span className="font-mono">NISN: {studentBase.nisn || "-"}</span>
            <span className="text-blue-300">•</span>
            <span className="bg-blue-500/20 px-2 py-0.5 rounded text-blue-200 font-semibold border border-blue-400/20">
              Kelas {studentBase.rombel || "X-1"}
            </span>
          </div>
        )}
      </div>

      {/* 2-COLUMN LAYOUT: LEFT NAVIGATION TAB + RIGHT MAIN FORM */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
        {/* LEFT COLUMN: TAB NAVIGATION LIST */}
        <div className="lg:col-span-4 xl:col-span-3 lg:sticky lg:top-20 space-y-3">
          <div className="bg-white rounded-2xl border border-slate-200 shadow-xs p-3">
            <div className="px-3 py-2 border-b border-slate-100 mb-2 flex items-center justify-between">
              <span className="text-xs font-bold text-slate-700 uppercase tracking-wider">
                Struktur Formulir
              </span>
              <span className="text-[10px] font-bold text-slate-500 bg-slate-100 px-2 py-0.5 rounded-full">
                10 Bagian
              </span>
            </div>

            <div className="space-y-1">
              {BIODATA_TABS.map((tab) => {
                const Icon = tab.icon;
                const progress = tabProgress.perTab[tab.key];
                const isActive = activeTab === tab.key;

                return (
                  <button
                    key={tab.key}
                    type="button"
                    onClick={() => setActiveTab(tab.key)}
                    className={`w-full text-left px-3 py-2.5 rounded-xl text-xs font-medium transition-all flex items-center justify-between gap-2.5 ${
                      isActive
                        ? "bg-blue-600 text-white shadow-sm font-semibold"
                        : "text-slate-700 hover:bg-slate-50 border border-transparent hover:border-slate-200"
                    }`}
                  >
                    <div className="flex items-center gap-2.5 min-w-0">
                      <span
                        className={`w-6 h-6 rounded-lg flex items-center justify-center shrink-0 text-[11px] font-bold ${
                          isActive
                            ? "bg-white/20 text-white"
                            : "bg-slate-100 text-slate-600"
                        }`}
                      >
                        {tab.number}
                      </span>
                      <span className="truncate">{tab.title}</span>
                    </div>

                    <div className="flex items-center gap-1.5 shrink-0">
                      <span
                        className={`text-[10px] px-1.5 py-0.5 rounded-full font-mono font-bold ${
                          isActive
                            ? "bg-white/20 text-white"
                            : progress.isComplete
                            ? "bg-emerald-50 text-emerald-700 border border-emerald-200"
                            : "bg-slate-100 text-slate-600"
                        }`}
                      >
                        {progress.filled}/{progress.total}
                      </span>
                      {progress.isComplete ? (
                        <CheckCircle2
                          className={`w-3.5 h-3.5 ${isActive ? "text-emerald-200" : "text-emerald-500"}`}
                        />
                      ) : (
                        <div
                          className={`w-2 h-2 rounded-full ${
                            isActive ? "bg-amber-300" : "bg-slate-300"
                          }`}
                        />
                      )}
                    </div>
                  </button>
                );
              })}
            </div>

            <div className="mt-4 pt-3 border-t border-slate-100 px-2 flex flex-col gap-2">
              <Button
                variant="primary"
                size="sm"
                onClick={() => handleSaveData(false)}
                disabled={saving}
                leftIcon={<Save className="w-4 h-4" />}
                className="w-full bg-blue-600 hover:bg-blue-700 font-semibold"
              >
                {saving ? "Menyimpan..." : "Simpan Semua Data"}
              </Button>
            </div>
          </div>
        </div>

        {/* RIGHT COLUMN: MAIN FORM CONTENT CARD */}
        <div className="lg:col-span-8 xl:col-span-9 bg-white rounded-2xl border border-slate-200 shadow-xs overflow-hidden">
          {/* TAB HEADER */}
          <div className="p-5 sm:p-6 border-b border-slate-100 bg-slate-50/50 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div className="flex items-center gap-3">
              <span className="w-10 h-10 rounded-xl bg-blue-600 text-white flex items-center justify-center font-bold text-sm shadow-xs shrink-0">
                {currentTabInfo.number}
              </span>
              <div>
                <h2 className="text-base sm:text-lg font-bold text-slate-900">
                  {currentTabInfo.title}
                </h2>
                <p className="text-xs text-slate-500">{currentTabInfo.description}</p>
              </div>
            </div>

            <div className="flex items-center gap-2 self-end sm:self-auto">
              <span className="text-xs font-bold text-slate-600 bg-white border border-slate-200 px-3 py-1 rounded-lg">
                Status: {tabProgress.perTab[activeTab].filled} / {tabProgress.perTab[activeTab].total} Field Terisi
              </span>
              <Button
                variant="primary"
                size="sm"
                onClick={() => handleSaveData(false)}
                disabled={saving}
                leftIcon={<Save className="w-3.5 h-3.5" />}
              >
                Simpan
              </Button>
            </div>
          </div>

          {/* TAB BODY FORMS */}
          <div className="p-5 sm:p-6 space-y-6">
            {/* ========================================================================= */}
            {/* 1. IDENTITAS PESERTA */}
            {/* ========================================================================= */}
            {activeTab === "identitas" && (
              <div className="space-y-6">
                {/* Pasfoto Resmi */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 flex flex-col sm:flex-row items-center gap-5">
                  <div className="relative group shrink-0">
                    <div className="w-28 h-36 rounded-xl border-2 border-dashed border-blue-400 bg-blue-50/60 overflow-hidden flex flex-col items-center justify-center text-center p-2 relative shadow-2xs">
                      {identitas.fotoUrl ? (
                        <img
                          src={identitas.fotoUrl}
                          alt="Foto Profil"
                          className="w-full h-full object-cover rounded-lg"
                        />
                      ) : (
                        <div className="space-y-1 text-slate-500">
                          <User className="w-8 h-8 mx-auto text-blue-500" />
                          <span className="text-[10px] font-bold block text-blue-700">Pasfoto 3x4</span>
                          <span className="text-[9px] text-slate-400 block">Latar Merah / Biru</span>
                        </div>
                      )}
                    </div>
                  </div>

                  <div className="space-y-2 text-center sm:text-left">
                    <h4 className="text-sm font-bold text-slate-800">Unggah Foto Profil Resmi</h4>
                    <p className="text-xs text-slate-500 max-w-md">
                      Format file: <strong>JPG / PNG</strong> (Maksimal 2 MB). Berpakaian seragam rapi dengan latar belakang merah atau biru.
                    </p>
                    <div className="flex flex-wrap items-center gap-2 justify-center sm:justify-start pt-1">
                      <label className="cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-xs font-semibold shadow-xs">
                        <Upload className="w-3.5 h-3.5" />
                        Pilih Pasfoto
                        <input
                          type="file"
                          accept="image/png, image/jpeg"
                          className="hidden"
                          onChange={(e) =>
                            handleFileUpload(e, (url) => setIdentitas((p) => ({ ...p, fotoUrl: url })), "Pasfoto Resmi")
                          }
                        />
                      </label>
                      {identitas.fotoUrl && (
                        <button
                          type="button"
                          onClick={() => setIdentitas((p) => ({ ...p, fotoUrl: "" }))}
                          className="text-xs text-rose-600 hover:underline px-2 py-1 font-semibold"
                        >
                          Hapus Foto
                        </button>
                      )}
                    </div>
                  </div>
                </div>

                {/* Form Isian Identitas */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">
                      NISN (Nomor Induk Siswa Nasional) <span className="text-rose-500">*</span>
                    </label>
                    <input
                      type="text"
                      maxLength={10}
                      value={identitas.nisn}
                      onChange={(e) => setIdentitas({ ...identitas, nisn: e.target.value })}
                      placeholder="10 digit nomor NISN"
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-mono font-medium focus:ring-2 focus:ring-blue-500/20"
                    />
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">
                      Nama Panggilan <span className="text-rose-500">*</span>
                    </label>
                    <input
                      type="text"
                      value={identitas.namaPanggilan}
                      onChange={(e) => setIdentitas({ ...identitas, namaPanggilan: e.target.value })}
                      placeholder="Contoh: Sabrina"
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium focus:ring-2 focus:ring-blue-500/20"
                    />
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">
                      Jenis Kelamin <span className="text-rose-500">*</span>
                    </label>
                    <select
                      value={identitas.jenisKelamin}
                      onChange={(e) => setIdentitas({ ...identitas, jenisKelamin: e.target.value })}
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium focus:ring-2 focus:ring-blue-500/20"
                    >
                      <option value="">-- Pilih Jenis Kelamin --</option>
                      <option value="Laki-laki">Laki-laki</option>
                      <option value="Perempuan">Perempuan</option>
                    </select>
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">
                      NIK Siswa (Sesuai Kartu Keluarga) <span className="text-rose-500">*</span>
                    </label>
                    <input
                      type="text"
                      maxLength={16}
                      value={identitas.nik}
                      onChange={(e) => setIdentitas({ ...identitas, nik: e.target.value })}
                      placeholder="16 digit NIK"
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-mono font-medium focus:ring-2 focus:ring-blue-500/20"
                    />
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">
                      Tempat Lahir <span className="text-rose-500">*</span>
                    </label>
                    <input
                      type="text"
                      value={identitas.tempatLahir}
                      onChange={(e) => setIdentitas({ ...identitas, tempatLahir: e.target.value })}
                      placeholder="Contoh: Bandung"
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium focus:ring-2 focus:ring-blue-500/20"
                    />
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">
                      Tanggal Lahir <span className="text-rose-500">*</span>
                    </label>
                    <input
                      type="date"
                      value={identitas.tanggalLahir}
                      onChange={(e) => setIdentitas({ ...identitas, tanggalLahir: e.target.value })}
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium focus:ring-2 focus:ring-blue-500/20"
                    />
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">
                      Agama <span className="text-rose-500">*</span>
                    </label>
                    <select
                      value={identitas.agama}
                      onChange={(e) => setIdentitas({ ...identitas, agama: e.target.value })}
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium focus:ring-2 focus:ring-blue-500/20"
                    >
                      <option value="">-- Pilih Agama --</option>
                      <option value="Islam">Islam</option>
                      <option value="Kristen Protestan">Kristen Protestan</option>
                      <option value="Katolik">Katolik</option>
                      <option value="Hindu">Hindu</option>
                      <option value="Buddha">Buddha</option>
                      <option value="Khonghucu">Khonghucu</option>
                    </select>
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">Suku Bangsa</label>
                    <input
                      type="text"
                      value={identitas.sukuBangsa}
                      onChange={(e) => setIdentitas({ ...identitas, sukuBangsa: e.target.value })}
                      placeholder="Contoh: Sunda, Jawa, Minang, dll."
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium focus:ring-2 focus:ring-blue-500/20"
                    />
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">
                      Kewarganegaraan <span className="text-rose-500">*</span>
                    </label>
                    <select
                      value={identitas.kewarganegaraan}
                      onChange={(e) => setIdentitas({ ...identitas, kewarganegaraan: e.target.value })}
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium focus:ring-2 focus:ring-blue-500/20"
                    >
                      <option value="WNI">WNI (Warga Negara Indonesia)</option>
                      <option value="WNA">WNA (Warga Negara Asing)</option>
                    </select>
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">Bahasa Sehari-hari di Rumah</label>
                    <input
                      type="text"
                      value={identitas.bahasaSehariHari}
                      onChange={(e) => setIdentitas({ ...identitas, bahasaSehariHari: e.target.value })}
                      placeholder="Contoh: Bahasa Indonesia & Sunda"
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium focus:ring-2 focus:ring-blue-500/20"
                    />
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">
                      Nama Asal SMP / MTs <span className="text-rose-500">*</span>
                    </label>
                    <input
                      type="text"
                      value={identitas.asalSmp}
                      onChange={(e) => setIdentitas({ ...identitas, asalSmp: e.target.value })}
                      placeholder="Contoh: SMP Negeri 2 Bandung"
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium focus:ring-2 focus:ring-blue-500/20"
                    />
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">Nomor Seri Ijazah SMP</label>
                    <input
                      type="text"
                      value={identitas.nomorSeriIjazahSmp}
                      onChange={(e) => setIdentitas({ ...identitas, nomorSeriIjazahSmp: e.target.value })}
                      placeholder="Contoh: DN-02/D-SMP/K13/23/0012345"
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-mono font-medium focus:ring-2 focus:ring-blue-500/20"
                    />
                  </div>
                </div>

                {/* Dokumen Pendukung */}
                <div className="pt-4 border-t border-slate-200">
                  <h4 className="text-xs font-bold text-slate-800 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <FileText className="w-4 h-4 text-blue-600" />
                    Dokumen Berkas Pendukung (Scan PDF / JPG Maksimal 2 MB)
                  </h4>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
                    {/* Kartu Keluarga */}
                    <div className="p-3 bg-slate-50 rounded-xl border border-slate-200 space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="font-bold text-slate-700">Kartu Keluarga (KK)</span>
                        {identitas.scanKkUrl && <CheckCircle2 className="w-4 h-4 text-emerald-600" />}
                      </div>
                      <div className="flex items-center gap-2">
                        <label className="cursor-pointer px-2.5 py-1.5 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 rounded-lg text-xs font-semibold shadow-2xs">
                          {identitas.scanKkUrl ? "Ganti File" : "Upload KK"}
                          <input
                            type="file"
                            accept="image/*, application/pdf"
                            className="hidden"
                            onChange={(e) =>
                              handleFileUpload(e, (url) => setIdentitas((p) => ({ ...p, scanKkUrl: url })), "Kartu Keluarga")
                            }
                          />
                        </label>
                        {identitas.scanKkUrl && (
                          <button
                            type="button"
                            onClick={() =>
                              setPreviewDoc({
                                title: "Scan Kartu Keluarga (KK)",
                                url: identitas.scanKkUrl,
                                type: "image",
                              })
                            }
                            className="text-blue-600 hover:underline font-semibold flex items-center gap-1"
                          >
                            <Eye className="w-3.5 h-3.5" /> Lihat Berkas
                          </button>
                        )}
                      </div>
                    </div>

                    {/* Akta Kelahiran */}
                    <div className="p-3 bg-slate-50 rounded-xl border border-slate-200 space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="font-bold text-slate-700">Akta Kelahiran</span>
                        {identitas.scanAktaUrl && <CheckCircle2 className="w-4 h-4 text-emerald-600" />}
                      </div>
                      <div className="flex items-center gap-2">
                        <label className="cursor-pointer px-2.5 py-1.5 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 rounded-lg text-xs font-semibold shadow-2xs">
                          {identitas.scanAktaUrl ? "Ganti File" : "Upload Akta"}
                          <input
                            type="file"
                            accept="image/*, application/pdf"
                            className="hidden"
                            onChange={(e) =>
                              handleFileUpload(e, (url) => setIdentitas((p) => ({ ...p, scanAktaUrl: url })), "Akta Kelahiran")
                            }
                          />
                        </label>
                        {identitas.scanAktaUrl && (
                          <button
                            type="button"
                            onClick={() =>
                              setPreviewDoc({
                                title: "Scan Akta Kelahiran",
                                url: identitas.scanAktaUrl,
                                type: "image",
                              })
                            }
                            className="text-blue-600 hover:underline font-semibold flex items-center gap-1"
                          >
                            <Eye className="w-3.5 h-3.5" /> Lihat Berkas
                          </button>
                        )}
                      </div>
                    </div>

                    {/* Ijazah SMP */}
                    <div className="p-3 bg-slate-50 rounded-xl border border-slate-200 space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="font-bold text-slate-700">Ijazah SMP</span>
                        {identitas.scanIjazahSmpUrl && <CheckCircle2 className="w-4 h-4 text-emerald-600" />}
                      </div>
                      <div className="flex items-center gap-2">
                        <label className="cursor-pointer px-2.5 py-1.5 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 rounded-lg text-xs font-semibold shadow-2xs">
                          {identitas.scanIjazahSmpUrl ? "Ganti File" : "Upload Ijazah"}
                          <input
                            type="file"
                            accept="image/*, application/pdf"
                            className="hidden"
                            onChange={(e) =>
                              handleFileUpload(e, (url) => setIdentitas((p) => ({ ...p, scanIjazahSmpUrl: url })), "Ijazah SMP")
                            }
                          />
                        </label>
                        {identitas.scanIjazahSmpUrl && (
                          <button
                            type="button"
                            onClick={() =>
                              setPreviewDoc({
                                title: "Scan Ijazah SMP",
                                url: identitas.scanIjazahSmpUrl,
                                type: "image",
                              })
                            }
                            className="text-blue-600 hover:underline font-semibold flex items-center gap-1"
                          >
                            <Eye className="w-3.5 h-3.5" /> Lihat Berkas
                          </button>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* ========================================================================= */}
            {/* 2. TEMPAT TINGGAL */}
            {/* ========================================================================= */}
            {activeTab === "tempat_tinggal" && (
              <div className="space-y-6 text-xs">
                {/* Alamat Sesuai KK */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px] flex items-center gap-1.5">
                    <MapPin className="w-4 h-4 text-blue-600" />
                    1. Alamat Sesuai Kartu Keluarga (KK)
                  </h4>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div className="md:col-span-2">
                      <label className="block font-bold text-slate-700 mb-1">
                        Alamat Jalan, RT/RW, No. Rumah <span className="text-rose-500">*</span>
                      </label>
                      <textarea
                        rows={2}
                        value={tempatTinggal.alamatKk}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, alamatKk: e.target.value })}
                        placeholder="Contoh: Jl. Burangrang No. 8 RT 02 / RW 04"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium focus:ring-2 focus:ring-blue-500/20"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Kelurahan / Desa</label>
                      <input
                        type="text"
                        value={tempatTinggal.kelurahanKk}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, kelurahanKk: e.target.value })}
                        placeholder="Contoh: Malabar"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Kecamatan</label>
                      <input
                        type="text"
                        value={tempatTinggal.kecamatanKk}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, kecamatanKk: e.target.value })}
                        placeholder="Contoh: Lengkong"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Kota / Kabupaten</label>
                      <input
                        type="text"
                        value={tempatTinggal.kotaKk}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, kotaKk: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Provinsi</label>
                      <input
                        type="text"
                        value={tempatTinggal.provinsiKk}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, provinsiKk: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Kode Pos</label>
                      <input
                        type="text"
                        value={tempatTinggal.kodePosKk}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, kodePosKk: e.target.value })}
                        placeholder="Contoh: 40262"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-mono font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Nomor Telepon Rumah</label>
                      <input
                        type="text"
                        value={tempatTinggal.telpRumah}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, telpRumah: e.target.value })}
                        placeholder="Contoh: (022) 7301234 atau -"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>

                {/* Alamat Domisili Siswa Saat Ini */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px] flex items-center gap-1.5">
                      <Building className="w-4 h-4 text-indigo-600" />
                      2. Alamat Domisili Siswa Saat Ini
                    </h4>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={handleCopyKkToDomisili}
                      leftIcon={<Copy className="w-3.5 h-3.5 text-blue-600" />}
                      className="bg-white border-blue-200 text-blue-700 hover:bg-blue-50 text-[11px]"
                    >
                      Sama dengan Alamat KK
                    </Button>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div className="md:col-span-2">
                      <label className="block font-bold text-slate-700 mb-1">
                        Alamat Tempat Tinggal Saat Ini <span className="text-rose-500">*</span>
                      </label>
                      <textarea
                        rows={2}
                        value={tempatTinggal.alamatTinggal}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, alamatTinggal: e.target.value })}
                        placeholder="Alamat domisili nyata tempat tinggal anak"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium focus:ring-2 focus:ring-blue-500/20"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Kelurahan / Desa</label>
                      <input
                        type="text"
                        value={tempatTinggal.kelurahanTinggal}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, kelurahanTinggal: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Kecamatan</label>
                      <input
                        type="text"
                        value={tempatTinggal.kecamatanTinggal}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, kecamatanTinggal: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Kota / Kabupaten</label>
                      <input
                        type="text"
                        value={tempatTinggal.kotaTinggal}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, kotaTinggal: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Provinsi</label>
                      <input
                        type="text"
                        value={tempatTinggal.provinsiTinggal}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, provinsiTinggal: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Kode Pos</label>
                      <input
                        type="text"
                        value={tempatTinggal.kodePosTinggal}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, kodePosTinggal: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-mono font-medium"
                      />
                    </div>
                  </div>
                </div>

                {/* Kondisi Lingkungan & Transportasi */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block font-bold text-slate-700 mb-1">Status Tempat Tinggal</label>
                    <select
                      value={tempatTinggal.statusTempatTinggal}
                      onChange={(e) => setTempatTinggal({ ...tempatTinggal, statusTempatTinggal: e.target.value })}
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium"
                    >
                      <option value="">-- Pilih Status Tempat Tinggal --</option>
                      <option value="Milik Sendiri">Milik Sendiri</option>
                      <option value="Sewa / Kontrak">Sewa / Kontrak</option>
                      <option value="Menumpang Keluarga / Saudara">Menumpang Keluarga / Saudara</option>
                      <option value="Rumah Dinas">Rumah Dinas</option>
                      <option value="Asrama / Kost">Asrama / Kost</option>
                    </select>
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">Kondisi Tempat Tinggal</label>
                    <select
                      value={tempatTinggal.kondisiTempatTinggal}
                      onChange={(e) => setTempatTinggal({ ...tempatTinggal, kondisiTempatTinggal: e.target.value })}
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium"
                    >
                      <option value="">-- Pilih Kondisi Tempat Tinggal --</option>
                      <option value="Sangat Layak">Sangat Layak</option>
                      <option value="Layak">Layak</option>
                      <option value="Cukup">Cukup</option>
                      <option value="Sederhana">Sederhana</option>
                    </select>
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">Kondisi Penerangan</label>
                    <select
                      value={tempatTinggal.kondisiPenerangan}
                      onChange={(e) => setTempatTinggal({ ...tempatTinggal, kondisiPenerangan: e.target.value })}
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium"
                    >
                      <option value="">-- Pilih Kondisi Penerangan --</option>
                      <option value="Listrik PLN > 2200 VA">Listrik PLN &gt; 2200 VA</option>
                      <option value="Listrik PLN 1300 VA">Listrik PLN 1300 VA</option>
                      <option value="Listrik PLN 900 VA">Listrik PLN 900 VA</option>
                      <option value="Listrik PLN 450 VA">Listrik PLN 450 VA</option>
                    </select>
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">Media Transportasi ke Sekolah</label>
                    <select
                      value={tempatTinggal.mediaTransportasi}
                      onChange={(e) => setTempatTinggal({ ...tempatTinggal, mediaTransportasi: e.target.value })}
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium"
                    >
                      <option value="">-- Pilih Media Transportasi --</option>
                      <option value="Sepeda Motor Pribadi">Sepeda Motor Pribadi</option>
                      <option value="Mobil Pribadi">Mobil Pribadi</option>
                      <option value="Angkutan Kota (Angkot)">Angkutan Kota (Angkot)</option>
                      <option value="Ojek Online / Taksi Online">Ojek Online / Taksi Online</option>
                      <option value="Jalan Kaki">Jalan Kaki</option>
                      <option value="Antar Jemput / Lainnya">Antar Jemput / Lainnya</option>
                    </select>
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">Jumlah Motor Pribadi di Rumah</label>
                    <input
                      type="number"
                      min={0}
                      value={tempatTinggal.jumlahMotor}
                      onChange={(e) => setTempatTinggal({ ...tempatTinggal, jumlahMotor: Number(e.target.value) })}
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium"
                    />
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">Jumlah Mobil Pribadi di Rumah</label>
                    <input
                      type="number"
                      min={0}
                      value={tempatTinggal.jumlahMobil}
                      onChange={(e) => setTempatTinggal({ ...tempatTinggal, jumlahMobil: Number(e.target.value) })}
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium"
                    />
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">Perkiraan Jarak ke Sekolah (km)</label>
                    <input
                      type="number"
                      step="0.1"
                      min={0}
                      value={tempatTinggal.jarakSekolahKm}
                      onChange={(e) => setTempatTinggal({ ...tempatTinggal, jarakSekolahKm: Number(e.target.value) })}
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium"
                    />
                  </div>

                  <div>
                    <label className="block font-bold text-slate-700 mb-1">Waktu Tempuh Perjalanan (Menit)</label>
                    <input
                      type="number"
                      min={1}
                      value={tempatTinggal.waktuTempuhMenit}
                      onChange={(e) => setTempatTinggal({ ...tempatTinggal, waktuTempuhMenit: Number(e.target.value) })}
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium"
                    />
                  </div>

                  <div className="md:col-span-2">
                    <label className="block font-bold text-slate-700 mb-1">Lingkungan Tempat Tinggal</label>
                    <textarea
                      rows={2}
                      value={tempatTinggal.lingkunganTempatTinggal}
                      onChange={(e) => setTempatTinggal({ ...tempatTinggal, lingkunganTempatTinggal: e.target.value })}
                      placeholder="Uraian singkat suasana lingkungan (dekat pasar/jalan raya/kompleks)"
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 font-medium"
                    />
                  </div>
                </div>

                {/* Fasilitas Belajar Anak */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px]">
                    Fasilitas Belajar Anak di Rumah
                  </h4>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Kondisi Ruang Belajar</label>
                      <select
                        value={tempatTinggal.kondisiRuangBelajar}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, kondisiRuangBelajar: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Kondisi Ruang Belajar --</option>
                        <option value="Ruang Belajar Khusus Sendiri">Ruang Belajar Khusus Sendiri</option>
                        <option value="Meja Belajar di Kamar Tidur">Meja Belajar di Kamar Tidur</option>
                        <option value="Ruang Keluarga Bersama">Ruang Keluarga Bersama</option>
                        <option value="Ruang Tamu">Ruang Tamu</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Kondisi Kamar Tidur</label>
                      <select
                        value={tempatTinggal.kondisiKamarTidur}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, kondisiKamarTidur: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Kondisi Kamar Tidur --</option>
                        <option value="Kamar Tidur Pribadi">Kamar Tidur Pribadi</option>
                        <option value="Bersama Saudara">Bersama Saudara</option>
                        <option value="Bersama Orang Tua">Bersama Orang Tua</option>
                      </select>
                    </div>

                    <div className="md:col-span-2">
                      <label className="block font-bold text-slate-700 mb-1">Perlengkapan Belajar Anak</label>
                      <textarea
                        rows={2}
                        value={tempatTinggal.perlengkapanBelajar}
                        onChange={(e) => setTempatTinggal({ ...tempatTinggal, perlengkapanBelajar: e.target.value })}
                        placeholder="Contoh: Laptop, Meja Belajar, Rak Buku, Koneksi Wi-Fi"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* ========================================================================= */}
            {/* 3. KELUARGA */}
            {/* ========================================================================= */}
            {activeTab === "keluarga" && (
              <div className="space-y-6 text-xs">
                {/* Profil Hubungan & Anak */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px] mb-3">
                    Profil Hubungan & Posisi Anak
                  </h4>
                  <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Penanggung Jawab Anak</label>
                      <select
                        value={keluarga.penanggungJawab}
                        onChange={(e) => setKeluarga({ ...keluarga, penanggungJawab: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Penanggung Jawab --</option>
                        <option value="Kedua Orang Tua">Kedua Orang Tua</option>
                        <option value="Ayah Kandung">Ayah Kandung</option>
                        <option value="Ibu Kandung">Ibu Kandung</option>
                        <option value="Wali / Saudara">Wali / Saudara</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Status Hubungan Anak</label>
                      <select
                        value={keluarga.statusHubunganAnak}
                        onChange={(e) => setKeluarga({ ...keluarga, statusHubunganAnak: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Hubungan Anak --</option>
                        <option value="Anak Kandung">Anak Kandung</option>
                        <option value="Anak Angkat">Anak Angkat</option>
                        <option value="Anak Tiri">Anak Tiri</option>
                        <option value="Anak Asuh">Anak Asuh</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Anak Ke-</label>
                      <input
                        type="number"
                        min={1}
                        value={keluarga.anakKe}
                        onChange={(e) => setKeluarga({ ...keluarga, anakKe: Number(e.target.value) })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Jumlah Saudara Kandung</label>
                      <input
                        type="number"
                        min={0}
                        value={keluarga.jumlahSaudaraKandung}
                        onChange={(e) => setKeluarga({ ...keluarga, jumlahSaudaraKandung: Number(e.target.value) })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>

                {/* Data Lengkap Ayah */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <div className="flex flex-wrap items-center justify-between gap-2 border-b border-slate-200 pb-2">
                    <h4 className="font-bold text-slate-900 text-sm flex items-center gap-1.5">
                      <User className="w-4 h-4 text-blue-600" />
                      Data Lengkap Ayah
                    </h4>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={handleCopyDomisiliToAyah}
                      leftIcon={<Copy className="w-3.5 h-3.5 text-blue-600" />}
                      className="bg-white border-blue-200 text-blue-700 hover:bg-blue-50 text-[11px]"
                    >
                      Samakan Alamat Domisili Siswa
                    </Button>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">
                        Nama Lengkap Ayah <span className="text-rose-500">*</span>
                      </label>
                      <input
                        type="text"
                        value={keluarga.namaAyah}
                        onChange={(e) => setKeluarga({ ...keluarga, namaAyah: e.target.value })}
                        placeholder="Nama lengkap beserta gelar jika ada"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Status Keberadaan Ayah</label>
                      <select
                        value={keluarga.statusAyah}
                        onChange={(e) => setKeluarga({ ...keluarga, statusAyah: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Status --</option>
                        <option value="Masih Hidup">Masih Hidup</option>
                        <option value="Meninggal Dunia">Meninggal Dunia</option>
                        <option value="Bercerai / Pisah">Bercerai / Pisah</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">NIK Ayah (16 Digit)</label>
                      <input
                        type="text"
                        maxLength={16}
                        value={keluarga.nikAyah}
                        onChange={(e) => setKeluarga({ ...keluarga, nikAyah: e.target.value })}
                        placeholder="16 digit NIK Ayah"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-mono font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Tempat / Tanggal Lahir Ayah</label>
                      <input
                        type="text"
                        value={keluarga.tempatLahirAyah}
                        onChange={(e) => setKeluarga({ ...keluarga, tempatLahirAyah: e.target.value })}
                        placeholder="Contoh: Bandung, 12 Agustus 1978"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Agama</label>
                      <select
                        value={keluarga.agamaAyah}
                        onChange={(e) => setKeluarga({ ...keluarga, agamaAyah: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Agama --</option>
                        <option value="Islam">Islam</option>
                        <option value="Kristen Protestan">Kristen Protestan</option>
                        <option value="Katolik">Katolik</option>
                        <option value="Hindu">Hindu</option>
                        <option value="Buddha">Buddha</option>
                        <option value="Khonghucu">Khonghucu</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Pendidikan Terakhir</label>
                      <select
                        value={keluarga.pendidikanAyah}
                        onChange={(e) => setKeluarga({ ...keluarga, pendidikanAyah: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Pendidikan --</option>
                        <option value="SD / Sederajat">SD / Sederajat</option>
                        <option value="SMP / Sederajat">SMP / Sederajat</option>
                        <option value="SMA / SMK / Sederajat">SMA / SMK / Sederajat</option>
                        <option value="D3">D3</option>
                        <option value="S1">S1</option>
                        <option value="S2">S2</option>
                        <option value="S3">S3</option>
                        <option value="Tidak Sekolah">Tidak Sekolah</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Pekerjaan Ayah</label>
                      <input
                        type="text"
                        value={keluarga.pekerjaanAyah}
                        onChange={(e) => setKeluarga({ ...keluarga, pekerjaanAyah: e.target.value })}
                        placeholder="Contoh: Karyawan BUMN / Wiraswasta"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Penghasilan Bulanan</label>
                      <select
                        value={keluarga.penghasilanAyah}
                        onChange={(e) => setKeluarga({ ...keluarga, penghasilanAyah: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Penghasilan --</option>
                        <option value="< Rp 2.000.000">&lt; Rp 2.000.000</option>
                        <option value="Rp 2.000.000 - Rp 5.000.000">Rp 2.000.000 - Rp 5.000.000</option>
                        <option value="Rp 5.000.000 - Rp 10.000.000">Rp 5.000.000 - Rp 10.000.000</option>
                        <option value="Rp 10.000.000 - Rp 20.000.000">Rp 10.000.000 - Rp 20.000.000</option>
                        <option value="> Rp 20.000.000">&gt; Rp 20.000.000</option>
                        <option value="Tidak Berpenghasilan">Tidak Berpenghasilan</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">No. HP / WhatsApp Ayah</label>
                      <input
                        type="text"
                        value={keluarga.hpAyah}
                        onChange={(e) => setKeluarga({ ...keluarga, hpAyah: e.target.value })}
                        placeholder="Contoh: 0812-3456-7890"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-mono font-medium"
                      />
                    </div>

                    <div className="md:col-span-3">
                      <label className="block font-bold text-slate-700 mb-1">Alamat Lengkap Ayah</label>
                      <textarea
                        rows={2}
                        value={keluarga.alamatAyah}
                        onChange={(e) => setKeluarga({ ...keluarga, alamatAyah: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>

                {/* Data Lengkap Ibu */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <div className="flex flex-wrap items-center justify-between gap-2 border-b border-slate-200 pb-2">
                    <h4 className="font-bold text-slate-900 text-sm flex items-center gap-1.5">
                      <User className="w-4 h-4 text-pink-600" />
                      Data Lengkap Ibu
                    </h4>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={handleCopyAyahToIbu}
                      leftIcon={<Copy className="w-3.5 h-3.5 text-blue-600" />}
                      className="bg-white border-blue-200 text-blue-700 hover:bg-blue-50 text-[11px]"
                    >
                      Samakan Alamat dengan Ayah
                    </Button>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">
                        Nama Lengkap Ibu <span className="text-rose-500">*</span>
                      </label>
                      <input
                        type="text"
                        value={keluarga.namaIbu}
                        onChange={(e) => setKeluarga({ ...keluarga, namaIbu: e.target.value })}
                        placeholder="Nama lengkap ibu kandung"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Status Keberadaan Ibu</label>
                      <select
                        value={keluarga.statusIbu}
                        onChange={(e) => setKeluarga({ ...keluarga, statusIbu: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Status --</option>
                        <option value="Masih Hidup">Masih Hidup</option>
                        <option value="Meninggal Dunia">Meninggal Dunia</option>
                        <option value="Bercerai / Pisah">Bercerai / Pisah</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">NIK Ibu (16 Digit)</label>
                      <input
                        type="text"
                        maxLength={16}
                        value={keluarga.nikIbu}
                        onChange={(e) => setKeluarga({ ...keluarga, nikIbu: e.target.value })}
                        placeholder="16 digit NIK Ibu"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-mono font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Tempat / Tanggal Lahir Ibu</label>
                      <input
                        type="text"
                        value={keluarga.tempatLahirIbu}
                        onChange={(e) => setKeluarga({ ...keluarga, tempatLahirIbu: e.target.value })}
                        placeholder="Contoh: Cimahi, 20 Mei 1982"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Agama</label>
                      <select
                        value={keluarga.agamaIbu}
                        onChange={(e) => setKeluarga({ ...keluarga, agamaIbu: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Agama --</option>
                        <option value="Islam">Islam</option>
                        <option value="Kristen Protestan">Kristen Protestan</option>
                        <option value="Katolik">Katolik</option>
                        <option value="Hindu">Hindu</option>
                        <option value="Buddha">Buddha</option>
                        <option value="Khonghucu">Khonghucu</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Pendidikan Terakhir</label>
                      <select
                        value={keluarga.pendidikanIbu}
                        onChange={(e) => setKeluarga({ ...keluarga, pendidikanIbu: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Pendidikan --</option>
                        <option value="SD / Sederajat">SD / Sederajat</option>
                        <option value="SMP / Sederajat">SMP / Sederajat</option>
                        <option value="SMA / SMK / Sederajat">SMA / SMK / Sederajat</option>
                        <option value="D3">D3</option>
                        <option value="S1">S1</option>
                        <option value="S2">S2</option>
                        <option value="S3">S3</option>
                        <option value="Tidak Sekolah">Tidak Sekolah</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Pekerjaan Ibu</label>
                      <input
                        type="text"
                        value={keluarga.pekerjaanIbu}
                        onChange={(e) => setKeluarga({ ...keluarga, pekerjaanIbu: e.target.value })}
                        placeholder="Contoh: Ibu Rumah Tangga / Guru / PNS"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Penghasilan Bulanan</label>
                      <select
                        value={keluarga.penghasilanIbu}
                        onChange={(e) => setKeluarga({ ...keluarga, penghasilanIbu: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Penghasilan --</option>
                        <option value="Tidak Berpenghasilan / IRT">Tidak Berpenghasilan / IRT</option>
                        <option value="< Rp 2.000.000">&lt; Rp 2.000.000</option>
                        <option value="Rp 2.000.000 - Rp 5.000.000">Rp 2.000.000 - Rp 5.000.000</option>
                        <option value="Rp 5.000.000 - Rp 10.000.000">Rp 5.000.000 - Rp 10.000.000</option>
                        <option value="> Rp 10.000.000">&gt; Rp 10.000.000</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">No. HP / WhatsApp Ibu</label>
                      <input
                        type="text"
                        value={keluarga.hpIbu}
                        onChange={(e) => setKeluarga({ ...keluarga, hpIbu: e.target.value })}
                        placeholder="Contoh: 0813-9876-5432"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-mono font-medium"
                      />
                    </div>

                    <div className="md:col-span-3">
                      <label className="block font-bold text-slate-700 mb-1">Alamat Lengkap Ibu</label>
                      <textarea
                        rows={2}
                        value={keluarga.alamatIbu}
                        onChange={(e) => setKeluarga({ ...keluarga, alamatIbu: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>

                {/* Data Orang Tua Wali Tambahan (Opsional) */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <div className="flex items-center justify-between">
                    <div>
                      <h4 className="font-bold text-slate-800">Orang Tua Wali Tambahan (Opsional)</h4>
                      <p className="text-slate-500 text-[11px]">Diisi jika siswa tinggal atau diasuh oleh wali resmi.</p>
                    </div>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={() => setKeluarga({ ...keluarga, hasWaliTambahan: !keluarga.hasWaliTambahan })}
                      leftIcon={<Plus className="w-3.5 h-3.5" />}
                    >
                      {keluarga.hasWaliTambahan ? "Tutup Data Wali" : "+ Tambah Wali Tambahan"}
                    </Button>
                  </div>

                  {keluarga.hasWaliTambahan && (
                    <div className="pt-3 border-t border-slate-200 grid grid-cols-1 md:grid-cols-3 gap-3">
                      <div>
                        <label className="block font-bold text-slate-700 mb-1">Nama Lengkap Wali</label>
                        <input
                          type="text"
                          value={keluarga.namaWali}
                          onChange={(e) => setKeluarga({ ...keluarga, namaWali: e.target.value })}
                          className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                        />
                      </div>

                      <div>
                        <label className="block font-bold text-slate-700 mb-1">Hubungan dengan Siswa</label>
                        <input
                          type="text"
                          value={keluarga.hubunganWali}
                          onChange={(e) => setKeluarga({ ...keluarga, hubunganWali: e.target.value })}
                          placeholder="Paman / Kakek / Saudara Kandung"
                          className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                        />
                      </div>

                      <div>
                        <label className="block font-bold text-slate-700 mb-1">No. HP / WhatsApp Wali</label>
                        <input
                          type="text"
                          value={keluarga.hpWali}
                          onChange={(e) => setKeluarga({ ...keluarga, hpWali: e.target.value })}
                          className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                        />
                      </div>

                      <div className="md:col-span-3">
                        <label className="block font-bold text-slate-700 mb-1">Alamat Lengkap Wali</label>
                        <textarea
                          rows={2}
                          value={keluarga.alamatWali}
                          onChange={(e) => setKeluarga({ ...keluarga, alamatWali: e.target.value })}
                          className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                        />
                      </div>
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* ========================================================================= */}
            {/* 4. RIWAYAT PENDIDIKAN */}
            {/* ========================================================================= */}
            {activeTab === "pendidikan" && (
              <div className="space-y-6 text-xs">
                {/* Taman Kanak-Kanak (TK) */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px]">
                    1. Taman Kanak-Kanak (TK / RA)
                  </h4>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div className="md:col-span-2">
                      <label className="block font-bold text-slate-700 mb-1">Nama TK / RA</label>
                      <input
                        type="text"
                        value={pendidikan.tk.nama}
                        onChange={(e) =>
                          setPendidikan({ ...pendidikan, tk: { ...pendidikan.tk, nama: e.target.value } })
                        }
                        placeholder="Contoh: TK BPI Bandung"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Lama Belajar</label>
                      <select
                        value={pendidikan.tk.lamaBelajar}
                        onChange={(e) =>
                          setPendidikan({ ...pendidikan, tk: { ...pendidikan.tk, lamaBelajar: e.target.value } })
                        }
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Lama Belajar --</option>
                        <option value="1 Tahun">1 Tahun</option>
                        <option value="2 Tahun">2 Tahun</option>
                        <option value="Tidak TK">Tidak TK / Langsung SD</option>
                      </select>
                    </div>
                  </div>
                </div>

                {/* Sekolah Dasar (SD) */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px]">
                    2. Sekolah Dasar (SD / MI)
                  </h4>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div className="md:col-span-2">
                      <label className="block font-bold text-slate-700 mb-1">
                        Nama SD / MI <span className="text-rose-500">*</span>
                      </label>
                      <input
                        type="text"
                        value={pendidikan.sd.nama}
                        onChange={(e) =>
                          setPendidikan({ ...pendidikan, sd: { ...pendidikan.sd, nama: e.target.value } })
                        }
                        placeholder="Contoh: SD BPI 1 Bandung"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Lama Belajar</label>
                      <select
                        value={pendidikan.sd.lamaBelajar}
                        onChange={(e) =>
                          setPendidikan({ ...pendidikan, sd: { ...pendidikan.sd, lamaBelajar: e.target.value } })
                        }
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Lama Belajar --</option>
                        <option value="6 Tahun">6 Tahun</option>
                        <option value="> 6 Tahun">&gt; 6 Tahun</option>
                      </select>
                    </div>
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Pernah Tinggal Kelas?</label>
                      <select
                        value={pendidikan.sd.tinggalKelas}
                        onChange={(e) =>
                          setPendidikan({ ...pendidikan, sd: { ...pendidikan.sd, tinggalKelas: e.target.value } })
                        }
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih --</option>
                        <option value="Tidak Pernah">Tidak Pernah</option>
                        <option value="Pernah 1 Kali">Pernah 1 Kali</option>
                        <option value="Pernah > 1 Kali">Pernah &gt; 1 Kali</option>
                      </select>
                    </div>
                    <div className="md:col-span-2">
                      <label className="block font-bold text-slate-700 mb-1">Alamat Sekolah SD</label>
                      <input
                        type="text"
                        value={pendidikan.sd.alamat}
                        onChange={(e) =>
                          setPendidikan({ ...pendidikan, sd: { ...pendidikan.sd, alamat: e.target.value } })
                        }
                        placeholder="Alamat jalan atau kota SD"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>

                  {/* Prestasi SD */}
                  <div className="pt-2 border-t border-slate-200">
                    <div className="flex items-center justify-between mb-2">
                      <span className="font-bold text-slate-700 text-[11px]">Prestasi saat SD (Jika ada)</span>
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          const newP = {
                            id: Date.now().toString(),
                            namaLomba: "",
                            tingkat: "Kota",
                            juara: "Juara 1",
                            tahun: "2020",
                          };
                          setPendidikan({
                            ...pendidikan,
                            sd: { ...pendidikan.sd, prestasi: [...pendidikan.sd.prestasi, newP] },
                          });
                        }}
                        leftIcon={<Plus className="w-3.5 h-3.5" />}
                        className="text-[10px] py-1"
                      >
                        + Tambah Prestasi SD
                      </Button>
                    </div>

                    {pendidikan.sd.prestasi.map((p, idx) => (
                      <div key={p.id} className="flex items-center gap-2 mb-2 bg-white p-2 rounded-lg border border-slate-200">
                        <input
                          type="text"
                          placeholder="Nama Lomba / Kegiatan"
                          value={p.namaLomba}
                          onChange={(e) => {
                            const updated = [...pendidikan.sd.prestasi];
                            updated[idx].namaLomba = e.target.value;
                            setPendidikan({ ...pendidikan, sd: { ...pendidikan.sd, prestasi: updated } });
                          }}
                          className="flex-1 px-2.5 py-1.5 border border-slate-200 rounded text-xs"
                        />
                        <select
                          value={p.tingkat}
                          onChange={(e) => {
                            const updated = [...pendidikan.sd.prestasi];
                            updated[idx].tingkat = e.target.value;
                            setPendidikan({ ...pendidikan, sd: { ...pendidikan.sd, prestasi: updated } });
                          }}
                          className="px-2 py-1.5 border border-slate-200 rounded text-xs"
                        >
                          <option value="Kecamatan">Kecamatan</option>
                          <option value="Kota">Kota</option>
                          <option value="Provinsi">Provinsi</option>
                          <option value="Nasional">Nasional</option>
                        </select>
                        <input
                          type="text"
                          placeholder="Juara / Capaian"
                          value={p.juara}
                          onChange={(e) => {
                            const updated = [...pendidikan.sd.prestasi];
                            updated[idx].juara = e.target.value;
                            setPendidikan({ ...pendidikan, sd: { ...pendidikan.sd, prestasi: updated } });
                          }}
                          className="w-24 px-2 py-1.5 border border-slate-200 rounded text-xs"
                        />
                        <button
                          type="button"
                          onClick={() => {
                            const updated = pendidikan.sd.prestasi.filter((item) => item.id !== p.id);
                            setPendidikan({ ...pendidikan, sd: { ...pendidikan.sd, prestasi: updated } });
                          }}
                          className="text-rose-500 hover:text-rose-700 p-1"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Sekolah Menengah Pertama (SMP) */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px]">
                    3. Sekolah Menengah Pertama (SMP / MTs)
                  </h4>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div className="md:col-span-2">
                      <label className="block font-bold text-slate-700 mb-1">
                        Nama SMP / MTs <span className="text-rose-500">*</span>
                      </label>
                      <input
                        type="text"
                        value={pendidikan.smp.nama || identitas.asalSmp}
                        onChange={(e) =>
                          setPendidikan({ ...pendidikan, smp: { ...pendidikan.smp, nama: e.target.value } })
                        }
                        placeholder="Contoh: SMP Negeri 2 Bandung"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Lama Belajar</label>
                      <select
                        value={pendidikan.smp.lamaBelajar}
                        onChange={(e) =>
                          setPendidikan({ ...pendidikan, smp: { ...pendidikan.smp, lamaBelajar: e.target.value } })
                        }
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Lama Belajar --</option>
                        <option value="3 Tahun">3 Tahun</option>
                        <option value="> 3 Tahun">&gt; 3 Tahun</option>
                      </select>
                    </div>
                  </div>

                  {/* Prestasi SMP */}
                  <div className="pt-2 border-t border-slate-200">
                    <div className="flex items-center justify-between mb-2">
                      <span className="font-bold text-slate-700 text-[11px]">Prestasi saat SMP</span>
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          const newP = {
                            id: Date.now().toString(),
                            namaLomba: "",
                            tingkat: "Kota",
                            juara: "Juara 1",
                            tahun: "2023",
                          };
                          setPendidikan({
                            ...pendidikan,
                            smp: { ...pendidikan.smp, prestasi: [...pendidikan.smp.prestasi, newP] },
                          });
                        }}
                        leftIcon={<Plus className="w-3.5 h-3.5" />}
                        className="text-[10px] py-1"
                      >
                        + Tambah Prestasi SMP
                      </Button>
                    </div>

                    {pendidikan.smp.prestasi.map((p, idx) => (
                      <div key={p.id} className="flex items-center gap-2 mb-2 bg-white p-2 rounded-lg border border-slate-200">
                        <input
                          type="text"
                          placeholder="Nama Lomba / Kejuaraan"
                          value={p.namaLomba}
                          onChange={(e) => {
                            const updated = [...pendidikan.smp.prestasi];
                            updated[idx].namaLomba = e.target.value;
                            setPendidikan({ ...pendidikan, smp: { ...pendidikan.smp, prestasi: updated } });
                          }}
                          className="flex-1 px-2.5 py-1.5 border border-slate-200 rounded text-xs"
                        />
                        <select
                          value={p.tingkat}
                          onChange={(e) => {
                            const updated = [...pendidikan.smp.prestasi];
                            updated[idx].tingkat = e.target.value;
                            setPendidikan({ ...pendidikan, smp: { ...pendidikan.smp, prestasi: updated } });
                          }}
                          className="px-2 py-1.5 border border-slate-200 rounded text-xs"
                        >
                          <option value="Kota">Kota</option>
                          <option value="Provinsi">Provinsi</option>
                          <option value="Nasional">Nasional</option>
                          <option value="Internasional">Internasional</option>
                        </select>
                        <input
                          type="text"
                          placeholder="Juara"
                          value={p.juara}
                          onChange={(e) => {
                            const updated = [...pendidikan.smp.prestasi];
                            updated[idx].juara = e.target.value;
                            setPendidikan({ ...pendidikan, smp: { ...pendidikan.smp, prestasi: updated } });
                          }}
                          className="w-24 px-2 py-1.5 border border-slate-200 rounded text-xs"
                        />
                        <button
                          type="button"
                          onClick={() => {
                            const updated = pendidikan.smp.prestasi.filter((item) => item.id !== p.id);
                            setPendidikan({ ...pendidikan, smp: { ...pendidikan.smp, prestasi: updated } });
                          }}
                          className="text-rose-500 hover:text-rose-700 p-1"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Organisasi & Kursus */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {/* Organisasi */}
                  <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="font-bold text-slate-800">Pengalaman Organisasi</span>
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          const newO = {
                            id: Date.now().toString(),
                            namaOrganisasi: "OSIS SMP",
                            jabatan: "Anggota",
                            periode: "2022-2023",
                            deskripsi: "",
                          };
                          setPendidikan({ ...pendidikan, organisasi: [...pendidikan.organisasi, newO] });
                        }}
                        className="text-[10px] py-1"
                      >
                        + Tambah Organisasi
                      </Button>
                    </div>

                    {pendidikan.organisasi.map((org, i) => (
                      <div key={org.id} className="p-2 bg-white rounded-lg border border-slate-200 space-y-1.5">
                        <div className="flex items-center gap-2">
                          <input
                            type="text"
                            placeholder="Nama Organisasi (misal: OSIS, Pramuka)"
                            value={org.namaOrganisasi}
                            onChange={(e) => {
                              const list = [...pendidikan.organisasi];
                              list[i].namaOrganisasi = e.target.value;
                              setPendidikan({ ...pendidikan, organisasi: list });
                            }}
                            className="flex-1 px-2 py-1 border border-slate-200 rounded text-xs font-semibold"
                          />
                          <input
                            type="text"
                            placeholder="Jabatan"
                            value={org.jabatan}
                            onChange={(e) => {
                              const list = [...pendidikan.organisasi];
                              list[i].jabatan = e.target.value;
                              setPendidikan({ ...pendidikan, organisasi: list });
                            }}
                            className="w-24 px-2 py-1 border border-slate-200 rounded text-xs"
                          />
                          <button
                            type="button"
                            onClick={() => {
                              setPendidikan({
                                ...pendidikan,
                                organisasi: pendidikan.organisasi.filter((item) => item.id !== org.id),
                              });
                            }}
                            className="text-rose-500 p-1"
                          >
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Kursus Non-Formal */}
                  <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="font-bold text-slate-800">Pendidikan Non-Formal / Kursus</span>
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          const newK = {
                            id: Date.now().toString(),
                            namaKursus: "Bahasa Inggris",
                            bidang: "Bahasa",
                            lembaga: "LIA",
                            durasi: "6 Bulan",
                            tahun: "2023",
                          };
                          setPendidikan({ ...pendidikan, kursus: [...pendidikan.kursus, newK] });
                        }}
                        className="text-[10px] py-1"
                      >
                        + Tambah Data Kursus
                      </Button>
                    </div>

                    {pendidikan.kursus.map((k, i) => (
                      <div key={k.id} className="p-2 bg-white rounded-lg border border-slate-200 space-y-1.5">
                        <div className="flex items-center gap-2">
                          <input
                            type="text"
                            placeholder="Nama Kursus / Pelatihan"
                            value={k.namaKursus}
                            onChange={(e) => {
                              const list = [...pendidikan.kursus];
                              list[i].namaKursus = e.target.value;
                              setPendidikan({ ...pendidikan, kursus: list });
                            }}
                            className="flex-1 px-2 py-1 border border-slate-200 rounded text-xs font-semibold"
                          />
                          <input
                            type="text"
                            placeholder="Lembaga"
                            value={k.lembaga}
                            onChange={(e) => {
                              const list = [...pendidikan.kursus];
                              list[i].lembaga = e.target.value;
                              setPendidikan({ ...pendidikan, kursus: list });
                            }}
                            className="w-24 px-2 py-1 border border-slate-200 rounded text-xs"
                          />
                          <button
                            type="button"
                            onClick={() => {
                              setPendidikan({
                                ...pendidikan,
                                kursus: pendidikan.kursus.filter((item) => item.id !== k.id),
                              });
                            }}
                            className="text-rose-500 p-1"
                          >
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {/* ========================================================================= */}
            {/* 5. KETERANGAN KESEHATAN */}
            {/* ========================================================================= */}
            {activeTab === "kesehatan" && (
              <div className="space-y-6 text-xs">
                {/* Profil Fisik */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px] flex items-center gap-1.5">
                    <Activity className="w-4 h-4 text-emerald-600" />
                    Profil Fisik & Ciri Jasmani
                  </h4>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Berat Badan (kg)</label>
                      <input
                        type="number"
                        min={30}
                        max={150}
                        value={kesehatan.beratBadan}
                        onChange={(e) => setKesehatan({ ...kesehatan, beratBadan: Number(e.target.value) })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Tinggi Badan (cm)</label>
                      <input
                        type="number"
                        min={100}
                        max={220}
                        value={kesehatan.tinggiBadan}
                        onChange={(e) => setKesehatan({ ...kesehatan, tinggiBadan: Number(e.target.value) })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Golongan Darah</label>
                      <select
                        value={kesehatan.golonganDarah}
                        onChange={(e) => setKesehatan({ ...kesehatan, golonganDarah: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Golongan Darah --</option>
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="AB">AB</option>
                        <option value="O">O</option>
                        <option value="Tidak Tahu">Tidak Tahu</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Warna Kulit</label>
                      <input
                        type="text"
                        value={kesehatan.warnaKulit}
                        onChange={(e) => setKesehatan({ ...kesehatan, warnaKulit: e.target.value })}
                        placeholder="Contoh: Sawo Matang, Kuning Langsat"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Bentuk Wajah</label>
                      <input
                        type="text"
                        value={kesehatan.bentukWajah}
                        onChange={(e) => setKesehatan({ ...kesehatan, bentukWajah: e.target.value })}
                        placeholder="Contoh: Oval, Bulat, Kotak"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Jenis Rambut</label>
                      <input
                        type="text"
                        value={kesehatan.jenisRambut}
                        onChange={(e) => setKesehatan({ ...kesehatan, jenisRambut: e.target.value })}
                        placeholder="Contoh: Lurus, Gelombang, Ikal"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>

                {/* Kekurangan Fisik & Riwayat Penyakit */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px]">
                    Kekurangan & Riwayat Penyakit
                  </h4>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Keadaan Penglihatan (Mata)</label>
                      <select
                        value={kesehatan.keadaanMata}
                        onChange={(e) => setKesehatan({ ...kesehatan, keadaanMata: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Keadaan Mata --</option>
                        <option value="Normal">Normal</option>
                        <option value="Minus (Miopi)">Minus (Miopi)</option>
                        <option value="Plus (Hipermetropi)">Plus (Hipermetropi)</option>
                        <option value="Silinder (Astigmatisme)">Silinder (Astigmatisme)</option>
                        <option value="Buta Warna Parsial">Buta Warna Parsial</option>
                        <option value="Buta Warna Total">Buta Warna Total</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Alat Bantu Penglihatan</label>
                      <select
                        value={kesehatan.alatBantuMata}
                        onChange={(e) => setKesehatan({ ...kesehatan, alatBantuMata: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih --</option>
                        <option value="Tanpa Kacamata">Tanpa Kacamata</option>
                        <option value="Menggunakan Kacamata">Menggunakan Kacamata</option>
                        <option value="Menggunakan Lensa Kontak (Softlens)">Menggunakan Lensa Kontak</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Keadaan Pendengaran (Telinga)</label>
                      <select
                        value={kesehatan.keadaanTelinga}
                        onChange={(e) => setKesehatan({ ...kesehatan, keadaanTelinga: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Keadaan Telinga --</option>
                        <option value="Normal">Normal</option>
                        <option value="Kurang Jelas / Pendengaran Menurun">Kurang Jelas / Pendengaran Menurun</option>
                        <option value="Gangguan / Infeksi Telinga">Gangguan / Infeksi Telinga</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Alat Bantu Pendengaran</label>
                      <select
                        value={kesehatan.alatBantuTelinga}
                        onChange={(e) => setKesehatan({ ...kesehatan, alatBantuTelinga: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih --</option>
                        <option value="Tidak Menggunakan">Tidak Menggunakan</option>
                        <option value="Menggunakan Alat Bantu Dengar">Menggunakan Alat Bantu Dengar</option>
                      </select>
                    </div>

                    <div className="md:col-span-2">
                      <label className="block font-bold text-slate-700 mb-1">Penyakit yang Pernah Diderita</label>
                      <textarea
                        rows={2}
                        value={kesehatan.penyakitPernahDiderita}
                        onChange={(e) => setKesehatan({ ...kesehatan, penyakitPernahDiderita: e.target.value })}
                        placeholder="Contoh: Tipes saat kelas 7 (2022), Demam Berdarah (2020), Patah Tulang, dll."
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div className="md:col-span-2">
                      <label className="block font-bold text-slate-700 mb-1">Penyakit yang Sering Kambuh</label>
                      <textarea
                        rows={2}
                        value={kesehatan.penyakitSeringKambuh}
                        onChange={(e) => setKesehatan({ ...kesehatan, penyakitSeringKambuh: e.target.value })}
                        placeholder="Contoh: Asma jika cuaca dingin, Maag kronis, Migrain, atau tulis '-' jika tidak ada"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div className="md:col-span-2">
                      <label className="block font-bold text-slate-700 mb-1">Alergi Obat / Makanan atau Keluhan Lainnya</label>
                      <textarea
                        rows={2}
                        value={kesehatan.alergiObatMakanan}
                        onChange={(e) => setKesehatan({ ...kesehatan, alergiObatMakanan: e.target.value })}
                        placeholder="Contoh: Alergi udang/seafood, alergi amoksisilin, atau tulis 'Tidak ada'"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* ========================================================================= */}
            {/* 6. HOBI DAN KEGEMARAN */}
            {/* ========================================================================= */}
            {activeTab === "hobi" && (
              <div className="space-y-6 text-xs">
                {/* Olahraga */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px]">
                    1. Bidang Olahraga
                  </h4>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Hobi Olahraga</label>
                      <input
                        type="text"
                        value={hobi.hobiOlahraga}
                        onChange={(e) => setHobi({ ...hobi, hobiOlahraga: e.target.value })}
                        placeholder="Futsal, Basket, Renang"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Perlengkapan Olahraga Dimiliki</label>
                      <input
                        type="text"
                        value={hobi.perlengkapanOlahraga}
                        onChange={(e) => setHobi({ ...hobi, perlengkapanOlahraga: e.target.value })}
                        placeholder="Sepatu futsal, Bola basket"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Bakat / Kelebihan Olahraga</label>
                      <input
                        type="text"
                        value={hobi.bakatOlahraga}
                        onChange={(e) => setHobi({ ...hobi, bakatOlahraga: e.target.value })}
                        placeholder="Kiper andal, lari cepat"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>

                {/* Seni */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px]">
                    2. Bidang Kesenian
                  </h4>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Hobi Seni</label>
                      <input
                        type="text"
                        value={hobi.hobiSeni}
                        onChange={(e) => setHobi({ ...hobi, hobiSeni: e.target.value })}
                        placeholder="Menggambar digital, Gitar, Tari"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Perlengkapan Seni Dimiliki</label>
                      <input
                        type="text"
                        value={hobi.perlengkapanSeni}
                        onChange={(e) => setHobi({ ...hobi, perlengkapanSeni: e.target.value })}
                        placeholder="Gitar akustik, Drawing tablet"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Bakat / Kelebihan Seni</label>
                      <input
                        type="text"
                        value={hobi.bakatSeni}
                        onChange={(e) => setHobi({ ...hobi, bakatSeni: e.target.value })}
                        placeholder="Ilustrasi, Desain layout, Vokal"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>

                {/* Lainnya & Waktu Senggang */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px]">
                    3. Bidang Lainnya & Waktu Senggang
                  </h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Hobi Lainnya</label>
                      <input
                        type="text"
                        value={hobi.hobiLainnya}
                        onChange={(e) => setHobi({ ...hobi, hobiLainnya: e.target.value })}
                        placeholder="Fotografi, Coding, Memasak"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Mata Pelajaran Favorit</label>
                      <input
                        type="text"
                        value={hobi.mapelFavorit}
                        onChange={(e) => setHobi({ ...hobi, mapelFavorit: e.target.value })}
                        placeholder="Matematika, Sosiologi, Biologi"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                    <div className="md:col-span-2">
                      <label className="block font-bold text-slate-700 mb-1">Kegiatan di Waktu Senggang</label>
                      <textarea
                        rows={2}
                        value={hobi.kegiatanWaktuSenggang}
                        onChange={(e) => setHobi({ ...hobi, kegiatanWaktuSenggang: e.target.value })}
                        placeholder="Ceritakan aktivitas favorit saat hari libur atau waktu luang..."
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* ========================================================================= */}
            {/* 7. KEGIATAN BELAJAR */}
            {/* ========================================================================= */}
            {activeTab === "kegiatan_belajar" && (
              <div className="space-y-6 text-xs">
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px]">
                    Kelompok & Pola Belajar
                  </h4>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Kelompok Belajar</label>
                      <select
                        value={kegiatanBelajar.kelompokBelajar}
                        onChange={(e) => setKegiatanBelajar({ ...kegiatanBelajar, kelompokBelajar: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih --</option>
                        <option value="Sering Mengikuti">Sering Mengikuti</option>
                        <option value="Kadang-kadang">Kadang-kadang</option>
                        <option value="Belajar Sendiri / Mandiri">Belajar Sendiri / Mandiri</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Detail Kelompok Belajar</label>
                      <input
                        type="text"
                        value={kegiatanBelajar.detailKelompok}
                        onChange={(e) => setKegiatanBelajar({ ...kegiatanBelajar, detailKelompok: e.target.value })}
                        placeholder="Contoh: Belajar bareng teman saat mau PAS"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Lembaga Bimbingan Belajar (Bimbel)</label>
                      <input
                        type="text"
                        value={kegiatanBelajar.lembagaBimbel}
                        onChange={(e) => setKegiatanBelajar({ ...kegiatanBelajar, lembagaBimbel: e.target.value })}
                        placeholder="Ganesha Operation, Ruangguru, atau 'Tidak Bimbel'"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Jadwal Belajar Di Rumah</label>
                      <select
                        value={kegiatanBelajar.jadwalBelajarRumah}
                        onChange={(e) => setKegiatanBelajar({ ...kegiatanBelajar, jadwalBelajarRumah: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih --</option>
                        <option value="Teratur Setiap Hari">Teratur Setiap Hari</option>
                        <option value="Kadang-kadang">Kadang-kadang</option>
                        <option value="Hanya Saat Mau Ujian">Hanya Saat Mau Ujian</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Jam Belajar Rutin</label>
                      <input
                        type="text"
                        value={kegiatanBelajar.jamBelajar}
                        onChange={(e) => setKegiatanBelajar({ ...kegiatanBelajar, jamBelajar: e.target.value })}
                        placeholder="Contoh: 19.30 - 21.30 WIB (2 Jam)"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Kegiatan Ketika Libur</label>
                      <input
                        type="text"
                        value={kegiatanBelajar.kegiatanLibur}
                        onChange={(e) => setKegiatanBelajar({ ...kegiatanBelajar, kegiatanLibur: e.target.value })}
                        placeholder="Berkumpul keluarga, olahraga"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div className="md:col-span-3">
                      <label className="block font-bold text-slate-700 mb-1">Kebiasaan Belajar di Rumah</label>
                      <textarea
                        rows={2}
                        value={kegiatanBelajar.kebiasaanBelajar}
                        onChange={(e) => setKegiatanBelajar({ ...kegiatanBelajar, kebiasaanBelajar: e.target.value })}
                        placeholder="Uraian kebiasaan belajar (sambil mendengarkan musik, membuat rangkuman, dll.)"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>

                {/* Dokumen Psikotes */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px] flex items-center gap-1.5">
                    <FileText className="w-4 h-4 text-purple-600" />
                    Dokumen Hasil Psikotes (Scan PDF / JPG Maksimal 2 MB)
                  </h4>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div className="p-3 bg-white rounded-lg border border-slate-200 space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="font-bold text-slate-700">Hasil Psikotes SMP</span>
                        {kegiatanBelajar.scanPsikotesSmpUrl && <CheckCircle2 className="w-4 h-4 text-emerald-600" />}
                      </div>
                      <div className="flex items-center gap-2">
                        <label className="cursor-pointer px-2.5 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-xs font-semibold">
                          Upload Psikotes SMP
                          <input
                            type="file"
                            accept="image/*, application/pdf"
                            className="hidden"
                            onChange={(e) =>
                              handleFileUpload(e, (url) => setKegiatanBelajar((p) => ({ ...p, scanPsikotesSmpUrl: url })), "Psikotes SMP")
                            }
                          />
                        </label>
                        {kegiatanBelajar.scanPsikotesSmpUrl && (
                          <button
                            type="button"
                            onClick={() =>
                              setPreviewDoc({
                                title: "Hasil Psikotes SMP",
                                url: kegiatanBelajar.scanPsikotesSmpUrl,
                                type: "doc",
                              })
                            }
                            className="text-blue-600 hover:underline font-semibold flex items-center gap-1"
                          >
                            <Eye className="w-3.5 h-3.5" /> Lihat Berkas
                          </button>
                        )}
                      </div>
                    </div>

                    <div className="p-3 bg-white rounded-lg border border-slate-200 space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="font-bold text-slate-700">Hasil Psikotes SMA (Jika Ada)</span>
                        {kegiatanBelajar.scanPsikotesSmaUrl && <CheckCircle2 className="w-4 h-4 text-emerald-600" />}
                      </div>
                      <div className="flex items-center gap-2">
                        <label className="cursor-pointer px-2.5 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-xs font-semibold">
                          Upload Psikotes SMA
                          <input
                            type="file"
                            accept="image/*, application/pdf"
                            className="hidden"
                            onChange={(e) =>
                              handleFileUpload(e, (url) => setKegiatanBelajar((p) => ({ ...p, scanPsikotesSmaUrl: url })), "Psikotes SMA")
                            }
                          />
                        </label>
                        {kegiatanBelajar.scanPsikotesSmaUrl && (
                          <button
                            type="button"
                            onClick={() =>
                              setPreviewDoc({
                                title: "Hasil Psikotes SMA",
                                url: kegiatanBelajar.scanPsikotesSmaUrl,
                                type: "doc",
                              })
                            }
                            className="text-blue-600 hover:underline font-semibold flex items-center gap-1"
                          >
                            <Eye className="w-3.5 h-3.5" /> Lihat Berkas
                          </button>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* ========================================================================= */}
            {/* 8. RENCANA PEMINATAN & CITA-CITA */}
            {/* ========================================================================= */}
            {activeTab === "peminatan" && (
              <div className="space-y-6 text-xs">
                {/* Peminatan SMA */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px] flex items-center gap-1.5">
                    <Compass className="w-4 h-4 text-blue-600" />
                    Peminatan SMA & Rekomendasi
                  </h4>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Prodi Diminati Saat Masuk</label>
                      <select
                        value={peminatan.prodiDiminatiMasuk}
                        onChange={(e) => setPeminatan({ ...peminatan, prodiDiminatiMasuk: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Peminatan --</option>
                        <option value="Kurikulum Merdeka Terbuka">Kurikulum Merdeka Terbuka</option>
                        <option value="MIPA (Matematika & IPA)">MIPA (Matematika &amp; IPA)</option>
                        <option value="IPS (Ilmu Pengetahuan Sosial)">IPS (Ilmu Pengetahuan Sosial)</option>
                        <option value="Bahasa & Budaya">Bahasa &amp; Budaya</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Rekomendasi Guru BK SMP</label>
                      <select
                        value={peminatan.rekomendasiBkSmp}
                        onChange={(e) => setPeminatan({ ...peminatan, rekomendasiBkSmp: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Rekomendasi BK --</option>
                        <option value="MIPA">MIPA</option>
                        <option value="IPS">IPS</option>
                        <option value="Bahasa">Bahasa</option>
                        <option value="Bebas Peminatan">Bebas Peminatan</option>
                      </select>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Rekomendasi Psikotes SMP</label>
                      <select
                        value={peminatan.rekomendasiPsikotesSmp}
                        onChange={(e) => setPeminatan({ ...peminatan, rekomendasiPsikotesSmp: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      >
                        <option value="">-- Pilih Rekomendasi Psikotes --</option>
                        <option value="MIPA">MIPA</option>
                        <option value="IPS">IPS</option>
                        <option value="Kejuruan / Vokasi">Kejuruan / Vokasi</option>
                      </select>
                    </div>
                  </div>
                </div>

                {/* Peminatan Perguruan Tinggi */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px] flex items-center gap-1.5">
                    <GraduationCap className="w-4 h-4 text-indigo-600" />
                    Target Peminatan Perguruan Tinggi
                  </h4>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Perguruan Tinggi Pilihan 1 & Jurusan</label>
                      <textarea
                        rows={2}
                        value={peminatan.ptn1}
                        onChange={(e) => setPeminatan({ ...peminatan, ptn1: e.target.value })}
                        placeholder="Contoh: ITB - STEI (Teknik Informatika)"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Perguruan Tinggi Pilihan 2 & Jurusan</label>
                      <textarea
                        rows={2}
                        value={peminatan.ptn2}
                        onChange={(e) => setPeminatan({ ...peminatan, ptn2: e.target.value })}
                        placeholder="Contoh: UNPAD - Teknik Informatika"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Perguruan Tinggi Pilihan 3 & Jurusan</label>
                      <textarea
                        rows={2}
                        value={peminatan.ptn3}
                        onChange={(e) => setPeminatan({ ...peminatan, ptn3: e.target.value })}
                        placeholder="Contoh: UPI - Ilmu Komputer"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Target Perguruan Tinggi Luar Negeri</label>
                      <textarea
                        rows={2}
                        value={peminatan.ptLuarNegeri}
                        onChange={(e) => setPeminatan({ ...peminatan, ptLuarNegeri: e.target.value })}
                        placeholder="Contoh: Monash University / NTU Singapore atau '-'"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Perguruan Tinggi Swasta Pilihan</label>
                      <textarea
                        rows={2}
                        value={peminatan.pts}
                        onChange={(e) => setPeminatan({ ...peminatan, pts: e.target.value })}
                        placeholder="Contoh: Telkom University, UNPAR"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Target Sekolah Kedinasan (Jika Ada)</label>
                      <textarea
                        rows={2}
                        value={peminatan.kedinasan}
                        onChange={(e) => setPeminatan({ ...peminatan, kedinasan: e.target.value })}
                        placeholder="Contoh: Politeknik Statistika STIS, STAN, IPDN"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>

                {/* Rencana Karir */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px]">
                    Rencana Karir & Cita-Cita
                  </h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Minat Bidang Pekerjaan / Cita-cita</label>
                      <input
                        type="text"
                        value={peminatan.citaCita}
                        onChange={(e) => setPeminatan({ ...peminatan, citaCita: e.target.value })}
                        placeholder="Contoh: Software Engineer / Dokter Spesialis"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Faktor Pendukung Cita-cita</label>
                      <textarea
                        rows={2}
                        value={peminatan.faktorPendukung}
                        onChange={(e) => setPeminatan({ ...peminatan, faktorPendukung: e.target.value })}
                        placeholder="Fasilitas, motivasi diri, dorongan orang tua..."
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* ========================================================================= */}
            {/* 9. NILAI RAPOR SMP */}
            {/* ========================================================================= */}
            {activeTab === "nilai_smp" && (
              <div className="space-y-5 text-xs">
                <div className="p-3 bg-blue-50 border border-blue-200 rounded-xl flex items-center justify-between text-blue-900">
                  <div className="flex items-center gap-2">
                    <FileSpreadsheet className="w-4 h-4 text-blue-600 shrink-0" />
                    <span>
                      Masukkan nilai pengetahuan murni (skala 0-100 desimal) dari buku rapor SMP asli Anda.
                    </span>
                  </div>
                  <span className="font-mono font-bold text-xs bg-white px-2.5 py-1 rounded-md border border-blue-200">
                    6 Semester SMP
                  </span>
                </div>

                {/* Sub-Tab Semester Switcher */}
                <div className="flex flex-wrap gap-1.5 p-1.5 bg-slate-100 rounded-xl border border-slate-200">
                  {SMP_SEMESTERS.map((sem) => {
                    const isSelected = activeSmpSemester === sem.id;
                    const semData = nilaiSmp[sem.id];
                    const countFilled = semData
                      ? [semData.matematika, semData.bahasaIndonesia, semData.bahasaInggris, semData.ipa, semData.ips].filter(
                          (n) => n !== "" && n !== null && !isNaN(Number(n))
                        ).length
                      : 0;

                    return (
                      <button
                        key={sem.id}
                        type="button"
                        onClick={() => setActiveSmpSemester(sem.id)}
                        className={`flex-1 min-w-[120px] py-2 px-3 rounded-lg text-xs font-bold transition-all flex items-center justify-between gap-1.5 ${
                          isSelected
                            ? "bg-white text-blue-700 shadow-xs border border-slate-200"
                            : "text-slate-600 hover:text-slate-900 hover:bg-slate-200/60"
                        }`}
                      >
                        <span>{sem.label}</span>
                        <span
                          className={`text-[10px] px-1.5 py-0.5 rounded-full font-mono ${
                            countFilled === 5 ? "bg-emerald-100 text-emerald-800" : "bg-slate-200 text-slate-700"
                          }`}
                        >
                          {countFilled}/5
                        </span>
                      </button>
                    );
                  })}
                </div>

                {/* Form Input 5 Mapel Pokok untuk Sub-Tab Terpilih */}
                {(() => {
                  const currentSemData = nilaiSmp[activeSmpSemester] || {
                    matematika: "",
                    bahasaIndonesia: "",
                    bahasaInggris: "",
                    ipa: "",
                    ips: "",
                  };

                  const currentSemLabel =
                    SMP_SEMESTERS.find((s) => s.id === activeSmpSemester)?.label || "Semester SMP";

                  // Hitung rata-rata semester aktif
                  const scores = [
                    Number(currentSemData.matematika) || 0,
                    Number(currentSemData.bahasaIndonesia) || 0,
                    Number(currentSemData.bahasaInggris) || 0,
                    Number(currentSemData.ipa) || 0,
                    Number(currentSemData.ips) || 0,
                  ];
                  const nonZero = scores.filter((s) => s > 0);
                  const semAvg = nonZero.length > 0 ? (nonZero.reduce((a, b) => a + b, 0) / nonZero.length).toFixed(1) : "-";

                  return (
                    <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-4">
                      <div className="flex items-center justify-between border-b border-slate-200 pb-2">
                        <span className="font-bold text-slate-800 text-sm">
                          Form Nilai: {currentSemLabel}
                        </span>
                        <div className="flex items-center gap-2">
                          <span className="text-slate-500 text-xs">Rata-rata 5 Mapel:</span>
                          <span className="font-mono font-black text-sm text-blue-700 bg-white px-2.5 py-0.5 rounded border border-blue-200">
                            {semAvg}
                          </span>
                        </div>
                      </div>

                      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
                        {/* Matematika */}
                        <div className="bg-white p-3 rounded-xl border border-slate-200 shadow-2xs space-y-1">
                          <label className="block text-[11px] font-bold text-slate-700">Matematika</label>
                          <input
                            type="number"
                            min={0}
                            max={100}
                            step="0.1"
                            value={currentSemData.matematika}
                            onChange={(e) => {
                              const val = e.target.value === "" ? "" : Number(e.target.value);
                              setNilaiSmp({
                                ...nilaiSmp,
                                [activeSmpSemester]: { ...currentSemData, matematika: val },
                              });
                            }}
                            placeholder="0-100"
                            className="w-full px-2.5 py-2 text-center text-sm font-mono font-bold text-blue-900 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500/20"
                          />
                        </div>

                        {/* Bahasa Indonesia */}
                        <div className="bg-white p-3 rounded-xl border border-slate-200 shadow-2xs space-y-1">
                          <label className="block text-[11px] font-bold text-slate-700">Bahasa Indonesia</label>
                          <input
                            type="number"
                            min={0}
                            max={100}
                            step="0.1"
                            value={currentSemData.bahasaIndonesia}
                            onChange={(e) => {
                              const val = e.target.value === "" ? "" : Number(e.target.value);
                              setNilaiSmp({
                                ...nilaiSmp,
                                [activeSmpSemester]: { ...currentSemData, bahasaIndonesia: val },
                              });
                            }}
                            placeholder="0-100"
                            className="w-full px-2.5 py-2 text-center text-sm font-mono font-bold text-blue-900 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500/20"
                          />
                        </div>

                        {/* Bahasa Inggris */}
                        <div className="bg-white p-3 rounded-xl border border-slate-200 shadow-2xs space-y-1">
                          <label className="block text-[11px] font-bold text-slate-700">Bahasa Inggris</label>
                          <input
                            type="number"
                            min={0}
                            max={100}
                            step="0.1"
                            value={currentSemData.bahasaInggris}
                            onChange={(e) => {
                              const val = e.target.value === "" ? "" : Number(e.target.value);
                              setNilaiSmp({
                                ...nilaiSmp,
                                [activeSmpSemester]: { ...currentSemData, bahasaInggris: val },
                              });
                            }}
                            placeholder="0-100"
                            className="w-full px-2.5 py-2 text-center text-sm font-mono font-bold text-blue-900 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500/20"
                          />
                        </div>

                        {/* IPA */}
                        <div className="bg-white p-3 rounded-xl border border-slate-200 shadow-2xs space-y-1">
                          <label className="block text-[11px] font-bold text-slate-700">IPA</label>
                          <input
                            type="number"
                            min={0}
                            max={100}
                            step="0.1"
                            value={currentSemData.ipa}
                            onChange={(e) => {
                              const val = e.target.value === "" ? "" : Number(e.target.value);
                              setNilaiSmp({
                                ...nilaiSmp,
                                [activeSmpSemester]: { ...currentSemData, ipa: val },
                              });
                            }}
                            placeholder="0-100"
                            className="w-full px-2.5 py-2 text-center text-sm font-mono font-bold text-blue-900 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500/20"
                          />
                        </div>

                        {/* IPS */}
                        <div className="bg-white p-3 rounded-xl border border-slate-200 shadow-2xs space-y-1">
                          <label className="block text-[11px] font-bold text-slate-700">IPS</label>
                          <input
                            type="number"
                            min={0}
                            max={100}
                            step="0.1"
                            value={currentSemData.ips}
                            onChange={(e) => {
                              const val = e.target.value === "" ? "" : Number(e.target.value);
                              setNilaiSmp({
                                ...nilaiSmp,
                                [activeSmpSemester]: { ...currentSemData, ips: val },
                              });
                            }}
                            placeholder="0-100"
                            className="w-full px-2.5 py-2 text-center text-sm font-mono font-bold text-blue-900 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500/20"
                          />
                        </div>
                      </div>
                    </div>
                  );
                })()}
              </div>
            )}

            {/* ========================================================================= */}
            {/* 10. SURAT PERNYATAAN */}
            {/* ========================================================================= */}
            {activeTab === "pernyataan" && (
              <div className="space-y-6 text-xs">
                {/* Statement Box */}
                <div className="p-5 bg-gradient-to-br from-blue-50 via-indigo-50/50 to-slate-50 rounded-2xl border-2 border-blue-200/80 space-y-4">
                  <div className="flex items-center gap-2.5 text-blue-900">
                    <ShieldCheck className="w-5 h-5 text-blue-600 shrink-0" />
                    <h3 className="text-sm font-black uppercase tracking-wide">
                      Surat Pernyataan Tanggung Jawab Mutlak (SPTJM) Biodata
                    </h3>
                  </div>

                  <div className="bg-white p-4 rounded-xl border border-blue-200/80 text-slate-700 leading-relaxed text-xs space-y-2">
                    <p>Dengan ini saya menyatakan dengan sesungguhnya bahwa:</p>
                    <ol className="list-decimal pl-5 space-y-1.5">
                      <li>
                        Seluruh data identitas diri, tempat tinggal, keluarga, riwayat pendidikan, keterangan kesehatan,
                        serta nilai rapor SMP yang saya isikan dalam formulir Biodata Mandiri ini adalah benar, lengkap,
                        dan sesuai dengan dokumen resmi yang sah.
                      </li>
                      <li>
                        Seluruh berkas scan dokumen (Kartu Keluarga, Akta Kelahiran, Ijazah SMP, Hasil Psikotes) yang
                        diunggah adalah dokumen asli atau salinan sah tanpa rekayasa.
                      </li>
                      <li>
                        Apabila di kemudian hari ditemukan ketidakbenaran data atau pemalsuan dokumen, saya bersedia
                        menerima segala sanksi akademik dan administratif sesuai dengan tata tertib SMA BPI 1 Bandung
                        dan ketentuan peraturan perundang-undangan yang berlaku.
                      </li>
                    </ol>
                  </div>

                  {/* Checkbox Persetujuan */}
                  <label className="flex items-start gap-3 p-3 bg-white rounded-xl border border-blue-300 cursor-pointer hover:bg-blue-50/50 transition-colors">
                    <input
                      type="checkbox"
                      checked={pernyataan.setujuPernyataan}
                      onChange={(e) => setPernyataan({ ...pernyataan, setujuPernyataan: e.target.checked })}
                      className="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500 mt-0.5 cursor-pointer"
                    />
                    <div className="text-xs">
                      <span className="font-bold text-slate-900 block">
                        Saya menyetujui pernyataan di atas dan menjamin kebenaran seluruh data.
                      </span>
                      <span className="text-[11px] text-slate-500">
                        Pernyataan ini memiliki kekuatan pembuktian sah untuk arsip administrasi kesiswaan sekolah.
                      </span>
                    </div>
                  </label>
                </div>

                {/* Penandatangan Dokumen Fisik */}
                <div className="p-4 bg-slate-50 rounded-xl border border-slate-200 space-y-3">
                  <h4 className="font-bold text-slate-800 uppercase tracking-wider text-[11px]">
                    Penandatangan Dokumen Fisik Orang Tua / Wali
                  </h4>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div className="md:col-span-3">
                      <label className="block font-bold text-slate-700 mb-2">Pilih Pihak Penandatangan:</label>
                      <div className="flex flex-wrap items-center gap-4">
                        {["Ayah", "Ibu", "Wali"].map((role) => (
                          <label key={role} className="flex items-center gap-2 cursor-pointer font-medium text-slate-800">
                            <input
                              type="radio"
                              name="penandatangan"
                              value={role}
                              checked={pernyataan.penandatangan === role}
                              onChange={(e) => setPernyataan({ ...pernyataan, penandatangan: e.target.value })}
                              className="w-4 h-4 text-blue-600"
                            />
                            <span>{role}</span>
                          </label>
                        ))}
                      </div>
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Nama Lengkap Penandatangan</label>
                      <input
                        type="text"
                        value={
                          pernyataan.namaPenandatangan ||
                          (pernyataan.penandatangan === "Ayah"
                            ? keluarga.namaAyah
                            : pernyataan.penandatangan === "Ibu"
                            ? keluarga.namaIbu
                            : keluarga.namaWali)
                        }
                        onChange={(e) => setPernyataan({ ...pernyataan, namaPenandatangan: e.target.value })}
                        placeholder="Nama penandatangan"
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>

                    <div>
                      <label className="block font-bold text-slate-700 mb-1">Tanggal Pernyataan</label>
                      <input
                        type="date"
                        value={pernyataan.tanggalPernyataan}
                        onChange={(e) => setPernyataan({ ...pernyataan, tanggalPernyataan: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-slate-800 font-medium"
                      />
                    </div>
                  </div>
                </div>

                {/* Final Action Button */}
                <div className="p-4 bg-emerald-50 border border-emerald-200 rounded-xl flex flex-col sm:flex-row items-center justify-between gap-3">
                  <div>
                    <span className="font-bold text-emerald-950 text-sm block">Simpan & Finalisasi Biodata</span>
                    <span className="text-emerald-800 text-xs">
                      Pastikan checkbox persetujuan telah dicentang sebelum menyimpan pernyataan.
                    </span>
                  </div>
                  <Button
                    type="button"
                    variant="primary"
                    size="sm"
                    onClick={() => handleSaveData(false)}
                    disabled={!pernyataan.setujuPernyataan || saving}
                    leftIcon={<Check className="w-4 h-4" />}
                    className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-4 py-2"
                  >
                    {saving ? "Menyimpan..." : "Simpan Pernyataan"}
                  </Button>
                </div>
              </div>
            )}
          </div>

          {/* BOTTOM STEPPER NAVIGATION BAR */}
          <div className="p-4 sm:p-5 border-t border-slate-100 bg-slate-50 flex items-center justify-between">
            {/* Previous Button */}
            {(() => {
              const curIdx = BIODATA_TABS.findIndex((t) => t.key === activeTab);
              if (curIdx > 0) {
                return (
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => setActiveTab(BIODATA_TABS[curIdx - 1].key)}
                    leftIcon={<ArrowLeft className="w-4 h-4" />}
                  >
                    Sebelumnya: {BIODATA_TABS[curIdx - 1].shortTitle}
                  </Button>
                );
              }
              return <div />;
            })()}

            {/* Next or Finalize Button */}
            {(() => {
              const curIdx = BIODATA_TABS.findIndex((t) => t.key === activeTab);
              if (curIdx < BIODATA_TABS.length - 1) {
                return (
                  <Button
                    type="button"
                    variant="primary"
                    size="sm"
                    onClick={() => handleSaveData(true)}
                    disabled={saving}
                    rightIcon={<ArrowRight className="w-4 h-4" />}
                    className="bg-blue-600 hover:bg-blue-700 font-semibold"
                  >
                    Simpan & Lanjut: {BIODATA_TABS[curIdx + 1].shortTitle}
                  </Button>
                );
              }
              return (
                <Button
                  type="button"
                  variant="primary"
                  size="sm"
                  onClick={() => handleSaveData(false)}
                  disabled={saving || !pernyataan.setujuPernyataan}
                  leftIcon={<Check className="w-4 h-4" />}
                  className="bg-emerald-600 hover:bg-emerald-700 font-bold"
                >
                  Selesai & Simpan Seluruh Biodata
                </Button>
              );
            })()}
          </div>
        </div>
      </div>

      {/* DOCUMENT PREVIEW MODAL */}
      {previewDoc && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs animate-in fade-in duration-200">
          <div className="bg-white rounded-2xl max-w-2xl w-full p-4 space-y-4 shadow-xl border border-slate-200">
            <div className="flex items-center justify-between border-b border-slate-100 pb-2">
              <h3 className="font-bold text-sm text-slate-800">{previewDoc.title}</h3>
              <button
                type="button"
                onClick={() => setPreviewDoc(null)}
                className="text-slate-400 hover:text-slate-600 p-1"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="max-h-[70vh] overflow-auto flex items-center justify-center p-2 bg-slate-50 rounded-xl">
              {previewDoc.url.startsWith("data:image") || previewDoc.url.includes("image") ? (
                <img src={previewDoc.url} alt={previewDoc.title} className="max-w-full max-h-[60vh] object-contain rounded" />
              ) : (
                <div className="p-8 text-center space-y-3">
                  <FileText className="w-12 h-12 mx-auto text-blue-600" />
                  <p className="text-xs text-slate-600 font-medium">Dokumen format PDF / Berkas Digital</p>
                  <a
                    href={previewDoc.url}
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-1.5 px-4 py-2 bg-blue-600 text-white rounded-lg text-xs font-bold shadow-xs hover:bg-blue-700"
                  >
                    Buka Berkas di Tab Baru <ExternalLink className="w-3.5 h-3.5" />
                  </a>
                </div>
              )}
            </div>
            <div className="text-right pt-2 border-t border-slate-100">
              <Button variant="outline" size="sm" onClick={() => setPreviewDoc(null)}>
                Tutup Pratinjau
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* TOAST NOTIFICATION */}
      {toastMessage && (
        <Toast
          message={toastMessage}
          variant={toastType === "success" ? "success" : "error"}
          onClose={() => setToastMessage(null)}
        />
      )}
    </div>
  );
};