import React, { useState, useMemo } from 'react';
import {
  VendorSupplier,
  VirtualLedgerItem,
  VirtualAccount,
  User,
  Role,
  BankMitraVA,
  TipeEntitasBisnis,
  ProfilPerusahaan,
  PeriodeAkuntansi,
  Jurnal,
  JurnalItem,
} from '../../types/accounting';
import { StorageService } from '../../services/storage';
import { ExcelService } from '../../services/excelService';
import { SvgQrCode } from '../common/PrintHeader';
import {
  Building2,
  CreditCard,
  BookOpen,
  Plus,
  Edit2,
  Trash2,
  Search,
  Download,
  Printer,
  CheckCircle2,
  Clock,
  AlertCircle,
  Database,
  ArrowRight,
  Filter,
  Copy,
  Check,
  ShieldAlert,
  Wallet,
  FileText,
  DollarSign,
  Layers,
  Sparkles,
} from 'lucide-react';

interface VirtualLedgerViewProps {
  vendors: VendorSupplier[];
  virtualLedgers: VirtualLedgerItem[];
  activeUser: User;
  roles: Role[];
  profile: ProfilPerusahaan;
  activePeriode: PeriodeAkuntansi;
  periodes?: PeriodeAkuntansi[];
  onRefreshData: () => void;
  onNavigateToJurnal?: () => void;
  onNavigateToNeraca?: () => void;
}

