import React from 'react';
import { Alert, Button, Popconfirm, Table } from 'antd';
import { InboxOutlined, LogoutOutlined, UndoOutlined, DeleteOutlined } from '@ant-design/icons';
import PermissionButton from '../../components/PermissionButton';
import { QueryEmpty } from '../../components/QueryState';

export const OccupanciesTableArea: React.FC<{
  columns: any[];
  data: any[];
  loading: boolean;
  selectedRowKeys: number[];
  rowSelection: any;
  batchAction: 'checkout' | 'archive' | 'restore';
  canDelete: boolean;
  canPurge: boolean;
  canCheckIn?: boolean;
  onCheckIn?: () => void;
  batchLoading: boolean;
  onBatchCheckOut: () => void;
  onBatchDelete: () => void;
  onBatchRestore: () => void;
  onBatchPurge: () => void;
  onClearSelection: () => void;
}> = ({
  columns,
  data,
  loading,
  selectedRowKeys,
  rowSelection,
  batchAction,
  canDelete,
  canPurge,
  canCheckIn,
  onCheckIn,
  batchLoading,
  onBatchCheckOut,
  onBatchDelete,
  onBatchRestore,
  onBatchPurge,
  onClearSelection,
}) => {
  return (
    <>
      {selectedRowKeys.length > 0 && (
        <Alert
          title={
            <span>
              已选 <strong>{selectedRowKeys.length}</strong> 条记录
              {batchAction === 'checkout' ? (
                <PermissionButton
                  permission="occupancy:checkout"
                  type="primary"
                  size="small"
                  icon={<LogoutOutlined />}
                  onClick={onBatchCheckOut}
                  style={{ marginLeft: 12 }}
                  loading={batchLoading}
                >
                  批量退宿
                </PermissionButton>
              ) : batchAction === 'archive' ? (
                canDelete ? (
                  <Popconfirm
                    title={`确定归档选中的 ${selectedRowKeys.length} 条入住记录？在住记录会自动跳过`}
                    onConfirm={onBatchDelete}
                    okText="归档"
                    cancelText="取消"
                  >
                    <Button
                      danger
                      size="small"
                      icon={<InboxOutlined />}
                      style={{ marginLeft: 12 }}
                      loading={batchLoading}
                    >
                      批量归档
                    </Button>
                  </Popconfirm>
                ) : null
              ) : (
                <>
                  {canDelete ? (
                    <Popconfirm
                      title={`确定恢复选中的 ${selectedRowKeys.length} 条入住记录？`}
                      onConfirm={onBatchRestore}
                      okText="恢复"
                      cancelText="取消"
                    >
                      <Button
                        type="primary"
                        size="small"
                        icon={<UndoOutlined />}
                        style={{ marginLeft: 12 }}
                        loading={batchLoading}
                      >
                        批量恢复
                      </Button>
                    </Popconfirm>
                  ) : null}
                  {canPurge ? (
                    <Popconfirm
                      title={`确定永久删除选中的 ${selectedRowKeys.length} 条入住记录？删除后不可恢复！`}
                      onConfirm={onBatchPurge}
                      okText="永久删除"
                      okButtonProps={{ danger: true }}
                      cancelText="取消"
                    >
                      <Button
                        danger
                        size="small"
                        icon={<DeleteOutlined />}
                        style={{ marginLeft: 8 }}
                        loading={batchLoading}
                      >
                        批量删除
                      </Button>
                    </Popconfirm>
                  ) : null}
                </>
              )}
              <Button size="small" onClick={onClearSelection} style={{ marginLeft: 8 }}>
                取消选择
              </Button>
            </span>
          }
          type="info"
          style={{ marginBottom: 12 }}
        />
      )}
      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        loading={loading}
        locale={{
          emptyText: (
            <QueryEmpty
              description="暂无数据"
              action={
                canCheckIn && onCheckIn
                  ? { label: '入住登记', onClick: onCheckIn }
                  : undefined
              }
            />
          ),
        }}
        scroll={{ x: 1300 }}
        pagination={{
          defaultPageSize: 15,
          showSizeChanger: true,
          pageSizeOptions: [15, 30, 50, 100],
          showTotal: (total) => `共 ${total} 条`,
        }}
        rowSelection={rowSelection}
      />
    </>
  );
};
