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 { 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 {
    Check,
    ChevronsUpDown,
    Edit,
    Eye,
    FolderCodeIcon,
    PlusCircle,
    Search,
    Trash,
} from 'lucide-react';
import { useMemo, useState } from 'react';

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 [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) {
        if (confirm('Yakin ingin menghapus data ini?')) {
            router.delete(`/a/iki/${id}`);
        }
    }

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

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

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

        // Posisi dasar kolom
        const colNomor = 18;
        let colLabel = 22;
        let colNomorUrutA = 44;
        let colTitik = 0;
        let colIsi = 0;
        const maxWidth = pageWidth - 20;

        // Data utama (nomor, label, isi)
        const data = [
            {
                no: '1.',
                label: 'Jabatan',
                value: iki.asn?.jabatan || '-',
            },
            {
                no: '2.',
                label: 'Tugas',
                value: iki.tugas || '-',
            },
            {
                no: '3.',
                label: 'Fungsi',
                value:
                    (iki.fungsi || [])
                        .map((f, i) => `${String.fromCharCode(97 + i)}. ${f}`)
                        .join('\n') || '-',
            },
        ];

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

        // Atur kolom titik dan isi berdasarkan panjang label terpanjang
        colTitik = colLabel + maxLabelWidth + 3; // titik dua setelah label
        colIsi = colTitik + 5; // isi teks setelah titik dua

        data.forEach((row) => {
            doc.text(row.no, colNomor, y);
            doc.text(row.label, colLabel, y);
            doc.text(':', colTitik, y);
            const isiText = doc.splitTextToSize(row.value, maxWidth - colIsi);
            doc.text(isiText, colIsi, y);
            y += isiText.length * 4 + 2;
        });

        if (iki.asn?.level === 'eselon_2') {
            const selectedNodes = iki.sakip_nodes || [];

            // 🔹 Ambil semua sasaran program & kegiatan
            const sasaranList = selectedNodes.filter((sn: SakipNode) => {
                const kategori = sn.kategori?.toLowerCase();
                return kategori === 'sasaran pd';
            });

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

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

            // 🔹 Cetak ke tabel PDF
            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: {},
                },
            });
        } else if (iki.asn?.level === 'eselon_3') {
            const selectedNodes = iki.sakip_nodes || [];

            // 🔹 Ambil semua sasaran program & kegiatan
            const sasaranList = selectedNodes.filter((sn: SakipNode) => {
                const kategori = sn.kategori?.toLowerCase();
                return (
                    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() ===
                                'indikator sasaran program' ||
                                child.kategori?.toLowerCase() ===
                                    'indikator sasaran kegiatan'),
                    );

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

            // 🔹 Cetak ke tabel PDF
            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: {},
                },
            });
        }

        const offsetX = 30; // jumlah pergeseran ke kanan
        const centerX = pageWidth / 2 + offsetX;

        const finalY = doc.lastAutoTable?.finalY || y + 10;
        const footerY = finalY + 25;

        // --- Teks bagian footer ---
        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',
            },
        );

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

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

        // --- Garis bawah berdasarkan panjang NIP ---
        const nipWidth = doc.getTextWidth(nip); // ambil lebar teks NIP
        const lineY = nameY + 1.8; // sedikit di bawah nama
        doc.setLineWidth(0.5); // garis sedikit tebal
        doc.line(centerX - nipWidth / 2, lineY, centerX + nipWidth / 2, lineY);

        // Bagian download
        const nama = iki.asn?.nama?.toUpperCase() || 'TANPA_NAMA';

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

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

        // Kirim ke preview dialog
        setPdfUrl(url);
        setPdfFileName(fileName); // <-- tambahkan state ini
        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="text-center">
                                    NO
                                </TableHead>
                                <TableHead className="text-center">
                                    NIP
                                </TableHead>
                                <TableHead className="text-center">
                                    NAMA
                                </TableHead>
                                <TableHead className="text-center">
                                    TAHUN
                                </TableHead>
                                <TableHead className="text-center">
                                    TUGAS
                                </TableHead>
                                <TableHead className="text-center">
                                    FUNGSI
                                </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 align-top">
                                            {index + 1}
                                        </TableCell>
                                        <TableCell className="text-center align-top">
                                            {item.asn?.nip}
                                        </TableCell>
                                        <TableCell className="align-top">
                                            {item.asn?.nama}
                                        </TableCell>
                                        <TableCell className="text-center align-top">
                                            {item.tahun?.nama}
                                        </TableCell>
                                        <TableCell className="align-top break-words whitespace-normal">
                                            {item.tugas}
                                        </TableCell>
                                        <TableCell>
                                            <ul className="list-inside list-disc align-top break-words whitespace-normal text-muted-foreground">
                                                {(item.fungsi ?? []).map(
                                                    (f, i) => (
                                                        <li key={i}>{f}</li>
                                                    ),
                                                )}
                                            </ul>
                                        </TableCell>
                                        <TableCell className="flex justify-center gap-2">
                                            <Button
                                                size="sm"
                                                className="bg-blue-500 hover:bg-blue-600"
                                                onClick={() =>
                                                    handlePreviewPDF(item)
                                                }
                                            >
                                                <Eye className="h-4 w-4" />
                                            </Button>
                                            <Button
                                                size="sm"
                                                className="bg-orange-400 hover:bg-orange-500"
                                                onClick={() =>
                                                    openEditModal(item)
                                                }
                                            >
                                                <Edit className="h-4 w-4" />
                                            </Button>
                                            <Button
                                                size="sm"
                                                variant="destructive"
                                                onClick={() =>
                                                    handleDelete(item.id)
                                                }
                                            >
                                                <Trash className="h-4 w-4" />
                                            </Button>
                                        </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 p-0 sm:max-w-md">
                    <DialogHeader>
                        <DialogTitle className="py-4 text-center uppercase">
                            {editMode ? 'Edit IKI' : 'Tambah IKI'}
                        </DialogTitle>
                        <DialogDescription></DialogDescription>
                    </DialogHeader>

                    <ScrollArea className="flex max-h-full flex-col overflow-hidden">
                        <div className="p-4">
                            <form
                                id="form-iki"
                                onSubmit={handleSubmit}
                                className="space-y-4"
                            >
                                <div className="grid gap-3">
                                    <Label>Aparatur Sipil Negara</Label>
                                    <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
                                            className="w-[400px] p-0"
                                            onWheel={(e) => e.stopPropagation()}
                                        >
                                            <Command>
                                                <CommandInput
                                                    placeholder="Cari ASN..."
                                                    className="h-9"
                                                />
                                                <CommandList>
                                                    <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 className="grid gap-3">
                                    <Label>
                                        {(() => {
                                            const level =
                                                selectedAsn?.level?.toLowerCase();

                                            if (level === 'eselon_2') {
                                                return 'Sasaran Perangkat Daerah';
                                            }

                                            if (level === 'eselon_3') {
                                                return 'Sasaran Program dan Kegiatan';
                                            }

                                            return 'Sasaran';
                                        })()}
                                    </Label>
                                    <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
                                            className="w-[400px] p-0"
                                            onWheel={(e) => e.stopPropagation()}
                                        >
                                            <Command>
                                                <CommandInput
                                                    placeholder="Cari indikator kinerja..."
                                                    className="h-9"
                                                />
                                                <CommandList>
                                                    <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 className="grid gap-3">
                                    <Label>Tugas</Label>
                                    <Textarea
                                        value={tugas}
                                        onChange={(e) =>
                                            setTugas(e.target.value)
                                        }
                                        placeholder="Masukkan deskripsi tugas..."
                                        required
                                    />
                                </div>

                                <div className="grid gap-3">
                                    <Label>Fungsi</Label>
                                    {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}`}
                                            />
                                            {fungsi.length > 1 && (
                                                <Button
                                                    type="button"
                                                    variant="destructive"
                                                    size="sm"
                                                    onClick={() =>
                                                        removeFungsi(index)
                                                    }
                                                >
                                                    -
                                                </Button>
                                            )}
                                        </div>
                                    ))}
                                    <Button
                                        type="button"
                                        size="sm"
                                        variant="default"
                                        onClick={addFungsi}
                                    >
                                        + Tambah Fungsi
                                    </Button>
                                </div>
                            </form>
                        </div>
                    </ScrollArea>

                    <DialogFooter className="z-10 flex-shrink-0 border-t bg-white py-4 pe-4">
                        <Button
                            form="form-iki"
                            type="submit"
                            disabled={loading}
                            className="bg-green-600 hover:bg-green-700"
                        >
                            {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>
                        <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>
        </AppLayout>
    );
}