import React, { useState, useEffect } from 'react';
import { Akun, Jurnal, ProfilPerusahaan, PeriodeAkuntansi } from '../../types/accounting';
import { AccountingEngine } from '../../services/accountingEngine';
import { ExcelService } from '../../services/excelService';
import { PrintHeader, PrintSignature } from '../common/PrintHeader';
import {
  Download,
  Printer,
  TrendingUp,
  Scale,
  PieChart,
  ArrowRightLeft,
  FileSpreadsheet,
  CheckCircle2,
  Calendar,
  ShieldCheck,
  Info,
  Layers,
  Sparkles,
  Columns,
  ListOrdered,
  BookOpen,
  Activity,
  QrCode,
  FileCheck,
} from 'lucide-react';
import { AnalisisRasioView } from './AnalisisRasioView';
import { AsetTetap } from '../../types/accounting';

export type ReportTabType =
  | 'labarugi'
  | 'ekuitas'
  | 'balancesheet'
  | 'skontro'
  | 'pemetaan'
  | 'aruskas'
  | 'summary'
  | 'rasio';

interface LaporanKeuanganViewProps {
  akuns: Akun[];
  journals: Jurnal[];
  profile: ProfilPerusahaan;
  periodes: PeriodeAkuntansi[];
  activePeriode: PeriodeAkuntansi;
  asetTetap?: AsetTetap[];
  initialTab?: ReportTabType;
  onTabChange?: (tab: ReportTabType) => void;
  onNavigate?: (tab: string) => void;
  onOpenSignatoriesModal?: () => void;
}

