import React, { useState } from 'react';
import { DokumenSignatoriesConfig, PenandatanganItem, ProfilPerusahaan, User } from '../../types/accounting';
import { StorageService } from '../../services/storage';
import { SvgQrCode } from '../common/PrintHeader';
import { buildSignatoryCertificatePayload, generateSignatoryDigest } from '../../services/qrCertificate';
import {
  ShieldCheck,
  QrCode,
  Plus,
  Trash2,
  CheckCircle2,
  X,
  FileCheck,
  Award,
  RotateCcw,
  Clock,
  Copy,
  Check,
  Smartphone,
  ExternalLink,
  UserCheck,
  Edit3,
} from 'lucide-react';

interface SignatoriesConfigModalProps {
  isOpen: boolean;
  onClose: () => void;
  profile: ProfilPerusahaan;
  onConfigSaved: (config: DokumenSignatoriesConfig) => void;
  users?: User[];
}

export const SignatoriesConfigModal: React.FC<SignatoriesConfigModalProps> = ({
  isOpen,
  onClose,
  profile,
  onConfigSaved,
  users,
}) => {
  const [config, setConfig] = useState<DokumenSignatoriesConfig>(() =>
    StorageService.getSignatoriesConfig()
  );

  const systemUsers = users && users.length > 0 ? users : StorageService.getUsers();

  const [activeVerifySig, setActiveVerifySig] = useState<PenandatanganItem | null>(null);
  const [copiedPayload, setCopiedPayload] = useState(false);

  if (!isOpen) return null;

  const getCurrentTimestamp = () => {
    const d = new Date();
    const pad = (n: number) => String(n).padStart(2, '0');
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
  };

  const handleUpdateSignatory = (id: string, updates: Partial<PenandatanganItem>) => {
    setConfig((prev) => ({
      ...prev,
      signatories: prev.signatories.map((sig) => {
        if (sig.id !== id) return sig;
        const updated = { ...sig, ...updates };
        // Sync payload so each change reflects in qrCodeData immediately
        updated.qrCodeData = buildSignatoryCertificatePayload(updated, profile, config.kotaPenetapan);
        return updated;
      }),
    }));
  };

  const handleSelectUserForSignatory = (id: string, user: User) => {
    let jabatan = 'Staff Akuntansi';
    switch (user.role) {
      case 'superadmin':
        jabatan = 'Super Administrator / General Manager';
        break;
      case 'akuntan':
        jabatan = 'Head Accountant & Finance Lead';
        break;
      case 'auditor':
        jabatan = 'Internal & External Auditor (CPA)';
        break;
      case 'direktur':
        jabatan = 'Direktur Utama / Dewan Komisaris';
        break;
    }

    handleUpdateSignatory(id, {
      nama: user.name,
      jabatan,
      email: user.email,
    });
  };

  const handleAddSignatory = () => {
    const newId = `sig-${Date.now()}`;
    const timestamp = getCurrentTimestamp();
    const newSignatory: PenandatanganItem = {
      id: newId,
      peranLabel: 'Mengetahui & Menyetujui',
      nama: 'Nama Pejabat / Pimpinan',
      jabatan: 'Jabatan Resmi',
      nipNik: '19900000-000000-0-000',
      email: 'pejabat@tiomandirijaya.co.id',
      statusTandaTangan: 'DITANDATANGANI_DIGITAL',
      tanggalTandaTangan: timestamp,
      enableQrCode: true,
      qrCodeData: '',
      catatan: 'Dokumen disahkan secara digital dan terverifikasi sah.',
    };

    newSignatory.qrCodeData = buildSignatoryCertificatePayload(newSignatory, profile, config.kotaPenetapan);

    setConfig((prev) => ({
      ...prev,
      signatories: [...prev.signatories, newSignatory],
    }));
  };

  const handleDeleteSignatory = (id: string) => {
    if (config.signatories.length <= 1) {
      alert('Minimal harus ada 1 penandatangan dokumen.');
      return;
    }
    setConfig((prev) => ({
      ...prev,
      signatories: prev.signatories.filter((sig) => sig.id !== id),
    }));
  };

  const handleSave = () => {
    // Pastikan seluruh penandatangan memiliki qrCodeData terbaru berbasis payload asli
    const updatedSignatories = config.signatories.map((s) => ({
      ...s,
      qrCodeData: buildSignatoryCertificatePayload(s, profile, config.kotaPenetapan),
    }));
    const finalConfig: DokumenSignatoriesConfig = {
      ...config,
      signatories: updatedSignatories,
    };
    StorageService.saveSignatoriesConfig(finalConfig);
    onConfigSaved(finalConfig);
    onClose();
  };

  const handleResetDefault = () => {
    if (!window.confirm('Kembalikan konfigurasi penandatangan ke pengaturan awal bawaan sistem?')) return;
    const initial = StorageService.getSignatoriesConfig();
    setConfig(initial);
  };

  const handleCopyText = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopiedPayload(true);
    setTimeout(() => setCopiedPayload(false), 2000);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-4 backdrop-blur-xs overflow-y-auto">
      <div className="my-8 w-full max-w-4xl rounded-2xl bg-white shadow-2xl overflow-hidden border border-slate-200">
        {/* Modal Header */}
        <div className="flex items-center justify-between border-b border-slate-200 bg-slate-900 px-6 py-4 text-white">
          <div className="flex items-center gap-3">
            <div className="rounded-lg bg-blue-600 p-2 text-white">
              <QrCode className="h-5 w-5" />
            </div>
            <div>
              <h2 className="text-base font-bold">
                Konfigurasi Penandatangan Dokumen Dinamis &amp; QR Code Digital Asli (ISO-Compliant)
              </h2>
              <p className="text-xs text-slate-300">
                Setiap QR Code dihasilkan nyata dan dapat di-scan dengan kamera smartphone, berisi data sertifikat &amp; waktu pengesahan unik.
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="rounded-lg p-1 text-slate-400 hover:bg-slate-800 hover:text-white cursor-pointer"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        <div className="p-6 space-y-6 max-h-[75vh] overflow-y-auto text-xs">
          {/* Global Parameters */}
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-xl border border-slate-200 bg-slate-50 p-4">
            <div>
              <label className="block font-semibold text-slate-700">Kota Penetapan Dokumen *</label>
              <input
                type="text"
                value={config.kotaPenetapan}
                onChange={(e) => setConfig({ ...config, kotaPenetapan: e.target.value })}
                className="mt-1 w-full rounded border border-slate-300 bg-white px-3 py-1.5 focus:border-blue-500 focus:outline-hidden"
              />
            </div>
            <div>
              <label className="block font-semibold text-slate-700">Tanggal Dokumen Resmi *</label>
              <input
                type="date"
                value={config.tanggalDokumen}
                onChange={(e) => setConfig({ ...config, tanggalDokumen: e.target.value })}
                className="mt-1 w-full rounded border border-slate-300 bg-white px-3 py-1.5 focus:border-blue-500 focus:outline-hidden"
              />
            </div>
            <div className="flex flex-col justify-center">
              <label className="font-semibold text-slate-700 mb-1 flex items-center gap-1.5">
                <ShieldCheck className="h-4 w-4 text-blue-600" />
                <span>Verifikasi QR Code Digital:</span>
              </label>
              <label className="flex items-center gap-2 cursor-pointer text-slate-700 font-medium">
                <input
                  type="checkbox"
                  checked={config.enableQrVerification}
                  onChange={(e) => setConfig({ ...config, enableQrVerification: e.target.checked })}
                  className="rounded text-blue-600 h-4 w-4"
                />
                <span>Aktifkan QR Code di Laporan &amp; Voucher</span>
              </label>
            </div>
          </div>

          {/* Signatories List */}
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wider">
                  Daftar Pejabat Penandatangan ({config.signatories.length} Orang)
                </h3>
                <p className="text-slate-500">
                  Setiap pejabat memiliki QR Code unik yang terenkripsi berdasarkan nama, jabatan, NIP, serta waktu pengesahan masing-masing.
                </p>
              </div>
              <button
                type="button"
                onClick={handleAddSignatory}
                className="flex items-center gap-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 px-3 py-1.5 font-bold text-white shadow-xs cursor-pointer transition-colors"
              >
                <Plus className="h-3.5 w-3.5" />
                <span>+ Tambah Penandatangan</span>
              </button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {config.signatories.map((sig, idx) => {
                const sigPayload = buildSignatoryCertificatePayload(sig, profile, config.kotaPenetapan);
                const sigDigest = generateSignatoryDigest(sig, profile);

                return (
                  <div
                    key={sig.id}
                    className="rounded-xl border border-slate-200 bg-white p-4 shadow-xs flex flex-col justify-between hover:border-blue-300 transition-all space-y-3"
                  >
                    <div className="space-y-2.5">
                      <div className="flex items-center justify-between border-b border-slate-100 pb-2">
                        <span className="font-mono font-bold text-blue-900 bg-blue-50 px-2 py-0.5 rounded text-[10px]">
                          Posisi #{idx + 1}
                        </span>
                        <button
                          type="button"
                          onClick={() => handleDeleteSignatory(sig.id)}
                          className="text-rose-500 hover:text-rose-700 p-1 cursor-pointer"
                          title="Hapus Penandatangan Ini"
                        >
                          <Trash2 className="h-3.5 w-3.5" />
                        </button>
                      </div>

                      {/* Sumber Data: Ambil dari Pengguna (Users) atau Tulis Manual */}
                      <div className="rounded-lg bg-indigo-50/70 border border-indigo-200/80 p-2.5 space-y-1.5">
                        <div className="flex items-center justify-between">
                          <label className="text-[10px] font-bold uppercase tracking-wider text-indigo-950 flex items-center gap-1">
                            <UserCheck className="h-3 w-3 text-indigo-600" />
                            <span>Ambil dari Pengguna (Users):</span>
                          </label>
                          {(() => {
                            const matchedUser = systemUsers.find(
                              (u) => u.name === sig.nama || (u.email && u.email === sig.email)
                            );
                            if (!matchedUser) return null;
                            return (
                              <img
                                src={matchedUser.avatarUrl || 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100'}
                                alt={matchedUser.name}
                                className="h-5 w-5 rounded-full object-cover border border-indigo-400"
                                title={`Terhubung ke User: ${matchedUser.name}`}
                              />
                            );
                          })()}
                        </div>
                        <select
                          onChange={(e) => {
                            const found = systemUsers.find((u) => u.id === e.target.value);
                            if (found) {
                              handleSelectUserForSignatory(sig.id, found);
                            }
                          }}
                          value={
                            systemUsers.find(
                              (u) => u.name === sig.nama || (u.email && u.email === sig.email)
                            )?.id || ''
                          }
                          className="w-full rounded border border-indigo-300 bg-white px-2 py-1 text-[11px] font-medium text-slate-800 focus:border-indigo-500 focus:outline-hidden"
                        >
                          <option value="">-- Atau Tulis Manual di Bawah --</option>
                          {systemUsers.map((u) => (
                            <option key={u.id} value={u.id}>
                              {u.name} ({u.role.toUpperCase()})
                            </option>
                          ))}
                        </select>
                        <div className="flex items-center justify-between text-[10px] text-slate-500 pt-0.5">
                          <span>Data dapat disunting manual:</span>
                          <span className="font-semibold text-indigo-700 flex items-center gap-0.5">
                            <Edit3 className="h-2.5 w-2.5" /> Tulis Manual Bebas
                          </span>
                        </div>
                      </div>

                      <div>
                        <label className="block text-[11px] font-semibold text-slate-600">Peran Dokumen</label>
                        <input
                          type="text"
                          value={sig.peranLabel}
                          onChange={(e) => handleUpdateSignatory(sig.id, { peranLabel: e.target.value })}
                          placeholder="Dibuat Oleh / Diperiksa Oleh"
                          className="mt-0.5 w-full rounded border border-slate-300 px-2.5 py-1 font-semibold text-slate-800 focus:border-blue-500 focus:outline-hidden"
                        />
                      </div>

                      <div>
                        <label className="block text-[11px] font-semibold text-slate-600">Nama Lengkap &amp; Gelar *</label>
                        <input
                          type="text"
                          value={sig.nama}
                          onChange={(e) => handleUpdateSignatory(sig.id, { nama: e.target.value })}
                          placeholder="Nama dan Gelar Resmi"
                          className="mt-0.5 w-full rounded border border-slate-300 px-2.5 py-1 font-bold text-slate-900 focus:border-blue-500 focus:outline-hidden"
                        />
                      </div>

                      <div>
                        <label className="block text-[11px] font-semibold text-slate-600">Jabatan Resmi *</label>
                        <input
                          type="text"
                          value={sig.jabatan}
                          onChange={(e) => handleUpdateSignatory(sig.id, { jabatan: e.target.value })}
                          placeholder="contoh: Head Accountant / Direktur Utama"
                          className="mt-0.5 w-full rounded border border-slate-300 px-2.5 py-1 text-slate-700 focus:border-blue-500 focus:outline-hidden"
                        />
                      </div>

                      <div className="grid grid-cols-2 gap-2">
                        <div>
                          <label className="block text-[11px] font-semibold text-slate-600">NIP / NIK</label>
                          <input
                            type="text"
                            value={sig.nipNik || ''}
                            onChange={(e) => handleUpdateSignatory(sig.id, { nipNik: e.target.value })}
                            placeholder="Nomor identitas"
                            className="mt-0.5 w-full rounded border border-slate-300 px-2 py-1 font-mono text-[10px] focus:border-blue-500 focus:outline-hidden"
                          />
                        </div>
                        <div>
                          <label className="block text-[11px] font-semibold text-slate-600">Status Pengesahan</label>
                          <select
                            value={sig.statusTandaTangan}
                            onChange={(e) =>
                              handleUpdateSignatory(sig.id, { statusTandaTangan: e.target.value as any })
                            }
                            className="mt-0.5 w-full rounded border border-slate-300 bg-white px-2 py-1 text-[10px] font-semibold text-slate-800 focus:border-blue-500 focus:outline-hidden"
                          >
                            <option value="DRAFT">Draft</option>
                            <option value="TERVERIFIKASI">Terverifikasi</option>
                            <option value="DITANDATANGANI_DIGITAL">Sah Digital</option>
                          </select>
                        </div>
                      </div>

                      {/* Waktu Pengesahan with interactive "Sekarang" button */}
                      <div>
                        <div className="flex items-center justify-between">
                          <label className="block text-[11px] font-semibold text-slate-600">
                            Waktu Pengesahan (Membuat QR Unik)
                          </label>
                          <button
                            type="button"
                            onClick={() =>
                              handleUpdateSignatory(sig.id, { tanggalTandaTangan: getCurrentTimestamp() })
                            }
                            className="inline-flex items-center gap-1 text-[10px] font-semibold text-blue-600 hover:text-blue-800 cursor-pointer"
                            title="Setel ke tanggal & detik sekarang"
                          >
                            <Clock className="h-3 w-3" />
                            <span>Set Sekarang</span>
                          </button>
                        </div>
                        <input
                          type="text"
                          value={sig.tanggalTandaTangan || ''}
                          onChange={(e) => handleUpdateSignatory(sig.id, { tanggalTandaTangan: e.target.value })}
                          placeholder="YYYY-MM-DD HH:mm:ss"
                          className="mt-0.5 w-full rounded border border-slate-300 px-2 py-1 font-mono text-[11px] text-slate-800 focus:border-blue-500 focus:outline-hidden"
                        />
                      </div>

                      {/* QR Code Toggle & Real Scannable Preview */}
                      <div className="rounded-lg bg-slate-50 border border-slate-200 p-2.5 flex items-center justify-between gap-2">
                        <div className="flex items-center gap-2">
                          <SvgQrCode data={sigPayload} size={50} />
                          <div>
                            <label className="flex items-center gap-1.5 font-bold text-slate-800 cursor-pointer text-[11px]">
                              <input
                                type="checkbox"
                                checked={sig.enableQrCode}
                                onChange={(e) => handleUpdateSignatory(sig.id, { enableQrCode: e.target.checked })}
                                className="rounded text-blue-600 h-3.5 w-3.5"
                              />
                              <span>QR Code Aktif</span>
                            </label>
                            <span className="text-[9px] text-slate-400 font-mono block">
                              Digest: {sigDigest.substring(0, 12)}...
                            </span>
                            <span className="text-[9px] text-emerald-700 font-medium block">
                              ✓ Bisa di-scan kamera
                            </span>
                          </div>
                        </div>

                        <button
                          type="button"
                          onClick={() => setActiveVerifySig(sig)}
                          className="shrink-0 text-[10px] text-blue-700 bg-blue-50 border border-blue-200 hover:bg-blue-100 rounded px-2.5 py-1 font-bold cursor-pointer transition-colors shadow-2xs"
                        >
                          Pratinjau Sertifikat
                        </button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Live Print Preview Strip */}
          <div className="rounded-xl border border-blue-200 bg-blue-50/50 p-4">
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                <FileCheck className="h-4 w-4 text-blue-700" />
                <h4 className="font-bold text-xs uppercase tracking-wider text-blue-900">
                  Pratinjau Tampilan Blok Pengesahan pada Cetak Laporan Keuangan Resmi
                </h4>
              </div>
              <span className="text-[10px] font-semibold text-blue-700 bg-blue-100 px-2 py-0.5 rounded-full">
                {config.signatories.length} Kolom Tanda Tangan
              </span>
            </div>
            <div
              className="grid gap-3 text-center bg-white p-4 rounded-lg border border-slate-200 shadow-xs"
              style={{
                gridTemplateColumns: `repeat(${Math.max(1, config.signatories.length)}, minmax(0, 1fr))`,
              }}
            >
              {config.signatories.map((sig) => {
                const sigPayload = buildSignatoryCertificatePayload(sig, profile, config.kotaPenetapan);
                return (
                  <div key={sig.id} className="flex flex-col justify-between items-center px-1">
                    <div>
                      <span className="font-semibold text-slate-700 block text-[11px]">{sig.peranLabel}:</span>
                      <span className="text-[10px] text-slate-500">{sig.jabatan}</span>
                    </div>
                    <div className="my-2 min-h-[58px] flex items-center justify-center">
                      {sig.enableQrCode ? (
                        <div className="flex flex-col items-center">
                          <SvgQrCode data={sigPayload} size={75} />
                          <span className="text-[8px] font-mono font-bold text-emerald-700 mt-0.5">
                            SAH DIGITAL
                          </span>
                        </div>
                      ) : (
                        <div className="h-10 text-[10px] text-slate-300 italic flex items-center">
                          (Tanda Tangan Basah)
                        </div>
                      )}
                    </div>
                    <div>
                      <span className="font-bold underline text-slate-900 block text-xs">{sig.nama}</span>
                      {sig.nipNik && <span className="text-[9px] text-slate-500 font-mono">NIP: {sig.nipNik}</span>}
                      {sig.tanggalTandaTangan && (
                        <span className="text-[8px] text-slate-400 font-mono block mt-0.5">
                          {sig.tanggalTandaTangan}
                        </span>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Modal Footer */}
        <div className="flex items-center justify-between border-t border-slate-200 bg-slate-50 px-6 py-3.5">
          <button
            type="button"
            onClick={handleResetDefault}
            className="flex items-center gap-1.5 text-xs font-semibold text-slate-600 hover:text-slate-900 cursor-pointer"
          >
            <RotateCcw className="h-3.5 w-3.5" />
            <span>Kembalikan Bawaan</span>
          </button>

          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={onClose}
              className="rounded-lg px-4 py-2 font-semibold text-slate-600 hover:bg-slate-200 cursor-pointer text-xs"
            >
              Batal
            </button>
            <button
              type="button"
              onClick={handleSave}
              className="flex items-center gap-1.5 rounded-lg bg-blue-700 hover:bg-blue-800 px-5 py-2 font-bold text-white shadow-xs cursor-pointer text-xs transition-colors"
            >
              <CheckCircle2 className="h-4 w-4" />
              <span>Simpan &amp; Terapkan ke Dokumen</span>
            </button>
          </div>
        </div>
      </div>

      {/* POPUP: Sertifikat Verifikasi Tanda Tangan Digital & Scannable QR Viewer */}
      {activeVerifySig && (() => {
        const payloadText = buildSignatoryCertificatePayload(activeVerifySig, profile, config.kotaPenetapan);
        const digest = generateSignatoryDigest(activeVerifySig, profile);

        return (
          <div className="fixed inset-0 z-60 flex items-center justify-center bg-slate-950/75 p-4 backdrop-blur-xs">
            <div className="w-full max-w-lg rounded-2xl bg-white shadow-2xl border border-slate-300 overflow-hidden text-xs animate-in fade-in zoom-in duration-150">
              <div className="bg-linear-to-r from-blue-900 via-indigo-900 to-slate-950 p-4 text-white flex justify-between items-center">
                <div className="flex items-center gap-2.5">
                  <div className="rounded-lg bg-yellow-500/20 p-1.5 text-yellow-400 border border-yellow-500/30">
                    <Award className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="font-bold text-sm">Sertifikat Keabsahan Dokumen Digital (E-Sign)</h3>
                    <p className="text-[10px] text-blue-200">
                      QR Code standar ISO/IEC 18004 - Terverifikasi &amp; Dapat di-scan Kamera Smartphone
                    </p>
                  </div>
                </div>
                <button
                  onClick={() => setActiveVerifySig(null)}
                  className="rounded-lg p-1 text-slate-300 hover:bg-white/10 hover:text-white cursor-pointer"
                >
                  <X className="h-5 w-5" />
                </button>
              </div>

              <div className="p-5 text-center space-y-4 max-h-[80vh] overflow-y-auto">
                {/* Large Real Scannable QR Code */}
                <div className="flex flex-col items-center justify-center p-3 bg-slate-50 border border-slate-200 rounded-xl">
                  <div className="p-2 bg-white rounded-xl shadow-md border border-slate-300">
                    <SvgQrCode data={payloadText} size={180} />
                  </div>
                  <div className="mt-2.5 flex items-center gap-1.5 text-xs text-slate-700 font-bold">
                    <Smartphone className="h-4 w-4 text-blue-600" />
                    <span>Arahkan kamera HP ke QR Code di atas untuk memindai isi sertifikat ini</span>
                  </div>
                </div>

                <div className="inline-flex items-center gap-1.5 rounded-full bg-emerald-100 border border-emerald-300 px-3 py-1 text-xs font-bold text-emerald-800">
                  <CheckCircle2 className="h-4 w-4 text-emerald-600" />
                  <span>TERVERIFIKASI SAH DIGITAL (E-SIGN AKUNTANSI)</span>
                </div>

                {/* Structured Metadata Box */}
                <div className="text-left bg-slate-50 border border-slate-200 rounded-xl p-3.5 space-y-1.5 font-mono text-[11px]">
                  <div>
                    Perusahaan: <strong className="text-slate-900 font-sans">{profile.namaPerusahaan}</strong>
                  </div>
                  <div>
                    Penandatangan: <strong className="text-blue-950 font-sans">{activeVerifySig.nama}</strong>
                  </div>
                  <div>
                    Jabatan Resmi: <span className="font-sans text-slate-700">{activeVerifySig.jabatan}</span>
                  </div>
                  {activeVerifySig.nipNik && <div>NIP/NIK: {activeVerifySig.nipNik}</div>}
                  <div>
                    Peran Dokumen: <span className="text-indigo-900 font-semibold">{activeVerifySig.peranLabel}</span>
                  </div>
                  <div>
                    Status Dokumen: <span className="text-emerald-700 font-bold">{activeVerifySig.statusTandaTangan}</span>
                  </div>
                  <div>
                    Waktu Pengesahan: <span className="text-blue-800 font-bold">{activeVerifySig.tanggalTandaTangan || getCurrentTimestamp()} WIB</span>
                  </div>
                  <div className="text-[10px] text-slate-600">
                    Lokasi Penetapan: {config.kotaPenetapan || profile.kota || 'Semarang'}
                  </div>
                  <div className="break-all text-[10px] text-slate-500 border-t border-slate-200 pt-1 mt-1 font-mono">
                    SHA Digest Unik: {digest}
                  </div>
                </div>

                {/* Live Scanner Decoding Output Box */}
                <div className="text-left rounded-xl border border-indigo-200 bg-indigo-50/40 p-3 space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="font-bold text-[11px] text-indigo-950 flex items-center gap-1">
                      <FileCheck className="h-3.5 w-3.5 text-indigo-600" />
                      Isi Teks Mentah Hasil Scan QR Code:
                    </span>
                    <button
                      type="button"
                      onClick={() => handleCopyText(payloadText)}
                      className="inline-flex items-center gap-1 rounded bg-white px-2 py-0.5 text-[10px] font-bold text-indigo-700 border border-indigo-300 hover:bg-indigo-100 cursor-pointer shadow-2xs"
                    >
                      {copiedPayload ? (
                        <>
                          <Check className="h-3 w-3 text-emerald-600" />
                          <span className="text-emerald-700">Tersalin!</span>
                        </>
                      ) : (
                        <>
                          <Copy className="h-3 w-3" />
                          <span>Salin Teks Scan</span>
                        </>
                      )}
                    </button>
                  </div>
                  <pre className="p-2.5 rounded bg-white border border-indigo-100 text-[10px] font-mono text-slate-700 whitespace-pre-wrap leading-relaxed max-h-36 overflow-y-auto select-all">
                    {payloadText}
                  </pre>
                </div>

                <p className="text-[10px] text-slate-400">
                  QR Code ini dibuat sesuai spesifikasi ISO/IEC 18004. Setiap perubahan pada nama pejabat, NIP, peran, maupun waktu pengesahan akan secara otomatis menghasilkan matriks QR Code yang unik dan berbeda.
                </p>

                <button
                  type="button"
                  onClick={() => setActiveVerifySig(null)}
                  className="w-full rounded-lg bg-slate-900 hover:bg-slate-800 text-white font-bold py-2 shadow-xs cursor-pointer text-xs transition-colors"
                >
                  Tutup Pratinjau
                </button>
              </div>
            </div>
          </div>
        );
      })()}
    </div>
  );
};