import React, { useState } from 'react';
import { 
  X, 
  Printer, 
  CheckCircle2, 
  DollarSign, 
  Building2, 
  ShieldCheck, 
  CreditCard, 
  Calendar, 
  FileText, 
  Copy, 
  Check, 
  HelpCircle,
  Eye,
  Layers,
  Award,
  QrCode
} from 'lucide-react';
import { Employee, SalarySettings } from '../types';
import { calculateSalaryTotals, formatRupiah } from '../utils/salaryUtils';

interface SalarySlipPreviewDrawerProps {
  isOpen: boolean;
  onClose: () => void;
  employee: Employee;
  salarySettings: SalarySettings;
  selectedSlipMonth: string;
  onSelectSlipMonth: (month: string) => void;
  onDownloadPdf: () => void;
}

export const SalarySlipPreviewDrawer: React.FC<SalarySlipPreviewDrawerProps> = ({
  isOpen,
  onClose,
  employee,
  salarySettings,
  selectedSlipMonth,
  onSelectSlipMonth,
  onDownloadPdf,
}) => {
  const [copied, setCopied] = useState(false);

  if (!isOpen) return null;

  const totals = calculateSalaryTotals(salarySettings);
  const isProgressive = salarySettings.taxCalculationMode !== 'fixed';

  // Format copyable text
  const handleCopySummary = () => {
    const summaryText = `
--- SLIP GAJI PEGAWAI (${selectedSlipMonth.toUpperCase()}) ---
Perusahaan: PT MEDIAN MULTI DAYA
Nama: ${employee.name} (NIP: ${employee.nip})
Jabatan / Golongan: ${employee.position} (${salarySettings.payGrade})
Bank Transfer: ${salarySettings.bankName} - ${salarySettings.bankAccountNumber} (${salarySettings.bankAccountHolder})

[PENERIMAAN / GAJI KOTOR]
- Gaji Pokok: ${formatRupiah(salarySettings.baseSalary)}
- Tunj. Jabatan: ${formatRupiah(salarySettings.allowancePosition)}
- Tunj. Transport: ${formatRupiah(salarySettings.allowanceTransport)}
- Tunj. Makan: ${formatRupiah(salarySettings.allowanceMeal)}
- Upah Lembur: ${formatRupiah(totals.overtimePay)} (${salarySettings.overtimeHours} Jam)
${(salarySettings.customAllowances || []).map(a => `- ${a.name}: ${formatRupiah(a.amount)}`).join('\n')}
------------------------------------------------
TOTAL GAJI KOTOR: ${formatRupiah(totals.grossIncome)}

[POTONGAN GAJI]
- PPh 21 (${isProgressive ? `Progresif ${totals.effectiveTaxRate}%` : `${salarySettings.taxRatePercent}%`}): ${formatRupiah(totals.pph21Tax)}
- BPJS Kesehatan (${salarySettings.bpjsKesehatanPercent}%): ${formatRupiah(totals.bpjsKesehatan)}
- BPJS Ketenagakerjaan (${salarySettings.bpjsKetenagakerjaanPercent}%): ${formatRupiah(totals.bpjsKetenagakerjaan)}
${(salarySettings.customDeductions || []).map(d => `- ${d.name}: ${formatRupiah(d.amount)}`).join('\n')}
------------------------------------------------
TOTAL POTONGAN: ${formatRupiah(totals.totalDeductions)}

================================================
TAKE HOME PAY (GAJI BERSIH): ${formatRupiah(totals.takeHomePay)}
================================================
    `.trim();

    navigator.clipboard.writeText(summaryText);
    setCopied(true);
    setTimeout(() => setCopied(false), 2500);
  };

  return (
    <div className="fixed inset-0 z-50 overflow-hidden bg-black/75 backdrop-blur-sm flex justify-end animate-fadeIn">
      {/* Drawer Overlay / Panel */}
      <div 
        className="w-full max-w-2xl bg-[#0a0c10] border-l border-[#222] text-slate-100 flex flex-col h-full shadow-2xl relative transform transition-transform duration-300"
        onClick={e => e.stopPropagation()}
      >
        
        {/* Drawer Header */}
        <div className="bg-[#10131c] p-4 sm:p-5 border-b border-[#222] flex items-center justify-between gap-4 shrink-0">
          <div className="flex items-center gap-3">
            <div className="p-2 bg.facc15/10 border border-[#facc15]/30 text-[#facc15]">
              <Eye className="w-5 h-5 text-[#facc15]" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <span className="bg-[#facc15] text-black text-[9px] font-black px-1.5 py-0.5 uppercase tracking-wider">
                  REAL-TIME PREVIEW
                </span>
                <span className="text-xs font-mono text-slate-400">Mockup Live Payslip</span>
              </div>
              <h3 className="text-base font-black text-white uppercase tracking-tight mt-0.5">
                Preview Struk Slip Gaji Resmi
              </h3>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <select
              value={selectedSlipMonth}
              onChange={e => onSelectSlipMonth(e.target.value)}
              className="bg-[#050608] border border-[#333] text-xs font-mono font-bold text-[#facc15] px-2.5 py-1.5 focus:border-[#facc15] outline-none cursor-pointer"
            >
              <option value="Agustus 2026">Agustus 2026</option>
              <option value="Juli 2026">Juli 2026</option>
              <option value="Juni 2026">Juni 2026</option>
              <option value="Mei 2026">Mei 2026</option>
              <option value="THR 2026">THR / Bonus 2026</option>
            </select>

            <button
              type="button"
              onClick={onClose}
              className="p-2 text-slate-400 hover:text-white bg-[#1a1d26] hover:bg-[#252936] border border-[#333] cursor-pointer"
              title="Tutup Preview"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Drawer Content Body (Scrollable Mockup View) */}
        <div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-6 font-sans">

          {/* Banner Instructions */}
          <div className="bg-[#121624] border border-[#2e3752] p-3.5 flex items-center justify-between gap-3 text-xs font-mono">
            <div className="flex items-center gap-2">
              <ShieldCheck className="w-4 h-4 text-[#facc15] shrink-0" />
              <span className="text-slate-300">
                Data disesuaikan secara <strong className="text-white">real-time</strong> sesuai perubahan input parameter di tab Salary Settings.
              </span>
            </div>

            <button
              type="button"
              onClick={handleCopySummary}
              className="bg-[#1a2030] hover:bg-[#232b40] text-slate-200 text-[11px] font-bold px-2.5 py-1.5 border border-[#3b4666] flex items-center gap-1.5 shrink-0 cursor-pointer"
            >
              {copied ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5 text-[#facc15]" />}
              {copied ? 'Tersalin!' : 'Salin Text'}
            </button>
          </div>

          {/* Payslip Document Card Visual Mockup (Paper Styled) */}
          <div className="bg-[#ffffff] text-slate-900 p-6 shadow-2xl border-4 border-slate-300 relative font-serif">
            
            {/* Watermark Background Badge */}
            <div className="absolute right-6 top-16 opacity-10 pointer-events-none select-none font-sans font-black text-6xl rotate-[-12deg] text-slate-900 uppercase">
              CONFIDENTIAL
            </div>

            {/* Document Header Kop Surat */}
            <div className="border-b-2 border-slate-900 pb-4 mb-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
              <div>
                <div className="flex items-center gap-2 font-sans">
                  <div className="w-6 h-6 bg-slate-900 text-amber-400 font-black flex items-center justify-center text-xs">
                    M
                  </div>
                  <h4 className="font-black text-slate-900 text-sm tracking-tight uppercase">
                    PT MEDIAN MULTI DAYA
                  </h4>
                </div>
                <p className="text-[10px] text-slate-600 font-sans font-semibold mt-0.5">
                  Jl. Jendral Sudirman Kav. 52-53, Jakarta Selatan | Telp: (021) 555-0199
                </p>
              </div>

              <div className="text-right font-sans">
                <span className="bg-slate-900 text-amber-300 text-[10px] font-black px-2.5 py-1 tracking-widest uppercase block">
                  SLIP GAJI PEGAWAI
                </span>
                <span className="text-[11px] font-bold text-slate-700 block mt-1">
                  PERIODE: {selectedSlipMonth.toUpperCase()}
                </span>
              </div>
            </div>

            {/* Employee Metadata Info Grid */}
            <div className="grid grid-cols-2 gap-3 text-xs font-sans bg-slate-50 p-3 border border-slate-200 mb-5">
              <div className="space-y-1">
                <div>
                  <span className="text-[10px] text-slate-500 uppercase block font-semibold">Nama Pegawai</span>
                  <span className="font-bold text-slate-900 uppercase text-xs">{employee.name}</span>
                </div>
                <div>
                  <span className="text-[10px] text-slate-500 uppercase block font-semibold">NIP / ID</span>
                  <span className="font-mono text-slate-800">{employee.nip}</span>
                </div>
                <div>
                  <span className="text-[10px] text-slate-500 uppercase block font-semibold">Jabatan & Departemen</span>
                  <span className="font-semibold text-slate-800">{employee.position} ({employee.department})</span>
                </div>
              </div>

              <div className="space-y-1">
                <div>
                  <span className="text-[10px] text-slate-500 uppercase block font-semibold">Golongan Gaji / Grade</span>
                  <span className="font-bold text-amber-700">{salarySettings.payGrade}</span>
                </div>
                <div>
                  <span className="text-[10px] text-slate-500 uppercase block font-semibold">Status Pajak PTKP</span>
                  <span className="font-mono text-slate-800">{salarySettings.taxStatus}</span>
                </div>
                <div>
                  <span className="text-[10px] text-slate-500 uppercase block font-semibold">Rekening Bank Transfer</span>
                  <span className="font-mono text-slate-800">{salarySettings.bankName || 'BCA'} - {salarySettings.bankAccountNumber || '-'}</span>
                </div>
              </div>
            </div>

            {/* Itemized Calculations (2 Columns: Penerimaan vs Potongan) */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 font-sans text-xs mb-5">
              
              {/* Column 1: Penerimaan (Income) */}
              <div className="border border-emerald-200 bg-emerald-50/40 p-3 space-y-2">
                <div className="border-b border-emerald-300 pb-1 flex justify-between items-center">
                  <span className="font-black text-emerald-800 uppercase text-[11px] tracking-wider">
                    A. PENERIMAAN (GROSS)
                  </span>
                  <span className="text-[9px] bg-emerald-200 text-emerald-900 font-bold px-1.5 py-0.2">
                    INCOME
                  </span>
                </div>

                <div className="space-y-1 text-[11px] text-slate-800">
                  <div className="flex justify-between">
                    <span>Gaji Pokok:</span>
                    <span className="font-mono font-bold">{formatRupiah(salarySettings.baseSalary)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Tunjangan Jabatan:</span>
                    <span className="font-mono font-bold">{formatRupiah(salarySettings.positionAllowance)}</span>
                  </div>
                  {totals.tunjanganTKU > 0 && (
                    <div className="flex justify-between font-semibold text-purple-900">
                      <span>Tunjangan TKU ({totals.tkuPercent || 35}%):</span>
                      <span className="font-mono font-bold">{formatRupiah(totals.tunjanganTKU)}</span>
                    </div>
                  )}
                  <div className="flex justify-between">
                    <span>Tunjangan Transportasi:</span>
                    <span className="font-mono font-bold">{formatRupiah(salarySettings.transportAllowance)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Tunjangan Uang Makan:</span>
                    <span className="font-mono font-bold">{formatRupiah(salarySettings.mealAllowance)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Tunjangan Komunikasi:</span>
                    <span className="font-mono font-bold">{formatRupiah(salarySettings.communicationAllowance)}</span>
                  </div>
                  {totals.overtimePay > 0 && (
                    <div className="flex justify-between">
                      <span>Pembayaran Lembur ({salarySettings.overtimeHours} Jam):</span>
                      <span className="font-mono font-bold text-emerald-700">{formatRupiah(totals.overtimePay)}</span>
                    </div>
                  )}

                  {(salarySettings.customAllowances || []).map(a => (
                    <div key={a.id} className="flex justify-between">
                      <span>{a.name}:</span>
                      <span className="font-mono font-bold">{formatRupiah(a.amount)}</span>
                    </div>
                  ))}
                </div>

                <div className="border-t border-emerald-300 pt-1.5 mt-2 flex justify-between font-black text-emerald-900 text-xs">
                  <span>TOTAL PENERIMAAN:</span>
                  <span className="font-mono">{formatRupiah(totals.grossIncome)}</span>
                </div>
              </div>

              {/* Column 2: Potongan (Deductions) */}
              <div className="border border-rose-200 bg-rose-50/40 p-3 space-y-2">
                <div className="border-b border-rose-300 pb-1 flex justify-between items-center">
                  <span className="font-black text-rose-800 uppercase text-[11px] tracking-wider">
                    B. POTONGAN (DEDUCTIONS)
                  </span>
                  <span className="text-[9px] bg-rose-200 text-rose-900 font-bold px-1.5 py-0.2">
                    DEDUCTION
                  </span>
                </div>

                <div className="space-y-1 text-[11px] text-slate-800">
                  <div className="flex justify-between">
                    <span>
                      PPh 21 ({isProgressive ? `Progresif ${totals.effectiveTaxRate}%` : `Flat ${salarySettings.taxRatePercent}%`}):
                    </span>
                    <span className="font-mono font-bold text-rose-700">-{formatRupiah(totals.pph21Tax)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>BPJS Kesehatan ({salarySettings.bpjsKesehatanPercent}%):</span>
                    <span className="font-mono font-bold text-rose-700">-{formatRupiah(totals.bpjsKesehatan)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>BPJS Ketenagakerjaan ({salarySettings.bpjsKetenagakerjaanPercent}%):</span>
                    <span className="font-mono font-bold text-rose-700">-{formatRupiah(totals.bpjsKetenagakerjaan)}</span>
                  </div>
                  {totals.absenceDeduction > 0 && (
                    <div className="flex justify-between text-rose-800 font-semibold">
                      <span>Potongan Alpa / Tidak Hadir ({salarySettings.absenceDeductionDays || 0} Hari):</span>
                      <span className="font-mono font-bold text-rose-700">-{formatRupiah(totals.absenceDeduction)}</span>
                    </div>
                  )}
                  {totals.lateDeduction > 0 && (
                    <div className="flex justify-between text-rose-800 font-semibold">
                      <span>Potongan Terlambat Masuk Kerja ({salarySettings.lateDeductionTimes || 0}x):</span>
                      <span className="font-mono font-bold text-rose-700">-{formatRupiah(totals.lateDeduction)}</span>
                    </div>
                  )}

                  {(salarySettings.customDeductions || []).map(d => (
                    <div key={d.id} className="flex justify-between">
                      <span>{d.name}:</span>
                      <span className="font-mono font-bold text-rose-700">-{formatRupiah(d.amount)}</span>
                    </div>
                  ))}
                </div>

                <div className="border-t border-rose-300 pt-1.5 mt-2 flex justify-between font-black text-rose-900 text-xs">
                  <span>TOTAL POTONGAN:</span>
                  <span className="font-mono">-{formatRupiah(totals.totalDeductions)}</span>
                </div>
              </div>

            </div>

            {/* Progressive Tax Detail Breakdown Panel */}
            {isProgressive && totals.progressiveTaxDetails && (
              <div className="bg-amber-50/80 border border-amber-300 p-3 font-sans text-[11px] mb-5 space-y-1.5 text-amber-950">
                <div className="flex items-center justify-between font-bold border-b border-amber-200 pb-1">
                  <span className="uppercase text-[10px] tracking-wider text-amber-900 flex items-center gap-1">
                    <Layers className="w-3.5 h-3.5 text-amber-700" />
                    Rincian Perhitungan Pajak Progresif PPh 21 (UU HPP)
                  </span>
                  <span className="font-mono text-amber-800 font-black">
                    Tarif Efektif: {totals.effectiveTaxRate}%
                  </span>
                </div>

                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 font-mono text-[10px] text-slate-700">
                  <div>Gaji kotor setahun: <strong className="text-slate-900">{formatRupiah(totals.progressiveTaxDetails.annualGrossIncome)}</strong></div>
                  <div>PTKP ({salarySettings.taxStatus}): <strong className="text-slate-900">{formatRupiah(totals.progressiveTaxDetails.ptkpAmountAnnual)}</strong></div>
                  <div>PKP Setahun: <strong className="text-emerald-800">{formatRupiah(totals.progressiveTaxDetails.annualTaxableIncome)}</strong></div>
                </div>

                <div className="space-y-0.5 pt-1 text-[10px] font-mono border-t border-amber-200">
                  {totals.progressiveTaxDetails.bracketBreakdowns
                    .filter(b => b.taxableAmountInBracket > 0)
                    .map(b => (
                      <div key={b.bracketId} className="flex justify-between text-slate-700">
                        <span>{b.label}:</span>
                        <span className="font-bold text-slate-900">{formatRupiah(b.monthlyTaxInBracket)} / bulan</span>
                      </div>
                    ))}
                  {totals.progressiveTaxDetails.bracketBreakdowns.filter(b => b.taxableAmountInBracket > 0).length === 0 && (
                    <span className="text-emerald-700 italic block font-sans">
                      * Bebas Pajak (Penghasilan Kena Pajak Rp 0)
                    </span>
                  )}
                </div>
              </div>
            )}

            {/* Take Home Pay Callout Box */}
            <div className="bg-slate-900 text-white p-4 border-2 border-amber-400 font-sans text-center space-y-1 shadow-lg mb-6">
              <span className="text-[10px] font-black text-amber-300 uppercase tracking-widest block">
                TAKE HOME PAY (GAJI BERSIH DITERIMA PEGAWAI)
              </span>
              <span className="text-2xl font-black text-amber-400 font-mono block">
                {formatRupiah(totals.takeHomePay)}
              </span>
              <span className="text-[10px] text-slate-300 block italic">
                Ditransfer ke {salarySettings.bankName || 'BCA'} Rek. {salarySettings.bankAccountNumber || '-'} a/n {salarySettings.bankAccountHolder || employee.name}
              </span>
            </div>

            {/* Signatures & Stamp Section */}
            <div className="pt-4 border-t border-slate-300 grid grid-cols-2 gap-4 text-[11px] font-sans text-slate-700">
              <div className="text-center space-y-8">
                <span>Penerima (Pegawai),</span>
                <div className="pt-6 font-bold text-slate-900 uppercase underline">
                  {employee.name}
                </div>
              </div>

              <div className="text-center space-y-2 relative">
                <span>Jakarta, 25 {selectedSlipMonth}</span>
                <div className="text-[10px] text-slate-500 italic">HR Payroll Department</div>

                {/* Digital Verification Stamp Mockup */}
                <div className="inline-block border-2 border-emerald-600 text-emerald-700 font-black text-[9px] px-2 py-1 rotate-[-6deg] uppercase tracking-wider my-1">
                  VERIFIED DIGITAL PAYROLL
                </div>

                <div className="font-bold text-slate-900 uppercase underline pt-2">
                  Dian Ermawan, M.M.
                </div>
              </div>
            </div>

            {/* Document Footer Note */}
            <div className="mt-4 pt-2 border-t border-slate-200 text-[9px] text-slate-500 font-sans text-center flex items-center justify-between">
              <span>Dokumen ini dihasilkan secara elektronik & sah tanpa tanda tangan basah.</span>
              <span className="font-mono">REF: SLIP-{employee.nip}-202608</span>
            </div>

          </div>

        </div>

        {/* Drawer Action Footer */}
        <div className="bg-[#10131c] p-4 border-t border-[#222] flex flex-col sm:flex-row items-center justify-between gap-3 shrink-0">
          <div className="text-xs text-slate-400 font-mono">
            <span>Mencetak slip gaji memicu <strong className="text-emerald-400 font-bold">Auto-Archiving Service</strong> ke folder DMS <strong className="text-[#facc15] font-bold">'Salary'</strong>.</span>
          </div>

          <div className="flex items-center gap-2 w-full sm:w-auto">
            <button
              type="button"
              onClick={onClose}
              className="flex-1 sm:flex-none bg-[#1a1d26] hover:bg-[#252936] text-slate-300 font-bold uppercase text-xs px-4 py-2.5 border border-[#333] cursor-pointer"
            >
              Tutup
            </button>

            <button
              type="button"
              onClick={() => {
                onDownloadPdf();
              }}
              className="flex-1 sm:flex-none bg-emerald-600 hover:bg-emerald-500 text-white font-black uppercase tracking-wider text-xs px-5 py-2.5 flex items-center justify-center gap-2 shadow-lg transition-all cursor-pointer"
            >
              <Printer className="w-4 h-4 text-emerald-100" />
              Cetak Slip Gaji (PDF)
            </button>
          </div>
        </div>

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