import ConfirmAlert from '@/components/custom-alert/custom-alert';
import { Button } from '@/components/ui/button';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
} from '@/components/ui/command';
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle,
} from '@/components/ui/empty';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Pagination,
    PaginationContent,
    PaginationItem,
    PaginationLink,
    PaginationNext,
    PaginationPrevious,
} from '@/components/ui/pagination';
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from '@/components/ui/popover';
import { ScrollArea } from '@/components/ui/scroll-area';
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { useAuthBreadcrumbOperator } from '@/hooks/use-auth-breadcrumb-operator';
import AppLayout from '@/layouts/app-layout';
import { cn } from '@/lib/utils';
import {
    Kelompok,
    RincianBelanja,
    Satuan,
    SubKegiatan,
    SubRekening,
} from '@/types';
import { Head, Link, router, useForm } from '@inertiajs/react';
import {
    ArrowLeft,
    Check,
    ChevronsUpDown,
    CookingPot,
    FileDown,
    FolderCodeIcon,
    Gift,
    List,
    ListOrdered,
    PlusCircle,
    Trash2,
    X,
} from 'lucide-react';
import React, { useEffect, useRef, useState } from 'react';
import { toast, Toaster } from 'sonner';

// konversi nilai possible-formatted (e.g. "1.000.000" | "1.000.000,50" | 1000) -> number
const parseCurrencyToNumber = (val: any): number => {
    if (val === null || val === undefined || val === '') return 0;
    if (typeof val === 'number' && Number.isFinite(val)) return val;

    let str = String(val).trim();

    // Jika format seperti "23.172,50" -> koma desimal, titik ribuan
    if (str.includes(',') && str.includes('.')) {
        // Hapus titik (ribuan), ubah koma menjadi titik
        str = str.replace(/\./g, '').replace(',', '.');
    }
    // Jika format seperti "23172,50" -> hanya koma desimal
    else if (str.includes(',')) {
        str = str.replace(',', '.');
    }
    // Jika format seperti "23.172" -> titik ribuan (bukan desimal)
    else if (str.includes('.')) {
        const parts = str.split('.');
        // Jika panjang terakhir <= 2 berarti titik kemungkinan desimal
        if (parts[parts.length - 1].length > 2) {
            // titik dianggap pemisah ribuan -> hapus
            str = str.replace(/\./g, '');
        }
    }

    const n = parseFloat(str);
    return Number.isFinite(n) ? n : 0;
};

const formatRupiahTitik = (number: number): string => {
    if (!number) return 'Rp 0';
    return `Rp ${number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')}`;
};

const formatUang = (number: number): string => {
    if (!number) return '0';
    return `${number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')}`;
};

type AlertType = 'delete';

interface Props {
    subKegiatan: SubKegiatan;
    subRekeningList: SubRekening[];
    kelompokList: Kelompok[];
    satuanList: Satuan[];
}

interface HierarchicalRincian {
    nama: string;
    total: number;
    komponen: {
        [komponenId: number]: {
            nama: string;
            total: number;
            rincian: RincianBelanja[];
        };
    };
}

