import React from 'react';

import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { cn } from '@/lib/utils';
import {
    ColumnDef,
    ColumnFiltersState,
    flexRender,
    getCoreRowModel,
    getFacetedRowModel,
    getFacetedUniqueValues,
    getFilteredRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    SortingState,
    useReactTable,
} from '@tanstack/react-table';
import { FolderCodeIcon, Lock, PlusCircle, Search, Trash } from 'lucide-react';
import { Button } from '../ui/button';
import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle,
} from '../ui/empty';
import {
    InputGroup,
    InputGroupAddon,
    InputGroupInput,
} from '../ui/input-group';
import PaginationCustom from './d-pagination';

// Tipe data untuk opsi filter
interface FilterOption {
    label: string;
    value: string;
}

interface DataTableProps<TData, TValue> {
    columns: ColumnDef<TData, TValue>[];
    data: TData[];
    onAddClick?: () => void;
    onAksesClick?: () => void;
    onHapus?: () => void;
    searchValue?: string;
    onSearchChange?: (value: string) => void;

    // Props baru untuk dropdown filter
    filterLabel?: string; // Label placeholder dropdown
    filterOptions?: FilterOption[]; // Daftar opsi filter
    onFilterChange?: (value: string) => void; // Callback saat filter berubah

    // Props opsional untuk styling
    className?: string;
    width?: string | number;

    // **NEW**: Pagination opsional
    enablePagination?: boolean; // default true
}

export default function DataTable<TData, TValue>({
    data,
    columns,
    onAddClick,
    onAksesClick,
    onHapus,
    searchValue = '',
    onSearchChange,
    filterLabel,
    filterOptions,
    onFilterChange,
    className,
    width,
    enablePagination = true, // default aktif
}: DataTableProps<TData, TValue>) {
    const [sorting, setSorting] = React.useState<SortingState>([]);
    const [columnFilters, setColumnFilters] =
        React.useState<ColumnFiltersState>([]);
    const [columnSizing, setColumnSizing] = React.useState({});
    const [selectedFilter, setSelectedFilter] = React.useState<string>(''); // <-- state untuk filter

    const table = useReactTable({
        data,
        columns,
        state: {
            sorting,
            columnFilters,
            columnSizing,
        },
        enableRowSelection: true,
        onSortingChange: setSorting,
        onColumnFiltersChange: setColumnFilters,
        onColumnSizingChange: setColumnSizing,
        getCoreRowModel: getCoreRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getFacetedRowModel: getFacetedRowModel(),
        getFacetedUniqueValues: getFacetedUniqueValues(),
        // Pagination hanya dipakai kalau enablePagination true
        ...(enablePagination
            ? { getPaginationRowModel: getPaginationRowModel() }
            : {}),
    });

    // Handler saat filter berubah
    const handleFilterChange = (value: string) => {
        setSelectedFilter(value);
        onFilterChange?.(value === 'all' ? '' : value); // jika pilih "Semua", kirim string kosong
    };

    return (
        <div className={cn('w-full', className)} style={{ width }}>
            <div className="flex items-center justify-between py-4">
                <div className="flex items-center gap-6">
                    <div className="w-[250px]">
                        <InputGroup>
                            <InputGroupInput
                                placeholder="Pencarian..."
                                value={searchValue}
                                onChange={(event) =>
                                    onSearchChange?.(event.target.value)
                                }
                            />
                            <InputGroupAddon>
                                <Search />
                            </InputGroupAddon>
                        </InputGroup>
                    </div>
                    {filterOptions && filterOptions.length > 0 && (
                        <Select
                            value={selectedFilter || 'all'}
                            onValueChange={handleFilterChange}
                        >
                            <SelectTrigger className="w-50">
                                <SelectValue
                                    placeholder={filterLabel || 'Pilih Filter'}
                                />
                            </SelectTrigger>
                            <SelectContent>
                                {filterOptions.map((option) => (
                                    <SelectItem
                                        key={option.value}
                                        value={option.value}
                                    >
                                        {option.label}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    )}
                </div>

                {/* Bagian kanan: Tombol Aksi */}
                <div className="flex items-center gap-2">
                    {onAddClick && (
                        <Button
                            className="flex h-8 items-center gap-2 bg-emerald-600 px-3 text-sm text-white hover:bg-emerald-700 hover:text-white"
                            size="sm"
                            variant={'destructive'}
                            onClick={onAddClick}
                        >
                            <PlusCircle className="h-4 w-4" /> Tambah
                        </Button>
                    )}
                    {onAksesClick && (
                        <Button
                            className="flex h-8 items-center gap-2 bg-indigo-200 px-3 text-sm text-indigo-700 hover:bg-indigo-300 hover:text-white"
                            size="sm"
                            onClick={onAksesClick}
                        >
                            <Lock className="h-4 w-4" /> Hak Akses
                        </Button>
                    )}
                    {onHapus && (
                        <Button
                            className="flex h-8 items-center gap-2 bg-slate-200 px-3 text-sm text-primary hover:bg-slate-700 hover:text-white"
                            size="sm"
                            onClick={onHapus}
                        >
                            <Trash className="h-4 w-4" />
                            Hapus Hak Akses
                        </Button>
                    )}
                </div>
            </div>

            {/* Tabel */}
            <div className="rounded-md border p-5">
                <Table>
                    <TableHeader>
                        {table.getHeaderGroups().map((headerGroup) => (
                            <TableRow key={headerGroup.id}>
                                {headerGroup.headers.map((header) => (
                                    <TableHead
                                        key={header.id}
                                        colSpan={header.colSpan}
                                        style={{
                                            width: `${header.getSize()}px`,
                                        }}
                                    >
                                        {header.isPlaceholder
                                            ? null
                                            : flexRender(
                                                  header.column.columnDef
                                                      .header,
                                                  header.getContext(),
                                              )}
                                    </TableHead>
                                ))}
                            </TableRow>
                        ))}
                    </TableHeader>
                    <TableBody>
                        {table.getRowModel().rows?.length ? (
                            table.getRowModel().rows.map((row) => (
                                <TableRow
                                    key={row.id}
                                    data-state={
                                        row.getIsSelected() && 'selected'
                                    }
                                >
                                    {row.getVisibleCells().map((cell) => (
                                        <TableCell
                                            className="break-words whitespace-normal"
                                            key={cell.id}
                                        >
                                            {flexRender(
                                                cell.column.columnDef.cell,
                                                cell.getContext(),
                                            )}
                                        </TableCell>
                                    ))}
                                </TableRow>
                            ))
                        ) : (
                            <TableRow>
                                <TableCell
                                    colSpan={columns.length}
                                    className="text-center"
                                >
                                    <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>
                                </TableCell>
                            </TableRow>
                        )}
                    </TableBody>
                </Table>
            </div>

            {/* Pagination hanya muncul jika enablePagination true */}
            {enablePagination && <PaginationCustom table={table} />}
        </div>
    );
}