export const VirtualLedgerView: React.FC<VirtualLedgerViewProps> = ({
  vendors,
  virtualLedgers,
  activeUser,
  roles,
  profile,
  activePeriode,
  periodes = [],
  onRefreshData,
  onNavigateToJurnal,
  onNavigateToNeraca,
}) => {
  const [activeTab, setActiveTab] = useState<'vendors' | 'ledger' | 'examples' | 'va' | 'sql'>('vendors');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedVendorId, setSelectedVendorId] = useState<string>(vendors[0]?.id || '');
  const [selectedPeriod, setSelectedPeriod] = useState<string>('ALL'); // 'ALL' = Lintas Periode (Multi-Period), atau 'Januari 2026', dll
  const [filterTipe, setFilterTipe] = useState<'ALL' | TipeEntitasBisnis>('ALL');
  const [copiedSql, setCopiedSql] = useState<string | null>(null);

  // Modals
  const [isVendorModalOpen, setIsVendorModalOpen] = useState(false);
  const [editingVendor, setEditingVendor] = useState<VendorSupplier | null>(null);

  const [isVlModalOpen, setIsVlModalOpen] = useState(false);
  const [editingVl, setEditingVl] = useState<VirtualLedgerItem | null>(null);

  const [isVaModalOpen, setIsVaModalOpen] = useState(false);
  const [selectedVendorForVa, setSelectedVendorForVa] = useState<VendorSupplier | null>(null);

  // Check RBAC Permissions for current user
  const userRole = roles.find((r) => r.id === activeUser.role);
  const hasPermission = (perm: string): boolean => {
    if (!userRole) return false;
    if (userRole.permissions.includes('all_access')) return true;
    return userRole.permissions.includes(perm);
  };

  const canCreateVl = hasPermission('create_vl');
  const canEditVl = hasPermission('edit_vl');
  const canDeleteVl = hasPermission('delete_vl');
  const canReconcileVl = hasPermission('reconcile_vl');

  // Summary Metrics
  const summaryMetrics = useMemo(() => {
    let totalHutang = 0;
    let totalTagihan = 0;
    let totalPelunasan = 0;
    let totalVaCount = 0;

    for (const v of vendors) {
      if (v.tipe !== 'Customer') {
        totalHutang += v.saldoHutang;
        totalTagihan += v.totalTagihan;
        totalPelunasan += v.totalDibayar;
      }
      totalVaCount += v.virtualAccounts.length;
    }

    return {
      totalVendors: vendors.length,
      totalHutang,
      totalTagihan,
      totalPelunasan,
      totalVaCount,
    };
  }, [vendors]);

  // Filtered Vendors
  const filteredVendors = useMemo(() => {
    return vendors.filter((v) => {
      const matchSearch =
        v.nama.toLowerCase().includes(searchQuery.toLowerCase()) ||
        v.kode.toLowerCase().includes(searchQuery.toLowerCase()) ||
        v.kategoriUsaha.toLowerCase().includes(searchQuery.toLowerCase());
      const matchTipe = filterTipe === 'ALL' || v.tipe === filterTipe;
      return matchSearch && matchTipe;
    });
  }, [vendors, searchQuery, filterTipe]);

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

  // Perhitungan Mutasi & Saldo Berjalan (Periodic & Lintas Periode Carrying Balance)
  const ledgerCalculation = useMemo(() => {
    if (!currentVendor) {
      return {
        saldoAwal: 0,
        itemsWithBalance: [] as (VirtualLedgerItem & { runningSaldo: number })[],
        totalMutasiDebet: 0,
        totalMutasiKredit: 0,
        saldoAkhir: 0,
      };
    }

    const isCustomer = currentVendor.tipe === 'Customer';
    const allVendorItems = virtualLedgers
      .filter((vl) => vl.vendorId === currentVendor.id)
      .sort((a, b) => new Date(a.tanggal).getTime() - new Date(b.tanggal).getTime());

    // 1. JIKA PILIHAN 'ALL' (Mode Lintas Periode / Multi-Period / All-Time)
    if (selectedPeriod === 'ALL') {
      let running = 0;
      let totalDebet = 0;
      let totalKredit = 0;

      const itemsWithBalance = allVendorItems.map((item) => {
        totalDebet += item.debet;
        totalKredit += item.kredit;
        if (isCustomer) {
          running += item.debet - item.kredit;
        } else {
          running += item.kredit - item.debet;
        }
        return {
          ...item,
          runningSaldo: running,
        };
      });

      return {
        saldoAwal: 0,
        itemsWithBalance,
        totalMutasiDebet: totalDebet,
        totalMutasiKredit: totalKredit,
        saldoAkhir: running,
      };
    }

    // 2. JIKA PILIHAN PER BULAN TERTENTU (misal "Januari 2026", "Februari 2026")
    const monthNames = [
      'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
      'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember',
    ];

    const targetParts = selectedPeriod.split(' ');
    const targetMonthName = targetParts[0];
    const targetYear = parseInt(targetParts[1] || '2026');
    const targetMonthIdx = monthNames.indexOf(targetMonthName);

    const isPriorToPeriod = (item: VirtualLedgerItem): boolean => {
      if (item.periode && item.periode !== selectedPeriod) {
        const parts = item.periode.split(' ');
        const itemMonthIdx = monthNames.indexOf(parts[0]);
        const itemYear = parseInt(parts[1] || '2026');
        if (itemYear < targetYear) return true;
        if (itemYear === targetYear && itemMonthIdx < targetMonthIdx) return true;
        return false;
      }
      const itemDate = new Date(item.tanggal);
      const periodStart = new Date(targetYear, targetMonthIdx >= 0 ? targetMonthIdx : 0, 1);
      return itemDate < periodStart;
    };

    const isInsidePeriod = (item: VirtualLedgerItem): boolean => {
      if (item.periode) {
        return item.periode === selectedPeriod;
      }
      const itemDate = new Date(item.tanggal);
      return (
        itemDate.getFullYear() === targetYear &&
        itemDate.getMonth() === targetMonthIdx
      );
    };

    // Saldo Awal Periode berasal dari saldo akhir kumulatif seluruh mutasi sebelumnya (Carrying Balance)
    let saldoAwal = 0;
    for (const item of allVendorItems) {
      if (isPriorToPeriod(item)) {
        if (isCustomer) {
          saldoAwal += item.debet - item.kredit;
        } else {
          saldoAwal += item.kredit - item.debet;
        }
      }
    }

    let running = saldoAwal;
    let totalDebet = 0;
    let totalKredit = 0;

    const currentPeriodItems = allVendorItems.filter(isInsidePeriod);
    const itemsWithBalance = currentPeriodItems.map((item) => {
      totalDebet += item.debet;
      totalKredit += item.kredit;
      if (isCustomer) {
        running += item.debet - item.kredit;
      } else {
        running += item.kredit - item.debet;
      }
      return {
        ...item,
        runningSaldo: running,
      };
    });

    return {
      saldoAwal,
      itemsWithBalance,
      totalMutasiDebet: totalDebet,
      totalMutasiKredit: totalKredit,
      saldoAkhir: running,
    };
  }, [currentVendor, virtualLedgers, selectedPeriod]);

  const currentLedgerItems = ledgerCalculation.itemsWithBalance;

  // Forms State
  const [vendorForm, setVendorForm] = useState({
    kode: '',
    nama: '',
    tipe: 'Vendor' as TipeEntitasBisnis,
    kategoriUsaha: '',
    npwp: '',
    telepon: '',
    email: '',
    kontakPerson: '',
    syaratPembayaran: 'Net 30',
    plafonKredit: 50000000,
    akunHutangPiutangKode: '2-1010',
    primaryBank: 'Mandiri' as BankMitraVA,
  });

  const [vlForm, setVlForm] = useState({
    vendorId: '',
    tanggal: new Date().toISOString().substring(0, 10),
    noReferensi: '',
    tipeTransaksi: 'Tagihan / Pembelian' as VirtualLedgerItem['tipeTransaksi'],
    jumlah: 0,
    keterangan: '',
    statusPembayaran: 'Belum Lunas' as VirtualLedgerItem['statusPembayaran'],
    autoPostToJournal: true,
  });

  const [vaForm, setVaForm] = useState({
    bankName: 'BCA' as BankMitraVA,
    accountNumber: '',
    accountHolderName: '',
    vaType: 'Static' as 'Static' | 'Dynamic',
    description: '',
  });

  // Handler: Open Add Vendor
  const handleOpenAddVendor = () => {
    const nextNum = vendors.length + 1;
    const prefix = 'VND';
    setEditingVendor(null);
    setVendorForm({
      kode: `${prefix}-${String(nextNum).padStart(3, '0')}`,
      nama: '',
      tipe: 'Vendor',
      kategoriUsaha: '',
      npwp: '',
      telepon: '',
      email: '',
      kontakPerson: '',
      syaratPembayaran: 'Net 30',
      plafonKredit: 50000000,
      akunHutangPiutangKode: '2-1010',
      primaryBank: 'Mandiri',
    });
    setIsVendorModalOpen(true);
  };

  // Handler: Open Edit Vendor
  const handleOpenEditVendor = (v: VendorSupplier) => {
    setEditingVendor(v);
    setVendorForm({
      kode: v.kode,
      nama: v.nama,
      tipe: v.tipe,
      kategoriUsaha: v.kategoriUsaha,
      npwp: v.npwp || '',
      telepon: v.telepon || '',
      email: v.email || '',
      kontakPerson: v.kontakPerson || '',
      syaratPembayaran: v.syaratPembayaran,
      plafonKredit: v.plafonKredit,
      akunHutangPiutangKode: v.akunHutangPiutangKode,
      primaryBank: v.virtualAccounts[0]?.bankName || 'Mandiri',
    });
    setIsVendorModalOpen(true);
  };

  // Handler: Save Vendor
  const handleSaveVendor = (e: React.FormEvent) => {
    e.preventDefault();
    if (!vendorForm.nama) return;

    const id = editingVendor ? editingVendor.id : `vnd-${Date.now()}`;
    const bankPrefixes: Record<BankMitraVA, string> = {
      BCA: '8808',
      Mandiri: '8908',
      BNI: '8208',
      BRI: '8108',
      Permata: '8408',
      CIMB: '8008',
      BSI: '8308',
    };

    const newVaList: VirtualAccount[] = editingVendor
      ? [...editingVendor.virtualAccounts]
      : [
          {
            id: `va-${Date.now()}`,
            vendorId: id,
            bankName: vendorForm.primaryBank,
            accountNumber: `${bankPrefixes[vendorForm.primaryBank]}${Math.floor(1000000000 + Math.random() * 9000000000)}`,
            accountHolderName: `VA TMJ - ${vendorForm.nama.substring(0, 24).toUpperCase()}`,
            vaType: 'Static',
            currency: 'IDR',
            status: 'Active',
            description: `Virtual Account ${vendorForm.primaryBank} Resmi Rekanan`,
          },
        ];

    const updatedVendor: VendorSupplier = {
      id,
      kode: vendorForm.kode,
      nama: vendorForm.nama,
      tipe: vendorForm.tipe,
      kategoriUsaha: vendorForm.kategoriUsaha,
      npwp: vendorForm.npwp,
      telepon: vendorForm.telepon,
      email: vendorForm.email,
      kontakPerson: vendorForm.kontakPerson,
      syaratPembayaran: vendorForm.syaratPembayaran,
      plafonKredit: Number(vendorForm.plafonKredit),
      akunHutangPiutangKode: vendorForm.akunHutangPiutangKode,
      totalTagihan: editingVendor ? editingVendor.totalTagihan : 0,
      totalDibayar: editingVendor ? editingVendor.totalDibayar : 0,
      saldoHutang: editingVendor ? editingVendor.saldoHutang : 0,
      virtualAccounts: newVaList,
      createdAt: editingVendor ? editingVendor.createdAt : new Date().toISOString().substring(0, 10),
    };

    StorageService.saveVendor(updatedVendor);
    setIsVendorModalOpen(false);
    onRefreshData();
  };

  // Handler: Delete Vendor
  const handleDeleteVendor = (id: string, nama: string) => {
    if (!window.confirm(`Yakin ingin menghapus master rekanan "${nama}"?`)) return;
    StorageService.deleteVendor(id);
    onRefreshData();
  };

  // Handler: Open Add VL Transaction
  const handleOpenAddVl = () => {
    if (!currentVendor) return;
    setEditingVl(null);
    setVlForm({
      vendorId: currentVendor.id,
      tanggal: new Date().toISOString().substring(0, 10),
      noReferensi: `INV-${currentVendor.kode}-${Date.now().toString().slice(-4)}`,
      tipeTransaksi: 'Tagihan / Pembelian',
      jumlah: 0,
      keterangan: '',
      statusPembayaran: 'Belum Lunas',
      autoPostToJournal: true,
    });
    setIsVlModalOpen(true);
  };

  // Handler: Save VL Transaction
  const handleSaveVl = (e: React.FormEvent) => {
    e.preventDefault();
    if (!vlForm.noReferensi || vlForm.jumlah <= 0) return;

    const isCustomer = currentVendor.tipe === 'Customer';
    let debet = 0;
    let kredit = 0;

    if (vlForm.tipeTransaksi === 'Tagihan / Pembelian') {
      if (isCustomer) debet = vlForm.jumlah; // Piutang bertambah di debet
      else kredit = vlForm.jumlah; // Hutang bertambah di kredit
    } else {
      // Pelunasan
      if (isCustomer) kredit = vlForm.jumlah; // Piutang berkurang di kredit
      else debet = vlForm.jumlah; // Hutang berkurang di debet
    }

    let journalId = editingVl?.jurnalId;

    // Otomatis posting ke Jurnal Umum & Laporan Keuangan jika diaktifkan
    if (vlForm.autoPostToJournal && (!editingVl || !editingVl.jurnalId)) {
      const allAkuns = StorageService.getAkun();
      const akunBank =
        allAkuns.find((a) => a.kodeAkun === '1-1030') ||
        allAkuns.find((a) => a.kodeAkun === '1-1020') ||
        allAkuns[0];
      const akunUtang =
        allAkuns.find((a) => a.kodeAkun === currentVendor.akunHutangPiutangKode) ||
        allAkuns.find((a) => a.kodeAkun === '2-1010') ||
        allAkuns[1];
      const akunPiutang =
        allAkuns.find((a) => a.kodeAkun === currentVendor.akunHutangPiutangKode) ||
        allAkuns.find((a) => a.kodeAkun === '1-1041') ||
        allAkuns.find((a) => a.kodeAkun === '1-1040') ||
        allAkuns[0];
      const akunBeban =
        allAkuns.find((a) => a.kodeAkun === '6-1030') ||
        allAkuns.find((a) => a.kodeAkun === '6-1040') ||
        allAkuns.find((a) => a.kodeAkun === '5-1010') ||
        allAkuns[0];
      const akunPendapatan =
        allAkuns.find((a) => a.kodeAkun === '4-1030') ||
        allAkuns.find((a) => a.kodeAkun === '4-1010') ||
        allAkuns[0];

      const firstVa = currentVendor.virtualAccounts[0];
      const vaStr = firstVa ? `${firstVa.bankName} VA ${firstVa.accountNumber}` : `VA ${currentVendor.nama}`;

      let items: JurnalItem[] = [];
      if (vlForm.tipeTransaksi === 'Tagihan / Pembelian') {
        if (isCustomer) {
          items = [
            {
              id: `ji-vl-${Date.now()}-1`,
              akunId: akunPiutang.id,
              kodeAkun: akunPiutang.kodeAkun,
              namaAkun: akunPiutang.namaAkun,
              debet: vlForm.jumlah,
              kredit: 0,
              keteranganItem: `Tagihan Piutang - ${currentVendor.nama}`,
              vendorId: currentVendor.id,
              virtualAccountId: firstVa?.id,
              virtualAccountDisplay: vaStr,
            },
            {
              id: `ji-vl-${Date.now()}-2`,
              akunId: akunPendapatan.id,
              kodeAkun: akunPendapatan.kodeAkun,
              namaAkun: akunPendapatan.namaAkun,
              debet: 0,
              kredit: vlForm.jumlah,
              keteranganItem: `Pendapatan via VA ${vaStr}`,
              vendorId: currentVendor.id,
            },
          ];
        } else {
          items = [
            {
              id: `ji-vl-${Date.now()}-1`,
              akunId: akunBeban.id,
              kodeAkun: akunBeban.kodeAkun,
              namaAkun: akunBeban.namaAkun,
              debet: vlForm.jumlah,
              kredit: 0,
              keteranganItem: `Beban / Pembelian dari ${currentVendor.nama}`,
              vendorId: currentVendor.id,
            },
            {
              id: `ji-vl-${Date.now()}-2`,
              akunId: akunUtang.id,
              kodeAkun: akunUtang.kodeAkun,
              namaAkun: akunUtang.namaAkun,
              debet: 0,
              kredit: vlForm.jumlah,
              keteranganItem: `Tagihan Utang Usaha (Tempo VA: ${vaStr})`,
              vendorId: currentVendor.id,
              virtualAccountId: firstVa?.id,
              virtualAccountDisplay: vaStr,
            },
          ];
        }
      } else {
        // Pelunasan
        if (isCustomer) {
          items = [
            {
              id: `ji-vl-${Date.now()}-1`,
              akunId: akunBank.id,
              kodeAkun: akunBank.kodeAkun,
              namaAkun: akunBank.namaAkun,
              debet: vlForm.jumlah,
              kredit: 0,
              keteranganItem: `Penerimaan Pelunasan via ${vaStr}`,
            },
            {
              id: `ji-vl-${Date.now()}-2`,
              akunId: akunPiutang.id,
              kodeAkun: akunPiutang.kodeAkun,
              namaAkun: akunPiutang.namaAkun,
              debet: 0,
              kredit: vlForm.jumlah,
              keteranganItem: `Pelunasan Piutang - ${currentVendor.nama}`,
              vendorId: currentVendor.id,
              virtualAccountId: firstVa?.id,
              virtualAccountDisplay: vaStr,
            },
          ];
        } else {
          items = [
            {
              id: `ji-vl-${Date.now()}-1`,
              akunId: akunUtang.id,
              kodeAkun: akunUtang.kodeAkun,
              namaAkun: akunUtang.namaAkun,
              debet: vlForm.jumlah,
              kredit: 0,
              keteranganItem: `Pelunasan Utang Usaha - ${currentVendor.nama}`,
              vendorId: currentVendor.id,
              virtualAccountId: firstVa?.id,
              virtualAccountDisplay: vaStr,
            },
            {
              id: `ji-vl-${Date.now()}-2`,
              akunId: akunBank.id,
              kodeAkun: akunBank.kodeAkun,
              namaAkun: akunBank.namaAkun,
              debet: 0,
              kredit: vlForm.jumlah,
              keteranganItem: `Transfer Bank via ${vaStr}`,
            },
          ];
        }
      }

      const generatedJournalId = `jur-vl-${Date.now()}`;
      journalId = generatedJournalId;

      const newJurnal: Jurnal = {
        id: generatedJournalId,
        noBukti: `JU-VL-${Date.now().toString().slice(-4)}`,
        tanggal: vlForm.tanggal,
        bulan: activePeriode.namaPeriode,
        tipe: 'JU',
        keterangan:
          vlForm.keterangan ||
          `${vlForm.tipeTransaksi} via Virtual Account ${vaStr} - ${currentVendor.nama} (Ref: ${vlForm.noReferensi})`,
        items,
        totalDebet: vlForm.jumlah,
        totalKredit: vlForm.jumlah,
        createdAt: new Date().toISOString().replace('T', ' ').substring(0, 19),
        createdBy: profile.namaAkuntan || 'Akuntan Keuangan',
      };

      StorageService.saveJurnal(newJurnal);
    }

    const newItem: VirtualLedgerItem = {
      id: editingVl ? editingVl.id : `vl-${Date.now()}`,
      vendorId: vlForm.vendorId,
      tanggal: vlForm.tanggal,
      noReferensi: vlForm.noReferensi,
      tipeTransaksi: vlForm.tipeTransaksi,
      debet,
      kredit,
      saldoBerjalan: 0, // Engine will recalculate
      jurnalId: journalId,
      keterangan: vlForm.keterangan || `${vlForm.tipeTransaksi} via Virtual Ledger`,
      statusPembayaran: vlForm.statusPembayaran,
    };

    StorageService.saveVirtualLedgerItem(newItem);
    setIsVlModalOpen(false);
    onRefreshData();
  };

  // Handler: Post Existing VL to Journal
  const handlePostExistingVlToJournal = (item: VirtualLedgerItem) => {
    if (!currentVendor) return;
    const isCustomer = currentVendor.tipe === 'Customer';
    const amount = item.debet > 0 ? item.debet : item.kredit;
    const allAkuns = StorageService.getAkun();
    const akunBank = allAkuns.find((a) => a.kodeAkun === '1-1020') || allAkuns[0];
    const akunUtang = allAkuns.find((a) => a.kodeAkun === '2-1010') || allAkuns[1];
    const akunPiutang = allAkuns.find((a) => a.kodeAkun === '1-1030') || allAkuns[1];
    const akunPersediaan =
      allAkuns.find((a) => a.kodeAkun === '1-1040') ||
      allAkuns.find((a) => a.kodeAkun === '5-1000') ||
      allAkuns[0];
    const akunPendapatan = allAkuns.find((a) => a.kodeAkun === '4-1000') || allAkuns[0];

    const firstVa = currentVendor.virtualAccounts[0];
    const vaStr = firstVa ? `${firstVa.bankName} VA ${firstVa.accountNumber}` : 'VA Rekanan';

    let items: JurnalItem[] = [];
    if (item.tipeTransaksi === 'Tagihan / Pembelian') {
      if (isCustomer) {
        items = [
          {
            id: `ji-${Date.now()}-1`,
            akunId: akunPiutang.id,
            kodeAkun: akunPiutang.kodeAkun,
            namaAkun: akunPiutang.namaAkun,
            debet: amount,
            kredit: 0,
            keteranganItem: `Tagihan Piutang - ${currentVendor.nama}`,
          },
          {
            id: `ji-${Date.now()}-2`,
            akunId: akunPendapatan.id,
            kodeAkun: akunPendapatan.kodeAkun,
            namaAkun: akunPendapatan.namaAkun,
            debet: 0,
            kredit: amount,
            keteranganItem: `Pendapatan via VA ${vaStr}`,
          },
        ];
      } else {
        items = [
          {
            id: `ji-${Date.now()}-1`,
            akunId: akunPersediaan.id,
            kodeAkun: akunPersediaan.kodeAkun,
            namaAkun: akunPersediaan.namaAkun,
            debet: amount,
            kredit: 0,
            keteranganItem: `Pembelian dari ${currentVendor.nama}`,
          },
          {
            id: `ji-${Date.now()}-2`,
            akunId: akunUtang.id,
            kodeAkun: akunUtang.kodeAkun,
            namaAkun: akunUtang.namaAkun,
            debet: 0,
            kredit: amount,
            keteranganItem: `Utang Dagang via VA ${vaStr}`,
          },
        ];
      }
    } else {
      if (isCustomer) {
        items = [
          {
            id: `ji-${Date.now()}-1`,
            akunId: akunBank.id,
            kodeAkun: akunBank.kodeAkun,
            namaAkun: akunBank.namaAkun,
            debet: amount,
            kredit: 0,
            keteranganItem: `Penerimaan via VA ${vaStr}`,
          },
          {
            id: `ji-${Date.now()}-2`,
            akunId: akunPiutang.id,
            kodeAkun: akunPiutang.kodeAkun,
            namaAkun: akunPiutang.namaAkun,
            debet: 0,
            kredit: amount,
            keteranganItem: `Pelunasan Piutang - ${currentVendor.nama}`,
          },
        ];
      } else {
        items = [
          {
            id: `ji-${Date.now()}-1`,
            akunId: akunUtang.id,
            kodeAkun: akunUtang.kodeAkun,
            namaAkun: akunUtang.namaAkun,
            debet: amount,
            kredit: 0,
            keteranganItem: `Pelunasan Utang - ${currentVendor.nama}`,
          },
          {
            id: `ji-${Date.now()}-2`,
            akunId: akunBank.id,
            kodeAkun: akunBank.kodeAkun,
            namaAkun: akunBank.namaAkun,
            debet: 0,
            kredit: amount,
            keteranganItem: `Transfer Bank via VA ${vaStr}`,
          },
        ];
      }
    }

    const journalId = `jur-vl-${Date.now()}`;
    const newJurnal: Jurnal = {
      id: journalId,
      noBukti: `JU-VL-${Date.now().toString().slice(-4)}`,
      tanggal: item.tanggal,
      bulan: activePeriode.namaPeriode,
      tipe: 'JU',
      keterangan:
        item.keterangan ||
        `${item.tipeTransaksi} via Virtual Account ${vaStr} (Ref: ${item.noReferensi})`,
      items,
      totalDebet: amount,
      totalKredit: amount,
      createdAt: new Date().toISOString().replace('T', ' ').substring(0, 19),
      createdBy: profile.namaAkuntan || 'Akuntan Keuangan',
    };

    StorageService.saveJurnal(newJurnal);
    item.jurnalId = journalId;
    StorageService.saveVirtualLedgerItem(item);
    onRefreshData();
    alert(
      `Transaksi ${item.noReferensi} berhasil diposting ke Jurnal Umum (${newJurnal.noBukti}) dan otomatis tercermin di Buku Besar, Neraca Saldo, Laporan Neraca & Arus Kas!`
    );
  };

  // Handler: Delete VL Transaction
  const handleDeleteVl = (id: string, noRef: string) => {
    if (!window.confirm(`Hapus transaksi buku pembantu "${noRef}"?`)) return;
    StorageService.deleteVirtualLedgerItem(id);
    onRefreshData();
  };

  // Handler: Add VA to Vendor
  const handleOpenAddVa = (v: VendorSupplier) => {
    setSelectedVendorForVa(v);
    const bankPrefixes: Record<BankMitraVA, string> = {
      BCA: '8808',
      Mandiri: '8908',
      BNI: '8208',
      BRI: '8108',
      Permata: '8408',
      CIMB: '8008',
      BSI: '8308',
    };
    setVaForm({
      bankName: 'BCA',
      accountNumber: `${bankPrefixes['BCA']}${Math.floor(1000000000 + Math.random() * 9000000000)}`,
      accountHolderName: `VA TMJ - ${v.nama.substring(0, 24).toUpperCase()}`,
      vaType: 'Static',
      description: 'Rekening Virtual Account Mitra Perbankan',
    });
    setIsVaModalOpen(true);
  };

  const handleSaveVa = (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedVendorForVa || !vaForm.accountNumber) return;

    const newVa: VirtualAccount = {
      id: `va-${Date.now()}`,
      vendorId: selectedVendorForVa.id,
      bankName: vaForm.bankName,
      accountNumber: vaForm.accountNumber,
      accountHolderName: vaForm.accountHolderName,
      vaType: vaForm.vaType,
      currency: 'IDR',
      status: 'Active',
      description: vaForm.description,
    };

    const updated = {
      ...selectedVendorForVa,
      virtualAccounts: [...selectedVendorForVa.virtualAccounts, newVa],
    };

    StorageService.saveVendor(updated);
    setIsVaModalOpen(false);
    onRefreshData();
  };

  // Export Excel
  const handleExportExcel = () => {
    const headers = [
      'Kode Rekanan',
      'Nama Vendor / Rekanan',
      'Tipe Entitas',
      'Kategori Usaha',
      'Virtual Account (VA)',
      'Bank Penerbit',
      'Syarat Pembayaran',
      'Plafon Kredit (IDR)',
      'Total Tagihan (IDR)',
      'Total Terbayar (IDR)',
      'Saldo Utang/Piutang (IDR)',
    ];

    const rows = vendors.map((v) => [
      v.kode,
      v.nama,
      v.tipe,
      v.kategoriUsaha,
      v.virtualAccounts.map((a) => a.accountNumber).join('; '),
      v.virtualAccounts.map((a) => a.bankName).join('; '),
      v.syaratPembayaran,
      v.plafonKredit,
      v.totalTagihan,
      v.totalDibayar,
      v.saldoHutang,
    ]);

    ExcelService.exportToStyledExcel(
      `Master_Vendor_VA_Virtual_Ledger_${profile.namaPerusahaan.replace(/\s+/g, '_')}`,
      'Vendor & Virtual Ledger',
      headers,
      rows
    );
  };

  // SQL DDL & Seed Script
  const sqlDdlScript = useMemo(() => {
    return `-- ==========================================================
-- SKEMA TABEL & SEED DATA VENDOR, VIRTUAL ACCOUNT & VIRTUAL LEDGER
-- Sesuai Pertanyaan: "Jika mempunyai banyak vendor dan supplier apakah diperlukan virtual akun?"
-- JAWABAN: SANGAT DIPERLUKAN untuk mencegah ledakan akun di Chart of Accounts (COA)
-- Database Engine: MySQL 8.0+ / PostgreSQL 14+ Compatible
-- PT TIO MANDIRI JAYA - SAK EMKM / PSAK
-- ==========================================================

-- 1. TABEL MASTER VENDOR & SUPPLIER
DROP TABLE IF EXISTS \`vendors_suppliers\`;
CREATE TABLE \`vendors_suppliers\` (
  \`id\` VARCHAR(50) PRIMARY KEY,
  \`kode\` VARCHAR(30) NOT NULL UNIQUE,
  \`nama\` VARCHAR(150) NOT NULL,
  \`tipe\` ENUM('Vendor', 'Supplier', 'Customer', 'Kontraktor') NOT NULL DEFAULT 'Vendor',
  \`kategori_usaha\` VARCHAR(150) NOT NULL,
  \`npwp\` VARCHAR(50) DEFAULT NULL,
  \`alamat\` TEXT DEFAULT NULL,
  \`kota\` VARCHAR(100) DEFAULT 'Semarang',
  \`telepon\` VARCHAR(30) DEFAULT NULL,
  \`email\` VARCHAR(100) DEFAULT NULL,
  \`kontak_person\` VARCHAR(100) DEFAULT NULL,
  \`syarat_pembayaran\` VARCHAR(50) DEFAULT 'Net 30',
  \`plafon_kredit\` DECIMAL(18,2) DEFAULT 0.00,
  \`akun_hutang_kode\` VARCHAR(20) DEFAULT '2-1010',
  \`total_tagihan\` DECIMAL(18,2) DEFAULT 0.00,
  \`total_dibayar\` DECIMAL(18,2) DEFAULT 0.00,
  \`saldo_hutang\` DECIMAL(18,2) DEFAULT 0.00,
  \`created_at\` DATETIME DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 2. TABEL VIRTUAL ACCOUNTS (REKENING PENERIMAAN / DISBURSEMENT BANK)
DROP TABLE IF EXISTS \`virtual_accounts\`;
CREATE TABLE \`virtual_accounts\` (
  \`id\` VARCHAR(50) PRIMARY KEY,
  \`vendor_id\` VARCHAR(50) NOT NULL,
  \`bank_name\` ENUM('BCA', 'Mandiri', 'BNI', 'BRI', 'Permata', 'CIMB', 'BSI') NOT NULL,
  \`account_number\` VARCHAR(30) NOT NULL UNIQUE,
  \`account_holder_name\` VARCHAR(150) NOT NULL,
  \`va_type\` ENUM('Static', 'Dynamic') NOT NULL DEFAULT 'Static',
  \`currency\` VARCHAR(10) DEFAULT 'IDR',
  \`status\` ENUM('Active', 'Inactive') NOT NULL DEFAULT 'Active',
  \`expired_at\` DATETIME DEFAULT NULL,
  \`description\` VARCHAR(255) DEFAULT NULL,
  CONSTRAINT \`fk_va_vendor\` FOREIGN KEY (\`vendor_id\`) REFERENCES \`vendors_suppliers\` (\`id\`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 3. TABEL VIRTUAL LEDGERS (KARTU BUKU PEMBANTU UTANG & PIUTANG)
DROP TABLE IF EXISTS \`virtual_ledgers\`;
CREATE TABLE \`virtual_ledgers\` (
  \`id\` VARCHAR(50) PRIMARY KEY,
  \`vendor_id\` VARCHAR(50) NOT NULL,
  \`tanggal\` DATE NOT NULL,
  \`periode\` VARCHAR(50) DEFAULT NULL COMMENT 'Januari 2026, dll untuk filter periode & lintas periode',
  \`no_referensi\` VARCHAR(80) NOT NULL,
  \`tipe_transaksi\` ENUM('Tagihan / Pembelian', 'Pelunasan / Bayar', 'Retur / Penyesuaian') NOT NULL,
  \`debet\` DECIMAL(18,2) NOT NULL DEFAULT 0.00,
  \`kredit\` DECIMAL(18,2) NOT NULL DEFAULT 0.00,
  \`saldo_berjalan\` DECIMAL(18,2) NOT NULL DEFAULT 0.00,
  \`jurnal_id\` VARCHAR(50) DEFAULT NULL,
  \`keterangan\` TEXT DEFAULT NULL,
  \`status_pembayaran\` ENUM('Lunas', 'Sebagian', 'Belum Lunas') DEFAULT 'Belum Lunas',
  \`created_at\` DATETIME DEFAULT CURRENT_TIMESTAMP,
  INDEX \`idx_vl_periode\` (\`periode\`),
  INDEX \`idx_vl_vendor\` (\`vendor_id\`),
  CONSTRAINT \`fk_vl_vendor\` FOREIGN KEY (\`vendor_id\`) REFERENCES \`vendors_suppliers\` (\`id\`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 4. TABEL HAK AKSES USERS (RBAC UNTUK CRUD VL)
DROP TABLE IF EXISTS \`role_permissions\`;
CREATE TABLE \`role_permissions\` (
  \`id\` INT AUTO_INCREMENT PRIMARY KEY,
  \`role_id\` VARCHAR(50) NOT NULL,
  \`permission_id\` VARCHAR(50) NOT NULL,
  \`created_at\` DATETIME DEFAULT CURRENT_TIMESTAMP,
  UNIQUE KEY \`uk_role_perm\` (\`role_id\`, \`permission_id\`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- ==========================================================
-- SEED DATA AWAL (INITIAL VENDORS, VA, & VIRTUAL LEDGERS)
-- ==========================================================

INSERT INTO \`vendors_suppliers\` (\`id\`, \`kode\`, \`nama\`, \`tipe\`, \`kategori_usaha\`, \`npwp\`, \`telepon\`, \`syarat_pembayaran\`, \`plafon_kredit\`, \`akun_hutang_kode\`, \`total_tagihan\`, \`total_dibayar\`, \`saldo_hutang\`) VALUES
('vnd-001', 'VND-HTI-01', 'PT HUAWEI TECH INVESTMENT', 'Customer', 'Telekomunikasi & Jaringan Seluler', '01.325.879.4-054.000', '(021) 5299-8800', 'Net 45', 1000000000.00, '1-1041', 346601240.00, 0.00, 346601240.00),
('vnd-002', 'SPL-TLK-02', 'PT TELKOM INDONESIA (PERSERO) TBK', 'Vendor', 'Bandwidth & Dedicated Leased Line IP Transit', '01.000.013.1-093.000', '(024) 841-0000', 'Net 30', 150000000.00, '2-1010', 38000000.00, 18000000.00, 20000000.00),
('vnd-003', 'SPL-CLD-03', 'PT SENTOSA CLOUD SOLUSINDO', 'Supplier', 'Infrastruktur Cloud & Datacenter Tier-3', '31.458.987.2-503.000', '(021) 798-2233', 'Net 14', 50000000.00, '2-1015', 12000000.00, 0.00, 12000000.00),
('vnd-004', 'SPL-ATK-04', 'CV MITRA SINAR JAYA (ATK & IT)', 'Supplier', 'Perlengkapan Kantor & Hardware IT', '02.789.654.1-511.000', '(024) 354-9988', 'Net 30', 30000000.00, '2-1010', 6000000.00, 0.00, 6000000.00);

INSERT INTO \`virtual_accounts\` (\`id\`, \`vendor_id\`, \`bank_name\`, \`account_number\`, \`account_holder_name\`, \`va_type\`, \`status\`, \`description\`) VALUES
('va-1', 'vnd-001', 'BCA', '880812345678901', 'VA PT TMJ - PT HUAWEI TECH', 'Static', 'Active', 'VA BCA Kontrak Jasa Invoice HTI'),
('va-2', 'vnd-001', 'Mandiri', '890812345678901', 'VA PT TMJ - PT HUAWEI TECH', 'Static', 'Active', 'VA Mandiri Tagihan HTI'),
('va-3', 'vnd-002', 'Mandiri', '890888200010002', 'VA TELKOM REGIONAL IV - TMJ', 'Static', 'Active', 'VA Mandiri Pembayaran Internet'),
('va-4', 'vnd-003', 'BCA', '880899300020003', 'VA SENTOSA CLOUD - TMJ', 'Static', 'Active', 'VA BCA Tagihan Server Cloud'),
('va-5', 'vnd-004', 'BNI', '820877400030004', 'VA CV MITRA SINAR JAYA', 'Static', 'Active', 'VA BNI Pembayaran ATK Kantor');

INSERT INTO \`virtual_ledgers\` (\`id\`, \`vendor_id\`, \`tanggal\`, \`periode\`, \`no_referensi\`, \`tipe_transaksi\`, \`debet\`, \`kredit\`, \`saldo_berjalan\`, \`jurnal_id\`, \`keterangan\`, \`status_pembayaran\`) VALUES
('vl-1', 'vnd-001', '2026-01-20', 'Januari 2026', '1912-1946 /INV/SACME/HTI/I/2022', 'Tagihan / Pembelian', 346601240.00, 0.00, 346601240.00, 'jur-011-huawei', 'Tagihan Invoice Jasa HTI & PPN 11%', 'Belum Lunas'),
('vl-2', 'vnd-002', '2026-01-02', 'Januari 2026', 'INV-TLK-2026/01/992', 'Tagihan / Pembelian', 0.00, 38000000.00, 38000000.00, NULL, 'Tagihan Bandwidth Internet Dedicated Januari', 'Sebagian'),
('vl-3', 'vnd-002', '2026-01-16', 'Januari 2026', 'PAY-VA-890888200010002', 'Pelunasan / Bayar', 18000000.00, 0.00, 20000000.00, NULL, 'Pelunasan termin 1 via VA Mandiri', 'Sebagian'),
('vl-4', 'vnd-003', '2026-01-10', 'Januari 2026', 'INV-CLD-88291', 'Tagihan / Pembelian', 0.00, 12000000.00, 12000000.00, NULL, 'Sewa infrastruktur server cloud & hosting', 'Belum Lunas'),
('vl-5', 'vnd-004', '2026-01-12', 'Januari 2026', 'INV-MSJ-2026-004', 'Tagihan / Pembelian', 0.00, 6000000.00, 6000000.00, NULL, 'Pengadaan perlengkapan kantor & toner', 'Belum Lunas');

-- PERMISSIONS SEED UNTUK CRUD VL
INSERT INTO \`role_permissions\` (\`role_id\`, \`permission_id\`) VALUES
('superadmin', 'view_vl'), ('superadmin', 'create_vl'), ('superadmin', 'edit_vl'), ('superadmin', 'delete_vl'), ('superadmin', 'reconcile_vl'),
('akuntan', 'view_vl'), ('akuntan', 'create_vl'), ('akuntan', 'edit_vl'), ('akuntan', 'reconcile_vl'),
('auditor', 'view_vl'),
('direktur', 'view_vl');
`;
  }, []);

  const handleCopySql = () => {
    navigator.clipboard.writeText(sqlDdlScript);
    setCopiedSql('sql');
    setTimeout(() => setCopiedSql(null), 2500);
  };

  const handleDownloadSql = () => {
    const blob = new Blob([sqlDdlScript], { type: 'text/sql' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `schema_vendors_virtual_accounts_virtual_ledgers_${profile.namaPerusahaan.replace(/\s+/g, '_')}.sql`;
    link.click();
  };

  return (
    <div className="space-y-6">
      {/* 1. Header View */}
      <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-xs">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="rounded-xl bg-indigo-600 p-2.5 text-white shadow-xs">
              <Building2 className="h-6 w-6" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-xl font-bold tracking-tight text-slate-900">
                  Master Rekanan, Virtual Account (VA) &amp; Buku Pembantu (VL)
                </h1>
                <span className="rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-bold text-indigo-800">
                  Sub-Ledger PSAK
                </span>
              </div>
              <p className="text-xs text-slate-500">
                Pencatatan Buku Pembantu Utang &amp; Piutang Rekanan • Virtual Account Multi-Bank (BCA, Mandiri, BNI, BRI) • RBAC Akses CRUD
              </p>
            </div>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            <button
              onClick={handleExportExcel}
              className="flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 shadow-xs cursor-pointer"
            >
              <Download className="h-3.5 w-3.5 text-emerald-600" />
              <span>Ekspor Rekanan (.xlsx)</span>
            </button>
            {canCreateVl ? (
              <button
                onClick={handleOpenAddVendor}
                className="flex items-center gap-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 px-3.5 py-2 text-xs font-semibold text-white shadow-xs cursor-pointer"
              >
                <Plus className="h-3.5 w-3.5" />
                <span>+ Tambah Rekanan Baru</span>
              </button>
            ) : (
              <span className="flex items-center gap-1 text-[11px] font-semibold text-slate-400 bg-slate-100 px-3 py-1.5 rounded-lg border border-slate-200">
                <ShieldAlert className="h-3.5 w-3.5 text-slate-400" />
                <span>Izin Tambah Rekanan Terkunci</span>
              </span>
            )}
          </div>
        </div>
      </div>

      {/* 2. Executive Stat Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-xs">
          <div className="flex items-center justify-between">
            <span className="text-xs font-semibold text-slate-500 uppercase">Total Rekanan Terdaftar</span>
            <Building2 className="h-5 w-5 text-indigo-500" />
          </div>
          <div className="mt-2 text-2xl font-bold font-mono text-slate-900">
            {summaryMetrics.totalVendors} <span className="text-xs font-sans text-slate-500">Mitra</span>
          </div>
          <span className="text-[11px] text-slate-500">Vendor, Supplier &amp; Rekanan Kontrak</span>
        </div>

        <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-xs">
          <div className="flex items-center justify-between">
            <span className="text-xs font-semibold text-slate-500 uppercase">Rekening Virtual Account (VA)</span>
            <CreditCard className="h-5 w-5 text-blue-500" />
          </div>
          <div className="mt-2 text-2xl font-bold font-mono text-blue-700">
            {summaryMetrics.totalVaCount} <span className="text-xs font-sans text-slate-500">Nomor VA Aktif</span>
          </div>
          <span className="text-[11px] text-blue-600 font-medium">BCA, Mandiri, BNI, BRI</span>
        </div>

        <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-xs">
          <div className="flex items-center justify-between">
            <span className="text-xs font-semibold text-slate-500 uppercase">Total Tagihan Masuk</span>
            <FileText className="h-5 w-5 text-amber-500" />
          </div>
          <div className="mt-2 text-xl font-bold font-mono text-slate-900">
            Rp {summaryMetrics.totalTagihan.toLocaleString('id-ID')}
          </div>
          <span className="text-[11px] text-slate-500">Faktur &amp; Invoice Pembelian</span>
        </div>

        <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-xs">
          <div className="flex items-center justify-between">
            <span className="text-xs font-semibold text-slate-500 uppercase">Total Saldo Utang Vendor</span>
            <Wallet className="h-5 w-5 text-rose-500" />
          </div>
          <div className="mt-2 text-xl font-bold font-mono text-rose-700">
            Rp {summaryMetrics.totalHutang.toLocaleString('id-ID')}
          </div>
          <span className="text-[11px] text-rose-600 font-medium">Kewajiban Belum Dilunasi</span>
        </div>
      </div>

      {/* 3. Navigation Tabs */}
      <div className="flex flex-wrap gap-2 border-b border-slate-200 pb-1">
        <button
          onClick={() => setActiveTab('vendors')}
          className={`flex items-center gap-1.5 px-4 py-2.5 text-xs font-bold rounded-lg transition-all cursor-pointer ${
            activeTab === 'vendors'
              ? 'bg-indigo-600 text-white shadow-xs'
              : 'text-slate-600 hover:bg-slate-100'
          }`}
        >
          <Building2 className="h-4 w-4" />
          <span>1. Master Vendor &amp; Supplier ({vendors.length})</span>
        </button>

        <button
          onClick={() => setActiveTab('ledger')}
          className={`flex items-center gap-1.5 px-4 py-2.5 text-xs font-bold rounded-lg transition-all cursor-pointer ${
            activeTab === 'ledger'
              ? 'bg-indigo-600 text-white shadow-xs'
              : 'text-slate-600 hover:bg-slate-100'
          }`}
        >
          <BookOpen className="h-4 w-4" />
          <span>2. Kartu Buku Pembantu (Virtual Ledger / VL)</span>
        </button>

        <button
          onClick={() => setActiveTab('examples')}
          className={`flex items-center gap-1.5 px-4 py-2.5 text-xs font-bold rounded-lg transition-all cursor-pointer ${
            activeTab === 'examples'
              ? 'bg-indigo-600 text-white shadow-xs'
              : 'text-slate-600 hover:bg-slate-100'
          }`}
        >
          <Sparkles className="h-4 w-4 text-amber-300" />
          <span>3. Contoh Jurnal Transaksi VA (Panduan &amp; Saldo Berjalan)</span>
        </button>

        <button
          onClick={() => setActiveTab('va')}
          className={`flex items-center gap-1.5 px-4 py-2.5 text-xs font-bold rounded-lg transition-all cursor-pointer ${
            activeTab === 'va'
              ? 'bg-indigo-600 text-white shadow-xs'
              : 'text-slate-600 hover:bg-slate-100'
          }`}
        >
          <CreditCard className="h-4 w-4" />
          <span>4. Rekening Virtual Account Multi-Bank ({summaryMetrics.totalVaCount})</span>
        </button>

        <button
          onClick={() => setActiveTab('sql')}
          className={`flex items-center gap-1.5 px-4 py-2.5 text-xs font-bold rounded-lg transition-all cursor-pointer ${
            activeTab === 'sql'
              ? 'bg-slate-900 text-white shadow-xs'
              : 'text-slate-600 hover:bg-slate-100'
          }`}
        >
          <Database className="h-4 w-4 text-emerald-400" />
          <span>4. Skema SQL &amp; Seed Database</span>
        </button>
      </div>

      {/* TAB 1: MASTER VENDOR & SUPPLIER */}
      {activeTab === 'vendors' && (
        <div className="space-y-4">
          <div className="flex flex-wrap items-center justify-between gap-3">
            {/* Filter Tipe */}
            <div className="flex items-center gap-1.5 text-xs">
              <span className="text-slate-500 font-semibold">Filter Tipe:</span>
              {(['ALL', 'Vendor', 'Supplier', 'Customer'] as const).map((t) => (
                <button
                  key={t}
                  onClick={() => setFilterTipe(t)}
                  className={`px-3 py-1 rounded-md font-semibold cursor-pointer transition-colors ${
                    filterTipe === t
                      ? 'bg-indigo-600 text-white shadow-xs'
                      : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                  }`}
                >
                  {t}
                </button>
              ))}
            </div>

            {/* Search Input */}
            <div className="relative w-72">
              <Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-slate-400" />
              <input
                type="text"
                placeholder="Cari nama, kode rekanan, kategori..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-9 pr-3 py-1.5 text-xs rounded-lg border border-slate-300 focus:border-indigo-500 focus:outline-hidden bg-white"
              />
            </div>
          </div>

          <div className="overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-xs">
            <table className="w-full text-left text-xs border-collapse">
              <thead className="bg-slate-50 text-slate-700 uppercase font-semibold border-b border-slate-200">
                <tr>
                  <th className="py-3 px-4">Kode &amp; Nama Rekanan</th>
                  <th className="py-3 px-3">Tipe</th>
                  <th className="py-3 px-3">Bidang Usaha</th>
                  <th className="py-3 px-3">Virtual Account (VA) Bank</th>
                  <th className="py-3 px-3">Syarat Tempo</th>
                  <th className="py-3 px-3 text-right">Plafon Kredit</th>
                  <th className="py-3 px-3 text-right">Saldo Hutang/Piutang</th>
                  <th className="py-3 px-4 text-center">Aksi</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filteredVendors.map((v) => (
                  <tr key={v.id} className="hover:bg-slate-50/80 transition-colors">
                    <td className="py-3 px-4">
                      <div className="font-bold text-slate-900">{v.nama}</div>
                      <div className="text-[11px] font-mono text-indigo-700">{v.kode}</div>
                      {v.npwp && <div className="text-[10px] text-slate-400">NPWP: {v.npwp}</div>}
                    </td>

                    <td className="py-3 px-3">
                      <span
                        className={`rounded-full px-2.5 py-0.5 text-[10px] font-bold ${
                          v.tipe === 'Vendor'
                            ? 'bg-blue-100 text-blue-800'
                            : v.tipe === 'Supplier'
                            ? 'bg-purple-100 text-purple-800'
                            : 'bg-emerald-100 text-emerald-800'
                        }`}
                      >
                        {v.tipe}
                      </span>
                    </td>

                    <td className="py-3 px-3 text-slate-600 max-w-[200px]">
                      <div className="truncate">{v.kategoriUsaha}</div>
                      <div className="text-[10px] text-slate-400">{v.telepon || v.email}</div>
                    </td>

                    <td className="py-3 px-3">
                      <div className="space-y-1">
                        {v.virtualAccounts.map((va) => (
                          <div
                            key={va.id}
                            className="inline-flex items-center gap-1.5 rounded bg-slate-100 border border-slate-200 px-2 py-0.5 text-[11px] font-mono font-bold text-slate-800"
                          >
                            <span className="text-[9px] bg-indigo-600 text-white px-1 rounded font-sans">
                              {va.bankName}
                            </span>
                            <span>{va.accountNumber}</span>
                          </div>
                        ))}
                        {canCreateVl && (
                          <button
                            onClick={() => handleOpenAddVa(v)}
                            className="text-[10px] text-indigo-600 hover:text-indigo-800 font-semibold block cursor-pointer"
                          >
                            + Tambah VA Bank
                          </button>
                        )}
                      </div>
                    </td>

                    <td className="py-3 px-3 font-semibold text-slate-700">
                      {v.syaratPembayaran}
                    </td>

                    <td className="py-3 px-3 text-right font-mono text-slate-700">
                      Rp {v.plafonKredit.toLocaleString('id-ID')}
                    </td>

                    <td className="py-3 px-3 text-right font-mono font-bold">
                      <span className={v.saldoHutang > 0 ? 'text-rose-700' : 'text-emerald-700'}>
                        Rp {v.saldoHutang.toLocaleString('id-ID')}
                      </span>
                    </td>

                    <td className="py-3 px-4 text-center">
                      <div className="flex items-center justify-center gap-1.5">
                        <button
                          onClick={() => {
                            setSelectedVendorId(v.id);
                            setActiveTab('ledger');
                          }}
                          title="Buka Kartu Buku Pembantu (VL)"
                          className="rounded p-1 text-indigo-600 hover:bg-indigo-50 border border-indigo-200 cursor-pointer"
                        >
                          <BookOpen className="h-3.5 w-3.5" />
                        </button>
                        {canEditVl && (
                          <button
                            onClick={() => handleOpenEditVendor(v)}
                            title="Edit Data Rekanan"
                            className="rounded p-1 text-slate-600 hover:bg-slate-100 border border-slate-200 cursor-pointer"
                          >
                            <Edit2 className="h-3.5 w-3.5" />
                          </button>
                        )}
                        {canDeleteVl && (
                          <button
                            onClick={() => handleDeleteVendor(v.id, v.nama)}
                            title="Hapus Rekanan"
                            className="rounded p-1 text-rose-600 hover:bg-rose-50 border border-rose-200 cursor-pointer"
                          >
                            <Trash2 className="h-3.5 w-3.5" />
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* TAB 2: KARTU BUKU PEMBANTU (VIRTUAL LEDGER) */}
      {activeTab === 'ledger' && (
        <div className="space-y-4">
          {/* Vendor & Periode Selector Header */}
          <div className="rounded-xl border border-indigo-200 bg-indigo-50/70 p-4 space-y-4 shadow-xs">
            <div className="flex flex-wrap items-center justify-between gap-4">
              <div className="flex flex-wrap items-center gap-4">
                {/* 1. Pilih Rekanan */}
                <div className="flex items-center gap-3">
                  <div className="rounded-lg bg-indigo-600 p-2 text-white">
                    <BookOpen className="h-5 w-5" />
                  </div>
                  <div>
                    <label className="text-[11px] font-bold uppercase tracking-wider text-indigo-900 block">
                      1. Pilih Rekanan / Mitra:
                    </label>
                    <select
                      value={selectedVendorId}
                      onChange={(e) => setSelectedVendorId(e.target.value)}
                      className="mt-1 font-bold text-sm text-indigo-950 bg-white border border-indigo-300 rounded-lg px-3 py-1.5 outline-hidden cursor-pointer shadow-2xs"
                    >
                      {vendors.map((v) => (
                        <option key={v.id} value={v.id}>
                          {v.kode} - {v.nama} ({v.tipe})
                        </option>
                      ))}
                    </select>
                  </div>
                </div>

                {/* 2. Filter Periode vs Lintas Periode */}
                <div className="border-l border-indigo-200 pl-4">
                  <label className="text-[11px] font-bold uppercase tracking-wider text-indigo-900 block">
                    2. Filter Periode Pembukuan:
                  </label>
                  <select
                    value={selectedPeriod}
                    onChange={(e) => setSelectedPeriod(e.target.value)}
                    className="mt-1 font-bold text-sm text-indigo-950 bg-white border border-indigo-300 rounded-lg px-3 py-1.5 outline-hidden cursor-pointer shadow-2xs"
                  >
                    <option value="ALL">🌐 Semua Periode (Lintas Periode / All-Time)</option>
                    {periodes.length > 0 ? (
                      periodes.map((p) => (
                        <option key={p.id} value={p.namaPeriode}>
                          📅 {p.namaPeriode} {p.isClosed ? '(Tutup Buku)' : '(Aktif)'}
                        </option>
                      ))
                    ) : (
                      <>
                        <option value="Januari 2026">📅 Januari 2026</option>
                        <option value="Februari 2026">📅 Februari 2026</option>
                      </>
                    )}
                  </select>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setActiveTab('examples')}
                  className="flex items-center gap-1.5 rounded-lg border border-amber-300 bg-amber-50 hover:bg-amber-100 text-amber-900 px-3 py-2 text-xs font-bold cursor-pointer transition-colors shadow-2xs"
                >
                  <Sparkles className="h-3.5 w-3.5 text-amber-600" />
                  <span>Lihat Contoh Jurnal VA</span>
                </button>

                {canCreateVl && (
                  <button
                    onClick={handleOpenAddVl}
                    className="flex items-center gap-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 px-3.5 py-2 text-xs font-semibold text-white shadow-xs cursor-pointer"
                  >
                    <Plus className="h-3.5 w-3.5" />
                    <span>+ Input Transaksi VL</span>
                  </button>
                )}
              </div>
            </div>

            {/* Carrying Balance Periodic Stat Cards */}
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-2 border-t border-indigo-100">
              <div className="rounded-lg bg-white p-3 border border-indigo-100 shadow-2xs">
                <span className="text-[10px] text-slate-500 uppercase font-semibold block">
                  {selectedPeriod === 'ALL' ? 'Saldo Awal Awal Usaha' : `Saldo Awal (${selectedPeriod})`}
                </span>
                <span className="text-base font-mono font-bold text-slate-800">
                  Rp {ledgerCalculation.saldoAwal.toLocaleString('id-ID')}
                </span>
                <span className="text-[10px] text-slate-400 block truncate">
                  {selectedPeriod === 'ALL' ? 'Awal pembukuan' : 'Bawaan Saldo Akhir Lalu'}
                </span>
              </div>

              <div className="rounded-lg bg-white p-3 border border-emerald-100 shadow-2xs">
                <span className="text-[10px] text-slate-500 uppercase font-semibold block">
                  {currentVendor?.tipe === 'Customer' ? 'Total Mutasi Debet (Faktur)' : 'Total Mutasi Debet (Pelunasan)'}
                </span>
                <span className="text-base font-mono font-bold text-emerald-700">
                  Rp {ledgerCalculation.totalMutasiDebet.toLocaleString('id-ID')}
                </span>
                <span className="text-[10px] text-emerald-600 block">
                  {selectedPeriod === 'ALL' ? 'Total historis' : `Periode ${selectedPeriod}`}
                </span>
              </div>

              <div className="rounded-lg bg-white p-3 border border-amber-100 shadow-2xs">
                <span className="text-[10px] text-slate-500 uppercase font-semibold block">
                  {currentVendor?.tipe === 'Customer' ? 'Total Mutasi Kredit (Bayar)' : 'Total Mutasi Kredit (Tagihan)'}
                </span>
                <span className="text-base font-mono font-bold text-amber-700">
                  Rp {ledgerCalculation.totalMutasiKredit.toLocaleString('id-ID')}
                </span>
                <span className="text-[10px] text-amber-600 block">
                  {selectedPeriod === 'ALL' ? 'Total historis' : `Periode ${selectedPeriod}`}
                </span>
              </div>

              <div className="rounded-lg bg-white p-3 border border-rose-100 shadow-2xs">
                <span className="text-[10px] text-slate-500 uppercase font-semibold block">
                  {selectedPeriod === 'ALL' ? 'Saldo Berjalan Terkini' : `Saldo Akhir (${selectedPeriod})`}
                </span>
                <span className="text-base font-mono font-bold text-rose-700">
                  Rp {ledgerCalculation.saldoAkhir.toLocaleString('id-ID')}
                </span>
                <span className="text-[10px] text-rose-600 font-medium block truncate">
                  {currentVendor?.tipe === 'Customer' ? 'Piutang Berjalan' : 'Utang Berjalan'}
                </span>
              </div>
            </div>

            {/* Carrying Balance Concept Explainer Banner */}
            <div className="flex items-start gap-2 rounded-lg bg-indigo-100/70 p-2.5 text-xs text-indigo-900 border border-indigo-200">
              <Sparkles className="h-4 w-4 text-indigo-600 shrink-0 mt-0.5" />
              <div>
                <span className="font-bold">Konsep Saldo Berjalan (Carrying Balance) Sub-Ledger: </span>
                {selectedPeriod === 'ALL' ? (
                  <span>
                    Anda sedang melihat <strong>Mode Lintas Periode (All-Time)</strong>. Seluruh riwayat transaksi piutang/utang rekanan ditampilkan secara berkesinambungan untuk audit riwayat dan rekonsiliasi termin.
                  </span>
                ) : (
                  <span>
                    Anda sedang melihat <strong>Periode {selectedPeriod}</strong>. Saldo Awal membawa sisa saldo akhir dari periode sebelumnya (Rp {ledgerCalculation.saldoAwal.toLocaleString('id-ID')}). Jika periode ini tidak memiliki transaksi, posisi saldo aset/kewajiban tetap seimbang (Carrying Balance).
                  </span>
                )}
              </div>
            </div>
          </div>

          {/* Ledger Table */}
          <div className="overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-xs">
            <div className="p-4 border-b border-slate-200 flex flex-wrap justify-between items-center gap-2 bg-slate-50">
              <div>
                <h3 className="text-xs font-bold uppercase tracking-wider text-slate-800">
                  Kartu Mutasi Buku Pembantu: {currentVendor?.nama}
                </h3>
                <p className="text-[11px] text-slate-500">
                  Akun Kontrol GL: <span className="font-mono font-bold text-indigo-900">{currentVendor?.akunHutangPiutangKode}</span> • Plafon Tempo: {currentVendor?.syaratPembayaran} • Filter:{' '}
                  <span className="font-bold text-indigo-700">{selectedPeriod === 'ALL' ? 'Lintas Periode (Semua)' : selectedPeriod}</span>
                </p>
              </div>
              <div className="text-xs text-slate-500">
                Mutasi Periode: <span className="font-bold text-slate-800">{ledgerCalculation.itemsWithBalance.length} transaksi</span>
              </div>
            </div>

            <table className="w-full text-left text-xs border-collapse">
              <thead className="bg-slate-100 text-slate-700 uppercase font-semibold border-b border-slate-200">
                <tr>
                  <th className="py-2.5 px-4">Tanggal</th>
                  <th className="py-2.5 px-3">No. Referensi / Invoice</th>
                  <th className="py-2.5 px-3">Tipe Transaksi</th>
                  <th className="py-2.5 px-4">Keterangan</th>
                  <th className="py-2.5 px-3 text-right">Debet</th>
                  <th className="py-2.5 px-3 text-right">Kredit</th>
                  <th className="py-2.5 px-3 text-right">Saldo Berjalan</th>
                  <th className="py-2.5 px-3 text-center">Status</th>
                  <th className="py-2.5 px-3 text-center">Jurnal Umum</th>
                  <th className="py-2.5 px-3 text-center">Aksi</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100 font-mono">
                {/* 1. Baris Saldo Awal jika memfilter periode tertentu */}
                {selectedPeriod !== 'ALL' && (
                  <tr className="bg-slate-50/80 font-bold border-b border-slate-200 text-slate-700">
                    <td className="py-2.5 px-4 font-sans text-slate-500 italic">Awal {selectedPeriod}</td>
                    <td className="py-2.5 px-3 text-slate-600 font-mono text-[11px]">SALDO-AWAL</td>
                    <td className="py-2.5 px-3 font-sans">
                      <span className="rounded bg-slate-200 text-slate-800 px-2 py-0.5 text-[10px] font-bold">
                        Saldo Awal Periode
                      </span>
                    </td>
                    <td className="py-2.5 px-4 font-sans text-slate-600 italic">
                      Saldo Awal Periode {selectedPeriod} (Bawaan Saldo Akhir Periode Sebelumnya - Carrying Balance)
                    </td>
                    <td className="py-2.5 px-3 text-right text-slate-400 font-mono">-</td>
                    <td className="py-2.5 px-3 text-right text-slate-400 font-mono">-</td>
                    <td className="py-2.5 px-3 text-right font-bold text-slate-900 font-mono">
                      Rp {ledgerCalculation.saldoAwal.toLocaleString('id-ID')}
                    </td>
                    <td className="py-2.5 px-3 text-center font-sans">
                      <span className="rounded-full bg-slate-200 text-slate-700 px-2 py-0.5 text-[10px] font-bold">
                        Carryover
                      </span>
                    </td>
                    <td className="py-2.5 px-3 text-center font-sans text-slate-400 text-[10px]">
                      Buku Besar
                    </td>
                    <td className="py-2.5 px-3 text-center text-slate-400 text-[11px]">-</td>
                  </tr>
                )}

                {/* 2. Daftar Transaksi Mutasi */}
                {ledgerCalculation.itemsWithBalance.length === 0 ? (
                  <tr>
                    <td colSpan={10} className="text-center py-8 px-4 text-slate-500 font-sans">
                      {selectedPeriod !== 'ALL' ? (
                        <div className="max-w-xl mx-auto space-y-1">
                          <p className="font-semibold text-slate-700">
                            Tidak ada transaksi mutasi baru di periode {selectedPeriod}.
                          </p>
                          <p className="text-xs text-slate-500">
                            Sesuai <strong>Konsep Saldo Berjalan (Carrying Balance)</strong>: Nilai saldo awal sebesar{' '}
                            <span className="font-mono font-bold text-slate-800">
                              Rp {ledgerCalculation.saldoAwal.toLocaleString('id-ID')}
                            </span>{' '}
                            tetap terjaga dan seimbang menjadi Saldo Akhir periode ini.
                          </p>
                        </div>
                      ) : (
                        'Belum ada transaksi mutasi pada buku pembantu rekanan ini.'
                      )}
                    </td>
                  </tr>
                ) : (
                  ledgerCalculation.itemsWithBalance.map((item) => (
                    <tr key={item.id} className="hover:bg-slate-50">
                      <td className="py-2.5 px-4 font-sans text-slate-700">{item.tanggal}</td>
                      <td className="py-2.5 px-3 font-bold text-indigo-900">{item.noReferensi}</td>
                      <td className="py-2.5 px-3 font-sans">
                        <span
                          className={`rounded px-2 py-0.5 text-[10px] font-semibold ${
                            item.tipeTransaksi === 'Tagihan / Pembelian'
                              ? 'bg-amber-100 text-amber-800'
                              : 'bg-emerald-100 text-emerald-800'
                          }`}
                        >
                          {item.tipeTransaksi}
                        </span>
                      </td>
                      <td className="py-2.5 px-4 font-sans text-slate-600 max-w-[240px] truncate">
                        {item.keterangan}
                      </td>
                      <td className="py-2.5 px-3 text-right text-emerald-700">
                        {item.debet > 0 ? `Rp ${item.debet.toLocaleString('id-ID')}` : '-'}
                      </td>
                      <td className="py-2.5 px-3 text-right text-amber-700">
                        {item.kredit > 0 ? `Rp ${item.kredit.toLocaleString('id-ID')}` : '-'}
                      </td>
                      <td className="py-2.5 px-3 text-right font-bold text-slate-900">
                        Rp {item.runningSaldo.toLocaleString('id-ID')}
                      </td>
                      <td className="py-2.5 px-3 text-center font-sans">
                        <span
                          className={`rounded-full px-2 py-0.5 text-[10px] font-bold ${
                            item.statusPembayaran === 'Lunas'
                              ? 'bg-emerald-100 text-emerald-800'
                              : item.statusPembayaran === 'Sebagian'
                              ? 'bg-blue-100 text-blue-800'
                              : 'bg-rose-100 text-rose-800'
                          }`}
                        >
                          {item.statusPembayaran}
                        </span>
                      </td>
                      <td className="py-2.5 px-3 text-center font-sans">
                        {item.jurnalId ? (
                          <div className="flex flex-col items-center">
                            <span className="inline-flex items-center gap-1 rounded bg-emerald-50 border border-emerald-200 text-emerald-700 px-2 py-0.5 text-[10px] font-semibold">
                              <Check className="h-3 w-3 text-emerald-600" />
                              Terposting
                            </span>
                            <span className="text-[9px] text-slate-400 font-mono mt-0.5">
                              {item.jurnalId.replace('jur-', '')}
                            </span>
                          </div>
                        ) : (
                          <button
                            onClick={() => handlePostExistingVlToJournal(item)}
                            className="inline-flex items-center gap-1 rounded bg-indigo-50 border border-indigo-200 text-indigo-700 hover:bg-indigo-100 px-2 py-1 text-[10px] font-bold cursor-pointer transition-colors shadow-2xs"
                            title="Posting transaksi buku pembantu ini ke Jurnal Umum & Laporan Keuangan"
                          >
                            <CreditCard className="h-3 w-3 text-indigo-600" />
                            + Posting JU
                          </button>
                        )}
                      </td>
                      <td className="py-2.5 px-3 text-center">
                        {canDeleteVl && (
                          <button
                            onClick={() => handleDeleteVl(item.id, item.noReferensi)}
                            className="text-rose-600 hover:text-rose-800 p-1"
                            title="Hapus baris transaksi"
                          >
                            <Trash2 className="h-3 w-3" />
                          </button>
                        )}
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
              {/* Table Footer Totals */}
              <tfoot className="bg-slate-100 font-mono font-bold text-slate-800 border-t-2 border-slate-300">
                <tr>
                  <td colSpan={4} className="py-2.5 px-4 font-sans text-right uppercase text-[11px]">
                    Total Mutasi {selectedPeriod === 'ALL' ? 'Lintas Periode' : selectedPeriod}:
                  </td>
                  <td className="py-2.5 px-3 text-right text-emerald-700">
                    Rp {ledgerCalculation.totalMutasiDebet.toLocaleString('id-ID')}
                  </td>
                  <td className="py-2.5 px-3 text-right text-amber-700">
                    Rp {ledgerCalculation.totalMutasiKredit.toLocaleString('id-ID')}
                  </td>
                  <td className="py-2.5 px-3 text-right text-indigo-950 font-black">
                    Rp {ledgerCalculation.saldoAkhir.toLocaleString('id-ID')}
                  </td>
                  <td colSpan={3} className="py-2.5 px-3 text-center font-sans text-[10px] text-slate-500">
                    Posisi Akhir Seimbang
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      )}

      {/* TAB 3: CONTOH JURNAL TRANSAKSI VIRTUAL ACCOUNT (PANDUAN LENGKAP & STUDI KASUS) */}
      {activeTab === 'examples' && (
        <div className="space-y-6">
          <div className="rounded-xl border border-indigo-200 bg-linear-to-r from-indigo-900 to-slate-900 p-6 text-white shadow-md">
            <div className="flex items-center gap-3 mb-2">
              <div className="rounded-lg bg-indigo-500/30 p-2 border border-indigo-400/40">
                <Sparkles className="h-6 w-6 text-amber-300" />
              </div>
              <div>
                <h2 className="text-lg font-bold">
                  Studi Kasus &amp; Contoh Jurnal Berpasangan dengan Virtual Account (VA)
                </h2>
                <p className="text-xs text-indigo-200">
                  Panduan operasional PSAK / SAK EMKM: Menghubungkan Jurnal Umum, Nomor Virtual Account Bank, dan Buku Pembantu (Sub-Ledger)
                </p>
              </div>
            </div>
            <p className="text-xs text-slate-300 mt-2 leading-relaxed max-w-4xl">
              Virtual Account bertindak sebagai nomor rekening bayar/terima otomatis untuk setiap mitra bisnis. Transaksi jurnal mencatat pengaruh terhadap Buku Besar (Neraca &amp; Laba Rugi), sementara data nomor VA dan rekanan langsung meng-update kartu Buku Pembantu (Virtual Ledger) dan menghitung saldo berjalan secara otomatis.
            </p>
          </div>

          {/* Cards of Concrete Journal Examples */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
            {/* Contoh 1: Faktur Tagihan ke Customer (Piutang Usaha) */}
            <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-xs flex flex-col justify-between">
              <div>
                <div className="flex items-center justify-between pb-3 border-b border-slate-100">
                  <span className="rounded-full bg-blue-100 text-blue-800 px-2.5 py-0.5 text-xs font-bold">
                    Contoh 1: Tagihan Penjualan Jasa ke Customer
                  </span>
                  <span className="text-xs font-mono font-bold text-slate-500">Ref: 1912-1946 /INV/SACME/HTI/I/2022</span>
                </div>

                <div className="mt-3 text-xs text-slate-600 space-y-1">
                  <p><strong>Customer:</strong> PT HUAWEI TECH INVESTMENT (vnd-001)</p>
                  <p><strong>Virtual Account:</strong> BCA VA <code>880812345678901</code></p>
                  <p><strong>Deskripsi:</strong> Penerbitan Invoice Jasa Telekomunikasi dan Faktur Pajak PPN 11%.</p>
                </div>

                {/* Double Entry Table */}
                <div className="mt-4 overflow-hidden rounded-lg border border-slate-200">
                  <table className="w-full text-xs text-left">
                    <thead className="bg-slate-100 text-slate-700 font-semibold uppercase text-[10px]">
                      <tr>
                        <th className="py-2 px-3">Kode &amp; Nama Akun</th>
                        <th className="py-2 px-3">Tautan Rekanan &amp; VA</th>
                        <th className="py-2 px-3 text-right">Debet (Rp)</th>
                        <th className="py-2 px-3 text-right">Kredit (Rp)</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100 font-mono">
                      <tr>
                        <td className="py-2 px-3">
                          <span className="font-bold text-indigo-900 block">1-1041</span>
                          <span className="text-[11px] font-sans text-slate-700">Piutang Usaha Proyek &amp; Rekanan</span>
                        </td>
                        <td className="py-2 px-3 font-sans">
                          <span className="inline-block bg-indigo-50 text-indigo-700 border border-indigo-200 rounded px-1.5 py-0.5 text-[10px] font-bold">
                            🏢 PT HUAWEI TECH &bull; BCA VA (880812345678901)
                          </span>
                        </td>
                        <td className="py-2 px-3 text-right font-bold text-slate-900">346.601.240</td>
                        <td className="py-2 px-3 text-right text-slate-400">0</td>
                      </tr>
                      <tr>
                        <td className="py-2 px-3">
                          <span className="font-bold text-indigo-900 block">4-1030</span>
                          <span className="text-[11px] font-sans text-slate-700">Pendapatan Jasa Telekomunikasi &amp; IT</span>
                        </td>
                        <td className="py-2 px-3 font-sans">
                          <span className="inline-block bg-slate-50 text-slate-700 border border-slate-200 rounded px-1.5 py-0.5 text-[10px]">
                            🏢 PT HUAWEI TECH INVESTMENT
                          </span>
                        </td>
                        <td className="py-2 px-3 text-right text-slate-400">0</td>
                        <td className="py-2 px-3 text-right font-bold text-slate-900">312.253.369</td>
                      </tr>
                      <tr>
                        <td className="py-2 px-3">
                          <span className="font-bold text-indigo-900 block">213005</span>
                          <span className="text-[11px] font-sans text-slate-700">Hutang PPN-11%</span>
                        </td>
                        <td className="py-2 px-3 font-sans">
                          <span className="inline-block bg-slate-50 text-slate-700 border border-slate-200 rounded px-1.5 py-0.5 text-[10px]">
                            🏢 PT HUAWEI TECH INVESTMENT
                          </span>
                        </td>
                        <td className="py-2 px-3 text-right text-slate-400">0</td>
                        <td className="py-2 px-3 text-right font-bold text-slate-900">34.347.871</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <div className="mt-3 rounded-lg bg-emerald-50 p-2.5 text-xs text-emerald-800 border border-emerald-200">
                  <strong>Dampak Sub-Ledger:</strong> Menambah saldo piutang customer di Virtual Ledger PT HUAWEI TECH sebesar <strong>Rp 346.601.240</strong>.
                </div>
              </div>
            </div>

            {/* Contoh 2: Pelunasan Piutang via Virtual Account BCA */}
            <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-xs flex flex-col justify-between">
              <div>
                <div className="flex items-center justify-between pb-3 border-b border-slate-100">
                  <span className="rounded-full bg-emerald-100 text-emerald-800 px-2.5 py-0.5 text-xs font-bold">
                    Contoh 2: Customer Membayar via BCA Virtual Account
                  </span>
                  <span className="text-xs font-mono font-bold text-slate-500">Ref: BKM-VA-2026/01/08</span>
                </div>

                <div className="mt-3 text-xs text-slate-600 space-y-1">
                  <p><strong>Customer:</strong> PT HUAWEI TECH INVESTMENT (vnd-001)</p>
                  <p><strong>Virtual Account:</strong> BCA VA <code>880812345678901</code></p>
                  <p><strong>Deskripsi:</strong> Pelunasan termin 1 faktur invoice via auto-credit rekening bank perusahaan.</p>
                </div>

                {/* Double Entry Table */}
                <div className="mt-4 overflow-hidden rounded-lg border border-slate-200">
                  <table className="w-full text-xs text-left">
                    <thead className="bg-slate-100 text-slate-700 font-semibold uppercase text-[10px]">
                      <tr>
                        <th className="py-2 px-3">Kode &amp; Nama Akun</th>
                        <th className="py-2 px-3">Tautan Rekanan &amp; VA</th>
                        <th className="py-2 px-3 text-right">Debet (Rp)</th>
                        <th className="py-2 px-3 text-right">Kredit (Rp)</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100 font-mono">
                      <tr>
                        <td className="py-2 px-3">
                          <span className="font-bold text-indigo-900 block">1-1030</span>
                          <span className="text-[11px] font-sans text-slate-700">Bank BCA Giro</span>
                        </td>
                        <td className="py-2 px-3 font-sans text-slate-400 text-[10px]">-</td>
                        <td className="py-2 px-3 text-right font-bold text-slate-900">150.000.000</td>
                        <td className="py-2 px-3 text-right text-slate-400">0</td>
                      </tr>
                      <tr>
                        <td className="py-2 px-3">
                          <span className="font-bold text-indigo-900 block">1-1041</span>
                          <span className="text-[11px] font-sans text-slate-700">Piutang Usaha Proyek &amp; Rekanan</span>
                        </td>
                        <td className="py-2 px-3 font-sans">
                          <span className="inline-block bg-indigo-50 text-indigo-700 border border-indigo-200 rounded px-1.5 py-0.5 text-[10px] font-bold">
                            🏢 PT HUAWEI TECH &bull; BCA VA (880812345678901)
                          </span>
                        </td>
                        <td className="py-2 px-3 text-right text-slate-400">0</td>
                        <td className="py-2 px-3 text-right font-bold text-slate-900">150.000.000</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <div className="mt-3 rounded-lg bg-blue-50 p-2.5 text-xs text-blue-800 border border-blue-200">
                  <strong>Dampak Sub-Ledger:</strong> Mengurangi saldo piutang PT HUAWEI TECH di Virtual Ledger dari Rp 346.601.240 menjadi <strong>Rp 196.601.240</strong>.
                </div>
              </div>
            </div>

            {/* Contoh 3: Tagihan Beban / Utang Usaha ke Vendor IT */}
            <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-xs flex flex-col justify-between">
              <div>
                <div className="flex items-center justify-between pb-3 border-b border-slate-100">
                  <span className="rounded-full bg-amber-100 text-amber-800 px-2.5 py-0.5 text-xs font-bold">
                    Contoh 3: Tagihan Beban Internet Vendor (Utang Usaha)
                  </span>
                  <span className="text-xs font-mono font-bold text-slate-500">Ref: INV-TLK-2026/01/992</span>
                </div>

                <div className="mt-3 text-xs text-slate-600 space-y-1">
                  <p><strong>Vendor:</strong> PT TELKOM INDONESIA (PERSERO) TBK (vnd-002)</p>
                  <p><strong>Virtual Account:</strong> Mandiri VA <code>890888200010002</code></p>
                  <p><strong>Deskripsi:</strong> Tagihan langganan Leased Line IP Transit kantor periode berjalan.</p>
                </div>

                <div className="mt-4 overflow-hidden rounded-lg border border-slate-200">
                  <table className="w-full text-xs text-left">
                    <thead className="bg-slate-100 text-slate-700 font-semibold uppercase text-[10px]">
                      <tr>
                        <th className="py-2 px-3">Kode &amp; Nama Akun</th>
                        <th className="py-2 px-3">Tautan Rekanan &amp; VA</th>
                        <th className="py-2 px-3 text-right">Debet (Rp)</th>
                        <th className="py-2 px-3 text-right">Kredit (Rp)</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100 font-mono">
                      <tr>
                        <td className="py-2 px-3">
                          <span className="font-bold text-indigo-900 block">6-1030</span>
                          <span className="text-[11px] font-sans text-slate-700">Beban Utilitas &amp; Internet</span>
                        </td>
                        <td className="py-2 px-3 font-sans text-slate-400 text-[10px]">-</td>
                        <td className="py-2 px-3 text-right font-bold text-slate-900">38.000.000</td>
                        <td className="py-2 px-3 text-right text-slate-400">0</td>
                      </tr>
                      <tr>
                        <td className="py-2 px-3">
                          <span className="font-bold text-indigo-900 block">2-1010</span>
                          <span className="text-[11px] font-sans text-slate-700">Utang Usaha</span>
                        </td>
                        <td className="py-2 px-3 font-sans">
                          <span className="inline-block bg-indigo-50 text-indigo-700 border border-indigo-200 rounded px-1.5 py-0.5 text-[10px] font-bold">
                            🏛️ Mandiri VA (890888200010002)
                          </span>
                        </td>
                        <td className="py-2 px-3 text-right text-slate-400">0</td>
                        <td className="py-2 px-3 text-right font-bold text-slate-900">38.000.000</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <div className="mt-3 rounded-lg bg-amber-50 p-2.5 text-xs text-amber-800 border border-amber-200">
                  <strong>Dampak Sub-Ledger:</strong> Mencatat utang baru di Buku Pembantu PT TELKOM sebesar <strong>Rp 38.000.000</strong>.
                </div>
              </div>
            </div>

            {/* Contoh 4: Pembayaran Pelunasan Utang Vendor via VA Mandiri Corporate */}
            <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-xs flex flex-col justify-between">
              <div>
                <div className="flex items-center justify-between pb-3 border-b border-slate-100">
                  <span className="rounded-full bg-purple-100 text-purple-800 px-2.5 py-0.5 text-xs font-bold">
                    Contoh 4: Pembayaran Utang ke VA Mandiri Vendor
                  </span>
                  <span className="text-xs font-mono font-bold text-slate-500">Ref: BKK-001</span>
                </div>

                <div className="mt-3 text-xs text-slate-600 space-y-1">
                  <p><strong>Vendor:</strong> PT TELKOM INDONESIA (PERSERO) TBK (vnd-002)</p>
                  <p><strong>Virtual Account:</strong> Mandiri VA <code>890888200010002</code></p>
                  <p><strong>Deskripsi:</strong> Transfer pembayaran termin 1 via KlikBCA / Mandiri Corporate.</p>
                </div>

                <div className="mt-4 overflow-hidden rounded-lg border border-slate-200">
                  <table className="w-full text-xs text-left">
                    <thead className="bg-slate-100 text-slate-700 font-semibold uppercase text-[10px]">
                      <tr>
                        <th className="py-2 px-3">Kode &amp; Nama Akun</th>
                        <th className="py-2 px-3">Tautan Rekanan &amp; VA</th>
                        <th className="py-2 px-3 text-right">Debet (Rp)</th>
                        <th className="py-2 px-3 text-right">Kredit (Rp)</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100 font-mono">
                      <tr>
                        <td className="py-2 px-3">
                          <span className="font-bold text-indigo-900 block">2-1010</span>
                          <span className="text-[11px] font-sans text-slate-700">Utang Usaha</span>
                        </td>
                        <td className="py-2 px-3 font-sans">
                          <span className="inline-block bg-indigo-50 text-indigo-700 border border-indigo-200 rounded px-1.5 py-0.5 text-[10px] font-bold">
                            🏛️ Mandiri VA (890888200010002)
                          </span>
                        </td>
                        <td className="py-2 px-3 text-right font-bold text-slate-900">20.000.000</td>
                        <td className="py-2 px-3 text-right text-slate-400">0</td>
                      </tr>
                      <tr>
                        <td className="py-2 px-3">
                          <span className="font-bold text-indigo-900 block">1-1030</span>
                          <span className="text-[11px] font-sans text-slate-700">Bank BCA Giro</span>
                        </td>
                        <td className="py-2 px-3 font-sans text-slate-400 text-[10px]">-</td>
                        <td className="py-2 px-3 text-right text-slate-400">0</td>
                        <td className="py-2 px-3 text-right font-bold text-slate-900">20.000.000</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <div className="mt-3 rounded-lg bg-emerald-50 p-2.5 text-xs text-emerald-800 border border-emerald-200">
                  <strong>Dampak Sub-Ledger:</strong> Mengurangi saldo kewajiban di Buku Pembantu PT TELKOM menjadi <strong>Rp 18.000.000</strong>.
                </div>
              </div>
            </div>
          </div>

          {/* Konsep Saldo Berjalan (Carrying Balance) Lintas Periode */}
          <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-xs">
            <h3 className="text-sm font-bold text-slate-900 flex items-center gap-2">
              <Sparkles className="h-4 w-4 text-indigo-600" />
              Prinsip Saldo Berjalan (Carrying Balance) &amp; Perbandingan Periode Bulanan
            </h3>
            <p className="text-xs text-slate-600 mt-1 leading-relaxed">
              Berikut adalah cara kerja pembukuan Buku Pembantu ketika berganti periode dari <strong>Januari 2026</strong> ke <strong>Februari 2026</strong>:
            </p>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4 text-xs">
              <div className="rounded-lg bg-slate-50 border border-slate-200 p-4">
                <span className="font-bold text-slate-900 block mb-1">1. Saldo Awal Februari</span>
                <p className="text-slate-600 leading-relaxed">
                  Berasal langsung dari saldo akhir bulan Januari. Misalnya, jika saldo piutang PT HUAWEI TECH per 31 Januari adalah <strong>Rp 346.601.240</strong>, maka Saldo Awal 1 Februari otomatis dibuka di angka yang sama.
                </p>
              </div>

              <div className="rounded-lg bg-slate-50 border border-slate-200 p-4">
                <span className="font-bold text-slate-900 block mb-1">2. Jika Tidak Ada Transaksi di Februari</span>
                <p className="text-slate-600 leading-relaxed">
                  Mutasi debet dan kredit di bulan Februari adalah <strong>Rp 0</strong>. Tidak ada jurnal masuk ataupun keluar. Saldo akhir per 28 Februari tetap bernilai <strong>Rp 346.601.240</strong>.
                </p>
              </div>

              <div className="rounded-lg bg-slate-50 border border-slate-200 p-4">
                <span className="font-bold text-slate-900 block mb-1">3. Tetap Seimbang (100% Balance)</span>
                <p className="text-slate-600 leading-relaxed">
                  Posisi nilai aset di neraca maupun sub-ledger tetap seimbang dengan total liabilitas dan ekuitas (retained earnings). Tidak ada selisih sama sekali.
                </p>
              </div>
            </div>

            <div className="mt-5 flex flex-wrap items-center justify-between gap-3 pt-4 border-t border-slate-100">
              <span className="text-xs text-slate-500">
                Ingin mempraktikkan langsung? Buka formulir Jurnal Umum dan buat transaksi dengan memilih nomor VA pada baris item.
              </span>
              <button
                onClick={onNavigateToJurnal}
                className="flex items-center gap-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 text-xs font-bold cursor-pointer transition-all shadow-xs"
              >
                <span>Buka Jurnal Umum &amp; Praktikkan VA</span>
                <ArrowRight className="h-3.5 w-3.5" />
              </button>
            </div>
          </div>
        </div>
      )}

      {/* TAB 3: MANAJEMEN VIRTUAL ACCOUNT MULTI-BANK */}
      {activeTab === 'va' && (
        <div className="space-y-4">
          <div className="rounded-xl border border-blue-200 bg-blue-50/70 p-4">
            <h3 className="text-xs font-bold uppercase tracking-wider text-blue-900">
              Integrasi Virtual Account Multi-Bank (BCA, Mandiri, BNI, BRI)
            </h3>
            <p className="text-xs text-blue-700 mt-1 leading-relaxed">
              Virtual Account perbankan memfasilitasi rekonsiliasi otomatis saat pembayaran invoice tagihan rekanan. Setiap pembayaran yang masuk ke nomor VA akan secara otomatis diposting mengurangi saldo buku pembantu (VL) dan akun kontrol buku besar tanpa proses konfirmasi manual.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {vendors.flatMap((v) =>
              v.virtualAccounts.map((va) => (
                <div
                  key={va.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"
                >
                  <div>
                    <div className="flex items-center justify-between mb-2">
                      <span className="rounded bg-indigo-700 text-white px-2 py-0.5 text-[11px] font-bold">
                        BANK {va.bankName}
                      </span>
                      <span className="rounded-full bg-emerald-100 text-emerald-800 px-2 py-0.5 text-[10px] font-bold">
                        {va.status} ({va.vaType})
                      </span>
                    </div>

                    <div className="my-2">
                      <span className="text-[10px] text-slate-400 font-semibold uppercase">Nomor Virtual Account</span>
                      <div className="text-lg font-mono font-black text-slate-900 tracking-wider">
                        {va.accountNumber}
                      </div>
                      <div className="text-xs font-semibold text-slate-700 mt-0.5">{va.accountHolderName}</div>
                    </div>

                    <div className="border-t border-slate-100 pt-2 mt-2 text-[11px] text-slate-500 space-y-1">
                      <div>Mitra: <strong className="text-slate-800">{v.nama}</strong> ({v.kode})</div>
                      <div>Kategori: {v.kategoriUsaha}</div>
                      <div>Keterangan: {va.description || 'Virtual Account resmi'}</div>
                    </div>
                  </div>

                  <div className="mt-4 pt-3 border-t border-slate-100 flex items-center justify-between">
                    <span className="text-[10px] font-mono text-indigo-700 font-semibold">
                      Mata Uang: {va.currency}
                    </span>
                    <button
                      onClick={() => {
                        setSelectedVendorId(v.id);
                        setActiveTab('ledger');
                      }}
                      className="text-xs font-semibold text-blue-700 hover:underline flex items-center gap-1 cursor-pointer"
                    >
                      Buka Mutasi VL <ArrowRight className="h-3 w-3" />
                    </button>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>
      )}

      {/* TAB 4: SKEMA SQL & SEED DATABASE */}
      {activeTab === 'sql' && (
        <div className="space-y-4">
          <div className="flex flex-wrap items-center justify-between gap-3 bg-slate-900 text-white p-4 rounded-xl shadow-xs">
            <div className="flex items-center gap-3">
              <Database className="h-6 w-6 text-emerald-400" />
              <div>
                <h3 className="text-sm font-bold">Skema DDL &amp; Seed Database SQL (MySQL / PostgreSQL)</h3>
                <p className="text-xs text-slate-300">
                  Tabel: `vendors_suppliers`, `virtual_accounts`, `virtual_ledgers`, `role_permissions`
                </p>
              </div>
            </div>

            <div className="flex items-center gap-2">
              <button
                onClick={handleCopySql}
                className="flex items-center gap-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 px-3 py-1.5 text-xs font-semibold text-white border border-slate-700 cursor-pointer"
              >
                {copiedSql ? <Check className="h-3.5 w-3.5 text-emerald-400" /> : <Copy className="h-3.5 w-3.5" />}
                <span>{copiedSql ? 'Tersalin!' : 'Salin Script SQL'}</span>
              </button>
              <button
                onClick={handleDownloadSql}
                className="flex items-center gap-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-700 px-3.5 py-1.5 text-xs font-semibold text-white shadow-xs cursor-pointer"
              >
                <Download className="h-3.5 w-3.5" />
                <span>Unduh File .SQL</span>
              </button>
            </div>
          </div>

          <div className="rounded-xl border border-slate-800 bg-slate-950 p-4 shadow-inner text-emerald-400 font-mono text-xs overflow-x-auto max-h-[600px] leading-relaxed">
            <pre>{sqlDdlScript}</pre>
          </div>
        </div>
      )}

      {/* MODAL: Tambah / Edit Vendor */}
      {isVendorModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-4 backdrop-blur-xs">
          <div className="w-full max-w-lg rounded-xl bg-white shadow-xl overflow-hidden">
            <div className="flex items-center justify-between border-b border-slate-200 bg-indigo-900 px-5 py-3.5 text-white">
              <h3 className="text-sm font-bold">
                {editingVendor ? `Edit Rekanan: ${editingVendor.nama}` : 'Tambah Rekanan & Terbitkan Virtual Account'}
              </h3>
              <button onClick={() => setIsVendorModalOpen(false)} className="text-slate-300 hover:text-white">
                ✕
              </button>
            </div>

            <form onSubmit={handleSaveVendor} className="p-5 space-y-3.5 text-xs">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700">Kode Rekanan *</label>
                  <input
                    type="text"
                    required
                    value={vendorForm.kode}
                    onChange={(e) => setVendorForm({ ...vendorForm, kode: e.target.value })}
                    className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 font-mono focus:border-indigo-500 focus:outline-hidden"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700">Tipe Entitas *</label>
                  <select
                    value={vendorForm.tipe}
                    onChange={(e) => setVendorForm({ ...vendorForm, tipe: e.target.value as any })}
                    className="mt-1 w-full rounded border border-slate-300 bg-white px-3 py-1.5 focus:border-indigo-500 focus:outline-hidden"
                  >
                    <option value="Vendor">Vendor (Penyedia Jasa)</option>
                    <option value="Supplier">Supplier (Penyedia Barang/Material)</option>
                    <option value="Customer">Customer (Klien Piutang)</option>
                    <option value="Kontraktor">Kontraktor Sub-Proyek</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700">Nama Perusahaan / Rekanan *</label>
                <input
                  type="text"
                  required
                  placeholder="contoh: PT INDO CLOUD SOLUSI"
                  value={vendorForm.nama}
                  onChange={(e) => setVendorForm({ ...vendorForm, nama: e.target.value })}
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 focus:border-indigo-500 focus:outline-hidden"
                />
              </div>

              <div>
                <label className="block font-semibold text-slate-700">Bidang / Kategori Usaha</label>
                <input
                  type="text"
                  placeholder="contoh: Penyedia Layanan Server & Hosting"
                  value={vendorForm.kategoriUsaha}
                  onChange={(e) => setVendorForm({ ...vendorForm, kategoriUsaha: e.target.value })}
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 focus:border-indigo-500 focus:outline-hidden"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700">NPWP Rekanan</label>
                  <input
                    type="text"
                    placeholder="01.234.567.8-000.000"
                    value={vendorForm.npwp}
                    onChange={(e) => setVendorForm({ ...vendorForm, npwp: e.target.value })}
                    className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 font-mono focus:border-indigo-500 focus:outline-hidden"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700">Telepon / WhatsApp</label>
                  <input
                    type="text"
                    placeholder="(021) 555-1234"
                    value={vendorForm.telepon}
                    onChange={(e) => setVendorForm({ ...vendorForm, telepon: e.target.value })}
                    className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 focus:border-indigo-500 focus:outline-hidden"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700">Syarat Pembayaran (Tempo)</label>
                  <select
                    value={vendorForm.syaratPembayaran}
                    onChange={(e) => setVendorForm({ ...vendorForm, syaratPembayaran: e.target.value })}
                    className="mt-1 w-full rounded border border-slate-300 bg-white px-3 py-1.5 focus:border-indigo-500 focus:outline-hidden"
                  >
                    <option value="Net 14">Net 14 Hari</option>
                    <option value="Net 30">Net 30 Hari</option>
                    <option value="Net 45">Net 45 Hari</option>
                    <option value="Net 60">Net 60 Hari</option>
                    <option value="COD">Cash On Delivery (Tunai)</option>
                  </select>
                </div>
                <div>
                  <label className="block font-semibold text-slate-700">Plafon Kredit (IDR)</label>
                  <input
                    type="number"
                    value={vendorForm.plafonKredit}
                    onChange={(e) => setVendorForm({ ...vendorForm, plafonKredit: Number(e.target.value) })}
                    className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 font-mono focus:border-indigo-500 focus:outline-hidden"
                  />
                </div>
              </div>

              {!editingVendor && (
                <div className="rounded-lg bg-indigo-50 border border-indigo-200 p-3">
                  <label className="block font-bold text-indigo-950 mb-1">
                    Terbitkan Nomor Virtual Account (VA) Awal:
                  </label>
                  <div className="flex gap-2">
                    {(['BCA', 'Mandiri', 'BNI', 'BRI'] as const).map((b) => (
                      <label key={b} className="flex items-center gap-1.5 font-semibold text-indigo-900 cursor-pointer">
                        <input
                          type="radio"
                          name="primaryBank"
                          checked={vendorForm.primaryBank === b}
                          onChange={() => setVendorForm({ ...vendorForm, primaryBank: b })}
                        />
                        <span>{b}</span>
                      </label>
                    ))}
                  </div>
                  <p className="text-[10px] text-indigo-700 mt-1">
                    Sistem akan secara otomatis men-generate nomor VA unik perbankan untuk rekanan ini.
                  </p>
                </div>
              )}

              <div className="flex justify-end gap-2 pt-3 border-t border-slate-200">
                <button
                  type="button"
                  onClick={() => setIsVendorModalOpen(false)}
                  className="rounded-lg px-4 py-2 font-semibold text-slate-600 hover:bg-slate-100"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="rounded-lg bg-indigo-600 hover:bg-indigo-700 px-4 py-2 font-semibold text-white shadow-xs"
                >
                  Simpan Data Rekanan
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* MODAL: Input Transaksi Virtual Ledger */}
      {isVlModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-4 backdrop-blur-xs">
          <div className="w-full max-w-md rounded-xl bg-white shadow-xl overflow-hidden">
            <div className="flex items-center justify-between border-b border-slate-200 bg-indigo-900 px-5 py-3.5 text-white">
              <h3 className="text-sm font-bold">Catat Transaksi Buku Pembantu (VL)</h3>
              <button onClick={() => setIsVlModalOpen(false)} className="text-slate-300 hover:text-white">
                ✕
              </button>
            </div>

            <form onSubmit={handleSaveVl} className="p-5 space-y-3.5 text-xs">
              <div>
                <label className="block font-semibold text-slate-700">Rekanan Terpilih</label>
                <input
                  type="text"
                  disabled
                  value={`${currentVendor?.kode} - ${currentVendor?.nama}`}
                  className="mt-1 w-full rounded border border-slate-200 bg-slate-100 px-3 py-1.5 font-bold text-slate-800"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700">Tanggal Transaksi *</label>
                  <input
                    type="date"
                    required
                    value={vlForm.tanggal}
                    onChange={(e) => setVlForm({ ...vlForm, tanggal: e.target.value })}
                    className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 focus:border-indigo-500 focus:outline-hidden"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700">Tipe Mutasi *</label>
                  <select
                    value={vlForm.tipeTransaksi}
                    onChange={(e) => setVlForm({ ...vlForm, tipeTransaksi: e.target.value as any })}
                    className="mt-1 w-full rounded border border-slate-300 bg-white px-3 py-1.5 focus:border-indigo-500 focus:outline-hidden"
                  >
                    <option value="Tagihan / Pembelian">Tagihan Baru (Utang Bertambah)</option>
                    <option value="Pelunasan / Bayar">Pelunasan via VA (Utang Berkurang)</option>
                    <option value="Retur / Penyesuaian">Retur / Koreksi Saldo</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700">Nomor Referensi / No. Invoice / VA Ref *</label>
                <input
                  type="text"
                  required
                  placeholder="contoh: INV-2026/01/008 atau PAY-BCA-88081"
                  value={vlForm.noReferensi}
                  onChange={(e) => setVlForm({ ...vlForm, noReferensi: e.target.value })}
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 font-mono focus:border-indigo-500 focus:outline-hidden"
                />
              </div>

              <div>
                <label className="block font-semibold text-slate-700">Jumlah Nominal Transaksi (IDR) *</label>
                <input
                  type="number"
                  required
                  min="0.01"
                  step="any"
                  placeholder="0"
                  value={vlForm.jumlah || ''}
                  onChange={(e) => setVlForm({ ...vlForm, jumlah: parseFloat(e.target.value) || 0 })}
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 font-mono text-base font-bold text-indigo-950 focus:border-indigo-500 focus:outline-hidden"
                />
                {vlForm.jumlah > 0 && (
                  <div className="mt-1 text-[11px] font-semibold text-indigo-700">
                    Rp {vlForm.jumlah.toLocaleString('id-ID')}
                  </div>
                )}
              </div>

              <div>
                <label className="block font-semibold text-slate-700">Keterangan Transaksi</label>
                <textarea
                  rows={2}
                  placeholder="Uraian barang/jasa atau bukti transfer pembayaran"
                  value={vlForm.keterangan}
                  onChange={(e) => setVlForm({ ...vlForm, keterangan: e.target.value })}
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 focus:border-indigo-500 focus:outline-hidden"
                />
              </div>

              <div>
                <label className="block font-semibold text-slate-700">Status Pembayaran</label>
                <select
                  value={vlForm.statusPembayaran}
                  onChange={(e) => setVlForm({ ...vlForm, statusPembayaran: e.target.value as any })}
                  className="mt-1 w-full rounded border border-slate-300 bg-white px-3 py-1.5 focus:border-indigo-500 focus:outline-hidden"
                >
                  <option value="Belum Lunas">Belum Lunas (Outstanding)</option>
                  <option value="Sebagian">Sebagian (Partial Paid)</option>
                  <option value="Lunas">Lunas (Fully Settled)</option>
                </select>
              </div>

              {/* Option: Otomatis Posting ke Jurnal Umum & Laporan Keuangan */}
              <div className="rounded-lg bg-indigo-50 border border-indigo-200 p-2.5">
                <label className="flex items-start gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={vlForm.autoPostToJournal}
                    onChange={(e) => setVlForm({ ...vlForm, autoPostToJournal: e.target.checked })}
                    className="mt-0.5 rounded text-indigo-600 focus:ring-indigo-500"
                  />
                  <div>
                    <span className="font-bold text-indigo-950 block text-[11px]">
                      Otomatis Posting ke Jurnal Umum & Laporan Keuangan
                    </span>
                    <span className="text-[10px] text-indigo-700 block mt-0.5 leading-relaxed">
                      Sistem akan membuat ayat jurnal debit-kredit seimbang yang langsung terposting ke Buku Besar,
                      Neraca Saldo, Laporan Posisi Keuangan (Neraca), dan Arus Kas.
                    </span>
                  </div>
                </label>
              </div>

              <div className="flex justify-end gap-2 pt-3 border-t border-slate-200">
                <button
                  type="button"
                  onClick={() => setIsVlModalOpen(false)}
                  className="rounded-lg px-4 py-2 font-semibold text-slate-600 hover:bg-slate-100"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="rounded-lg bg-indigo-600 hover:bg-indigo-700 px-4 py-2 font-semibold text-white shadow-xs"
                >
                  Posting ke Virtual Ledger
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* MODAL: Tambah Virtual Account Bank ke Vendor */}
      {isVaModalOpen && selectedVendorForVa && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-4 backdrop-blur-xs">
          <div className="w-full max-w-md rounded-xl bg-white shadow-xl overflow-hidden">
            <div className="flex items-center justify-between border-b border-slate-200 bg-blue-900 px-5 py-3.5 text-white">
              <h3 className="text-sm font-bold">Terbitkan Nomor Virtual Account Bank Baru</h3>
              <button onClick={() => setIsVaModalOpen(false)} className="text-slate-300 hover:text-white">
                ✕
              </button>
            </div>

            <form onSubmit={handleSaveVa} className="p-5 space-y-3.5 text-xs">
              <div>
                <label className="block font-semibold text-slate-700">Vendor / Mitra Tujuan</label>
                <input
                  type="text"
                  disabled
                  value={selectedVendorForVa.nama}
                  className="mt-1 w-full rounded border border-slate-200 bg-slate-100 px-3 py-1.5 font-bold text-slate-800"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700">Bank Mitra Penerbit *</label>
                  <select
                    value={vaForm.bankName}
                    onChange={(e) => {
                      const b = e.target.value as BankMitraVA;
                      const bankPrefixes: Record<BankMitraVA, string> = {
                        BCA: '8808',
                        Mandiri: '8908',
                        BNI: '8208',
                        BRI: '8108',
                        Permata: '8408',
                        CIMB: '8008',
                        BSI: '8308',
                      };
                      setVaForm({
                        ...vaForm,
                        bankName: b,
                        accountNumber: `${bankPrefixes[b]}${Math.floor(1000000000 + Math.random() * 9000000000)}`,
                      });
                    }}
                    className="mt-1 w-full rounded border border-slate-300 bg-white px-3 py-1.5 focus:border-blue-500 focus:outline-hidden"
                  >
                    <option value="BCA">BCA (Bank Central Asia)</option>
                    <option value="Mandiri">Bank Mandiri</option>
                    <option value="BNI">BNI (Bank Negara Indonesia)</option>
                    <option value="BRI">BRI (Bank Rakyat Indonesia)</option>
                    <option value="Permata">Bank Permata</option>
                    <option value="CIMB">CIMB Niaga</option>
                    <option value="BSI">Bank Syariah Indonesia</option>
                  </select>
                </div>

                <div>
                  <label className="block font-semibold text-slate-700">Tipe Virtual Account</label>
                  <select
                    value={vaForm.vaType}
                    onChange={(e) => setVaForm({ ...vaForm, vaType: e.target.value as any })}
                    className="mt-1 w-full rounded border border-slate-300 bg-white px-3 py-1.5 focus:border-blue-500 focus:outline-hidden"
                  >
                    <option value="Static">Static (Tetap per Vendor)</option>
                    <option value="Dynamic">Dynamic (Per Nomor Invoice)</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700">Nomor Virtual Account Generated *</label>
                <input
                  type="text"
                  required
                  value={vaForm.accountNumber}
                  onChange={(e) => setVaForm({ ...vaForm, accountNumber: e.target.value })}
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 font-mono text-sm font-bold text-blue-900 focus:border-blue-500 focus:outline-hidden"
                />
              </div>

              <div>
                <label className="block font-semibold text-slate-700">Nama Pemilik Rekening VA *</label>
                <input
                  type="text"
                  required
                  value={vaForm.accountHolderName}
                  onChange={(e) => setVaForm({ ...vaForm, accountHolderName: e.target.value })}
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 focus:border-blue-500 focus:outline-hidden"
                />
              </div>

              <div>
                <label className="block font-semibold text-slate-700">Catatan / Deskripsi</label>
                <input
                  type="text"
                  placeholder="contoh: VA Operasional Kantor Regional"
                  value={vaForm.description}
                  onChange={(e) => setVaForm({ ...vaForm, description: e.target.value })}
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 focus:border-blue-500 focus:outline-hidden"
                />
              </div>

              <div className="flex justify-end gap-2 pt-3 border-t border-slate-200">
                <button
                  type="button"
                  onClick={() => setIsVaModalOpen(false)}
                  className="rounded-lg px-4 py-2 font-semibold text-slate-600 hover:bg-slate-100"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="rounded-lg bg-blue-600 hover:bg-blue-700 px-4 py-2 font-semibold text-white shadow-xs"
                >
                  Simpan Virtual Account
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};