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 { Spinner } from '@/components/ui/spinner';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableHeaderRow,
    TableRow,
} from '@/components/ui/table';
import type { VatRateListItem, VatRatesPaginationMeta } from '@/features/vat-rates/types';
import { useI18n } from '@/hooks/use-i18n';

type VatRatesTableProps = {
    columns: ColumnDef<VatRateListItem>[];
    data: VatRateListItem[];
    pagination: VatRatesPaginationMeta;
    onPageChange: (page: number) => void;
    isLoading: boolean;
};

export function VatRatesTable({ columns, data, pagination, onPageChange, isLoading }: VatRatesTableProps) {
    const { t } = useI18n();
    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
    });

    return (
        <div className="space-y-4">
            <Table variant="embedded" className="min-w-[42rem]">
                <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>
                    {isLoading ? (
                        <TableRow>
                            <TableCell colSpan={columns.length} className="h-20 text-center">
                                <div className="inline-flex items-center gap-2 text-muted-foreground">
                                    <Spinner className="h-4 w-4" />
                                    {t('settings.vat_rates.table.loading')}
                                </div>
                            </TableCell>
                        </TableRow>
                    ) : table.getRowModel().rows.length > 0 ? (
                        table.getRowModel().rows.map((row) => (
                            <TableRow
                                key={row.id}
                                className={
                                    row.original.is_active ? 'group' : 'group bg-muted/30 text-muted-foreground'
                                }
                            >
                                {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.vat_rates.table.empty')} />
                            </TableCell>
                        </TableRow>
                    )}
                </TableBody>
            </Table>
            <TablePagination meta={pagination} onPageChange={onPageChange} isLoading={isLoading} />
        </div>
    );
}