import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
} from '@/components/ui/command';
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle,
} from '@/components/ui/empty';
import { Input } from '@/components/ui/input';
import {
    InputGroup,
    InputGroupAddon,
    InputGroupInput,
} from '@/components/ui/input-group';
import { Label } from '@/components/ui/label';
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from '@/components/ui/popover';
import { ScrollArea } from '@/components/ui/scroll-area';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { Textarea } from '@/components/ui/textarea';
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { useAuthBreadcrumbOperator } from '@/hooks/use-auth-breadcrumb-operator';
import AppLayout from '@/layouts/app-layout';
import { cn } from '@/lib/utils';
import { Asn, Iki, SakipNode } from '@/types';
import { Head, router } from '@inertiajs/react';
import { DialogDescription } from '@radix-ui/react-dialog';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
import {
    Calendar1,
    Check,
    ChevronsUpDown,
    Edit,
    Eye,
    FolderCodeIcon,
    PlusCircle,
    Search,
    Trash2,
} from 'lucide-react';
import { useMemo, useState } from 'react';
import { toast, Toaster } from 'sonner';

interface Props {
    ikiList: Iki[];
    asnList: Asn[];
    sakipNodeList: SakipNode[];
}

export default function IkiIndex({ ikiList, asnList, sakipNodeList }: Props) {
    const breadcrumbs = useAuthBreadcrumbOperator();

    // 🔍 Search state
    const [searchQuery, setSearchQuery] = useState('');

    // 🧩 Form States
    const [open, setOpen] = useState(false);
    const [openAsn, setOpenAsn] = useState(false);
    const [openDelete, setOpenDelete] = useState(false);
    const [editMode, setEditMode] = useState(false);
    const [selectedId, setSelectedId] = useState<number | null>(null);

    // sakip node
    const [openSakip, setOpenSakip] = useState(false);
    const [sakipNodeId, setSakipNodeId] = useState('');

    const [asnId, setAsnId] = useState('');
    const [selectedAsn, setSelectedAsn] = useState<Asn | null>(null);
    const [tugas, setTugas] = useState('');
    const [fungsi, setFungsi] = useState<string[]>(['']);
    const [sakipNodeIds, setSakipNodeIds] = useState<string[]>([]);
    const [loading, setLoading] = useState(false);

    // preview pdf
    const [openPreview, setOpenPreview] = useState(false);
    const [pdfUrl, setPdfUrl] = useState<string | null>(null);
    const [pdfFileName, setPdfFileName] = useState('');

    const filteredSakipNodes = useMemo(() => {
        if (!selectedAsn) return sakipNodeList;
        if (selectedAsn.level?.toLowerCase() === 'eselon_2') {
            return sakipNodeList.filter((n) => {
                const kategori = n.kategori?.toLowerCase();
                return (
                    kategori === 'sasaran pd' ||
                    kategori === 'indikator sasaran pd'
                );
            });
        }
        if (selectedAsn.level?.toLowerCase() === 'eselon_3') {
            return sakipNodeList.filter((n) => {
                const kategori = n.kategori?.toLowerCase();
                return (
                    kategori === 'sasaran program' ||
                    kategori === 'sasaran kegiatan' ||
                    kategori === 'indikator sasaran program' ||
                    kategori === 'indikator sasaran kegiatan'
                );
            });
        }
        if (selectedAsn.level?.toLowerCase() === 'eselon_4') {
            return sakipNodeList.filter(
                (n) => n.kategori?.toLowerCase() === 'sasaran sub kegiatan',
            );
        }
        if (selectedAsn.level?.toLowerCase() === 'fungsional') {
            return sakipNodeList.filter(
                (n) =>
                    n.kategori?.toLowerCase() === 'sasaran sub kegiatan staf',
            );
        }
        if (selectedAsn.level?.toLowerCase() === 'staf') {
            return sakipNodeList.filter(
                (n) =>
                    n.kategori?.toLowerCase() === 'sasaran sub kegiatan staf',
            );
        }
        return sakipNodeList;
    }, [selectedAsn, sakipNodeList]);

    // 🔄 Filter pencarian
    const filteredIkiList = (ikiList ?? []).filter((item) => {
        const query = searchQuery.toLowerCase();
        if (query === '') return true;
        const nameMatch = item.asn?.nama?.toLowerCase().includes(query);
        const nipMatch = item.asn?.nip?.toLowerCase().includes(query);
        return nameMatch || nipMatch;
    });

    // 🧩 Fungsi Dynamic Input
    function addFungsi() {
        setFungsi([...fungsi, '']);
    }

    function removeFungsi(index: number) {
        const newFungsi = [...fungsi];
        newFungsi.splice(index, 1);
        setFungsi(newFungsi);
    }

    function handleFungsiChange(index: number, value: string) {
        const newFungsi = [...fungsi];
        newFungsi[index] = value;
        setFungsi(newFungsi);
    }

    // ✳️ Open Modal (Add)
    function openCreateModal() {
        setEditMode(false);
        setSelectedId(null);
        setAsnId('');
        setSelectedAsn(null);
        setTugas('');
        setFungsi(['']);
        setSakipNodeIds([]);
        setOpen(true);
    }

    // 🟠 Open Modal (Edit)
    function openEditModal(iki: Iki) {
        setEditMode(true);
        setSelectedId(iki.id);
        setAsnId(String(iki.asn_id));
        setSelectedAsn(iki.asn || null);
        setTugas(iki.tugas);
        setFungsi(iki.fungsi ?? ['']);
        if (Array.isArray(iki.sakip_nodes)) {
            setSakipNodeIds(iki.sakip_nodes.map((n) => n.id.toString()));
        } else {
            setSakipNodeIds([]);
        }
        setOpen(true);
    }

    // 💾 Submit Create/Update
    async function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        setLoading(true);

        const payload = {
            asn_id: asnId,
            sakip_node_ids: sakipNodeIds,
            tugas,
            fungsi,
        };

        try {
            if (editMode && selectedId) {
                router.put(`/a/iki/${selectedId}`, payload, {
                    onSuccess: () => setOpen(false),
                    onFinish: () => setLoading(false),
                });
            } else {
                router.post('/a/iki', payload, {
                    onSuccess: () => setOpen(false),
                    onFinish: () => setLoading(false),
                });
            }
        } catch (error) {
            console.error(error);
            setLoading(false);
        }
    }

    function handleDelete(id: number) {
        router.delete(`/a/iki/${id}`, {
            onStart: () => {
                toast.loading('Menghapus data...');
            },
            onSuccess: () => {
                toast.success('Data berhasil dihapus!', {
                    style: {
                        background: '#16a34a', // hijau
                        color: 'white',
                    },
                });
            },
            onError: () => {
                toast.error('Gagal menghapus data!', {
                    style: {
                        background: '#dc2626', // merah
                        color: 'white',
                    },
                });
            },
            onFinish: () => {
                toast.dismiss(); // menutup toast loading kalau ada
            },
        });
    }

    // SakipNode multi-select toggle
    const toggleSakipNode = (id: string) => {
        if (sakipNodeIds.includes(id)) {
            setSakipNodeIds(sakipNodeIds.filter((x) => x !== id));
        } else {
            setSakipNodeIds([...sakipNodeIds, id]);
        }
    };

    function handlePreviewPDF(iki: Iki) {
        const doc = new jsPDF({
            orientation: 'portrait',
            unit: 'mm',
            format: 'a4',
        });
        const pageWidth = doc.internal.pageSize.getWidth();
        let y = 20;

        function drawJustifiedText(
            text: string,
            x: number,
            y: number,
            maxWidth: number,
            lineHeight = 4,
        ): number {
            const lines: string[] = doc.splitTextToSize(text, maxWidth);
            const spaceWidth = doc.getTextWidth(' ');

            lines.forEach((line: string, i: number) => {
                const words = line.trim().split(/\s+/);
                if (words.length === 1 || i === lines.length - 1) {
                    // Baris terakhir -> rata kiri normal
                    doc.text(line, x, y);
                } else {
                    // Baris justify
                    const lineWidth = doc.getTextWidth(
                        line.replace(/\s+/g, ''),
                    );
                    const extraSpace =
                        (maxWidth - lineWidth) / (words.length - 1);
                    let currentX = x;
                    for (const word of words) {
                        doc.text(word, currentX, y);
                        currentX +=
                            doc.getTextWidth(word) + spaceWidth + extraSpace;
                    }
                }
                y += lineHeight;
            });
            return y;
        }

        // === Judul ===
        doc.setFont('helvetica', 'bold');
        doc.setFontSize(12);
        doc.text('INDIKATOR KINERJA INDIVIDU', pageWidth / 2, y, {
            align: 'center',
            baseline: 'middle',
        });

        // === Awal posisi teks ===
        y += 15;
        doc.setFontSize(10);
        doc.setFont('helvetica', 'normal');

        // === Posisi kolom ===
        const colNomor = 18;
        const colLabel = 22;
        const colNomorUrutA = 43; // kolom "a.", "b.", dst
        let colTitik = 0;
        let colIsi = 0;
        const maxWidth = pageWidth - 20;

        // === Data utama ===
        const data = [
            {
                no: '1.',
                label: 'Jabatan',
                value: iki.asn?.jabatan || '-',
            },
            {
                no: '2.',
                label: 'Tugas',
                value: iki.tugas || '-',
            },
            {
                no: '3.',
                label: 'Fungsi',
                value: iki.fungsi && iki.fungsi.length > 0 ? iki.fungsi : ['-'],
            },
        ];

        // === Hitung lebar label ===
        let maxLabelWidth = 0;
        data.forEach((row) => {
            const labelWidth = doc.getTextWidth(row.label);
            if (labelWidth > maxLabelWidth) maxLabelWidth = labelWidth;
        });

        // === Atur titik dan isi ===
        colTitik = colLabel + maxLabelWidth + 3;
        colIsi = colTitik + 5;

        // === Cetak data utama ===
        data.forEach((row) => {
            doc.text(row.no, colNomor, y);
            doc.text(row.label, colLabel, y);
            doc.text(':', colTitik, y);

            if (row.label.toLowerCase() === 'fungsi') {
                const fungsiList: string[] = Array.isArray(row.value)
                    ? row.value
                    : [String(row.value)];

                fungsiList.forEach((f, i) => {
                    const subNo = `${String.fromCharCode(97 + i)}.`; // a., b., dst
                    doc.text(subNo, colNomorUrutA, y);

                    autoTable(doc, {
                        startY: y - 3, // sedikit ke atas agar sejajar
                        margin: { left: colNomorUrutA + 6, right: 15 },
                        body: [[f]],
                        styles: {
                            halign: 'justify',
                            fontSize: 10,
                            cellPadding: 0,
                            textColor: [0, 0, 0],
                            cellWidth: 'wrap',
                            overflow: 'linebreak',
                            valign: 'top',
                        },
                        theme: 'plain',
                    });

                    y = (doc.lastAutoTable?.finalY ?? y) + 3;
                });
                y += 2;
            } else if (row.label.toLowerCase() === 'tugas') {
                // === Gunakan autoTable agar teks justify otomatis ===
                autoTable(doc, {
                    startY: y - 3,
                    margin: { left: colIsi, right: 15 },
                    body: [[String(row.value)]],
                    styles: {
                        halign: 'justify',
                        fontSize: 10,
                        cellPadding: 0,
                        textColor: [0, 0, 0],
                        cellWidth: 'wrap',
                        overflow: 'linebreak',
                        valign: 'top',
                    },
                    theme: 'plain',
                });
                y = (doc.lastAutoTable?.finalY ?? y) + 5;
            } else {
                const isiText = doc.splitTextToSize(
                    String(row.value),
                    maxWidth - colIsi,
                );
                doc.text(isiText, colIsi, y);
                y += isiText.length * 4 + 3;
            }
        });

        // === Cetak tabel SAKIP (tetap seperti sebelumnya) ===
        if (iki.asn?.level === 'eselon_2' || iki.asn?.level === 'eselon_3') {
            const selectedNodes = iki.sakip_nodes || [];

            const sasaranList = selectedNodes.filter((sn: SakipNode) => {
                const kategori = sn.kategori?.toLowerCase();
                return iki.asn?.level === 'eselon_2'
                    ? kategori === 'sasaran pd'
                    : kategori === 'sasaran program' ||
                          kategori === 'sasaran kegiatan';
            });

            const sasaranRows = sasaranList.map(
                (sasaran: SakipNode, idx: number) => {
                    const indikatorList = selectedNodes.filter(
                        (child: SakipNode) =>
                            child.parent_id === sasaran.id &&
                            child.kategori?.toLowerCase().includes('indikator'),
                    );

                    const formulasiText = [
                        indikatorList.length > 0
                            ? indikatorList
                                  .map((ind) => ind.formulasi)
                                  .join('\n\n')
                            : '-',
                        indikatorList.length > 0
                            ? indikatorList
                                  .map((ind) => ind.keterangan)
                                  .join('\n\n')
                            : '',
                    ]
                        .filter(Boolean)
                        .join('\n\n');

                    return [
                        idx + 1,
                        sasaran.uraian || '-',
                        indikatorList.length > 0
                            ? indikatorList
                                  .map((ind) => ind.uraian)
                                  .join('\n\n')
                            : '-',
                        formulasiText,
                        indikatorList.length > 0
                            ? indikatorList
                                  .map((ind) => ind.sumber_data)
                                  .join('\n\n')
                            : '-',
                    ];
                },
            );

            autoTable(doc, {
                startY: y,
                head: [
                    [
                        'No',
                        'Sasaran Program / Kegiatan',
                        'Indikator Kinerja',
                        'Formulasi',
                        'Sumber Data',
                    ],
                ],
                headStyles: {
                    halign: 'center',
                    valign: 'middle',
                    fontStyle: 'bold',
                    textColor: [0, 0, 0],
                    fillColor: [255, 255, 255],
                    lineWidth: 0.1,
                },
                body:
                    sasaranRows.length > 0
                        ? sasaranRows
                        : [['', 'Belum ada data sasaran', '', '', '']],
                theme: 'grid',
                styles: {
                    fontSize: 9,
                    cellPadding: 3,
                    valign: 'top',
                    textColor: [0, 0, 0],
                },
                columnStyles: {
                    0: { cellWidth: 10, halign: 'center' },
                    1: { cellWidth: 55 },
                    2: { cellWidth: 50 },
                    3: { cellWidth: 40 },
                    4: {},
                },
            });
        }

        // === Footer ===
        const offsetX = 30;
        const centerX = pageWidth / 2 + offsetX;
        const finalY = doc.lastAutoTable?.finalY || y + 10;
        const footerY = finalY + 25;

        doc.setFontSize(10);
        doc.setFont('helvetica');
        doc.text(iki.asn?.jabatan || '-', centerX, footerY, {
            align: 'center',
        });
        doc.text(
            'Badan Kepegawaian dan Pengembangan SDM',
            centerX,
            footerY + 5,
            { align: 'center' },
        );

        const name = iki.asn?.nama || '-';
        const nameY = footerY + 35;
        doc.setFont('helvetica', 'bold');
        doc.text(name, centerX, nameY, { align: 'center' });

        doc.setFont('helvetica', 'normal');
        const nip = 'NIP. ' + (iki.asn?.nip || '-');
        const nipY = footerY + 41;
        doc.text(nip, centerX, nipY, { align: 'center' });

        const nipWidth = doc.getTextWidth(nip);
        doc.setLineWidth(0.5);
        doc.line(
            centerX - nipWidth / 2,
            nameY + 1.8,
            centerX + nipWidth / 2,
            nameY + 1.8,
        );

        // === Nama file ===
        const safeNama = (iki.asn?.nama || 'TANPA_NAMA')
            .toUpperCase()
            .replace(/[^\w\s-]/g, '')
            .trim();
        const safeNip = (iki.asn?.nip || '').replace(/[^\d\s-]/g, '').trim();
        const fileName = `IKI-${safeNama} (${safeNip}).pdf`;

        // === Output ke blob untuk preview ===
        const blob = doc.output('blob');
        const url = URL.createObjectURL(blob);

        setPdfUrl(url);
        setPdfFileName(fileName);
        setOpenPreview(true);
    }

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="IKI" />
            <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">
                        Indikator Kinerja Individu
                    </h1>
                    <p className="text-sm text-muted-foreground">
                        Halaman ini digunakan untuk mengelola indikator kinerja
                        individu (IKI)
                    </p>
                </span>

                <div className="flex items-center justify-between gap-6">
                    <div className="w-[300px]">
                        <InputGroup className="w-full">
                            <InputGroupInput
                                placeholder="Pencarian (Nama/NIP)..."
                                onChange={(e) => setSearchQuery(e.target.value)}
                            />
                            <InputGroupAddon>
                                <Search />
                            </InputGroupAddon>
                        </InputGroup>
                    </div>

                    <Button
                        size="sm"
                        className="bg-emerald-600 hover:bg-emerald-700"
                        onClick={openCreateModal}
                    >
                        <PlusCircle className="h-4 w-4" />
                        Tambah
                    </Button>
                </div>

                {/* Table */}
                <div className="rounded-md border p-5">
                    <Table className="text-sm">
                        <TableHeader>
                            <TableRow>
                                <TableHead className="w-[15px] text-center">
                                    NO
                                </TableHead>
                                <TableHead>NAMA</TableHead>
                                <TableHead className="text-center">
                                    TAHUN
                                </TableHead>
                                <TableHead className="text-center">
                                    AKSI
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {filteredIkiList.length > 0 ? (
                                filteredIkiList.map((item, index) => (
                                    <TableRow key={item.id} className="">
                                        <TableCell className="text-center">
                                            {index + 1}
                                        </TableCell>
                                        <TableCell className="w-2">
                                            <div className="flex items-center gap-3">
                                                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-sm font-semibold text-gray-600">
                                                    {item.asn?.nama
                                                        ?.split(' ')
                                                        .slice(0, 2)
                                                        .map((word) => word[0])
                                                        .join('')
                                                        .toUpperCase()}
                                                </div>

                                                {/* Nama dan NIP */}
                                                <div className="flex flex-col leading-tight">
                                                    <span className="text-sm font-medium">
                                                        {item.asn?.nama}
                                                    </span>
                                                    <span className="text-xs text-muted-foreground">
                                                        {item.asn?.nip}
                                                    </span>
                                                </div>
                                            </div>
                                        </TableCell>
                                        <TableCell className="text-center">
                                            <Badge
                                                variant="outline"
                                                className="px-1.5 text-muted-foreground"
                                            >
                                                <Calendar1 />
                                                {item.tahun?.nama}
                                            </Badge>
                                        </TableCell>
                                        <TableCell className="w-[80px]">
                                            <div className="flex items-center justify-center gap-2">
                                                <TooltipProvider>
                                                    <Tooltip>
                                                        <TooltipTrigger asChild>
                                                            <Button
                                                                size="sm"
                                                                variant={
                                                                    'ghost'
                                                                }
                                                                onClick={() =>
                                                                    handlePreviewPDF(
                                                                        item,
                                                                    )
                                                                }
                                                            >
                                                                <Eye className="h-4 w-4" />
                                                            </Button>
                                                        </TooltipTrigger>
                                                        <TooltipContent>
                                                            <p>Preview</p>
                                                        </TooltipContent>
                                                    </Tooltip>
                                                </TooltipProvider>
                                                <TooltipProvider>
                                                    <Tooltip>
                                                        <TooltipTrigger asChild>
                                                            <Button
                                                                size="sm"
                                                                variant={
                                                                    'ghost'
                                                                }
                                                                onClick={() =>
                                                                    openEditModal(
                                                                        item,
                                                                    )
                                                                }
                                                            >
                                                                <Edit className="h-4 w-4" />
                                                            </Button>
                                                        </TooltipTrigger>
                                                        <TooltipContent>
                                                            <p>Edit</p>
                                                        </TooltipContent>
                                                    </Tooltip>
                                                </TooltipProvider>
                                                <TooltipProvider>
                                                    <Tooltip>
                                                        <TooltipTrigger asChild>
                                                            <AlertDialog
                                                                open={
                                                                    openDelete
                                                                }
                                                                onOpenChange={
                                                                    setOpenDelete
                                                                }
                                                            >
                                                                <AlertDialogTrigger
                                                                    asChild
                                                                >
                                                                    <Button
                                                                        size="sm"
                                                                        variant="ghost"
                                                                        className="text-red-500 hover:bg-red-50 hover:text-red-600"
                                                                    >
                                                                        <Trash2 className="h-4 w-4" />
                                                                    </Button>
                                                                </AlertDialogTrigger>

                                                                <AlertDialogContent className="sm:max-w-[400px]">
                                                                    <AlertDialogHeader>
                                                                        <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
                                                                            <Trash2 className="h-6 w-6 text-red-600" />
                                                                        </div>
                                                                        <AlertDialogTitle className="text-center">
                                                                            Hapus
                                                                            Data
                                                                        </AlertDialogTitle>
                                                                        <AlertDialogDescription className="text-center">
                                                                            Apakah
                                                                            Anda
                                                                            yakin
                                                                            ingin
                                                                            menghapus
                                                                            Indikator
                                                                            Kinerja
                                                                            Individu
                                                                            &nbsp;
                                                                            <strong>
                                                                                {
                                                                                    item
                                                                                        .asn
                                                                                        ?.nama
                                                                                }
                                                                            </strong>{' '}
                                                                            &nbsp;
                                                                            ?
                                                                            <br />
                                                                        </AlertDialogDescription>
                                                                    </AlertDialogHeader>

                                                                    <AlertDialogFooter>
                                                                        <div className="flex w-full justify-center gap-4">
                                                                            <AlertDialogCancel className="rounded-md border border-gray-200 hover:bg-gray-100">
                                                                                Batal
                                                                            </AlertDialogCancel>
                                                                            <AlertDialogAction
                                                                                onClick={() => {
                                                                                    handleDelete(
                                                                                        item.id,
                                                                                    );
                                                                                    setOpenDelete(
                                                                                        false,
                                                                                    );
                                                                                }}
                                                                                className="bg-red-500 text-white hover:bg-red-600"
                                                                            >
                                                                                Hapus
                                                                            </AlertDialogAction>
                                                                        </div>
                                                                    </AlertDialogFooter>
                                                                </AlertDialogContent>
                                                            </AlertDialog>
                                                        </TooltipTrigger>
                                                        <TooltipContent>
                                                            <p>Hapus</p>
                                                        </TooltipContent>
                                                    </Tooltip>
                                                </TooltipProvider>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))
                            ) : (
                                <TableRow>
                                    <TableCell
                                        colSpan={7}
                                        className="py-6 text-center"
                                    >
                                        <Empty>
                                            <EmptyHeader>
                                                <EmptyMedia variant="icon">
                                                    <FolderCodeIcon className="text-neutral-400" />
                                                </EmptyMedia>
                                                <EmptyTitle className="text-neutral-400">
                                                    {searchQuery
                                                        ? 'Data tidak ditemukan'
                                                        : 'Belum ada data IKI'}
                                                </EmptyTitle>
                                                <EmptyDescription className="text-neutral-400">
                                                    {searchQuery
                                                        ? 'Coba ubah kata kunci pencarian'
                                                        : 'Silakan tambah data IKI terlebih dahulu.'}
                                                </EmptyDescription>
                                            </EmptyHeader>
                                        </Empty>
                                    </TableCell>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>

            {/* MODAL FORM */}
            <Dialog open={open} onOpenChange={setOpen}>
                <DialogContent className="flex max-h-[min(600px,80vh)] flex-col gap-0 border-0 bg-emerald-700 p-0 sm:max-w-2xl">
                    <DialogHeader className="border-b py-6 text-white">
                        <DialogTitle className="text-center uppercase">
                            {editMode ? 'Edit IKI' : 'Tambah IKI'}
                        </DialogTitle>
                        <DialogDescription className="text-center text-sm">
                            Periksa data sebelum diinput. 🤪
                        </DialogDescription>
                    </DialogHeader>

                    <ScrollArea className="flex max-h-full flex-col overflow-hidden">
                        <div className="bg-white px-6 py-8">
                            <form
                                id="form-iki"
                                onSubmit={handleSubmit}
                                className="space-y-4"
                            >
                                <div className="grid grid-cols-4 items-center gap-2">
                                    <Label className="col-span-1">
                                        Aparatur Sipil Negara
                                    </Label>
                                    <div className="col-span-3">
                                        <Popover
                                            open={openAsn}
                                            onOpenChange={setOpenAsn}
                                        >
                                            <PopoverTrigger asChild>
                                                <Button
                                                    variant="outline"
                                                    role="combobox"
                                                    aria-expanded={openAsn}
                                                    className="w-full justify-between font-normal text-neutral-500"
                                                >
                                                    {asnId
                                                        ? asnList.find(
                                                              (a) =>
                                                                  a.id.toString() ===
                                                                  asnId,
                                                          )?.nama
                                                        : '-- Pilih ASN --'}
                                                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                                </Button>
                                            </PopoverTrigger>
                                            <PopoverContent
                                                align="start"
                                                className="w-[var(--radix-popover-trigger-width)] p-0"
                                                onWheel={(e) =>
                                                    e.stopPropagation()
                                                }
                                            >
                                                <Command>
                                                    <CommandInput
                                                        placeholder="Cari ASN..."
                                                        className="h-9"
                                                    />
                                                    <CommandList className="max-h-40 overflow-y-auto">
                                                        <CommandEmpty>
                                                            ASN tidak ditemukan.
                                                        </CommandEmpty>
                                                        <CommandGroup>
                                                            {asnList.map(
                                                                (asn) => (
                                                                    <CommandItem
                                                                        key={
                                                                            asn.id
                                                                        }
                                                                        value={asn.id.toString()}
                                                                        onSelect={(
                                                                            v,
                                                                        ) => {
                                                                            const selected =
                                                                                asnList.find(
                                                                                    (
                                                                                        a,
                                                                                    ) =>
                                                                                        a.id.toString() ===
                                                                                        v,
                                                                                );
                                                                            setAsnId(
                                                                                v,
                                                                            );
                                                                            setSelectedAsn(
                                                                                selected ||
                                                                                    null,
                                                                            );
                                                                            setOpenAsn(
                                                                                false,
                                                                            );
                                                                        }}
                                                                    >
                                                                        <Check
                                                                            className={cn(
                                                                                'mr-2 h-4 w-4',
                                                                                asnId ===
                                                                                    asn.id.toString()
                                                                                    ? 'opacity-100'
                                                                                    : 'opacity-0',
                                                                            )}
                                                                        />
                                                                        <div>
                                                                            <p className="font-medium">
                                                                                {
                                                                                    asn.nama
                                                                                }
                                                                            </p>
                                                                            <p className="text-xs text-muted-foreground">
                                                                                (
                                                                                {
                                                                                    asn.nip
                                                                                }

                                                                                )
                                                                            </p>
                                                                        </div>
                                                                    </CommandItem>
                                                                ),
                                                            )}
                                                        </CommandGroup>
                                                    </CommandList>
                                                </Command>
                                            </PopoverContent>
                                        </Popover>
                                    </div>
                                </div>

                                <div className="grid grid-cols-4 items-center gap-2">
                                    <Label className="col-span-1">
                                        {(() => {
                                            const level =
                                                selectedAsn?.level?.toLowerCase();

                                            if (level === 'eselon_2') {
                                                return 'Sasaran / Indikator';
                                            }

                                            if (level === 'eselon_3') {
                                                return 'Sasaran / Indikator';
                                            }

                                            return 'Sasaran / Indikator';
                                        })()}
                                    </Label>
                                    <div className="col-span-3">
                                        <Popover
                                            open={openSakip}
                                            onOpenChange={setOpenSakip}
                                        >
                                            <PopoverTrigger asChild>
                                                <Button
                                                    variant="outline"
                                                    role="combobox"
                                                    aria-expanded={openSakip}
                                                    className="h-auto min-h-10 w-full justify-between text-left font-normal break-words whitespace-normal text-neutral-500"
                                                    disabled={!selectedAsn}
                                                >
                                                    {sakipNodeIds.length > 0
                                                        ? sakipNodeList
                                                              .filter((node) =>
                                                                  sakipNodeIds.includes(
                                                                      node.id.toString(),
                                                                  ),
                                                              )
                                                              .map(
                                                                  (node) =>
                                                                      node.uraian,
                                                              )
                                                              .join(', ')
                                                        : '-- Pilih Sakip Node --'}
                                                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                                </Button>
                                            </PopoverTrigger>
                                            <PopoverContent
                                                align="start"
                                                className="w-[var(--radix-popover-trigger-width)] p-0"
                                                onWheel={(e) =>
                                                    e.stopPropagation()
                                                }
                                            >
                                                <Command>
                                                    <CommandInput
                                                        placeholder="Cari sasaran..."
                                                        className="h-9"
                                                    />
                                                    <CommandList className="max-h-40 overflow-y-auto">
                                                        <CommandEmpty>
                                                            Indikator tidak
                                                            ditemukan.
                                                        </CommandEmpty>
                                                        <CommandGroup>
                                                            {filteredSakipNodes.map(
                                                                (node) => (
                                                                    <CommandItem
                                                                        key={
                                                                            node.id
                                                                        }
                                                                        value={node.id.toString()}
                                                                        onSelect={() =>
                                                                            toggleSakipNode(
                                                                                node.id.toString(),
                                                                            )
                                                                        }
                                                                    >
                                                                        <Check
                                                                            className={cn(
                                                                                'mr-2 h-4 w-4',
                                                                                sakipNodeIds.includes(
                                                                                    node.id.toString(),
                                                                                )
                                                                                    ? 'opacity-100'
                                                                                    : 'opacity-0',
                                                                            )}
                                                                        />
                                                                        <div>
                                                                            <p className="font-medium">
                                                                                {
                                                                                    node.uraian
                                                                                }
                                                                            </p>
                                                                            <p className="text-xs text-muted-foreground">
                                                                                (
                                                                                {
                                                                                    node.kategori
                                                                                }

                                                                                )
                                                                            </p>
                                                                        </div>
                                                                    </CommandItem>
                                                                ),
                                                            )}
                                                        </CommandGroup>
                                                    </CommandList>
                                                </Command>
                                            </PopoverContent>
                                        </Popover>
                                    </div>
                                </div>

                                <div className="grid grid-cols-4 items-center gap-2">
                                    <Label className="col-span-1">Tugas</Label>
                                    <div className="col-span-3">
                                        <Textarea
                                            value={tugas}
                                            onChange={(e) =>
                                                setTugas(e.target.value)
                                            }
                                            placeholder="Masukkan deskripsi tugas..."
                                            required
                                        />
                                    </div>
                                </div>

                                <div className="grid grid-cols-4 items-start gap-2">
                                    <Label className="col-span-1 mt-2">
                                        Fungsi
                                    </Label>

                                    <div className="col-span-3">
                                        {fungsi.map((f, index) => (
                                            <div
                                                key={index}
                                                className="mb-2 flex gap-2"
                                            >
                                                <Input
                                                    type="text"
                                                    value={f}
                                                    onChange={(e) =>
                                                        handleFungsiChange(
                                                            index,
                                                            e.target.value,
                                                        )
                                                    }
                                                    placeholder={`Fungsi ${index + 1}`}
                                                    className="flex-1"
                                                />
                                                {fungsi.length > 1 && (
                                                    <Button
                                                        type="button"
                                                        variant="destructive"
                                                        size="sm"
                                                        onClick={() =>
                                                            removeFungsi(index)
                                                        }
                                                    >
                                                        -
                                                    </Button>
                                                )}
                                            </div>
                                        ))}

                                        {/* Baris tombol tambah di kanan */}
                                        <div className="flex justify-end">
                                            <Button
                                                type="button"
                                                size="sm"
                                                variant="default"
                                                className="mt-2"
                                                onClick={addFungsi}
                                            >
                                                + Tambah Fungsi
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </ScrollArea>

                    <DialogFooter className="z-10 flex-shrink-0 border-t py-4 pe-6">
                        <Button
                            form="form-iki"
                            type="submit"
                            disabled={loading}
                            size={'lg'}
                            className="bg-green-500 hover:bg-green-600"
                        >
                            {loading
                                ? 'Menyimpan...'
                                : editMode
                                  ? 'Simpan Perubahan'
                                  : 'Simpan'}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>

            {/* MODAL PREVIEW PDF */}
            <Dialog open={openPreview} onOpenChange={setOpenPreview}>
                <DialogContent className="flex h-[80vh] flex-col sm:max-w-4xl">
                    <DialogHeader>
                        <DialogTitle>Preview PDF</DialogTitle>
                        <DialogDescription></DialogDescription>
                    </DialogHeader>

                    {pdfUrl ? (
                        <iframe
                            src={pdfUrl}
                            className="w-full flex-1 rounded-md border"
                            title="Preview PDF"
                        ></iframe>
                    ) : (
                        <p className="text-center text-muted-foreground">
                            PDF tidak tersedia
                        </p>
                    )}

                    <DialogFooter className="gap-4 max-sm:flex-col sm:justify-end">
                        <Button
                            onClick={() => {
                                if (pdfUrl) {
                                    const a = document.createElement('a');
                                    a.href = pdfUrl;
                                    a.download =
                                        pdfFileName ||
                                        'Indikator_Kinerja_Individu.pdf';
                                    a.click();
                                }
                            }}
                            className="bg-green-600 hover:bg-green-700"
                        >
                            Cetak / Unduh
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
            <Toaster position="top-right" richColors closeButton />
        </AppLayout>
    );
}