import {
    flexRender,
    getCoreRowModel,
    useReactTable,
} from '@tanstack/react-table';
import type { ColumnDef } from '@tanstack/react-table';
import { TableEmptyState } from '@/components/common/TableEmptyState';
import { TablePagination } from '@/components/common/TablePagination';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableHeaderRow,
    TableRow,
} from '@/components/ui/table';
import type { ManagedUser, UsersPaginationMeta } from '@/features/users/types';
import { useI18n } from '@/hooks/use-i18n';

type UsersTableProps = {
    columns: ColumnDef<ManagedUser>[];
    data: ManagedUser[];
    pagination: UsersPaginationMeta;
    onPageChange: (page: number) => void;
    onPerPageChange?: (perPage: number) => void;
};

export function UsersTable({ columns, data, pagination, onPageChange, onPerPageChange }: UsersTableProps) {
    const { t } = useI18n();
    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
    });

    return (
        <div className="space-y-4">
            <Table variant="embedded" className="min-w-[52rem]">
                <TableHeader>
                    {table.getHeaderGroups().map((headerGroup) => (
                        <TableHeaderRow key={headerGroup.id}>
                            {headerGroup.headers.map((header) => (
                                <TableHead key={header.id}>
                                    {header.isPlaceholder
                                        ? null
                                        : flexRender(header.column.columnDef.header, header.getContext())}
                                </TableHead>
                            ))}
                        </TableHeaderRow>
                    ))}
                </TableHeader>
                <TableBody>
                    {table.getRowModel().rows.length > 0 ? (
                        table.getRowModel().rows.map((row) => (
                            <TableRow key={row.id}>
                                {row.getVisibleCells().map((cell) => (
                                    <TableCell key={cell.id}>
                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                    </TableCell>
                                ))}
                            </TableRow>
                        ))
                    ) : (
                        <TableRow>
                            <TableCell colSpan={columns.length} className="last:text-center">
                                <TableEmptyState label={t('users.admin_index.table.empty')} />
                            </TableCell>
                        </TableRow>
                    )}
                </TableBody>
            </Table>
            <TablePagination
                meta={pagination}
                onPageChange={onPageChange}
                onPerPageChange={onPerPageChange}
            />
        </div>
    );
}