export const LaporanKeuanganView: React.FC<LaporanKeuanganViewProps> = ({
  akuns,
  journals,
  profile,
  periodes,
  activePeriode,
  initialTab = 'labarugi',
  onTabChange,
  onOpenSignatoriesModal,
}) => {
  const [activeTab, setActiveTab] = useState<ReportTabType>(initialTab);
  const [selectedBulan, setSelectedBulan] = useState<string>(
    activePeriode?.namaPeriode || 'Januari 2026'
  );
  const [mappingFilter, setMappingFilter] = useState<'SEMUA' | 'Laba Rugi' | 'Neraca'>('SEMUA');

  useEffect(() => {
    if (activePeriode?.namaPeriode) {
      setSelectedBulan(activePeriode.namaPeriode);
    }
  }, [activePeriode?.namaPeriode]);

  useEffect(() => {
    if (initialTab && initialTab !== activeTab) {
      setActiveTab(initialTab);
    }
  }, [initialTab]);

  const handleSelectTab = (tab: ReportTabType) => {
    setActiveTab(tab);
    if (onTabChange) {
      onTabChange(tab);
    }
  };

  // Konsep Saldo Berjalan (Carrying Balance) untuk periode bulanan
  const { carryingAkuns, periodJournals } = AccountingEngine.getCarryingAkunsForPeriod(
    selectedBulan,
    akuns,
    journals,
    periodes || [],
    profile
  );

  // Financial calculations from accounting engine using carrying balances & period journals
  const lrData = AccountingEngine.calculateLabaRugi(carryingAkuns, periodJournals, profile);
  const capitalData = AccountingEngine.calculatePerubahanModal(carryingAkuns, periodJournals, profile);
  const bsData = AccountingEngine.calculateBalanceSheet(carryingAkuns, periodJournals, profile);
  const neracaData = AccountingEngine.calculateNeracaSkontro(carryingAkuns, periodJournals, profile);
  const arusKasData = AccountingEngine.calculateArusKas(carryingAkuns, periodJournals, profile);
  const totalAktivitasArusKas =
    arusKasData.arusKasBersihOperasi +
    arusKasData.arusKasBersihInvestasi +
    arusKasData.arusKasBersihPendanaan;
  const selisihRekonsiliasiKas = arusKasData.kenaikanNetoKas - totalAktivitasArusKas;
  const kasReconciled = Math.abs(selisihRekonsiliasiKas) < 0.01;

  // Margins
  const grossMargin = lrData.totalPendapatanUsaha > 0 ? (lrData.labaKotorGOP / lrData.totalPendapatanUsaha) * 100 : 0;
  const netMargin = lrData.totalPendapatan > 0 ? (lrData.labaBersihSetelahPajak / lrData.totalPendapatan) * 100 : 0;

  // Tab Titles
  const tabTitles: Record<ReportTabType, string> = {
    labarugi: 'Laporan Laba Rugi & Pajak (Bagian A & B)',
    ekuitas: 'Perubahan Modal / Capital Statement (Bagian C)',
    balancesheet: 'Laporan Posisi Keuangan (Balance Sheet) - Format Stafel Vertikal SAK EMKM (Bagian D)',
    skontro: 'Neraca Format Skontro 2-Kolom (Kiri Aktiva | Kanan Pasiva)',
    pemetaan: 'Matriks Pemetaan Akun (Edukasi: Laba Rugi vs Neraca)',
    aruskas: 'Laporan Arus Kas (Aktivitas Operasi, Investasi, Pendanaan)',
    summary: 'Executive Report Summary & Analisis GOP',
    rasio: 'Laporan Analisis Rasio Keuangan & Diagnosis Solvabilitas (Likuiditas & Solvabilitas)',
  };

  const handleExportCurrent = () => {
    if (activeTab === 'labarugi') {
      const headers = ['Komponen Laba Rugi', 'Kode Akun', 'Nilai (IDR)'];
      const rows: (string | number)[][] = [
        ['1. PENDAPATAN', '', ''],
        ...lrData.pendapatanUsaha.map((p) => [p.akun.namaAkun, p.akun.kodeAkun, p.jumlah]),
        ['Subtotal Pendapatan Usaha', '', lrData.totalPendapatanUsaha],
        ...lrData.pendapatanLain.map((p) => [p.akun.namaAkun, p.akun.kodeAkun, p.jumlah]),
        ['TOTAL PENDAPATAN', '', lrData.totalPendapatan],
        ['2. BEBAN POKOK PENDAPATAN (HPP)', '', ''],
        ...lrData.bebanPokokPenjualan.map((b) => [b.akun.namaAkun, b.akun.kodeAkun, b.jumlah]),
        ['Total HPP', '', lrData.totalHPP],
        ['GROSS OPERATING PROFIT (GOP) / LABA KOTOR', '', lrData.labaKotorGOP],
        ['3. BEBAN OPERASIONAL & UMUM', '', ''],
        ...lrData.bebanOperasional.map((b) => [b.akun.namaAkun, b.akun.kodeAkun, b.jumlah]),
        ...lrData.bebanLain.map((b) => [b.akun.namaAkun, b.akun.kodeAkun, b.jumlah]),
        ['Total Biaya Operasional', '', lrData.totalBiaya],
        ['LABA SEBELUM PAJAK (EBT)', '', lrData.labaSebelumPajak],
        [`Beban Pajak (${lrData.tarifPajakPersen}%)`, '', lrData.bebanPajak],
        ['LABA BERSIH SETELAH PAJAK (EAT)', '', lrData.labaBersihSetelahPajak],
      ];
      ExcelService.exportToStyledExcel('Laba_Rugi_PT_Tio_Mandiri_Jaya', tabTitles.labarugi, headers, rows);
    } else if (activeTab === 'balancesheet') {
      const headers = ['Klasifikasi Posisi Keuangan (Stafel)', 'Kode Akun', 'Jumlah (IDR)'];
      const rows: (string | number)[][] = [
        ['I. ASET (ASSETS)', '', ''],
        ['A. Aset Lancar', '', ''],
        ...bsData.asetLancar.map((a) => [a.akun.namaAkun, a.akun.kodeAkun, a.jumlah]),
        ['Total Aset Lancar', '', bsData.totalAsetLancar],
        ['B. Aset Tetap', '', ''],
        ...bsData.asetTetap.map((a) => [a.akun.namaAkun, a.akun.kodeAkun, a.jumlah]),
        ...bsData.akumulasiPenyusutan.map((a) => [`(-) ${a.akun.namaAkun}`, a.akun.kodeAkun, -a.jumlah]),
        ['Total Aset Tetap Neto', '', bsData.totalAsetTetapNeto],
        ['TOTAL ASET', '', bsData.totalAset],
        ['II. LIABILITAS (LIABILITIES)', '', ''],
        ['A. Liabilitas Jangka Pendek', '', ''],
        ...bsData.liabilitasJangkaPendek.map((l) => [l.akun.namaAkun, l.akun.kodeAkun, l.jumlah]),
        ['Total Liabilitas Jangka Pendek', '', bsData.totalLiabilitasJangkaPendek],
        ['B. Liabilitas Jangka Panjang', '', ''],
        ...bsData.liabilitasJangkaPanjang.map((l) => [l.akun.namaAkun, l.akun.kodeAkun, l.jumlah]),
        ['Total Liabilitas Jangka Panjang', '', bsData.totalLiabilitasJangkaPanjang],
        ['TOTAL LIABILITAS', '', bsData.totalLiabilitas],
        ['III. EKUITAS (EQUITY)', '', ''],
        ['Modal Disetor', '3-1010', bsData.modalDisetor],
        ['Laba Ditahan Awal', '3-1020', bsData.labaDitahanAwal],
        ['Laba Bersih Berjalan (dari Laba Rugi)', '-', bsData.labaBersihBerjalan],
        ['TOTAL EKUITAS', '', bsData.totalEkuitas],
        ['TOTAL LIABILITAS & EKUITAS', '', bsData.totalLiabilitas + bsData.totalEkuitas],
      ];
      ExcelService.exportToStyledExcel('Balance_Sheet_Stafel_PT_Tio_Mandiri_Jaya', tabTitles.balancesheet, headers, rows);
    } else if (activeTab === 'skontro') {
      const headers = ['AKTIVA', 'Jumlah (IDR)', 'PASIVA', 'Jumlah (IDR)'];
      const rows: (string | number)[][] = [
        ['AKTIVA LANCAR', '', 'KEWAJIBAN LANCAR', ''],
        ...neracaData.aktivaLancar.map((a, i) => [
          a.akun.namaAkun,
          a.jumlah,
          neracaData.kewajibanLancar[i]?.akun.namaAkun || '',
          neracaData.kewajibanLancar[i]?.jumlah || '',
        ]),
        ['TOTAL AKTIVA', neracaData.totalAktiva, 'TOTAL PASIVA (KEWAJIBAN & EKUITAS)', neracaData.totalPasiva],
      ];
      ExcelService.exportToStyledExcel('Neraca_Skontro_PT_Tio_Mandiri_Jaya', tabTitles.skontro, headers, rows);
    } else if (activeTab === 'ekuitas') {
      const headers = ['Komponen Ekuitas', 'Nilai (IDR)'];
      const rows: (string | number)[][] = [
        ['Modal Disetor Awal', capitalData.modalDisetorAwal],
        ['Laba Ditahan Awal', capitalData.labaDitahanAwal],
        ['Total Pendapatan Berjalan', capitalData.pendapatanTotal],
        ['Total Biaya & Pajak Berjalan', -capitalData.biayaTotal],
        ['Laba Bersih Tahun Berjalan', capitalData.labaBersihBerjalan],
        ['Prive / Dividen', -capitalData.priveDividen],
        ['TOTAL SALDO EKUITAS AKHIR', capitalData.totalEkuitasAkhir],
      ];
      ExcelService.exportToStyledExcel('Capital_Statement_PT_Tio_Mandiri_Jaya', tabTitles.ekuitas, headers, rows);
    } else if (activeTab === 'aruskas') {
      const headers = ['Aktivitas Arus Kas', 'Jumlah (IDR)'];
      const rows: (string | number)[][] = [
        ['I. ARUS KAS AKTIVITAS OPERASI', ''],
        ['Penerimaan dari Pelanggan', arusKasData.penerimaanPelanggan],
        ['Pembayaran ke Pemasok & HPP', -arusKasData.pembayaranPemasokHPP],
        ['Pembayaran Beban Operasional', -arusKasData.pembayaranBebanOperasional],
        ['Pembayaran Pajak', -arusKasData.pembayaranPajak],
        ['Arus Kas Bersih Operasi', arusKasData.arusKasBersihOperasi],
        ['II. ARUS KAS AKTIVITAS INVESTASI', ''],
        ['Arus Kas Bersih Investasi', arusKasData.arusKasBersihInvestasi],
        ['III. ARUS KAS AKTIVITAS PENDANAAN', ''],
        ['Arus Kas Bersih Pendanaan', arusKasData.arusKasBersihPendanaan],
        ['KENAIKAN (PENURUNAN) NETO KAS', arusKasData.kenaikanNetoKas],
        ['KAS & SETARA KAS AWAL', arusKasData.kasAwalPeriode],
        ['KAS & SETARA KAS AKHIR', arusKasData.kasAkhirPeriode],
      ];
      ExcelService.exportToStyledExcel('Arus_Kas_PT_Tio_Mandiri_Jaya', tabTitles.aruskas, headers, rows);
    } else if (activeTab === 'pemetaan') {
      const headers = ['Kode Akun', 'Nama Akun', 'Kategori', 'Pos Saldo', 'Pos Laporan', 'Klasifikasi Akun', 'Muara Saldo'];
      const rows = akuns.map((a) => [
        a.kodeAkun,
        a.namaAkun,
        a.kategori,
        a.posSaldo,
        a.posLaporan,
        a.posLaporan === 'Neraca' ? 'Akun Riil (Permanen)' : 'Akun Nominal (Sementara)',
        a.posLaporan === 'Neraca' ? 'Dibawa terus ke periode berikutnya' : 'Ditutup ke Laba Tahun Berjalan di Ekuitas Neraca',
      ]);
      ExcelService.exportToStyledExcel('Pemetaan_Akun_LabaRugi_Neraca', tabTitles.pemetaan, headers, rows);
    }
  };

  const handlePrint = () => {
    window.print();
  };

  const filteredMappingAkuns = akuns.filter((a) => {
    if (mappingFilter === 'SEMUA') return true;
    return a.posLaporan === mappingFilter;
  });

  return (
    <div className="space-y-6">
      {/* Top Action Bar & Tabs */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-4 rounded-xl border border-slate-200 shadow-xs print:hidden">
        <div>
          <div className="flex items-center gap-2">
            <span className="inline-flex items-center justify-center p-1.5 bg-blue-100 text-blue-700 rounded-lg">
              <FileSpreadsheet className="h-5 w-5" />
            </span>
            <h1 className="text-xl font-bold text-slate-900 tracking-tight">
              Laporan Keuangan PT Tio Mandiri Jaya
            </h1>
          </div>
          <p className="text-xs text-slate-500 mt-1">
            Standar Akuntansi Keuangan: Laba Rugi, Pajak, Capital Statement, Balance Sheet Stafel, Neraca Skontro, dan Arus Kas.
          </p>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          {/* Period Filter */}
          <div className="flex items-center gap-1.5 bg-slate-100 px-3 py-1.5 rounded-lg text-xs border border-slate-200">
            <Calendar className="h-3.5 w-3.5 text-slate-500" />
            <span className="font-semibold text-slate-700">Filter Periode:</span>
            <select
              value={selectedBulan}
              onChange={(e) => setSelectedBulan(e.target.value)}
              className="bg-transparent font-medium text-blue-900 outline-none cursor-pointer"
            >
              <option value="SEMUA">Semua Transaksi Periode</option>
              {periodes.map((p) => (
                <option key={p.id} value={p.namaPeriode}>
                  {p.namaPeriode}
                </option>
              ))}
            </select>
          </div>

          {/* Export Excel */}
          <button
            onClick={handleExportCurrent}
            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>

          {/* Print PDF */}
          <button
            onClick={handlePrint}
            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"
          >
            <Printer className="h-3.5 w-3.5" />
            Cetak / PDF
          </button>

          {/* Atur Penandatangan Dinamis & QR Code */}
          {onOpenSignatoriesModal && (
            <button
              onClick={onOpenSignatoriesModal}
              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"
              title="Konfigurasi Pejabat Penandatangan Dinamis & QR Code Resmi Dokumen"
            >
              <FileCheck className="h-3.5 w-3.5 text-blue-400" />
              Tanda Tangan &amp; QR
            </button>
          )}
        </div>
      </div>

      {/* Elegant Nav Pills - Highlighting the clear distinction */}
      <div className="flex items-center gap-1 overflow-x-auto border-b border-slate-200 bg-white px-3 pt-2 rounded-t-xl print:hidden">
        <button
          onClick={() => handleSelectTab('labarugi')}
          className={`flex items-center gap-2 border-b-2 px-4 py-3 text-xs font-bold transition-colors whitespace-nowrap cursor-pointer ${
            activeTab === 'labarugi'
              ? 'border-blue-600 text-blue-700 bg-blue-50/50'
              : 'border-transparent text-slate-600 hover:text-slate-900'
          }`}
        >
          <TrendingUp className="h-4 w-4 text-emerald-600" />
          <span>A. Laba Rugi & B. Pajak</span>
        </button>

        <button
          onClick={() => handleSelectTab('ekuitas')}
          className={`flex items-center gap-2 border-b-2 px-4 py-3 text-xs font-bold transition-colors whitespace-nowrap cursor-pointer ${
            activeTab === 'ekuitas'
              ? 'border-blue-600 text-blue-700 bg-blue-50/50'
              : 'border-transparent text-slate-600 hover:text-slate-900'
          }`}
        >
          <ArrowRightLeft className="h-4 w-4 text-amber-600" />
          <span>C. Capital Statement</span>
        </button>

        {/* Distinct Button: Balance Sheet (Stafel) */}
        <button
          onClick={() => handleSelectTab('balancesheet')}
          className={`flex items-center gap-2 border-b-2 px-4 py-3 text-xs font-bold transition-colors whitespace-nowrap cursor-pointer ${
            activeTab === 'balancesheet'
              ? 'border-indigo-600 text-indigo-700 bg-indigo-50/60'
              : 'border-transparent text-slate-600 hover:text-slate-900'
          }`}
        >
          <ListOrdered className="h-4 w-4 text-indigo-600" />
          <span className="flex items-center gap-1">
            D. Balance Sheet
            <span className="rounded bg-indigo-100 text-indigo-800 px-1.5 py-0.2 text-[10px] font-semibold">
              Stafel
            </span>
          </span>
        </button>

        {/* Distinct Button: Neraca (Skontro) */}
        <button
          onClick={() => handleSelectTab('skontro')}
          className={`flex items-center gap-2 border-b-2 px-4 py-3 text-xs font-bold transition-colors whitespace-nowrap cursor-pointer ${
            activeTab === 'skontro'
              ? 'border-blue-700 text-blue-800 bg-blue-50/60'
              : 'border-transparent text-slate-600 hover:text-slate-900'
          }`}
        >
          <Columns className="h-4 w-4 text-blue-700" />
          <span className="flex items-center gap-1">
            Neraca 2-Kolom
            <span className="rounded bg-blue-100 text-blue-800 px-1.5 py-0.2 text-[10px] font-semibold">
              Skontro
            </span>
          </span>
        </button>

        {/* Tab Pemetaan Akun */}
        <button
          onClick={() => handleSelectTab('pemetaan')}
          className={`flex items-center gap-2 border-b-2 px-4 py-3 text-xs font-bold transition-colors whitespace-nowrap cursor-pointer ${
            activeTab === 'pemetaan'
              ? 'border-purple-600 text-purple-700 bg-purple-50/50'
              : 'border-transparent text-slate-600 hover:text-slate-900'
          }`}
        >
          <Layers className="h-4 w-4 text-purple-600" />
          <span>Pemetaan Akun (Edukasi)</span>
        </button>

        <button
          onClick={() => handleSelectTab('aruskas')}
          className={`flex items-center gap-2 border-b-2 px-4 py-3 text-xs font-bold transition-colors whitespace-nowrap cursor-pointer ${
            activeTab === 'aruskas'
              ? 'border-blue-600 text-blue-700 bg-blue-50/50'
              : 'border-transparent text-slate-600 hover:text-slate-900'
          }`}
        >
          <PieChart className="h-4 w-4 text-teal-600" />
          <span>Laporan Arus Kas</span>
        </button>

        <button
          onClick={() => handleSelectTab('summary')}
          className={`flex items-center gap-2 border-b-2 px-4 py-3 text-xs font-bold transition-colors whitespace-nowrap cursor-pointer ${
            activeTab === 'summary'
              ? 'border-blue-600 text-blue-700 bg-blue-50/50'
              : 'border-transparent text-slate-600 hover:text-slate-900'
          }`}
        >
          <Sparkles className="h-4 w-4 text-amber-500" />
          <span>Ringkasan Eksekutif & GOP</span>
        </button>

        <button
          onClick={() => handleSelectTab('rasio')}
          className={`flex items-center gap-2 border-b-2 px-4 py-3 text-xs font-bold transition-colors whitespace-nowrap cursor-pointer ${
            activeTab === 'rasio'
              ? 'border-emerald-600 text-emerald-700 bg-emerald-50/50'
              : 'border-transparent text-slate-600 hover:text-slate-900'
          }`}
        >
          <Activity className="h-4 w-4 text-emerald-600" />
          <span>F. Analisis Rasio Keuangan</span>
          <span className="rounded-full bg-emerald-100 px-1.5 py-0.5 text-[9px] font-bold text-emerald-800">
            Likuiditas
          </span>
        </button>
      </div>

      {/* Main Report Container Card */}
      <div className="rounded-xl border border-slate-200 bg-white shadow-xs overflow-hidden">
        {/* Printable Letterhead */}
        <PrintHeader
          profile={profile}
          title={tabTitles[activeTab]}
          periode={
            selectedBulan === 'SEMUA'
              ? `Tahun Buku ${activePeriode.tahun} (Periode Berjalan)`
              : `Bulan ${selectedBulan}`
          }
        />

        {/* ========================================================= */}
        {/* TAB 1: LABA RUGI & PAJAK (BAGIAN A & B) */}
        {/* ========================================================= */}
        {activeTab === 'labarugi' && (
          <div className="p-6 space-y-6">
            {/* KPI Summary Cards */}
            <div className="grid grid-cols-2 lg: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 Pendapatan
                </div>
                <div className="text-base font-bold text-blue-950 font-mono mt-1">
                  Rp {lrData.totalPendapatan.toLocaleString('id-ID')}
                </div>
                <div className="text-[10px] text-blue-700 mt-1">
                  {lrData.pendapatanUsaha.length} akun pendapatan
                </div>
              </div>

              <div className="rounded-xl border border-cyan-200 bg-cyan-50/60 p-3.5">
                <div className="text-[11px] font-semibold text-cyan-800 uppercase tracking-wider">
                  Laba Kotor (GOP)
                </div>
                <div className="text-base font-bold text-cyan-950 font-mono mt-1">
                  Rp {lrData.labaKotorGOP.toLocaleString('id-ID')}
                </div>
                <div className="text-[10px] text-cyan-700 mt-1 font-semibold">
                  Gross Margin: {grossMargin.toFixed(1)}%
                </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 Operasional
                </div>
                <div className="text-base font-bold text-amber-950 font-mono mt-1">
                  Rp {lrData.totalBebanOperasional.toLocaleString('id-ID')}
                </div>
                <div className="text-[10px] text-amber-700 mt-1">
                  {lrData.bebanOperasional.length} pos biaya rutin
                </div>
              </div>

              <div className="rounded-xl border border-red-200 bg-red-50/60 p-3.5">
                <div className="text-[11px] font-semibold text-red-800 uppercase tracking-wider">
                  Beban Pajak ({lrData.tarifPajakPersen}%)
                </div>
                <div className="text-base font-bold text-red-950 font-mono mt-1">
                  Rp {lrData.bebanPajak.toLocaleString('id-ID')}
                </div>
                <div className="text-[10px] text-red-700 mt-1">
                  {profile.metodePajak === 'BADAN_22' ? 'PPh Badan (22%)' : 'PPh Final UMKM (0.5%)'}
                </div>
              </div>

              <div className="col-span-2 lg: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>Laba Bersih (EAT)</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 {lrData.labaBersihSetelahPajak.toLocaleString('id-ID')}
                </div>
                <div className="text-[10px] text-emerald-700 mt-1 font-semibold">
                  Net Margin: {netMargin.toFixed(1)}%
                </div>
              </div>
            </div>

            {/* Explanatory Callout Box */}
            <div className="rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50/80 to-indigo-50/80 p-4 text-xs text-blue-900 space-y-1.5 print:hidden">
              <div className="flex items-center gap-2 font-bold text-blue-950">
                <Info className="h-4 w-4 text-blue-600" />
                <span>Karakteristik & Aliran Akun Laba Rugi (Nominal Accounts):</span>
              </div>
              <p className="leading-relaxed text-slate-700 pl-6">
                Seluruh akun dengan <strong>Pos Laporan: Laba Rugi</strong> (Kelompok <strong>4. Pendapatan</strong>, <strong>5. Beban Pokok Pendapatan</strong>, dan <strong>6. Biaya/Beban Operasional</strong>) dihitung pada periode berjalan. Nilai <strong>Laba Bersih Setelah Pajak (EAT) sebesar Rp {lrData.labaBersihSetelahPajak.toLocaleString('id-ID')}</strong> akan mengalir otomatis menjadi penambah nilai <strong>Ekuitas: Laba Tahun Berjalan</strong> pada Laporan Balance Sheet dan Neraca Skontro.
              </p>
            </div>

            {/* Detailed Statement Table */}
            <div className="max-w-3xl mx-auto rounded-xl border border-slate-200 bg-white p-6 shadow-xs text-xs space-y-4">
              {/* Header Title */}
              <div className="border-b border-slate-200 pb-3 text-center">
                <h3 className="font-bold text-base text-slate-900 uppercase tracking-wider">
                  LAPORAN LABA RUGI & PERPAJAKAN (INCOME STATEMENT)
                </h3>
                <p className="text-xs text-slate-500">
                  Untuk Periode yang Berakhir pada {activePeriode.namaPeriode} (Dalam Mata Uang Rupiah)
                </p>
              </div>

              {/* 1. PENDAPATAN */}
              <div className="rounded-lg border border-slate-200 bg-slate-50/40 p-4">
                <div className="flex justify-between items-center border-b border-slate-300 pb-2 mb-2 font-bold text-slate-800 uppercase tracking-wider">
                  <span>BAGIAN A. 1. PENDAPATAN (REVENUE)</span>
                  <span className="font-mono text-emerald-800">
                    Rp {lrData.totalPendapatan.toLocaleString('id-ID')}
                  </span>
                </div>

                <div className="space-y-1.5 pl-2 text-slate-700">
                  <div className="font-semibold text-slate-800 pt-1 text-[11px] text-blue-900">
                    1.1 Pendapatan Usaha Pokok:
                  </div>
                  {lrData.pendapatanUsaha.length === 0 ? (
                    <div className="pl-4 italic text-slate-400">Belum ada mutasi pendapatan usaha</div>
                  ) : (
                    lrData.pendapatanUsaha.map((p) => (
                      <div key={p.akun.id} className="flex justify-between pl-4 text-slate-600 hover:text-slate-900">
                        <span className="flex items-center gap-1.5">
                          <span className="font-mono font-bold text-blue-800">{p.akun.kodeAkun}</span>
                          <span>- {p.akun.namaAkun}</span>
                        </span>
                        <span className="font-mono font-medium">Rp {p.jumlah.toLocaleString('id-ID')}</span>
                      </div>
                    ))
                  )}
                  <div className="flex justify-between border-t border-slate-200 pt-1 font-semibold text-slate-800 pl-4">
                    <span>Subtotal Pendapatan Usaha</span>
                    <span className="font-mono">Rp {lrData.totalPendapatanUsaha.toLocaleString('id-ID')}</span>
                  </div>

                  {lrData.pendapatanLain.length > 0 && (
                    <>
                      <div className="font-semibold text-slate-800 pt-2 text-[11px] text-blue-900">
                        1.2 Pendapatan Lain-lain / Non-Operasional:
                      </div>
                      {lrData.pendapatanLain.map((p) => (
                        <div key={p.akun.id} className="flex justify-between pl-4 text-slate-600">
                          <span className="flex items-center gap-1.5">
                            <span className="font-mono font-bold text-blue-800">{p.akun.kodeAkun}</span>
                            <span>- {p.akun.namaAkun}</span>
                          </span>
                          <span className="font-mono font-medium">Rp {p.jumlah.toLocaleString('id-ID')}</span>
                        </div>
                      ))}
                    </>
                  )}
                </div>
              </div>

              {/* 2. BEBAN POKOK PENDAPATAN (HPP) & GOP */}
              <div className="rounded-lg border border-cyan-200 bg-cyan-50/30 p-4">
                <div className="flex justify-between items-center border-b border-cyan-300 pb-2 mb-2 font-bold text-cyan-950 uppercase tracking-wider">
                  <span>2. BEBAN POKOK PENDAPATAN / JASA (HPP)</span>
                  <span className="font-mono">
                    (Rp {lrData.totalHPP.toLocaleString('id-ID')})
                  </span>
                </div>

                <div className="space-y-1.5 pl-2 text-slate-700">
                  {lrData.bebanPokokPenjualan.length === 0 ? (
                    <div className="pl-4 italic text-slate-400">Tidak ada pos beban pokok langsung</div>
                  ) : (
                    lrData.bebanPokokPenjualan.map((b) => (
                      <div key={b.akun.id} className="flex justify-between pl-4 text-slate-600">
                        <span className="flex items-center gap-1.5">
                          <span className="font-mono font-bold text-cyan-800">{b.akun.kodeAkun}</span>
                          <span>- {b.akun.namaAkun}</span>
                        </span>
                        <span className="font-mono font-medium">Rp {b.jumlah.toLocaleString('id-ID')}</span>
                      </div>
                    ))
                  )}
                </div>

                {/* GROSS OPERATING PROFIT BANNER */}
                <div className="mt-3 flex justify-between rounded-lg bg-cyan-100/90 p-2.5 font-bold text-cyan-950 border border-cyan-300">
                  <span className="uppercase tracking-wider flex items-center gap-1.5">
                    <TrendingUp className="h-4 w-4 text-cyan-700" />
                    GROSS OPERATING PROFIT (GOP) / LABA KOTOR:
                  </span>
                  <span className="font-mono text-sm">Rp {lrData.labaKotorGOP.toLocaleString('id-ID')}</span>
                </div>
              </div>

              {/* 3. BIAYA / BEBAN OPERASIONAL */}
              <div className="rounded-lg border border-slate-200 bg-slate-50/40 p-4">
                <div className="flex justify-between items-center border-b border-slate-300 pb-2 mb-2 font-bold text-slate-800 uppercase tracking-wider">
                  <span>3. BIAYA & BEBAN OPERASIONAL (OPEX)</span>
                  <span className="font-mono">
                    (Rp {lrData.totalBebanOperasional.toLocaleString('id-ID')})
                  </span>
                </div>

                <div className="space-y-1.5 pl-2 text-slate-700">
                  {lrData.bebanOperasional.map((b) => (
                    <div key={b.akun.id} className="flex justify-between pl-4 text-slate-600">
                      <span className="flex items-center gap-1.5">
                        <span className="font-mono font-bold text-slate-700">{b.akun.kodeAkun}</span>
                        <span>- {b.akun.namaAkun}</span>
                      </span>
                      <span className="font-mono font-medium">Rp {b.jumlah.toLocaleString('id-ID')}</span>
                    </div>
                  ))}
                  {lrData.bebanLain.map((b) => (
                    <div key={b.akun.id} className="flex justify-between pl-4 text-slate-600">
                      <span className="flex items-center gap-1.5">
                        <span className="font-mono font-bold text-slate-700">{b.akun.kodeAkun}</span>
                        <span>- {b.akun.namaAkun}</span>
                      </span>
                      <span className="font-mono font-medium">Rp {b.jumlah.toLocaleString('id-ID')}</span>
                    </div>
                  ))}
                </div>

                <div className="mt-3 flex justify-between border-t border-slate-200 pt-2 font-semibold text-slate-800">
                  <span>Subtotal Biaya &amp; Beban Operasional (OPEX):</span>
                  <span className="font-mono">
                    Rp {(lrData.totalBebanOperasional + lrData.totalBebanLain).toLocaleString('id-ID')}
                  </span>
                </div>
              </div>

              {/* REKAPITULASI BIAYA & TOTAL BEBAN USAHA */}
              <div className="rounded-lg border border-slate-200 bg-slate-50/80 p-3.5 space-y-1.5 text-xs text-slate-700">
                <div className="flex justify-between font-medium">
                  <span>1. Beban Pokok Pendapatan (HPP Langsung):</span>
                  <span className="font-mono">Rp {lrData.totalHPP.toLocaleString('id-ID')}</span>
                </div>
                <div className="flex justify-between font-medium">
                  <span>2. Biaya &amp; Beban Operasional (OPEX):</span>
                  <span className="font-mono">
                    Rp {(lrData.totalBebanOperasional + lrData.totalBebanLain).toLocaleString('id-ID')}
                  </span>
                </div>
                <div className="flex justify-between border-t border-slate-300 pt-1.5 font-bold text-slate-900">
                  <span>Total Biaya Operasional &amp; Usaha:</span>
                  <span className="font-mono">Rp {lrData.totalBiaya.toLocaleString('id-ID')}</span>
                </div>
              </div>

              {/* LABA SEBELUM PAJAK (EBT) */}
              <div className="flex justify-between rounded-lg bg-amber-100/90 p-3 font-bold text-amber-950 border border-amber-300">
                <span className="uppercase tracking-wider">LABA USAHA SEBELUM PAJAK (EBT / OPERATING PROFIT):</span>
                <span className="font-mono text-sm">Rp {lrData.labaSebelumPajak.toLocaleString('id-ID')}</span>
              </div>

              {/* BAGIAN B: PERPAJAKAN */}
              <div className="rounded-lg border border-red-200 bg-red-50/40 p-4">
                <div className="flex justify-between items-center border-b border-red-200 pb-2 mb-2 font-bold text-red-950 uppercase tracking-wider">
                  <span>BAGIAN B. PERPAJAKAN (TAX EXPENSE)</span>
                  <span className="font-mono text-red-900">
                    (Rp {lrData.bebanPajak.toLocaleString('id-ID')})
                  </span>
                </div>
                <div className="space-y-1.5 text-slate-700 pl-2">
                  <div className="flex justify-between pl-4">
                    <span>Dasar Pengenaan Pajak (DPP) Penghasilan Kena Pajak:</span>
                    <span className="font-mono font-medium">Rp {lrData.labaSebelumPajak.toLocaleString('id-ID')}</span>
                  </div>
                  <div className="flex justify-between pl-4">
                    <span>Skema & Tarif Pajak yang Berlaku:</span>
                    <span className="font-semibold text-red-900">
                      {profile.metodePajak === 'BADAN_22' ? 'PPh Badan UU HPP (22%)' : 'PPh Final PP 23 (0.5%)'}
                    </span>
                  </div>
                  <div className="flex justify-between pl-4 font-semibold text-red-900 border-t border-red-200 pt-1">
                    <span>Estimasi Beban Pajak Penghasilan (PPh):</span>
                    <span className="font-mono">Rp {lrData.bebanPajak.toLocaleString('id-ID')}</span>
                  </div>
                </div>
              </div>

              {/* LABA BERSIH SETELAH PAJAK (EAT / NET INCOME) */}
              <div className="flex justify-between rounded-xl bg-gradient-to-r from-emerald-600 to-teal-700 p-4 font-bold text-white shadow-md">
                <div className="flex items-center gap-2">
                  <ShieldCheck className="h-5 w-5 text-emerald-200" />
                  <span className="uppercase tracking-wider text-sm">
                    LABA BERSIH SETELAH PAJAK (NET PROFIT / EAT):
                  </span>
                </div>
                <span className="font-mono text-base text-emerald-100">
                  Rp {lrData.labaBersihSetelahPajak.toLocaleString('id-ID')}
                </span>
              </div>
            </div>
          </div>
        )}

        {/* ========================================================= */}
        {/* TAB 2: CAPITAL STATEMENT / PERUBAHAN MODAL (BAGIAN C) */}
        {/* ========================================================= */}
        {activeTab === 'ekuitas' && (
          <div className="p-6 space-y-6">
            <div className="border-b border-slate-200 pb-3">
              <h3 className="text-base font-bold uppercase tracking-wider text-slate-900">
                Laporan Perubahan Modal / Ekuitas (Capital Statement)
              </h3>
              <p className="text-xs text-slate-500">
                Bagian C. Rekonsiliasi Modal Saham, Laba Ditahan, Laba Bersih Berjalan, dan Saldo Akhir Ekuitas
              </p>
            </div>

            <div className="max-w-3xl mx-auto rounded-xl border border-slate-200 bg-white p-6 shadow-xs text-xs space-y-4">
              <div className="border-b border-slate-200 pb-3 text-center">
                <h4 className="font-bold text-sm text-slate-900 uppercase">
                  PT TIO MANDIRI JAYA - LAPORAN PERUBAHAN EKUITAS
                </h4>
                <p className="text-xs text-slate-500">Periode Berakhir {activePeriode.namaPeriode}</p>
              </div>

              <table className="w-full">
                <tbody className="divide-y divide-slate-200 font-medium text-slate-700">
                  <tr>
                    <td className="py-2.5">Modal Saham Disetor Awal Periode</td>
                    <td className="py-2.5 text-right font-mono font-bold text-slate-900">
                      Rp {capitalData.modalDisetorAwal.toLocaleString('id-ID')}
                    </td>
                  </tr>
                  <tr>
                    <td className="py-2.5">Laba Ditahan Awal Periode (Retained Earnings)</td>
                    <td className="py-2.5 text-right font-mono font-bold text-slate-900">
                      Rp {capitalData.labaDitahanAwal.toLocaleString('id-ID')}
                    </td>
                  </tr>
                  <tr className="bg-slate-50/70 font-semibold text-slate-800">
                    <td className="py-2.5 pl-3">Total Pendapatan Periode Berjalan</td>
                    <td className="py-2.5 text-right font-mono text-blue-900">
                      Rp {capitalData.pendapatanTotal.toLocaleString('id-ID')}
                    </td>
                  </tr>
                  <tr className="bg-slate-50/70 font-semibold text-slate-800">
                    <td className="py-2.5 pl-3">Total Biaya & Pajak Periode Berjalan</td>
                    <td className="py-2.5 text-right font-mono text-amber-900">
                      (Rp {capitalData.biayaTotal.toLocaleString('id-ID')})
                    </td>
                  </tr>
                  <tr className="bg-emerald-50/80 font-bold text-emerald-950">
                    <td className="py-2.5 pl-3 flex items-center gap-1.5">
                      <TrendingUp className="h-4 w-4 text-emerald-600" />
                      Laba Bersih Tahun Berjalan (Net Income dari Laba Rugi):
                    </td>
                    <td className="py-2.5 text-right font-mono text-emerald-800">
                      + Rp {capitalData.labaBersihBerjalan.toLocaleString('id-ID')}
                    </td>
                  </tr>
                  {capitalData.priveDividen > 0 && (
                    <tr className="text-red-700 font-semibold">
                      <td className="py-2.5">Dikurangi: Penarikan Prive / Pembagian Dividen</td>
                      <td className="py-2.5 text-right font-mono">
                        (Rp {capitalData.priveDividen.toLocaleString('id-ID')})
                      </td>
                    </tr>
                  )}
                  <tr className="border-t-2 border-slate-900 bg-slate-900 text-white font-bold text-sm">
                    <td className="py-3 px-3 uppercase tracking-wider">
                      TOTAL SALDO EKUITAS AKHIR PERIODE:
                    </td>
                    <td className="py-3 px-3 text-right font-mono text-cyan-300">
                      Rp {capitalData.totalEkuitasAkhir.toLocaleString('id-ID')}
                    </td>
                  </tr>
                </tbody>
              </table>

              <div className="rounded-lg bg-blue-50 p-3 text-[11px] text-blue-900 flex items-start gap-2">
                <Info className="h-4 w-4 text-blue-600 mt-0.5 shrink-0" />
                <p>
                  Saldo Ekuitas Akhir ini merupakan total modal bersih pemilik yang dibawa ke sisi <strong>Pasiva / Ekuitas</strong> pada Balance Sheet dan Neraca Skontro.
                </p>
              </div>
            </div>
          </div>
        )}

        {/* ========================================================= */}
        {/* TAB 3: BALANCE SHEET - FORMAT STAFEL VERTIKAL (BAGIAN D) */}
        {/* ========================================================= */}
        {activeTab === 'balancesheet' && (
          <div className="p-6 space-y-6">
            {/* Header with Format Explanation Badge */}
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-3 border-b border-slate-200 pb-3">
              <div>
                <div className="flex items-center gap-2">
                  <h3 className="text-base font-bold uppercase tracking-wider text-slate-900">
                    Laporan Posisi Keuangan (Balance Sheet) - Bagian D
                  </h3>
                  <span className="rounded-full bg-indigo-100 text-indigo-900 px-2.5 py-0.5 text-xs font-bold">
                    Format Stafel (Vertikal)
                  </span>
                </div>
                <p className="text-xs text-slate-500 mt-0.5">
                  Format Standar SAK EMKM / IFRS: Penyajian Terklasifikasi Bertahap (Aset, Liabilitas, Ekuitas)
                </p>
              </div>

              {/* Balance Badge */}
              <div
                className={`rounded-full px-4 py-1.5 text-xs font-bold flex items-center gap-1.5 shadow-xs ${
                  bsData.isBalanced
                    ? 'bg-emerald-100 text-emerald-900 border border-emerald-300'
                    : 'bg-red-100 text-red-900 border border-red-300'
                }`}
              >
                {bsData.isBalanced ? (
                  <>
                    <CheckCircle2 className="h-4 w-4 text-emerald-600" />
                    STATUS: BALANCE (SEIMBANG)
                  </>
                ) : (
                  <>SELISIH: Rp {bsData.selisih.toLocaleString('id-ID')}</>
                )}
              </div>
            </div>

            {/* Explanatory Callout Box: What makes Balance Sheet distinct from Neraca */}
            <div className="rounded-xl border border-indigo-200 bg-gradient-to-r from-indigo-50/80 to-purple-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">
                <BookOpen className="h-4 w-4 text-indigo-600" />
                <span>Perbedaan Antara "Balance Sheet (Format Stafel)" dan "Neraca (Format Skontro)":</span>
              </div>
              <ul className="list-disc list-inside space-y-1 text-slate-700 pl-2">
                <li>
                  <strong>Balance Sheet (Format Stafel / Vertikal)</strong> menyajikan akun secara bertingkat dari atas ke bawah: Aset (Lancar & Tetap), kemudian Liabilitas (Jangka Pendek & Jangka Panjang), diakhiri Ekuitas. Format ini adalah standar pelaporan keuangan internasional modern karena memudahkan evaluasi <em>Modal Kerja Bersih (Net Working Capital)</em> dan analisis rasio likuiditas.
                </li>
                <li>
                  <strong>Neraca (Format Skontro / Horizontal 2-Kolom)</strong> menyajikan akun secara sejajar kiri-kanan (Sisi Kiri: Aktiva vs Sisi Kanan: Pasiva) mengikuti tradisi pembukuan berpasangan T-Account.
                </li>
              </ul>
            </div>

            {/* Financial Intelligence / Health Metrics Banner */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3 print:hidden">
              <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
                <div className="text-[11px] font-semibold text-slate-500 uppercase">Modal Kerja Bersih</div>
                <div className="text-sm font-bold text-slate-900 font-mono mt-0.5">
                  Rp {bsData.modalKerjaBersih.toLocaleString('id-ID')}
                </div>
                <div className="text-[10px] text-slate-500">Aset Lancar - Liabilitas Pendek</div>
              </div>
              <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
                <div className="text-[11px] font-semibold text-slate-500 uppercase">Current Ratio (Rasio Lancar)</div>
                <div className="text-sm font-bold text-blue-900 font-mono mt-0.5">
                  {bsData.currentRatio.toFixed(2)}x
                </div>
                <div className="text-[10px] text-blue-600 font-medium">Likuiditas Sangat Sehat</div>
              </div>
              <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
                <div className="text-[11px] font-semibold text-slate-500 uppercase">Debt to Equity (DER)</div>
                <div className="text-sm font-bold text-purple-900 font-mono mt-0.5">
                  {bsData.debtToEquityRatio.toFixed(1)}%
                </div>
                <div className="text-[10px] text-slate-500">Total Utang / Total Ekuitas</div>
              </div>
              <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
                <div className="text-[11px] font-semibold text-slate-500 uppercase">Aset Neto (Nilai Buku)</div>
                <div className="text-sm font-bold text-emerald-900 font-mono mt-0.5">
                  Rp {bsData.asetNeto.toLocaleString('id-ID')}
                </div>
                <div className="text-[10px] text-emerald-600">Total Aset - Total Utang</div>
              </div>
            </div>

            {/* STAFEL VERTICAL REPORT TABLE */}
            <div className="max-w-3xl mx-auto rounded-xl border border-slate-200 bg-white p-6 shadow-xs text-xs space-y-5">
              <div className="text-center border-b border-slate-200 pb-3">
                <h4 className="font-bold text-sm text-slate-900 uppercase">
                  PT TIO MANDIRI JAYA - LAPORAN POSISI KEUANGAN (BALANCE SHEET)
                </h4>
                <p className="text-xs text-slate-500">Format Stafel Bertahap - Per {activePeriode.namaPeriode}</p>
              </div>

              {/* I. ASET */}
              <div className="space-y-3">
                <div className="bg-blue-900 text-white font-bold p-2.5 rounded-lg flex justify-between items-center">
                  <span className="uppercase tracking-wider">I. ASET (ASSETS)</span>
                  <span className="font-mono">Rp {bsData.totalAset.toLocaleString('id-ID')}</span>
                </div>

                {/* 1.1 Aset Lancar */}
                <div className="pl-3 space-y-1.5">
                  <div className="flex justify-between font-bold text-slate-800 border-b border-slate-200 pb-1">
                    <span className="text-blue-900">A. ASET LANCAR (CURRENT ASSETS)</span>
                    <span className="font-mono">Rp {bsData.totalAsetLancar.toLocaleString('id-ID')}</span>
                  </div>
                  {bsData.asetLancar.map((a) => (
                    <div key={a.akun.id} className="flex justify-between pl-4 text-slate-600">
                      <span className="flex items-center gap-1.5">
                        <span className="font-mono font-bold text-blue-800">{a.akun.kodeAkun}</span>
                        <span>{a.akun.namaAkun}</span>
                      </span>
                      <span className="font-mono font-medium">Rp {a.jumlah.toLocaleString('id-ID')}</span>
                    </div>
                  ))}
                  <div className="flex justify-between font-semibold text-slate-800 border-t border-slate-200 pt-1 pl-4">
                    <span>Jumlah Aset Lancar</span>
                    <span className="font-mono">Rp {bsData.totalAsetLancar.toLocaleString('id-ID')}</span>
                  </div>
                </div>

                {/* 1.2 Aset Tetap */}
                <div className="pl-3 space-y-1.5 pt-2">
                  <div className="flex justify-between font-bold text-slate-800 border-b border-slate-200 pb-1">
                    <span className="text-blue-900">B. ASET TETAP & AKUMULASI PENYUSUTAN (FIXED ASSETS)</span>
                    <span className="font-mono">Rp {bsData.totalAsetTetapNeto.toLocaleString('id-ID')}</span>
                  </div>
                  {bsData.asetTetap.map((a) => (
                    <div key={a.akun.id} className="flex justify-between pl-4 text-slate-600">
                      <span className="flex items-center gap-1.5">
                        <span className="font-mono font-bold text-slate-700">{a.akun.kodeAkun}</span>
                        <span>{a.akun.namaAkun} (Biaya Perolehan)</span>
                      </span>
                      <span className="font-mono font-medium">Rp {a.jumlah.toLocaleString('id-ID')}</span>
                    </div>
                  ))}
                  {bsData.akumulasiPenyusutan.map((a) => (
                    <div key={a.akun.id} className="flex justify-between pl-4 text-red-600 italic">
                      <span className="flex items-center gap-1.5">
                        <span className="font-mono font-bold">{a.akun.kodeAkun}</span>
                        <span>Dikurangi: {a.akun.namaAkun}</span>
                      </span>
                      <span className="font-mono font-medium">(Rp {a.jumlah.toLocaleString('id-ID')})</span>
                    </div>
                  ))}
                  <div className="flex justify-between font-semibold text-slate-800 border-t border-slate-200 pt-1 pl-4">
                    <span>Nilai Buku Bersih Aset Tetap</span>
                    <span className="font-mono">Rp {bsData.totalAsetTetapNeto.toLocaleString('id-ID')}</span>
                  </div>
                </div>

                {/* TOTAL ASET BANNER */}
                <div className="flex justify-between rounded-lg bg-blue-100 p-2.5 font-bold text-blue-950 border border-blue-300">
                  <span className="uppercase tracking-wider">JUMLAH SELURUH ASET (TOTAL ASSETS):</span>
                  <span className="font-mono text-sm">Rp {bsData.totalAset.toLocaleString('id-ID')}</span>
                </div>
              </div>

              {/* II. LIABILITAS */}
              <div className="space-y-3 pt-3 border-t border-slate-200">
                <div className="bg-amber-900 text-white font-bold p-2.5 rounded-lg flex justify-between items-center">
                  <span className="uppercase tracking-wider">II. LIABILITAS / KEWAJIBAN (LIABILITIES)</span>
                  <span className="font-mono">Rp {bsData.totalLiabilitas.toLocaleString('id-ID')}</span>
                </div>

                {/* 2.1 Liabilitas Jangka Pendek */}
                <div className="pl-3 space-y-1.5">
                  <div className="flex justify-between font-bold text-slate-800 border-b border-slate-200 pb-1">
                    <span className="text-amber-900">A. LIABILITAS JANGKA PENDEK / LANCAR</span>
                    <span className="font-mono">Rp {bsData.totalLiabilitasJangkaPendek.toLocaleString('id-ID')}</span>
                  </div>
                  {bsData.liabilitasJangkaPendek.map((l) => (
                    <div key={l.akun.id} className="flex justify-between pl-4 text-slate-600">
                      <span className="flex items-center gap-1.5">
                        <span className="font-mono font-bold text-amber-800">{l.akun.kodeAkun}</span>
                        <span>{l.akun.namaAkun}</span>
                      </span>
                      <span className="font-mono font-medium">Rp {l.jumlah.toLocaleString('id-ID')}</span>
                    </div>
                  ))}
                  <div className="flex justify-between font-semibold text-slate-800 border-t border-slate-200 pt-1 pl-4">
                    <span>Jumlah Liabilitas Jangka Pendek</span>
                    <span className="font-mono">Rp {bsData.totalLiabilitasJangkaPendek.toLocaleString('id-ID')}</span>
                  </div>
                </div>

                {/* 2.2 Liabilitas Jangka Panjang */}
                <div className="pl-3 space-y-1.5 pt-2">
                  <div className="flex justify-between font-bold text-slate-800 border-b border-slate-200 pb-1">
                    <span className="text-amber-900">B. LIABILITAS JANGKA PANJANG</span>
                    <span className="font-mono">Rp {bsData.totalLiabilitasJangkaPanjang.toLocaleString('id-ID')}</span>
                  </div>
                  {bsData.liabilitasJangkaPanjang.map((l) => (
                    <div key={l.akun.id} className="flex justify-between pl-4 text-slate-600">
                      <span className="flex items-center gap-1.5">
                        <span className="font-mono font-bold text-amber-800">{l.akun.kodeAkun}</span>
                        <span>{l.akun.namaAkun}</span>
                      </span>
                      <span className="font-mono font-medium">Rp {l.jumlah.toLocaleString('id-ID')}</span>
                    </div>
                  ))}
                  <div className="flex justify-between font-semibold text-slate-800 border-t border-slate-200 pt-1 pl-4">
                    <span>Jumlah Liabilitas Jangka Panjang</span>
                    <span className="font-mono">Rp {bsData.totalLiabilitasJangkaPanjang.toLocaleString('id-ID')}</span>
                  </div>
                </div>

                {/* TOTAL LIABILITAS BANNER */}
                <div className="flex justify-between rounded-lg bg-amber-100 p-2.5 font-bold text-amber-950 border border-amber-300">
                  <span className="uppercase tracking-wider">TOTAL LIABILITAS:</span>
                  <span className="font-mono text-sm">Rp {bsData.totalLiabilitas.toLocaleString('id-ID')}</span>
                </div>
              </div>

              {/* III. EKUITAS */}
              <div className="space-y-3 pt-3 border-t border-slate-200">
                <div className="bg-emerald-900 text-white font-bold p-2.5 rounded-lg flex justify-between items-center">
                  <span className="uppercase tracking-wider">III. EKUITAS / MODAL (EQUITY)</span>
                  <span className="font-mono">Rp {bsData.totalEkuitas.toLocaleString('id-ID')}</span>
                </div>

                <div className="pl-3 space-y-1.5">
                  <div className="flex justify-between pl-4 text-slate-600">
                    <span className="flex items-center gap-1.5">
                      <span className="font-mono font-bold text-emerald-800">3-1010</span>
                      <span>Modal Saham Disetor</span>
                    </span>
                    <span className="font-mono font-medium">Rp {bsData.modalDisetor.toLocaleString('id-ID')}</span>
                  </div>

                  <div className="flex justify-between pl-4 text-slate-600">
                    <span className="flex items-center gap-1.5">
                      <span className="font-mono font-bold text-emerald-800">3-1020</span>
                      <span>Laba Ditahan (Retained Earnings) Awal</span>
                    </span>
                    <span className="font-mono font-medium">Rp {bsData.labaDitahanAwal.toLocaleString('id-ID')}</span>
                  </div>

                  <div className="flex justify-between pl-4 text-emerald-900 font-semibold bg-emerald-50/70 p-1.5 rounded">
                    <span className="flex items-center gap-1.5">
                      <TrendingUp className="h-3.5 w-3.5 text-emerald-600" />
                      <span>Laba Bersih Tahun Berjalan (EAT dari Laba Rugi):</span>
                    </span>
                    <span className="font-mono font-bold">+ Rp {bsData.labaBersihBerjalan.toLocaleString('id-ID')}</span>
                  </div>

                  {bsData.priveDividen > 0 && (
                    <div className="flex justify-between pl-4 text-red-600">
                      <span>Dikurangi: Prive / Dividen</span>
                      <span className="font-mono">(Rp {bsData.priveDividen.toLocaleString('id-ID')})</span>
                    </div>
                  )}

                  <div className="flex justify-between rounded-lg bg-emerald-100 p-2.5 font-bold text-emerald-950 border border-emerald-300 mt-2">
                    <span className="uppercase tracking-wider">TOTAL EKUITAS:</span>
                    <span className="font-mono text-sm">Rp {bsData.totalEkuitas.toLocaleString('id-ID')}</span>
                  </div>
                </div>
              </div>

              {/* RECONCILIATION SUMMARY: TOTAL LIABILITAS + EKUITAS */}
              <div className="flex justify-between rounded-xl bg-slate-900 p-4 font-bold text-white shadow-md">
                <span className="uppercase tracking-wider text-sm flex items-center gap-1.5">
                  <Scale className="h-4 w-4 text-cyan-400" />
                  TOTAL LIABILITAS & EKUITAS (TOTAL LIABILITIES & EQUITY):
                </span>
                <span className="font-mono text-base text-cyan-300">
                  Rp {(bsData.totalLiabilitas + bsData.totalEkuitas).toLocaleString('id-ID')}
                </span>
              </div>
            </div>
          </div>
        )}

        {/* ========================================================= */}
        {/* TAB 4: NERACA FORMAT SKONTRO (2-KOLOM SEJAJAR) */}
        {/* ========================================================= */}
        {activeTab === 'skontro' && (
          <div className="p-6 space-y-6">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-3 border-b border-slate-200 pb-3">
              <div>
                <div className="flex items-center gap-2">
                  <h3 className="text-base font-bold uppercase tracking-wider text-slate-900">
                    Neraca Bentuk Skontro (Horizontal Two-Column / T-Account)
                  </h3>
                  <span className="rounded-full bg-blue-100 text-blue-900 px-2.5 py-0.5 text-xs font-bold">
                    Format Skontro
                  </span>
                </div>
                <p className="text-xs text-slate-500 mt-0.5">
                  Format Baku Tradisional Indonesia: Sisi Kiri (Aktiva) vs Sisi Kanan (Pasiva: Kewajiban & Ekuitas)
                </p>
              </div>

              <div
                className={`rounded-full px-4 py-1.5 text-xs font-bold flex items-center gap-1.5 shadow-xs ${
                  neracaData.isSeimbang
                    ? 'bg-emerald-100 text-emerald-900 border border-emerald-300'
                    : 'bg-red-100 text-red-900 border border-red-300'
                }`}
              >
                {neracaData.isSeimbang ? (
                  <>
                    <CheckCircle2 className="h-4 w-4 text-emerald-600" />
                    STATUS: SEIMBANG (BALANCED)
                  </>
                ) : (
                  <>SELISIH: Rp {neracaData.selisih.toLocaleString('id-ID')}</>
                )}
              </div>
            </div>

            {/* Explanatory Box on Skontro */}
            <div className="rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50/70 to-cyan-50/70 p-4 text-xs text-blue-950 space-y-1.5 print:hidden">
              <div className="flex items-center gap-2 font-bold text-blue-900">
                <Columns className="h-4 w-4 text-blue-700" />
                <span>Karakteristik Neraca Format Skontro (Horizontal T-Account):</span>
              </div>
              <p className="text-slate-700 pl-6 leading-relaxed">
                Format Skontro meletakkan <strong>Aktiva (Harta)</strong> di sebelah kiri dan <strong>Pasiva (Kewajiban & Modal)</strong> di sebelah kanan dalam hamparan berdampingan. Pembaca laporan langsung dapat memverifikasi keseimbangan matematis <strong>Aktiva = Kewajiban + Ekuitas</strong> pada baris total akhir bergaris ganda (<em>double-underline</em>).
              </p>
            </div>

            {/* Skontro 2 Columns Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
              {/* SISI KIRI: AKTIVA */}
              <div className="rounded-xl border-2 border-blue-300 bg-white p-5 space-y-4 shadow-xs">
                <div className="border-b-2 border-blue-700 pb-2 flex justify-between items-center">
                  <h4 className="font-bold text-sm text-blue-950 uppercase tracking-wider">
                    SISI KIRI: AKTIVA (ASSETS)
                  </h4>
                  <span className="text-[11px] font-mono font-semibold text-blue-800">
                    Debit Balance
                  </span>
                </div>

                {/* 1. Aktiva Lancar */}
                <div className="space-y-2">
                  <div className="flex justify-between font-bold text-xs text-slate-800 border-b border-slate-200 pb-1">
                    <span className="text-blue-900">1. AKTIVA LANCAR:</span>
                    <span className="font-mono">
                      Rp {neracaData.totalAktivaLancar.toLocaleString('id-ID')}
                    </span>
                  </div>
                  <div className="space-y-1.5 pl-2 text-xs text-slate-600">
                    {neracaData.aktivaLancar.map((a) => (
                      <div key={a.akun.id} className="flex justify-between">
                        <span className="flex items-center gap-1.5">
                          <span className="font-mono font-bold text-blue-800">{a.akun.kodeAkun}</span>
                          <span>{a.akun.namaAkun}</span>
                        </span>
                        <span className="font-mono font-medium">Rp {a.jumlah.toLocaleString('id-ID')}</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* 2. Aktiva Tetap */}
                <div className="space-y-2 pt-2 border-t border-slate-200">
                  <div className="flex justify-between font-bold text-xs text-slate-800 border-b border-slate-200 pb-1">
                    <span className="text-blue-900">2. AKTIVA TETAP:</span>
                    <span className="font-mono">
                      Rp {neracaData.totalAktivaTetapNeto.toLocaleString('id-ID')}
                    </span>
                  </div>
                  <div className="space-y-1.5 pl-2 text-xs text-slate-600">
                    {neracaData.aktivaTetap.map((a) => (
                      <div key={a.akun.id} className="flex justify-between">
                        <span className="flex items-center gap-1.5">
                          <span className="font-mono font-bold text-slate-700">{a.akun.kodeAkun}</span>
                          <span>{a.akun.namaAkun}</span>
                        </span>
                        <span className="font-mono font-medium">Rp {a.jumlah.toLocaleString('id-ID')}</span>
                      </div>
                    ))}
                    {neracaData.akumulasiPenyusutan.map((a) => (
                      <div key={a.akun.id} className="flex justify-between text-red-600 italic">
                        <span className="flex items-center gap-1.5">
                          <span className="font-mono font-bold">{a.akun.kodeAkun}</span>
                          <span>Dikurangi: {a.akun.namaAkun}</span>
                        </span>
                        <span className="font-mono font-medium">(Rp {a.jumlah.toLocaleString('id-ID')})</span>
                      </div>
                    ))}
                    <div className="flex justify-between font-semibold text-slate-700 border-t border-slate-100 pt-1">
                      <span>Nilai Buku Bersih Aktiva Tetap</span>
                      <span className="font-mono">
                        Rp {neracaData.totalAktivaTetapNeto.toLocaleString('id-ID')}
                      </span>
                    </div>
                  </div>
                </div>

                {/* TOTAL AKTIVA SISI KIRI (DOUBLE UNDERLINE) */}
                <div className="mt-6 border-t-2 border-slate-900 pt-3">
                  <div className="flex justify-between rounded-lg bg-blue-800 p-3 font-bold text-white text-xs shadow-xs">
                    <span className="uppercase tracking-wider">TOTAL AKTIVA (ASSETS):</span>
                    <span className="font-mono text-sm text-cyan-200">
                      Rp {neracaData.totalAktiva.toLocaleString('id-ID')}
                    </span>
                  </div>
                  <div className="border-b-4 border-double border-slate-900 mt-1"></div>
                </div>
              </div>

              {/* SISI KANAN: KEWAJIBAN & EKUITAS (PASIVA) */}
              <div className="rounded-xl border-2 border-emerald-300 bg-white p-5 space-y-4 shadow-xs">
                <div className="border-b-2 border-emerald-700 pb-2 flex justify-between items-center">
                  <h4 className="font-bold text-sm text-emerald-950 uppercase tracking-wider">
                    SISI KANAN: KEWAJIBAN & EKUITAS (PASIVA)
                  </h4>
                  <span className="text-[11px] font-mono font-semibold text-emerald-800">
                    Credit Balance
                  </span>
                </div>

                {/* 1. Kewajiban Lancar */}
                <div className="space-y-2">
                  <div className="flex justify-between font-bold text-xs text-slate-800 border-b border-slate-200 pb-1">
                    <span className="text-emerald-900">1. KEWAJIBAN LANCAR (JANGKA PENDEK):</span>
                    <span className="font-mono">
                      Rp {neracaData.totalKewajibanLancar.toLocaleString('id-ID')}
                    </span>
                  </div>
                  <div className="space-y-1.5 pl-2 text-xs text-slate-600">
                    {neracaData.kewajibanLancar.map((k) => (
                      <div key={k.akun.id} className="flex justify-between">
                        <span className="flex items-center gap-1.5">
                          <span className="font-mono font-bold text-emerald-800">{k.akun.kodeAkun}</span>
                          <span>{k.akun.namaAkun}</span>
                        </span>
                        <span className="font-mono font-medium">Rp {k.jumlah.toLocaleString('id-ID')}</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* 2. Kewajiban Jangka Panjang */}
                <div className="space-y-2 pt-2 border-t border-slate-200">
                  <div className="flex justify-between font-bold text-xs text-slate-800 border-b border-slate-200 pb-1">
                    <span className="text-emerald-900">2. KEWAJIBAN JANGKA PANJANG:</span>
                    <span className="font-mono">
                      Rp {neracaData.totalKewajibanJangkaPanjang.toLocaleString('id-ID')}
                    </span>
                  </div>
                  <div className="space-y-1.5 pl-2 text-xs text-slate-600">
                    {neracaData.kewajibanJangkaPanjang.map((k) => (
                      <div key={k.akun.id} className="flex justify-between">
                        <span className="flex items-center gap-1.5">
                          <span className="font-mono font-bold text-emerald-800">{k.akun.kodeAkun}</span>
                          <span>{k.akun.namaAkun}</span>
                        </span>
                        <span className="font-mono font-medium">Rp {k.jumlah.toLocaleString('id-ID')}</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Subtotal Kewajiban */}
                <div className="flex justify-between border-t border-slate-200 pt-1 font-semibold text-xs text-slate-800">
                  <span>Total Kewajiban (Utang)</span>
                  <span className="font-mono">
                    Rp {neracaData.totalKewajiban.toLocaleString('id-ID')}
                  </span>
                </div>

                {/* 3. Ekuitas / Modal */}
                <div className="space-y-2 pt-2 border-t border-slate-200">
                  <div className="flex justify-between font-bold text-xs text-slate-800 border-b border-slate-200 pb-1">
                    <span className="text-emerald-900">3. EKUITAS (MODAL & LABA DITAHAN):</span>
                    <span className="font-mono">
                      Rp {neracaData.totalEkuitas.toLocaleString('id-ID')}
                    </span>
                  </div>
                  <div className="space-y-1.5 pl-2 text-xs text-slate-600">
                    <div className="flex justify-between">
                      <span className="flex items-center gap-1.5">
                        <span className="font-mono font-bold text-emerald-800">3-1010</span>
                        <span>Modal Saham Disetor</span>
                      </span>
                      <span className="font-mono font-medium">
                        Rp {neracaData.modalDisetor.toLocaleString('id-ID')}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="flex items-center gap-1.5">
                        <span className="font-mono font-bold text-emerald-800">3-1020</span>
                        <span>Laba Ditahan (Retained Earnings) Awal</span>
                      </span>
                      <span className="font-mono font-medium">
                        Rp {neracaData.labaDitahanAwal.toLocaleString('id-ID')}
                      </span>
                    </div>
                    <div className="flex justify-between text-emerald-900 font-semibold bg-emerald-50/70 p-1.5 rounded">
                      <span className="flex items-center gap-1.5">
                        <TrendingUp className="h-3.5 w-3.5 text-emerald-600" />
                        <span>Laba Bersih Tahun Berjalan (dari Laba Rugi):</span>
                      </span>
                      <span className="font-mono font-bold">
                        + Rp {neracaData.labaBersihBerjalan.toLocaleString('id-ID')}
                      </span>
                    </div>
                    {neracaData.priveDividen > 0 && (
                      <div className="flex justify-between text-red-600">
                        <span>Prive / Dividen</span>
                        <span className="font-mono font-medium">
                          (Rp {neracaData.priveDividen.toLocaleString('id-ID')})
                        </span>
                      </div>
                    )}
                  </div>
                </div>

                {/* TOTAL PASIVA SISI KANAN (DOUBLE UNDERLINE) */}
                <div className="mt-6 border-t-2 border-slate-900 pt-3">
                  <div className="flex justify-between rounded-lg bg-emerald-800 p-3 font-bold text-white text-xs shadow-xs">
                    <span className="uppercase tracking-wider">TOTAL PASIVA (KEWAJIBAN & EKUITAS):</span>
                    <span className="font-mono text-sm text-emerald-200">
                      Rp {neracaData.totalPasiva.toLocaleString('id-ID')}
                    </span>
                  </div>
                  <div className="border-b-4 border-double border-slate-900 mt-1"></div>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* ========================================================= */}
        {/* TAB 5: MATRIKS PEMETAAN AKUN (EDUKASI LABA RUGI VS NERACA) */}
        {/* ========================================================= */}
        {activeTab === 'pemetaan' && (
          <div className="p-6 space-y-6">
            <div className="border-b border-slate-200 pb-3">
              <h3 className="text-base font-bold uppercase tracking-wider text-slate-900">
                Matriks Pemetaan Akun (Chart of Accounts Mapping Guide)
              </h3>
              <p className="text-xs text-slate-500">
                Panduan Edukatif: Memahami Akun Riil (Neraca) vs Akun Nominal (Laba Rugi) dan Alur Tutup Buku
              </p>
            </div>

            {/* Visual Guide Cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="rounded-xl border border-purple-200 bg-purple-50/60 p-4 space-y-2">
                <div className="flex items-center gap-2 font-bold text-purple-950 text-sm">
                  <span className="p-1.5 rounded-lg bg-purple-200 text-purple-800">
                    <Scale className="h-4 w-4" />
                  </span>
                  <span>1. Akun Neraca / Balance Sheet (Akun Riil / Permanen)</span>
                </div>
                <p className="text-xs text-slate-700 leading-relaxed">
                  Terdiri atas kode akun kepala <strong>1 (Aktiva/Aset)</strong>, <strong>2 (Kewajiban/Utang)</strong>, dan <strong>3 (Ekuitas/Modal)</strong>.
                </p>
                <div className="rounded-lg bg-white p-3 border border-purple-100 text-xs text-slate-700 space-y-1">
                  <div className="font-semibold text-purple-900">Karakteristik Utama:</div>
                  <div>• Saldonya bersifat <strong>kontinu (permanen)</strong> dan dibawa terus ke periode berikutnya.</div>
                  <div>• Tidak di-nol-kan pada saat proses Tutup Buku (Closing Entries).</div>
                  <div>• Membentuk posisi keuangan resmi perusahaan (Balance Sheet & Neraca Skontro).</div>
                </div>
              </div>

              <div className="rounded-xl border border-emerald-200 bg-emerald-50/60 p-4 space-y-2">
                <div className="flex items-center gap-2 font-bold text-emerald-950 text-sm">
                  <span className="p-1.5 rounded-lg bg-emerald-200 text-emerald-800">
                    <TrendingUp className="h-4 w-4" />
                  </span>
                  <span>2. Akun Laba Rugi (Akun Nominal / Sementara)</span>
                </div>
                <p className="text-xs text-slate-700 leading-relaxed">
                  Terdiri atas kode akun kepala <strong>4 (Pendapatan)</strong>, <strong>5 (Beban Pokok Pendapatan/HPP)</strong>, dan <strong>6 (Beban Operasional & Pajak)</strong>.
                </p>
                <div className="rounded-lg bg-white p-3 border border-emerald-100 text-xs text-slate-700 space-y-1">
                  <div className="font-semibold text-emerald-900">Karakteristik Utama:</div>
                  <div>• Mengukur performa profitabilitas operasional selama 1 periode kalender.</div>
                  <div>• Pada saat <strong>Tutup Buku</strong>, seluruh saldo akun nominal <strong>direset ke 0</strong>.</div>
                  <div>• Selisih (Pendapatan - Biaya) menjadi <strong>Laba/Rugi Bersih</strong> yang diserap ke akun Ekuitas Neraca.</div>
                </div>
              </div>
            </div>

            {/* Flowchart Diagram */}
            <div className="rounded-xl border border-slate-200 bg-slate-50 p-4 text-xs text-slate-800 space-y-3">
              <div className="font-bold text-slate-900 uppercase tracking-wider flex items-center gap-1.5">
                <ArrowRightLeft className="h-4 w-4 text-blue-600" />
                <span>Diagram Alir Siklus: Bagaimana Laba Rugi Mengalir ke Neraca</span>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-4 gap-2 text-center">
                <div className="rounded-lg bg-white p-3 border border-slate-200 shadow-xs">
                  <div className="font-bold text-blue-900">1. Pendapatan (4-xxx)</div>
                  <div className="text-[11px] text-slate-500 mt-1">Total: Rp {lrData.totalPendapatan.toLocaleString('id-ID')}</div>
                </div>
                <div className="rounded-lg bg-white p-3 border border-slate-200 shadow-xs">
                  <div className="font-bold text-amber-900">2. Biaya & Pajak (5-xxx & 6-xxx)</div>
                  <div className="text-[11px] text-slate-500 mt-1">Total: (Rp {(lrData.totalBiaya + lrData.bebanPajak).toLocaleString('id-ID')})</div>
                </div>
                <div className="rounded-lg bg-emerald-100 p-3 border border-emerald-300 shadow-xs font-bold text-emerald-950">
                  <div className="flex items-center justify-center gap-1">
                    <TrendingUp className="h-3.5 w-3.5 text-emerald-700" />
                    <span>3. Laba Bersih (EAT)</span>
                  </div>
                  <div className="text-xs font-mono mt-1 text-emerald-900">+ Rp {lrData.labaBersihSetelahPajak.toLocaleString('id-ID')}</div>
                </div>
                <div className="rounded-lg bg-purple-100 p-3 border border-purple-300 shadow-xs font-bold text-purple-950">
                  <div>4. Ekuitas di Neraca (3-xxx)</div>
                  <div className="text-xs font-mono mt-1 text-purple-900">Rp {capitalData.totalEkuitasAkhir.toLocaleString('id-ID')}</div>
                </div>
              </div>
            </div>

            {/* Interactive Mapping Table Filter */}
            <div className="flex items-center justify-between gap-3 pt-2">
              <h4 className="font-bold text-xs uppercase tracking-wider text-slate-800">
                Daftar Pemetaan Seluruh Akun ({filteredMappingAkuns.length} Akun Terdaftar)
              </h4>
              <div className="flex items-center gap-1.5 text-xs">
                <span className="text-slate-500">Filter Tampilan:</span>
                {(['SEMUA', 'Laba Rugi', 'Neraca'] as const).map((mode) => (
                  <button
                    key={mode}
                    onClick={() => setMappingFilter(mode)}
                    className={`px-3 py-1 rounded-md font-semibold cursor-pointer transition-colors ${
                      mappingFilter === mode
                        ? 'bg-blue-600 text-white shadow-xs'
                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                    }`}
                  >
                    {mode}
                  </button>
                ))}
              </div>
            </div>

            {/* Account Mapping Table */}
            <div className="overflow-x-auto rounded-lg border border-slate-200">
              <table className="w-full text-left text-xs border-collapse">
                <thead className="bg-slate-100 text-slate-700 uppercase font-semibold">
                  <tr>
                    <th className="py-2.5 px-4">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">Klasifikasi Sifat Akun</th>
                    <th className="py-2.5 px-4">Muara Saldo Akhir</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-200 bg-white">
                  {filteredMappingAkuns.map((a) => {
                    const isNeraca = a.posLaporan === 'Neraca';
                    return (
                      <tr key={a.id} className="hover:bg-slate-50">
                        <td className="py-2.5 px-4 font-mono font-bold text-blue-900">{a.kodeAkun}</td>
                        <td className="py-2.5 px-4 font-medium text-slate-800">{a.namaAkun}</td>
                        <td className="py-2.5 px-3 text-slate-600">{a.kategori}</td>
                        <td className="py-2.5 px-3 text-center">
                          <span
                            className={`rounded px-2 py-0.5 text-[10px] font-semibold ${
                              a.posSaldo === 'Debet' ? 'bg-blue-100 text-blue-800' : 'bg-amber-100 text-amber-800'
                            }`}
                          >
                            {a.posSaldo}
                          </span>
                        </td>
                        <td className="py-2.5 px-3 text-center">
                          <span
                            className={`rounded px-2 py-0.5 text-[10px] font-semibold ${
                              isNeraca ? 'bg-purple-100 text-purple-800' : 'bg-emerald-100 text-emerald-800'
                            }`}
                          >
                            {a.posLaporan}
                          </span>
                        </td>
                        <td className="py-2.5 px-3">
                          <span className="text-slate-700 font-medium">
                            {isNeraca ? 'Akun Riil (Permanen)' : 'Akun Nominal (Sementara)'}
                          </span>
                        </td>
                        <td className="py-2.5 px-4 text-slate-600">
                          {isNeraca ? (
                            <span className="text-purple-900 font-medium">
                              Dibawa kontinu ke Neraca & Balance Sheet
                            </span>
                          ) : (
                            <span className="text-emerald-900 font-medium">
                              Dihitung di Laba Rugi → Ditutup ke Ekuitas
                            </span>
                          )}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* ========================================================= */}
        {/* TAB 6: LAPORAN ARUS KAS (STATEMENT OF CASH FLOWS) */}
        {/* ========================================================= */}
        {activeTab === 'aruskas' && (
          <div className="p-6 space-y-6">
            <div className="border-b border-slate-200 pb-3">
              <h3 className="text-base font-bold uppercase tracking-wider text-slate-900">
                Laporan Arus Kas (Statement of Cash Flows)
              </h3>
              <p className="text-xs text-slate-500">
                Penerimaan dan Pengeluaran Kas Berdasarkan Aktivitas Operasi, Investasi, dan Pendanaan
              </p>
            </div>

            <div className="max-w-3xl mx-auto rounded-xl border border-slate-200 bg-white p-6 text-xs space-y-4 shadow-xs">
              {/* Header */}
              <div className="text-center border-b border-slate-200 pb-3">
                <h4 className="font-bold text-sm text-slate-900 uppercase">
                  PT TIO MANDIRI JAYA - LAPORAN ARUS KAS
                </h4>
                <p className="text-xs text-slate-500">Metode Langsung - Periode {activePeriode.namaPeriode}</p>
              </div>

              {/* I. Operasi */}
              <div className="space-y-2">
                <div className="flex justify-between font-bold text-slate-800 border-b border-slate-200 pb-1">
                  <span className="uppercase tracking-wider text-blue-900">I. ARUS KAS DARI AKTIVITAS OPERASI</span>
                </div>
                <div className="space-y-1.5 pl-3 text-slate-600">
                  <div className="flex justify-between">
                    <span>Penerimaan Kas dari Pelanggan & Penjualan Jasa</span>
                    <span className="font-mono font-semibold text-emerald-700">
                      Rp {arusKasData.penerimaanPelanggan.toLocaleString('id-ID')}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span>Penerimaan Bunga / Jasa Giro Bank</span>
                    <span className="font-mono font-semibold text-emerald-700">
                      Rp {arusKasData.penerimaanBunga.toLocaleString('id-ID')}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span>Pembayaran Kas kepada Pemasok Barang & HPP</span>
                    <span className="font-mono text-red-700">
                      (Rp {arusKasData.pembayaranPemasokHPP.toLocaleString('id-ID')})
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span>Pembayaran Beban Operasional, Gaji & Utilitas</span>
                    <span className="font-mono text-red-700">
                      (Rp {arusKasData.pembayaranBebanOperasional.toLocaleString('id-ID')})
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span>Pembayaran Pajak Penghasilan (PPh)</span>
                    <span className="font-mono text-red-700">
                      (Rp {arusKasData.pembayaranPajak.toLocaleString('id-ID')})
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span>Pembayaran Biaya Administrasi Bank</span>
                    <span className="font-mono text-red-700">
                      {arusKasData.pembayaranBiayaBank > 0
                        ? `(Rp ${arusKasData.pembayaranBiayaBank.toLocaleString('id-ID')})`
                        : 'Rp 0'}
                    </span>
                  </div>
                  <div className="flex justify-between font-bold text-slate-900 border-t border-slate-200 pt-1 bg-slate-50 p-1.5 rounded">
                    <span>Arus Kas Bersih dari Aktivitas Operasi:</span>
                    <span className="font-mono">
                      Rp {arusKasData.arusKasBersihOperasi.toLocaleString('id-ID')}
                    </span>
                  </div>
                </div>
              </div>

              {/* II. Investasi */}
              <div className="space-y-2 pt-2 border-t border-slate-200">
                <div className="flex justify-between font-bold text-slate-800 border-b border-slate-200 pb-1">
                  <span className="uppercase tracking-wider text-blue-900">II. ARUS KAS DARI AKTIVITAS INVESTASI</span>
                </div>
                <div className="space-y-1.5 pl-3 text-slate-600">
                  <div className="flex justify-between">
                    <span>Pembelian Aset Tetap (Peralatan / Kendaraan)</span>
                    <span className="font-mono text-red-700">
                      {arusKasData.pembelianAsetTetap > 0
                        ? `(Rp ${arusKasData.pembelianAsetTetap.toLocaleString('id-ID')})`
                        : 'Rp 0'}
                    </span>
                  </div>
                  <div className="flex justify-between font-bold text-slate-900 border-t border-slate-200 pt-1 bg-slate-50 p-1.5 rounded">
                    <span>Arus Kas Bersih dari Aktivitas Investasi:</span>
                    <span className="font-mono">
                      Rp {arusKasData.arusKasBersihInvestasi.toLocaleString('id-ID')}
                    </span>
                  </div>
                </div>
              </div>

              {/* III. Pendanaan */}
              <div className="space-y-2 pt-2 border-t border-slate-200">
                <div className="flex justify-between font-bold text-slate-800 border-b border-slate-200 pb-1">
                  <span className="uppercase tracking-wider text-blue-900">III. ARUS KAS DARI AKTIVITAS PENDANAAN</span>
                </div>
                <div className="space-y-1.5 pl-3 text-slate-600">
                  <div className="flex justify-between">
                    <span>Penerimaan dari Setoran Modal Saham Pemilik</span>
                    <span className="font-mono">
                      Rp {arusKasData.setoranModalPemilik.toLocaleString('id-ID')}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span>Penerimaan Pinjaman Bank</span>
                    <span className="font-mono">
                      Rp {arusKasData.penerimaanPinjamanBank.toLocaleString('id-ID')}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span>Penarikan Modal / Pembagian Dividen / Prive</span>
                    <span className="font-mono text-red-700">
                      {arusKasData.penarikanPriveDividen > 0
                        ? `(Rp ${arusKasData.penarikanPriveDividen.toLocaleString('id-ID')})`
                        : 'Rp 0'}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span>Pembayaran Pinjaman Bank</span>
                    <span className="font-mono text-red-700">
                      {arusKasData.pembayaranPinjamanBank > 0
                        ? `(Rp ${arusKasData.pembayaranPinjamanBank.toLocaleString('id-ID')})`
                        : 'Rp 0'}
                    </span>
                  </div>
                  <div className="flex justify-between font-bold text-slate-900 border-t border-slate-200 pt-1 bg-slate-50 p-1.5 rounded">
                    <span>Arus Kas Bersih dari Aktivitas Pendanaan:</span>
                    <span className="font-mono">
                      Rp {arusKasData.arusKasBersihPendanaan.toLocaleString('id-ID')}
                    </span>
                  </div>
                </div>
              </div>

              {/* Rekapitulasi Kas */}
              <div className="space-y-2 rounded-lg bg-blue-50/70 p-3.5 border border-blue-200 font-semibold text-slate-800">
                <div className="flex justify-between">
                  <span>KENAIKAN (PENURUNAN) NETO KAS DAN SETARA KAS:</span>
                  <span className="font-mono font-bold text-blue-900">
                    Rp {arusKasData.kenaikanNetoKas.toLocaleString('id-ID')}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span>KAS DAN SETARA KAS AWAL TAHUN / PERIODE:</span>
                  <span className="font-mono">
                    Rp {arusKasData.kasAwalPeriode.toLocaleString('id-ID')}
                  </span>
                </div>
                <div className="flex justify-between border-t border-blue-200 pt-1.5 font-bold text-blue-950 text-sm">
                  <span>KAS DAN SETARA KAS AKHIR TAHUN / PERIODE:</span>
                  <span className="font-mono text-emerald-700">
                    Rp {arusKasData.kasAkhirPeriode.toLocaleString('id-ID')}
                  </span>
                </div>
                <div className={`flex justify-between border-t pt-2 text-[11px] ${kasReconciled ? 'border-emerald-200 text-emerald-700' : 'border-amber-200 text-amber-700'}`}>
                  <span>Rekonsiliasi mutasi Kas/Bank terhadap 3 aktivitas:</span>
                  <span className="font-mono font-bold">
                    {kasReconciled ? 'SEIMBANG (Rp 0)' : `Selisih Rp ${selisihRekonsiliasiKas.toLocaleString('id-ID')}`}
                  </span>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* ========================================================= */}
        {/* TAB 7: REPORT SUMMARY & GOP */}
        {/* ========================================================= */}
        {activeTab === 'summary' && (
          <div className="p-6 space-y-6">
            <div className="border-b border-slate-200 pb-3">
              <h3 className="text-base font-bold uppercase tracking-wider text-slate-900">
                Executive Report Summary & Analisis GOP
              </h3>
              <p className="text-xs text-slate-500">
                Ringkasan Eksekutif Komponen Finansial: Pendapatan, Biaya, GOP, dan Perpajakan
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div className="rounded-xl border border-blue-200 bg-white p-4 shadow-xs">
                <div className="text-xs font-semibold text-slate-500">1. TOTAL PENDAPATAN</div>
                <div className="text-lg font-bold text-blue-900 font-mono mt-1">
                  Rp {lrData.totalPendapatan.toLocaleString('id-ID')}
                </div>
                <div className="text-[11px] text-slate-500 mt-2">
                  Usaha: Rp {lrData.totalPendapatanUsaha.toLocaleString('id-ID')}
                </div>
              </div>

              <div className="rounded-xl border border-amber-200 bg-white p-4 shadow-xs">
                <div className="text-xs font-semibold text-slate-500">2. TOTAL BIAYA & HPP</div>
                <div className="text-lg font-bold text-amber-900 font-mono mt-1">
                  Rp {lrData.totalBiaya.toLocaleString('id-ID')}
                </div>
                <div className="text-[11px] text-slate-500 mt-2">
                  HPP: Rp {lrData.totalHPP.toLocaleString('id-ID')}
                </div>
              </div>

              <div className="rounded-xl border border-cyan-200 bg-white p-4 shadow-xs">
                <div className="text-xs font-semibold text-slate-500">3. GROSS OPERATING PROFIT (GOP)</div>
                <div className="text-lg font-bold text-cyan-900 font-mono mt-1">
                  Rp {lrData.labaKotorGOP.toLocaleString('id-ID')}
                </div>
                <div className="text-[11px] text-cyan-700 font-semibold mt-2">
                  Gross Profit Margin: {grossMargin.toFixed(1)}%
                </div>
              </div>

              <div className="rounded-xl border border-emerald-200 bg-white p-4 shadow-xs">
                <div className="text-xs font-semibold text-slate-500">4. LABA BERSIH (EAT)</div>
                <div className="text-lg font-bold text-emerald-900 font-mono mt-1">
                  Rp {lrData.labaBersihSetelahPajak.toLocaleString('id-ID')}
                </div>
                <div className="text-[11px] text-emerald-700 font-semibold mt-2">
                  Net Profit Margin: {netMargin.toFixed(1)}%
                </div>
              </div>
            </div>

            {/* Comparison Bar */}
            <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-xs text-xs space-y-4">
              <h4 className="font-bold text-slate-800 uppercase tracking-wider">
                Visualisasi Proporsi Finansial PT Tio Mandiri Jaya
              </h4>

              <div className="space-y-3">
                <div>
                  <div className="flex justify-between font-semibold text-slate-700 mb-1">
                    <span>Pendapatan Usaha (Baseline 100%)</span>
                    <span className="font-mono">Rp {lrData.totalPendapatanUsaha.toLocaleString('id-ID')}</span>
                  </div>
                  <div className="h-3 w-full rounded-full bg-slate-100 overflow-hidden">
                    <div className="h-full bg-blue-600 rounded-full" style={{ width: '100%' }}></div>
                  </div>
                </div>

                <div>
                  <div className="flex justify-between font-semibold text-slate-700 mb-1">
                    <span>Gross Operating Profit (GOP): {grossMargin.toFixed(1)}%</span>
                    <span className="font-mono">Rp {lrData.labaKotorGOP.toLocaleString('id-ID')}</span>
                  </div>
                  <div className="h-3 w-full rounded-full bg-slate-100 overflow-hidden">
                    <div
                      className="h-full bg-cyan-500 rounded-full"
                      style={{ width: `${Math.min(100, Math.max(0, grossMargin))}%` }}
                    ></div>
                  </div>
                </div>

                <div>
                  <div className="flex justify-between font-semibold text-slate-700 mb-1">
                    <span>Laba Bersih Setelah Pajak (EAT): {netMargin.toFixed(1)}%</span>
                    <span className="font-mono">Rp {lrData.labaBersihSetelahPajak.toLocaleString('id-ID')}</span>
                  </div>
                  <div className="h-3 w-full rounded-full bg-slate-100 overflow-hidden">
                    <div
                      className="h-full bg-emerald-500 rounded-full"
                      style={{ width: `${Math.min(100, Math.max(0, netMargin))}%` }}
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* TAB 8: ANALISIS RASIO KEUANGAN (LIKUIDITAS & SOLVABILITAS) */}
        {activeTab === 'rasio' && (
          <div className="p-6">
            <AnalisisRasioView
              akuns={carryingAkuns}
              journals={periodJournals}
              profile={profile}
              activePeriode={activePeriode}
              onNavigateToNeraca={() => handleSelectTab('balancesheet')}
              onNavigateToLabaRugi={() => handleSelectTab('labarugi')}
            />
          </div>
        )}

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