import React, { useState } from 'react';
import { AsetTetap, ProfilPerusahaan, PeriodeAkuntansi } from '../../types/accounting';
import { ExcelService } from '../../services/excelService';
import { PrintHeader, PrintSignature } from '../common/PrintHeader';
import {
  Download,
  Printer,
  Plus,
  Edit2,
  Trash2,
  Calendar,
  Building,
  CheckCircle2,
  Info,
  DollarSign,
  TrendingDown,
  Layers,
  X,
  ShieldCheck,
  Calculator,
} from 'lucide-react';

interface RincianPenyusutanViewProps {
  asetList: AsetTetap[];
  profile: ProfilPerusahaan;
  activePeriode: PeriodeAkuntansi;
  onSaveAset: (aset: AsetTetap) => void;
  onDeleteAset: (id: string) => void;
  canEdit?: boolean;
}

export const RincianPenyusutanView: React.FC<RincianPenyusutanViewProps> = ({
  asetList,
  profile,
  activePeriode,
  onSaveAset,
  onDeleteAset,
  canEdit = true,
}) => {
  const [filterKelompok, setFilterKelompok] = useState<string>('SEMUA');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingAset, setEditingAset] = useState<AsetTetap | null>(null);

  // Form State
  const [formData, setFormData] = useState<Partial<AsetTetap>>({
    kodeAset: '',
    namaAset: '',
    kelompok: 'Kelompok 1 (Bukan Bangunan - 4 Tahun)',
    tglPerolehan: '2025-01-01',
    hargaPerolehan: 0,
    masaManfaatTahun: 4,
    tarifPenyusutanPersen: 25,
    metodePenyusutan: 'Garis Lurus (Straight Line)',
    nilaiResidu: 0,
    akumulasiAwal: 0,
    penyusutanBulanIni: 0,
    akunAsetKode: '1-2010',
    akunAkumulasiKode: '1-2020',
    akunBebanKode: '6-1070',
    lokasi: '',
    keterangan: '',
  });

  const filteredAset = asetList.filter((a) => {
    if (filterKelompok === 'SEMUA') return true;
    return a.kelompok.includes(filterKelompok);
  });

  // Calculate totals
  const totalPerolehan = filteredAset.reduce((sum, a) => sum + (a.hargaPerolehan || 0), 0);
  const totalAkumAwal = filteredAset.reduce((sum, a) => sum + (a.akumulasiAwal || 0), 0);
  const totalBebanBln = filteredAset.reduce((sum, a) => sum + (a.penyusutanBulanIni || 0), 0);
  const totalAkumAkhir = filteredAset.reduce((sum, a) => sum + (a.akumulasiAkhir || 0), 0);
  const totalNilaiBuku = filteredAset.reduce((sum, a) => sum + (a.nilaiBuku || 0), 0);

  const handleOpenAdd = () => {
    setEditingAset(null);
    setFormData({
      kodeAset: `AST-${Date.now().toString().slice(-4)}`,
      namaAset: '',
      kelompok: 'Kelompok 1 (Bukan Bangunan - 4 Tahun)',
      tglPerolehan: '2025-01-01',
      hargaPerolehan: 0,
      masaManfaatTahun: 4,
      tarifPenyusutanPersen: 25,
      metodePenyusutan: 'Garis Lurus (Straight Line)',
      nilaiResidu: 0,
      akumulasiAwal: 0,
      penyusutanBulanIni: 0,
      akunAsetKode: '1-2010',
      akunAkumulasiKode: '1-2020',
      akunBebanKode: '6-1070',
      lokasi: 'Kantor Pusat',
      keterangan: '',
    });
    setIsModalOpen(true);
  };

  const handleOpenEdit = (ast: AsetTetap) => {
    setEditingAset(ast);
    setFormData({ ...ast });
    setIsModalOpen(true);
  };

  const handleKelompokChange = (val: string) => {
    let masa = 4;
    let tarif = 25;
    let akunAset = '1-2010';
    let akunAkum = '1-2020';
    let akunBeban = '6-1070';

    if (val.includes('Kelompok 2')) {
      masa = 8;
      tarif = 12.5;
      akunAset = '1-2030';
      akunAkum = '1-2040';
      akunBeban = '6-1080';
    } else if (val.includes('Kelompok 3')) {
      masa = 16;
      tarif = 6.25;
    } else if (val.includes('Bangunan')) {
      masa = 20;
      tarif = 5;
    }

    const perolehan = formData.hargaPerolehan || 0;
    const residu = formData.nilaiResidu || 0;
    const bebanBln = Math.round(((perolehan - residu) * (tarif / 100)) / 12);

    setFormData({
      ...formData,
      kelompok: val as any,
      masaManfaatTahun: masa,
      tarifPenyusutanPersen: tarif,
      akunAsetKode: akunAset,
      akunAkumulasiKode: akunAkum,
      akunBebanKode: akunBeban,
      penyusutanBulanIni: bebanBln,
    });
  };

  const handleHargaChange = (val: number) => {
    const tarif = formData.tarifPenyusutanPersen || 25;
    const residu = formData.nilaiResidu || 0;
    const bebanBln = Math.round(((val - residu) * (tarif / 100)) / 12);
    const akumAwal = formData.akumulasiAwal || 0;
    const akumAkhir = akumAwal + bebanBln;
    const nilaiBuku = Math.max(0, val - akumAkhir);

    setFormData({
      ...formData,
      hargaPerolehan: val,
      penyusutanBulanIni: bebanBln,
      akumulasiAkhir: akumAkhir,
      nilaiBuku,
    });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.kodeAset || !formData.namaAset || !formData.hargaPerolehan) {
      alert('Mohon isi kode aset, nama aset, dan harga perolehan.');
      return;
    }

    const perolehan = Number(formData.hargaPerolehan) || 0;
    const akumAwal = Number(formData.akumulasiAwal) || 0;
    const bebanBln = Number(formData.penyusutanBulanIni) || 0;
    const akumAkhir = akumAwal + bebanBln;
    const nilaiBuku = Math.max(0, perolehan - akumAkhir);

    const newAset: AsetTetap = {
      id: editingAset ? editingAset.id : `ast-${Date.now()}`,
      kodeAset: formData.kodeAset!,
      namaAset: formData.namaAset!,
      kelompok: formData.kelompok as any,
      tglPerolehan: formData.tglPerolehan || '2025-01-01',
      hargaPerolehan: perolehan,
      masaManfaatTahun: Number(formData.masaManfaatTahun) || 4,
      tarifPenyusutanPersen: Number(formData.tarifPenyusutanPersen) || 25,
      metodePenyusutan: formData.metodePenyusutan as any || 'Garis Lurus (Straight Line)',
      nilaiResidu: Number(formData.nilaiResidu) || 0,
      akumulasiAwal: akumAwal,
      penyusutanBulanIni: bebanBln,
      akumulasiAkhir: akumAkhir,
      nilaiBuku: nilaiBuku,
      akunAsetKode: formData.akunAsetKode || '1-2010',
      akunAkumulasiKode: formData.akunAkumulasiKode || '1-2020',
      akunBebanKode: formData.akunBebanKode || '6-1070',
      lokasi: formData.lokasi || '',
      keterangan: formData.keterangan || '',
    };

    onSaveAset(newAset);
    setIsModalOpen(false);
  };

  const handleExportExcel = () => {
    const headers = [
      'Kode Aset',
      'Nama Aset Tetap',
      'Kelompok Fiskal',
      'Tgl Perolehan',
      'Masa (Thn)',
      'Tarif (%)',
      'Metode',
      'Harga Perolehan (IDR)',
      'Akum. Awal (IDR)',
      'Beban Bln Ini (IDR)',
      'Akum. Akhir (IDR)',
      'Nilai Buku (IDR)',
      'Akun Aset',
      'Akun Akumulasi',
      'Akun Beban AJP',
      'Lokasi',
    ];

    const rows = filteredAset.map((a) => [
      a.kodeAset,
      a.namaAset,
      a.kelompok,
      a.tglPerolehan,
      a.masaManfaatTahun,
      a.tarifPenyusutanPersen,
      a.metodePenyusutan,
      a.hargaPerolehan,
      a.akumulasiAwal,
      a.penyusutanBulanIni,
      a.akumulasiAkhir,
      a.nilaiBuku,
      a.akunAsetKode,
      a.akunAkumulasiKode,
      a.akunBebanKode,
      a.lokasi || '-',
    ]);

    // Append total row
    rows.push([
      'TOTAL',
      '',
      '',
      '',
      '',
      '',
      '',
      totalPerolehan,
      totalAkumAwal,
      totalBebanBln,
      totalAkumAkhir,
      totalNilaiBuku,
      '',
      '',
      '',
      '',
    ]);

    ExcelService.exportToStyledExcel(
      'Rincian_Penyusutan_Aset_Tetap_PT_Tio_Mandiri_Jaya',
      'TABEL RINCIAN ASET TETAP & JADWAL PENYUSUTAN',
      headers,
      rows
    );
  };

  return (
    <div className="space-y-6">
      {/* Top Header Card */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-xs print:hidden">
        <div>
          <div className="flex items-center gap-2">
            <span className="p-2 rounded-lg bg-indigo-100 text-indigo-700">
              <Calculator className="h-5 w-5" />
            </span>
            <div>
              <h1 className="text-xl font-bold text-slate-900 tracking-tight">
                Rincian Aset Tetap & Jadwal Penyusutan
              </h1>
              <p className="text-xs text-slate-500">
                Perhitungan Depresiasi Aset Tetap Standar SAK EMKM / PSAK 16 dan Ketentuan Fiskal Perpajakan UU HPP
              </p>
            </div>
          </div>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          {canEdit && (
            <button
              onClick={handleOpenAdd}
              className="flex items-center gap-1.5 rounded-lg bg-blue-700 hover:bg-blue-800 text-white px-3 py-1.5 text-xs font-semibold shadow-xs transition-colors cursor-pointer"
            >
              <Plus className="h-3.5 w-3.5" />
              Tambah Aset Baru
            </button>
          )}

          <button
            onClick={handleExportExcel}
            className="flex items-center gap-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white px-3 py-1.5 text-xs font-semibold shadow-xs transition-colors cursor-pointer"
          >
            <Download className="h-3.5 w-3.5" />
            Ekspor Excel (.xls)
          </button>

          <button
            onClick={() => window.print()}
            className="flex items-center gap-1.5 rounded-lg bg-slate-800 hover:bg-slate-900 text-white px-3 py-1.5 text-xs font-semibold shadow-xs transition-colors cursor-pointer"
          >
            <Printer className="h-3.5 w-3.5" />
            Cetak Jadwal
          </button>
        </div>
      </div>

      {/* Summary KPI Cards */}
      <div className="grid grid-cols-2 md:grid-cols-5 gap-3 print:hidden">
        <div className="rounded-xl border border-blue-200 bg-blue-50/60 p-3.5">
          <div className="text-[11px] font-semibold text-blue-800 uppercase tracking-wider">
            Total Harga Perolehan
          </div>
          <div className="text-base font-bold text-blue-950 font-mono mt-1">
            Rp {totalPerolehan.toLocaleString('id-ID')}
          </div>
          <div className="text-[10px] text-blue-600 mt-0.5">Historical Acquisition Cost</div>
        </div>

        <div className="rounded-xl border border-slate-200 bg-slate-50 p-3.5">
          <div className="text-[11px] font-semibold text-slate-600 uppercase tracking-wider">
            Akumulasi Penyusutan Awal
          </div>
          <div className="text-base font-bold text-slate-900 font-mono mt-1">
            Rp {totalAkumAwal.toLocaleString('id-ID')}
          </div>
          <div className="text-[10px] text-slate-500 mt-0.5">Per Awal Tahun Buku</div>
        </div>

        <div className="rounded-xl border border-amber-200 bg-amber-50/60 p-3.5">
          <div className="text-[11px] font-semibold text-amber-800 uppercase tracking-wider">
            Beban Penyusutan Bln Ini
          </div>
          <div className="text-base font-bold text-amber-950 font-mono mt-1">
            Rp {totalBebanBln.toLocaleString('id-ID')}
          </div>
          <div className="text-[10px] text-amber-700 mt-0.5 font-semibold">Tercatat di Jurnal AJP</div>
        </div>

        <div className="rounded-xl border border-rose-200 bg-rose-50/60 p-3.5">
          <div className="text-[11px] font-semibold text-rose-800 uppercase tracking-wider">
            Total Akumulasi Akhir
          </div>
          <div className="text-base font-bold text-rose-950 font-mono mt-1">
            (Rp {totalAkumAkhir.toLocaleString('id-ID')})
          </div>
          <div className="text-[10px] text-rose-700 mt-0.5">Contra Asset di Neraca</div>
        </div>

        <div className="col-span-2 md:col-span-1 rounded-xl border border-emerald-300 bg-emerald-50 p-3.5 shadow-xs">
          <div className="text-[11px] font-semibold text-emerald-800 uppercase tracking-wider flex items-center justify-between">
            <span>Nilai Buku Bersih</span>
            <ShieldCheck className="h-4 w-4 text-emerald-600" />
          </div>
          <div className="text-base font-extrabold text-emerald-950 font-mono mt-1">
            Rp {totalNilaiBuku.toLocaleString('id-ID')}
          </div>
          <div className="text-[10px] text-emerald-700 mt-0.5 font-semibold">Net Carrying Amount</div>
        </div>
      </div>

      {/* Explanatory Callout Banner */}
      <div className="rounded-xl border border-indigo-200 bg-gradient-to-r from-indigo-50/80 to-blue-50/80 p-4 text-xs text-indigo-950 space-y-2 print:hidden">
        <div className="flex items-center gap-2 font-bold text-indigo-900">
          <Info className="h-4 w-4 text-indigo-600 shrink-0" />
          <span>Aturan Standar Akuntansi & Perpajakan Terkait Penyusutan Aset Tetap:</span>
        </div>
        <p className="text-slate-700 pl-6 leading-relaxed">
          Berdasarkan <strong>SAK EMKM / PSAK 16</strong> dan <strong>UU Perpajakan No. 7 Tahun 2021 (UU HPP)</strong>, aset tetap disusutkan menggunakan <em>Metode Garis Lurus (Straight Line Method)</em> selama masa manfaat fiskal:
          <strong> Kelompok 1 (4 tahun / tarif 25% per tahun)</strong> untuk komputer, printer, server dan perangkat IT; serta 
          <strong> Kelompok 2 (8 tahun / tarif 12.5% per tahun)</strong> untuk kendaraan bermotor operasional. Nilai akumulasi penyusutan disajikan sebagai pengurang langsung nilai perolehan aset pada <strong>Neraca Skontro</strong> dan <strong>Balance Sheet</strong>.
        </p>
      </div>

      {/* Filter and Table Card */}
      <div className="rounded-xl border border-slate-200 bg-white shadow-xs overflow-hidden">
        {/* Printable Header */}
        <PrintHeader
          profile={profile}
          title="DAFTAR ASET TETAP & JADWAL PENYUSUTAN"
          subtitle="Rincian Harga Perolehan, Akumulasi Penyusutan, dan Nilai Buku Bersih"
          periode={`Periode ${activePeriode.namaPeriode}`}
        />

        {/* Filter controls */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-200 bg-slate-50/60 p-4 print:hidden">
          <div className="flex items-center gap-2">
            <span className="text-xs font-semibold text-slate-700">Filter Kelompok Aset:</span>
            <div className="flex flex-wrap gap-1">
              {(['SEMUA', 'Kelompok 1', 'Kelompok 2'] as const).map((k) => (
                <button
                  key={k}
                  onClick={() => setFilterKelompok(k)}
                  className={`px-3 py-1 rounded text-xs font-semibold cursor-pointer transition-colors ${
                    filterKelompok === k
                      ? 'bg-blue-600 text-white shadow-2xs'
                      : 'bg-white border border-slate-200 text-slate-700 hover:bg-slate-100'
                  }`}
                >
                  {k}
                </button>
              ))}
            </div>
          </div>

          <div className="text-xs text-slate-500 font-medium">
            Menampilkan <strong>{filteredAset.length}</strong> unit aset terdaftar
          </div>
        </div>

        {/* Detailed Depreciation Schedule Table */}
        <div className="overflow-x-auto">
          <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-3 w-28">Kode Aset</th>
                <th className="py-2.5 px-3 min-w-[200px]">Nama Aset & Spesifikasi</th>
                <th className="py-2.5 px-3">Kelompok Fiskal</th>
                <th className="py-2.5 px-3 text-center">Tgl Akuisisi</th>
                <th className="py-2.5 px-2 text-center">Masa</th>
                <th className="py-2.5 px-2 text-center">Tarif</th>
                <th className="py-2.5 px-3 text-right">Harga Perolehan</th>
                <th className="py-2.5 px-3 text-right">Akum. Awal</th>
                <th className="py-2.5 px-3 text-right text-amber-900 bg-amber-50/60">Beban Bln Ini</th>
                <th className="py-2.5 px-3 text-right text-red-900 bg-red-50/60">Akum. Akhir</th>
                <th className="py-2.5 px-3 text-right text-emerald-900 bg-emerald-50/60 font-bold">
                  Nilai Buku Bersih
                </th>
                <th className="py-2.5 px-3 print:hidden text-center w-20">Aksi</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200">
              {filteredAset.length === 0 ? (
                <tr>
                  <td colSpan={12} className="py-8 text-center text-slate-400">
                    Tidak ada data aset pada kategori ini.
                  </td>
                </tr>
              ) : (
                filteredAset.map((ast) => (
                  <tr key={ast.id} className="hover:bg-slate-50 transition-colors">
                    <td className="py-2.5 px-3 font-mono font-bold text-blue-900">
                      {ast.kodeAset}
                    </td>
                    <td className="py-2.5 px-3">
                      <div className="font-semibold text-slate-900">{ast.namaAset}</div>
                      <div className="text-[11px] text-slate-500">
                        {ast.lokasi && <span>Lokasi: {ast.lokasi} | </span>}
                        <span>Akun: {ast.akunAsetKode} / {ast.akunAkumulasiKode}</span>
                      </div>
                    </td>
                    <td className="py-2.5 px-3 text-slate-600">
                      <span className="rounded bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-700">
                        {ast.kelompok.split('(')[0].trim()}
                      </span>
                    </td>
                    <td className="py-2.5 px-3 text-center font-mono text-slate-600">
                      {ast.tglPerolehan}
                    </td>
                    <td className="py-2.5 px-2 text-center font-medium">
                      {ast.masaManfaatTahun} Th
                    </td>
                    <td className="py-2.5 px-2 text-center font-mono font-semibold text-slate-700">
                      {ast.tarifPenyusutanPersen}%
                    </td>
                    <td className="py-2.5 px-3 text-right font-mono font-medium text-slate-900">
                      Rp {ast.hargaPerolehan.toLocaleString('id-ID')}
                    </td>
                    <td className="py-2.5 px-3 text-right font-mono text-slate-600">
                      Rp {ast.akumulasiAwal.toLocaleString('id-ID')}
                    </td>
                    <td className="py-2.5 px-3 text-right font-mono font-semibold text-amber-900 bg-amber-50/40">
                      Rp {ast.penyusutanBulanIni.toLocaleString('id-ID')}
                    </td>
                    <td className="py-2.5 px-3 text-right font-mono font-semibold text-red-700 bg-red-50/40">
                      (Rp {ast.akumulasiAkhir.toLocaleString('id-ID')})
                    </td>
                    <td className="py-2.5 px-3 text-right font-mono font-bold text-emerald-950 bg-emerald-50/40">
                      Rp {ast.nilaiBuku.toLocaleString('id-ID')}
                    </td>
                    <td className="py-2.5 px-3 print:hidden text-center">
                      {canEdit && (
                        <div className="flex items-center justify-center gap-1">
                          <button
                            onClick={() => handleOpenEdit(ast)}
                            title="Edit Data Aset"
                            className="p-1 rounded text-blue-600 hover:bg-blue-100 cursor-pointer"
                          >
                            <Edit2 className="h-3.5 w-3.5" />
                          </button>
                          <button
                            onClick={() => {
                              if (confirm(`Hapus aset "${ast.namaAset}"?`)) {
                                onDeleteAset(ast.id);
                              }
                            }}
                            title="Hapus Aset"
                            className="p-1 rounded text-red-600 hover:bg-red-100 cursor-pointer"
                          >
                            <Trash2 className="h-3.5 w-3.5" />
                          </button>
                        </div>
                      )}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
            {/* Grand Total Row */}
            <tfoot className="border-t-2 border-slate-900 bg-slate-900 text-white font-bold text-xs">
              <tr>
                <td colSpan={6} className="py-3 px-3 uppercase tracking-wider text-right">
                  TOTAL REKAPITULASI ASET TETAP & PENYUSUTAN:
                </td>
                <td className="py-3 px-3 text-right font-mono text-cyan-300">
                  Rp {totalPerolehan.toLocaleString('id-ID')}
                </td>
                <td className="py-3 px-3 text-right font-mono text-slate-300">
                  Rp {totalAkumAwal.toLocaleString('id-ID')}
                </td>
                <td className="py-3 px-3 text-right font-mono text-amber-300">
                  Rp {totalBebanBln.toLocaleString('id-ID')}
                </td>
                <td className="py-3 px-3 text-right font-mono text-rose-300">
                  (Rp {totalAkumAkhir.toLocaleString('id-ID')})
                </td>
                <td className="py-3 px-3 text-right font-mono text-emerald-300 text-sm">
                  Rp {totalNilaiBuku.toLocaleString('id-ID')}
                </td>
                <td className="print:hidden"></td>
              </tr>
            </tfoot>
          </table>
        </div>

        {/* Reconciliation Box with General Ledger Accounts */}
        <div className="p-4 border-t border-slate-200 bg-slate-50 space-y-2">
          <div className="font-bold text-xs text-slate-800 uppercase tracking-wider flex items-center gap-1.5">
            <CheckCircle2 className="h-4 w-4 text-emerald-600" />
            <span>Rekonsiliasi Otomatis ke Akun Buku Besar & Jurnal Penyesuaian (AJP)</span>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
            <div className="rounded-lg bg-white p-3 border border-slate-200">
              <div className="font-semibold text-slate-900 mb-1">1. Posisi Akun Peralatan Kantor & IT:</div>
              <div className="flex justify-between text-slate-600">
                <span>1-2010 Peralatan Kantor (Harga Perolehan)</span>
                <span className="font-mono font-medium">Rp 80.000.000</span>
              </div>
              <div className="flex justify-between text-red-600">
                <span>1-2020 Akumulasi Penyusutan Peralatan</span>
                <span className="font-mono font-medium">(Rp 17.200.000)</span>
              </div>
              <div className="flex justify-between font-bold text-slate-900 border-t border-slate-200 pt-1 mt-1">
                <span>Nilai Buku Bersih di Neraca</span>
                <span className="font-mono text-blue-900">Rp 62.800.000</span>
              </div>
              <div className="mt-1 text-[11px] text-amber-800 font-semibold">
                • Beban Penyusutan Bulanan (AJP 6-1070): Rp 1.200.000/bln
              </div>
            </div>

            <div className="rounded-lg bg-white p-3 border border-slate-200">
              <div className="font-semibold text-slate-900 mb-1">2. Posisi Akun Kendaraan Operasional:</div>
              <div className="flex justify-between text-slate-600">
                <span>1-2030 Kendaraan Operasional (Harga Perolehan)</span>
                <span className="font-mono font-medium">Rp 160.000.000</span>
              </div>
              <div className="flex justify-between text-red-600">
                <span>1-2040 Akumulasi Penyusutan Kendaraan</span>
                <span className="font-mono font-medium">(Rp 42.500.000)</span>
              </div>
              <div className="flex justify-between font-bold text-slate-900 border-t border-slate-200 pt-1 mt-1">
                <span>Nilai Buku Bersih di Neraca</span>
                <span className="font-mono text-blue-900">Rp 117.500.000</span>
              </div>
              <div className="mt-1 text-[11px] text-amber-800 font-semibold">
                • Beban Penyusutan Bulanan (AJP 6-1080): Rp 2.500.000/bln
              </div>
            </div>
          </div>
        </div>

        {/* Printable Signatures */}
        <PrintSignature profile={profile} />
      </div>

      {/* Add / Edit Asset Modal */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <div className="w-full max-w-xl rounded-xl bg-white shadow-2xl overflow-hidden animate-in fade-in">
            <div className="flex items-center justify-between border-b border-slate-200 bg-slate-900 p-4 text-white">
              <div className="flex items-center gap-2">
                <Calculator className="h-5 w-5 text-indigo-400" />
                <h3 className="font-bold text-sm">
                  {editingAset ? 'Edit Data Aset Tetap' : 'Tambah Aset Tetap Baru'}
                </h3>
              </div>
              <button
                onClick={() => setIsModalOpen(false)}
                className="text-slate-400 hover:text-white cursor-pointer"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            <form onSubmit={handleSubmit} className="p-6 space-y-4 text-xs">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Kode Aset *</label>
                  <input
                    type="text"
                    required
                    value={formData.kodeAset}
                    onChange={(e) => setFormData({ ...formData, kodeAset: e.target.value })}
                    className="w-full rounded border border-slate-300 p-2 font-mono"
                    placeholder="Contoh: AST-IT-003"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Tanggal Perolehan *</label>
                  <input
                    type="date"
                    required
                    value={formData.tglPerolehan}
                    onChange={(e) => setFormData({ ...formData, tglPerolehan: e.target.value })}
                    className="w-full rounded border border-slate-300 p-2"
                  />
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Nama Aset & Spesifikasi *</label>
                <input
                  type="text"
                  required
                  value={formData.namaAset}
                  onChange={(e) => setFormData({ ...formData, namaAset: e.target.value })}
                  className="w-full rounded border border-slate-300 p-2"
                  placeholder="Contoh: Laptop Apple MacBook Pro M3 Staf Desain"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Kelompok Fiskal UU Pajak</label>
                  <select
                    value={formData.kelompok}
                    onChange={(e) => handleKelompokChange(e.target.value)}
                    className="w-full rounded border border-slate-300 p-2"
                  >
                    <option value="Kelompok 1 (Bukan Bangunan - 4 Tahun)">
                      Kelompok 1 (4 Tahun / 25%) - IT & Peralatan
                    </option>
                    <option value="Kelompok 2 (Bukan Bangunan - 8 Tahun)">
                      Kelompok 2 (8 Tahun / 12.5%) - Kendaraan
                    </option>
                    <option value="Kelompok 3 (Bukan Bangunan - 16 Tahun)">
                      Kelompok 3 (16 Tahun / 6.25%)
                    </option>
                    <option value="Bangunan Permanen (20 Tahun)">
                      Bangunan Permanen (20 Tahun / 5%)
                    </option>
                  </select>
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Metode Penyusutan</label>
                  <select
                    value={formData.metodePenyusutan}
                    onChange={(e) => setFormData({ ...formData, metodePenyusutan: e.target.value as any })}
                    className="w-full rounded border border-slate-300 p-2"
                  >
                    <option value="Garis Lurus (Straight Line)">Garis Lurus (Straight Line)</option>
                    <option value="Saldo Menurun (Declining Balance)">Saldo Menurun (Declining Balance)</option>
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-3 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Harga Perolehan (Rp) *</label>
                  <input
                    type="number"
                    min="0"
                    required
                    value={formData.hargaPerolehan}
                    onChange={(e) => handleHargaChange(Number(e.target.value))}
                    className="w-full rounded border border-slate-300 p-2 font-mono font-bold"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Akumulasi Awal (Rp)</label>
                  <input
                    type="number"
                    min="0"
                    value={formData.akumulasiAwal}
                    onChange={(e) => {
                      const awal = Number(e.target.value);
                      const beban = formData.penyusutanBulanIni || 0;
                      const harga = formData.hargaPerolehan || 0;
                      setFormData({
                        ...formData,
                        akumulasiAwal: awal,
                        akumulasiAkhir: awal + beban,
                        nilaiBuku: Math.max(0, harga - (awal + beban)),
                      });
                    }}
                    className="w-full rounded border border-slate-300 p-2 font-mono"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Penyusutan Bln Ini (Rp)</label>
                  <input
                    type="number"
                    min="0"
                    value={formData.penyusutanBulanIni}
                    onChange={(e) => {
                      const beban = Number(e.target.value);
                      const awal = formData.akumulasiAwal || 0;
                      const harga = formData.hargaPerolehan || 0;
                      setFormData({
                        ...formData,
                        penyusutanBulanIni: beban,
                        akumulasiAkhir: awal + beban,
                        nilaiBuku: Math.max(0, harga - (awal + beban)),
                      });
                    }}
                    className="w-full rounded border border-slate-300 p-2 font-mono text-amber-900 font-bold"
                  />
                </div>
              </div>

              <div className="grid grid-cols-3 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Kode Akun Aset</label>
                  <input
                    type="text"
                    value={formData.akunAsetKode}
                    onChange={(e) => setFormData({ ...formData, akunAsetKode: e.target.value })}
                    className="w-full rounded border border-slate-300 p-2 font-mono"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Kode Akun Akumulasi</label>
                  <input
                    type="text"
                    value={formData.akunAkumulasiKode}
                    onChange={(e) => setFormData({ ...formData, akunAkumulasiKode: e.target.value })}
                    className="w-full rounded border border-slate-300 p-2 font-mono"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Kode Akun Beban AJP</label>
                  <input
                    type="text"
                    value={formData.akunBebanKode}
                    onChange={(e) => setFormData({ ...formData, akunBebanKode: e.target.value })}
                    className="w-full rounded border border-slate-300 p-2 font-mono"
                  />
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Lokasi Aset Fisik</label>
                <input
                  type="text"
                  value={formData.lokasi}
                  onChange={(e) => setFormData({ ...formData, lokasi: e.target.value })}
                  className="w-full rounded border border-slate-300 p-2"
                  placeholder="Contoh: Ruang Rapat Direksi Lt. 2"
                />
              </div>

              <div className="flex justify-end gap-2 pt-4 border-t border-slate-200">
                <button
                  type="button"
                  onClick={() => setIsModalOpen(false)}
                  className="rounded px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 cursor-pointer"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="rounded bg-blue-700 px-4 py-2 text-xs font-semibold text-white hover:bg-blue-800 cursor-pointer"
                >
                  Simpan Aset & Jadwal
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};