import React, { useState, useMemo } from 'react';
import {
  VendorSupplier,
  VirtualAccount,
  VirtualLedgerItem,
  Akun,
  Jurnal,
  JurnalItem,
  ProfilPerusahaan,
  BankMitraVA,
} from '../../types/accounting';
import { StorageService } from '../../services/storage';
import {
  CreditCard,
  Building2,
  ArrowRight,
  CheckCircle2,
  Layers,
  AlertCircle,
  X,
  ShieldCheck,
  DollarSign,
  BookOpen,
  TrendingUp,
  FileText,
  Wallet,
  Scale,
  Sparkles,
  HelpCircle,
  Clock,
  Check,
} from 'lucide-react';

export type SkenarioTransaksiVA =
  | 'PELUNASAN_UTANG_VENDOR'
  | 'PENERIMAAN_PELUNASAN_CUSTOMER'
  | 'PEMBELIAN_TEMPO_TAGIHAN_VA'
  | 'PENERIMAAN_PENDAPATAN_LANGSUNG_VA';

interface VirtualAccountJournalModalProps {
  isOpen: boolean;
  onClose: () => void;
  vendors: VendorSupplier[];
  akuns: Akun[];
  profile: ProfilPerusahaan;
  activePeriodeNama: string;
  onSaveJurnal: (jurnal: Jurnal) => void;
  onRefreshData?: () => void;
  onNavigateTab?: (tab: string) => void;
}

