import React, { useState } from 'react';
import { Jurnal, JurnalItem, Akun, ProfilPerusahaan, TipeJurnal, VendorSupplier, PeriodeAkuntansi } from '../../types/accounting';
import {
  Plus,
  Search,
  Download,
  Upload,
  Printer,
  Trash2,
  CheckCircle2,
  Check,
  AlertTriangle,
  X,
  FileText,
  Calendar,
  Layers,
  ArrowRight,
  FileSpreadsheet,
  CreditCard,
  Sparkles,
  HelpCircle,
  RefreshCw,
  Building2,
} from 'lucide-react';
import { ExcelService } from '../../services/excelService';
import { StorageService } from '../../services/storage';
import { PrintHeader, PrintSignature } from '../common/PrintHeader';
import { VirtualAccountJournalModal } from './VirtualAccountJournalModal';

interface JurnalUmumViewProps {
  journals: Jurnal[];
  akuns: Akun[];
  profile: ProfilPerusahaan;
  activePeriodeNama: string;
  onSaveJurnal: (jurnal: Jurnal) => void;
  onDeleteJurnal: (id: string) => boolean;
  onImportJournals?: (journals: Jurnal[]) => void;
  canEdit: boolean;
  vendors?: VendorSupplier[];
  onRefreshData?: () => void;
  onNavigateTab?: (tab: string) => void;
  periodes?: PeriodeAkuntansi[];
  onOpenKelolaPeriodeModal?: () => void;
}

