import type { ReactNode } from 'react'
import type { WidgetState } from '../stores'

/**
 * Single row of tabular data.
 *
 * The default row-identity column is `id`. Consumers that don't have a
 * literal `id` field can point `<Table>` / `<TableUI>` at a different
 * column via the `keyColumn` prop; the library reads `row[keyColumn]`
 * for selection lookup, React keys, and aria labels.
 */
export interface TableRow extends Record<string, unknown> {
  /**
   * Default row identity. Required when no `keyColumn` is configured.
   * Omit when wiring `keyColumn` to a different column.
   */
  id?: string | number
}

export type TableWidgetData = readonly TableRow[]

export type TableSortDirection = 'asc' | 'desc'

export interface TableSortState {
  columnId: string | null
  direction: TableSortDirection
}

export interface TableColumn {
  /** Unique column identifier; matches the field name on each row. */
  id: string
  /** Header label. */
  label: ReactNode
  align?: 'left' | 'center' | 'right'
  width?: number | string
  sortable?: boolean
  /** Custom cell renderer. Falls back to a string-cast of the raw value. */
  formatter?: (value: unknown, row: TableRow) => ReactNode
}

/**
 * State extension carrying Table-specific UI state on the per-widget store.
 * Per R12: widget-specific UI state lives in widget-specific extensions of
 * `WidgetState`, not on the base type.
 */
export interface TableWidgetState extends WidgetState {
  /** Optional reordered column list driven by ChangeColumn. Falls back to props. */
  columnOrder?: readonly string[]
  sort?: TableSortState
  page: number
  pageSize: number
}

export const DEFAULT_TABLE_PAGE_SIZE = 10
export const DEFAULT_TABLE_PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const