import React from 'react';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '../ui/table';

import { formatRupiah } from '@/lib/utils';
import { GroupedTableProps } from '@/types/tables';
import TableActions from './TableActions';

const GroupedTable: React.FC<GroupedTableProps> = ({
    grouped,
    onViewRincian,
    onViewPO,
    onUbahAnggaran,
}) => {
    return (
        <Table className="text-xs">
            <TableHeader>
                <TableRow className="bg-emerald-700 hover:bg-emerald-600">
                    <TableHead className="w-[5%] p-2 text-center text-white"></TableHead>
                    <TableHead className="w-[50%] p-2 font-bold text-white uppercase">
                        Program / Kegiatan / Sub Kegiatan
                    </TableHead>
                    <TableHead className="w-[20%] p-2 text-right font-bold text-white uppercase">
                        Anggaran
                    </TableHead>
                    <TableHead className="w-[20%] pe-4 text-right font-bold text-white uppercase">
                        Rincian
                    </TableHead>
                </TableRow>
            </TableHeader>

            <TableBody>
                {Object.entries(grouped).map(([programName, kegiatans]) => (
                    <React.Fragment key={programName}>
                        {/* ================= Nama Program ================= */}
                        <TableRow className="bg-gray-300 font-bold text-black hover:bg-gray-300 dark:hover:bg-gray-300">
                            <TableCell width={20}></TableCell>
                            <TableCell colSpan={3}>{programName}</TableCell>
                        </TableRow>

                        {Object.entries(kegiatans).map(
                            ([kegiatanName, subs]) => (
                                <React.Fragment key={kegiatanName}>
                                    {/* ================= Nama Kegiatan ================= */}
                                    <TableRow className="bg-gray-200 font-bold text-black hover:bg-gray-200 dark:hover:bg-gray-200">
                                        <TableCell></TableCell>
                                        <TableCell colSpan={3}>
                                            {kegiatanName}
                                        </TableCell>
                                    </TableRow>

                                    {/* ================= Sub Kegiatan ================= */}
                                    {subs.map((sub: any) => (
                                        <TableRow key={sub.id}>
                                            <TableCell className="ps-4">
                                                <TableActions
                                                    subId={sub.id}
                                                    onViewRincian={
                                                        onViewRincian
                                                    }
                                                    onViewPO={onViewPO}
                                                    onUbahAnggaran={
                                                        onUbahAnggaran
                                                            ? () =>
                                                                  onUbahAnggaran(
                                                                      sub,
                                                                  )
                                                            : undefined
                                                    }
                                                />
                                            </TableCell>

                                            {/* Nama Sub Kegiatan */}
                                            <TableCell
                                                className="break-words whitespace-normal"
                                                width="50%"
                                            >
                                                {sub.nama}
                                            </TableCell>

                                            {/* Anggaran */}
                                            <TableCell className="text-right">
                                                {sub.anggaran
                                                    ? formatRupiah(
                                                          Number(sub.anggaran),
                                                      )
                                                    : '-'}
                                            </TableCell>

                                            {/* Total Rincian */}
                                            <TableCell
                                                className={`pe-4 text-right ${
                                                    sub.total_anggaran_rincian !==
                                                    sub.anggaran
                                                        ? 'font-bold text-red-600'
                                                        : ''
                                                }`}
                                            >
                                                {sub.total_anggaran_rincian
                                                    ? formatRupiah(
                                                          Number(
                                                              sub.total_anggaran_rincian,
                                                          ),
                                                      )
                                                    : '0'}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </React.Fragment>
                            ),
                        )}
                    </React.Fragment>
                ))}
            </TableBody>
        </Table>
    );
};

export default GroupedTable;