export const JurnalUmumView: React.FC<JurnalUmumViewProps> = ({
  journals,
  akuns,
  profile,
  activePeriodeNama,
  onSaveJurnal,
  onDeleteJurnal,
  onImportJournals,
  canEdit,
  vendors,
  onRefreshData,
  onNavigateTab,
  periodes,
  onOpenKelolaPeriodeModal,
}) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [bulanFilter, setBulanFilter] = useState<string>(activePeriodeNama || 'SEMUA');
  const [tipeFilter, setTipeFilter] = useState<string>('SEMUA');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isVaModalOpen, setIsVaModalOpen] = useState(false);
  const [editingJurnal, setEditingJurnal] = useState<Jurnal | null>(null);
  const [syncStatusMsg, setSyncStatusMsg] = useState<string | null>(null);

  // Sync bulanFilter automatically when activePeriodeNama changes from top navbar
  React.useEffect(() => {
    if (activePeriodeNama) {
      setBulanFilter(activePeriodeNama);
    }
  }, [activePeriodeNama]);

  // Import Excel Modal States
  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
  const [importFileName, setImportFileName] = useState('');
  const [parsedJournals, setParsedJournals] = useState<Jurnal[]>([]);
  const [importErrors, setImportErrors] = useState<string[]>([]);
  const [importWarnings, setImportWarnings] = useState<string[]>([]);
  const [importSuccessMsg, setImportSuccessMsg] = useState<string | null>(null);

  // Form State
  const [tanggal, setTanggal] = useState<string>(new Date().toISOString().substring(0, 10));
  const [bulan, setBulan] = useState<string>(activePeriodeNama || 'Januari 2026');
  const [tipe, setTipe] = useState<TipeJurnal>('JU');
  const [noBukti, setNoBukti] = useState<string>('');
  const [keterangan, setKeterangan] = useState<string>('');
  const [items, setItems] = useState<JurnalItem[]>([
    {
      id: 'ji-temp-1',
      akunId: akuns[0]?.id || '',
      kodeAkun: akuns[0]?.kodeAkun || '',
      namaAkun: akuns[0]?.namaAkun || '',
      debet: 0,
      kredit: 0,
      keteranganItem: '',
    },
    {
      id: 'ji-temp-2',
      akunId: akuns[1]?.id || '',
      kodeAkun: akuns[1]?.kodeAkun || '',
      namaAkun: akuns[1]?.namaAkun || '',
      debet: 0,
      kredit: 0,
      keteranganItem: '',
    },
  ]);

  // Generate unique list of months from journals
  const availableMonths = Array.from(new Set(journals.map((j) => j.bulan)));

  // Filter journals
  const filteredJournals = journals.filter((j) => {
    const matchesSearch =
      j.noBukti.toLowerCase().includes(searchTerm.toLowerCase()) ||
      j.keterangan.toLowerCase().includes(searchTerm.toLowerCase()) ||
      j.items.some(
        (it) =>
          it.namaAkun.toLowerCase().includes(searchTerm.toLowerCase()) ||
          it.kodeAkun.toLowerCase().includes(searchTerm.toLowerCase())
      );
    const matchesBulan = bulanFilter === 'SEMUA' || j.bulan === bulanFilter;
    const matchesTipe = tipeFilter === 'SEMUA' || j.tipe === tipeFilter;
    return matchesSearch && matchesBulan && matchesTipe;
  });

  // Calculate grand totals of filtered journals
  const totalDebetAll = filteredJournals.reduce((sum, j) => sum + j.totalDebet, 0);
  const totalKreditAll = filteredJournals.reduce((sum, j) => sum + j.totalKredit, 0);

  // Form items calculation
  const currentTotalDebet = items.reduce((sum, i) => sum + (Number(i.debet) || 0), 0);
  const currentTotalKredit = items.reduce((sum, i) => sum + (Number(i.kredit) || 0), 0);
  const isFormBalanced =
    currentTotalDebet > 0 &&
    Math.abs(currentTotalDebet - currentTotalKredit) < 0.01;

  const handleOpenAdd = (type: TipeJurnal = 'JU') => {
    setEditingJurnal(null);
    const now = new Date();
    const dateStr = now.toISOString().substring(0, 10);
    setTanggal(dateStr);
    setBulan(activePeriodeNama || 'Januari 2026');
    setTipe(type);

    const count = journals.filter((j) => j.tipe === type).length + 1;
    const padCount = String(count).padStart(3, '0');
    setNoBukti(`${type}-2026/01/${padCount}`);
    setKeterangan('');

    const defaultAkun1 = akuns[0] || { id: '', kodeAkun: '', namaAkun: '' };
    const defaultAkun2 = akuns[1] || { id: '', kodeAkun: '', namaAkun: '' };

    setItems([
      {
        id: `ji-${Date.now()}-1`,
        akunId: defaultAkun1.id,
        kodeAkun: defaultAkun1.kodeAkun,
        namaAkun: defaultAkun1.namaAkun,
        debet: 0,
        kredit: 0,
        keteranganItem: '',
      },
      {
        id: `ji-${Date.now()}-2`,
        akunId: defaultAkun2.id,
        kodeAkun: defaultAkun2.kodeAkun,
        namaAkun: defaultAkun2.namaAkun,
        debet: 0,
        kredit: 0,
        keteranganItem: '',
      },
    ]);
    setIsModalOpen(true);
  };

  const handleOpenEdit = (jurnal: Jurnal) => {
    setEditingJurnal(jurnal);
    setTanggal(jurnal.tanggal);
    setBulan(jurnal.bulan);
    setTipe(jurnal.tipe);
    setNoBukti(jurnal.noBukti);
    setKeterangan(jurnal.keterangan);
    setItems(JSON.parse(JSON.stringify(jurnal.items)));
    setIsModalOpen(true);
  };

  const handleAddItemRow = () => {
    const defaultAkun = akuns[0] || { id: '', kodeAkun: '', namaAkun: '' };
    setItems([
      ...items,
      {
        id: `ji-${Date.now()}-${items.length + 1}`,
        akunId: defaultAkun.id,
        kodeAkun: defaultAkun.kodeAkun,
        namaAkun: defaultAkun.namaAkun,
        debet: 0,
        kredit: 0,
        keteranganItem: '',
      },
    ]);
  };

  const handleRemoveItemRow = (idx: number) => {
    if (items.length <= 2) {
      alert('Jurnal minimal memiliki 2 baris transaksi (satu sisi Debet dan satu sisi Kredit).');
      return;
    }
    const updated = items.filter((_, i) => i !== idx);
    setItems(updated);
  };

  const handleAkunChange = (index: number, akunId: string) => {
    const selected = akuns.find((a) => a.id === akunId);
    if (!selected) return;
    const updated = [...items];
    updated[index].akunId = selected.id;
    // OTOmatis: Kode Akun terisi dari Nama Akun yang dipilih!
    updated[index].kodeAkun = selected.kodeAkun;
    updated[index].namaAkun = selected.namaAkun;

    // Smart default: Jika akun COA tertaut ke Vendor/Customer (contoh: PT HUAWEI TECH), otomatis isi VA
    if (selected.linkedVendorId && vendors && vendors.length > 0) {
      const v = vendors.find((vend) => vend.id === selected.linkedVendorId);
      if (v) {
        updated[index].vendorId = v.id;
        if (v.virtualAccounts && v.virtualAccounts.length > 0) {
          const va = v.virtualAccounts[0];
          updated[index].virtualAccountId = va.id;
          updated[index].virtualAccountDisplay = `${va.bankName} VA ${va.accountNumber} (${v.nama})`;
        } else {
          updated[index].virtualAccountDisplay = `Rekanan: ${v.nama}`;
        }
      }
    }
    setItems(updated);
  };

  const handleVirtualAccountChange = (index: number, valueStr: string) => {
    const updated = [...items];
    if (!valueStr || valueStr === 'none') {
      updated[index].vendorId = undefined;
      updated[index].virtualAccountId = undefined;
      updated[index].virtualAccountDisplay = undefined;
    } else {
      const [vId, vaId] = valueStr.split('|');
      const targetVendor = vendors?.find((v) => v.id === vId);
      if (targetVendor) {
        updated[index].vendorId = targetVendor.id;
        const targetVa = targetVendor.virtualAccounts?.find((va) => va.id === vaId);
        if (targetVa) {
          updated[index].virtualAccountId = targetVa.id;
          updated[index].virtualAccountDisplay = `${targetVa.bankName} VA ${targetVa.accountNumber} (${targetVendor.nama})`;
        } else {
          updated[index].virtualAccountId = undefined;
          updated[index].virtualAccountDisplay = `Rekanan: ${targetVendor.nama}`;
        }
      }
    }
    setItems(updated);
  };

  const handleAmountChange = (index: number, field: 'debet' | 'kredit', value: number) => {
    const updated = [...items];
    updated[index][field] = value;
    if (field === 'debet' && value > 0) {
      updated[index].kredit = 0; // standard accounting: row cannot have both debit and credit
    } else if (field === 'kredit' && value > 0) {
      updated[index].debet = 0;
    }
    setItems(updated);
  };

  const handleSaveJurnalSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!isFormBalanced) {
      alert('Total Debet dan Kredit harus seimbang (tidak boleh berselisih)!');
      return;
    }

    const jurnalObj: Jurnal = {
      id: editingJurnal ? editingJurnal.id : `jur-${Date.now()}`,
      noBukti,
      tanggal,
      bulan,
      tipe,
      keterangan,
      items,
      totalDebet: currentTotalDebet,
      totalKredit: currentTotalKredit,
      createdAt: editingJurnal
        ? editingJurnal.createdAt
        : new Date().toISOString().replace('T', ' ').substring(0, 19),
      createdBy: editingJurnal ? editingJurnal.createdBy : profile.namaAkuntan,
    };

    onSaveJurnal(jurnalObj);
    setIsModalOpen(false);
  };

  const handleDelete = (id: string) => {
    if (confirm('Apakah Anda yakin ingin menghapus data jurnal ini?')) {
      onDeleteJurnal(id);
    }
  };

  const handleImportFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setImportFileName(file.name);
    setImportErrors([]);
    setImportWarnings([]);
    setImportSuccessMsg(null);

    try {
      const rows = await ExcelService.readWorkbookFile(file);
      const res = ExcelService.parseJournalRows(rows, akuns);
      setParsedJournals(res.validJournals);
      setImportErrors(res.errors);
      setImportWarnings(res.warnings);
    } catch (err: any) {
      console.error('Import error:', err);
      setImportErrors(['Gagal membaca file Excel. Pastikan berkas berformat .xlsx, .xls, atau .csv']);
    }
  };

  const handleCommitImport = () => {
    if (parsedJournals.length === 0) return;
    if (onImportJournals) {
      onImportJournals(parsedJournals);
    } else {
      for (const j of parsedJournals) {
        onSaveJurnal(j);
      }
    }
    setImportSuccessMsg(`Berhasil mengimpor ${parsedJournals.length} transaksi jurnal ke dalam pembukuan.`);
    setParsedJournals([]);
    setTimeout(() => {
      setIsImportModalOpen(false);
      setImportSuccessMsg(null);
    }, 2500);
  };

  const handleExportExcel = () => {
    const headers = [
      'No. Bukti',
      'Tanggal',
      'Bulan',
      'Tipe Jurnal',
      'Kode Akun',
      'Nama Akun',
      'Debet (Rp)',
      'Kredit (Rp)',
      'Keterangan Transaksi',
      'Keterangan Baris',
    ];

    const rows: (string | number)[][] = [];
    for (const j of filteredJournals) {
      for (const item of j.items) {
        rows.push([
          j.noBukti,
          j.tanggal,
          j.bulan,
          j.tipe === 'JU' ? 'Jurnal Umum' : 'Ayat Jurnal Penyesuaian (AJP)',
          item.kodeAkun,
          item.namaAkun,
          item.debet,
          item.kredit,
          j.keterangan,
          item.keteranganItem || '',
        ]);
      }
    }

    ExcelService.exportToStyledExcel(
      `Jurnal_Umum_PT_Tio_Mandiri_Jaya`,
      `JURNAL UMUM & PENYESUAIAN (${bulanFilter.toUpperCase()})`,
      headers,
      rows
    );
  };

  return (
    <div className="space-y-5">
      {/* Print View Header */}
      <div className="hidden print:block">
        <PrintHeader
          profile={profile}
          title="BUKU JURNAL UMUM & AYAT JURNAL PENYESUAIAN"
          subtitle="Catatan Kronologis Transaksi Keuangan Perusahaan"
          periode={bulanFilter === 'SEMUA' ? activePeriodeNama : bulanFilter}
        />
      </div>

      {/* Main Card */}
      <div className="rounded-lg border border-slate-200 bg-white shadow-xs print:border-none print:shadow-none">
        {/* AdminLTE Card Header */}
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 bg-slate-50/70 px-5 py-3.5 print:hidden">
          <div className="flex items-center gap-2">
            <span className="h-3 w-3 rounded-full bg-emerald-600 inline-block"></span>
            <h2 className="text-sm font-bold uppercase tracking-wider text-slate-800">
              Jurnal Umum & Penyesuaian (AJP)
            </h2>
            <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-800">
              {filteredJournals.length} Transaksi
            </span>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            {canEdit && (
              <>
                <button
                  onClick={() => setIsVaModalOpen(true)}
                  className="inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-bold text-white shadow-xs hover:bg-indigo-700 hover:shadow-sm transition-all cursor-pointer ring-1 ring-indigo-500/30"
                  title="Catat transaksi menggunakan Virtual Account rekanan atau pelanggan langsung ke Jurnal Umum"
                >
                  <CreditCard className="h-3.5 w-3.5 text-indigo-200" />
                  + Transaksi Virtual Account (VA)
                </button>
                <button
                  onClick={() => handleOpenAdd('JU')}
                  className="inline-flex items-center gap-1.5 rounded bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-xs hover:bg-blue-700"
                >
                  <Plus className="h-3.5 w-3.5" />
                  + Input Jurnal Umum (JU)
                </button>
                <button
                  onClick={() => handleOpenAdd('AJP')}
                  className="inline-flex items-center gap-1.5 rounded bg-amber-600 px-3 py-1.5 text-xs font-semibold text-white shadow-xs hover:bg-amber-700"
                >
                  <Layers className="h-3.5 w-3.5" />
                  + Input Penyesuaian (AJP)
                </button>
              </>
            )}

            <button
              onClick={() => {
                const res = StorageService.syncAllJournalsToPeriods();
                if (onRefreshData) onRefreshData();
                setSyncStatusMsg(
                  `Sinkronisasi Berhasil: ${res.updatedJournalsCount} jurnal disesuaikan dengan kalender tanggal. ${
                    res.newPeriodsAdded.length > 0
                      ? `${res.newPeriodsAdded.length} periode baru otomatis ditambahkan.`
                      : 'Semua transaksi sudah sinkron dengan periode pembukuan.'
                  }`
                );
              }}
              className="inline-flex items-center gap-1.5 rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-1.5 text-xs font-semibold text-indigo-700 hover:bg-indigo-100 transition-colors cursor-pointer shadow-2xs"
              title="Sinkronkan tanggal transaksi dengan periode laporan keuangan"
            >
              <RefreshCw className="h-3.5 w-3.5 text-indigo-600" />
              <span>Sinkronkan Periode</span>
            </button>

            {onOpenKelolaPeriodeModal && (
              <button
                onClick={onOpenKelolaPeriodeModal}
                className="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50 transition-colors cursor-pointer"
                title="Buka panel kelola periode akuntansi dan status tutup buku"
              >
                <Calendar className="h-3.5 w-3.5 text-blue-600" />
                <span>Kelola Periode</span>
              </button>
            )}

            <button
              onClick={() => {
                setImportFileName('');
                setParsedJournals([]);
                setImportErrors([]);
                setImportWarnings([]);
                setImportSuccessMsg(null);
                setIsImportModalOpen(true);
              }}
              className="inline-flex items-center gap-1.5 rounded border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50"
            >
              <Upload className="h-3.5 w-3.5 text-emerald-600" />
              Upload Excel (.xlsx/.csv)
            </button>

            <button
              onClick={handleExportExcel}
              className="inline-flex items-center gap-1.5 rounded border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50"
            >
              <Download className="h-3.5 w-3.5 text-blue-600" />
              Download Excel
            </button>

            <button
              onClick={() => window.print()}
              className="inline-flex items-center gap-1.5 rounded border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50"
            >
              <Printer className="h-3.5 w-3.5 text-slate-600" />
              Cetak / PDF
            </button>
          </div>
        </div>

        {/* Sync Status Banner */}
        {syncStatusMsg && (
          <div className="mx-5 my-2 flex items-center justify-between gap-3 rounded-lg border border-indigo-200 bg-indigo-50 p-2.5 text-xs text-indigo-900 print:hidden">
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-4 w-4 text-indigo-600 shrink-0" />
              <span>{syncStatusMsg}</span>
            </div>
            <button
              onClick={() => setSyncStatusMsg(null)}
              className="text-indigo-700 hover:text-indigo-950 font-bold px-1"
            >
              &times;
            </button>
          </div>
        )}

        {/* Filter and stats */}
        <div className="flex flex-wrap items-center justify-between gap-3 px-5 py-3 border-b border-slate-100 print:hidden">
          <div className="flex flex-wrap items-center gap-2">
            <div className="relative min-w-[220px]">
              <Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-slate-400" />
              <input
                type="text"
                placeholder="Cari no bukti, akun, keterangan..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full rounded border border-slate-300 pl-9 pr-3 py-1.5 text-xs focus:border-blue-500 focus:outline-hidden"
              />
            </div>

            <div className="flex items-center gap-1">
              <Calendar className="h-3.5 w-3.5 text-slate-500" />
              <select
                value={bulanFilter}
                onChange={(e) => setBulanFilter(e.target.value)}
                className="rounded border border-slate-300 bg-white px-2 py-1.5 text-xs font-medium text-slate-700 focus:border-blue-500 focus:outline-hidden"
              >
                <option value="SEMUA">Semua Periode Bulan</option>
                {availableMonths.map((m) => (
                  <option key={m} value={m}>
                    {m}
                  </option>
                ))}
              </select>
            </div>

            <select
              value={tipeFilter}
              onChange={(e) => setTipeFilter(e.target.value)}
              className="rounded border border-slate-300 bg-white px-2 py-1.5 text-xs font-medium text-slate-700 focus:border-blue-500 focus:outline-hidden"
            >
              <option value="SEMUA">Semua Tipe Jurnal</option>
              <option value="JU">Jurnal Umum Saja (JU)</option>
              <option value="AJP">Ayat Jurnal Penyesuaian (AJP)</option>
            </select>
          </div>

          <div className="flex items-center gap-4 text-xs font-mono">
            <div>
              <span className="text-slate-500">Total Mutasi Debet: </span>
              <span className="font-bold text-blue-900">
                Rp {totalDebetAll.toLocaleString('id-ID')}
              </span>
            </div>
            <div>
              <span className="text-slate-500">Total Mutasi Kredit: </span>
              <span className="font-bold text-amber-900">
                Rp {totalKreditAll.toLocaleString('id-ID')}
              </span>
            </div>
          </div>
        </div>

        {/* Journals Table */}
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs border-collapse">
            <thead className="border-b border-slate-200 bg-slate-100/90 text-slate-700 uppercase font-semibold">
              <tr>
                <th className="py-2.5 px-3 w-28">Tanggal & Bulan</th>
                <th className="py-2.5 px-3 w-32">No. Bukti / Ref</th>
                <th className="py-2.5 px-3 w-16 text-center">Tipe</th>
                <th className="py-2.5 px-4">Nama Akun & Keterangan</th>
                <th className="py-2.5 px-3 w-24">Kode Akun</th>
                <th className="py-2.5 px-4 text-right w-32">Debet (Rp)</th>
                <th className="py-2.5 px-4 text-right w-32">Kredit (Rp)</th>
                <th className="py-2.5 px-3 text-center print:hidden w-20">Aksi</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200">
              {filteredJournals.length === 0 ? (
                <tr>
                  <td colSpan={8} className="py-10 text-center text-slate-400">
                    Tidak ada transaksi jurnal yang ditemukan pada filter ini.
                  </td>
                </tr>
              ) : (
                filteredJournals.map((jurnal) => (
                  <React.Fragment key={jurnal.id}>
                    {/* Master Journal Header Row */}
                    <tr className="bg-slate-50/80 font-medium border-t border-slate-300">
                      <td className="py-2 px-3 text-slate-700">
                        <div className="font-bold">{jurnal.tanggal}</div>
                        <div className="text-[10px] text-slate-500">{jurnal.bulan}</div>
                      </td>
                      <td className="py-2 px-3 font-mono font-bold text-blue-900">
                        {jurnal.noBukti}
                      </td>
                      <td className="py-2 px-3 text-center">
                        <span
                          className={`inline-block rounded px-2 py-0.5 text-[10px] font-bold ${
                            jurnal.tipe === 'JU'
                              ? 'bg-blue-100 text-blue-800'
                              : 'bg-amber-100 text-amber-800'
                          }`}
                        >
                          {jurnal.tipe}
                        </span>
                      </td>
                      <td colSpan={2} className="py-2 px-4 text-slate-800">
                        <div className="font-semibold text-slate-900">{jurnal.keterangan}</div>
                        <div className="text-[11px] text-slate-500">
                          Dicatat oleh: {jurnal.createdBy}
                        </div>
                      </td>
                      <td className="py-2 px-4 text-right font-mono font-bold text-blue-900">
                        {jurnal.totalDebet.toLocaleString('id-ID')}
                      </td>
                      <td className="py-2 px-4 text-right font-mono font-bold text-amber-900">
                        {jurnal.totalKredit.toLocaleString('id-ID')}
                      </td>
                      <td className="py-2 px-3 text-center print:hidden">
                        {canEdit && (
                          <div className="flex items-center justify-center gap-1">
                            <button
                              onClick={() => handleOpenEdit(jurnal)}
                              title="Edit Jurnal"
                              className="rounded p-1 text-slate-600 hover:bg-slate-200"
                            >
                              <FileText className="h-3.5 w-3.5" />
                            </button>
                            <button
                              onClick={() => handleDelete(jurnal.id)}
                              title="Hapus Jurnal"
                              className="rounded p-1 text-red-600 hover:bg-red-100"
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </button>
                          </div>
                        )}
                      </td>
                    </tr>

                    {/* Transaction Items Rows */}
                    {jurnal.items.map((item) => (
                      <tr key={item.id} className="hover:bg-blue-50/20 text-slate-700">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td className="py-1.5 px-4">
                          <div className={`flex items-center flex-wrap gap-2 ${item.kredit > 0 ? 'pl-6' : ''}`}>
                            {item.kredit > 0 && (
                              <ArrowRight className="h-3 w-3 text-slate-400 shrink-0" />
                            )}
                            <span className={item.kredit > 0 ? 'text-slate-600 italic' : 'font-medium'}>
                              {item.namaAkun}
                            </span>
                            {(() => {
                              const linkedVendorId =
                                item.vendorId ||
                                akuns.find(
                                  (a) =>
                                    a.id === item.akunId ||
                                    a.kodeAkun === item.kodeAkun
                                )?.linkedVendorId;
                              const vendor = linkedVendorId
                                ? vendors?.find((v) => v.id === linkedVendorId)
                                : null;
                              if (!vendor && !item.virtualAccountDisplay) return null;
                              return (
                                <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-[10px] font-semibold bg-indigo-50 text-indigo-800 border border-indigo-200 shadow-2xs">
                                  <Building2 className="h-3 w-3 text-indigo-600 shrink-0" />
                                  <span>
                                    {vendor ? `${vendor.tipe === 'Customer' ? 'Pelanggan' : 'Rekanan'}: ${vendor.nama}` : 'Rekanan'}
                                  </span>
                                  {item.virtualAccountDisplay && (
                                    <span className="font-mono text-indigo-600 border-l border-indigo-200 pl-1.5 ml-0.5">
                                      {item.virtualAccountDisplay}
                                    </span>
                                  )}
                                </span>
                              );
                            })()}
                          </div>
                          {item.keteranganItem && (
                            <div className="text-[10px] text-slate-400 pl-6">
                              {item.keteranganItem}
                            </div>
                          )}
                        </td>
                        <td className="py-1.5 px-3 font-mono text-slate-600">{item.kodeAkun}</td>
                        <td className="py-1.5 px-4 text-right font-mono text-slate-800">
                          {item.debet > 0 ? item.debet.toLocaleString('id-ID') : '-'}
                        </td>
                        <td className="py-1.5 px-4 text-right font-mono text-slate-800">
                          {item.kredit > 0 ? item.kredit.toLocaleString('id-ID') : '-'}
                        </td>
                        <td className="print:hidden"></td>
                      </tr>
                    ))}
                  </React.Fragment>
                ))
              )}
            </tbody>
            <tfoot className="border-t-2 border-slate-300 bg-slate-100 font-bold text-slate-800">
              <tr>
                <td colSpan={5} className="py-3 px-4 text-right uppercase tracking-wider">
                  Grand Total Jurnal:
                </td>
                <td className="py-3 px-4 text-right font-mono text-blue-900">
                  Rp {totalDebetAll.toLocaleString('id-ID')}
                </td>
                <td className="py-3 px-4 text-right font-mono text-amber-900">
                  Rp {totalKreditAll.toLocaleString('id-ID')}
                </td>
                <td className="print:hidden"></td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

      {/* Print Signature Section */}
      <div className="hidden print:block">
        <PrintSignature profile={profile} />
      </div>

      {/* Input / Edit Journal Modal */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-4 backdrop-blur-xs">
          <div className="flex max-h-[92vh] w-full max-w-5xl flex-col rounded-lg bg-white shadow-2xl">
            {/* Header */}
            <div className="flex items-center justify-between border-b border-slate-200 bg-slate-800 px-6 py-4 text-white rounded-t-lg">
              <div className="flex items-center gap-2">
                <FileText className="h-5 w-5 text-blue-400" />
                <h3 className="text-sm font-semibold">
                  {editingJurnal ? 'Edit Transaksi Jurnal' : 'Input Transaksi Jurnal Baru'}
                </h3>
              </div>
              <button onClick={() => setIsModalOpen(false)} className="text-slate-400 hover:text-white">
                <X className="h-5 w-5" />
              </button>
            </div>

            {/* Form */}
            <form onSubmit={handleSaveJurnalSubmit} className="flex-1 overflow-y-auto p-6 space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-slate-700">Tanggal Transaksi *</label>
                  <input
                    type="date"
                    required
                    value={tanggal}
                    onChange={(e) => {
                      const newTgl = e.target.value;
                      setTanggal(newTgl);
                      if (newTgl) {
                        const derivedBulan = StorageService.getNamaPeriodeFromDate(newTgl);
                        if (derivedBulan) {
                          setBulan(derivedBulan);
                        }
                      }
                    }}
                    className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 text-xs font-medium focus:border-blue-500 focus:outline-hidden"
                  />
                  <span className="block text-[10px] text-blue-600 mt-0.5">
                    Periode: {StorageService.getNamaPeriodeFromDate(tanggal) || bulan}
                  </span>
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-700">Periode Bulan *</label>
                  <input
                    type="text"
                    required
                    value={bulan}
                    onChange={(e) => setBulan(e.target.value)}
                    className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 text-xs font-medium focus:border-blue-500 focus:outline-hidden"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-700">Tipe Jurnal *</label>
                  <select
                    value={tipe}
                    onChange={(e) => {
                      const t = e.target.value as TipeJurnal;
                      setTipe(t);
                      if (!editingJurnal) {
                        const count = journals.filter((j) => j.tipe === t).length + 1;
                        setNoBukti(`${t}-2026/01/${String(count).padStart(3, '0')}`);
                      }
                    }}
                    className="mt-1 w-full rounded border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-semibold focus:border-blue-500 focus:outline-hidden"
                  >
                    <option value="JU">Jurnal Umum (JU)</option>
                    <option value="AJP">Ayat Jurnal Penyesuaian (AJP)</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-700">No. Bukti / Voucher *</label>
                  <input
                    type="text"
                    required
                    value={noBukti}
                    onChange={(e) => setNoBukti(e.target.value)}
                    className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 text-xs font-mono font-bold text-blue-900 focus:border-blue-500 focus:outline-hidden"
                  />
                </div>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700">Keterangan Transaksi *</label>
                <textarea
                  rows={2}
                  required
                  placeholder="Penjelasan detail transaksi (contoh: Pembayaran sewa gedung kantor selama 1 tahun)..."
                  value={keterangan}
                  onChange={(e) => setKeterangan(e.target.value)}
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 text-xs font-medium focus:border-blue-500 focus:outline-hidden"
                />
              </div>

              {/* Items Table */}
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <label className="text-xs font-bold uppercase tracking-wider text-slate-700">
                    Rincian Akun (Debet & Kredit)
                  </label>
                  <button
                    type="button"
                    onClick={handleAddItemRow}
                    className="inline-flex items-center gap-1 rounded bg-slate-100 px-2.5 py-1 text-xs font-semibold text-blue-700 hover:bg-blue-50"
                  >
                    <Plus className="h-3 w-3" /> Tambah Baris
                  </button>
                </div>

                <div className="overflow-x-auto rounded border border-slate-200">
                  <table className="w-full text-left text-xs border-collapse">
                    <thead className="bg-slate-100 text-slate-700 font-semibold uppercase">
                      <tr>
                        <th className="py-2 px-3 w-52">Nama Akun (Pilih)</th>
                        <th className="py-2 px-2 w-24">Kode Akun</th>
                        <th className="py-2 px-2 w-56">Virtual Account / Rekanan (Opsional)</th>
                        <th className="py-2 px-3">Keterangan Item</th>
                        <th className="py-2 px-3 text-right w-32">Debet (Rp)</th>
                        <th className="py-2 px-3 text-right w-32">Kredit (Rp)</th>
                        <th className="py-2 px-2 text-center w-10"></th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-200">
                      {items.map((item, idx) => (
                        <tr key={item.id} className="hover:bg-slate-50">
                          {/* Nama Akun (Pilih) */}
                          <td className="py-2 px-3">
                            <select
                              value={item.akunId}
                              onChange={(e) => handleAkunChange(idx, e.target.value)}
                              className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs focus:border-blue-500 focus:outline-hidden"
                            >
                              {akuns.map((a) => (
                                <option key={a.id} value={a.id}>
                                  {a.namaAkun} ({a.kodeAkun})
                                </option>
                              ))}
                            </select>
                          </td>

                          {/* Kode Akun (Otomatis dari Nama Akun) */}
                          <td className="py-2 px-2">
                            <input
                              type="text"
                              readOnly
                              value={item.kodeAkun}
                              className="w-full rounded border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-mono font-bold text-slate-700"
                            />
                          </td>

                          {/* Virtual Account / Rekanan (Opsional) */}
                          <td className="py-2 px-2">
                            <select
                              value={
                                item.vendorId
                                  ? item.virtualAccountId
                                    ? `${item.vendorId}|${item.virtualAccountId}`
                                    : `${item.vendorId}|none`
                                  : 'none'
                              }
                              onChange={(e) => handleVirtualAccountChange(idx, e.target.value)}
                              className="w-full rounded border border-slate-300 bg-white px-1.5 py-1 text-[11px] focus:border-blue-500 focus:outline-hidden"
                              title="Tautkan transaksi baris ini ke Buku Pembantu & Rekening Virtual Account Rekanan (Opsional)"
                            >
                              <option value="none">- Tanpa Rekanan / VA -</option>
                              {vendors && vendors.map((v) => (
                                <optgroup key={v.id} label={`${v.tipe === 'Customer' ? 'Pelanggan' : 'Pemasok'}: ${v.nama}`}>
                                  <option value={`${v.id}|none`}>
                                    🏢 Rekanan: {v.nama} (Buku Pembantu)
                                  </option>
                                  {v.virtualAccounts && v.virtualAccounts.map((va) => (
                                    <option key={va.id} value={`${v.id}|${va.id}`}>
                                      💳 {va.bankName} VA: {va.accountNumber}
                                    </option>
                                  ))}
                                </optgroup>
                              ))}
                            </select>
                          </td>

                          {/* Keterangan item */}
                          <td className="py-2 px-3">
                            <input
                              type="text"
                              placeholder="Keterangan per baris (opsional)"
                              value={item.keteranganItem || ''}
                              onChange={(e) => {
                                const updated = [...items];
                                updated[idx].keteranganItem = e.target.value;
                                setItems(updated);
                              }}
                              className="w-full rounded border border-slate-300 px-2 py-1 text-xs focus:border-blue-500 focus:outline-hidden"
                            />
                          </td>

                          {/* Debet */}
                          <td className="py-2 px-3">
                            <input
                              type="number"
                              step="any"
                              min="0"
                              value={item.debet === 0 ? '' : item.debet}
                              onChange={(e) => {
                                const val = e.target.value === '' ? 0 : parseFloat(e.target.value);
                                handleAmountChange(idx, 'debet', isNaN(val) ? 0 : val);
                              }}
                              placeholder="0"
                              className="w-full rounded border border-slate-300 px-2 py-1 text-right text-xs font-mono font-semibold focus:border-blue-500 focus:outline-hidden"
                            />
                          </td>

                          {/* Kredit */}
                          <td className="py-2 px-3">
                            <input
                              type="number"
                              step="any"
                              min="0"
                              value={item.kredit === 0 ? '' : item.kredit}
                              onChange={(e) => {
                                const val = e.target.value === '' ? 0 : parseFloat(e.target.value);
                                handleAmountChange(idx, 'kredit', isNaN(val) ? 0 : val);
                              }}
                              placeholder="0"
                              className="w-full rounded border border-slate-300 px-2 py-1 text-right text-xs font-mono font-semibold focus:border-blue-500 focus:outline-hidden"
                            />
                          </td>

                          {/* Hapus baris */}
                          <td className="py-2 px-2 text-center">
                            <button
                              type="button"
                              onClick={() => handleRemoveItemRow(idx)}
                              className="text-slate-400 hover:text-red-600"
                            >
                              <Trash2 className="h-4 w-4" />
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                    <tfoot className="border-t-2 border-slate-300 bg-slate-100 font-bold">
                      <tr>
                        <td colSpan={3} className="py-2 px-3 text-right text-slate-700">
                          Total Baris Transaksi:
                        </td>
                        <td className="py-2 px-3 text-right font-mono text-blue-900">
                          Rp {currentTotalDebet.toLocaleString('id-ID')}
                        </td>
                        <td className="py-2 px-3 text-right font-mono text-amber-900">
                          Rp {currentTotalKredit.toLocaleString('id-ID')}
                        </td>
                        <td></td>
                      </tr>
                    </tfoot>
                  </table>
                </div>

                {/* Balance validation alert */}
                <div
                  className={`mt-2 flex items-center justify-between rounded-lg p-3 text-xs ${
                    isFormBalanced
                      ? 'border border-emerald-200 bg-emerald-50 text-emerald-800'
                      : 'border border-red-200 bg-red-50 text-red-800'
                  }`}
                >
                  <div className="flex items-center gap-2">
                    {isFormBalanced ? (
                      <CheckCircle2 className="h-4 w-4 text-emerald-600" />
                    ) : (
                      <AlertTriangle className="h-4 w-4 text-red-600" />
                    )}
                    <span className="font-semibold">
                      {isFormBalanced
                        ? 'JURNAL SEIMBANG (BALANCED): Siap untuk disimpan'
                        : `JURNAL TIDAK SEIMBANG! Selisih Debet & Kredit: Rp ${Math.abs(
                            currentTotalDebet - currentTotalKredit
                          ).toLocaleString('id-ID')}`}
                    </span>
                  </div>
                  <span className="text-[11px] font-mono">
                    Debet: {currentTotalDebet.toLocaleString('id-ID')} | Kredit: {currentTotalKredit.toLocaleString('id-ID')}
                  </span>
                </div>
              </div>

              {/* Action buttons */}
              <div className="flex justify-end gap-2 pt-4 border-t border-slate-200">
                <button
                  type="button"
                  onClick={() => setIsModalOpen(false)}
                  className="rounded bg-slate-200 px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-300"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  disabled={!isFormBalanced}
                  className={`rounded px-5 py-2 text-xs font-semibold text-white shadow-xs ${
                    isFormBalanced
                      ? 'bg-blue-600 hover:bg-blue-700 cursor-pointer'
                      : 'bg-slate-400 cursor-not-allowed opacity-60'
                  }`}
                >
                  Simpan Transaksi Jurnal
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Modal Import Jurnal dari Excel / CSV */}
      {isImportModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-4 backdrop-blur-xs">
          <div className="flex max-h-[92vh] w-full max-w-3xl flex-col rounded-lg bg-white shadow-2xl">
            <div className="flex items-center justify-between border-b border-slate-200 bg-slate-900 px-6 py-4 text-white rounded-t-lg">
              <div className="flex items-center gap-2">
                <FileSpreadsheet className="h-5 w-5 text-emerald-400" />
                <h3 className="text-sm font-semibold">Upload Transaksi Jurnal dari Excel (.xlsx / .xls / .csv)</h3>
              </div>
              <button
                onClick={() => setIsImportModalOpen(false)}
                className="text-slate-400 hover:text-white"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            <div className="flex-1 overflow-y-auto p-6 space-y-4 text-xs">
              <div className="rounded-lg border border-blue-200 bg-blue-50/70 p-4 text-blue-900 space-y-1.5">
                <p className="font-bold">Format Kolom Spreadsheet Excel:</p>
                <code className="block bg-white p-2 rounded border border-blue-200 text-[11px] font-mono text-blue-950">
                  No Bukti | Tanggal | Bulan | Tipe (JU/AJP) | Kode Akun | Nama Akun | Debet | Kredit | Keterangan
                </code>
                <p className="text-[11px] text-slate-600">
                  Baris dengan No Bukti yang sama akan otomatis digabungkan menjadi satu voucher jurnal. Setiap jurnal harus seimbang (Total Debet == Total Kredit).
                </p>
              </div>

              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                  Pilih Berkas Excel / Spreadsheet:
                </label>
                <input
                  type="file"
                  accept=".xlsx,.xls,.csv"
                  onChange={handleImportFile}
                  className="block w-full text-xs text-slate-600 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-emerald-600 file:text-white file:font-semibold hover:file:bg-emerald-700 cursor-pointer"
                />
              </div>

              {importSuccessMsg && (
                <div className="rounded-lg bg-emerald-50 border border-emerald-200 p-3 text-emerald-800 font-bold flex items-center gap-2">
                  <CheckCircle2 className="h-4 w-4 text-emerald-600" />
                  {importSuccessMsg}
                </div>
              )}

              {importErrors.length > 0 && (
                <div className="rounded-lg bg-red-50 border border-red-200 p-3 text-red-800 space-y-1">
                  <div className="flex items-center gap-1.5 font-bold">
                    <AlertTriangle className="h-4 w-4 text-red-600" />
                    Ditemukan Kesalahan Validasi:
                  </div>
                  <ul className="list-disc pl-5 space-y-0.5 text-[11px]">
                    {importErrors.map((err, idx) => (
                      <li key={idx}>{err}</li>
                    ))}
                  </ul>
                </div>
              )}

              {importWarnings.length > 0 && (
                <div className="rounded-lg bg-amber-50 border border-amber-200 p-3 text-amber-800 space-y-1">
                  <div className="font-bold">Catatan Peringatan:</div>
                  <ul className="list-disc pl-5 space-y-0.5 text-[11px]">
                    {importWarnings.map((w, idx) => (
                      <li key={idx}>{w}</li>
                    ))}
                  </ul>
                </div>
              )}

              {parsedJournals.length > 0 && (
                <div className="space-y-2">
                  <div className="flex items-center justify-between font-bold text-slate-800">
                    <span>Pratinjau Jurnal Siap Impor ({parsedJournals.length} Transaksi Valid):</span>
                    <span className="text-emerald-700">Semua Valid & Seimbang</span>
                  </div>

                  <div className="max-h-60 overflow-y-auto rounded border border-slate-200 divide-y divide-slate-100">
                    {parsedJournals.map((j) => (
                      <div key={j.id} className="p-2.5 hover:bg-slate-50 flex items-center justify-between">
                        <div>
                          <div className="font-bold text-blue-900 font-mono">
                            {j.noBukti} ({j.tipe}) &bull; {j.tanggal}
                          </div>
                          <div className="text-slate-600 truncate max-w-md">{j.keterangan}</div>
                          <div className="text-[10px] text-slate-400">{j.items.length} Baris Akun</div>
                        </div>
                        <div className="text-right font-mono font-bold text-slate-800">
                          Rp {j.totalDebet.toLocaleString('id-ID')}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>

            <div className="flex justify-between items-center px-6 py-4 border-t border-slate-200 bg-slate-50 rounded-b-lg">
              <span className="text-slate-500 text-[11px]">
                {importFileName ? `Berkas: ${importFileName}` : 'Belum ada berkas dipilih'}
              </span>
              <div className="flex gap-2">
                <button
                  type="button"
                  onClick={() => setIsImportModalOpen(false)}
                  className="rounded bg-slate-200 px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-300"
                >
                  Batal
                </button>
                <button
                  type="button"
                  disabled={parsedJournals.length === 0}
                  onClick={handleCommitImport}
                  className={`inline-flex items-center gap-1.5 rounded px-5 py-2 text-xs font-bold text-white shadow-xs ${
                    parsedJournals.length > 0
                      ? 'bg-emerald-600 hover:bg-emerald-700 cursor-pointer'
                      : 'bg-slate-400 cursor-not-allowed opacity-60'
                  }`}
                >
                  <Check className="h-4 w-4" />
                  Simpan {parsedJournals.length} Jurnal ke Pembukuan
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Modal Transaksi Virtual Account (VA) ke Jurnal Umum & Laporan Keuangan */}
      <VirtualAccountJournalModal
        isOpen={isVaModalOpen}
        onClose={() => setIsVaModalOpen(false)}
        vendors={vendors || StorageService.getVendors()}
        akuns={akuns}
        profile={profile}
        activePeriodeNama={activePeriodeNama}
        onSaveJurnal={onSaveJurnal}
        onRefreshData={onRefreshData}
        onNavigateTab={onNavigateTab}
      />
    </div>
  );
};