import type { ReactNode, Ref } from 'react'
import type { TableProps as MuiTableProps } from '@mui/material'
import type { BaseWidgetState, WidgetsStoreProps } from '../stores/types'
import type { WrapperState } from '../wrapper/types'
import type { DownloadItem } from '../actions/download/types'

/**
 * Table UI component props
 */
export interface TableUIProps {
  id: WidgetsStoreProps['id']
  children?: ReactNode
}

/**
 * Table column definition
 */
export interface TableColumn {
  /** Unique column identifier, matches key in row data */
  id: string
  /** Column header label */
  label: string | ReactNode
  /** Text alignment */
  align?: 'left' | 'center' | 'right'
  /** Column width (number for px, string for CSS value) */
  width?: number | string
  /** Enable sorting for this column */
  sortable?: boolean
  /** Custom cell value formatter */
  formatter?: (value: unknown, row: TableRow) => ReactNode
}

/**
 * Table row data - extends Record for flexible data
 */
export interface TableRow extends Record<string, unknown> {
  /** Unique row identifier */
  id: string | number
}

/**
 * Table widget data type - array of row records
 */
export type TableWidgetData = TableRow[]

/**
 * Pagination state
 */
export interface TablePaginationState {
  /** Current page (0-indexed) */
  page: number
  /** Rows per page */
  rowsPerPage: number
  /** Total number of rows (for remote pagination) */
  total: number
}

/**
 * Sort direction
 */
export type SortDirection = 'asc' | 'desc'

/**
 * Sort state for single-column sorting
 */
export interface SortState {
  /** Column ID being sorted */
  columnId: string | null
  /** Sort direction */
  direction: SortDirection
}

/**
 * Pagination and sort mode
 */
export type Mode = 'local' | 'remote'

/**
 * Table widget configuration
 */
export interface TableWidgetConfig {
  /** Column definitions */
  columns?: TableColumn[]
  /** Enable row selection with checkboxes */
  selectable?: boolean
  /** Currently selected row IDs */
  selected?: (string | number)[]
  /** Pagination and sort mode: local (client-side) or remote (server-side) */
  mode: Mode
  /** Pagination configuration */
  pagination?: {
    /** Current page (0-indexed) */
    page?: number
    /** Available rows per page options */
    rowsPerPageOptions?: number[]
    /** Default rows per page */
    rowsPerPage?: number
    /** Total rows for remote pagination */
    total?: number
  }
  /** Sort configuration */
  sort?: {
    /** Default sort column */
    columnId: string | null
    /** Default sort direction */
    direction?: SortDirection
  }
  /** Callback when a row is clicked */
  onRowClick?: (row: TableRow) => void
  /** Callback when hovering over a row (null when leaving table) */
  onRowHover?: (row: TableRow | null) => void
  /** Callback when selection changes */
  onSelectionChange?: (selected: (string | number)[]) => void
  /** Callback when page changes (for remote pagination) */
  onPageChange?: (page: number, rowsPerPage: number) => void
  /** Callback when sort changes (for remote sorting) */
  onSortChange?: (columnId: string, direction: SortDirection) => void
}

/**
 * Table widget state - includes both configuration and runtime state
 */
export type TableWidgetState = BaseWidgetState<
  WrapperState<
    TableWidgetConfig & {
      // pagination?: {
      //   page?: number
      // }
    }
  > & {
    data: TableWidgetData
  }
>

/**
 * Table download configuration
 */
export type TableDownloadConfig = DownloadItem<TableWidgetData>[]

/**
 * Props for the base Table component
 */
export interface TableProps extends MuiTableProps {
  /** Table element ref */
  ref?: Ref<HTMLTableElement>
}

/**
 * Props for CellHeader component
 */
export interface CellHeaderProps {
  /** Column definition */
  column: TableColumn
  /** Current sort state */
  sortState?: SortState
  /** Callback when sort is triggered */
  onSort?: (columnId: string) => void
  /** Whether this is a select-all checkbox header */
  isSelectAll?: boolean
  /** Whether all rows are selected */
  isAllSelected?: boolean
  /** Whether some rows are selected (indeterminate state) */
  isIndeterminate?: boolean
  /** Callback for select-all toggle */
  onSelectAll?: () => void
}

/**
 * Props for Row component
 */
export interface RowProps {
  /** Row data */
  row: TableRow
  /** Column definitions */
  columns: TableColumn[]
  /** Whether row is selected */
  isSelected?: boolean
  /** Whether selection is enabled */
  selectable?: boolean
  /** Callback when row is clicked */
  onClick?: (row: TableRow) => void
  /** Callback when row selection is toggled */
  onSelect?: (row: TableRow) => void
  /** Callback when mouse enters row */
  onMouseEnter?: (row: TableRow) => void
  /** Callback when mouse leaves row */
  onMouseLeave?: () => void
}

/**
 * Props for Pagination component
 */
export interface PaginationProps {
  /** Current page (0-indexed) */
  page: number
  /** Rows per page */
  rowsPerPage: number
  /** Total row count */
  total: number
  /** Available rows per page options */
  rowsPerPageOptions?: number[]
  /** Callback when page changes */
  onPageChange: (page: number) => void
  /** Callback when rows per page changes */
  onRowsPerPageChange: (rowsPerPage: number) => void
}

/**
 * Props for PaginationActions component
 */
export interface PaginationActionsProps {
  /** Current page (0-indexed) */
  page: number
  /** Total row count */
  count: number
  /** Rows per page */
  rowsPerPage: number
  /** Callback when page changes */
  onPageChange: (
    event: React.MouseEvent<HTMLButtonElement> | null,
    newPage: number,
  ) => void
}