import { Table } from 'antd'
import './ListTable.css'

/**
 * 列表表格组件
 * @param {Object} props
 * @param {Array} props.columns - 表格列配置
 * @param {Array} props.dataSource - 数据源
 * @param {string} props.rowKey - 行唯一标识字段
 * @param {Array} props.selectedRowKeys - 选中的行
 * @param {Function} props.onSelectionChange - 选择变化回调
 * @param {boolean} props.isAllPagesSelected - 是否跨页全选所有数据
 * @param {number} props.totalCount - 总数据量（用于跨页全选）
 * @param {Function} props.onSelectAllPages - 选择所有页回调
 * @param {Function} props.onClearSelection - 清除选择回调
 * @param {Object} props.pagination - 分页配置
 * @param {Object} props.scroll - 表格滚动配置
 * @param {Function} props.onRowClick - 行点击回调
 * @param {Object} props.selectedRow - 当前选中的行
 * @param {boolean} props.loading - 加载状态
 * @param {string} props.className - 自定义类名
 */
function ListTable({
  columns,
  dataSource,
  rowKey = 'id',
  selectedRowKeys = [],
  onSelectionChange,
  isAllPagesSelected = false,
  totalCount,
  onSelectAllPages,
  onClearSelection,
  pagination = {
    pageSize: 10,
    showSizeChanger: true,
    showQuickJumper: true,
  },
  scroll = { x: 1200},
  onRowClick,
  selectedRow,
  loading = false,
  className = '',
}) {
  // 行选择配置
  const rowSelection = {
    selectedRowKeys,
    onChange: (newSelectedRowKeys) => {
      onSelectionChange?.(newSelectedRowKeys)
    },
    // 当跨页全选时，禁用单个复选框
    getCheckboxProps: () => ({
      disabled: isAllPagesSelected,
    }),
  }

  // 合并分页配置，添加选择信息显示
  const mergedPagination = pagination === false ? false : {
    ...pagination,
    showTotal: (total) => (
      <div className="table-selection-info">
        {isAllPagesSelected ? (
          <>
            <span className="selection-count">
              已选择 <span className="count-highlight">{totalCount || total}</span> 项
            </span>
            {onClearSelection && (
              <a onClick={onClearSelection} className="selection-action">
                清除选择
              </a>
            )}
          </>
        ) : selectedRowKeys.length > 0 ? (
          <>
            <span className="selection-count">
              已选择 <span className="count-highlight">{selectedRowKeys.length}</span> 项
            </span>
            {onSelectAllPages && selectedRowKeys.length < (totalCount || total) && (
              <a onClick={onSelectAllPages} className="selection-action">
                选择全部 {totalCount || total} 项
              </a>
            )}
            {onClearSelection && (
              <a onClick={onClearSelection} className="selection-action">
                清除
              </a>
            )}
          </>
        ) : (
          <span className="selection-count">已选择 0 项</span>
        )}
      </div>
    ),
  }

  return (
    <div className={`list-table-container ${className}`}>
      <Table
        size="middle"
        rowSelection={rowSelection}
        columns={columns}
        dataSource={dataSource}
        rowKey={rowKey}
        pagination={mergedPagination}
        scroll={scroll}
        loading={loading}
        onRow={(record) => ({
          onClick: () => onRowClick?.(record),
          className: selectedRow?.[rowKey] === record[rowKey] ? 'row-selected' : '',
        })}
      />
    </div>
  )
}

export default ListTable