import React, { useState, useEffect } from "react";
import { UmkRequest } from "../../types/umk";
import { 
  generateUmkQrDataUrl, 
  generateUmkSecurityHash 
} from "../../utils/umkQrGenerator";
import { 
  Printer, 
  X, 
  Download, 
  FileText, 
  Building2, 
  Receipt, 
  CheckCircle2, 
  ShieldCheck, 
  Calendar, 
  AlertCircle,
  Layers,
  DollarSign,
  ArrowDownLeft,
  ArrowUpRight,
  QrCode
} from "lucide-react";

interface UmkPrintDocProps {
  umk: UmkRequest;
  initialDocType?: "LPJ_RECONCILIATION" | "VOUCHER_1_RETURN" | "VOUCHER_2_REALIZATION" | "VOUCHER_OUT_INITIAL";
  onClose: () => void;
  onOpenValidator?: (umk: UmkRequest) => void;
}

export const UmkPrintDoc: React.FC<UmkPrintDocProps> = ({
  umk,
  initialDocType = "LPJ_RECONCILIATION",
  onClose,
  onOpenValidator
}) => {
  const [docType, setDocType] = useState<"LPJ_RECONCILIATION" | "VOUCHER_1_RETURN" | "VOUCHER_2_REALIZATION" | "VOUCHER_OUT_INITIAL">(initialDocType);
  const [qrDataUrl, setQrDataUrl] = useState<string>("");

  useEffect(() => {
    generateUmkQrDataUrl(umk, docType)
      .then((url) => setQrDataUrl(url))
      .catch((err) => console.error("Error generating printable QR:", err));
  }, [umk, docType]);

  const securityHash = generateUmkSecurityHash(umk, docType);

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

  const formatRupiah = (amount: number) => {
    return new Intl.NumberFormat("id-ID", {
      style: "currency",
      currency: "IDR",
      maximumFractionDigits: 0
    }).format(amount);
  };

  const formatDateIndo = (dateStr: string) => {
    if (!dateStr || dateStr === "-") return "-";
    try {
      const d = new Date(dateStr);
      return d.toLocaleDateString("id-ID", {
        day: "numeric",
        month: "long",
        year: "numeric"
      });
    } catch {
      return dateStr;
    }
  };

  // Helper number to words in Indonesian (Terbilang)
  const numberToWordsIndo = (num: number): string => {
    if (num === 0) return "Nol Rupiah";
    const satuan = ["", "Satu", "Dua", "Tiga", "Empat", "Lima", "Enam", "Tujuh", "Delapan", "Sembilan", "Sepuluh", "Sebelas"];
    
    function terbilang(n: number): string {
      if (n < 12) return satuan[n];
      if (n < 20) return terbilang(n - 10) + " Belas";
      if (n < 100) return terbilang(Math.floor(n / 10)) + " Puluh " + terbilang(n % 10);
      if (n < 200) return "Seratus " + terbilang(n - 100);
      if (n < 1000) return terbilang(Math.floor(n / 100)) + " Ratus " + terbilang(n % 100);
      if (n < 2000) return "Seribu " + terbilang(n - 1000);
      if (n < 1000000) return terbilang(Math.floor(n / 1000)) + " Ribu " + terbilang(n % 1000);
      if (n < 1000000000) return terbilang(Math.floor(n / 1000000)) + " Juta " + terbilang(n % 1000000);
      if (n < 1000000000000) return terbilang(Math.floor(n / 1000000000)) + " Milyar " + terbilang(n % 1000000000);
      return "";
    }
    
    return terbilang(Math.round(num)).trim().replace(/\s+/g, ' ') + " Rupiah";
  };

  const initialAmount = umk.disbursementVoucher.amount;
  const realizedAmount = umk.realizationVoucher.totalRealizedAmount;
  const returnAmount = umk.returnVoucher.returnAmount;
  const totalAccounted = realizedAmount + returnAmount;
  const balanceDiff = initialAmount - totalAccounted;

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-950/85 backdrop-blur-sm flex justify-center items-start p-2 sm:p-6 print:p-0 print:bg-white">
      <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-5xl shadow-2xl overflow-hidden my-4 print:my-0 print:border-none print:shadow-none print:bg-white text-slate-100 print:text-black">
        
        {/* Navigation & Controls (Hidden in Print) */}
        <div className="bg-slate-800/90 px-6 py-4 border-b border-slate-700 flex flex-wrap items-center justify-between gap-3 print:hidden">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-emerald-500/20 text-emerald-400 rounded-lg">
              <FileText className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-base font-bold text-white flex items-center gap-2">
                Pratinjau Cetak Dokumen UMK & LPJ Kas Kecil GA
                <span className="text-xs font-mono bg-sky-500/20 text-sky-300 border border-sky-500/30 px-2 py-0.5 rounded">
                  {umk.umkNumber}
                </span>
              </h2>
              <p className="text-xs text-slate-400">
                Format Standar Cetak Kertas A4 Dokumen Keuangan & Perbendaharaan PT MEDIAN CLOUD
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            {/* Document Selector */}
            <div className="bg-slate-950 p-1 rounded-xl border border-slate-700 flex text-xs font-bold">
              <button
                onClick={() => setDocType("LPJ_RECONCILIATION")}
                className={`px-3 py-1.5 rounded-lg transition-all ${
                  docType === "LPJ_RECONCILIATION" ? "bg-emerald-500 text-slate-950 font-black" : "text-slate-400 hover:text-white"
                }`}
              >
                Rekonsiliasi LPJ (Gabungan 2 Voucher)
              </button>
              <button
                onClick={() => setDocType("VOUCHER_2_REALIZATION")}
                className={`px-3 py-1.5 rounded-lg transition-all ${
                  docType === "VOUCHER_2_REALIZATION" ? "bg-sky-500 text-slate-950 font-black" : "text-slate-400 hover:text-white"
                }`}
              >
                Voucher 2: Realisasi UMK
              </button>
              <button
                onClick={() => setDocType("VOUCHER_1_RETURN")}
                className={`px-3 py-1.5 rounded-lg transition-all ${
                  docType === "VOUCHER_1_RETURN" ? "bg-amber-500 text-slate-950 font-black" : "text-slate-400 hover:text-white"
                }`}
              >
                Voucher 1: Pengembalian UMK
              </button>
              <button
                onClick={() => setDocType("VOUCHER_OUT_INITIAL")}
                className={`px-3 py-1.5 rounded-lg transition-all ${
                  docType === "VOUCHER_OUT_INITIAL" ? "bg-purple-500 text-slate-950 font-black" : "text-slate-400 hover:text-white"
                }`}
              >
                Voucher Pengeluaran Awal
              </button>
            </div>

            <button
              onClick={() => onOpenValidator && onOpenValidator(umk)}
              className="px-3.5 py-2 bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs rounded-xl shadow flex items-center gap-1.5 transition-all cursor-pointer"
              title="Buka Scanner / Validator QR Dokumen Keuangan"
            >
              <QrCode className="w-4 h-4" />
              <span>Validasi QR Keuangan</span>
            </button>

            <button
              onClick={handlePrint}
              className="px-4 py-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs rounded-xl shadow-lg flex items-center gap-1.5 transition-all cursor-pointer"
            >
              <Printer className="w-4 h-4" />
              <span>Cetak / Simpan PDF</span>
            </button>

            <button
              onClick={onClose}
              className="p-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* PRINTABLE A4 CONTAINER */}
        <div className="p-8 sm:p-12 bg-white text-black font-sans text-xs leading-relaxed max-w-[210mm] mx-auto min-h-[297mm] shadow-lg print:shadow-none print:p-0">
          
          {/* ========================================================================= */}
          {/* VIEW 1: REKONSILIASI LPJ LENGKAP (GABUNGAN 2 VOUCHER) */}
          {/* ========================================================================= */}
          {docType === "LPJ_RECONCILIATION" && (
            <div className="space-y-5">
              
              {/* Kop Surat Perusahaan with Dynamic QR Verification Code */}
              <div className="border-b-2 border-black pb-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-black text-white flex items-center justify-center font-black text-xl rounded">
                      M
                    </div>
                    <div>
                      <h1 className="text-base font-black tracking-wider uppercase">PT MEDIA EKOSISTEM DIGITAL APLIKASI NASIONAL</h1>
                      <p className="text-[10px] text-gray-700 font-semibold tracking-wide">
                        MEDIAN CLOUD ENTERPRISE SYSTEM & FINANCIAL PERBENDAHARAAN
                      </p>
                      <p className="text-[9px] text-gray-500">
                        Gedung Cyber 2 Tower Lt. 18, Jl. H.R. Rasuna Said Blok X-5 No. 13, Jakarta Selatan 12950 | Telp: (021) 5299-8800
                      </p>
                    </div>
                  </div>
                  
                  {/* QR Code Verifikasi Header */}
                  <div className="flex items-center gap-2 border border-black p-1 rounded bg-gray-50 text-right shrink-0">
                    <div className="text-[8px] font-mono leading-tight">
                      <div className="font-bold text-black flex items-center justify-end gap-1">
                        <ShieldCheck className="w-3 h-3 text-emerald-700" />
                        <span>E-VERIFIKASI QR</span>
                      </div>
                      <div className="text-gray-800 font-bold">{umk.umkNumber}</div>
                      <div className="text-[7px] text-gray-500 font-normal">Pindai untuk validasi</div>
                    </div>
                    {qrDataUrl ? (
                      <img src={qrDataUrl} alt="QR Code Verifikasi" className="w-14 h-14 object-contain" />
                    ) : (
                      <div className="w-14 h-14 bg-gray-200 flex items-center justify-center text-[7px]">QR Code</div>
                    )}
                  </div>
                </div>
              </div>

              {/* Document Title */}
              <div className="text-center space-y-1">
                <h2 className="text-sm font-black uppercase tracking-wider underline">
                  LEMBAR PERTANGGUNGJAWABAN (LPJ) & REKONSILIASI KAS KECIL SEKSI UMUM (GA)
                </h2>
                <div className="font-mono text-xs font-bold text-gray-800">
                  Nomor Induk UMK: {umk.umkNumber}
                </div>
                <div className="text-[10px] text-gray-600">
                  Periode Operasional: <strong className="text-black">{umk.periodName}</strong> (Batas Waktu Maksimal 2 Minggu)
                </div>
              </div>

              {/* Data Umum Pemohon & Akun Anggaran */}
              <div className="border border-black p-3 space-y-2 bg-gray-50/50">
                <div className="grid grid-cols-2 gap-x-6 gap-y-1.5 text-[11px]">
                  <div className="flex">
                    <span className="w-36 font-bold text-gray-700">Unit Kerja / Seksi:</span>
                    <span className="font-semibold">{umk.department}</span>
                  </div>
                  <div className="flex">
                    <span className="w-36 font-bold text-gray-700">Tgl. Pencairan UMK:</span>
                    <span className="font-mono font-bold">{formatDateIndo(umk.disbursementDate)}</span>
                  </div>
                  <div className="flex">
                    <span className="w-36 font-bold text-gray-700">Penanggung Jawab (PIC):</span>
                    <span>{umk.requesterName} (NIP: {umk.requesterNip})</span>
                  </div>
                  <div className="flex">
                    <span className="w-36 font-bold text-gray-700">Batas Waktu LPJ (2 Minggu):</span>
                    <span className="font-mono font-bold text-black">{formatDateIndo(umk.dueDate)}</span>
                  </div>
                  <div className="flex">
                    <span className="w-36 font-bold text-gray-700">Pemegang Kasir Kas Kecil:</span>
                    <span>{umk.custodianName} (NIP: {umk.custodianNip})</span>
                  </div>
                  <div className="flex">
                    <span className="w-36 font-bold text-gray-700">Tgl. Pelaporan LPJ:</span>
                    <span className="font-mono">{formatDateIndo(umk.realizationVoucher.submissionDate || umk.updatedAt)}</span>
                  </div>
                  <div className="flex col-span-2">
                    <span className="w-36 font-bold text-gray-700 shrink-0">1 Akun Anggaran UMK:</span>
                    <span className="font-mono font-bold">{umk.disbursementVoucher.budgetAccountName}</span>
                  </div>
                  <div className="flex col-span-2">
                    <span className="w-36 font-bold text-gray-700 shrink-0">Maksud Penggunaan:</span>
                    <span className="italic text-gray-800">{umk.purpose}</span>
                  </div>
                </div>
              </div>

              {/* Rekapitulasi Kas & Pertanggungjawaban 2 Voucher */}
              <div className="space-y-2">
                <div className="font-bold text-[11px] uppercase tracking-wider text-black flex items-center justify-between border-b border-black pb-1">
                  <span>I. REKAPITULASI DUA (2) VOUCHER PERTANGGUNGJAWABAN KE BAGIAN KEUANGAN</span>
                  <span className="font-mono text-[10px] text-gray-600">Mata Uang: Rupiah (IDR)</span>
                </div>

                <table className="w-full border-collapse border border-black text-[11px]">
                  <thead>
                    <tr className="bg-gray-200 text-center font-bold">
                      <th className="border border-black p-2 w-10">No</th>
                      <th className="border border-black p-2 text-left">Komponen Dokumen Pertanggungjawaban</th>
                      <th className="border border-black p-2 text-left w-48">Nomor Voucher Resmi</th>
                      <th className="border border-black p-2 text-right w-40">Jumlah Nominal (Rp)</th>
                    </tr>
                  </thead>
                  <tbody>
                    {/* Dana Awal */}
                    <tr className="font-semibold bg-gray-50">
                      <td className="border border-black p-2 text-center">A</td>
                      <td className="border border-black p-2">
                        <strong>Uang Muka Kerja (UMK) Kas Kecil Diterima Awal</strong>
                        <div className="text-[10px] text-gray-600 font-normal font-mono">
                          Akun: {umk.disbursementVoucher.budgetAccountCode} ({umk.disbursementVoucher.paymentMethod})
                        </div>
                      </td>
                      <td className="border border-black p-2 font-mono">{umk.disbursementVoucher.voucherNumber}</td>
                      <td className="border border-black p-2 text-right font-mono font-bold">{formatRupiah(initialAmount)}</td>
                    </tr>

                    {/* Voucher 2: Realisasi Belanja */}
                    <tr>
                      <td className="border border-black p-2 text-center font-bold">B</td>
                      <td className="border border-black p-2">
                        <strong>VOUCHER REALISASI BELANJA UMK (VOUCHER 2)</strong>
                        <div className="text-[10px] text-gray-600">
                          Realisasi {umk.realizationVoucher.expenseItems.length} Transaksi Belanja Sah (Expendables & Operasional)
                        </div>
                      </td>
                      <td className="border border-black p-2 font-mono text-sky-900 font-bold">{umk.realizationVoucher.voucherNumber}</td>
                      <td className="border border-black p-2 text-right font-mono font-bold text-sky-900">{formatRupiah(realizedAmount)}</td>
                    </tr>

                    {/* Voucher 1: Pengembalian UMK */}
                    <tr>
                      <td className="border border-black p-2 text-center font-bold">C</td>
                      <td className="border border-black p-2">
                        <strong>VOUCHER PENGEMBALIAN SISA UMK (VOUCHER 1)</strong>
                        <div className="text-[10px] text-gray-600">
                          Sisa kas kecil disetor kembali ke kasir keuangan via Bukti Setor No: {umk.returnVoucher.receiptNumber || "-"}
                        </div>
                      </td>
                      <td className="border border-black p-2 font-mono text-amber-900 font-bold">{umk.returnVoucher.voucherNumber}</td>
                      <td className="border border-black p-2 text-right font-mono font-bold text-amber-900">{formatRupiah(returnAmount)}</td>
                    </tr>

                    {/* Total Pertanggungjawaban */}
                    <tr className="bg-gray-100 font-bold">
                      <td className="border border-black p-2 text-center" colSpan={2}>
                        TOTAL PERTANGGUNGJAWABAN (B + C)
                      </td>
                      <td className="border border-black p-2 font-mono text-center">VOUCHER 1 + 2</td>
                      <td className="border border-black p-2 text-right font-mono text-sm">{formatRupiah(totalAccounted)}</td>
                    </tr>

                    {/* Rekonsiliasi Saldo Akhir */}
                    <tr className="bg-gray-200 font-black text-xs">
                      <td className="border border-black p-2 text-center" colSpan={2}>
                        STATUS REKONSILIASI SALDO KAS KECIL [ A - (B + C) ]
                      </td>
                      <td className="border border-black p-2 text-center font-mono">
                        {balanceDiff === 0 ? "SEIMBANG (NIHIL)" : balanceDiff > 0 ? "LEBIH BAYAR" : "KURANG BAYAR"}
                      </td>
                      <td className="border border-black p-2 text-right font-mono text-sm">
                        {formatRupiah(balanceDiff)}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              {/* Rincian Singkat Realisasi Belanja Expendables */}
              <div className="space-y-1.5">
                <div className="font-bold text-[11px] uppercase tracking-wider text-black border-b border-black pb-1">
                  II. RINGKASAN MATA ANGGARAN BELANJA EXPENDABLES & OPERASIONAL
                </div>

                <table className="w-full border-collapse border border-black text-[10px]">
                  <thead>
                    <tr className="bg-gray-100 text-center font-bold">
                      <th className="border border-black p-1.5 w-8">No</th>
                      <th className="border border-black p-1.5 text-left w-24">Kode Akun</th>
                      <th className="border border-black p-1.5 text-left">Nama Mata Anggaran / Pos Belanja</th>
                      <th className="border border-black p-1.5 text-center w-28">Kategori</th>
                      <th className="border border-black p-1.5 text-right w-28">Jumlah (Rp)</th>
                    </tr>
                  </thead>
                  <tbody>
                    {umk.realizationVoucher.expenseItems.map((item, idx) => (
                      <tr key={item.id}>
                        <td className="border border-black p-1 text-center font-mono">{idx + 1}</td>
                        <td className="border border-black p-1 font-mono font-bold">{item.budgetCode}</td>
                        <td className="border border-black p-1">
                          <span className="font-semibold">{item.budgetName.split("-")[1] || item.budgetName}</span>
                          <div className="text-[9px] text-gray-600 italic truncate max-w-sm">{item.itemDescription}</div>
                        </td>
                        <td className="border border-black p-1 text-center font-bold">
                          {item.isExpendables ? "EXPENDABLES" : "OPERASIONAL"}
                        </td>
                        <td className="border border-black p-1 text-right font-mono font-semibold">{formatRupiah(item.amount)}</td>
                      </tr>
                    ))}
                  </tbody>
                  <tfoot>
                    <tr className="bg-gray-100 font-bold">
                      <td className="border border-black p-1.5 text-right" colSpan={4}>TOTAL REALISASI BELANJA:</td>
                      <td className="border border-black p-1.5 text-right font-mono text-xs">{formatRupiah(realizedAmount)}</td>
                    </tr>
                  </tfoot>
                </table>
              </div>

              {/* Terbilang & Catatan Rekonsiliasi */}
              <div className="border border-gray-400 p-2.5 rounded bg-gray-50 text-[10px] space-y-1">
                <div>
                  <strong>Terbilang Realisasi:</strong> <em>"{numberToWordsIndo(realizedAmount)}"</em>
                </div>
                <div>
                  <strong>Terbilang Pengembalian Sisa:</strong> <em>"{numberToWordsIndo(returnAmount)}"</em>
                </div>
                <div className="text-gray-600 text-[9px] pt-1 border-t border-gray-300">
                  Pernyataan: Seluruh bukti pengeluaran dan kuitansi transaksi yang dilampirkan adalah sah, benar terjadi untuk operasional harian perusahaan, serta dipertanggungjawabkan sesuai SOP Perbendaharaan maksimal 2 minggu.
                </div>
              </div>

              {/* Matriks 4 Tanda Tangan */}
              <div className="pt-4">
                <table className="w-full text-center text-[10px] border-collapse">
                  <tbody>
                    <tr>
                      <td className="w-1/4 pb-3 align-top">
                        <div className="font-semibold text-gray-700">Dibuat & Dipertanggungjawabkan:</div>
                        <div className="font-bold">Pemegang Kas Kecil GA</div>
                        <div className="my-1.5 p-1 bg-gray-50 border border-gray-300 rounded text-[7px] font-mono text-gray-600">
                          <span className="text-emerald-700 font-bold">✓ TTE Digital GA</span>
                          <div className="truncate">SIG: {securityHash.substring(0, 16)}</div>
                        </div>
                      </td>
                      <td className="w-1/4 pb-3 align-top">
                        <div className="font-semibold text-gray-700">Disetujui & Diperiksa:</div>
                        <div className="font-bold">Kepala Seksi Umum (GA Head)</div>
                        <div className="my-1.5 p-1 bg-gray-50 border border-gray-300 rounded text-[7px] font-mono text-gray-600">
                          <span className="text-emerald-700 font-bold">✓ TTE Approval Kasie</span>
                          <div className="truncate">SIG: {securityHash.substring(0, 16)}</div>
                        </div>
                      </td>
                      <td className="w-1/4 pb-3 align-top">
                        <div className="font-semibold text-gray-700">Diterima & Diverifikasi:</div>
                        <div className="font-bold">Kasir / Perbendaharaan Keuangan</div>
                        <div className="my-1.5 p-1 bg-gray-50 border border-gray-300 rounded text-[7px] font-mono text-gray-600">
                          <span className="text-sky-700 font-bold">✓ TTE Verifikasi Keuangan</span>
                          <div className="truncate">SIG: {securityHash.substring(0, 16)}</div>
                        </div>
                      </td>
                      <td className="w-1/4 pb-3 align-top">
                        <div className="font-semibold text-gray-700">Disahkan Oleh:</div>
                        <div className="font-bold">CFO / Direktur Keuangan</div>
                        <div className="my-1.5 p-1 bg-gray-50 border border-gray-300 rounded text-[7px] font-mono text-gray-600">
                          <span className="text-emerald-700 font-bold">✓ TTE Sah Direksi</span>
                          <div className="truncate">SIG: {securityHash.substring(0, 16)}</div>
                        </div>
                      </td>
                    </tr>
                    <tr className="font-bold">
                      <td className="border-t border-black pt-1">
                        <div><u>{umk.custodianName}</u></div>
                        <div className="text-[9px] font-mono text-gray-600 font-normal">NIP: {umk.custodianNip}</div>
                      </td>
                      <td className="border-t border-black pt-1">
                        <div><u>{umk.requesterName}</u></div>
                        <div className="text-[9px] font-mono text-gray-600 font-normal">NIP: {umk.requesterNip}</div>
                      </td>
                      <td className="border-t border-black pt-1">
                        <div><u>{umk.returnVoucher.receivedByName || "Dewi Lestari, S.E."}</u></div>
                        <div className="text-[9px] font-mono text-gray-600 font-normal">NIP: {umk.returnVoucher.receivedByNip || "199120150028"}</div>
                      </td>
                      <td className="border-t border-black pt-1">
                        <div><u>{umk.disbursementVoucher.disbursedBy.split("(")[0].trim()}</u></div>
                        <div className="text-[9px] font-mono text-gray-600 font-normal">NIP: {umk.disbursementVoucher.disbursedByNip}</div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

            </div>
          )}

          {/* ========================================================================= */}
          {/* VIEW 2: VOUCHER 2 - REALISASI BELANJA UMK (EXPENDABLES & KUITANSI) */}
          {/* ========================================================================= */}
          {docType === "VOUCHER_2_REALIZATION" && (
            <div className="space-y-5">
              {/* Header with QR Code Realisasi */}
              <div className="border-b-2 border-black pb-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-sky-900 text-white flex items-center justify-center font-black text-xl rounded">
                      M
                    </div>
                    <div>
                      <h1 className="text-base font-black tracking-wider uppercase">PT MEDIA EKOSISTEM DIGITAL APLIKASI NASIONAL</h1>
                      <p className="text-[10px] text-gray-700 font-semibold tracking-wide">
                        BAGIAN PERBENDAHARAAN & AKUNTANSI KEUANGAN
                      </p>
                    </div>
                  </div>
                  
                  <div className="flex items-center gap-3">
                    {/* QR Code Realisasi */}
                    <div className="flex items-center gap-2 border border-sky-600 p-1 rounded bg-sky-50 text-right shrink-0">
                      <div className="text-[8px] font-mono leading-tight">
                        <div className="font-bold text-sky-950 flex items-center justify-end gap-1">
                          <ShieldCheck className="w-3 h-3 text-sky-700" />
                          <span>QR REALISASI</span>
                        </div>
                        <div className="text-sky-900 font-bold truncate max-w-[85px]">{umk.realizationVoucher.voucherNumber}</div>
                        <div className="text-[7px] text-gray-500 font-normal">Scan Verifikasi Keuangan</div>
                      </div>
                      {qrDataUrl ? (
                        <img src={qrDataUrl} alt="QR Realisasi" className="w-14 h-14 object-contain" />
                      ) : (
                        <div className="w-14 h-14 bg-gray-200" />
                      )}
                    </div>

                    <div className="text-right">
                      <div className="font-mono text-xs font-black bg-sky-100 border border-sky-400 px-2.5 py-1 rounded inline-block text-sky-950">
                        VOUCHER NO: {umk.realizationVoucher.voucherNumber}
                      </div>
                      <div className="text-[9px] text-gray-500 font-mono mt-1">Ref UMK: {umk.umkNumber}</div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="text-center space-y-0.5">
                <h2 className="text-sm font-black uppercase tracking-wider underline">
                  VOUCHER REALISASI BELANJA UANG MUKA KERJA (VOUCHER 2)
                </h2>
                <p className="text-[10px] text-gray-600">
                  Rincian Mata Anggaran Belanja Bahan Habis Pakai (Expendables) & Operasional Seksi Umum (GA) Beserta Kuitansi Sah
                </p>
              </div>

              <div className="border border-black p-3 text-[11px] grid grid-cols-2 gap-y-1.5 bg-gray-50">
                <div className="flex">
                  <span className="w-36 font-bold text-gray-700">Unit Kerja Pengaju:</span>
                  <span className="font-semibold">{umk.department}</span>
                </div>
                <div className="flex">
                  <span className="w-36 font-bold text-gray-700">Total Realisasi Belanja:</span>
                  <span className="font-mono font-bold text-sky-900 text-xs">{formatRupiah(realizedAmount)}</span>
                </div>
                <div className="flex">
                  <span className="w-36 font-bold text-gray-700">Akun Anggaran Induk:</span>
                  <span className="font-mono font-semibold">{umk.disbursementVoucher.budgetAccountName}</span>
                </div>
                <div className="flex">
                  <span className="w-36 font-bold text-gray-700">Tgl. Pengajuan LPJ:</span>
                  <span className="font-mono font-bold">{formatDateIndo(umk.realizationVoucher.submissionDate || umk.updatedAt)}</span>
                </div>
              </div>

              {/* Detail Table Rincian Mata Anggaran & Kuitansi Sah */}
              <div className="space-y-1">
                <div className="font-bold text-[11px] uppercase tracking-wider text-black flex items-center justify-between">
                  <span>TABEL RINCIAN MATA ANGGARAN BELANJA & NOMOR KUITANSI SAH</span>
                  <span className="text-[10px] font-normal text-gray-600 font-mono">
                    Total: {umk.realizationVoucher.expenseItems.length} Dokumen Kuitansi
                  </span>
                </div>

                <table className="w-full border-collapse border border-black text-[10px]">
                  <thead>
                    <tr className="bg-gray-200 text-center font-bold">
                      <th className="border border-black p-1.5 w-7">No</th>
                      <th className="border border-black p-1.5 text-left w-20">Tgl Transaksi</th>
                      <th className="border border-black p-1.5 text-left w-24">Kode Akun</th>
                      <th className="border border-black p-1.5 text-left">Uraian Belanja & Toko/Vendor</th>
                      <th className="border border-black p-1.5 text-left w-36">No. Kuitansi / Faktur Sah</th>
                      <th className="border border-black p-1.5 text-right w-24">Jumlah (Rp)</th>
                    </tr>
                  </thead>
                  <tbody>
                    {umk.realizationVoucher.expenseItems.map((item, idx) => (
                      <tr key={item.id} className="hover:bg-gray-50">
                        <td className="border border-black p-1.5 text-center font-mono">{idx + 1}</td>
                        <td className="border border-black p-1.5 font-mono">{item.transactionDate}</td>
                        <td className="border border-black p-1.5 font-mono font-bold">
                          {item.budgetCode}
                          <span className={`block text-[8px] uppercase font-sans font-bold ${
                            item.isExpendables ? "text-emerald-800" : "text-purple-800"
                          }`}>
                            {item.isExpendables ? "[EXPENDABLES]" : "[OPERASIONAL]"}
                          </span>
                        </td>
                        <td className="border border-black p-1.5">
                          <strong className="block text-black">{item.itemDescription}</strong>
                          <span className="text-[9px] text-gray-600">Vendor: {item.vendorName}</span>
                        </td>
                        <td className="border border-black p-1.5 font-mono">
                          <strong className="block text-black">{item.receiptNumber}</strong>
                          <span className="text-[8px] text-gray-500">{item.receiptType}</span>
                        </td>
                        <td className="border border-black p-1.5 text-right font-mono font-bold">{formatRupiah(item.amount)}</td>
                      </tr>
                    ))}
                  </tbody>
                  <tfoot>
                    <tr className="bg-gray-100 font-bold">
                      <td className="border border-black p-2 text-right uppercase" colSpan={5}>
                        TOTAL REALISASI VOUCHER 2 (KUITANSI SAH):
                      </td>
                      <td className="border border-black p-2 text-right font-mono text-xs text-sky-950 font-black">
                        {formatRupiah(realizedAmount)}
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>

              {/* Terbilang */}
              <div className="border border-gray-400 p-2.5 rounded bg-gray-50 text-[10px]">
                <strong>Terbilang Total Belanja:</strong> <em>"{numberToWordsIndo(realizedAmount)}"</em>
              </div>

              {/* Tanda Tangan */}
              <div className="pt-6">
                <table className="w-full text-center text-[10px] border-collapse">
                  <tbody>
                    <tr>
                      <td className="w-1/3 pb-3 align-top">
                        <div className="font-semibold text-gray-700">Dibuat Oleh:</div>
                        <div className="font-bold">Pemegang Kasir Kas Kecil GA</div>
                        <div className="my-1.5 p-1 bg-gray-50 border border-gray-300 rounded text-[7px] font-mono text-gray-600">
                          <span className="text-emerald-700 font-bold">✓ TTE Kasir GA</span>
                          <div className="truncate">SIG: {securityHash.substring(0, 16)}</div>
                        </div>
                      </td>
                      <td className="w-1/3 pb-3 align-top">
                        <div className="font-semibold text-gray-700">Diperiksa & Disetujui:</div>
                        <div className="font-bold">Kepala Seksi Umum (GA Head)</div>
                        <div className="my-1.5 p-1 bg-gray-50 border border-gray-300 rounded text-[7px] font-mono text-gray-600">
                          <span className="text-emerald-700 font-bold">✓ TTE Kasie GA</span>
                          <div className="truncate">SIG: {securityHash.substring(0, 16)}</div>
                        </div>
                      </td>
                      <td className="w-1/3 pb-3 align-top">
                        <div className="font-semibold text-gray-700">Diverifikasi & Dibukukan:</div>
                        <div className="font-bold">Bagian Akuntansi / Verifikasi Keuangan</div>
                        <div className="my-1.5 p-1 bg-gray-50 border border-gray-300 rounded text-[7px] font-mono text-gray-600">
                          <span className="text-sky-700 font-bold">✓ TTE Verifikasi Keuangan</span>
                          <div className="truncate">SIG: {securityHash.substring(0, 16)}</div>
                        </div>
                      </td>
                    </tr>
                    <tr className="font-bold">
                      <td className="border-t border-black pt-1">
                        <div><u>{umk.custodianName}</u></div>
                        <div className="text-[9px] font-mono text-gray-600 font-normal">NIP: {umk.custodianNip}</div>
                      </td>
                      <td className="border-t border-black pt-1">
                        <div><u>{umk.requesterName}</u></div>
                        <div className="text-[9px] font-mono text-gray-600 font-normal">NIP: {umk.requesterNip}</div>
                      </td>
                      <td className="border-t border-black pt-1">
                        <div><u>{umk.realizationVoucher.verifiedByFinanceName || "Hendra Wijaya, S.E., Ak., M.M."}</u></div>
                        <div className="text-[9px] font-mono text-gray-600 font-normal">NIP: {umk.realizationVoucher.verifiedByFinanceNip || "197019950002"}</div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

            </div>
          )}

          {/* ========================================================================= */}
          {/* VIEW 3: VOUCHER 1 - PENGEMBALIAN SISA UMK */}
          {/* ========================================================================= */}
          {docType === "VOUCHER_1_RETURN" && (
            <div className="space-y-6">
              {/* Header with QR Code */}
              <div className="border-b-2 border-black pb-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-amber-800 text-white flex items-center justify-center font-black text-xl rounded">
                      M
                    </div>
                    <div>
                      <h1 className="text-base font-black tracking-wider uppercase">PT MEDIA EKOSISTEM DIGITAL APLIKASI NASIONAL</h1>
                      <p className="text-[10px] text-gray-700 font-semibold tracking-wide">
                        PERBENDAHARAAN KAS & KASIR PUSAT KEUANGAN
                      </p>
                    </div>
                  </div>
                  
                  <div className="flex items-center gap-3">
                    <div className="flex items-center gap-2 border border-amber-600 p-1 rounded bg-amber-50 text-right shrink-0">
                      <div className="text-[8px] font-mono leading-tight">
                        <div className="font-bold text-amber-950 flex items-center justify-end gap-1">
                          <ShieldCheck className="w-3 h-3 text-amber-700" />
                          <span>QR PENGEMBALIAN</span>
                        </div>
                        <div className="text-amber-900 font-bold truncate max-w-[85px]">{umk.returnVoucher.voucherNumber}</div>
                        <div className="text-[7px] text-gray-500 font-normal">Bukti Setor Kasir</div>
                      </div>
                      {qrDataUrl ? (
                        <img src={qrDataUrl} alt="QR Pengembalian" className="w-14 h-14 object-contain" />
                      ) : (
                        <div className="w-14 h-14 bg-gray-200" />
                      )}
                    </div>

                    <div className="text-right">
                      <div className="font-mono text-xs font-black bg-amber-100 border border-amber-400 px-2.5 py-1 rounded inline-block text-amber-950">
                        VOUCHER NO: {umk.returnVoucher.voucherNumber}
                      </div>
                      <div className="text-[9px] text-gray-500 font-mono mt-1">Ref UMK: {umk.umkNumber}</div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="text-center space-y-0.5">
                <h2 className="text-sm font-black uppercase tracking-wider underline">
                  VOUCHER PENGEMBALIAN SISA UANG MUKA KERJA (VOUCHER 1)
                </h2>
                <p className="text-[10px] text-gray-600">
                  Tanda Bukti Setoran Pengembalian Sisa Kas Kecil Seksi Umum (GA) ke Kasir Perbendaharaan Keuangan
                </p>
              </div>

              <div className="border-2 border-amber-900/40 rounded-xl p-5 space-y-4 bg-amber-50/40">
                <div className="grid grid-cols-2 gap-y-3 text-xs">
                  <div className="flex">
                    <span className="w-40 font-bold text-gray-700">Telah Terima Dari:</span>
                    <span className="font-bold">{umk.custodianName} ({umk.department})</span>
                  </div>
                  <div className="flex">
                    <span className="w-40 font-bold text-gray-700">Tanggal Setor:</span>
                    <span className="font-mono font-bold">{formatDateIndo(umk.returnVoucher.returnDate)}</span>
                  </div>
                  <div className="flex">
                    <span className="w-40 font-bold text-gray-700">NIP Pemegang Kas:</span>
                    <span className="font-mono">{umk.custodianNip}</span>
                  </div>
                  <div className="flex">
                    <span className="w-40 font-bold text-gray-700">Metode Setoran:</span>
                    <span className="font-semibold">{umk.returnVoucher.returnMethod}</span>
                  </div>
                  <div className="flex">
                    <span className="w-40 font-bold text-gray-700">No. Bukti Setor Kasir (STS):</span>
                    <span className="font-mono font-bold text-amber-900">{umk.returnVoucher.receiptNumber || "-"}</span>
                  </div>
                  <div className="flex">
                    <span className="w-40 font-bold text-gray-700">Disetor Ke Rekening/Kas:</span>
                    <span className="font-semibold">{umk.returnVoucher.depositAccount}</span>
                  </div>
                </div>

                <div className="border-t border-b border-amber-900/30 py-3 flex items-center justify-between">
                  <span className="font-bold uppercase text-xs tracking-wider text-gray-800">
                    Jumlah Nominal Sisa Kas Yang Disetor:
                  </span>
                  <span className="font-mono text-xl font-black text-amber-950">
                    {formatRupiah(returnAmount)}
                  </span>
                </div>

                <div className="text-xs space-y-1">
                  <strong>Terbilang:</strong>
                  <div className="bg-white border border-amber-300 p-2.5 rounded font-serif italic text-gray-900">
                    "{numberToWordsIndo(returnAmount)}"
                  </div>
                </div>

                <div className="text-[10px] text-gray-600 italic">
                  Catatan Kasir: {umk.returnVoucher.notes || "Sisa dana kas kecil telah disetor penuh dan dicocokkan dengan fisik kas."}
                </div>
              </div>

              {/* Tanda Tangan */}
              <div className="pt-8">
                <table className="w-full text-center text-[10px] border-collapse">
                  <tbody>
                    <tr>
                      <td className="w-1/2 pb-3 align-top">
                        <div className="font-semibold text-gray-700">Yang Menyetor (Penyetor):</div>
                        <div className="font-bold">Pemegang Kasir Kas Kecil GA</div>
                        <div className="my-1.5 p-1 bg-gray-50 border border-gray-300 rounded text-[7px] font-mono text-gray-600">
                          <span className="text-amber-800 font-bold">✓ TTE Penyetor GA</span>
                          <div className="truncate">SIG: {securityHash.substring(0, 16)}</div>
                        </div>
                      </td>
                      <td className="w-1/2 pb-3 align-top">
                        <div className="font-semibold text-gray-700">Penerima Kas (Kasir Keuangan):</div>
                        <div className="font-bold">Perbendaharaan Kas Pusat</div>
                        <div className="my-1.5 p-1 bg-gray-50 border border-gray-300 rounded text-[7px] font-mono text-gray-600">
                          <span className="text-emerald-700 font-bold">✓ TTE Kasir Pusat</span>
                          <div className="truncate">SIG: {securityHash.substring(0, 16)}</div>
                        </div>
                      </td>
                    </tr>
                    <tr className="font-bold">
                      <td className="border-t border-black pt-1">
                        <div><u>{umk.custodianName}</u></div>
                        <div className="text-[9px] font-mono text-gray-600 font-normal">NIP: {umk.custodianNip}</div>
                      </td>
                      <td className="border-t border-black pt-1">
                        <div><u>{umk.returnVoucher.receivedByName || "Dewi Lestari, S.E."}</u></div>
                        <div className="text-[9px] font-mono text-gray-600 font-normal">NIP: {umk.returnVoucher.receivedByNip || "199120150028"}</div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

            </div>
          )}

          {/* ========================================================================= */}
          {/* VIEW 4: VOUCHER PENGELUARAN AWAL (1 AKUN ANGGARAN UMK INDUK) */}
          {/* ========================================================================= */}
          {docType === "VOUCHER_OUT_INITIAL" && (
            <div className="space-y-6">
              {/* Header with QR Code */}
              <div className="border-b-2 border-black pb-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-purple-900 text-white flex items-center justify-center font-black text-xl rounded">
                      M
                    </div>
                    <div>
                      <h1 className="text-base font-black tracking-wider uppercase">PT MEDIA EKOSISTEM DIGITAL APLIKASI NASIONAL</h1>
                      <p className="text-[10px] text-gray-700 font-semibold tracking-wide">
                        BAGIAN PERBENDAHARAAN & PENGELUARAN KAS KEUANGAN
                      </p>
                    </div>
                  </div>
                  
                  <div className="flex items-center gap-3">
                    <div className="flex items-center gap-2 border border-purple-600 p-1 rounded bg-purple-50 text-right shrink-0">
                      <div className="text-[8px] font-mono leading-tight">
                        <div className="font-bold text-purple-950 flex items-center justify-end gap-1">
                          <ShieldCheck className="w-3 h-3 text-purple-700" />
                          <span>QR PENCAIRAN</span>
                        </div>
                        <div className="text-purple-900 font-bold truncate max-w-[85px]">{umk.disbursementVoucher.voucherNumber}</div>
                        <div className="text-[7px] text-gray-500 font-normal">Voucher Kas Keluar</div>
                      </div>
                      {qrDataUrl ? (
                        <img src={qrDataUrl} alt="QR Pencairan" className="w-14 h-14 object-contain" />
                      ) : (
                        <div className="w-14 h-14 bg-gray-200" />
                      )}
                    </div>

                    <div className="text-right">
                      <div className="font-mono text-xs font-black bg-purple-100 border border-purple-400 px-2.5 py-1 rounded inline-block text-purple-950">
                        VOUCHER NO: {umk.disbursementVoucher.voucherNumber}
                      </div>
                      <div className="text-[9px] text-gray-500 font-mono mt-1">Ref UMK: {umk.umkNumber}</div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="text-center space-y-0.5">
                <h2 className="text-sm font-black uppercase tracking-wider underline">
                  VOUCHER PENGELUARAN KAS (KAS KELUAR) - UANG MUKA KERJA (UMK)
                </h2>
                <p className="text-[10px] text-gray-600">
                  Lampiran Voucher Pengeluaran Uang Muka Kerja Kas Kecil Seksi Umum (1 Akun Anggaran UMK)
                </p>
              </div>

              <div className="border border-black p-4 space-y-3 bg-gray-50">
                <div className="grid grid-cols-2 gap-y-2 text-xs">
                  <div className="flex">
                    <span className="w-40 font-bold text-gray-700">Dibayarkan Kepada:</span>
                    <span className="font-bold">{umk.custodianName} ({umk.department})</span>
                  </div>
                  <div className="flex">
                    <span className="w-40 font-bold text-gray-700">Tgl. Pencairan:</span>
                    <span className="font-mono font-bold">{formatDateIndo(umk.disbursementDate)}</span>
                  </div>
                  <div className="flex">
                    <span className="w-40 font-bold text-gray-700">Mata Uang & Jumlah:</span>
                    <span className="font-mono font-black text-sm text-purple-950">{formatRupiah(initialAmount)}</span>
                  </div>
                  <div className="flex">
                    <span className="w-40 font-bold text-gray-700">Metode Bayar:</span>
                    <span className="font-semibold">{umk.disbursementVoucher.paymentMethod}</span>
                  </div>
                  <div className="flex col-span-2">
                    <span className="w-40 font-bold text-gray-700 shrink-0">1 Akun Anggaran UMK:</span>
                    <span className="font-mono font-bold text-purple-900">{umk.disbursementVoucher.budgetAccountName}</span>
                  </div>
                  <div className="flex col-span-2">
                    <span className="w-40 font-bold text-gray-700 shrink-0">Sumber Rekening Kas:</span>
                    <span className="font-mono">{umk.disbursementVoucher.bankSource}</span>
                  </div>
                  <div className="flex col-span-2">
                    <span className="w-40 font-bold text-gray-700 shrink-0">Untuk Keperluan:</span>
                    <span className="italic">{umk.purpose}</span>
                  </div>
                </div>

                <div className="border-t border-gray-300 pt-2 text-xs">
                  <strong>Terbilang:</strong> <em>"{numberToWordsIndo(initialAmount)}"</em>
                </div>
              </div>

              {/* Syarat & Ketentuan Kas Kecil 2 Minggu */}
              <div className="border border-gray-400 p-3 rounded text-[10px] space-y-1 bg-yellow-50/50">
                <div className="font-bold text-gray-900 uppercase">Ketentuan Pertanggungjawaban UMK:</div>
                <ol className="list-decimal pl-4 space-y-0.5 text-gray-700">
                  <li>Dana UMK Kas Kecil ini wajib dipertanggungjawabkan paling lambat <strong>2 Minggu ({formatDateIndo(umk.dueDate)})</strong>.</li>
                  <li>Pelaporan kembali ke bagian keuangan wajib melampirkan 2 Voucher: <strong>Voucher 1 Pengembalian Sisa</strong> dan <strong>Voucher 2 Realisasi Belanja dengan Kuitansi Sah</strong>.</li>
                  <li>Keterlambatan LPJ akan mengunci pengajuan UMK periode berikutnya.</li>
                </ol>
              </div>

              {/* Tanda Tangan */}
              <div className="pt-6">
                <table className="w-full text-center text-[10px] border-collapse">
                  <tbody>
                    <tr>
                      <td className="w-1/3 pb-3 align-top">
                        <div className="font-semibold text-gray-700">Penerima Dana UMK:</div>
                        <div className="font-bold">Pemegang Kas Kecil GA</div>
                        <div className="my-1.5 p-1 bg-gray-50 border border-gray-300 rounded text-[7px] font-mono text-gray-600">
                          <span className="text-purple-800 font-bold">✓ TTE Penerima GA</span>
                          <div className="truncate">SIG: {securityHash.substring(0, 16)}</div>
                        </div>
                      </td>
                      <td className="w-1/3 pb-3 align-top">
                        <div className="font-semibold text-gray-700">Mengetahui:</div>
                        <div className="font-bold">Kepala Seksi Umum (GA Head)</div>
                        <div className="my-1.5 p-1 bg-gray-50 border border-gray-300 rounded text-[7px] font-mono text-gray-600">
                          <span className="text-purple-800 font-bold">✓ TTE Kasie GA</span>
                          <div className="truncate">SIG: {securityHash.substring(0, 16)}</div>
                        </div>
                      </td>
                      <td className="w-1/3 pb-3 align-top">
                        <div className="font-semibold text-gray-700">Disetujui / Kasir Pengeluaran:</div>
                        <div className="font-bold">Direktur Keuangan / Kasir Pusat</div>
                        <div className="my-1.5 p-1 bg-gray-50 border border-gray-300 rounded text-[7px] font-mono text-gray-600">
                          <span className="text-emerald-700 font-bold">✓ TTE Kasir Pusat Keuangan</span>
                          <div className="truncate">SIG: {securityHash.substring(0, 16)}</div>
                        </div>
                      </td>
                    </tr>
                    <tr className="font-bold">
                      <td className="border-t border-black pt-1">
                        <div><u>{umk.custodianName}</u></div>
                        <div className="text-[9px] font-mono text-gray-600 font-normal">NIP: {umk.custodianNip}</div>
                      </td>
                      <td className="border-t border-black pt-1">
                        <div><u>{umk.requesterName}</u></div>
                        <div className="text-[9px] font-mono text-gray-600 font-normal">NIP: {umk.requesterNip}</div>
                      </td>
                      <td className="border-t border-black pt-1">
                        <div><u>{umk.disbursementVoucher.disbursedBy.split("(")[0].trim()}</u></div>
                        <div className="text-[9px] font-mono text-gray-600 font-normal">NIP: {umk.disbursementVoucher.disbursedByNip}</div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

            </div>
          )}

        </div>

      </div>
    </div>
  );
};

export default UmkPrintDoc;