import * as React from 'react';
import { ReactElement } from 'react';
import { ColumnDef, RowSelectionState, Table, SortingState, PaginationState, ColumnFiltersState } from '@tanstack/react-table';
export { ColumnDef, ColumnFiltersState, PaginationState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table';

/**
 * DataTable — WealthX Design System
 *
 * A headless, composable data-table built on \@tanstack/react-table.
 * Composes existing WealthX shadcn components:
 *   - Table, TableHeader, TableBody, TableRow, TableHead, TableCell
 *   - Input (column filter)
 *   - Button (pagination actions, column toggle)
 *   - Checkbox (row selection)
 *   - Select (page-size selector)
 *   - Pagination (page navigation)
 *   - Skeleton (loading state)
 *   - DropdownMenu (column visibility toggle)
 *
 * All colors use design tokens — no hex codes.
 */

interface DataTableProps<TData, TValue> {
    /** Column definitions — pass ColumnDef[] from \@tanstack/react-table */
    columns: ColumnDef<TData, TValue>[];
    /** Row data */
    data: TData[];
    /** Show a global search/filter input above the table */
    searchKey?: string;
    /** Placeholder for the search input */
    searchPlaceholder?: string;
    /** Enable row selection with checkboxes */
    enableRowSelection?: boolean;
    /** Enable column visibility toggle dropdown */
    enableColumnVisibility?: boolean;
    /** Page size options for the page-size selector */
    pageSizeOptions?: number[];
    /** Show loading skeleton */
    loading?: boolean;
    /** Number of skeleton rows to show while loading */
    skeletonRows?: number;
    /** Callback when row selection changes */
    onRowSelectionChange?: (selection: RowSelectionState) => void;
    /** Additional className for the root wrapper */
    className?: string;
    /** Render a toolbar above the table (replaces default toolbar) */
    toolbar?: (table: Table<TData>) => React.ReactNode;
    /** Text shown when no results found */
    emptyText?: string;
    /** Enable server-side pagination (disables client-side pagination model) */
    manualPagination?: boolean;
    /** Enable server-side sorting (disables client-side sorting model) */
    manualSorting?: boolean;
    /** Enable server-side filtering (disables client-side filtering model) */
    manualFiltering?: boolean;
    /** Total page count (required for server-side pagination) */
    pageCount?: number;
    /** Total row count (alternative to pageCount for server-side pagination) */
    rowCount?: number;
    /** Controlled sorting state */
    sorting?: SortingState;
    /** Controlled pagination state */
    pagination?: PaginationState;
    /** Controlled column filters state */
    columnFilters?: ColumnFiltersState;
    /** Callback when sorting state changes */
    onSortingChange?: (sorting: SortingState) => void;
    /** Callback when pagination state changes */
    onPaginationChange?: (pagination: PaginationState) => void;
    /** Callback when column filters state changes */
    onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
}
declare function DataTableColumnHeader({ column, title, className, }: {
    column: {
        getIsSorted: () => false | "asc" | "desc";
        toggleSorting: (desc?: boolean) => void;
        getCanSort: () => boolean;
    };
    title: string;
    className?: string;
}): ReactElement;
declare function getSelectionColumn<TData>(): ColumnDef<TData>;
declare function DataTableToolbar<TData>({ table, searchKey, searchPlaceholder, enableColumnVisibility, }: {
    table: Table<TData>;
    searchKey?: string;
    searchPlaceholder?: string;
    enableColumnVisibility?: boolean;
}): ReactElement;
declare function DataTablePagination<TData>({ table, pageSizeOptions, }: {
    table: Table<TData>;
    pageSizeOptions?: number[];
}): ReactElement;
declare function DataTableSkeleton({ columnCount, rowCount, }: {
    columnCount: number;
    rowCount?: number;
}): ReactElement;
declare function DataTable<TData, TValue>({ columns: userColumns, data, searchKey, searchPlaceholder, enableRowSelection, enableColumnVisibility, pageSizeOptions, loading, skeletonRows, onRowSelectionChange, className, toolbar, emptyText, manualPagination, manualSorting, manualFiltering, pageCount, rowCount, sorting: controlledSorting, pagination: controlledPagination, columnFilters: controlledColumnFilters, onSortingChange: onSortingChangeProp, onPaginationChange: onPaginationChangeProp, onColumnFiltersChange: onColumnFiltersChangeProp, }: DataTableProps<TData, TValue>): ReactElement;

export { DataTable, DataTableColumnHeader, DataTablePagination, type DataTableProps, DataTableSkeleton, DataTableToolbar, getSelectionColumn };