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 { ChartOfAccountListItem, ChartOfAccountsPaginationMeta } from '@/features/chart-of-accounts/types';
import { useI18n } from '@/hooks/use-i18n';

type ChartOfAccountsTableProps = {
    columns: ColumnDef<ChartOfAccountListItem>[];
    data: ChartOfAccountListItem[];
    pagination: ChartOfAccountsPaginationMeta;
    onPageChange: (page: number) => void;
    isLoading: boolean;
};

export function ChartOfAccountsTable({ columns, data, pagination, onPageChange, isLoading }: ChartOfAccountsTableProps) {
    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>
                    {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.chart_of_accounts.table.loading')}
                                </div>
                            </TableCell>
                        </TableRow>
                    ) : 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('settings.chart_of_accounts.table.empty')} />
                            </TableCell>
                        </TableRow>
                    )}
                </TableBody>
            </Table>
            <TablePagination meta={pagination} onPageChange={onPageChange} isLoading={isLoading} />
        </div>
    );
}