export default function RincianBelanjaIndex({
    subKegiatan,
    subRekeningList,
    kelompokList,
    satuanList,
}: Props) {
    const breadcrumbs = useAuthBreadcrumbOperator();
    const [openModalPengelompokan, setOpenModalPengelompokan] = useState(false);
    const [openModalRincian, setOpenModalRincian] = useState(false);
    const [openModalRicianItem, setOpenModalRincianItem] = useState(false);

    // state komponen
    const [subRekeningId, setSubRekeningId] = useState<number | null>(null);
    const [kelompokId, setKelompokId] = useState<number | null>(null);
    const [komponen, setKomponen] = useState('-- Pilih --');
    const [spesifikasi, setSpesifikasi] = useState('');
    const [satuan, setSatuan] = useState('');
    const [hargaSatuan, setHargaSatuan] = useState<number>(0);

    // untuk edit dan hapus data
    const rincianIdRef = useRef<number | null>(null);

    // filter modal item
    const [searchItem, setSearchItem] = useState('');
    const [filterJenis, setFilterJenis] = useState('');

    // pesan error dan sukses
    const [selectedRincian, setSelectedRincian] =
        useState<RincianBelanja | null>(null);
    const [openAlert, setOpenAlert] = useState(false);
    const [alertType, setAlertType] = useState<AlertType>();

    // pencarian dan paginate
    const [searchQuery, setSearchQuery] = useState('');
    const [currentPage, setCurrentPage] = useState(1);
    const [itemsPerPage, setItemsPerPage] = useState<number | 'all'>(10);

    // koefisien dinamis
    const [koefisienList, setKoefisienList] = useState<
        { jumlah: number | string; satuan: string }[]
    >([{ jumlah: 1, satuan: '' }]);

    // hasil perhitungan
    const [volume, setVolume] = useState(0);
    const [koefisienString, setKoefisienString] = useState('');
    const [totalBelanja, setTotalBelanja] = useState(0);

    const kelompokForm = useForm({
        nama_kelompok: '',
    });

    // search satuan combobox
    const [satuanOptions, setSatuanOptions] = useState<
        { id: number; nama: string }[]
    >([]);
    const [openSearchSatuan, setOpenSearchSatuan] = useState<number | null>(
        null,
    );
    const [loadingSatuan, setLoadingSatuan] = useState(true);

    // Filter data berdasarkan pencarian
    const filteredRincian = subKegiatan.rincian_belanjas.filter((rincian) => {
        const keyword = searchQuery.toLowerCase();
        return (
            rincian.sub_rekening?.nama.toLowerCase().includes(keyword) ||
            rincian.sub_rekening?.spesifikasi.toLowerCase().includes(keyword) ||
            rincian.kelompok?.nama?.toLowerCase().includes(keyword) ||
            rincian.sub_rekening?.rekening?.nama.toLowerCase().includes(keyword)
        );
    });

    // pagination
    const totalPages =
        itemsPerPage === 'all'
            ? 1
            : Math.ceil(filteredRincian.length / Number(itemsPerPage));

    const paginatedRincian =
        itemsPerPage === 'all'
            ? filteredRincian
            : filteredRincian.slice(
                  (currentPage - 1) * Number(itemsPerPage),
                  currentPage * Number(itemsPerPage),
              );

    const handleSimpanRincian = (e: React.FormEvent) => {
        e.preventDefault();

        if (!subRekeningId) {
            toast.error('Pilih Sub Rekening dan Kelompok Belanja!');
            return;
        }

        const payload = {
            sub_rekening_id: subRekeningId,
            sub_kegiatan_id: subKegiatan.id,
            kelompok_id: kelompokId || null,
            volume,
            anggaran: totalBelanja,
            koefisien: koefisienList,
            keterangan: spesifikasi || null,
        };

        // kalau ada rincianIdRef berarti mode edit
        if (rincianIdRef.current) {
            router.put(
                route('rincian-belanja.update', rincianIdRef.current),
                payload,
                {
                    onSuccess: () => {
                        resetInputs();
                        setOpenModalRincian(false);
                        rincianIdRef.current = null;
                    },
                    onError: (errors) => {
                        Object.values(errors).forEach((msg: any) => {
                            toast.error(String(msg));
                        });
                    },
                },
            );
        } else {
            router.post(route('rincian-belanja.store'), payload, {
                onSuccess: () => {
                    resetInputs();
                    setOpenModalRincian(false);
                },
                onError: (errors) => {
                    Object.values(errors).forEach((msg: any) => {
                        toast.error(String(msg));
                    });
                },
            });
        }
    };

    const handleSimpanKelompokBelanja = (e: React.FormEvent) => {
        e.preventDefault();
        console.log('🚀 Data dikirim ke backend:', kelompokForm.data);

        router.post(route('kelompok-belanja.store'), kelompokForm.data, {
            onSuccess: () => {
                kelompokForm.reset();
                setOpenModalPengelompokan(false);
            },
        });
    };

    const resetInputs = () => {
        setKomponen('-- Pilih --');
        setSpesifikasi('');
        setSatuan('');
        setHargaSatuan(Number('0'));
        setKoefisienList([{ jumlah: 1, satuan: '' }]);
        setVolume(0);
        setKoefisienString('');
        setTotalBelanja(0);
        setSubRekeningId(null);
        setKelompokId(null);
        rincianIdRef.current = null;
    };

    const handleSelect = (item: SubRekening) => {
        setSubRekeningId(item.id);
        setKomponen(item.nama);
        setSpesifikasi(item.spesifikasi);
        setSatuan(item.satuan);
        setHargaSatuan(Number(item.harga_satuan));
        setOpenModalRincianItem(false);
    };

    // use effect satuan
    useEffect(() => {
        const fetchSatuan = async () => {
            try {
                const res = await fetch('/api/satuan'); // Endpoint API Anda
                const data = await res.json();
                setSatuanOptions(data);
            } catch (err) {
                console.error('Gagal memuat satuan:', err);
            } finally {
                setLoadingSatuan(false);
            }
        };

        fetchSatuan();
    }, []);

    useEffect(() => {
        const vol = koefisienList.reduce(
            (acc, k) => acc * (Number(k.jumlah) || 1),
            1,
        );
        setVolume(vol);

        const ket = koefisienList
            .filter((k) => k.jumlah && k.satuan)
            .map((k) => `${k.jumlah} ${k.satuan}`)
            .join(' x ');
        setKoefisienString(ket);

        setTotalBelanja(vol * Number(hargaSatuan || 0));
    }, [koefisienList, hargaSatuan]);

    const updateJumlah = (index: number, value: string) => {
        const newList = [...koefisienList];
        newList[index].jumlah = value === '' ? '' : Number(value);
        setKoefisienList(newList);
    };

    const updateSatuan = (index: number, value: string) => {
        const newList = [...koefisienList];
        newList[index].satuan = value;
        setKoefisienList(newList);
    };

    const addKoefisien = () => {
        setKoefisienList([...koefisienList, { jumlah: 1, satuan: '' }]);
    };

    const handleEdit = (rincian: RincianBelanja) => {
        // pastikan koefisien berbentuk array
        let parsedKoefisien: { jumlah: number; satuan: string }[] = [];

        try {
            if (rincian.koefisien) {
                if (typeof rincian.koefisien === 'string') {
                    parsedKoefisien = JSON.parse(rincian.koefisien);
                } else if (Array.isArray(rincian.koefisien)) {
                    parsedKoefisien = rincian.koefisien;
                }
            }
        } catch (e) {
            console.error('Gagal parse koefisien:', e);
            parsedKoefisien = [];
        }

        // kalau kosong isi default
        if (!parsedKoefisien || parsedKoefisien.length === 0) {
            parsedKoefisien = [
                {
                    jumlah: Number(rincian.volume) || 0,
                    satuan: rincian.sub_rekening?.satuan || '',
                },
            ];
        }

        // isi state untuk modal (deep copy supaya tidak memodifikasi data asli)
        setSubRekeningId(rincian.sub_rekening_id);
        setKelompokId(rincian.kelompok_id);
        setKomponen(rincian.sub_rekening?.nama || '-- Pilih --');
        setSpesifikasi(rincian.sub_rekening?.spesifikasi || '');
        setSatuan(rincian.sub_rekening?.satuan || '');
        setHargaSatuan(Number(rincian.sub_rekening?.harga_satuan || '0'));
        setKoefisienList(parsedKoefisien.map((item) => ({ ...item }))); // << deep copy
        setVolume(Number(rincian.volume) || 0);
        setTotalBelanja(Number(rincian.anggaran) || 0);

        setOpenModalRincian(true);

        // simpan id supaya tahu ini edit
        rincianIdRef.current = rincian.id;
    };

    const handleDelete = (id: number) => {
        router.delete(route('rincian-belanja.destroy', id), {
            onSuccess: () => {
                resetInputs();
            },
        });
    };

    const filteredItems = subRekeningList.filter((item) => {
        const matchSearch =
            item.nama.toLowerCase().includes(searchItem.toLowerCase()) ||
            item.spesifikasi.toLowerCase().includes(searchItem.toLowerCase());

        const matchJenis =
            filterJenis && filterJenis !== 'all'
                ? item.jenis === filterJenis
                : true;

        return matchSearch && matchJenis;
    });

    // Grouping Rekening -> Komponen -> SubRekening
    const hierarchicalData = paginatedRincian.reduce(
        (acc: Record<number, HierarchicalRincian>, rincian) => {
            const rekeningId = rincian.sub_rekening?.rekening?.id ?? 0;
            const rekeningNama =
                rincian.sub_rekening?.rekening?.nama ?? 'Tanpa Rekening';

            const komponenId = rincian.kelompok_id ?? 0;
            const komponenNama = rincian.kelompok?.nama ?? '-';

            // Jika rekening belum ada, inisialisasi
            if (!acc[rekeningId]) {
                acc[rekeningId] = {
                    nama: rekeningNama,
                    total: 0,
                    komponen: {},
                };
            }

            // Jika komponen belum ada, inisialisasi
            if (!acc[rekeningId].komponen[komponenId]) {
                acc[rekeningId].komponen[komponenId] = {
                    nama: komponenNama,
                    total: 0,
                    rincian: [],
                };
            }

            // Update total dan push rincian
            acc[rekeningId].total += Number(rincian.anggaran ?? 0);
            acc[rekeningId].komponen[komponenId].total += Number(
                rincian.anggaran ?? 0,
            );
            acc[rekeningId].komponen[komponenId].rincian.push(rincian);

            return acc;
        },
        {} as Record<number, HierarchicalRincian>,
    );

    // Hitung total keseluruhan
    const grandTotal = Object.values(hierarchicalData).reduce(
        (sum, rek) => sum + rek.total,
        0,
    );

    const handleCetakPDF = () => {
        const doc = new jsPDF({
            orientation: 'portrait',
            unit: 'mm',
            format: 'a4',
        });

        // Judul
        doc.setFontSize(14);
        doc.text('Rincian Belanja BKPSDM', 14, 15);

        doc.setFontSize(11);
        doc.text(`Sub Kegiatan: ${subKegiatan?.nama || '-'}`, 14, 22);

        // === BODY PDF ===
        const tableBody: any[] = [];
        let grandTotal = 0;

        Object.entries(hierarchicalData).forEach(([rekId, rekData]) => {
            // Hitung total rekening
            const totalRekening = rekData.komponen
                ? Object.values(rekData.komponen).reduce((total, komp: any) => {
                      return (
                          total +
                          komp.rincian.reduce(
                              (sum: number, item: any) =>
                                  sum + Number(item.anggaran || 0),
                              0,
                          )
                      );
                  }, 0)
                : 0;

            grandTotal += totalRekening;

            // === Baris Rekening ===
            tableBody.push([
                {
                    content: rekData.nama,
                    colSpan: 3,
                    styles: {
                        halign: 'left',
                        fontStyle: 'bold',
                        fillColor: [220, 225, 230], // abu-abu
                    },
                },
                {
                    content: `Rp ${formatRupiahTitik(totalRekening)}`,
                    styles: {
                        halign: 'right',
                        fontStyle: 'bold',
                        fillColor: [220, 225, 230],
                    },
                },
            ]);

            // === Loop Komponen ===
            Object.entries(rekData.komponen).forEach(
                ([kompId, kompData]: any) => {
                    const totalKomponen = kompData.rincian.reduce(
                        (sum: number, item: any) =>
                            sum + Number(item.anggaran || 0),
                        0,
                    );

                    // Baris Komponen
                    tableBody.push([
                        {
                            content: `[-] ${kompData.nama}`,
                            colSpan: 3,
                            styles: {
                                halign: 'left',
                                fontStyle: 'bold',
                                fillColor: [245, 245, 245], // abu-abu terang
                            },
                        },
                        {
                            content: `Rp ${formatRupiahTitik(totalKomponen)}`,
                            styles: {
                                halign: 'right',
                                fontStyle: 'bold',
                                fillColor: [245, 245, 245],
                            },
                        },
                    ]);

                    // === Loop Rincian Belanja ===
                    kompData.rincian.forEach((item: any) => {
                        const parsedKoefisien =
                            typeof item.koefisien === 'string'
                                ? JSON.parse(item.koefisien)
                                : item.koefisien || [];

                        const koefisienText =
                            parsedKoefisien.length > 0
                                ? parsedKoefisien
                                      .map(
                                          (k: any) => `${k.jumlah} ${k.satuan}`,
                                      )
                                      .join(' x ')
                                : '-';

                        tableBody.push([
                            {
                                content: `- ${item.sub_rekening?.nama || '-'}\n(${item.keterangan || '-'})`,
                                styles: {
                                    halign: 'left',
                                    fontStyle: 'normal',
                                },
                            },
                            {
                                content: koefisienText,
                                styles: { halign: 'center' },
                            },
                            {
                                content: `Rp ${formatRupiahTitik(Number(item.sub_rekening?.harga_satuan || 0))}`,
                                styles: { halign: 'right' },
                            },
                            {
                                content: `Rp ${formatRupiahTitik(Number(item.anggaran || 0))}`,
                                styles: { halign: 'right' },
                            },
                        ]);
                    });
                },
            );
        });

        // === TOTAL KESELURUHAN ===
        tableBody.push([
            {
                content: 'Total Keseluruhan',
                colSpan: 3,
                styles: {
                    halign: 'right',
                    fontStyle: 'bold',
                    fillColor: [230, 230, 230],
                },
            },
            {
                content: `Rp ${formatRupiahTitik(grandTotal)}`,
                styles: {
                    halign: 'right',
                    fontStyle: 'bold',
                    fillColor: [230, 230, 230],
                },
            },
        ]);

        // === Generate AutoTable ===
        autoTable(doc, {
            startY: 30,
            head: [['Uraian', 'Koefisien', 'Harga Satuan', 'Jumlah']],
            body: tableBody,
            theme: 'grid',
            styles: {
                fontSize: 9,
                cellPadding: 2,
                valign: 'middle',
            },
            headStyles: {
                fillColor: [0, 112, 74],
                textColor: [255, 255, 255],
                fontStyle: 'bold',
                halign: 'center',
            },
        });

        // Simpan PDF
        const fileName = (subKegiatan?.nama || 'Laporan').replace(/\s+/g, '_');
        doc.save(`Rincian Sub Kegiatan ${fileName}.pdf`);
    };

    const totalRincian = subKegiatan?.rincian_belanjas.reduce(
        (sum, rincian) => sum + parseCurrencyToNumber(rincian.anggaran),
        0,
    );

    const sisaAnggaran =
        parseCurrencyToNumber(subKegiatan?.anggaran) - totalRincian;

    const atasCards = [
        {
            title: 'Total Anggaran',
            description: 'Total anggaran sub rekening',
            amount: formatRupiahTitik(
                parseCurrencyToNumber(subKegiatan?.anggaran),
            ),
            bgColor: 'bg-amber-200',
            iconBg: 'bg-amber-100',
            iconColor: 'text-amber-200',
            Icon: Gift,
        },
        {
            title: 'Sisa Anggaran',
            description: 'Sisa anggaran yang belum diinput',
            amount: formatRupiahTitik(parseCurrencyToNumber(sisaAnggaran)),
            bgColor: 'bg-emerald-200',
            iconBg: 'bg-emerald-100',
            iconColor: 'text-emerald-200',
            Icon: CookingPot,
        },
    ];

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Rincian Belanja" />
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
                <div className="flex items-center justify-between">
                    <span className="text-black-700 text-lg font-medium">
                        <Label className="font-bold">
                            Sub Kegiatan : {`${subKegiatan.nama}`}
                        </Label>
                    </span>
                    <Link href="/dashboard/operator">
                        <Button
                            variant="outline"
                            size={'sm'}
                            className="bg-red-500 text-white"
                        >
                            <ArrowLeft className="h-4 w-4" />
                        </Button>
                    </Link>
                </div>
                <div className="grid auto-rows-min gap-4 md:grid-cols-2">
                    {atasCards.map((card, index) => (
                        <Card
                            key={index}
                            className={`relative ${card.bgColor}`}
                        >
                            <CardHeader>
                                <CardTitle className="dark:text-black">
                                    {card.title}
                                </CardTitle>
                                <CardDescription className="text-xs dark:text-black">
                                    {card.description}
                                </CardDescription>
                                <div
                                    className={`absolute top-4 right-4 rounded-full ${card.iconBg} p-2`}
                                >
                                    <card.Icon
                                        className={`h-9 w-9 ${card.iconColor}`}
                                    />
                                </div>
                            </CardHeader>
                            <CardContent className="text-2xl font-bold dark:text-black">
                                {card.amount}
                            </CardContent>
                        </Card>
                    ))}
                </div>
                <div className="mt-2 flex flex-row justify-between">
                    <div className="flex flex-row items-center justify-between gap-2">
                        {subKegiatan.rincian_belanjas.length > 0 ? (
                            <div className="flex items-center gap-2">
                                <Input
                                    className="w-[300px]"
                                    type="text"
                                    placeholder="Pencarian..."
                                    value={searchQuery}
                                    onChange={(e) => {
                                        setSearchQuery(e.target.value);
                                        setCurrentPage(1);
                                    }}
                                />
                                <Select
                                    value={itemsPerPage.toString()}
                                    onValueChange={(val) => {
                                        setItemsPerPage(
                                            val === 'all' ? 'all' : Number(val),
                                        );
                                        setCurrentPage(1); // reset halaman saat ganti limit
                                    }}
                                >
                                    <SelectTrigger className="w-[100px]">
                                        <SelectValue placeholder="Per halaman" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="10">10</SelectItem>
                                        <SelectItem value="100">100</SelectItem>
                                        <SelectItem value="all">All</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        ) : null}
                    </div>

                    <div className="flex gap-2">
                        {subKegiatan.pivot?.can_create ? (
                            <Button
                                variant="default"
                                size="sm"
                                className="ms-4 bg-emerald-500 text-xs hover:bg-emerald-600"
                                onClick={() => {
                                    setOpenModalRincian(true);
                                }}
                            >
                                <PlusCircle className="me-2 h-4 w-4" />
                                Tambah Rincian
                            </Button>
                        ) : null}
                        {subKegiatan.rincian_belanjas.length > 0 ? (
                            <Button
                                variant="secondary"
                                size={'sm'}
                                onClick={handleCetakPDF}
                                className="flex items-center gap-2 bg-neutral-300 dark:text-black dark:hover:text-white"
                            >
                                <FileDown className="h-4 w-4" />
                                Cetak PDF
                            </Button>
                        ) : null}
                    </div>
                </div>
                {subKegiatan.rincian_belanjas.length > 0 ? (
                    <div>
                        <div className="relative min-h-[100vh] flex-1 overflow-hidden rounded-xl border border-sidebar-border md:min-h-min dark:border-sidebar-border">
                            <Table className="text-xs">
                                <TableHeader>
                                    <TableRow className="bg-emerald-700 hover:bg-emerald-600">
                                        <TableHead className="w-[5%] p-2 text-center"></TableHead>
                                        <TableHead className="w-[40%] p-2 font-bold text-white uppercase">
                                            Rekening / Uraian
                                        </TableHead>
                                        <TableHead className="w-[15%] p-2 text-center font-bold text-white uppercase">
                                            Volume
                                        </TableHead>
                                        <TableHead className="w-[20%] text-right font-bold text-white uppercase">
                                            Harga Satuan
                                        </TableHead>
                                        <TableHead className="w-[20%] pe-4 text-right font-bold text-white uppercase">
                                            Total
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {Object.entries(hierarchicalData).map(
                                        ([rekId, rekData]) => (
                                            <React.Fragment key={rekId}>
                                                {/* Baris Rekening */}
                                                <TableRow className="bg-gray-300 font-bold text-black dark:hover:bg-gray-300">
                                                    <TableCell></TableCell>
                                                    <TableCell>
                                                        {rekData.nama}
                                                    </TableCell>
                                                    <TableCell
                                                        colSpan={3}
                                                        className="text-right"
                                                    >
                                                        {formatRupiahTitik(
                                                            rekData.total,
                                                        )}
                                                    </TableCell>
                                                </TableRow>

                                                {/* Loop Komponen */}
                                                {Object.entries(
                                                    rekData.komponen,
                                                ).map(([kompId, kompData]) => (
                                                    <React.Fragment
                                                        key={kompId}
                                                    >
                                                        {/* Baris Komponen */}
                                                        {kompData.nama &&
                                                            kompData.nama !==
                                                                '-' && (
                                                                <TableRow className="bg-gray-200 font-semibold text-black hover:text-white">
                                                                    <TableCell></TableCell>
                                                                    <TableCell className="ps-5">
                                                                        [-]{' '}
                                                                        {
                                                                            kompData.nama
                                                                        }
                                                                    </TableCell>
                                                                    <TableCell
                                                                        colSpan={
                                                                            3
                                                                        }
                                                                        className="text-right"
                                                                    >
                                                                        {formatRupiahTitik(
                                                                            kompData.total,
                                                                        )}
                                                                    </TableCell>
                                                                </TableRow>
                                                            )}

                                                        {/* Loop Subrekening */}
                                                        {kompData.rincian.map(
                                                            (rincian) => (
                                                                <TableRow
                                                                    key={
                                                                        rincian.id
                                                                    }
                                                                >
                                                                    <TableCell className="ps-4">
                                                                        {subKegiatan
                                                                            .pivot
                                                                            ?.can_update ||
                                                                        subKegiatan
                                                                            .pivot
                                                                            ?.can_delete ? (
                                                                            <DropdownMenu>
                                                                                <DropdownMenuTrigger
                                                                                    asChild
                                                                                >
                                                                                    <Button
                                                                                        size="sm"
                                                                                        variant="ghost"
                                                                                        className="bg-sky-100 p-1"
                                                                                    >
                                                                                        <List className="h-4 w-4 text-sky-600" />
                                                                                    </Button>
                                                                                </DropdownMenuTrigger>
                                                                                <DropdownMenuContent
                                                                                    align="start"
                                                                                    side="right"
                                                                                >
                                                                                    <DropdownMenuLabel>
                                                                                        Aksi
                                                                                    </DropdownMenuLabel>
                                                                                    <DropdownMenuGroup>
                                                                                        {subKegiatan
                                                                                            .pivot
                                                                                            ?.can_update && (
                                                                                            <DropdownMenuItem
                                                                                                onClick={() =>
                                                                                                    handleEdit(
                                                                                                        rincian,
                                                                                                    )
                                                                                                }
                                                                                            >
                                                                                                <ListOrdered className="mr-2 h-4 w-4" />
                                                                                                Edit
                                                                                            </DropdownMenuItem>
                                                                                        )}
                                                                                        {subKegiatan
                                                                                            .pivot
                                                                                            ?.can_delete ? (
                                                                                            <DropdownMenuItem
                                                                                                onClick={() => {
                                                                                                    setSelectedRincian(
                                                                                                        rincian,
                                                                                                    );
                                                                                                    setAlertType(
                                                                                                        'delete',
                                                                                                    );
                                                                                                    setOpenAlert(
                                                                                                        true,
                                                                                                    );
                                                                                                }}
                                                                                            >
                                                                                                <Trash2 className="mr-2 h-4 w-4" />
                                                                                                Hapus
                                                                                            </DropdownMenuItem>
                                                                                        ) : null}
                                                                                    </DropdownMenuGroup>
                                                                                </DropdownMenuContent>
                                                                            </DropdownMenu>
                                                                        ) : null}
                                                                    </TableCell>
                                                                    <TableCell className="ps-5">
                                                                        <div className="flex flex-col">
                                                                            {/* Baris pertama: tanda - dan nama sub rekening */}
                                                                            <span>
                                                                                -{' '}
                                                                                {rincian
                                                                                    .sub_rekening
                                                                                    ?.nama ??
                                                                                    '-'}
                                                                            </span>
                                                                            <span className="ps-2">
                                                                                (
                                                                                {rincian.keterangan ??
                                                                                    '-'}

                                                                                )
                                                                            </span>
                                                                        </div>
                                                                    </TableCell>

                                                                    <TableCell className="text-center">
                                                                        {rincian.koefisien && (
                                                                            <span className="">
                                                                                &nbsp;&nbsp;
                                                                                {Array.isArray(
                                                                                    rincian.koefisien,
                                                                                )
                                                                                    ? rincian.koefisien
                                                                                          .map(
                                                                                              (
                                                                                                  item,
                                                                                              ) =>
                                                                                                  `${item.jumlah} ${item.satuan}`,
                                                                                          )
                                                                                          .join(
                                                                                              ' x ',
                                                                                          )
                                                                                    : (() => {
                                                                                          try {
                                                                                              // Jika tipe masih string, parse dulu
                                                                                              const parsed =
                                                                                                  JSON.parse(
                                                                                                      rincian.koefisien,
                                                                                                  );
                                                                                              return parsed
                                                                                                  .map(
                                                                                                      (
                                                                                                          item: any,
                                                                                                      ) =>
                                                                                                          `${item.jumlah} ${item.satuan}`,
                                                                                                  )
                                                                                                  .join(
                                                                                                      ' x ',
                                                                                                  );
                                                                                          } catch {
                                                                                              return '-'; // fallback jika JSON.parse gagal
                                                                                          }
                                                                                      })()}
                                                                            </span>
                                                                        )}
                                                                    </TableCell>

                                                                    <TableCell className="text-right">
                                                                        {formatRupiahTitik(
                                                                            Number(
                                                                                rincian
                                                                                    .sub_rekening
                                                                                    ?.harga_satuan ??
                                                                                    0,
                                                                            ),
                                                                        )}
                                                                    </TableCell>
                                                                    <TableCell className="text-right">
                                                                        {formatRupiahTitik(
                                                                            Number(
                                                                                rincian.anggaran ??
                                                                                    0,
                                                                            ),
                                                                        )}
                                                                    </TableCell>
                                                                </TableRow>
                                                            ),
                                                        )}
                                                    </React.Fragment>
                                                ))}
                                            </React.Fragment>
                                        ),
                                    )}
                                    <TableRow className="bg-gray-50 font-bold text-black dark:hover:bg-gray-50">
                                        <TableCell
                                            colSpan={4}
                                            className="pe-4 text-right"
                                        >
                                            Total Keseluruhan
                                        </TableCell>
                                        <TableCell className="text-right">
                                            {formatRupiahTitik(grandTotal)}
                                        </TableCell>
                                    </TableRow>
                                </TableBody>
                            </Table>
                        </div>
                        <div className="mb-4">
                            {totalPages > 1 && (
                                <Pagination>
                                    <PaginationContent>
                                        <PaginationItem>
                                            <PaginationPrevious
                                                href="#"
                                                onClick={(e) => {
                                                    e.preventDefault();
                                                    setCurrentPage((prev) =>
                                                        Math.max(prev - 1, 1),
                                                    );
                                                }}
                                            />
                                        </PaginationItem>

                                        {[...Array(totalPages)].map((_, i) => (
                                            <PaginationItem key={i}>
                                                <PaginationLink
                                                    href="#"
                                                    isActive={
                                                        currentPage === i + 1
                                                    }
                                                    onClick={(e) => {
                                                        e.preventDefault();
                                                        setCurrentPage(i + 1);
                                                    }}
                                                >
                                                    {i + 1}
                                                </PaginationLink>
                                            </PaginationItem>
                                        ))}

                                        <PaginationItem>
                                            <PaginationNext
                                                href="#"
                                                onClick={(e) => {
                                                    e.preventDefault();
                                                    setCurrentPage((prev) =>
                                                        Math.min(
                                                            prev + 1,
                                                            totalPages,
                                                        ),
                                                    );
                                                }}
                                            />
                                        </PaginationItem>
                                    </PaginationContent>
                                </Pagination>
                            )}
                        </div>
                    </div>
                ) : (
                    <div className="mt-4 flex min-h-[300px] flex-col items-center justify-center text-gray-400">
                        <Empty>
                            <EmptyHeader>
                                <EmptyMedia variant="icon">
                                    <FolderCodeIcon className="text-neutral-400" />
                                </EmptyMedia>
                                <EmptyTitle className="text-neutral-400">
                                    Masih Kosong
                                </EmptyTitle>
                                <EmptyDescription className="text-neutral-400">
                                    Silahkan input data terlebih dahulu.
                                </EmptyDescription>
                            </EmptyHeader>
                        </Empty>
                    </div>
                )}
            </div>

            {/* Dialog Rincian Belanja */}

            <Dialog
                open={openModalRincian}
                onOpenChange={(isOpen) => {
                    setOpenModalRincian(isOpen);
                    if (!isOpen) {
                        resetInputs();
                    }
                }}
            >
                <form
                    id="form-rincian"
                    onSubmit={handleSimpanRincian}
                    onKeyDown={(e) => {
                        if (e.key === 'Enter') {
                            e.preventDefault(); // Cegah reload halaman
                            handleSimpanKelompokBelanja(e);
                        }
                    }}
                >
                    <DialogContent
                        className="flex max-h-[100vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl"
                        onInteractOutside={(e) => e.preventDefault()}
                    >
                        <ScrollArea className="flex-1 overflow-y-auto">
                            <div className="relative isolate grid gap-y-4 p-6">
                                <DialogHeader>
                                    <DialogTitle className="text-center uppercase">
                                        Rincian Belanja
                                    </DialogTitle>
                                    <DialogDescription></DialogDescription>
                                </DialogHeader>
                                <div className="grid gap-4">
                                    {/* === Tampilkan Ringkasan Anggaran === */}
                                    <div className="mb-2 flex items-center justify-between rounded-lg border bg-gray-50 p-3">
                                        {/* Batas Anggaran */}
                                        <div className="flex-1 text-center">
                                            <p className="text-sm font-medium text-gray-600">
                                                Batas Anggaran
                                            </p>
                                            <p className="text-lg font-bold text-emerald-700">
                                                {formatRupiahTitik(
                                                    Number(
                                                        subKegiatan?.anggaran ||
                                                            0,
                                                    ),
                                                )}
                                            </p>
                                        </div>

                                        {/* Separator */}
                                        <div className="mx-4 h-10 w-px bg-gray-300"></div>

                                        {/* Sisa Anggaran */}
                                        <div className="flex-1 text-center">
                                            <p className="text-sm font-medium text-gray-600">
                                                Sisa Anggaran
                                            </p>
                                            <p
                                                className={`text-lg font-bold ${
                                                    sisaAnggaran < 0
                                                        ? 'text-red-600'
                                                        : 'text-blue-700'
                                                }`}
                                            >
                                                {formatRupiahTitik(
                                                    sisaAnggaran,
                                                )}
                                            </p>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-4">
                                        <div className="w-55">
                                            <Label htmlFor="pengelompokan">
                                                Pengelompokan belanja
                                            </Label>
                                        </div>
                                        <div className="flex-1">
                                            <div className="flex items-center gap-2">
                                                <Select
                                                    value={
                                                        kelompokId !== null
                                                            ? kelompokId.toString()
                                                            : 'none'
                                                    }
                                                    onValueChange={(val) =>
                                                        setKelompokId(
                                                            val === 'none'
                                                                ? null
                                                                : Number(val),
                                                        )
                                                    }
                                                >
                                                    <SelectTrigger className="w-[240px]">
                                                        <SelectValue placeholder="-- Tanpa Kelompok --" />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        <SelectGroup>
                                                            <SelectItem value="none">
                                                                -
                                                            </SelectItem>
                                                            {kelompokList.map(
                                                                (klmpk) => (
                                                                    <SelectItem
                                                                        key={
                                                                            klmpk.id
                                                                        }
                                                                        value={klmpk.id.toString()}
                                                                    >
                                                                        {
                                                                            klmpk.nama
                                                                        }
                                                                    </SelectItem>
                                                                ),
                                                            )}
                                                        </SelectGroup>
                                                    </SelectContent>
                                                </Select>

                                                <Button
                                                    type="button"
                                                    variant={'outline'}
                                                    className="bg-emerald-600 text-white"
                                                    onClick={() => {
                                                        setOpenModalPengelompokan(
                                                            true,
                                                        );
                                                    }}
                                                >
                                                    Tambah
                                                </Button>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-4">
                                        <div className="w-55">
                                            <Label htmlFor="komponen">
                                                Komponen
                                            </Label>
                                        </div>
                                        <div className="flex-1">
                                            <Input
                                                id="komponen"
                                                name="name"
                                                value={komponen}
                                                readOnly
                                                onClick={() =>
                                                    setOpenModalRincianItem(
                                                        true,
                                                    )
                                                }
                                                className="cursor-pointer"
                                            />
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-4">
                                        <div className="w-55">
                                            <Label htmlFor="spesifikasi">
                                                Spesifikasi
                                            </Label>
                                        </div>
                                        <div className="flex-1">
                                            <Input
                                                id="spesifikasi"
                                                name="name"
                                                value={spesifikasi}
                                                readOnly
                                                className="bg-gray-300 dark:text-black"
                                            />
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-4">
                                        <div className="w-55">
                                            <Label htmlFor="satuan">
                                                Satuan / Harga satuan
                                            </Label>
                                        </div>
                                        <div className="flex-1">
                                            <div className="flex items-center gap-2">
                                                <Input
                                                    id="satuan"
                                                    name="name"
                                                    value={satuan}
                                                    readOnly
                                                    className="bg-gray-300 dark:text-black"
                                                />
                                                <Input
                                                    id="harga-satuan"
                                                    name="harga-satuan"
                                                    value={formatUang(
                                                        Number(hargaSatuan),
                                                    )}
                                                    // readOnly
                                                    onChange={(e) => {
                                                        // Hilangkan format titik lalu set harga satuan
                                                        const rawValue =
                                                            e.target.value.replace(
                                                                /\./g,
                                                                '',
                                                            );
                                                        setHargaSatuan(
                                                            Number(rawValue) ||
                                                                0,
                                                        );
                                                    }}
                                                    className="bg-gray-300 dark:text-black"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <div className="flex items-start gap-4">
                                        <Label className="mt-2 w-55">
                                            Koefisien
                                        </Label>
                                        <div className="flex flex-1 flex-col gap-2">
                                            <div className="flex flex-col gap-2">
                                                {koefisienList.map((k, i) => (
                                                    <div
                                                        key={i}
                                                        className="flex items-center gap-2"
                                                    >
                                                        <Input
                                                            type="text"
                                                            inputMode="numeric" // tetap memunculkan keyboard angka di mobile
                                                            value={k.jumlah}
                                                            onChange={(e) => {
                                                                // Bersihkan leading zero
                                                                const cleanValue =
                                                                    e.target.value.replace(
                                                                        /^0+(?=\d)/,
                                                                        '',
                                                                    );
                                                                updateJumlah(
                                                                    i,
                                                                    cleanValue,
                                                                );
                                                            }}
                                                        />

                                                        <Popover
                                                            open={
                                                                openSearchSatuan ===
                                                                i
                                                            }
                                                            onOpenChange={(
                                                                state,
                                                            ) =>
                                                                setOpenSearchSatuan(
                                                                    state
                                                                        ? i
                                                                        : null,
                                                                )
                                                            }
                                                        >
                                                            <PopoverTrigger
                                                                asChild
                                                            >
                                                                <Button
                                                                    variant="outline"
                                                                    role="combobox"
                                                                    className="w-[150px] justify-between"
                                                                >
                                                                    {loadingSatuan
                                                                        ? 'Memuat...'
                                                                        : k.satuan
                                                                          ? k.satuan // langsung tampilkan nama yang tersimpan
                                                                          : 'Pilih Satuan'}
                                                                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                                                </Button>
                                                            </PopoverTrigger>

                                                            <PopoverContent className="max-h-[200px] w-[150px] overflow-y-auto p-0">
                                                                <Command>
                                                                    <CommandInput placeholder="Cari satuan..." />
                                                                    <CommandEmpty>
                                                                        {loadingSatuan
                                                                            ? 'Memuat data...'
                                                                            : 'Tidak ditemukan'}
                                                                    </CommandEmpty>
                                                                    <CommandGroup>
                                                                        {satuanOptions.map(
                                                                            (
                                                                                item,
                                                                            ) => (
                                                                                <CommandItem
                                                                                    key={
                                                                                        item.nama
                                                                                    }
                                                                                    onSelect={() => {
                                                                                        updateSatuan(
                                                                                            i,
                                                                                            item.nama,
                                                                                        );
                                                                                        setOpenSearchSatuan(
                                                                                            null,
                                                                                        );
                                                                                    }}
                                                                                >
                                                                                    <Check
                                                                                        className={cn(
                                                                                            'h-4 w-4',
                                                                                            k.satuan ===
                                                                                                item.nama
                                                                                                ? 'opacity-100'
                                                                                                : 'opacity-0',
                                                                                        )}
                                                                                    />
                                                                                    {
                                                                                        item.nama
                                                                                    }
                                                                                </CommandItem>
                                                                            ),
                                                                        )}
                                                                    </CommandGroup>
                                                                </Command>
                                                            </PopoverContent>
                                                        </Popover>

                                                        <Button
                                                            type="button"
                                                            variant="destructive"
                                                            onClick={() =>
                                                                setKoefisienList(
                                                                    koefisienList.filter(
                                                                        (
                                                                            _,
                                                                            idx,
                                                                        ) =>
                                                                            idx !==
                                                                            i,
                                                                    ),
                                                                )
                                                            }
                                                            disabled={
                                                                koefisienList.length ===
                                                                1
                                                            }
                                                        >
                                                            <X className="h-4 w-4 text-white" />
                                                        </Button>
                                                    </div>
                                                ))}
                                            </div>
                                            <div className="flex items-center justify-between">
                                                <Button
                                                    type="button"
                                                    variant="outline"
                                                    size="sm"
                                                    onClick={addKoefisien}
                                                >
                                                    + Tambah Koefisien
                                                </Button>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-4">
                                        <div className="w-55">
                                            <Label htmlFor="volume">
                                                Volume
                                            </Label>
                                        </div>
                                        <div className="flex-1">
                                            <Input
                                                id="volume"
                                                name="name"
                                                readOnly
                                                className="bg-gray-300 dark:text-black"
                                                value={volume}
                                            />
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-4">
                                        <div className="w-55">
                                            <Label htmlFor="koefisien-ket">
                                                Koefisien (Keterangan jumlah)
                                            </Label>
                                        </div>
                                        <div className="flex-1">
                                            <Input
                                                id="koefisien-ket"
                                                name="name"
                                                readOnly
                                                className="bg-gray-300 dark:text-black"
                                                value={koefisienString}
                                            />
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-4">
                                        <div className="w-55">
                                            <Label htmlFor="total">
                                                Total Belanja
                                            </Label>
                                        </div>
                                        <div className="flex-1">
                                            <Input
                                                id="total"
                                                name="name"
                                                readOnly
                                                className={`bg-gray-300 dark:text-black ${totalBelanja > Number(subKegiatan.anggaran) ? 'border-red-500 text-red-600' : ''}`}
                                                value={totalBelanja
                                                    .toLocaleString()
                                                    .replace(/,/g, '.')}
                                            />
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-4">
                                        <div className="w-55"></div>
                                        <div className="flex-1">
                                            {/* Pesan Error Jika Melebihi Anggaran */}
                                            {totalRincian >
                                                Number(
                                                    subKegiatan.anggaran,
                                                ) && (
                                                <p className="mt-1 text-sm text-red-600">
                                                    Total belanja melebihi batas
                                                    anggaran (
                                                    {formatRupiahTitik(
                                                        parseCurrencyToNumber(
                                                            subKegiatan?.anggaran,
                                                        ),
                                                    )}{' '}
                                                    )
                                                    <br />
                                                    Kelebihan:{' '}
                                                    {formatRupiahTitik(
                                                        sisaAnggaran -
                                                            parseCurrencyToNumber(
                                                                totalBelanja,
                                                            ),
                                                    )}
                                                </p>
                                            )}
                                        </div>
                                    </div>
                                </div>
                                <DialogFooter className="mt-2">
                                    <DialogClose asChild>
                                        <Button
                                            type="button"
                                            variant="outline"
                                            onClick={resetInputs}
                                        >
                                            Batal
                                        </Button>
                                    </DialogClose>
                                    <Button
                                        form="form-rincian"
                                        type="submit"
                                        disabled={
                                            totalBelanja >
                                            Number(subKegiatan.anggaran)
                                        }
                                    >
                                        Simpan Sekarang
                                    </Button>
                                </DialogFooter>
                            </div>
                        </ScrollArea>
                    </DialogContent>
                </form>
            </Dialog>

            {/* Dialog Pengelompokan */}
            <Dialog
                open={openModalPengelompokan}
                onOpenChange={setOpenModalPengelompokan}
            >
                <form
                    id="form-kelompok"
                    onSubmit={handleSimpanKelompokBelanja}
                    onKeyDown={(e) => {
                        if (e.key === 'Enter') {
                            e.preventDefault(); // Cegah reload halaman
                            handleSimpanKelompokBelanja(e); // Panggil fungsi submit
                        }
                    }}
                >
                    <DialogContent
                        onInteractOutside={(e) => e.preventDefault()}
                        className="sm:max-w-[425px]"
                    >
                        <DialogHeader>
                            <DialogTitle>Tambah Pengelompokan</DialogTitle>
                            <DialogDescription></DialogDescription>
                        </DialogHeader>
                        <div className="grid gap-4">
                            <div className="grid gap-3">
                                <Label htmlFor="nama-kelompok">
                                    Nama Pengelompokan
                                </Label>
                                <Input
                                    id="nama-kelompok"
                                    name="nama_kelompok"
                                    value={kelompokForm.data.nama_kelompok}
                                    type="text"
                                    onChange={(e) =>
                                        kelompokForm.setData(
                                            'nama_kelompok',
                                            e.target.value,
                                        )
                                    }
                                />
                                {kelompokForm.errors.nama_kelompok && (
                                    <p className="text-xs text-red-500">
                                        {kelompokForm.errors.nama_kelompok}
                                    </p>
                                )}
                            </div>
                        </div>
                        <DialogFooter>
                            <DialogClose asChild>
                                <Button type="button" variant="outline">
                                    Batal
                                </Button>
                            </DialogClose>
                            <Button
                                form="form-kelompok"
                                type="submit"
                                disabled={kelompokForm.processing}
                            >
                                Simpan Woy
                            </Button>
                        </DialogFooter>
                    </DialogContent>
                </form>
            </Dialog>

            {/* Dialog Komponen */}
            <Dialog
                open={openModalRicianItem}
                onOpenChange={setOpenModalRincianItem}
            >
                <DialogContent
                    onInteractOutside={(e) => e.preventDefault()}
                    className="sm:max-w-4xl"
                >
                    <DialogHeader>
                        <DialogTitle>Pilih Komponen</DialogTitle>
                    </DialogHeader>
                    <div className="mb-4 flex items-center gap-2">
                        <Input
                            placeholder="Cari komponen..."
                            value={searchItem}
                            onChange={(e) => setSearchItem(e.target.value)}
                            className="flex-1"
                        />
                        <Select
                            value={filterJenis}
                            onValueChange={(val) => setFilterJenis(val)}
                        >
                            <SelectTrigger className="w-[150px]">
                                <SelectValue placeholder="Filter satuan" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">Semua</SelectItem>
                                <SelectItem value="ssh">SSH</SelectItem>
                                <SelectItem value="sbu">SBU</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                    <div className="rounded-md border">
                        <div className="max-h-64 overflow-x-auto overflow-y-auto">
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Nama</TableHead>
                                        <TableHead>Spesifikasi</TableHead>
                                        <TableHead className="text-center">
                                            Satuan
                                        </TableHead>
                                        <TableHead className="text-right">
                                            Harga Satuan
                                        </TableHead>
                                        <TableHead className="text-right">
                                            Jenis
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {filteredItems.length > 0 ? (
                                        filteredItems.map((item) => (
                                            <TableRow
                                                key={item.id}
                                                className="cursor-pointer"
                                                onClick={() =>
                                                    handleSelect(item)
                                                }
                                            >
                                                <TableCell className="font-medium break-words whitespace-normal">
                                                    {item.nama}
                                                </TableCell>
                                                <TableCell className="break-words whitespace-normal">
                                                    {item.spesifikasi}
                                                </TableCell>
                                                <TableCell className="text-center">
                                                    {item.satuan}
                                                </TableCell>
                                                <TableCell className="text-right">
                                                    {Number(item.harga_satuan)
                                                        .toLocaleString()
                                                        .replace(/,/g, '.')}
                                                </TableCell>
                                                <TableCell className="text-right">
                                                    {item.jenis}
                                                </TableCell>
                                            </TableRow>
                                        ))
                                    ) : (
                                        <TableRow>
                                            <TableCell
                                                colSpan={4}
                                                className="text-center text-gray-500"
                                            >
                                                Tidak ada data
                                            </TableCell>
                                        </TableRow>
                                    )}
                                </TableBody>
                            </Table>
                        </div>
                    </div>
                </DialogContent>
            </Dialog>

            <ConfirmAlert
                title={`Konfirmasi ${alertType}`}
                message={`Apakah Anda yakin ingin ${
                    alertType === 'delete' ? 'menghapus' : ''
                } data ini?`}
                submessage={`"${selectedRincian?.sub_rekening?.nama ?? ''}"`}
                open={openAlert}
                onOpenChange={setOpenAlert}
                onConfirm={() => {
                    if (alertType === 'delete' && selectedRincian) {
                        handleDelete(selectedRincian.id);
                        setSelectedRincian(null);
                    }
                }}
            />

            <Toaster position="top-right" />
        </AppLayout>
    );
}