export const VirtualAccountJournalModal: React.FC<VirtualAccountJournalModalProps> = ({
  isOpen,
  onClose,
  vendors,
  akuns,
  profile,
  activePeriodeNama,
  onSaveJurnal,
  onRefreshData,
  onNavigateTab,
}) => {
  const [activeModalTab, setActiveModalTab] = useState<'form' | 'diagram' | 'guide'>('form');
  const [skenario, setSkenario] = useState<SkenarioTransaksiVA>('PELUNASAN_UTANG_VENDOR');
  const [selectedVendorId, setSelectedVendorId] = useState<string>(vendors[0]?.id || '');
  const [selectedVaId, setSelectedVaId] = useState<string>('');
  const [nominal, setNominal] = useState<number>(5000000);
  const [tanggal, setTanggal] = useState<string>(new Date().toISOString().substring(0, 10));
  const [noBukti, setNoBukti] = useState<string>(`JU-VA-${Date.now().toString().slice(-4)}`);
  const [noFakturRef, setNoFakturRef] = useState<string>(`INV-VA-${Date.now().toString().slice(-4)}`);
  const [keteranganCustom, setKeteranganCustom] = useState<string>('');
  const [syncToVirtualLedger, setSyncToVirtualLedger] = useState<boolean>(true);
  const [statusPembayaran, setStatusPembayaran] = useState<'Lunas' | 'Sebagian'>('Lunas');
  const [customBebanAkunId, setCustomBebanAkunId] = useState<string>('');
  const [successInfo, setSuccessInfo] = useState<{
    noBukti: string;
    nominal: number;
    vendorNama: string;
    vaNumber: string;
    bankName: string;
  } | null>(null);

  // Selected Vendor
  const currentVendor = useMemo(() => {
    return vendors.find((v) => v.id === selectedVendorId) || vendors[0];
  }, [vendors, selectedVendorId]);

  // Selected Virtual Account
  const currentVa: VirtualAccount | undefined = useMemo(() => {
    if (!currentVendor || !currentVendor.virtualAccounts.length) return undefined;
    if (selectedVaId) {
      const found = currentVendor.virtualAccounts.find((va) => va.id === selectedVaId);
      if (found) return found;
    }
    return currentVendor.virtualAccounts[0];
  }, [currentVendor, selectedVaId]);

  // Accounts lookup
  const akunKasBank = useMemo(() => {
    return (
      akuns.find((a) => a.kodeAkun === '1-1020') ||
      akuns.find((a) => a.namaAkun.toLowerCase().includes('bank')) ||
      akuns[0]
    );
  }, [akuns]);

  const akunUtangUsaha = useMemo(() => {
    return (
      akuns.find((a) => a.kodeAkun === '2-1010') ||
      akuns.find((a) => a.namaAkun.toLowerCase().includes('utang')) ||
      akuns[1]
    );
  }, [akuns]);

  const akunPiutangUsaha = useMemo(() => {
    return (
      akuns.find((a) => a.kodeAkun === '1-1030') ||
      akuns.find((a) => a.namaAkun.toLowerCase().includes('piutang')) ||
      akuns[1]
    );
  }, [akuns]);

  const akunPersediaanBeban = useMemo(() => {
    if (customBebanAkunId) {
      const selected = akuns.find((a) => a.id === customBebanAkunId);
      if (selected) return selected;
    }
    return (
      akuns.find((a) => a.kodeAkun === '1-1040') || // Persediaan Bahan Baku
      akuns.find((a) => a.kodeAkun === '5-1000') || // Beban Pokok Pendapatan
      akuns[0]
    );
  }, [akuns, customBebanAkunId]);

  const akunPendapatan = useMemo(() => {
    return (
      akuns.find((a) => a.kodeAkun === '4-1000') ||
      akuns.find((a) => a.namaAkun.toLowerCase().includes('pendapatan')) ||
      akuns[0]
    );
  }, [akuns]);

  // Construct journal lines based on scenario
  const previewJournalItems = useMemo<JurnalItem[]>(() => {
    const val = Number(nominal) || 0;
    const vaDesc = currentVa
      ? `${currentVa.bankName} VA ${currentVa.accountNumber}`
      : 'Virtual Account Bank';
    const vNama = currentVendor?.nama || 'Rekanan';

    switch (skenario) {
      case 'PELUNASAN_UTANG_VENDOR':
        // Debet: Utang Usaha (mengurangi utang), Kredit: Bank (mengurangi kas)
        return [
          {
            id: 'ji-va-1',
            akunId: akunUtangUsaha.id,
            kodeAkun: akunUtangUsaha.kodeAkun,
            namaAkun: akunUtangUsaha.namaAkun,
            debet: val,
            kredit: 0,
            keteranganItem: `Pelunasan Utang Dagang - ${vNama}`,
          },
          {
            id: 'ji-va-2',
            akunId: akunKasBank.id,
            kodeAkun: akunKasBank.kodeAkun,
            namaAkun: akunKasBank.namaAkun,
            debet: 0,
            kredit: val,
            keteranganItem: `Transfer Bank via ${vaDesc}`,
          },
        ];

      case 'PENERIMAAN_PELUNASAN_CUSTOMER':
        // Debet: Bank (kas bertambah), Kredit: Piutang Usaha (piutang berkurang)
        return [
          {
            id: 'ji-va-1',
            akunId: akunKasBank.id,
            kodeAkun: akunKasBank.kodeAkun,
            namaAkun: akunKasBank.namaAkun,
            debet: val,
            kredit: 0,
            keteranganItem: `Penerimaan Pembayaran via ${vaDesc}`,
          },
          {
            id: 'ji-va-2',
            akunId: akunPiutangUsaha.id,
            kodeAkun: akunPiutangUsaha.kodeAkun,
            namaAkun: akunPiutangUsaha.namaAkun,
            debet: 0,
            kredit: val,
            keteranganItem: `Pelunasan Piutang Usaha - ${vNama}`,
          },
        ];

      case 'PEMBELIAN_TEMPO_TAGIHAN_VA':
        // Debet: Persediaan / Beban, Kredit: Utang Usaha
        return [
          {
            id: 'ji-va-1',
            akunId: akunPersediaanBeban.id,
            kodeAkun: akunPersediaanBeban.kodeAkun,
            namaAkun: akunPersediaanBeban.namaAkun,
            debet: val,
            kredit: 0,
            keteranganItem: `Pembelian Bahan / Beban dari ${vNama}`,
          },
          {
            id: 'ji-va-2',
            akunId: akunUtangUsaha.id,
            kodeAkun: akunUtangUsaha.kodeAkun,
            namaAkun: akunUtangUsaha.namaAkun,
            debet: 0,
            kredit: val,
            keteranganItem: `Tagihan Utang Usaha (Tempo VA: ${vaDesc})`,
          },
        ];

      case 'PENERIMAAN_PENDAPATAN_LANGSUNG_VA':
        // Debet: Bank, Kredit: Pendapatan Operasional
        return [
          {
            id: 'ji-va-1',
            akunId: akunKasBank.id,
            kodeAkun: akunKasBank.kodeAkun,
            namaAkun: akunKasBank.namaAkun,
            debet: val,
            kredit: 0,
            keteranganItem: `Penerimaan Setoran VA - ${vaDesc}`,
          },
          {
            id: 'ji-va-2',
            akunId: akunPendapatan.id,
            kodeAkun: akunPendapatan.kodeAkun,
            namaAkun: akunPendapatan.namaAkun,
            debet: 0,
            kredit: val,
            keteranganItem: `Pendapatan Jasa / Penjualan dari ${vNama}`,
          },
        ];
    }
  }, [
    skenario,
    nominal,
    currentVa,
    currentVendor,
    akunKasBank,
    akunUtangUsaha,
    akunPiutangUsaha,
    akunPersediaanBeban,
    akunPendapatan,
  ]);

  // Default Memo
  const defaultMemo = useMemo(() => {
    const vaText = currentVa
      ? `${currentVa.bankName} ${currentVa.accountNumber}`
      : 'VA Bank';
    const vNama = currentVendor?.nama || 'Rekanan';
    switch (skenario) {
      case 'PELUNASAN_UTANG_VENDOR':
        return `Pelunasan Utang Usaha via Virtual Account ${vaText} a.n ${vNama} (Ref: ${noFakturRef})`;
      case 'PENERIMAAN_PELUNASAN_CUSTOMER':
        return `Penerimaan Pelunasan Piutang via Virtual Account ${vaText} dari ${vNama} (Ref: ${noFakturRef})`;
      case 'PEMBELIAN_TEMPO_TAGIHAN_VA':
        return `Faktur Pembelian Tempo Kredit dari ${vNama} dgn Instruksi Pembayaran VA ${vaText} (Ref: ${noFakturRef})`;
      case 'PENERIMAAN_PENDAPATAN_LANGSUNG_VA':
        return `Penerimaan Pendapatan Usaha Langsung via Virtual Account ${vaText} dari ${vNama}`;
    }
  }, [skenario, currentVa, currentVendor, noFakturRef]);

  if (!isOpen) return null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!nominal || nominal <= 0) {
      alert('Nominal transaksi harus lebih besar dari Rp 0!');
      return;
    }
    if (!currentVendor) {
      alert('Pilih rekanan terlebih dahulu!');
      return;
    }

    const val = Number(nominal);
    const finalMemo = keteranganCustom.trim() || defaultMemo;
    const finalJournalId = `jur-va-${Date.now()}`;

    // 1. Create balanced Jurnal Entry
    const newJurnal: Jurnal = {
      id: finalJournalId,
      noBukti,
      tanggal,
      bulan: StorageService.getNamaPeriodeFromDate(tanggal) || activePeriodeNama || 'Januari 2026',
      tipe: 'JU',
      keterangan: finalMemo,
      items: previewJournalItems,
      totalDebet: val,
      totalKredit: val,
      createdAt: new Date().toISOString().replace('T', ' ').substring(0, 19),
      createdBy: profile.namaAkuntan || 'Akuntan Keuangan',
    };

    onSaveJurnal(newJurnal);

    // 2. Synchronize to Virtual Ledger (Kartu Buku Pembantu Rekanan)
    if (syncToVirtualLedger && currentVendor) {
      const isCustomer = currentVendor.tipe === 'Customer';
      let debet = 0;
      let kredit = 0;
      let tipeTransaksi: VirtualLedgerItem['tipeTransaksi'] = 'Pelunasan / Bayar';

      if (skenario === 'PELUNASAN_UTANG_VENDOR') {
        debet = val; // Mengurangi saldo utang vendor
        kredit = 0;
        tipeTransaksi = 'Pelunasan / Bayar';
      } else if (skenario === 'PENERIMAAN_PELUNASAN_CUSTOMER') {
        debet = 0;
        kredit = val; // Mengurangi saldo piutang customer
        tipeTransaksi = 'Pelunasan / Bayar';
      } else if (skenario === 'PEMBELIAN_TEMPO_TAGIHAN_VA') {
        debet = 0;
        kredit = val; // Menambah utang baru ke supplier
        tipeTransaksi = 'Tagihan / Pembelian';
      } else {
        debet = isCustomer ? 0 : val;
        kredit = isCustomer ? val : 0;
        tipeTransaksi = 'Pelunasan / Bayar';
      }

      const newVlItem: VirtualLedgerItem = {
        id: `vl-auto-${Date.now()}`,
        vendorId: currentVendor.id,
        tanggal,
        noReferensi: noFakturRef,
        tipeTransaksi,
        debet,
        kredit,
        saldoBerjalan: 0, // StorageService will recalculate
        jurnalId: finalJournalId,
        keterangan: finalMemo,
        statusPembayaran,
      };

      StorageService.saveVirtualLedgerItem(newVlItem);
    }

    if (onRefreshData) {
      onRefreshData();
    }

    // Set success state
    setSuccessInfo({
      noBukti,
      nominal: val,
      vendorNama: currentVendor.nama,
      vaNumber: currentVa?.accountNumber || '-',
      bankName: currentVa?.bankName || 'Bank',
    });
  };

  const handleResetForm = () => {
    setSuccessInfo(null);
    setNoBukti(`JU-VA-${Date.now().toString().slice(-4)}`);
    setNoFakturRef(`INV-VA-${Date.now().toString().slice(-4)}`);
    setKeteranganCustom('');
    setNominal(currentVendor?.saldoHutang || 5000000);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-3 sm:p-4 backdrop-blur-xs overflow-y-auto">
      <div className="flex max-h-[92vh] w-full max-w-4xl flex-col rounded-xl bg-white shadow-2xl overflow-hidden border border-slate-200 my-auto">
        {/* Modal Header */}
        <div className="flex items-center justify-between border-b border-indigo-700 bg-linear-to-r from-slate-900 via-indigo-950 to-slate-900 px-6 py-4 text-white">
          <div className="flex items-center gap-3">
            <div className="rounded-lg bg-indigo-600/40 border border-indigo-400/30 p-2">
              <CreditCard className="h-5 w-5 text-indigo-300" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h3 className="text-base font-bold text-white tracking-wide">
                  Pencatatan Transaksi Virtual Account (VA) ke Jurnal Umum
                </h3>
                <span className="rounded-full bg-indigo-500/30 border border-indigo-400/40 px-2 py-0.5 text-[10px] font-semibold text-indigo-200">
                  Otomatisasi SAK EMKM
                </span>
              </div>
              <p className="text-xs text-indigo-200/80">
                Hubungkan mutasi Virtual Account perbankan ke Jurnal Umum & otomatis alirkan ke semua Laporan Keuangan
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="rounded-lg p-1 text-slate-400 hover:bg-slate-800 hover:text-white transition-colors"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Tab Navigation */}
        <div className="flex border-b border-slate-200 bg-slate-50 px-6 pt-2">
          <button
            onClick={() => setActiveModalTab('form')}
            className={`flex items-center gap-2 border-b-2 px-4 py-2.5 text-xs font-bold transition-all ${
              activeModalTab === 'form'
                ? 'border-indigo-600 text-indigo-700 bg-white rounded-t-lg shadow-xs'
                : 'border-transparent text-slate-600 hover:text-slate-900'
            }`}
          >
            <FileText className="h-4 w-4" />
            1. Form Transaksi VA & Jurnal
          </button>
          <button
            onClick={() => setActiveModalTab('diagram')}
            className={`flex items-center gap-2 border-b-2 px-4 py-2.5 text-xs font-bold transition-all ${
              activeModalTab === 'diagram'
                ? 'border-indigo-600 text-indigo-700 bg-white rounded-t-lg shadow-xs'
                : 'border-transparent text-slate-600 hover:text-slate-900'
            }`}
          >
            <Layers className="h-4 w-4" />
            2. Peta Alur ke Seluruh Laporan
          </button>
          <button
            onClick={() => setActiveModalTab('guide')}
            className={`flex items-center gap-2 border-b-2 px-4 py-2.5 text-xs font-bold transition-all ${
              activeModalTab === 'guide'
                ? 'border-indigo-600 text-indigo-700 bg-white rounded-t-lg shadow-xs'
                : 'border-transparent text-slate-600 hover:text-slate-900'
            }`}
          >
            <BookOpen className="h-4 w-4" />
            3. Panduan SOP & Standar Akuntansi
          </button>
        </div>

        {/* Modal Body */}
        <div className="flex-1 overflow-y-auto p-6 space-y-6">
          {successInfo ? (
            /* SUCCESS CONFIRMATION PANEL */
            <div className="space-y-6 text-center py-6">
              <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 animate-bounce">
                <CheckCircle2 className="h-10 w-10" />
              </div>
              <div className="space-y-2 max-w-lg mx-auto">
                <h3 className="text-xl font-bold text-slate-900">
                  Transaksi Virtual Account Berhasil Diposting!
                </h3>
                <p className="text-xs text-slate-600 leading-relaxed">
                  Bukti Jurnal <strong className="text-indigo-700">{successInfo.noBukti}</strong> senilai{' '}
                  <strong className="text-slate-900">
                    Rp {successInfo.nominal.toLocaleString('id-ID')}
                  </strong>{' '}
                  telah tercatat di <span className="font-semibold text-slate-800">Jurnal Umum</span> dan
                  secara otomatis memperbarui seluruh laporan keuangan:
                </p>
              </div>

              {/* Status report cards */}
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 max-w-3xl mx-auto text-left">
                <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
                  <div className="text-[10px] font-bold uppercase text-slate-500">1. Jurnal Umum</div>
                  <div className="text-xs font-bold text-slate-800 mt-1">Status: OK Terposting</div>
                  <div className="text-[10px] text-emerald-600 flex items-center gap-1 mt-0.5">
                    <Check className="h-3 w-3" /> Debet = Kredit
                  </div>
                </div>

                <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
                  <div className="text-[10px] font-bold uppercase text-slate-500">2. Buku Besar</div>
                  <div className="text-xs font-bold text-slate-800 mt-1">Mutasi Akun Terupdate</div>
                  <div className="text-[10px] text-blue-600 flex items-center gap-1 mt-0.5">
                    <Check className="h-3 w-3" /> Kas/Bank & Utang
                  </div>
                </div>

                <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
                  <div className="text-[10px] font-bold uppercase text-slate-500">3. Neraca Saldo & Neraca</div>
                  <div className="text-xs font-bold text-slate-800 mt-1">Posisi Seimbang</div>
                  <div className="text-[10px] text-emerald-600 flex items-center gap-1 mt-0.5">
                    <Check className="h-3 w-3" /> Aktiva = Pasiva
                  </div>
                </div>

                <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
                  <div className="text-[10px] font-bold uppercase text-slate-500">4. Virtual Ledger</div>
                  <div className="text-xs font-bold text-slate-800 mt-1">Kartu Utang Rekanan</div>
                  <div className="text-[10px] text-indigo-600 flex items-center gap-1 mt-0.5">
                    <Check className="h-3 w-3" /> Saldo Terpotong
                  </div>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex flex-wrap items-center justify-center gap-3 pt-4 border-t border-slate-200">
                <button
                  onClick={handleResetForm}
                  className="rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-xs hover:bg-indigo-700"
                >
                  + Input Transaksi VA Lainnya
                </button>
                {onNavigateTab && (
                  <>
                    <button
                      onClick={() => {
                        onClose();
                        onNavigateTab('bukubesar');
                      }}
                      className="rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50"
                    >
                      Buka Buku Besar
                    </button>
                    <button
                      onClick={() => {
                        onClose();
                        onNavigateTab('laporan-balancesheet');
                      }}
                      className="rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50"
                    >
                      Buka Neraca / Posisi Keuangan
                    </button>
                    <button
                      onClick={() => {
                        onClose();
                        onNavigateTab('vendors');
                      }}
                      className="rounded-lg border border-indigo-300 bg-indigo-50 px-3 py-2 text-xs font-semibold text-indigo-700 hover:bg-indigo-100"
                    >
                      Buka Kartu Virtual Ledger Rekanan
                    </button>
                  </>
                )}
                <button
                  onClick={onClose}
                  className="rounded-lg border border-slate-300 px-4 py-2 text-xs font-medium text-slate-600 hover:bg-slate-100"
                >
                  Tutup
                </button>
              </div>
            </div>
          ) : activeModalTab === 'form' ? (
            /* TAB 1: FORM INPUT */
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Skenario Selection */}
              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                  Langkah 1: Pilih Jenis / Skenario Transaksi Virtual Account
                </label>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  {/* Skenario A */}
                  <label
                    onClick={() => setSkenario('PELUNASAN_UTANG_VENDOR')}
                    className={`flex items-start gap-3 rounded-lg border p-3 cursor-pointer transition-all ${
                      skenario === 'PELUNASAN_UTANG_VENDOR'
                        ? 'border-indigo-600 bg-indigo-50/60 ring-2 ring-indigo-500/20'
                        : 'border-slate-200 hover:border-slate-300 bg-white'
                    }`}
                  >
                    <input
                      type="radio"
                      name="skenario"
                      checked={skenario === 'PELUNASAN_UTANG_VENDOR'}
                      onChange={() => setSkenario('PELUNASAN_UTANG_VENDOR')}
                      className="mt-0.5 text-indigo-600"
                    />
                    <div>
                      <div className="text-xs font-bold text-slate-900">
                        A. Pelunasan Utang Vendor via VA Bank
                      </div>
                      <div className="text-[11px] text-slate-600 mt-0.5">
                        Perusahaan bayar tagihan vendor transfer ke nomor VA Bank rekanan.
                      </div>
                      <div className="text-[10px] font-mono text-indigo-700 mt-1">
                        Debet: Utang Usaha (2-1010) &bull; Kredit: Bank Operasional (1-1020)
                      </div>
                    </div>
                  </label>

                  {/* Skenario B */}
                  <label
                    onClick={() => setSkenario('PENERIMAAN_PELUNASAN_CUSTOMER')}
                    className={`flex items-start gap-3 rounded-lg border p-3 cursor-pointer transition-all ${
                      skenario === 'PENERIMAAN_PELUNASAN_CUSTOMER'
                        ? 'border-indigo-600 bg-indigo-50/60 ring-2 ring-indigo-500/20'
                        : 'border-slate-200 hover:border-slate-300 bg-white'
                    }`}
                  >
                    <input
                      type="radio"
                      name="skenario"
                      checked={skenario === 'PENERIMAAN_PELUNASAN_CUSTOMER'}
                      onChange={() => setSkenario('PENERIMAAN_PELUNASAN_CUSTOMER')}
                      className="mt-0.5 text-indigo-600"
                    />
                    <div>
                      <div className="text-xs font-bold text-slate-900">
                        B. Penerimaan Pelunasan Piutang via VA
                      </div>
                      <div className="text-[11px] text-slate-600 mt-0.5">
                        Customer transfer ke nomor VA penagihan milik perusahaan.
                      </div>
                      <div className="text-[10px] font-mono text-indigo-700 mt-1">
                        Debet: Bank Operasional (1-1020) &bull; Kredit: Piutang Usaha (1-1030)
                      </div>
                    </div>
                  </label>

                  {/* Skenario C */}
                  <label
                    onClick={() => setSkenario('PEMBELIAN_TEMPO_TAGIHAN_VA')}
                    className={`flex items-start gap-3 rounded-lg border p-3 cursor-pointer transition-all ${
                      skenario === 'PEMBELIAN_TEMPO_TAGIHAN_VA'
                        ? 'border-indigo-600 bg-indigo-50/60 ring-2 ring-indigo-500/20'
                        : 'border-slate-200 hover:border-slate-300 bg-white'
                    }`}
                  >
                    <input
                      type="radio"
                      name="skenario"
                      checked={skenario === 'PEMBELIAN_TEMPO_TAGIHAN_VA'}
                      onChange={() => setSkenario('PEMBELIAN_TEMPO_TAGIHAN_VA')}
                      className="mt-0.5 text-indigo-600"
                    />
                    <div>
                      <div className="text-xs font-bold text-slate-900">
                        C. Pembelian Bahan/Tempo dgn Instruksi VA
                      </div>
                      <div className="text-[11px] text-slate-600 mt-0.5">
                        Menerima faktur pembelian barang/jasa kredit dgn lampiran VA pelunasan.
                      </div>
                      <div className="text-[10px] font-mono text-indigo-700 mt-1">
                        Debet: Persediaan/Beban &bull; Kredit: Utang Usaha (2-1010)
                      </div>
                    </div>
                  </label>

                  {/* Skenario D */}
                  <label
                    onClick={() => setSkenario('PENERIMAAN_PENDAPATAN_LANGSUNG_VA')}
                    className={`flex items-start gap-3 rounded-lg border p-3 cursor-pointer transition-all ${
                      skenario === 'PENERIMAAN_PENDAPATAN_LANGSUNG_VA'
                        ? 'border-indigo-600 bg-indigo-50/60 ring-2 ring-indigo-500/20'
                        : 'border-slate-200 hover:border-slate-300 bg-white'
                    }`}
                  >
                    <input
                      type="radio"
                      name="skenario"
                      checked={skenario === 'PENERIMAAN_PENDAPATAN_LANGSUNG_VA'}
                      onChange={() => setSkenario('PENERIMAAN_PENDAPATAN_LANGSUNG_VA')}
                      className="mt-0.5 text-indigo-600"
                    />
                    <div>
                      <div className="text-xs font-bold text-slate-900">
                        D. Penerimaan Pendapatan Jasa Langsung via VA
                      </div>
                      <div className="text-[11px] text-slate-600 mt-0.5">
                        Klien membayar termin jasa/proyek langsung tunai masuk via VA.
                      </div>
                      <div className="text-[10px] font-mono text-indigo-700 mt-1">
                        Debet: Bank (1-1020) &bull; Kredit: Pendapatan Operasional (4-1000)
                      </div>
                    </div>
                  </label>
                </div>
              </div>

              {/* Rekanan & Virtual Account Picker */}
              <div className="rounded-lg border border-slate-200 bg-slate-50/70 p-4 space-y-4">
                <div className="flex items-center justify-between">
                  <label className="text-xs font-bold uppercase tracking-wider text-slate-700 flex items-center gap-1.5">
                    <Building2 className="h-4 w-4 text-slate-500" />
                    Langkah 2: Pilih Rekanan & Nomor Virtual Account (VA)
                  </label>
                  {currentVendor && (
                    <span className="text-[11px] text-slate-500">
                      Saldo Utang/Piutang Saat Ini:{' '}
                      <strong className="text-indigo-700 font-mono">
                        Rp {currentVendor.saldoHutang.toLocaleString('id-ID')}
                      </strong>
                    </span>
                  )}
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {/* Select Rekanan */}
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                      Nama Rekanan (Vendor / Supplier / Customer)
                    </label>
                    <select
                      value={selectedVendorId}
                      onChange={(e) => {
                        setSelectedVendorId(e.target.value);
                        setSelectedVaId('');
                      }}
                      className="w-full rounded border border-slate-300 bg-white px-3 py-2 text-xs font-medium focus:border-indigo-500 focus:outline-hidden"
                    >
                      {vendors.map((v) => (
                        <option key={v.id} value={v.id}>
                          [{v.kode}] {v.nama} ({v.tipe} - {v.kategoriUsaha})
                        </option>
                      ))}
                    </select>
                  </div>

                  {/* Select Virtual Account */}
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                      Pilihan Virtual Account (VA) Terdaftar
                    </label>
                    {currentVendor && currentVendor.virtualAccounts.length > 0 ? (
                      <select
                        value={selectedVaId || currentVendor.virtualAccounts[0]?.id}
                        onChange={(e) => setSelectedVaId(e.target.value)}
                        className="w-full rounded border border-slate-300 bg-white px-3 py-2 text-xs font-mono font-medium focus:border-indigo-500 focus:outline-hidden"
                      >
                        {currentVendor.virtualAccounts.map((va) => (
                          <option key={va.id} value={va.id}>
                            {va.bankName} - {va.accountNumber} ({va.accountHolderName})
                          </option>
                        ))}
                      </select>
                    ) : (
                      <div className="rounded border border-amber-300 bg-amber-50 p-2 text-[11px] text-amber-800 flex items-center gap-1.5">
                        <AlertCircle className="h-4 w-4 shrink-0 text-amber-600" />
                        <span>Rekanan ini belum memiliki VA. Akan dicatat sebagai VA Bank Mitra.</span>
                      </div>
                    )}
                  </div>
                </div>

                {/* Info badge of chosen VA */}
                {currentVa && (
                  <div className="flex flex-wrap items-center justify-between gap-2 rounded bg-indigo-900/5 border border-indigo-200 px-3 py-2 text-xs">
                    <div className="flex items-center gap-2">
                      <span className="rounded bg-indigo-600 px-2 py-0.5 text-[10px] font-bold text-white uppercase">
                        {currentVa.bankName}
                      </span>
                      <span className="font-mono font-bold text-slate-800">
                        {currentVa.accountNumber}
                      </span>
                      <span className="text-slate-500">&bull; {currentVa.accountHolderName}</span>
                    </div>
                    <span className="text-[10px] text-slate-500">
                      Tipe VA: <strong className="text-slate-700">{currentVa.vaType}</strong> | Mata Uang:{' '}
                      <strong className="text-slate-700">{currentVa.currency}</strong>
                    </span>
                  </div>
                )}
              </div>

              {/* Form Input Detail Transaksi */}
              <div className="space-y-4">
                <label className="block text-xs font-bold uppercase tracking-wider text-slate-700">
                  Langkah 3: Rincian Nominal, Tanggal & Nomor Bukti
                </label>

                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                  {/* Tanggal */}
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                      Tanggal Transaksi
                    </label>
                    <input
                      type="date"
                      value={tanggal}
                      onChange={(e) => setTanggal(e.target.value)}
                      className="w-full rounded border border-slate-300 px-3 py-2 text-xs font-medium focus:border-indigo-500 focus:outline-hidden"
                      required
                    />
                  </div>

                  {/* No Bukti Jurnal */}
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                      No. Bukti Jurnal Umum
                    </label>
                    <input
                      type="text"
                      value={noBukti}
                      onChange={(e) => setNoBukti(e.target.value)}
                      placeholder="JU-VA-2026/01/001"
                      className="w-full rounded border border-slate-300 px-3 py-2 text-xs font-mono font-medium focus:border-indigo-500 focus:outline-hidden"
                      required
                    />
                  </div>

                  {/* No Faktur / Ref Rekanan */}
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                      No. Faktur / Tagihan / Ref VA
                    </label>
                    <input
                      type="text"
                      value={noFakturRef}
                      onChange={(e) => setNoFakturRef(e.target.value)}
                      placeholder="INV-VND-001"
                      className="w-full rounded border border-slate-300 px-3 py-2 text-xs font-mono font-medium focus:border-indigo-500 focus:outline-hidden"
                      required
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {/* Nominal Transaksi */}
                  <div>
                    <div className="flex items-center justify-between mb-1">
                      <label className="block text-[11px] font-semibold text-slate-600">
                        Nominal Transaksi (IDR) *
                      </label>
                      <span className="text-[11px] font-mono font-bold text-indigo-700">
                        Rp {Number(nominal || 0).toLocaleString('id-ID')}
                      </span>
                    </div>
                    <div className="relative">
                      <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-xs font-bold text-slate-500">
                        Rp
                      </div>
                      <input
                        type="number"
                        min="0.01"
                        step="any"
                        placeholder="0"
                        value={nominal === 0 ? '' : nominal}
                        onChange={(e) => {
                          const raw = e.target.value;
                          setNominal(raw === '' ? 0 : parseFloat(raw) || 0);
                        }}
                        className="w-full rounded border border-slate-300 pl-10 pr-3 py-2 text-xs font-mono font-bold text-slate-900 focus:border-indigo-500 focus:outline-hidden"
                        required
                      />
                    </div>
                    {/* Quick Nominal Presets */}
                    <div className="flex flex-wrap gap-1.5 mt-2">
                      {currentVendor && currentVendor.saldoHutang > 0 && (
                        <button
                          type="button"
                          onClick={() => setNominal(currentVendor.saldoHutang)}
                          className="px-2 py-0.5 rounded bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-semibold text-[10px] border border-indigo-200 cursor-pointer"
                        >
                          Sesuai Saldo: Rp {currentVendor.saldoHutang.toLocaleString('id-ID')}
                        </button>
                      )}
                      <button
                        type="button"
                        onClick={() => setNominal(1000000)}
                        className="px-2 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium text-[10px] cursor-pointer"
                      >
                        1 Juta
                      </button>
                      <button
                        type="button"
                        onClick={() => setNominal(5000000)}
                        className="px-2 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium text-[10px] cursor-pointer"
                      >
                        5 Juta
                      </button>
                      <button
                        type="button"
                        onClick={() => setNominal(10000000)}
                        className="px-2 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium text-[10px] cursor-pointer"
                      >
                        10 Juta
                      </button>
                      <button
                        type="button"
                        onClick={() => setNominal(346601240)}
                        className="px-2 py-0.5 rounded bg-blue-50 hover:bg-blue-100 text-blue-700 font-medium text-[10px] border border-blue-200 cursor-pointer"
                      >
                        346.601.240 (HTI)
                      </button>
                    </div>
                  </div>

                  {/* Status Pembayaran */}
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                      Status Pembayaran di Kartu Pembantu
                    </label>
                    <select
                      value={statusPembayaran}
                      onChange={(e) => setStatusPembayaran(e.target.value as 'Lunas' | 'Sebagian')}
                      className="w-full rounded border border-slate-300 bg-white px-3 py-2 text-xs font-medium focus:border-indigo-500 focus:outline-hidden"
                    >
                      <option value="Lunas">Lunas (Full Settlement)</option>
                      <option value="Sebagian">Sebagian (Partial Payment / Uang Muka)</option>
                    </select>
                  </div>
                </div>

                {/* Skenario C custom account if applicable */}
                {skenario === 'PEMBELIAN_TEMPO_TAGIHAN_VA' && (
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                      Akun Persediaan / Beban yang Didebet
                    </label>
                    <select
                      value={customBebanAkunId || akunPersediaanBeban.id}
                      onChange={(e) => setCustomBebanAkunId(e.target.value)}
                      className="w-full rounded border border-slate-300 bg-white px-3 py-2 text-xs font-medium focus:border-indigo-500 focus:outline-hidden"
                    >
                      {akuns
                        .filter(
                          (a) =>
                            a.kategori === 'Aktiva Lancar' ||
                            a.kategori === 'Beban Pokok Penjualan' ||
                            a.kategori === 'Beban Operasional'
                        )
                        .map((a) => (
                          <option key={a.id} value={a.id}>
                            {a.kodeAkun} - {a.namaAkun} ({a.kategori})
                          </option>
                        ))}
                    </select>
                  </div>
                )}

                {/* Keterangan / Memo */}
                <div>
                  <label className="block text-[11px] font-semibold text-slate-600 mb-1">
                    Keterangan Transaksi (Memo Jurnal)
                  </label>
                  <input
                    type="text"
                    value={keteranganCustom}
                    onChange={(e) => setKeteranganCustom(e.target.value)}
                    placeholder={defaultMemo}
                    className="w-full rounded border border-slate-300 px-3 py-2 text-xs font-medium focus:border-indigo-500 focus:outline-hidden"
                  />
                  <p className="mt-1 text-[11px] text-slate-500">
                    Otomatis jika dikosongkan: <span className="italic">{defaultMemo}</span>
                  </p>
                </div>

                {/* Sync to Virtual Ledger Checkbox */}
                <div className="rounded-lg border border-indigo-200 bg-indigo-50/50 p-3">
                  <label className="flex items-start gap-2.5 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={syncToVirtualLedger}
                      onChange={(e) => setSyncToVirtualLedger(e.target.checked)}
                      className="mt-0.5 rounded text-indigo-600 focus:ring-indigo-500"
                    />
                    <div>
                      <div className="text-xs font-bold text-indigo-900">
                        Otomatis Sinkronkan ke Kartu Buku Pembantu Rekanan (Virtual Ledger)
                      </div>
                      <div className="text-[11px] text-indigo-700/80 leading-relaxed mt-0.5">
                        Menghitung ulang total tagihan, total pelunasan, serta saldo akhir utang/piutang{' '}
                        <strong>{currentVendor?.nama}</strong> secara langsung tanpa perlu input ulang di menu terpisah.
                      </div>
                    </div>
                  </label>
                </div>
              </div>

              {/* Dynamic Accounting Preview */}
              <div className="rounded-lg border border-slate-300 bg-slate-900 text-white p-4 space-y-3">
                <div className="flex items-center justify-between border-b border-slate-700 pb-2">
                  <div className="flex items-center gap-2">
                    <Scale className="h-4 w-4 text-emerald-400" />
                    <span className="text-xs font-bold uppercase tracking-wider text-slate-200">
                      Preview Baris Jurnal Umum (Debet vs Kredit)
                    </span>
                  </div>
                  <span className="rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 px-2 py-0.5 text-[10px] font-bold">
                    Balance Seimbang
                  </span>
                </div>

                <div className="overflow-x-auto">
                  <table className="w-full text-xs">
                    <thead>
                      <tr className="border-b border-slate-800 text-slate-400 text-[10px] uppercase font-bold text-left">
                        <th className="py-1">Kode</th>
                        <th className="py-1">Nama Akun</th>
                        <th className="py-1">Keterangan Item</th>
                        <th className="py-1 text-right">Debet (Rp)</th>
                        <th className="py-1 text-right">Kredit (Rp)</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-800 font-mono text-[11px]">
                      {previewJournalItems.map((item, idx) => (
                        <tr key={idx} className={item.kredit > 0 ? 'bg-slate-900/60' : ''}>
                          <td className="py-2 text-indigo-300 font-bold">{item.kodeAkun}</td>
                          <td className={`py-2 ${item.kredit > 0 ? 'pl-4 text-slate-200' : 'font-bold text-white'}`}>
                            {item.kredit > 0 && <span className="text-slate-500 mr-1">&bull;</span>}
                            {item.namaAkun}
                          </td>
                          <td className="py-2 text-slate-400 font-sans text-xs">{item.keteranganItem}</td>
                          <td className="py-2 text-right text-emerald-400 font-bold">
                            {item.debet > 0 ? item.debet.toLocaleString('id-ID') : '-'}
                          </td>
                          <td className="py-2 text-right text-amber-400 font-bold">
                            {item.kredit > 0 ? item.kredit.toLocaleString('id-ID') : '-'}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                    <tfoot className="border-t-2 border-slate-700 font-bold font-mono">
                      <tr>
                        <td colSpan={3} className="py-2 text-right uppercase text-slate-400 text-[10px]">
                          Total Debet & Kredit:
                        </td>
                        <td className="py-2 text-right text-emerald-400">
                          Rp {nominal.toLocaleString('id-ID')}
                        </td>
                        <td className="py-2 text-right text-amber-400">
                          Rp {nominal.toLocaleString('id-ID')}
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>

              {/* Submit Buttons */}
              <div className="flex flex-wrap items-center justify-between gap-3 pt-4 border-t border-slate-200">
                <button
                  type="button"
                  onClick={onClose}
                  className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-xs font-bold text-white shadow-md hover:bg-indigo-700 transition-all cursor-pointer"
                >
                  <Sparkles className="h-4 w-4" />
                  Posting Transaksi VA ke Jurnal Umum & Laporan
                </button>
              </div>
            </form>
          ) : activeModalTab === 'diagram' ? (
            /* TAB 2: DIAGRAM ALUR KE LAPORAN */
            <div className="space-y-6">
              <div className="rounded-lg border border-indigo-200 bg-indigo-50/60 p-4">
                <div className="flex items-start gap-3">
                  <div className="rounded-lg bg-indigo-600 p-2 text-white">
                    <Layers className="h-5 w-5" />
                  </div>
                  <div>
                    <h4 className="text-sm font-bold text-indigo-950">
                      Bagaimana Transaksi Virtual Account (VA) Mengalir ke Seluruh Laporan Keuangan?
                    </h4>
                    <p className="text-xs text-indigo-800/90 leading-relaxed mt-1">
                      Sesuai standar akuntansi keuangan (SAK EMKM / PSAK), nomor Virtual Account bertindak sebagai
                      <strong> saluran identifikasi setoran/pembayaran</strong>, bukan akun terpisah di buku besar.
                      Ketika Anda mencatat transaksi VA di Jurnal Umum, sistem secara otomatis mengeksekusi siklus akuntansi
                      berikut ini:
                    </p>
                  </div>
                </div>
              </div>

              {/* Step by step flow */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {/* 1. Jurnal Umum */}
                <div className="rounded-lg border border-slate-200 bg-white p-4 space-y-2 shadow-xs">
                  <div className="flex items-center justify-between">
                    <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-white text-xs font-bold">
                      1
                    </span>
                    <span className="text-[10px] font-bold uppercase text-blue-700">Entri Kronologis</span>
                  </div>
                  <h5 className="font-bold text-xs text-slate-900">Buku Jurnal Umum (General Journal)</h5>
                  <p className="text-[11px] text-slate-600 leading-relaxed">
                    Transaksi tersimpan dengan nomor bukti unik, tanggal, nomor referensi VA, dan pasangan akun Debet/Kredit yang seimbang.
                  </p>
                </div>

                {/* 2. Buku Besar */}
                <div className="rounded-lg border border-slate-200 bg-white p-4 space-y-2 shadow-xs">
                  <div className="flex items-center justify-between">
                    <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-600 text-white text-xs font-bold">
                      2
                    </span>
                    <span className="text-[10px] font-bold uppercase text-emerald-700">Posting Mutasi</span>
                  </div>
                  <h5 className="font-bold text-xs text-slate-900">Buku Besar (General Ledger)</h5>
                  <p className="text-[11px] text-slate-600 leading-relaxed">
                    Setiap baris akun (misal <strong>1-1020 Bank</strong> dan <strong>2-1010 Utang Usaha</strong>)
                    langsung mendapat mutasi debit/kredit dan saldo berjalan terhitung otomatis.
                  </p>
                </div>

                {/* 3. Neraca Saldo */}
                <div className="rounded-lg border border-slate-200 bg-white p-4 space-y-2 shadow-xs">
                  <div className="flex items-center justify-between">
                    <span className="flex h-6 w-6 items-center justify-center rounded-full bg-purple-600 text-white text-xs font-bold">
                      3
                    </span>
                    <span className="text-[10px] font-bold uppercase text-purple-700">Validasi Keseimbangan</span>
                  </div>
                  <h5 className="font-bold text-xs text-slate-900">Neraca Saldo (Trial Balance)</h5>
                  <p className="text-[11px] text-slate-600 leading-relaxed">
                    Mengagregasi total mutasi periode ini ke dalam 10 kolom neraca lajur (sebelum penyesuaian, AJP, dan setelah penyesuaian).
                  </p>
                </div>

                {/* 4. Laporan Posisi Keuangan */}
                <div className="rounded-lg border border-slate-200 bg-white p-4 space-y-2 shadow-xs">
                  <div className="flex items-center justify-between">
                    <span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-white text-xs font-bold">
                      4
                    </span>
                    <span className="text-[10px] font-bold uppercase text-indigo-700">Neraca Resmi</span>
                  </div>
                  <h5 className="font-bold text-xs text-slate-900">Posisi Keuangan / Neraca (Balance Sheet)</h5>
                  <p className="text-[11px] text-slate-600 leading-relaxed">
                    Saldo <strong>Kas & Bank</strong> (Aset Lancar) dan <strong>Utang Usaha</strong> (Kewajiban)
                    berkurang atau bertambah secara proporsional sehingga Total Aktiva tetap = Total Pasiva.
                  </p>
                </div>

                {/* 5. Laporan Arus Kas */}
                <div className="rounded-lg border border-slate-200 bg-white p-4 space-y-2 shadow-xs">
                  <div className="flex items-center justify-between">
                    <span className="flex h-6 w-6 items-center justify-center rounded-full bg-amber-600 text-white text-xs font-bold">
                      5
                    </span>
                    <span className="text-[10px] font-bold uppercase text-amber-700">Likuiditas Kas</span>
                  </div>
                  <h5 className="font-bold text-xs text-slate-900">Laporan Arus Kas (Cash Flow)</h5>
                  <p className="text-[11px] text-slate-600 leading-relaxed">
                    Karena melibatkan akun Bank Operasional (1-1020), mutasi kas otomatis digolongkan ke dalam
                    <strong> Arus Kas Aktivitas Operasi</strong> (pembayaran ke pemasok atau penerimaan dari pelanggan).
                  </p>
                </div>

                {/* 6. Virtual Ledger */}
                <div className="rounded-lg border border-slate-200 bg-white p-4 space-y-2 shadow-xs">
                  <div className="flex items-center justify-between">
                    <span className="flex h-6 w-6 items-center justify-center rounded-full bg-rose-600 text-white text-xs font-bold">
                      6
                    </span>
                    <span className="text-[10px] font-bold uppercase text-rose-700">Buku Pembantu Rekanan</span>
                  </div>
                  <h5 className="font-bold text-xs text-slate-900">Kartu Virtual Ledger Rekanan (Sub-Ledger)</h5>
                  <p className="text-[11px] text-slate-600 leading-relaxed">
                    Buku pembantu vendor mencatat detail faktur, nomor VA, status lunas, dan sisa kewajiban
                    sebagai bukti audit rekonsiliasi perbankan.
                  </p>
                </div>
              </div>
            </div>
          ) : (
            /* TAB 3: PANDUAN SOP & STANDAR */
            <div className="space-y-6">
              <div className="rounded-lg border border-slate-200 bg-white p-5 space-y-4">
                <h4 className="text-sm font-bold uppercase tracking-wider text-slate-900 flex items-center gap-2">
                  <BookOpen className="h-4 w-4 text-indigo-600" />
                  Prinsip Akuntansi Virtual Account (SAK EMKM / PSAK)
                </h4>

                <div className="space-y-3 text-xs text-slate-700 leading-relaxed">
                  <p>
                    <strong>Mengapa tidak membuat 1 Akun COA untuk setiap nomor Virtual Account?</strong>
                    <br />
                    Jika perusahaan memiliki puluhan vendor dan ribuan pelanggan, membuat nomor akun di Chart of Accounts
                    (misal: 1-1020-001, 1-1020-002, dst.) akan menyebabkan <em>Account Bloat (ledakan akun)</em>
                    yang merusak struktur Buku Besar dan Neraca Saldo.
                  </p>

                  <div className="rounded-lg border border-emerald-200 bg-emerald-50/70 p-3">
                    <strong className="text-emerald-950 font-semibold block mb-1">
                      Praktik Terbaik (Best Practice Perbankan & SIA Terpadu):
                    </strong>
                    <ul className="list-disc pl-5 space-y-1 text-emerald-900 text-[11px]">
                      <li>
                        <strong>Buku Besar Utama (Main Ledger):</strong> Cukup menggunakan 1 akun{' '}
                        <code>1-1020 Bank Operasional</code> (atau sub-akun per bank mitra, misal Bank BCA).
                      </li>
                      <li>
                        <strong>Buku Pembantu (Sub-Ledger / Virtual Ledger):</strong> Menyimpan detail rincian transaksi
                        per nomor Virtual Account, per Vendor/Supplier/Customer.
                      </li>
                      <li>
                        <strong>Jurnal Umum:</strong> Menjembatani keduanya dengan mencantumkan Nomor VA pada kolom
                        keterangan/referensi untuk memudahkan proses <em>Bank Reconciliation</em>.
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

              {/* 4 Contoh Transaksi Lengkap */}
              <div className="space-y-3">
                <h4 className="text-xs font-bold uppercase tracking-wider text-slate-800">
                  4 Contoh Jurnal Standar Transaksi Virtual Account:
                </h4>

                <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 space-y-1 text-xs">
                  <div className="font-bold text-slate-900">
                    Kasus 1: Bayar Pelunasan Utang Vendor via VA Bank
                  </div>
                  <div className="font-mono text-[11px] text-slate-700 pl-3 border-l-2 border-indigo-500">
                    (D) 2-1010 Utang Usaha - Rp 5.000.000<br />
                    (K) 1-1020 Bank Operasional - Rp 5.000.000<br />
                    <em>Ket: Pelunasan via VA BCA 80120812345678 a.n PT Semen Nusantara</em>
                  </div>
                </div>

                <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 space-y-1 text-xs">
                  <div className="font-bold text-slate-900">
                    Kasus 2: Terima Pelunasan Piutang Pelanggan via VA
                  </div>
                  <div className="font-mono text-[11px] text-slate-700 pl-3 border-l-2 border-emerald-500">
                    (D) 1-1020 Bank Operasional - Rp 12.000.000<br />
                    (K) 1-1030 Piutang Usaha - Rp 12.000.000<br />
                    <em>Ket: Pelunasan via VA Mandiri 88710898765432 dari PT Graha Konstruksi</em>
                  </div>
                </div>

                <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 space-y-1 text-xs">
                  <div className="font-bold text-slate-900">
                    Kasus 3: Pembelian Bahan Tempo dgn Tagihan VA
                  </div>
                  <div className="font-mono text-[11px] text-slate-700 pl-3 border-l-2 border-amber-500">
                    (D) 1-1040 Persediaan Bahan Baku - Rp 8.500.000<br />
                    (K) 2-1010 Utang Usaha - Rp 8.500.000<br />
                    <em>Ket: Faktur INV-SPL-002 tagihan VA Permata 84080123999 CV Baja Perkasa</em>
                  </div>
                </div>

                <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 space-y-1 text-xs">
                  <div className="font-bold text-slate-900">
                    Kasus 4: Penerimaan Pendapatan Jasa Langsung via VA
                  </div>
                  <div className="font-mono text-[11px] text-slate-700 pl-3 border-l-2 border-purple-500">
                    (D) 1-1020 Bank Operasional - Rp 15.000.000<br />
                    (K) 4-1000 Pendapatan Jasa / Usaha - Rp 15.000.000<br />
                    <em>Ket: Pembayaran termin jasa langsung masuk rekening VA penerimaan</em>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};