import React, { useRef } from "react";
import { OfficialTravelRequest, USD_TO_IDR_RATE } from "../../types/travel";
import { 
  Printer, 
  X, 
  CheckCircle2, 
  Building2, 
  FileText, 
  Calendar, 
  MapPin, 
  User, 
  DollarSign, 
  ShieldCheck, 
  QrCode,
  Download
} from "lucide-react";
import ptMedianLogo from "../../assets/images/pt_median_logo_1785758831669.jpg";

interface OfficialTravelPrintDocProps {
  travel: OfficialTravelRequest;
  onClose: () => void;
  documentType?: 'SPPD' | 'VOUCHER_LPJ' | 'BOTH';
}

export const OfficialTravelPrintDoc: React.FC<OfficialTravelPrintDocProps> = ({
  travel,
  onClose,
  documentType = 'BOTH'
}) => {
  const printRef = useRef<HTMLDivElement>(null);

  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) return "-";
    try {
      const d = new Date(dateStr);
      return d.toLocaleDateString("id-ID", {
        day: "numeric",
        month: "long",
        year: "numeric"
      });
    } catch {
      return dateStr;
    }
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-950/80 backdrop-blur-sm flex justify-center p-2 sm:p-4 print:p-0 print:bg-white print:static">
      <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-4xl shadow-2xl overflow-hidden my-auto print:border-none print:shadow-none print:w-full print:max-w-none print:rounded-none print:bg-white">
        
        {/* Action Header - Hidden on Print */}
        <div className="bg-slate-800/90 px-6 py-4 border-b border-slate-700 flex items-center justify-between print:hidden">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-sky-500/10 border border-sky-500/30 rounded-lg text-sky-400">
              <FileText className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-base font-bold text-white flex items-center gap-2">
                Dokumen Resmi Perjalanan Dinas & Voucher Keuangan
                <span className="text-xs font-mono font-normal bg-sky-950 text-sky-300 border border-sky-600/40 px-2 py-0.5 rounded">
                  {travel.sppdNumber}
                </span>
              </h2>
              <p className="text-xs text-slate-400">
                NIP Pegawai: <strong className="text-white font-mono">{travel.employeeNip}</strong> | {travel.employeeName}
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={handlePrint}
              className="px-4 py-2 bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-400 hover:to-blue-500 text-slate-950 font-black text-xs uppercase tracking-wider rounded-lg shadow-lg shadow-sky-500/20 flex items-center gap-2 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-700 rounded-lg transition-colors"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Printable Document Container */}
        <div ref={printRef} className="p-6 sm:p-10 bg-white text-slate-900 font-sans space-y-8 print:p-0">
          
          {/* ======================================================== */}
          {/* LEMBAR 1: SURAT PERINTAH PERJALANAN DINAS (SPPD) */}
          {/* ======================================================== */}
          {(documentType === 'SPPD' || documentType === 'BOTH') && (
            <div className="border border-slate-300 p-6 sm:p-8 rounded-lg bg-white shadow-sm print:border-black print:rounded-none print:shadow-none page-break-after">
              
              {/* Kop Surat Perusahaan */}
              <div className="flex items-center justify-between border-b-2 border-slate-900 pb-4 mb-6">
                <div className="flex items-center gap-4">
                  <img 
                    src={ptMedianLogo} 
                    alt="PT Media Ekosistem Digital Aplikasi Nasional" 
                    className="w-16 h-16 object-contain rounded-md border border-slate-200"
                  />
                  <div>
                    <h1 className="text-lg sm:text-xl font-black text-slate-900 tracking-tight uppercase">
                      PT MEDIA EKOSISTEM DIGITAL APLIKASI NASIONAL
                    </h1>
                    <p className="text-xs font-semibold text-slate-700">
                      MEDIAN CLOUD ENTERPRISE SYSTEMS & AI PLATFORM
                    </p>
                    <p className="text-[11px] text-slate-600">
                      Gedung Cyber 2 Tower Lt. 18, Jl. H.R. Rasuna Said, Jakarta Selatan 12950 | Telp: (021) 5299-8800
                    </p>
                  </div>
                </div>
                <div className="text-right hidden sm:block">
                  <span className="text-[10px] font-mono border border-slate-300 px-2 py-1 rounded bg-slate-50 font-bold block mb-1">
                    FORM: MEDIAN-HRD-SPPD-01
                  </span>
                  <span className="text-[10px] text-slate-500">ISO 9001:2015 Certified</span>
                </div>
              </div>

              {/* Judul Dokumen */}
              <div className="text-center my-4">
                <h2 className="text-base sm:text-lg font-black tracking-wider uppercase underline underline-offset-4 text-slate-900">
                  SURAT PERINTAH PERJALANAN DINAS (SPPD)
                </h2>
                <p className="text-xs font-mono font-bold text-slate-700 mt-1">
                  Nomor: {travel.sppdNumber}
                </p>
                <p className="text-[11px] text-slate-500">
                  Dasar Surat Tugas: {travel.assignmentLetterNumber}
                </p>
              </div>

              {/* Tabel Rincian Data Pegawai & Penugasan */}
              <div className="mt-6 border border-slate-300 rounded overflow-hidden text-xs">
                <table className="w-full border-collapse">
                  <tbody>
                    <tr className="border-b border-slate-200">
                      <td className="w-8 p-2.5 font-bold text-center bg-slate-50 border-r border-slate-200">1.</td>
                      <td className="w-56 p-2.5 font-bold text-slate-700 bg-slate-50/50 border-r border-slate-200">
                        Pejabat Pemberi Perintah
                      </td>
                      <td className="p-2.5 font-semibold text-slate-900">
                        {travel.approvedBy || "Direktur Utama / Dewan Direksi PT MEDIAN"}
                      </td>
                    </tr>

                    <tr className="border-b border-slate-200 bg-sky-50/40">
                      <td className="p-2.5 font-bold text-center bg-slate-50 border-r border-slate-200">2.</td>
                      <td className="p-2.5 font-bold text-sky-950 bg-sky-100/50 border-r border-slate-200">
                        Nama Pegawai yang Diperintahkan
                      </td>
                      <td className="p-2.5 font-black text-slate-900 text-sm">
                        {travel.employeeName}
                      </td>
                    </tr>

                    <tr className="border-b border-slate-200 bg-sky-50/40">
                      <td className="p-2.5 font-bold text-center bg-slate-50 border-r border-slate-200">3.</td>
                      <td className="p-2.5 font-black text-sky-950 bg-sky-100/50 border-r border-slate-200">
                        Nomor Induk Pegawai (NIP)
                      </td>
                      <td className="p-2.5 font-mono font-black text-sky-900 text-sm">
                        {travel.employeeNip}
                      </td>
                    </tr>

                    <tr className="border-b border-slate-200">
                      <td className="p-2.5 font-bold text-center bg-slate-50 border-r border-slate-200">4.</td>
                      <td className="p-2.5 font-bold text-slate-700 bg-slate-50/50 border-r border-slate-200">
                        Pangkat / Golongan / Grade Gaji
                      </td>
                      <td className="p-2.5 text-slate-900 font-semibold">
                        {travel.employeeGrade} ({travel.employeePosition} - {travel.employeeDivision})
                      </td>
                    </tr>

                    <tr className="border-b border-slate-200">
                      <td className="p-2.5 font-bold text-center bg-slate-50 border-r border-slate-200">5.</td>
                      <td className="p-2.5 font-bold text-slate-700 bg-slate-50/50 border-r border-slate-200">
                        A. Jenis Perjalanan Dinas
                      </td>
                      <td className="p-2.5 font-bold text-slate-900">
                        <span className="inline-block bg-slate-100 border border-slate-300 px-2 py-0.5 rounded mr-2">
                          {travel.tripType}
                        </span>
                      </td>
                    </tr>

                    <tr className="border-b border-slate-200">
                      <td className="p-2.5 font-bold text-center bg-slate-50 border-r border-slate-200">6.</td>
                      <td className="p-2.5 font-bold text-slate-700 bg-slate-50/50 border-r border-slate-200">
                        Maksud & Tujuan Perjalanan Dinas
                      </td>
                      <td className="p-2.5 text-slate-800 leading-relaxed">
                        {travel.purpose}
                      </td>
                    </tr>

                    <tr className="border-b border-slate-200">
                      <td className="p-2.5 font-bold text-center bg-slate-50 border-r border-slate-200">7.</td>
                      <td className="p-2.5 font-bold text-slate-700 bg-slate-50/50 border-r border-slate-200">
                        B. Tempat Tujuan Dinas
                      </td>
                      <td className="p-2.5 text-slate-900 font-bold">
                        <span className="bg-sky-100 text-sky-900 border border-sky-300 px-2 py-0.5 rounded font-mono mr-2">
                          {travel.destinationType}
                        </span>
                        {travel.destinationCity} {travel.destinationLocationDetail ? `(${travel.destinationLocationDetail})` : ''}
                      </td>
                    </tr>

                    <tr className="border-b border-slate-200">
                      <td className="p-2.5 font-bold text-center bg-slate-50 border-r border-slate-200">8.</td>
                      <td className="p-2.5 font-bold text-slate-700 bg-slate-50/50 border-r border-slate-200">
                        C. Fasilitas & Moda Transportasi
                      </td>
                      <td className="p-2.5 text-slate-800">
                        <strong>Moda:</strong> {travel.transportationMode} ({travel.transportationClass}) <br />
                        <strong>Standar Hotel:</strong> {travel.hotelClass}
                      </td>
                    </tr>

                    <tr className="border-b border-slate-200">
                      <td className="p-2.5 font-bold text-center bg-slate-50 border-r border-slate-200">9.</td>
                      <td className="p-2.5 font-bold text-slate-700 bg-slate-50/50 border-r border-slate-200">
                        D. Lamanya Dinas / Hari
                      </td>
                      <td className="p-2.5 text-slate-900 font-semibold">
                        <span className="font-bold text-sky-800 text-sm">{travel.durationDays} Hari</span> ({travel.hotelNights} Malam Inap) <br />
                        <span className="text-slate-600 text-[11px]">
                          Tanggal Berangkat: <strong>{formatDateIndo(travel.startDate)}</strong> s/d Tanggal Pulang: <strong>{formatDateIndo(travel.endDate)}</strong>
                        </span>
                      </td>
                    </tr>

                    <tr className="border-b border-slate-200">
                      <td className="p-2.5 font-bold text-center bg-slate-50 border-r border-slate-200">10.</td>
                      <td className="p-2.5 font-bold text-slate-700 bg-slate-50/50 border-r border-slate-200">
                        Pembebanan Anggaran & Kode Akun
                      </td>
                      <td className="p-2.5 text-slate-800">
                        Mata Anggaran: <strong>Beban Perjalanan Dinas Operasional (Akun 5.2.01.04)</strong> <br />
                        Nomor Voucher Keuangan: <strong>{travel.voucher.voucherNumber}</strong>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              {/* Tanda Tangan & Pengesahan */}
              <div className="mt-8 grid grid-cols-2 gap-8 text-xs">
                <div className="border border-slate-200 p-4 rounded text-center">
                  <p className="text-slate-500 mb-1">Pegawai Yang Melaksanakan Tugas,</p>
                  <p className="font-bold text-slate-700 mb-12">NIP Terverifikasi Digital</p>
                  <div className="inline-block p-1 bg-slate-50 border border-slate-200 rounded mb-2">
                    <QrCode className="w-12 h-12 text-slate-800 mx-auto" />
                  </div>
                  <p className="font-black text-slate-900 text-sm underline">{travel.employeeName}</p>
                  <p className="font-mono text-slate-600 font-bold">NIP: {travel.employeeNip}</p>
                  <p className="text-[10px] text-slate-500">{travel.employeePosition}</p>
                </div>

                <div className="border border-slate-200 p-4 rounded text-center">
                  <p className="text-slate-500 mb-1">Dikeluarkan di Jakarta, Pada Tanggal: {formatDateIndo(travel.submittedAt)}</p>
                  <p className="font-bold text-slate-700 mb-12">Pejabat Yang Berwenang Menyetujui,</p>
                  <div className="inline-block p-1 bg-slate-50 border border-slate-200 rounded mb-2">
                    <ShieldCheck className="w-12 h-12 text-emerald-600 mx-auto" />
                  </div>
                  <p className="font-black text-slate-900 text-sm underline">{travel.approvedBy || "Bambang Hartono, M.B.A."}</p>
                  <p className="font-mono text-slate-600 font-bold">NIP: {travel.approvedByNip || "196519920001"}</p>
                  <p className="text-[10px] text-slate-500">Direktur Utama / Direksi Pembina</p>
                </div>
              </div>

              {/* Catatan Kaki */}
              <div className="mt-6 pt-3 border-t border-slate-200 text-[10px] text-slate-500 flex justify-between">
                <span>Dokumen ini diterbitkan secara elektronik oleh Sistem ERP MEDIAN CLOUD dan sah tanpa tanda tangan basah.</span>
                <span className="font-mono">SPPD ID: {travel.id}</span>
              </div>
            </div>
          )}

          {/* ======================================================== */}
          {/* LEMBAR 2: LAMPIRAN VOUCHER KEUANGAN PERTANGGUNGJAWABAN (LPJ) */}
          {/* ======================================================== */}
          {(documentType === 'VOUCHER_LPJ' || documentType === 'BOTH') && (
            <div className="border border-slate-300 p-6 sm:p-8 rounded-lg bg-white shadow-sm print:border-black print:rounded-none print:shadow-none">
              
              {/* Header Voucher */}
              <div className="flex items-center justify-between border-b-2 border-slate-900 pb-4 mb-4">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-emerald-100 rounded border border-emerald-300 text-emerald-800">
                    <DollarSign className="w-6 h-6" />
                  </div>
                  <div>
                    <h2 className="text-base sm:text-lg font-black text-slate-900 uppercase tracking-tight">
                      LAMPIRAN VOUCHER PERTANGGUNGJAWABAN KEUANGAN (LPJ)
                    </h2>
                    <p className="text-xs font-semibold text-slate-600">
                      Rincian Biaya Perjalanan Dinas Wajib Dipertanggungjawabkan
                    </p>
                  </div>
                </div>
                <div className="text-right">
                  <span className="text-xs font-mono font-black text-slate-900 bg-amber-50 border border-amber-300 px-2.5 py-1 rounded block mb-0.5">
                    No. Voucher: {travel.voucher.voucherNumber}
                  </span>
                  <span className="text-[10px] text-slate-500">Ref SPPD: {travel.sppdNumber}</span>
                </div>
              </div>

              {/* Metadata Penerima Voucher */}
              <div className="bg-slate-50 border border-slate-200 rounded p-3 mb-4 text-xs grid grid-cols-2 sm:grid-cols-4 gap-3">
                <div>
                  <span className="text-[10px] text-slate-500 uppercase block font-bold">Pegawai Penerima</span>
                  <span className="font-bold text-slate-900">{travel.employeeName}</span>
                </div>
                <div>
                  <span className="text-[10px] text-slate-500 uppercase block font-bold">NIP Pegawai</span>
                  <span className="font-mono font-bold text-sky-900 bg-sky-100 px-1.5 py-0.5 rounded">{travel.employeeNip}</span>
                </div>
                <div>
                  <span className="text-[10px] text-slate-500 uppercase block font-bold">Grade Golongan</span>
                  <span className="font-semibold text-slate-800">{travel.employeeGrade}</span>
                </div>
                <div>
                  <span className="text-[10px] text-slate-500 uppercase block font-bold">Status Settlement</span>
                  <span className="font-bold text-emerald-800 bg-emerald-100 px-1.5 py-0.5 rounded">{travel.voucher.settlementStatus}</span>
                </div>
              </div>

              {/* Tabel Rincian Biaya & Tarif Sesuai Grade */}
              <div className="border border-slate-300 rounded overflow-hidden text-xs mb-6">
                <table className="w-full border-collapse">
                  <thead>
                    <tr className="bg-slate-100 border-b border-slate-300 text-slate-800 text-[11px] uppercase font-bold">
                      <th className="p-2.5 text-center w-8">No</th>
                      <th className="p-2.5 text-left">Komponen Biaya Sesuai Grade</th>
                      <th className="p-2.5 text-center w-24">Vol / Durasi</th>
                      <th className="p-2.5 text-right w-32">Tarif Satuan</th>
                      <th className="p-2.5 text-right w-36">Estimasi Anggaran</th>
                      <th className="p-2.5 text-right w-36 bg-slate-200/60">Realisasi Aktual</th>
                    </tr>
                  </thead>
                  <tbody>
                    {travel.expenses.map((item, idx) => (
                      <tr key={item.id} className="border-b border-slate-200 hover:bg-slate-50">
                        <td className="p-2.5 text-center font-bold text-slate-500">{idx + 1}</td>
                        <td className="p-2.5">
                          <span className="font-bold text-slate-900 block">{item.category}</span>
                          <span className="text-[11px] text-slate-600">{item.description}</span>
                          {item.receiptNumber && (
                            <span className="text-[10px] font-mono text-emerald-700 bg-emerald-50 border border-emerald-200 px-1 rounded block mt-0.5">
                              No. Bukti/Kwitansi: {item.receiptNumber}
                            </span>
                          )}
                        </td>
                        <td className="p-2.5 text-center font-semibold text-slate-700">
                          {item.quantity} {item.unit}
                        </td>
                        <td className="p-2.5 text-right font-mono text-slate-700">
                          {formatRupiah(item.unitPrice)}
                        </td>
                        <td className="p-2.5 text-right font-mono font-bold text-slate-900">
                          {formatRupiah(item.totalEstimated)}
                        </td>
                        <td className="p-2.5 text-right font-mono font-bold text-emerald-900 bg-slate-50">
                          {item.actualSpent !== undefined ? formatRupiah(item.actualSpent) : "-"}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                  <tfoot>
                    <tr className="bg-slate-100 font-bold border-t-2 border-slate-300">
                      <td colSpan={4} className="p-3 text-right uppercase text-slate-800">
                        Total Anggaran Biaya Dinas:
                      </td>
                      <td className="p-3 text-right font-mono text-slate-900 text-sm">
                        {formatRupiah(travel.totalEstimatedCost)}
                      </td>
                      <td className="p-3 text-right font-mono text-emerald-950 text-sm bg-slate-200/80">
                        {formatRupiah(travel.voucher.totalActualRealization || travel.totalEstimatedCost)}
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>

              {/* Rekapitulasi Uang Muka & Settlement Pertanggungjawaban */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 border border-slate-300 rounded p-4 bg-slate-50/70 text-xs mb-6">
                <div>
                  <h4 className="font-bold text-slate-800 uppercase mb-2 border-b border-slate-200 pb-1">
                    Rekapitulasi Uang Muka (Advance)
                  </h4>
                  <div className="space-y-1.5">
                    <div className="flex justify-between">
                      <span className="text-slate-600">Total Uang Muka Diterima (Advance):</span>
                      <span className="font-mono font-bold text-slate-900">{formatRupiah(travel.voucher.advanceAmount)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-slate-600">Total Realisasi Pengeluaran Sah:</span>
                      <span className="font-mono font-bold text-emerald-800">
                        {formatRupiah(travel.voucher.totalActualRealization || 0)}
                      </span>
                    </div>
                    <div className="flex justify-between pt-1 border-t border-slate-200 font-bold text-sm">
                      <span className="text-slate-900">
                        {travel.voucher.balanceAmount >= 0 ? "Lebih Bayar (Dikembalikan ke Kas):" : "Kurang Bayar (Reimbursement):"}
                      </span>
                      <span className={`font-mono ${travel.voucher.balanceAmount >= 0 ? "text-emerald-700" : "text-rose-700"}`}>
                        {formatRupiah(Math.abs(travel.voucher.balanceAmount))}
                      </span>
                    </div>
                  </div>
                </div>

                <div>
                  <h4 className="font-bold text-slate-800 uppercase mb-2 border-b border-slate-200 pb-1">
                    Pernyataan Pertanggungjawaban
                  </h4>
                  <p className="text-[11px] text-slate-600 leading-relaxed italic">
                    "Saya menyatakan dengan sesungguhnya bahwa seluruh biaya perjalanan dinas yang tercantum dalam dokumen ini benar-benar dikeluarkan untuk kepentingan kedinasan PT MEDIAN CLOUD dan didukung oleh bukti-bukti yang sah."
                  </p>
                </div>
              </div>

              {/* Lembar Otorisasi Keuangan */}
              <div className="grid grid-cols-3 gap-4 text-center text-xs">
                <div className="border border-slate-200 p-3 rounded">
                  <p className="text-slate-500 mb-12">Dibuat / Dilaporkan Oleh,</p>
                  <p className="font-bold text-slate-900 underline">{travel.employeeName}</p>
                  <p className="font-mono text-[10px] text-slate-600">NIP: {travel.employeeNip}</p>
                </div>

                <div className="border border-slate-200 p-3 rounded">
                  <p className="text-slate-500 mb-12">Diverifikasi Bagian Keuangan,</p>
                  <p className="font-bold text-slate-900 underline">{travel.voucher.verifiedByFinance || "Perbendaharaan & Kasir"}</p>
                  <p className="text-[10px] text-slate-500">Staf Akuntansi & Pajak</p>
                </div>

                <div className="border border-slate-200 p-3 rounded">
                  <p className="text-slate-500 mb-12">Disetujui Pencairan / Settlement,</p>
                  <p className="font-bold text-slate-900 underline">{travel.voucher.disbursedBy || "Hendra Wijaya, S.E. (CFO)"}</p>
                  <p className="text-[10px] text-slate-500">Direktur Keuangan / CFO</p>
                </div>
              </div>

            </div>
          )}

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

export default OfficialTravelPrintDoc;