import React, { useState } from 'react';
import { Akun, KategoriAkun, PosSaldo, PosLaporan, ProfilPerusahaan } from '../../types/accounting';
import { Plus, Search, Download, Upload, Printer, Edit2, Trash2, CheckCircle2, AlertTriangle, X } from 'lucide-react';
import { ExcelService } from '../../services/excelService';
import { PrintHeader, PrintSignature } from '../common/PrintHeader';

interface DaftarAkunViewProps {
  akuns: Akun[];
  profile: ProfilPerusahaan;
  onSaveAkun: (akun: Akun) => void;
  onDeleteAkun: (id: string) => { success: boolean; message: string };
  onImportAkuns: (imported: Partial<Akun>[]) => void;
  canEdit: boolean;
}

export const DaftarAkunView: React.FC<DaftarAkunViewProps> = ({
  akuns,
  profile,
  onSaveAkun,
  onDeleteAkun,
  onImportAkuns,
  canEdit,
}) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [categoryFilter, setCategoryFilter] = useState<string>('SEMUA');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingAkun, setEditingAkun] = useState<Akun | null>(null);
  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
  const [importText, setImportText] = useState('');
  const [alertMessage, setAlertMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);

  // Form State
  const [formData, setFormData] = useState<Omit<Akun, 'id'>>({
    kodeAkun: '',
    namaAkun: '',
    kategori: 'Aktiva Lancar',
    posSaldo: 'Debet',
    posLaporan: 'Neraca',
    arusKasKategori: 'Operasi',
    saldoAwalDebet: 0,
    saldoAwalKredit: 0,
    keterangan: '',
  });

  // Calculate totals
  const totalSaldoDebet = akuns.reduce((sum, a) => sum + (a.saldoAwalDebet || 0), 0);
  const totalSaldoKredit = akuns.reduce((sum, a) => sum + (a.saldoAwalKredit || 0), 0);
  const isBalanced = Math.abs(totalSaldoDebet - totalSaldoKredit) < 1;

  // Filtered accounts
  const filteredAkuns = akuns.filter((a) => {
    const matchesSearch =
      a.kodeAkun.toLowerCase().includes(searchTerm.toLowerCase()) ||
      a.namaAkun.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (a.keterangan || '').toLowerCase().includes(searchTerm.toLowerCase());

    const matchesCategory =
      categoryFilter === 'SEMUA' || a.kategori === categoryFilter;

    return matchesSearch && matchesCategory;
  });

  const handleOpenAdd = () => {
    setEditingAkun(null);
    setFormData({
      kodeAkun: '',
      namaAkun: '',
      kategori: 'Aktiva Lancar',
      posSaldo: 'Debet',
      posLaporan: 'Neraca',
      arusKasKategori: 'Operasi',
      saldoAwalDebet: 0,
      saldoAwalKredit: 0,
      keterangan: '',
    });
    setIsModalOpen(true);
  };

  const handleOpenEdit = (akun: Akun) => {
    setEditingAkun(akun);
    setFormData({
      kodeAkun: akun.kodeAkun,
      namaAkun: akun.namaAkun,
      kategori: akun.kategori,
      posSaldo: akun.posSaldo,
      posLaporan: akun.posLaporan,
      arusKasKategori: akun.arusKasKategori || 'Operasi',
      saldoAwalDebet: akun.saldoAwalDebet || 0,
      saldoAwalKredit: akun.saldoAwalKredit || 0,
      keterangan: akun.keterangan || '',
    });
    setIsModalOpen(true);
  };

  const handleDelete = (id: string) => {
    if (confirm('Apakah Anda yakin ingin menghapus akun ini?')) {
      const res = onDeleteAkun(id);
      if (!res.success) {
        setAlertMessage({ type: 'error', text: res.message });
      } else {
        setAlertMessage({ type: 'success', text: res.message });
      }
      setTimeout(() => setAlertMessage(null), 4000);
    }
  };

  const handleSaveSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const akunToSave: Akun = {
      id: editingAkun ? editingAkun.id : `ak-${Date.now()}`,
      ...formData,
    };
    onSaveAkun(akunToSave);
    setIsModalOpen(false);
    setAlertMessage({
      type: 'success',
      text: `Akun ${akunToSave.kodeAkun} - ${akunToSave.namaAkun} berhasil disimpan.`,
    });
    setTimeout(() => setAlertMessage(null), 3500);
  };

  const handleExportExcel = () => {
    const headers = [
      'Kode Akun',
      'Nama Akun',
      'Kategori',
      'Pos Saldo',
      'Pos Laporan',
      'Arus Kas',
      'Saldo Awal Debet (Rp)',
      'Saldo Awal Kredit (Rp)',
      'Keterangan',
    ];
    const rows = akuns.map((a) => [
      a.kodeAkun,
      a.namaAkun,
      a.kategori,
      a.posSaldo,
      a.posLaporan,
      a.arusKasKategori || '-',
      a.saldoAwalDebet,
      a.saldoAwalKredit,
      a.keterangan || '',
    ]);

    ExcelService.exportToStyledExcel(
      `Daftar_Akun_PT_Tio_Mandiri_Jaya`,
      'DAFTAR AKUN & SALDO AWAL (CHART OF ACCOUNTS)',
      headers,
      rows
    );
  };

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

    try {
      const rows = await ExcelService.readWorkbookFile(file);
      const parsed = ExcelService.parseAkunRows(rows);
      if (parsed.length === 0) {
        alert('Berkas Excel tidak memiliki baris akun yang valid. Pastikan kolom Kode Akun dan Nama Akun terisi.');
        return;
      }
      onImportAkuns(parsed);
      setIsImportModalOpen(false);
      setAlertMessage({
        type: 'success',
        text: `Berhasil mengimpor ${parsed.length} akun dari berkas "${file.name}".`,
      });
      setTimeout(() => setAlertMessage(null), 4000);
    } catch (err: any) {
      console.error(err);
      alert('Gagal membaca file Excel. Pastikan format file adalah .xlsx, .xls, atau .csv');
    }
  };

  const handleProcessImport = () => {
    if (!importText.trim()) return;
    const rows = ExcelService.parseCSV(importText);
    const parsed = ExcelService.parseAkunRows(rows);
    if (parsed.length === 0) {
      alert('Format CSV tidak sesuai atau data kosong. Pastikan terdapat kolom Kode Akun, Nama Akun, Pos Saldo, Pos Laporan, Debet, Kredit.');
      return;
    }
    onImportAkuns(parsed);
    setIsImportModalOpen(false);
    setImportText('');
    setAlertMessage({
      type: 'success',
      text: `Berhasil mengimpor ${parsed.length} akun ke dalam sistem.`,
    });
    setTimeout(() => setAlertMessage(null), 4000);
  };

  return (
    <div className="space-y-5">
      {/* Print View Header (only shows in print) */}
      <div className="hidden print:block">
        <PrintHeader
          profile={profile}
          title="DAFTAR PERKIRAAN & SALDO AWAL (CHART OF ACCOUNTS)"
          subtitle="Tahun Anggaran Pembukuan Berjalan"
        />
      </div>

      {/* Screen 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-blue-600 inline-block"></span>
            <h2 className="text-sm font-bold uppercase tracking-wider text-slate-800">
              Daftar Akun (Chart of Accounts)
            </h2>
            <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-800">
              {akuns.length} Akun
            </span>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            {canEdit && (
              <button
                onClick={handleOpenAdd}
                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" />
                Tambah Akun Baru
              </button>
            )}

            <button
              onClick={() => 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" />
              Import CSV/Excel
            </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 (.xls)
            </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>

        {/* Alert message */}
        {alertMessage && (
          <div
            className={`mx-5 mt-4 flex items-center gap-2 rounded-lg p-3 text-xs font-semibold ${
              alertMessage.type === 'success'
                ? 'bg-emerald-50 text-emerald-800 border border-emerald-200'
                : 'bg-red-50 text-red-800 border border-red-200'
            }`}
          >
            {alertMessage.type === 'success' ? (
              <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-600" />
            ) : (
              <AlertTriangle className="h-4 w-4 shrink-0 text-red-600" />
            )}
            <span>{alertMessage.text}</span>
          </div>
        )}

        {/* Balance Status Banner */}
        <div className="mx-5 my-4 grid grid-cols-1 md:grid-cols-3 gap-3 print:hidden">
          <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
            <span className="text-[11px] font-semibold uppercase text-slate-500">Total Saldo Awal Debet</span>
            <p className="text-base font-bold text-slate-800">
              Rp {totalSaldoDebet.toLocaleString('id-ID')}
            </p>
          </div>
          <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
            <span className="text-[11px] font-semibold uppercase text-slate-500">Total Saldo Awal Kredit</span>
            <p className="text-base font-bold text-slate-800">
              Rp {totalSaldoKredit.toLocaleString('id-ID')}
            </p>
          </div>
          <div
            className={`flex items-center justify-between rounded-lg border p-3 ${
              isBalanced
                ? 'border-emerald-200 bg-emerald-50 text-emerald-900'
                : 'border-red-200 bg-red-50 text-red-900'
            }`}
          >
            <div>
              <span className="text-[11px] font-semibold uppercase">Status Saldo Awal</span>
              <p className="text-sm font-bold flex items-center gap-1.5">
                {isBalanced ? (
                  <>
                    <CheckCircle2 className="h-4 w-4 text-emerald-600" />
                    SEIMBANG (BALANCED)
                  </>
                ) : (
                  <>
                    <AlertTriangle className="h-4 w-4 text-red-600" />
                    SELISIH Rp {Math.abs(totalSaldoDebet - totalSaldoKredit).toLocaleString('id-ID')}
                  </>
                )}
              </p>
            </div>
            <span className="text-[11px] px-2 py-0.5 rounded bg-white font-medium border border-slate-200">
              Standar SAK EMKM
            </span>
          </div>
        </div>

        {/* Search & Filters */}
        <div className="flex flex-wrap items-center justify-between gap-3 px-5 pb-3 pt-1 print:hidden">
          <div className="relative min-w-[240px] flex-1 max-w-sm">
            <Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-slate-400" />
            <input
              type="text"
              placeholder="Cari kode akun, nama, atau 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-2">
            <label className="text-xs font-semibold text-slate-600">Kategori:</label>
            <select
              value={categoryFilter}
              onChange={(e) => setCategoryFilter(e.target.value)}
              className="rounded border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-700 focus:border-blue-500 focus:outline-hidden"
            >
              <option value="SEMUA">Semua Kategori</option>
              <option value="Aktiva Lancar">1. Aktiva Lancar</option>
              <option value="Aktiva Tetap">1. Aktiva Tetap</option>
              <option value="Kewajiban Lancar">2. Kewajiban Lancar</option>
              <option value="Kewajiban Jangka Panjang">2. Kewajiban Jangka Panjang</option>
              <option value="Ekuitas">3. Ekuitas</option>
              <option value="Pendapatan Usaha">4. Pendapatan Usaha</option>
              <option value="Pendapatan Lain-lain">4. Pendapatan Lain-lain</option>
              <option value="Beban Pokok Penjualan">5. HPP</option>
              <option value="Beban Operasional">6. Beban Operasional</option>
              <option value="Beban Lain-lain">6. Beban Lain-lain</option>
              <option value="Beban Pajak">7. Beban Pajak</option>
            </select>
          </div>
        </div>

        {/* Account Table */}
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs border-collapse">
            <thead className="border-y border-slate-200 bg-slate-100/90 text-slate-700 uppercase font-semibold">
              <tr>
                <th className="py-2.5 px-4 w-28">Kode Akun</th>
                <th className="py-2.5 px-4">Nama Akun</th>
                <th className="py-2.5 px-3">Kategori</th>
                <th className="py-2.5 px-3 text-center">Pos Saldo</th>
                <th className="py-2.5 px-3 text-center">Pos Laporan</th>
                <th className="py-2.5 px-3 text-center">Arus Kas</th>
                <th className="py-2.5 px-4 text-right">Saldo Awal (D)</th>
                <th className="py-2.5 px-4 text-right">Saldo Awal (K)</th>
                <th className="py-2.5 px-4 text-center print:hidden w-24">Aksi</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200">
              {filteredAkuns.length === 0 ? (
                <tr>
                  <td colSpan={9} className="py-8 text-center text-slate-400">
                    Tidak ada akun yang sesuai dengan kriteria pencarian.
                  </td>
                </tr>
              ) : (
                filteredAkuns.map((akun) => (
                  <tr key={akun.id} className="hover:bg-blue-50/40 transition-colors">
                    <td className="py-2.5 px-4 font-mono font-bold text-blue-900">
                      {akun.kodeAkun}
                    </td>
                    <td className="py-2.5 px-4 font-medium text-slate-800">
                      <div>{akun.namaAkun}</div>
                      {akun.keterangan && (
                        <div className="text-[11px] text-slate-400 font-normal">{akun.keterangan}</div>
                      )}
                    </td>
                    <td className="py-2.5 px-3">
                      <span className="rounded bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-700">
                        {akun.kategori}
                      </span>
                    </td>
                    <td className="py-2.5 px-3 text-center">
                      <span
                        className={`inline-block rounded px-2 py-0.5 text-[11px] font-semibold ${
                          akun.posSaldo === 'Debet'
                            ? 'bg-blue-100 text-blue-800'
                            : 'bg-amber-100 text-amber-800'
                        }`}
                      >
                        {akun.posSaldo}
                      </span>
                    </td>
                    <td className="py-2.5 px-3 text-center">
                      <span
                        className={`inline-block rounded px-2 py-0.5 text-[11px] font-semibold ${
                          akun.posLaporan === 'Neraca'
                            ? 'bg-purple-100 text-purple-800'
                            : 'bg-emerald-100 text-emerald-800'
                        }`}
                      >
                        {akun.posLaporan}
                      </span>
                    </td>
                    <td className="py-2.5 px-3 text-center text-slate-600">
                      {akun.arusKasKategori || '-'}
                    </td>
                    <td className="py-2.5 px-4 text-right font-mono text-slate-700">
                      {akun.saldoAwalDebet > 0 ? akun.saldoAwalDebet.toLocaleString('id-ID') : '-'}
                    </td>
                    <td className="py-2.5 px-4 text-right font-mono text-slate-700">
                      {akun.saldoAwalKredit > 0 ? akun.saldoAwalKredit.toLocaleString('id-ID') : '-'}
                    </td>
                    <td className="py-2.5 px-4 text-center print:hidden">
                      <div className="flex items-center justify-center gap-1.5">
                        {canEdit && (
                          <>
                            <button
                              onClick={() => handleOpenEdit(akun)}
                              title="Edit Akun"
                              className="rounded p-1 text-blue-600 hover:bg-blue-100"
                            >
                              <Edit2 className="h-3.5 w-3.5" />
                            </button>
                            <button
                              onClick={() => handleDelete(akun.id)}
                              title="Hapus Akun"
                              className="rounded p-1 text-red-600 hover:bg-red-100"
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </button>
                          </>
                        )}
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
            <tfoot className="border-t-2 border-slate-300 bg-slate-100 font-bold text-slate-800">
              <tr>
                <td colSpan={6} className="py-3 px-4 text-right uppercase tracking-wider">
                  Total Saldo Awal:
                </td>
                <td className="py-3 px-4 text-right font-mono text-blue-900">
                  Rp {totalSaldoDebet.toLocaleString('id-ID')}
                </td>
                <td className="py-3 px-4 text-right font-mono text-amber-900">
                  Rp {totalSaldoKredit.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>

      {/* Modal Add / Edit Akun */}
      {isModalOpen && (
        <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-lg bg-white shadow-xl">
            <div className="flex items-center justify-between border-b border-slate-200 bg-slate-800 px-5 py-3.5 text-white rounded-t-lg">
              <h3 className="text-sm font-semibold">
                {editingAkun ? 'Edit Data Akun' : 'Tambah Akun Baru'}
              </h3>
              <button onClick={() => setIsModalOpen(false)} className="text-slate-400 hover:text-white">
                <X className="h-4 w-4" />
              </button>
            </div>

            <form onSubmit={handleSaveSubmit} className="p-5 space-y-4">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-slate-700">Kode Akun *</label>
                  <input
                    type="text"
                    required
                    placeholder="Contoh: 1-1008"
                    value={formData.kodeAkun}
                    onChange={(e) => setFormData({ ...formData, kodeAkun: e.target.value })}
                    className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 text-xs font-mono font-bold focus:border-blue-500 focus:outline-hidden"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-700">Kategori Akun *</label>
                  <select
                    value={formData.kategori}
                    onChange={(e) => {
                      const kat = e.target.value as KategoriAkun;
                      let posSaldo: PosSaldo = 'Debet';
                      let posLaporan: PosLaporan = 'Neraca';

                      if (kat.includes('Kewajiban') || kat === 'Ekuitas') {
                        posSaldo = 'Kredit';
                        posLaporan = 'Neraca';
                      } else if (kat.includes('Pendapatan')) {
                        posSaldo = 'Kredit';
                        posLaporan = 'Laba Rugi';
                      } else if (kat.includes('Beban') || kat.includes('HPP')) {
                        posSaldo = 'Debet';
                        posLaporan = 'Laba Rugi';
                      }

                      setFormData({
                        ...formData,
                        kategori: kat,
                        posSaldo,
                        posLaporan,
                      });
                    }}
                    className="mt-1 w-full rounded border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium focus:border-blue-500 focus:outline-hidden"
                  >
                    <option value="Aktiva Lancar">Aktiva Lancar</option>
                    <option value="Aktiva Tetap">Aktiva Tetap</option>
                    <option value="Kewajiban Lancar">Kewajiban Lancar</option>
                    <option value="Kewajiban Jangka Panjang">Kewajiban Jangka Panjang</option>
                    <option value="Ekuitas">Ekuitas</option>
                    <option value="Pendapatan Usaha">Pendapatan Usaha</option>
                    <option value="Pendapatan Lain-lain">Pendapatan Lain-lain</option>
                    <option value="Beban Pokok Penjualan">Beban Pokok Penjualan (HPP)</option>
                    <option value="Beban Operasional">Beban Operasional</option>
                    <option value="Beban Lain-lain">Beban Lain-lain</option>
                    <option value="Beban Pajak">Beban Pajak</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700">Nama Akun / Perkiraan *</label>
                <input
                  type="text"
                  required
                  placeholder="Contoh: Beban Pemeliharaan Bangunan"
                  value={formData.namaAkun}
                  onChange={(e) => setFormData({ ...formData, namaAkun: 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 className="grid grid-cols-3 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-slate-700">Pos Saldo *</label>
                  <select
                    value={formData.posSaldo}
                    onChange={(e) => setFormData({ ...formData, posSaldo: e.target.value as PosSaldo })}
                    className="mt-1 w-full rounded border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium focus:border-blue-500 focus:outline-hidden"
                  >
                    <option value="Debet">Debet</option>
                    <option value="Kredit">Kredit</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-700">Pos Laporan *</label>
                  <select
                    value={formData.posLaporan}
                    onChange={(e) => setFormData({ ...formData, posLaporan: e.target.value as PosLaporan })}
                    className="mt-1 w-full rounded border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium focus:border-blue-500 focus:outline-hidden"
                  >
                    <option value="Neraca">Neraca</option>
                    <option value="Laba Rugi">Laba Rugi</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-700">Kategori Arus Kas</label>
                  <select
                    value={formData.arusKasKategori || 'Operasi'}
                    onChange={(e) => setFormData({ ...formData, arusKasKategori: e.target.value as any })}
                    className="mt-1 w-full rounded border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium focus:border-blue-500 focus:outline-hidden"
                  >
                    <option value="Operasi">Operasi</option>
                    <option value="Investasi">Investasi</option>
                    <option value="Pendanaan">Pendanaan</option>
                    <option value="Kas">Kas / Setara Kas</option>
                  </select>
                </div>
              </div>

              {/* Saldo Awal Input (Manual in initial period or rollover) */}
              <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
                <span className="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                  Saldo Awal Perkiraan (IDR)
                </span>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-600">Saldo Awal Debet</label>
                    <input
                      type="number"
                      min="0"
                      value={formData.saldoAwalDebet}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          saldoAwalDebet: parseFloat(e.target.value) || 0,
                          saldoAwalKredit: 0, // Auto zero out the other side
                        })
                      }
                      className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 text-xs font-mono font-bold focus:border-blue-500 focus:outline-hidden bg-white"
                    />
                  </div>

                  <div>
                    <label className="block text-[11px] font-semibold text-slate-600">Saldo Awal Kredit</label>
                    <input
                      type="number"
                      min="0"
                      value={formData.saldoAwalKredit}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          saldoAwalKredit: parseFloat(e.target.value) || 0,
                          saldoAwalDebet: 0,
                        })
                      }
                      className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 text-xs font-mono font-bold focus:border-blue-500 focus:outline-hidden bg-white"
                    />
                  </div>
                </div>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700">Keterangan / Deskripsi Akun</label>
                <textarea
                  rows={2}
                  placeholder="Catatan tambahan fungsi akun ini..."
                  value={formData.keterangan}
                  onChange={(e) => setFormData({ ...formData, keterangan: 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 className="flex justify-end gap-2 pt-3 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"
                  className="rounded bg-blue-600 px-5 py-2 text-xs font-semibold text-white shadow-xs hover:bg-blue-700"
                >
                  Simpan Akun
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Modal Import 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="w-full max-w-xl rounded-lg bg-white shadow-xl">
            <div className="flex items-center justify-between border-b border-slate-200 bg-slate-800 px-5 py-3.5 text-white rounded-t-lg">
              <h3 className="text-sm font-semibold">Import Daftar Akun dari CSV / Excel</h3>
              <button onClick={() => setIsImportModalOpen(false)} className="text-slate-400 hover:text-white">
                <X className="h-4 w-4" />
              </button>
            </div>

            <div className="p-5 space-y-4">
              <div className="rounded bg-blue-50 p-3 text-xs text-blue-900">
                <p className="font-bold mb-1">Format Baris CSV:</p>
                <code className="block bg-blue-100 p-2 rounded text-[11px] font-mono text-blue-950">
                  Kode Akun, Nama Akun, Pos Saldo (Debet/Kredit), Pos Laporan (Neraca/Laba Rugi), Saldo Debet, Saldo Kredit
                </code>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">
                  Upload File CSV atau Tempel Data Teks CSV:
                </label>
                <input
                  type="file"
                  accept=".xlsx,.xls,.csv,.txt"
                  onChange={handleFileUpload}
                  className="mb-3 block w-full text-xs text-slate-500 file:mr-2 file:py-1.5 file:px-3 file:rounded file:border-0 file:bg-emerald-600 file:text-white file:text-xs file:font-semibold hover:file:bg-emerald-700 cursor-pointer"
                />

                <textarea
                  rows={6}
                  placeholder={`Kode Akun,Nama Akun,Pos Saldo,Pos Laporan,Saldo Debet,Saldo Kredit\n1-1008,Kas Kecil Cabang,Debet,Neraca,5000000,0`}
                  value={importText}
                  onChange={(e) => setImportText(e.target.value)}
                  className="w-full rounded border border-slate-300 p-2.5 text-xs font-mono 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={() => 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"
                  onClick={handleProcessImport}
                  className="rounded bg-emerald-600 px-5 py-2 text-xs font-semibold text-white shadow-xs hover:bg-emerald-700"
                >
                  Proses Import Data
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};