import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogClose,
    DialogContent,
    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 {
    Select,
    SelectContent,
    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 {
    Kelompok,
    RincianBelanja,
    Satuan,
    SubKegiatan,
    SubRekening,
    Triwulan,
} from '@/types';
import { Head, Link, router, useForm } from '@inertiajs/react';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
import {
    ArrowLeft,
    FileDown,
    FolderCodeIcon,
    List,
    Newspaper,
} from 'lucide-react';
import React, { useRef, useState } from 'react';
import { Toaster } from 'sonner';

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

type AlertType = 'delete';

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

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

export default function TriwulanIndex({
    subKegiatan,
    subRekeningList,
    kelompokList,
    satuanList,
    triwulanList,
}: Props) {
    const breadcrumbs = useAuthBreadcrumbOperator();

    const [openAlert, setOpenAlert] = useState(false);
    const [alertType, setAlertType] = useState<AlertType>();

    const [currentRincian, setCurrentRincian] = useState<RincianBelanja | null>(
        null,
    );

    // modal triwulan
    const rincianIdRef = useRef<number | null>(null);

    const [openModalTriwulan, setOpenModalTriwulan] = useState(false);
    const triwulanForm = useForm({
        rincian_belanja_id: rincianIdRef.current || null,
        volume_satu: '',
        jumlah_satu: '',
        volume_dua: '',
        jumlah_dua: '',
        volume_tiga: '',
        jumlah_tiga: '',
        volume_empat: '',
        jumlah_empat: '',
    });

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

    // 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)
        );
    });

    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),
              );

    // 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>,
    );

    // simpan triwulan
    const handleSimpanTriwulan = (e: React.FormEvent) => {
        e.preventDefault();

        if (!rincianIdRef.current) {
            alert('Rincian belum dipilih');
            return;
        }

        triwulanForm.setData('rincian_belanja_id', rincianIdRef.current);

        router.post(route('triwulan.store'), triwulanForm.data, {
            onSuccess: () => {
                triwulanForm.reset();
                setOpenModalTriwulan(false);
            },
            onError: (errors) => {
                console.error('Error:', errors);
            },
        });
    };

    const handleEdit = (rincian: RincianBelanja) => {
        // triwulanForm.setData('rincian_belanja_id', rincian.id);

        const existingData = triwulanList.find(
            (t) => t.rincian_belanja_id === rincian.id,
        );

        // Set nilai awal form sesuai data yang ada, jika tidak ada pakai default
        triwulanForm.setData({
            rincian_belanja_id: rincian.id,
            volume_satu: existingData?.volume_satu?.toString() || '',
            jumlah_satu: existingData?.jumlah_satu?.toString() || '',
            volume_dua: existingData?.volume_dua?.toString() || '',
            jumlah_dua: existingData?.jumlah_dua?.toString() || '',
            volume_tiga: existingData?.volume_tiga?.toString() || '',
            jumlah_tiga: existingData?.jumlah_tiga?.toString() || '',
            volume_empat: existingData?.volume_empat?.toString() || '',
            jumlah_empat: existingData?.jumlah_empat?.toString() || '',
        });

        // Simpan rincian yang sedang diedit
        setCurrentRincian(rincian);

        rincianIdRef.current = rincian.id;
        setOpenModalTriwulan(true);
    };

    // cek jumlah apakah melebihi anggaran rincian
    const totalJumlah =
        Number(triwulanForm.data.jumlah_satu || 0) +
        Number(triwulanForm.data.jumlah_dua || 0) +
        Number(triwulanForm.data.jumlah_tiga || 0) +
        Number(triwulanForm.data.jumlah_empat || 0);

    // Hitung sisa anggaran
    const remainingBudget = currentRincian
        ? Number(currentRincian.anggaran || 0) - totalJumlah
        : 0;

    // Validasi jika melebihi anggaran
    const isOverBudget = remainingBudget < 0;

    // Hitung total volume dari semua input triwulan
    const totalVolume =
        Number(triwulanForm.data.volume_satu || 0) +
        Number(triwulanForm.data.volume_dua || 0) +
        Number(triwulanForm.data.volume_tiga || 0) +
        Number(triwulanForm.data.volume_empat || 0);

    // Sisa volume = volume awal - total volume yang diinput
    const remainingVolume = currentRincian
        ? Number(currentRincian.volume || 0) - totalVolume
        : 0;

    // Validasi jika volume melebihi
    const isOverVolume = remainingVolume < 0;

    // Format angka ke format "10.000,00"
    const formatNumber = (value: number | string): string => {
        if (!value) return '';
        const number = parseFloat(value.toString());
        return number.toLocaleString('id-ID', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
        });
    };

    const subKegiatanName =
        subKegiatan?.nama ||
        'PO_SUB_KEGIATAN'
            .replace(/[^a-zA-Z0-9 ]/g, '') // hapus karakter selain huruf/angka/spasi
            .trim();

    const handleCetakPDF = () => {
        const doc = new jsPDF({ orientation: 'landscape' });

        // Ambil nama rekening untuk judul
        const subKegName = (subKegiatan?.nama || 'Laporan')
            .replace(/[^a-zA-Z0-9 ]/g, '')
            .trim();

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

        doc.setFontSize(11);
        doc.text(`Sub Kegiatan: ${subKegName}`, 14, 22);

        // === HEADER BERTINGKAT ===
        const headRows: any[][] = [
            [
                {
                    content: 'URAIAN',
                    rowSpan: 2,
                    styles: { halign: 'center', valign: 'middle' },
                },
                {
                    content: 'RINCI PERHITUNGAN',
                    colSpan: 4,
                    styles: { halign: 'center' },
                },
                {
                    content: 'TRIWULAN I',
                    colSpan: 2,
                    styles: { halign: 'center' },
                },
                {
                    content: 'TRIWULAN II',
                    colSpan: 2,
                    styles: { halign: 'center' },
                },
                {
                    content: 'TRIWULAN III',
                    colSpan: 2,
                    styles: { halign: 'center' },
                },
                {
                    content: 'TRIWULAN IV',
                    colSpan: 2,
                    styles: { halign: 'center' },
                },
            ],
            [
                { content: 'KOEFISIEN', styles: { halign: 'center' } },
                { content: 'SATUAN', styles: { halign: 'center' } },
                { content: 'HARGA', styles: { halign: 'center' } },
                { content: 'TOTAL HARGA', styles: { halign: 'center' } },
                { content: 'VOL', styles: { halign: 'center' } },
                { content: 'JUMLAH', styles: { halign: 'center' } },
                { content: 'VOL', styles: { halign: 'center' } },
                { content: 'JUMLAH', styles: { halign: 'center' } },
                { content: 'VOL', styles: { halign: 'center' } },
                { content: 'JUMLAH', styles: { halign: 'center' } },
                { content: 'VOL', styles: { halign: 'center' } },
                { content: 'JUMLAH', styles: { halign: 'center' } },
            ],
        ];

        // === BODY PDF ===
        const tableData: any[] = [];

        // Loop Rekening → Komponen → Rincian
        Object.entries(hierarchicalData).forEach(([rekId, rekData]) => {
            // Rekening
            tableData.push([
                {
                    content: rekData.nama,
                    colSpan: 13,
                    styles: {
                        fontStyle: 'bold',
                        halign: 'left',
                        fillColor: [220, 220, 220],
                    },
                },
            ]);

            Object.entries(rekData.komponen).forEach(([kompId, kompData]) => {
                // Komponen
                tableData.push([
                    {
                        content: `- ${kompData.nama}`,
                        colSpan: 13,
                        styles: {
                            fontStyle: 'bold',
                            halign: 'left',
                            fillColor: [245, 245, 245],
                        },
                    },
                ]);

                // Rincian
                kompData.rincian.forEach((item: any) => {
                    const triwulanData = triwulanList.find(
                        (t) => t.rincian_belanja_id === item.id,
                    );

                    // Parse koefisien
                    let parsedKoefisien: { jumlah: number; satuan: string }[] =
                        [];
                    if (item.koefisien) {
                        if (typeof item.koefisien === 'string') {
                            try {
                                parsedKoefisien = JSON.parse(item.koefisien);
                            } catch {
                                parsedKoefisien = [];
                            }
                        } else if (Array.isArray(item.koefisien)) {
                            parsedKoefisien = item.koefisien;
                        }
                    }

                    const totalHarga =
                        Number(item.sub_rekening?.harga_satuan || 0) *
                        Number(item.volume || 0);

                    tableData.push([
                        {
                            content: `${item.sub_rekening?.nama || '-'}\n(${item.keterangan || '-'})`,
                            styles: {
                                halign: 'left', // rata kiri
                                fontStyle: 'normal',
                            },
                        },
                        parsedKoefisien.length > 0
                            ? parsedKoefisien
                                  .map((k) => `${k.jumlah}`)
                                  .join(' x ')
                            : '-',
                        item.sub_rekening?.satuan || '-',
                        {
                            content: formatRupiahTitik(
                                Number(item.sub_rekening?.harga_satuan || 0),
                            ),
                            styles: {
                                halign: 'right', // angka rata kanan
                                fontStyle: 'normal',
                            },
                        },
                        {
                            content: formatRupiahTitik(Number(totalHarga || 0)),
                            styles: {
                                halign: 'right', // rata kanan
                                fontStyle: 'bold',
                            },
                        },
                        triwulanData?.volume_satu || 0,
                        {
                            content: formatRupiahTitik(
                                Number(triwulanData?.jumlah_satu || 0),
                            ),
                            styles: { halign: 'right' },
                        },
                        triwulanData?.volume_dua || 0,
                        {
                            content: formatRupiahTitik(
                                Number(triwulanData?.jumlah_dua || 0),
                            ),
                            styles: { halign: 'right' },
                        },
                        triwulanData?.volume_tiga || 0,
                        {
                            content: formatRupiahTitik(
                                Number(triwulanData?.jumlah_tiga || 0),
                            ),
                            styles: { halign: 'right' },
                        },
                        triwulanData?.volume_empat || 0,
                        {
                            content: formatRupiahTitik(
                                Number(triwulanData?.jumlah_empat || 0),
                            ),
                            styles: { halign: 'right' }, // angka triwulan IV rata kanan
                        },
                    ]);
                });
            });
        });

        // === GENERATE PDF ===
        autoTable(doc, {
            startY: 30,
            head: headRows,
            body: tableData,
            theme: 'grid',
            styles: {
                fontSize: 8,
                halign: 'center',
                valign: 'middle',
                cellPadding: 2,
            },
            headStyles: {
                fillColor: [0, 112, 74], // Hijau
                textColor: [255, 255, 255], // Putih
                fontStyle: 'bold',
            },
        });

        // Nama file otomatis dari rekening
        const fileName = subKegName.replace(/\s+/g, '_');
        doc.save(`PO Sub Kegiatan ${fileName}.pdf`);
    };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="PO" />
            <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>
                {subKegiatan.rincian_belanjas.length > 0 ? (
                    <div>
                        <div className="mb-4 flex items-center justify-between">
                            <Input
                                className="w-[300px]"
                                type="text"
                                placeholder="Pencarian..."
                                value={searchQuery}
                                onChange={(e) => {
                                    setSearchQuery(e.target.value);
                                    setCurrentPage(1); // Reset ke halaman pertama saat pencarian
                                }}
                            />

                            {/* Tombol Cetak PDF */}
                            <Button
                                variant="secondary"
                                onClick={handleCetakPDF}
                                className="flex items-center gap-2 bg-neutral-300"
                            >
                                <FileDown className="h-4 w-4" />
                                Cetak PDF
                            </Button>
                        </div>
                        <div className="overflow-hidden rounded-lg border border-gray-300">
                            <Table className="min-w-max text-xs">
                                <TableHeader className="bg-emerald-700">
                                    {/* Baris Header Utama */}
                                    <TableRow className="border-b-emerald-700 hover:bg-emerald-700">
                                        <TableHead className="w-[5%]"></TableHead>
                                        <TableHead
                                            rowSpan={2}
                                            className="w-[30%] text-center font-bold text-white uppercase"
                                        >
                                            Uraian
                                        </TableHead>
                                        <TableHead
                                            colSpan={3}
                                            className="text-center font-bold text-white uppercase"
                                        >
                                            Rinci Perhitungan
                                        </TableHead>
                                        <TableHead
                                            rowSpan={2}
                                            className="text-center font-bold text-white uppercase"
                                        >
                                            Total Harga
                                        </TableHead>
                                        <TableHead
                                            colSpan={2}
                                            className="text-center font-bold text-white uppercase"
                                        >
                                            Triwulan I
                                        </TableHead>
                                        <TableHead
                                            colSpan={2}
                                            className="text-center font-bold text-white uppercase"
                                        >
                                            Triwulan II
                                        </TableHead>
                                        <TableHead
                                            colSpan={2}
                                            className="text-center font-bold text-white uppercase"
                                        >
                                            Triwulan III
                                        </TableHead>
                                        <TableHead
                                            colSpan={2}
                                            className="text-center font-bold text-white uppercase"
                                        >
                                            Triwulan IV
                                        </TableHead>
                                    </TableRow>

                                    {/* Baris Sub Header */}
                                    <TableRow className="hover:bg-emerald-700">
                                        <TableHead></TableHead>
                                        <TableHead className="text-center font-bold text-white uppercase">
                                            Koefisien
                                        </TableHead>
                                        <TableHead className="text-center font-bold text-white uppercase">
                                            Satuan
                                        </TableHead>
                                        <TableHead className="text-center font-bold text-white uppercase">
                                            Harga
                                        </TableHead>

                                        {/* Triwulan I */}
                                        <TableHead className="text-center font-bold text-white uppercase">
                                            Volume
                                        </TableHead>
                                        <TableHead className="text-center font-bold text-white uppercase">
                                            Jumlah
                                        </TableHead>
                                        {/* Triwulan II */}
                                        <TableHead className="text-center font-bold text-white uppercase">
                                            Volume
                                        </TableHead>
                                        <TableHead className="text-center font-bold text-white uppercase">
                                            Jumlah
                                        </TableHead>
                                        {/* Triwulan III */}
                                        <TableHead className="text-center font-bold text-white uppercase">
                                            Volume
                                        </TableHead>
                                        <TableHead className="text-center font-bold text-white uppercase">
                                            Jumlah
                                        </TableHead>
                                        {/* Triwulan IV */}
                                        <TableHead className="text-center font-bold text-white uppercase">
                                            Volume
                                        </TableHead>
                                        <TableHead className="text-center font-bold text-white uppercase">
                                            Jumlah
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>

                                <TableBody>
                                    {Object.entries(hierarchicalData).map(
                                        ([rekId, rekData]) => (
                                            <React.Fragment key={rekId}>
                                                <TableRow>
                                                    <TableCell></TableCell>
                                                    <TableCell
                                                        className="text-left font-bold"
                                                        colSpan={12}
                                                    >
                                                        {rekData.nama}
                                                    </TableCell>
                                                </TableRow>

                                                {Object.entries(
                                                    rekData.komponen,
                                                ).map(([kompId, kompData]) => (
                                                    <React.Fragment
                                                        key={kompId}
                                                    >
                                                        {kompData.nama &&
                                                            kompData.nama !==
                                                                '-' && (
                                                                <TableRow>
                                                                    <TableCell></TableCell>
                                                                    <TableCell className="text-left">
                                                                        [-]{' '}
                                                                        {
                                                                            kompData.nama
                                                                        }
                                                                    </TableCell>
                                                                    <TableCell
                                                                        colSpan={
                                                                            11
                                                                        }
                                                                    ></TableCell>
                                                                </TableRow>
                                                            )}
                                                        {kompData.rincian.map(
                                                            (rincian) => {
                                                                const triwulanData =
                                                                    triwulanList.find(
                                                                        (t) =>
                                                                            t.rincian_belanja_id ===
                                                                            rincian.id,
                                                                    );

                                                                // Hitung total jumlah triwulan
                                                                const totalTriwulanJumlah =
                                                                    Number(
                                                                        triwulanData?.jumlah_satu ||
                                                                            0,
                                                                    ) +
                                                                    Number(
                                                                        triwulanData?.jumlah_dua ||
                                                                            0,
                                                                    ) +
                                                                    Number(
                                                                        triwulanData?.jumlah_tiga ||
                                                                            0,
                                                                    ) +
                                                                    Number(
                                                                        triwulanData?.jumlah_empat ||
                                                                            0,
                                                                    );

                                                                // === Hitung total volume triwulan ===
                                                                const totalTriwulanVolume =
                                                                    Number(
                                                                        triwulanData?.volume_satu ||
                                                                            0,
                                                                    ) +
                                                                    Number(
                                                                        triwulanData?.volume_dua ||
                                                                            0,
                                                                    ) +
                                                                    Number(
                                                                        triwulanData?.volume_tiga ||
                                                                            0,
                                                                    ) +
                                                                    Number(
                                                                        triwulanData?.volume_empat ||
                                                                            0,
                                                                    );

                                                                // Data awal dari rincian
                                                                const hargaSatuan =
                                                                    Number(
                                                                        rincian
                                                                            .sub_rekening
                                                                            ?.harga_satuan ||
                                                                            0,
                                                                    );

                                                                const volumeAwal =
                                                                    Number(
                                                                        rincian.volume ||
                                                                            0,
                                                                    );

                                                                const anggaranRincian =
                                                                    Number(
                                                                        rincian.anggaran ||
                                                                            0,
                                                                    );

                                                                // === Cek apakah belum sesuai ===
                                                                const isJumlahNotEqual =
                                                                    totalTriwulanJumlah !==
                                                                    anggaranRincian;
                                                                const isVolumeNotEqual =
                                                                    totalTriwulanVolume !==
                                                                    volumeAwal;

                                                                return (
                                                                    <TableRow>
                                                                        <TableCell className="text-center">
                                                                            <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>
                                                                                        <DropdownMenuItem
                                                                                            onClick={() =>
                                                                                                handleEdit(
                                                                                                    rincian,
                                                                                                )
                                                                                            }
                                                                                        >
                                                                                            <Newspaper className="mr-2 h-4 w-4" />
                                                                                            Tambah
                                                                                        </DropdownMenuItem>
                                                                                    </DropdownMenuGroup>
                                                                                </DropdownMenuContent>
                                                                            </DropdownMenu>
                                                                        </TableCell>
                                                                        <TableCell className="text-left">
                                                                            <div className="flex flex-col">
                                                                                <span>
                                                                                    -{' '}
                                                                                    {rincian
                                                                                        .sub_rekening
                                                                                        ?.nama ??
                                                                                        '-'}
                                                                                </span>
                                                                                <span className="ps-2">
                                                                                    (
                                                                                    {rincian.keterangan ??
                                                                                        '-'}

                                                                                    )
                                                                                </span>
                                                                            </div>
                                                                        </TableCell>
                                                                        {/* Volume Awal */}
                                                                        <TableCell
                                                                            className={`text-center font-bold ${
                                                                                isVolumeNotEqual
                                                                                    ? 'text-red-600'
                                                                                    : 'text-gray-800'
                                                                            }`}
                                                                        >
                                                                            {
                                                                                volumeAwal
                                                                            }
                                                                        </TableCell>
                                                                        <TableCell className="text-center">
                                                                            {rincian
                                                                                .sub_rekening
                                                                                ?.satuan ??
                                                                                '-'}
                                                                        </TableCell>

                                                                        {/* Harga Satuan dengan warna dinamis */}
                                                                        <TableCell
                                                                            className={
                                                                                'text-right font-bold'
                                                                            }
                                                                        >
                                                                            {formatRupiahTitik(
                                                                                hargaSatuan,
                                                                            )}
                                                                        </TableCell>
                                                                        <TableCell
                                                                            className={`text-right font-bold ${
                                                                                isJumlahNotEqual
                                                                                    ? 'text-red-600'
                                                                                    : 'text-gray-800'
                                                                            }`}
                                                                        >
                                                                            {formatRupiahTitik(
                                                                                anggaranRincian,
                                                                            )}
                                                                        </TableCell>
                                                                        <TableCell className="text-center">
                                                                            {triwulanData?.volume_satu ??
                                                                                '-'}
                                                                        </TableCell>
                                                                        <TableCell className="text-center">
                                                                            {formatRupiahTitik(
                                                                                Number(
                                                                                    triwulanData?.jumlah_satu ??
                                                                                        0,
                                                                                ),
                                                                            )}
                                                                        </TableCell>

                                                                        {/* Triwulan II */}
                                                                        <TableCell className="text-center">
                                                                            {triwulanData?.volume_dua ??
                                                                                '-'}
                                                                        </TableCell>
                                                                        <TableCell className="text-center">
                                                                            {formatRupiahTitik(
                                                                                Number(
                                                                                    triwulanData?.jumlah_dua ??
                                                                                        0,
                                                                                ),
                                                                            )}
                                                                        </TableCell>

                                                                        {/* Triwulan III */}
                                                                        <TableCell className="text-center">
                                                                            {triwulanData?.volume_tiga ??
                                                                                '-'}
                                                                        </TableCell>
                                                                        <TableCell className="text-center">
                                                                            {formatRupiahTitik(
                                                                                Number(
                                                                                    triwulanData?.jumlah_tiga ??
                                                                                        0,
                                                                                ),
                                                                            )}
                                                                        </TableCell>

                                                                        {/* Triwulan IV */}
                                                                        <TableCell className="text-center">
                                                                            {triwulanData?.volume_empat ??
                                                                                '-'}
                                                                        </TableCell>
                                                                        <TableCell className="text-center">
                                                                            {formatRupiahTitik(
                                                                                Number(
                                                                                    triwulanData?.jumlah_empat ??
                                                                                        0,
                                                                                ),
                                                                            )}
                                                                        </TableCell>
                                                                    </TableRow>
                                                                );
                                                            },
                                                        )}
                                                    </React.Fragment>
                                                ))}
                                            </React.Fragment>
                                        ),
                                    )}
                                </TableBody>
                            </Table>
                        </div>
                        <div className="flex items-center justify-between px-4 py-4">
                            {/* Dropdown jumlah per halaman */}
                            <div className="flex items-center gap-2">
                                <span className="text-sm">Tampilkan:</span>
                                <Select
                                    value={String(itemsPerPage)} // harus string untuk Shadcn
                                    onValueChange={(value) => {
                                        const newValue =
                                            value === 'all'
                                                ? 'all'
                                                : Number(value);
                                        setItemsPerPage(newValue);
                                        setCurrentPage(1); // reset halaman
                                    }}
                                >
                                    <SelectTrigger className="w-[80px]">
                                        <SelectValue placeholder="Pilih jumlah" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="5">5</SelectItem>
                                        <SelectItem value="10">10</SelectItem>
                                        <SelectItem value="25">25</SelectItem>
                                        <SelectItem value="all">
                                            Semua
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>

                            {/* Navigasi pagination */}
                            <div className="flex items-center gap-2">
                                <Pagination>
                                    <PaginationContent>
                                        {/* Tombol Previous */}
                                        <PaginationItem>
                                            <PaginationPrevious
                                                className={
                                                    currentPage === 1
                                                        ? 'pointer-events-none opacity-50'
                                                        : ''
                                                }
                                                onClick={() =>
                                                    setCurrentPage((prev) =>
                                                        Math.max(prev - 1, 1),
                                                    )
                                                }
                                            />
                                        </PaginationItem>

                                        {/* Nomor Halaman */}
                                        {Array.from(
                                            { length: totalPages },
                                            (_, index) => {
                                                const page = index + 1;
                                                return (
                                                    <PaginationItem key={page}>
                                                        <PaginationLink
                                                            isActive={
                                                                currentPage ===
                                                                page
                                                            }
                                                            onClick={() =>
                                                                setCurrentPage(
                                                                    page,
                                                                )
                                                            }
                                                        >
                                                            {page}
                                                        </PaginationLink>
                                                    </PaginationItem>
                                                );
                                            },
                                        )}

                                        {/* Tombol Next */}
                                        <PaginationItem>
                                            <PaginationNext
                                                className={
                                                    currentPage === totalPages
                                                        ? 'pointer-events-none opacity-50'
                                                        : ''
                                                }
                                                onClick={() =>
                                                    setCurrentPage((prev) =>
                                                        Math.min(
                                                            prev + 1,
                                                            totalPages,
                                                        ),
                                                    )
                                                }
                                            />
                                        </PaginationItem>
                                    </PaginationContent>
                                </Pagination>
                            </div>
                        </div>
                    </div>
                ) : (
                    <div className="mt-4 flex min-h-[500px] 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 rincian terlebih dahulu.
                                </EmptyDescription>
                            </EmptyHeader>
                        </Empty>
                    </div>
                )}
            </div>
            <Dialog
                open={openModalTriwulan}
                onOpenChange={setOpenModalTriwulan}
            >
                <form
                    id="form-triwulan"
                    onSubmit={handleSimpanTriwulan}
                    onKeyDown={(e) => {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            handleSimpanTriwulan(e);
                        }
                    }}
                >
                    <DialogContent>
                        <DialogHeader>
                            <DialogTitle className="text-center uppercase">
                                Tambah PO
                            </DialogTitle>
                        </DialogHeader>

                        {/* === Card Informasi Anggaran & Volume === */}
                        <div className="mb-4 space-y-4 rounded-lg border bg-gray-50 p-3">
                            {/* Anggaran */}
                            <div className="flex items-center justify-between">
                                {/* Anggaran Awal */}
                                <div className="flex-1 text-center">
                                    <div className="text-sm font-medium text-gray-700">
                                        Anggaran
                                    </div>
                                    <div className="text-lg font-bold text-emerald-700">
                                        {formatRupiahTitik(
                                            Number(
                                                currentRincian?.anggaran || 0,
                                            ),
                                        )}
                                    </div>
                                </div>

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

                                {/* Sisa Anggaran */}
                                <div className="flex-1 text-center">
                                    <div className="text-sm font-medium text-gray-700">
                                        Input Anggaran
                                    </div>
                                    <div
                                        className={`text-lg font-bold ${
                                            remainingBudget < 0
                                                ? 'text-red-600'
                                                : 'text-blue-700'
                                        }`}
                                    >
                                        {formatRupiahTitik(remainingBudget)}
                                    </div>
                                </div>
                            </div>

                            {/* Volume */}
                            <div className="flex items-center justify-between">
                                {/* Volume Awal */}
                                <div className="flex-1 text-center">
                                    <div className="text-sm font-medium text-gray-700">
                                        Volume
                                    </div>
                                    <div className="text-lg font-bold text-emerald-700">
                                        {Number(currentRincian?.volume || 0)}
                                    </div>
                                </div>

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

                                {/* Sisa Volume */}
                                <div className="flex-1 text-center">
                                    <div className="text-sm font-medium text-gray-700">
                                        Input Volume
                                    </div>
                                    <div
                                        className={`text-lg font-bold ${
                                            remainingVolume < 0
                                                ? 'text-red-600'
                                                : 'text-blue-700'
                                        }`}
                                    >
                                        {remainingVolume}
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* === Pesan Error === */}
                        {(isOverBudget || isOverVolume) && (
                            <div className="mb-4 rounded border border-red-200 bg-red-50 p-3 text-sm font-medium text-red-700">
                                {isOverBudget && (
                                    <div>
                                        Total jumlah triwulan (
                                        {formatRupiahTitik(totalJumlah)})
                                        melebihi anggaran awal (
                                        {formatRupiahTitik(
                                            Number(
                                                currentRincian?.anggaran || 0,
                                            ),
                                        )}
                                        ).
                                    </div>
                                )}
                                {isOverVolume && (
                                    <div className="mt-1">
                                        Total volume triwulan ({totalVolume})
                                        melebihi volume awal (
                                        {Number(currentRincian?.volume || 0)}).
                                    </div>
                                )}
                            </div>
                        )}

                        {/* === Input Form Triwulan === */}
                        <div className="grid gap-4">
                            {['satu', 'dua', 'tiga', 'empat'].map(
                                (key, index) => (
                                    <div
                                        key={key}
                                        className="flex items-center gap-4"
                                    >
                                        <div className="w-30">
                                            <Label>Triwulan {index + 1}</Label>
                                        </div>
                                        <div className="flex-1">
                                            <Input
                                                placeholder="Volume"
                                                type="number"
                                                value={
                                                    triwulanForm.data[
                                                        `volume_${key}` as keyof typeof triwulanForm.data
                                                    ] || ''
                                                }
                                                onChange={(e) =>
                                                    triwulanForm.setData(
                                                        `volume_${key}` as keyof typeof triwulanForm.data,
                                                        e.target.value,
                                                    )
                                                }
                                                onKeyDown={(e) => {
                                                    if (
                                                        e.key === '.' ||
                                                        e.key === ','
                                                    ) {
                                                        e.preventDefault(); // cegah titik dan koma
                                                    }
                                                }}
                                            />
                                        </div>
                                        <div className="flex-1">
                                            <Input
                                                placeholder="Jumlah"
                                                type="text"
                                                value={
                                                    triwulanForm.data[
                                                        `jumlah_${key}` as keyof typeof triwulanForm.data
                                                    ] || ''
                                                }
                                                onChange={(e) => {
                                                    // Hanya simpan angka mentah ke state
                                                    const rawValue =
                                                        e.target.value
                                                            .replace(/\./g, '')
                                                            .replace(',', '.');
                                                    if (
                                                        !isNaN(Number(rawValue))
                                                    ) {
                                                        triwulanForm.setData(
                                                            `jumlah_${key}` as keyof typeof triwulanForm.data,
                                                            rawValue,
                                                        );
                                                    }
                                                }}
                                                onFocus={(e) => {
                                                    e.target.value = `${triwulanForm.data[`jumlah_${key}` as keyof typeof triwulanForm.data] || ''}`;
                                                }}
                                                onBlur={(e) => {
                                                    // Saat blur, tampilkan format Rupiah
                                                    const formatted =
                                                        formatNumber(
                                                            triwulanForm.data[
                                                                `jumlah_${key}` as keyof typeof triwulanForm.data
                                                            ] || 0,
                                                        );
                                                    e.target.value = formatted;
                                                }}
                                            />
                                        </div>
                                    </div>
                                ),
                            )}
                        </div>
                        <DialogFooter className="mt-6">
                            <DialogClose asChild>
                                <Button type="button" variant="outline">
                                    Batal
                                </Button>
                            </DialogClose>
                            <Button
                                form="form-triwulan"
                                type="submit"
                                disabled={
                                    triwulanForm.processing ||
                                    isOverBudget ||
                                    isOverVolume
                                }
                            >
                                Simpan
                            </Button>
                        </DialogFooter>
                    </DialogContent>
                </form>
            </Dialog>

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