import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle,
} from '@/components/ui/empty';
import { useAuthBreadcrumbOperator } from '@/hooks/use-auth-breadcrumb-operator';
import AppLayout from '@/layouts/app-layout';
import { Head } from '@inertiajs/react';
import { FolderCodeIcon } from 'lucide-react';

type SakipNode = {
    id: number;
    uraian: string;
    parent_id?: number | null;
};

interface PageProps {
    tujuanList: SakipNode[];
    indikatorTujuanList: SakipNode[];
    sasaranList: SakipNode[];
    indikatorSasaranList: SakipNode[];
    sasaranProgList: SakipNode[];
    indikatorSasaranProgList: SakipNode[];
    sasaranKegList: SakipNode[];
    indikatorSasaranKegList: SakipNode[];
    sasaranSubKegList: SakipNode[];
    indikatorSasaranSubKegList: SakipNode[];
    sasaranSubKegStafList: SakipNode[];
    indikatorSasaranSubKegStafList: SakipNode[];
}

export default function Index({
    tujuanList = [],
    indikatorTujuanList = [],
    sasaranList = [],
    indikatorSasaranList = [],
    sasaranProgList = [],
    indikatorSasaranProgList = [],
    sasaranKegList = [],
    indikatorSasaranKegList = [],
    sasaranSubKegList = [],
    indikatorSasaranSubKegList = [],
    sasaranSubKegStafList = [],
    indikatorSasaranSubKegStafList = [],
}: PageProps) {
    const breadcrumbs = useAuthBreadcrumbOperator();

    const renderRows = () => {
        return tujuanList.flatMap((tujuan) => {
            const indikatorTujuan = indikatorTujuanList.filter(
                (ind) => Number(ind.parent_id) === Number(tujuan.id),
            );

            if (indikatorTujuan.length === 0) {
                return [
                    {
                        tujuan: tujuan.uraian,
                        indikatorTujuan: '-',
                        sasaran: '-',
                        indikatorSasaran: '-',
                        sasaranProgram: '-',
                        indikatorSasaranProgram: '-',
                        sasaranKegiatan: '-',
                        indikatorSasaranKegiatan: '-',
                        sasaranSubKegiatan: '-',
                        indikatorSasaranSubKegiatan: '-',
                        sasaranSubKegiatanStaf: '-',
                        indikatorSasaranSubKegiatanStaf: '-',
                    },
                ];
            }

            return indikatorTujuan.flatMap((ind) => {
                const sasarans = sasaranList.filter(
                    (sas) => Number(sas.parent_id) === Number(ind.id),
                );

                if (sasarans.length === 0) {
                    return [
                        {
                            tujuan: tujuan.uraian,
                            indikatorTujuan: ind.uraian,
                            sasaran: '-',
                            indikatorSasaran: '-',
                            sasaranProgram: '-',
                            indikatorSasaranProgram: '-',
                            sasaranKegiatan: '-',
                            indikatorSasaranKegiatan: '-',
                            sasaranSubKegiatan: '-',
                            indikatorSasaranSubKegiatan: '-',
                            sasaranSubKegiatanStaf: '-',
                            indikatorSasaranSubKegiatanStaf: '-',
                        },
                    ];
                }

                return sasarans.flatMap((sas) => {
                    const indikatorSasaran = indikatorSasaranList.filter(
                        (is) => Number(is.parent_id) === Number(sas.id),
                    );

                    if (indikatorSasaran.length === 0) {
                        return [
                            {
                                tujuan: tujuan.uraian,
                                indikatorTujuan: ind.uraian,
                                sasaran: sas.uraian,
                                indikatorSasaran: '-',
                                sasaranProgram: '-',
                                indikatorSasaranProgram: '-',
                                sasaranKegiatan: '-',
                                indikatorSasaranKegiatan: '-',
                                sasaranSubKegiatan: '-',
                                indikatorSasaranSubKegiatan: '-',
                                sasaranSubKegiatanStaf: '-',
                                indikatorSasaranSubKegiatanStaf: '-',
                            },
                        ];
                    }

                    return indikatorSasaran.flatMap((is) => {
                        const sasaranProgram = sasaranProgList.filter(
                            (sp) => Number(sp.parent_id) === Number(is.id),
                        );

                        if (sasaranProgram.length === 0) {
                            return [
                                {
                                    tujuan: tujuan.uraian,
                                    indikatorTujuan: ind.uraian,
                                    sasaran: sas.uraian,
                                    indikatorSasaran: is.uraian,
                                    sasaranProgram: '-',
                                    indikatorSasaranProgram: '-',
                                    sasaranKegiatan: '-',
                                    indikatorSasaranKegiatan: '-',
                                    sasaranSubKegiatan: '-',
                                    indikatorSasaranSubKegiatan: '-',
                                    sasaranSubKegiatanStaf: '-',
                                    indikatorSasaranSubKegiatanStaf: '-',
                                },
                            ];
                        }

                        return sasaranProgram.flatMap((sp) => {
                            const indikatorSasaranProgram =
                                indikatorSasaranProgList.filter(
                                    (isp) =>
                                        Number(isp.parent_id) === Number(sp.id),
                                );

                            if (indikatorSasaranProgram.length === 0) {
                                return [
                                    {
                                        tujuan: tujuan.uraian,
                                        indikatorTujuan: ind.uraian,
                                        sasaran: sas.uraian,
                                        indikatorSasaran: is.uraian,
                                        sasaranProgram: sp.uraian,
                                        indikatorSasaranProgram: '-',
                                        sasaranKegiatan: '-',
                                        indikatorSasaranKegiatan: '-',
                                        sasaranSubKegiatan: '-',
                                        indikatorSasaranSubKegiatan: '-',
                                        sasaranSubKegiatanStaf: '-',
                                        indikatorSasaranSubKegiatanStaf: '-',
                                    },
                                ];
                            }

                            return indikatorSasaranProgram.flatMap((isp) => {
                                const sasaranKegiatan = sasaranKegList.filter(
                                    (sk) =>
                                        Number(sk.parent_id) === Number(isp.id),
                                );

                                if (sasaranKegiatan.length === 0) {
                                    return [
                                        {
                                            tujuan: tujuan.uraian,
                                            indikatorTujuan: ind.uraian,
                                            sasaran: sas.uraian,
                                            indikatorSasaran: is.uraian,
                                            sasaranProgram: sp.uraian,
                                            indikatorSasaranProgram: isp.uraian,
                                            sasaranKegiatan: '-',
                                            indikatorSasaranKegiatan: '-',
                                            sasaranSubKegiatan: '-',
                                            indikatorSasaranSubKegiatan: '-',
                                            sasaranSubKegiatanStaf: '-',
                                            indikatorSasaranSubKegiatanStaf:
                                                '-',
                                        },
                                    ];
                                }

                                return sasaranKegiatan.flatMap((sk) => {
                                    const indikatorSasaranKegiatan =
                                        indikatorSasaranKegList.filter(
                                            (isk) =>
                                                Number(isk.parent_id) ===
                                                Number(sk.id),
                                        );

                                    if (indikatorSasaranKegiatan.length === 0) {
                                        return [
                                            {
                                                tujuan: tujuan.uraian,
                                                indikatorTujuan: ind.uraian,
                                                sasaran: sas.uraian,
                                                indikatorSasaran: is.uraian,
                                                sasaranProgram: sp.uraian,
                                                indikatorSasaranProgram:
                                                    isp.uraian,
                                                sasaranKegiatan: sk.uraian,
                                                indikatorSasaranKegiatan: '-',
                                                sasaranSubKegiatan: '-',
                                                indikatorSasaranSubKegiatan:
                                                    '-',
                                                sasaranSubKegiatanStaf: '-',
                                                indikatorSasaranSubKegiatanStaf:
                                                    '-',
                                            },
                                        ];
                                    }

                                    return indikatorSasaranKegiatan.flatMap(
                                        (isk) => {
                                            const sasaranSubKegiatan =
                                                sasaranSubKegList.filter(
                                                    (ssk) =>
                                                        Number(
                                                            ssk.parent_id,
                                                        ) === Number(isk.id),
                                                );

                                            if (
                                                sasaranSubKegiatan.length === 0
                                            ) {
                                                return [
                                                    {
                                                        tujuan: tujuan.uraian,
                                                        indikatorTujuan:
                                                            ind.uraian,
                                                        sasaran: sas.uraian,
                                                        indikatorSasaran:
                                                            is.uraian,
                                                        sasaranProgram:
                                                            sp.uraian,
                                                        indikatorSasaranProgram:
                                                            isp.uraian,
                                                        sasaranKegiatan:
                                                            sk.uraian,
                                                        indikatorSasaranKegiatan:
                                                            isk.uraian,
                                                        sasaranSubKegiatan: '-',
                                                        indikatorSasaranSubKegiatan:
                                                            '-',
                                                        sasaranSubKegiatanStaf:
                                                            '-',
                                                        indikatorSasaranSubKegiatanStaf:
                                                            '-',
                                                    },
                                                ];
                                            }

                                            return sasaranSubKegiatan.flatMap(
                                                (ssk) => {
                                                    const indikatorSasaranSubKegiatan =
                                                        indikatorSasaranSubKegList.filter(
                                                            (issk) =>
                                                                Number(
                                                                    issk.parent_id,
                                                                ) ===
                                                                Number(ssk.id),
                                                        );

                                                    if (
                                                        indikatorSasaranSubKegiatan.length ===
                                                        0
                                                    ) {
                                                        return [
                                                            {
                                                                tujuan: tujuan.uraian,
                                                                indikatorTujuan:
                                                                    ind.uraian,
                                                                sasaran:
                                                                    sas.uraian,
                                                                indikatorSasaran:
                                                                    is.uraian,
                                                                sasaranProgram:
                                                                    sp.uraian,
                                                                indikatorSasaranProgram:
                                                                    isp.uraian,
                                                                sasaranKegiatan:
                                                                    sk.uraian,
                                                                indikatorSasaranKegiatan:
                                                                    isk.uraian,
                                                                sasaranSubKegiatan:
                                                                    ssk.uraian,
                                                                indikatorSasaranSubKegiatan:
                                                                    '-',
                                                                sasaranSubKegiatanStaf:
                                                                    '-',
                                                                indikatorSasaranSubKegiatanStaf:
                                                                    '-',
                                                            },
                                                        ];
                                                    }

                                                    return indikatorSasaranSubKegiatan.flatMap(
                                                        (issk) => {
                                                            const sasaranSubKegStaf =
                                                                sasaranSubKegStafList.filter(
                                                                    (ssks) =>
                                                                        Number(
                                                                            ssks.parent_id,
                                                                        ) ===
                                                                        Number(
                                                                            issk.id,
                                                                        ),
                                                                );

                                                            if (
                                                                sasaranSubKegStaf.length ===
                                                                0
                                                            ) {
                                                                return [
                                                                    {
                                                                        tujuan: tujuan.uraian,
                                                                        indikatorTujuan:
                                                                            ind.uraian,
                                                                        sasaran:
                                                                            sas.uraian,
                                                                        indikatorSasaran:
                                                                            is.uraian,
                                                                        sasaranProgram:
                                                                            sp.uraian,
                                                                        indikatorSasaranProgram:
                                                                            isp.uraian,
                                                                        sasaranKegiatan:
                                                                            sk.uraian,
                                                                        indikatorSasaranKegiatan:
                                                                            isk.uraian,
                                                                        sasaranSubKegiatan:
                                                                            ssk.uraian,
                                                                        indikatorSasaranSubKegiatan:
                                                                            issk.uraian,
                                                                        sasaranSubKegiatanStaf:
                                                                            '-',
                                                                        indikatorSasaranSubKegiatanStaf:
                                                                            '-',
                                                                    },
                                                                ];
                                                            }

                                                            return sasaranSubKegStaf.flatMap(
                                                                (ssks) => {
                                                                    const indikatorSasaranSubKegStaf =
                                                                        indikatorSasaranSubKegStafList.filter(
                                                                            (
                                                                                issks,
                                                                            ) =>
                                                                                Number(
                                                                                    issks.parent_id,
                                                                                ) ===
                                                                                Number(
                                                                                    ssks.id,
                                                                                ),
                                                                        );

                                                                    if (
                                                                        indikatorSasaranSubKegStaf.length ===
                                                                        0
                                                                    ) {
                                                                        return [
                                                                            {
                                                                                tujuan: tujuan.uraian,
                                                                                indikatorTujuan:
                                                                                    ind.uraian,
                                                                                sasaran:
                                                                                    sas.uraian,
                                                                                indikatorSasaran:
                                                                                    is.uraian,
                                                                                sasaranProgram:
                                                                                    sp.uraian,
                                                                                indikatorSasaranProgram:
                                                                                    isp.uraian,
                                                                                sasaranKegiatan:
                                                                                    sk.uraian,
                                                                                indikatorSasaranKegiatan:
                                                                                    isk.uraian,
                                                                                sasaranSubKegiatan:
                                                                                    ssk.uraian,
                                                                                indikatorSasaranSubKegiatan:
                                                                                    issk.uraian,
                                                                                sasaranSubKegiatanStaf:
                                                                                    ssks.uraian,
                                                                                indikatorSasaranSubKegiatanStaf:
                                                                                    '-',
                                                                            },
                                                                        ];
                                                                    }

                                                                    return indikatorSasaranSubKegStaf.map(
                                                                        (
                                                                            issks,
                                                                        ) => ({
                                                                            tujuan: tujuan.uraian,
                                                                            indikatorTujuan:
                                                                                ind.uraian,
                                                                            sasaran:
                                                                                sas.uraian,
                                                                            indikatorSasaran:
                                                                                is.uraian,
                                                                            sasaranProgram:
                                                                                sp.uraian,
                                                                            indikatorSasaranProgram:
                                                                                isp.uraian,
                                                                            sasaranKegiatan:
                                                                                sk.uraian,
                                                                            indikatorSasaranKegiatan:
                                                                                isk.uraian,
                                                                            sasaranSubKegiatan:
                                                                                ssk.uraian,
                                                                            indikatorSasaranSubKegiatan:
                                                                                issk.uraian,
                                                                            sasaranSubKegiatanStaf:
                                                                                ssks.uraian,
                                                                            indikatorSasaranSubKegiatanStaf:
                                                                                issks.uraian,
                                                                        }),
                                                                    );
                                                                },
                                                            );
                                                        },
                                                    );
                                                },
                                            );
                                        },
                                    );
                                });
                            });
                        });
                    });
                });
            });
        });
    };

    const rows = renderRows();

    // setelah kamu dapatkan rows dari renderRows(...)
    const cleanRows = rows.map((row, idx, arr) => {
        if (idx === 0) return row; // baris pertama biarkan

        const prev = arr[idx - 1];

        return {
            ...row,
            tujuan: row.tujuan === prev.tujuan ? '' : row.tujuan,
            indikatorTujuan:
                row.indikatorTujuan === prev.indikatorTujuan
                    ? ''
                    : row.indikatorTujuan,
            sasaran: row.sasaran === prev.sasaran ? '' : row.sasaran,
            indikatorSasaran:
                row.indikatorSasaran === prev.indikatorSasaran
                    ? ''
                    : row.indikatorSasaran,
            sasaranProgram:
                row.sasaranProgram === prev.sasaranProgram
                    ? ''
                    : row.sasaranProgram,
            indikatorSasaranProgram:
                row.indikatorSasaranProgram === prev.indikatorSasaranProgram
                    ? ''
                    : row.indikatorSasaranProgram,
            sasaranKegiatan:
                row.sasaranKegiatan === prev.sasaranKegiatan
                    ? ''
                    : row.sasaranKegiatan,
            indikatorSasaranKegiatan:
                row.indikatorSasaranKegiatan === prev.indikatorSasaranKegiatan
                    ? ''
                    : row.indikatorSasaranKegiatan,
            sasaranSubKegiatan:
                row.sasaranSubKegiatan === prev.sasaranSubKegiatan
                    ? ''
                    : row.sasaranSubKegiatan,
            indikatorSasaranSubKegiatan:
                row.indikatorSasaranSubKegiatan ===
                prev.indikatorSasaranSubKegiatan
                    ? ''
                    : row.indikatorSasaranSubKegiatan,
            sasaranSubKegiatanStaf:
                row.sasaranSubKegiatanStaf === prev.sasaranSubKegiatanStaf
                    ? ''
                    : row.sasaranSubKegiatanStaf,
            indikatorSasaranSubKegiatanStaf:
                row.indikatorSasaranSubKegiatanStaf ===
                prev.indikatorSasaranSubKegiatanStaf
                    ? ''
                    : row.indikatorSasaranSubKegiatanStaf,
        };
    });

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Cascading" />
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl px-6 py-4">
                <span>
                    <h1 className="text-2xl font-bold uppercase">Cascading</h1>
                    <p className="text-sm text-muted-foreground">
                        Halaman ini digunakan untuk menampilkan cascading
                    </p>
                </span>

                <div className="overflow-x-auto rounded-md border">
                    {cleanRows.length > 0 ? (
                        <table className="w-full text-xs">
                            <thead className="bg-emerald-600 align-top text-white">
                                <tr>
                                    <th className="border border-gray-300 p-2 font-semibold">
                                        Tujuan
                                    </th>
                                    <th className="border border-gray-300 p-2 font-semibold">
                                        Indikator Tujuan
                                    </th>
                                    <th className="border border-gray-300 p-2 font-semibold">
                                        Sasaran
                                    </th>
                                    <th className="border border-gray-300 p-2 font-semibold">
                                        Indikator Sasaran
                                    </th>
                                    <th className="border border-gray-300 p-2 font-semibold">
                                        Sasaran Program
                                    </th>
                                    <th className="border border-gray-300 p-2 font-semibold">
                                        Indikator Sasaran Program
                                    </th>
                                    <th className="border border-gray-300 p-2 font-semibold">
                                        Sasaran Kegiatan
                                    </th>
                                    <th className="border border-gray-300 p-2 font-semibold">
                                        Indikator Sasaran Kegiatan
                                    </th>
                                    <th className="border border-gray-300 p-2 font-semibold">
                                        Sasaran Sub Kegiatan
                                    </th>
                                    <th className="border border-gray-300 p-2 font-semibold">
                                        Indikator Sasaran Sub Kegiatan
                                    </th>
                                    <th className="border border-gray-300 p-2 font-semibold">
                                        Sasaran Sub Kegiatan Staf
                                    </th>
                                    <th className="border border-gray-300 p-2 font-semibold">
                                        Indikator Sasaran Sub Kegiatan Staf
                                    </th>
                                </tr>
                            </thead>
                            <tbody className="align-top">
                                {cleanRows.map((row, idx) => (
                                    <tr
                                        key={idx}
                                        className="transition odd:bg-white even:bg-gray-50 hover:bg-indigo-50"
                                    >
                                        <td className="border border-gray-300 p-2">
                                            {row.tujuan}
                                        </td>
                                        <td className="border border-gray-300 p-2">
                                            {row.indikatorTujuan}
                                        </td>
                                        <td className="border border-gray-300 p-2">
                                            {row.sasaran}
                                        </td>
                                        <td className="border border-gray-300 p-2">
                                            {row.indikatorSasaran}
                                        </td>
                                        <td className="border border-gray-300 p-2">
                                            {row.sasaranProgram}
                                        </td>
                                        <td className="border border-gray-300 p-2">
                                            {row.indikatorSasaranProgram}
                                        </td>
                                        <td className="border border-gray-300 p-2">
                                            {row.sasaranKegiatan}
                                        </td>
                                        <td className="border border-gray-300 p-2">
                                            {row.indikatorSasaranKegiatan}
                                        </td>
                                        <td className="border border-gray-300 p-2">
                                            {row.sasaranSubKegiatan}
                                        </td>
                                        <td className="border border-gray-300 p-2">
                                            {row.indikatorSasaranSubKegiatan}
                                        </td>
                                        <td className="border border-gray-300 p-2">
                                            {row.sasaranSubKegiatanStaf}
                                        </td>
                                        <td className="border border-gray-300 p-2">
                                            {
                                                row.indikatorSasaranSubKegiatanStaf
                                            }
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    ) : (
                        <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>
        </AppLayout>
    );
}