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

type MailboxServersTableProps = {
    columns: ColumnDef<MailboxServerListItem>[];
    data: MailboxServerListItem[];
};

export function MailboxServersTable({ columns, data }: MailboxServersTableProps) {
    const { t } = useI18n();
    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
    });

    return (
        <Table variant="embedded" className="min-w-[40rem]">
            <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} className="group">
                            {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('settings.mailboxes.servers_table.empty')} />
                        </TableCell>
                    </TableRow>
                )}
            </TableBody>
        </Table>
    );
}