"use client";

import React, { useRef, useState, useEffect } from "react";
import { Printer, X } from "lucide-react";
import { Modal } from "@/components/ui/Modal";
import { Button } from "@/components/ui/Button";
import { TuSuratRecord, TuSuratPrintDetails } from "@/lib/db";
import { useSchoolOfficials } from "@/hooks/useSchoolOfficials";
import { PrintOrientationToggle } from "@/components/ui/PrintOrientationToggle";
import { triggerPrint, PrintOrientation } from "@/lib/printUtils";

interface TuPrintSuratModalProps {
  isOpen: boolean;
  onClose: () => void;
  surat: TuSuratRecord | null;
}

export const TuPrintSuratModal: React.FC<TuPrintSuratModalProps> = ({
  isOpen,
  onClose,
  surat,
}) => {
  const { officials } = useSchoolOfficials();
  const printRef = useRef<HTMLDivElement>(null);
  const [printOrientation, setPrintOrientation] = useState<PrintOrientation>("portrait");

  const [loading, setLoading] = useState(false);
  const [details, setDetails] = useState<TuSuratPrintDetails | null>(null);

  useEffect(() => {
    if (!isOpen || !surat?.id) {
      setDetails(null);
      return;
    }

    let isMounted = true;
    const fetchDetails = async () => {
      try {
        setLoading(true);
        const res = await fetch(`/api/tu/surat/print-details?id=${surat.id}`);
        const json = await res.json();
        if (isMounted && json.success && json.data) {
          setDetails(json.data);
        }
      } catch (err) {
        console.error("Gagal mengambil detail surat untuk cetak:", err);
      } finally {
        if (isMounted) setLoading(false);
      }
    };

    fetchDetails();

    return () => {
      isMounted = false;
    };
  }, [isOpen, surat?.id]);

  if (!surat) return null;

  const handlePrint = () => {
    triggerPrint(printOrientation);
  };

  // Helper date Indonesian
  const formatTglIndo = (tglStr?: string) => {
    if (!tglStr) return "-";
    const num = Number(tglStr);
    if (!isNaN(num) && num > 10000 && num < 60000) {
      const d = new Date((num - 25569) * 86400 * 1000);
      return d.toLocaleDateString("id-ID", {
        day: "numeric",
        month: "long",
        year: "numeric",
      });
    }
    try {
      const d = new Date(tglStr);
      if (isNaN(d.getTime())) return tglStr;
      return d.toLocaleDateString("id-ID", {
        day: "numeric",
        month: "long",
        year: "numeric",
      });
    } catch {
      return tglStr;
    }
  };

  // Official school headmaster fallback
  const officialKepsek =
    officials.find(
      (o) =>
        o.id === "kepala_sekolah" ||
        (o.role_name && o.role_name.toLowerCase().includes("kepala sekolah"))
    );

  const penandatangan = details?.penandatangan || {
    nama: officialKepsek?.name || surat.pejabat_penandatangan || "Tatang. M.Pd",
    nipy: officialKepsek?.nip || surat.nip_penandatangan || "10049",
    jabatan: "Kepala Sekolah",
    unit_kerja: "SMA BPI 1 Bandung",
    kota: "Bandung",
    provinsi: "Jawa Barat",
  };

  const studentData = details?.student || {
    id: surat.student_id || 0,
    nis: surat.student_nis || "-",
    nisn: "-",
    nama_lengkap: surat.student_name || "-",
    tempat_lahir: "-",
    tanggal_lahir: "-",
    ttl: "-",
    nama_ortu_wali: "-",
    alamat: "-",
    tingkat: surat.student_class?.split("-")[0] || "X",
    rombel: surat.student_class || "-",
  };

  const semesterGrades = details?.semesterGrades || [];
  const rataRataKumulatif = details?.rataRataKumulatif ?? null;

  // Formatting nomor surat
  const displayNomorSurat = surat.nomor_surat;
  const tanggalCetak = formatTglIndo(surat.tanggal_surat);

  const isSuratUtbk = Boolean(
    surat.kategori_surat?.toLowerCase().includes("utbk") ||
    surat.perihal?.toLowerCase().includes("utbk")
  );

  const isSuratUndangan = Boolean(
    surat.kategori_surat?.toLowerCase().includes("undangan") ||
    surat.perihal?.toLowerCase().includes("undangan")
  );

  const isSuratTugas = Boolean(
    surat.kategori_surat?.toLowerCase().includes("tugas") ||
    surat.perihal?.toLowerCase().includes("tugas")
  );

  const isSuratGty = Boolean(
    surat.kategori_surat?.toLowerCase().includes("gty") ||
    surat.perihal?.toLowerCase().includes("gty")
  );

  let extraMeta: {
    programKurikulum?: string;
    tempatTanggalLahir?: string;
    namaOrtu?: string;
    alamat?: string;
    hal?: string;
    maksudPertemuan?: string;
    hariUndangan?: string;
    tanggalUndangan?: string;
    waktuUndangan?: string;
    tempatUndangan?: string;
    // Surat Tugas
    tahunPelajaranTeks?: string;
    pemberiTugasNama?: string;
    pemberiTugasNipy?: string;
    pemberiTugasJabatan?: string;
    pemberiTugasUnitKerja?: string;
    pemberiTugasAlamat?: string;
    personilList?: Array<{ no?: number; nama: string; keterangan: string }>;
    namaKegiatan?: string;
    hariTanggalKegiatan?: string;
    waktuKegiatan?: string;
    tempatKegiatan?: string;
    // Suket GTY
    gtyNama?: string;
    gtyTtl?: string;
    gtyJabatan?: string;
    gtyPendidikan?: string;
    gtyAlamat?: string;
    gtyMapel?: string;
  } = {
    programKurikulum: "Kurikulum Merdeka Belajar",
    hal: "Undangan",
    maksudPertemuan: "kedisiplinan / kelulusan / pembinaan",
    hariUndangan: "Selasa",
    waktuUndangan: "Pukul 10.00 WIB",
    tempatUndangan: "Ruang Transisi",
    tahunPelajaranTeks: "TAHUN PELAJARAN 2026-2027",
    pemberiTugasNama: "Tatang, M.Pd",
    pemberiTugasNipy: "10079",
    pemberiTugasJabatan: "Kepala Sekolah",
    pemberiTugasUnitKerja: "SMA BPI 1 Bandung",
    pemberiTugasAlamat: "Jl. Burangrang No. 8 Bandung",
    personilList: [],
    namaKegiatan: "Untuk menghadiri Kegiatan Bimbingan Teknis Aplikasi Program Jabar Sakola",
    hariTanggalKegiatan: "Selasa, 6 Oktober 2026",
    waktuKegiatan: "Pukul 10.00 s.d. 12.00 WIB",
    tempatKegiatan: "Aula Cabang Dinas Pendidikan Wilayah VII",
    gtyNama: "Drs. Ahmad Dahlan, M.Si",
    gtyTtl: "Bandung, 12 Mei 1985",
    gtyJabatan: "Guru Tetap Yayasan (GTY)",
    gtyPendidikan: "S1 Pendidikan Matematika",
    gtyAlamat: "Jl. Asia Afrika No. 120, Bandung",
    gtyMapel: "Matematika",
  };
  try {
    if (surat.keterangan && surat.keterangan.trim().startsWith("{")) {
      extraMeta = { ...extraMeta, ...JSON.parse(surat.keterangan) };
    }
  } catch {}

  // Format Nama Kepala Sekolah dengan gelar presisi (Contoh: Tatang, M.Pd.)
  const formatNamaKepsek = (rawName?: string) => {
    if (!rawName) return "Tatang, M.Pd.";
    if (/tatang/i.test(rawName)) {
      return "Tatang, M.Pd.";
    }
    return rawName.trim();
  };

  // Format NIPY: NIPY. [Nomor]
  const formatNipy = (rawNipy?: string) => {
    if (!rawNipy) return isSuratUtbk ? "NIPY 10079" : "NIPY. 10079";
    const numMatch = rawNipy.match(/\d+/);
    const num = numMatch ? numMatch[0] : "10079";
    return isSuratUtbk ? `NIPY ${num}` : `NIPY. ${num}`;
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="Pratinjau & Cetak Surat Keterangan Resmi"
      maxWidth="xl"
      hideOnPrint={false}
    >
      <div className="space-y-4">
        {/* Style tag khusus print preview: Cetak HANYA dokumen isinya saja murni! */}
        <style dangerouslySetInnerHTML={{ __html: `
          @page {
            size: ${printOrientation === "landscape" ? "330mm 215mm" : "215mm 330mm"};
            margin: 0 !important;
          }
          @media print {
            @page {
              size: ${printOrientation === "landscape" ? "330mm 215mm" : "215mm 330mm"};
              margin: 0 !important;
            }
            /* Sembunyikan SELURUH elemen web browser, sidebar, navbar, background page, modal header/footer */
            body * {
              visibility: hidden !important;
            }

            /* HANYA tampilkan dokumen lembar surat keterangan */
            #printable-surat-keterangan,
            #printable-surat-keterangan * {
              visibility: visible !important;
            }

            /* Posisikan dokumen tepat di lembar cetak dengan margin fisik murni */
            #printable-surat-keterangan {
              position: absolute !important;
              left: 0 !important;
              top: 0 !important;
              width: 100% !important;
              max-width: 100% !important;
              margin: 0 !important;
              padding: 10mm 15mm 10mm 15mm !important;
              box-sizing: border-box !important;
              background: #ffffff !important;
              border: none !important;
              box-shadow: none !important;
              z-index: 9999999 !important;
            }

            html, body {
              width: 100% !important;
              height: auto !important;
              margin: 0 !important;
              padding: 0 !important;
              background: #ffffff !important;
              -webkit-print-color-adjust: exact !important;
              print-color-adjust: exact !important;
            }

            /* HILANGKAN tulisan browser default header (tanggal & title) dan footer (URL & nomor halaman) */
            @page {
              size: ${printOrientation === "landscape" ? "330mm 215mm" : "215mm 330mm"};
              margin: 0mm !important;
            }
          }
        `}} />

        {/* Toolbar - Hanya tampil di layar, tersembunyi saat cetak */}
        <div className="flex flex-wrap items-center justify-between gap-3 pb-3 border-b border-slate-200 print:hidden">
          <div className="flex items-center gap-2">
            <span className="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-blue-50 text-blue-700 border border-blue-200">
              Format Resmi SMA BPI 1 Bandung
            </span>
            <span className="text-xs text-slate-500 hidden sm:inline">
              Layout Cetak 1 Halaman Bersih (Hanya Dokumen yang Dicetak)
            </span>
          </div>
          <div className="flex items-center gap-3">
            <PrintOrientationToggle
              value={printOrientation}
              onChange={setPrintOrientation}
            />
            <Button variant="outline" size="sm" onClick={onClose} className="text-xs">
              Tutup
            </Button>
            <Button
              variant="primary"
              size="sm"
              onClick={handlePrint}
              disabled={loading}
              className="bg-blue-600 hover:bg-blue-700 text-white gap-2 text-xs font-semibold shadow-xs"
            >
              <Printer className="w-4 h-4" />
              <span>Cetak Surat (PDF)</span>
            </Button>
          </div>
        </div>

        {loading ? (
          <div className="py-16 text-center text-slate-500 bg-white rounded-xl border border-slate-200">
            <div className="inline-block animate-spin rounded-full h-8 w-8 border-2 border-blue-600 border-t-transparent mb-3" />
            <p className="text-sm font-semibold text-slate-700">
              Menghubungkan data Rapor & Master Siswa...
            </p>
            <p className="text-xs text-slate-400 mt-1">
              Menghitung nilai rata-rata kumulatif per semester
            </p>
          </div>
        ) : (
          /* Official Letter Paper Document (Hanya area ini yang dicetak ke printer) */
          <div
            id="printable-surat-keterangan"
            ref={printRef}
            className={`printable-document printable-area print-${printOrientation} official-letter-doc bg-white p-7 sm:p-9 border border-slate-200 rounded-xl shadow-xs text-black print:border-none print:shadow-none print:p-0 print:m-0 print:w-full`}
            style={{
              fontFamily: "'Times New Roman', Times, serif",
              lineHeight: 1.35,
            }}
          >
            {/* KOP SURAT RESMI SMA BPI 1 BANDUNG (Sesuai Gambar 1 - /images/kop-surat-bpi.png) */}
            <div className="w-full mb-3">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="/images/kop-surat-bpi.png"
                alt="Kop Surat Resmi SMA BPI 1 Bandung"
                className="w-full h-auto block"
              />
            </div>

            {/* ISI SURAT */}
            {isSuratTugas ? (
              <div className="text-[11.5px] space-y-2.5 leading-relaxed text-black">
                {/* JUDUL SURAT & NOMOR & TAHUN PELAJARAN */}
                <div className="text-center mb-3">
                  <h3 className="text-[14px] font-bold uppercase tracking-wide underline m-0">
                    SURAT TUGAS
                  </h3>
                  <p className="text-[11px] text-black mt-0.5 m-0 font-medium">
                    Nomor : {displayNomorSurat}
                  </p>
                  <p className="text-[11px] text-black mt-0.5 m-0 font-bold uppercase tracking-wider">
                    {extraMeta.tahunPelajaranTeks || `TAHUN PELAJARAN ${surat.tahun_ajaran ? surat.tahun_ajaran.replace('/', '-') : '2026-2027'}`}
                  </p>
                </div>

                {/* PEMBERI TUGAS */}
                <p className="m-0">Yang bertanda tangan di bawah ini :</p>
                <div className="pl-6 space-y-0.5">
                  <table className="w-full text-[11.5px]">
                    <tbody>
                      <tr>
                        <td className="w-32 py-0.5 align-top">Nama</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top font-bold text-black">
                          {extraMeta.pemberiTugasNama || penandatangan.nama || "Tatang, M.Pd"}
                        </td>
                      </tr>
                      <tr>
                        <td className="w-32 py-0.5 align-top">NIPY</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">
                          {(extraMeta.pemberiTugasNipy || penandatangan.nipy || "10079").replace(/^NIPY\.?\s*/i, "")}
                        </td>
                      </tr>
                      <tr>
                        <td className="w-32 py-0.5 align-top">Jabatan</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">
                          {extraMeta.pemberiTugasJabatan || penandatangan.jabatan || "Kepala Sekolah"}
                        </td>
                      </tr>
                      <tr>
                        <td className="w-32 py-0.5 align-top">Unit Kerja</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">
                          {extraMeta.pemberiTugasUnitKerja || penandatangan.unit_kerja || "SMA BPI 1 Bandung"}
                        </td>
                      </tr>
                      <tr>
                        <td className="w-32 py-0.5 align-top">Alamat</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">
                          {extraMeta.pemberiTugasAlamat || "Jl. Burangrang No. 8 Bandung"}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                {/* PENGANTAR TABEL */}
                <p className="m-0 pt-1 font-normal">Memberikan tugas kepada:</p>

                {/* TABEL DAFTAR PERSONIL */}
                <div className="my-1.5">
                  <table className="w-full border-collapse border border-black text-[11px]">
                    <thead>
                      <tr className="bg-slate-100 print:bg-transparent">
                        <th className="border border-black px-2 py-1 text-center w-12 font-bold uppercase">
                          NO
                        </th>
                        <th className="border border-black px-3 py-1 text-left font-bold uppercase">
                          NAMA
                        </th>
                        <th className="border border-black px-3 py-1 text-left font-bold uppercase">
                          KETERANGAN
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {(!extraMeta.personilList || extraMeta.personilList.length === 0) ? (
                        <tr>
                          <td className="border border-black px-2 py-1 text-center">1</td>
                          <td className="border border-black px-3 py-1 font-semibold text-slate-900">
                            {surat.student_name || "Reni Susanti, S.Pd"}
                          </td>
                          <td className="border border-black px-3 py-1 text-slate-800">
                            {surat.student_class || "Guru Informatika"}
                          </td>
                        </tr>
                      ) : (
                        extraMeta.personilList.map((p, idx) => (
                          <tr key={idx}>
                            <td className="border border-black px-2 py-1 text-center">
                              {idx + 1}
                            </td>
                            <td className="border border-black px-3 py-1 font-semibold text-slate-900">
                              {p.nama}
                            </td>
                            <td className="border border-black px-3 py-1 text-slate-800">
                              {p.keterangan}
                            </td>
                          </tr>
                        ))
                      )}
                    </tbody>
                  </table>
                </div>

                {/* DETAIL KEGIATAN */}
                <div className="pt-1 space-y-1 text-justify">
                  <p className="m-0 leading-relaxed font-normal">
                    {extraMeta.namaKegiatan || "Untuk menghadiri Kegiatan Bimbingan Teknis Aplikasi Program Jabar Sakola"}, Pada:
                  </p>

                  <div className="pl-6 space-y-0.5">
                    <table className="w-full text-[11.5px]">
                      <tbody>
                        <tr>
                          <td className="w-32 py-0.5 align-top">Hari, tanggal</td>
                          <td className="w-3 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-medium">
                            {extraMeta.hariTanggalKegiatan || "-"}
                          </td>
                        </tr>
                        <tr>
                          <td className="w-32 py-0.5 align-top">Waktu</td>
                          <td className="w-3 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-medium">
                            {extraMeta.waktuKegiatan || "Pukul 10.00 s.d. 12.00 WIB"}
                          </td>
                        </tr>
                        <tr>
                          <td className="w-32 py-0.5 align-top">Tempat</td>
                          <td className="w-3 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-medium">
                            {extraMeta.tempatKegiatan || "-"}
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <p className="m-0 pt-2 leading-relaxed text-justify font-normal">
                    Demikian surat tugas ini dibuat untuk dilaksanakan sebaik baiknya dengan penuh tanggung jawab dan menyampaikan laporannya setelah kegiatan selesai dilaksanakan.
                  </p>
                </div>

                {/* FOOTER / AREA TANDA TANGAN GANDA */}
                <div className="mt-7 flex justify-between items-start text-[11.5px] leading-snug">
                  {/* Kolom Kiri: Telah Melaksanakan Tugas */}
                  <div className="w-64 text-center">
                    <p className="m-0 font-normal">Telah Melaksanakan Tugas</p>
                    {/* Space untuk TTD & Stempel tempat penyelenggara / penerima tugas */}
                    <div style={{ height: "65px", minHeight: "65px" }} />
                    <p className="m-0 font-normal text-slate-700 tracking-wider">
                      ...........................................
                    </p>
                  </div>

                  {/* Kolom Kanan: Kepala SMA BPI 1 */}
                  <div className="w-60 text-left" style={{ textAlign: "left" }}>
                    <p className="m-0 font-normal">Bandung, {tanggalCetak}</p>
                    <p className="m-0 font-normal">Kepala SMA BPI 1,</p>
                    {/* Space Tanda Tangan & Stempel */}
                    <div style={{ height: "65px", minHeight: "65px" }} />
                    <p className="underline m-0 text-[12px] font-bold">
                      {formatNamaKepsek(extraMeta.pemberiTugasNama || penandatangan.nama || "Tatang, M.Pd")}
                    </p>
                    <p className="text-[11px] text-black m-0 mt-0.5 font-normal">
                      NIPY {(extraMeta.pemberiTugasNipy || penandatangan.nipy || "10079").replace(/^NIPY\.?\s*/i, "")}
                    </p>
                  </div>
                </div>
              </div>
            ) : isSuratUndangan ? (
              <div className="text-[11.5px] space-y-3 leading-relaxed text-black">
                {/* BARIS NOMOR, HAL, DAN TANGGAL SURAT */}
                <div className="flex justify-between items-start pt-1 text-[11px]">
                  <div>
                    <table className="text-[11px]">
                      <tbody>
                        <tr>
                          <td className="w-16 py-0.5 align-top">Nomor</td>
                          <td className="w-3 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-medium">{displayNomorSurat}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Hal</td>
                          <td className="py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-medium">{extraMeta.hal || "Undangan"}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div className="text-right font-medium">
                    Bandung, {tanggalCetak}
                  </div>
                </div>

                {/* TUJUAN SURAT */}
                <div className="pt-2 text-[11.5px]">
                  <p className="m-0">Kepada Yth.</p>
                  <p className="m-0 font-semibold">Bapak/Ibu Orang Tua/Wali Siswa</p>
                  <p className="m-0 font-bold uppercase">{studentData.nama_lengkap || surat.student_name}</p>
                  <p className="m-0">di Tempat</p>
                </div>

                {/* ISI SURAT */}
                <div className="space-y-2 text-justify pt-1">
                  <p className="m-0 leading-relaxed">
                    Sehubungan adanya hal-hal yang perlu kami bicarakan perihal <b>{extraMeta.maksudPertemuan || "kedisiplinan / kelulusan / pembinaan"}</b> Putra/Putri Bapak/Ibu yaitu:
                  </p>

                  {/* DATA SISWA */}
                  <div className="pl-6 py-0.5">
                    <table className="text-[11.5px]">
                      <tbody>
                        <tr>
                          <td className="w-20 py-0.5 align-top">Nama</td>
                          <td className="w-3 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-bold uppercase">{studentData.nama_lengkap || surat.student_name}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Kelas</td>
                          <td className="py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-semibold">{studentData.rombel || surat.student_class}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  {/* PARAGRAF AJAKAN & RINCIAN PERTEMUAN */}
                  <p className="m-0 pt-1 leading-relaxed">
                    Maka dengan ini kami mengharapkan kehadiran Bapak/Ibu pada:
                  </p>

                  <div className="pl-6 py-0.5">
                    <table className="text-[11.5px]">
                      <tbody>
                        <tr>
                          <td className="w-20 py-0.5 align-top">Hari</td>
                          <td className="w-3 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-medium">{extraMeta.hariUndangan || "Selasa"}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Tanggal</td>
                          <td className="w-3 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-medium">
                            {extraMeta.tanggalUndangan ? formatTglIndo(extraMeta.tanggalUndangan) : tanggalCetak}
                          </td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Waktu</td>
                          <td className="w-3 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-medium">{extraMeta.waktuUndangan || "Pukul 10.00 WIB"}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Tempat</td>
                          <td className="w-3 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-medium">{extraMeta.tempatUndangan || "Ruang Transisi"}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  {/* PARAGRAF PENUTUP */}
                  <p className="m-0 pt-2 leading-relaxed">
                    Mengingat pentingnya hal tersebut, kami sangat mengharapkan kehadiran Bapak/Ibu tepat pada waktunya. Atas perhatian dan kerja samanya kami ucapkan terima kasih.
                  </p>
                </div>

                {/* TANDA TANGAN (ALIGN RIGHT) */}
                <div className="mt-8 flex justify-end">
                  <div className="w-60 text-left text-[11.5px]" style={{ textAlign: "left" }}>
                    <p className="m-0">{surat.jabatan_penandatangan || "Kepala SMA BPI 1"},</p>

                    {/* Spasi rongga tanda tangan & stempel fisik (sekitar 65px) */}
                    <div style={{ height: "65px", minHeight: "65px" }} />

                    <p className="underline m-0 text-[12px]" style={{ fontWeight: 400 }}>
                      {formatNamaKepsek(penandatangan.nama || surat.pejabat_penandatangan || "Tatang, M.Pd")}
                    </p>
                    <p className="text-[11px] text-black m-0 mt-0.5" style={{ fontWeight: 400 }}>
                      NIPY. {(penandatangan.nipy || surat.nip_penandatangan || "10079").replace(/^NIPY\.?\s*/i, "")}
                    </p>
                  </div>
                </div>
              </div>
            ) : isSuratGty ? (
              <div className="text-[11.5px] space-y-3 leading-relaxed text-black">
                {/* JUDUL SURAT & NOMOR */}
                <div className="text-center mb-4">
                  <h3 className="text-[14px] font-bold uppercase tracking-wide underline m-0">
                    SURAT KETERANGAN
                  </h3>
                  <p className="text-[11px] text-black mt-0.5 m-0 font-medium">
                    Nomor : {displayNomorSurat}
                  </p>
                </div>

                {/* PIHAK PERTAMA (KEPALA SEKOLAH) */}
                <p className="m-0">Yang bertanda tangan di bawah ini :</p>
                <div className="pl-6 space-y-0.5">
                  <table className="w-full text-[11.5px]">
                    <tbody>
                      <tr>
                        <td className="w-44 py-0.5 align-top">Nama</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top font-bold text-black uppercase">
                          {penandatangan.nama || "Tatang, M.Pd"}
                        </td>
                      </tr>
                      <tr>
                        <td className="w-44 py-0.5 align-top">NIPY</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">
                          {(penandatangan.nipy || "10079").replace(/^NIPY\.?\s*/i, "")}
                        </td>
                      </tr>
                      <tr>
                        <td className="w-44 py-0.5 align-top">Jabatan</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">{penandatangan.jabatan || "Kepala Sekolah"}</td>
                      </tr>
                      <tr>
                        <td className="w-44 py-0.5 align-top">Unit Kerja</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">{penandatangan.unit_kerja || "SMA BPI 1 Bandung"}</td>
                      </tr>
                      <tr>
                        <td className="w-44 py-0.5 align-top">Kota</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">{penandatangan.kota || "Bandung"}</td>
                      </tr>
                      <tr>
                        <td className="w-44 py-0.5 align-top">Provinsi</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">{penandatangan.provinsi || "Jawa Barat"}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                {/* PIHAK KEDUA (GURU YANG DITERANGKAN) */}
                <p className="m-0 pt-1">Menerangkan dengan sebenarnya bahwa :</p>
                <div className="pl-6 space-y-0.5">
                  <table className="w-full text-[11.5px]">
                    <tbody>
                      <tr>
                        <td className="w-44 py-0.5 align-top">Nama</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top font-bold text-black uppercase">
                          {extraMeta.gtyNama || surat.student_name || "-"}
                        </td>
                      </tr>
                      <tr>
                        <td className="w-44 py-0.5 align-top">Tempat,Tanggal lahir</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">
                          {extraMeta.gtyTtl || "-"}
                        </td>
                      </tr>
                      <tr>
                        <td className="w-44 py-0.5 align-top">Jabatan</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">
                          {extraMeta.gtyJabatan || "-"}
                        </td>
                      </tr>
                      <tr>
                        <td className="w-44 py-0.5 align-top">Pendidikan Terakhir</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">
                          {extraMeta.gtyPendidikan || "-"}
                        </td>
                      </tr>
                      <tr>
                        <td className="w-44 py-0.5 align-top">Alamat</td>
                        <td className="w-3 py-0.5 align-top text-center">:</td>
                        <td className="py-0.5 align-top">
                          {extraMeta.gtyAlamat || "-"}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                {/* PARAGRAF KETERANGAN STATUS */}
                <p className="m-0 pt-2 leading-relaxed text-justify">
                  Adalah benar Guru Tetap Yayasan (GTY) yang masih aktif sebagai Guru <b>{extraMeta.gtyMapel || surat.student_class?.replace(/^Guru\s+/i, "") || "-"}</b> SMA BPI 1 Bandung sampai dengan saat ini.
                </p>

                {/* PARAGRAF PENUTUP */}
                <p className="m-0 pt-1.5 leading-relaxed text-justify">
                  Demikian surat ini dibuat dengan sebenar-benarnya agar dapat digunakan sebagai mana mestinya.
                </p>

                {/* FOOTER / TANDA TANGAN */}
                <div className="mt-8 flex justify-end">
                  <div className="w-60 text-left text-[11.5px]" style={{ textAlign: "left" }}>
                    <p className="m-0 font-normal">Bandung, {tanggalCetak}</p>
                    <p className="m-0 font-normal">Kepala SMA BPI 1,</p>
                    <div style={{ height: "65px", minHeight: "65px" }} />
                    <p className="underline m-0 text-[12px] font-bold">
                      {formatNamaKepsek(penandatangan.nama || "Tatang, M.Pd")}
                    </p>
                    <p className="text-[11px] text-black m-0 mt-0.5 font-normal">
                      NIPY {(penandatangan.nipy || "10079").replace(/^NIPY\.?\s*/i, "")}
                    </p>
                  </div>
                </div>
              </div>
            ) : (
              <>
                {/* JUDUL SURAT & NOMOR */}
                <div className="text-center mb-4">
                  <h3 className="text-[14px] font-bold uppercase tracking-wide underline m-0">
                    SURAT KETERANGAN
                  </h3>
                  <p className="text-[11px] text-black mt-0.5 m-0 font-medium">
                    Nomor : {displayNomorSurat}
                  </p>
                </div>

                {isSuratUtbk ? (
              <>
                <div className="text-[11.5px] space-y-2 text-justify leading-relaxed">
                  {/* SECTION 1: PIHAK PERTAMA */}
                  <p className="m-0">
                    Yang bertanda tangan di bawah ini :
                  </p>

                  <div className="pl-6 space-y-0.5">
                    <table className="w-full text-[11px]">
                      <tbody>
                        <tr>
                          <td className="w-36 py-0.5 align-top">Nama</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-bold text-black uppercase">
                            {penandatangan.nama || "Tatang, M.Pd"}
                          </td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">NIPY</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">
                            {(penandatangan.nipy || "10079").replace(/^NIPY\.?\s*/i, "")}
                          </td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Jabatan</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{penandatangan.jabatan || "Kepala Sekolah"}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Unit Kerja</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{penandatangan.unit_kerja || "SMA BPI 1 Bandung"}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Kota</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{penandatangan.kota || "Bandung"}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Provinsi</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{penandatangan.provinsi || "Jawa Barat"}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  {/* SECTION 2: IDENTITAS SISWA */}
                  <p className="m-0 pt-1">
                    Dengan ini menerangkan bahwa siswa dengan identitas yang tercantum di bawah ini :
                  </p>

                  <div className="pl-6 space-y-0.5">
                    <table className="w-full text-[11px]">
                      <tbody>
                        <tr>
                          <td className="w-36 py-0.5 align-top">Nama</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-bold text-black uppercase">
                            {studentData.nama_lengkap}
                          </td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Nomor Induk</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-semibold">{studentData.nis}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Nisn</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{studentData.nisn || "-"}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Tempat Tanggal & Lahir</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{extraMeta.tempatTanggalLahir || studentData.ttl || "-"}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Nama Orang Tua</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{extraMeta.namaOrtu || studentData.nama_ortu_wali || "-"}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Alamat</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{extraMeta.alamat || studentData.alamat || "-"}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  {/* PARAGRAF PERNYATAAN */}
                  <p className="m-0 pt-1.5 leading-relaxed">
                    Adalah benar siswa SMA BPI 1 Bandung kelas <b>{studentData.rombel}</b> Program <b>{extraMeta.programKurikulum || "Kurikulum Merdeka Belajar"}</b> pada Tahun Pelajaran <b>{surat.tahun_ajaran}</b> dan sampai saat ini masih aktif mengikuti pembelajaran di SMA BPI 1 Bandung.
                  </p>

                  {/* PARAGRAF PENUTUP */}
                  <p className="m-0 pt-1.5 leading-relaxed">
                    Demikian surat keterangan ini dibuat dengan sesungguhnya agar dapat digunakan sebagaimana mestinya.
                  </p>
                </div>

                {/* FOOTER / TANDA TANGAN UTBK */}
                <div
                  className="signature-block signature-section"
                  style={{
                    display: "flex",
                    justifyContent: "flex-end",
                    alignItems: "flex-end",
                    marginTop: "30px",
                  }}
                >
                  {/* Area Tanda Tangan Kepala Sekolah */}
                  <div
                    className="ttd-box"
                    style={{
                      textAlign: "left",
                      minWidth: "220px",
                    }}
                  >
                    <p style={{ margin: "0" }}>Bandung, {tanggalCetak}</p>
                    <p style={{ margin: "0 0 65px 0" }}>Kepala Sekolah,</p>

                    <p style={{ margin: "0", fontWeight: "normal", textDecoration: "underline" }}>
                      {formatNamaKepsek(penandatangan.nama)}
                    </p>
                    <p style={{ margin: "0" }}>
                      NIPY {(penandatangan.nipy || "10079").replace(/^NIPY\.?\s*/i, "")}
                    </p>
                  </div>
                </div>
              </>
            ) : (
              <>
                <div className="text-[11.5px] space-y-2 text-justify leading-relaxed">
                  {/* PENANDATANGAN */}
                  <p className="m-0">
                    Yang bertanda tangan di bawah ini :
                  </p>

                  <div className="pl-6 space-y-0.5">
                    <table className="w-full text-[11px]">
                      <tbody>
                        <tr>
                          <td className="w-32 py-0.5 align-top">Nama</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-bold text-black uppercase">
                            {penandatangan.nama}
                          </td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">NIPY</td>
                          <td className="py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{penandatangan.nipy}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Jabatan</td>
                          <td className="py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{penandatangan.jabatan}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Unit Kerja</td>
                          <td className="py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{penandatangan.unit_kerja}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Kota / Provinsi</td>
                          <td className="py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">
                            {penandatangan.kota}, {penandatangan.provinsi}
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  {/* IDENTITAS SISWA */}
                  <p className="m-0 pt-1">
                    Menerangkan dengan sebenarnya bahwa :
                  </p>

                  <div className="pl-6 space-y-0.5">
                    <table className="w-full text-[11px]">
                      <tbody>
                        <tr>
                          <td className="w-32 py-0.5 align-top">Nama Lengkap</td>
                          <td className="w-4 py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-bold text-black uppercase">
                            {studentData.nama_lengkap}
                          </td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Nomor Induk (NIS)</td>
                          <td className="py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top font-semibold">{studentData.nis}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">NISN</td>
                          <td className="py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{studentData.nisn || "-"}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Tempat, Tanggal Lahir</td>
                          <td className="py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{studentData.ttl || "-"}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Nama Orang Tua / Wali</td>
                          <td className="py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{studentData.nama_ortu_wali || "-"}</td>
                        </tr>
                        <tr>
                          <td className="py-0.5 align-top">Alamat Siswa</td>
                          <td className="py-0.5 align-top text-center">:</td>
                          <td className="py-0.5 align-top">{studentData.alamat || "-"}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  {/* NARASI KELAS & NILAI */}
                  <p className="m-0 pt-1">
                    Adalah benar siswa tersebut tercatat sebagai peserta didik di SMA BPI 1 Bandung, menduduki kelas{" "}
                    <b>{studentData.rombel}</b> Tahun Pelajaran <b>{surat.tahun_ajaran}</b> dengan nilai rata-rata sebagai berikut:
                  </p>

                  {/* TABEL NILAI SEMESTER DINAMIS */}
                  <div className="my-2">
                    <table className="w-full border-collapse border border-black text-[10.5px]">
                      <thead>
                        <tr className="bg-slate-100 print:bg-transparent">
                          <th className="border border-black px-2 py-1 text-center w-10 font-bold">
                            No
                          </th>
                          <th className="border border-black px-2 py-1 text-center w-28 font-bold">
                            Kelas
                          </th>
                          <th className="border border-black px-2 py-1 text-center w-28 font-bold">
                            Semester
                          </th>
                          <th className="border border-black px-2 py-1 text-center font-bold">
                            Tahun Pelajaran
                          </th>
                          <th className="border border-black px-2 py-1 text-center w-32 font-bold">
                            Nilai Rata-rata
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        {semesterGrades.length === 0 ? (
                          <tr>
                            <td
                              colSpan={5}
                              className="border border-black px-2 py-1 text-center text-slate-500 italic"
                            >
                              Data nilai belum tersedia pada sistem rapor
                            </td>
                          </tr>
                        ) : (
                          semesterGrades.map((row, idx) => (
                            <tr key={row.semesterNumber}>
                              <td className="border border-black px-2 py-0.5 text-center">
                                {idx + 1}
                              </td>
                              <td className="border border-black px-2 py-0.5 text-center">
                                {row.tingkat}
                              </td>
                              <td className="border border-black px-2 py-0.5 text-center font-medium">
                                {row.semesterLabel}
                              </td>
                              <td className="border border-black px-2 py-0.5 text-center">
                                {row.tahunAjaran}
                              </td>
                              <td className="border border-black px-2 py-0.5 text-center font-bold">
                                {row.rataRata !== null && row.rataRata !== undefined
                                  ? Number(row.rataRata).toFixed(2)
                                  : "-"}
                              </td>
                            </tr>
                          ))
                        )}
                        {/* BARIS RATA-RATA KUMULATIF */}
                        <tr className="font-bold bg-slate-50 print:bg-transparent">
                          <td
                            colSpan={4}
                            className="border border-black px-3 py-1 text-center uppercase tracking-wider font-extrabold"
                          >
                            RATA RATA
                          </td>
                          <td className="border border-black px-2 py-1 text-center font-black text-[11px]">
                            {rataRataKumulatif !== null && rataRataKumulatif !== undefined
                              ? Number(rataRataKumulatif).toFixed(2)
                              : "-"}
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  {/* PARAGRAF PENUTUP */}
                  <p className="m-0 pt-2">
                    Demikian surat keterangan ini kami buat dengan sebenarnya agar dapat dipergunakan sebagaimana mestinya dan pihak yang berkepentingan menjadi maklum.
                  </p>
                </div>

                {/* TANDA TANGAN KEPALA SEKOLAH */}
                <div className="mt-8 flex justify-end signature-block signature-section">
                  <div className="w-60 text-left text-[11.5px] font-normal" style={{ textAlign: "left" }}>
                    <p className="m-0 font-normal">Bandung, {tanggalCetak}</p>
                    <p className="m-0 font-normal">Kepala Sekolah</p>

                    {/* Spasi rongga tanda tangan & stempel fisik (sekitar 60px s.d. 80px) */}
                    <div style={{ height: "70px", minHeight: "70px" }} />

                    <p className="font-normal underline m-0 text-[12px]" style={{ fontWeight: 400 }}>
                      {formatNamaKepsek(penandatangan.nama)}
                    </p>
                    <p className="font-normal text-[11px] text-black m-0 mt-0.5" style={{ fontWeight: 400 }}>
                      {formatNipy(penandatangan.nipy)}
                    </p>
                  </div>
                </div>
              </>
            )}
          </>
        )}
          </div>
        )}
      </div>
    </Modal>
  );
};