import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { SakipNode } from '@/types';
import { Edit, FolderCodeIcon, MoreVertical, Trash } from 'lucide-react';
import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle,
} from '../ui/empty';

type DataTableProps<T> = {
    data: T[];
    columns: { key: keyof T; label: string }[];
    onEdit: (item: T) => void;
    onDelete: (item: T) => void;
};

export function DataTable<T extends { id: number }>({
    data,
    columns,
    onEdit,
    onDelete,
}: DataTableProps<SakipNode>) {
    return (
        <div className="relative min-h-[400px] flex-1 overflow-hidden rounded-xl border border-sidebar-border/70 md:min-h-min dark:border-sidebar-border">
            {/* <div className="max-h-96 overflow-y-auto"></div> */}
            {data.length > 0 ? (
                <Table className="text-sm">
                    <TableHeader>
                        <TableRow className="bg-emerald-700 uppercase hover:bg-emerald-600">
                            <TableHead className="w-[50px] ps-4 text-center text-white">
                                No
                            </TableHead>
                            {columns.map((col) => (
                                <TableHead
                                    className="text-center text-white"
                                    key={String(col.key)}
                                >
                                    {col.label}
                                </TableHead>
                            ))}

                            {/* 🧩 Tambahkan kolom Satuan & Target jika kategori diawali 'indikator' */}
                            {data[0]?.kategori
                                ?.toLowerCase()
                                .startsWith('indikator') && (
                                <>
                                    <TableHead className="text-center text-white">
                                        Satuan
                                    </TableHead>
                                    <TableHead className="text-center text-white">
                                        Target
                                    </TableHead>
                                </>
                            )}

                            <TableHead className="pe-4 text-right text-white">
                                Aksi
                            </TableHead>
                        </TableRow>
                    </TableHeader>

                    <TableBody>
                        {data.map((item, index) => (
                            <TableRow key={item.id}>
                                <TableCell className="text-center">
                                    {index + 1}
                                </TableCell>

                                {columns.map((col) => (
                                    <TableCell
                                        className="w-full break-words whitespace-normal"
                                        key={String(col.key)}
                                    >
                                        {String(item[col.key])}
                                    </TableCell>
                                ))}

                                {/* 🧩 Tampilkan nilai Satuan & Target jika kategori diawali 'indikator' */}
                                {item.kategori
                                    ?.toLowerCase()
                                    .startsWith('indikator') && (
                                    <>
                                        <TableCell className="text-center">
                                            {item.satuan || '-'}
                                        </TableCell>
                                        <TableCell className="text-center">
                                            {item.target || '-'}
                                        </TableCell>
                                    </>
                                )}

                                <TableCell className="text-right">
                                    <DropdownMenu>
                                        <DropdownMenuTrigger asChild>
                                            <button className="rounded p-1 hover:bg-gray-100">
                                                <MoreVertical className="h-5 w-5" />
                                            </button>
                                        </DropdownMenuTrigger>
                                        <DropdownMenuContent
                                            align="start"
                                            side="left"
                                        >
                                            <DropdownMenuLabel>
                                                Aksi
                                            </DropdownMenuLabel>
                                            <DropdownMenuItem
                                                onClick={() => {
                                                    console.log(
                                                        '🧩 Edit data:',
                                                        item,
                                                    );
                                                    onEdit(item);
                                                }}
                                            >
                                                <Edit className="mr-2 h-4 w-4" />{' '}
                                                Edit
                                            </DropdownMenuItem>
                                            <DropdownMenuItem
                                                onClick={() => onDelete(item)}
                                                className="text-red-600 focus:text-red-600"
                                            >
                                                <Trash className="mr-2 h-4 w-4" />{' '}
                                                Hapus
                                            </DropdownMenuItem>
                                        </DropdownMenuContent>
                                    </DropdownMenu>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            ) : (
                <Empty>
                    <EmptyHeader>
                        <EmptyMedia variant="icon">
                            <FolderCodeIcon className="text-neutral-400" />
                        </EmptyMedia>
                        <EmptyTitle className="text-neutral-400">
                            Masih Kosong
                        </EmptyTitle>
                        <EmptyDescription className="text-neutral-400">
                            Silahkan input data terlebih dahulu.
                        </EmptyDescription>
                    </EmptyHeader>
                </Empty>
            )}
        </div>
    );
}