import React from 'react';
import { Button, Input, Popconfirm, Select, Space, Upload } from 'antd';
import type { UploadRequestOption } from '@rc-component/upload/lib/interface';
import {
  DeleteOutlined,
  DownloadOutlined,
  ExportOutlined,
  InboxOutlined,
  PlusOutlined,
  SearchOutlined,
  UndoOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import PermissionButton from '../../components/PermissionButton';

export interface RoomsToolbarProps {
  onSearch: (value: string) => void;
  buildings: string[];
  filterBuilding?: string;
  onFilterBuilding: (value?: string) => void;
  filterStatus?: string;
  onFilterStatus: (value?: string) => void;
  filterRentalCategory?: string;
  onFilterRentalCategory: (value?: string) => void;
  showArchived: boolean;
  onToggleArchived: () => void;
  selectedRowKeys: number[];
  batchLoading: boolean;
  canEditRooms: boolean;
  canPurgeRooms: boolean;
  canDeleteRooms: boolean;
  hasCreatePermission: boolean;
  onBatchRestore: () => void;
  onBatchPurge: () => void;
  onBatchDelete: () => void;
  onAddRoom: () => void;
  onImport: (options: UploadRequestOption<{ message?: string }>) => void;
  onDownloadTemplate: () => void;
  onExport: () => void;
  templateLoading?: boolean;
  exportLoading?: boolean;
}

export const RoomsToolbar: React.FC<RoomsToolbarProps> = ({
  onSearch,
  buildings,
  filterBuilding,
  onFilterBuilding,
  filterStatus,
  onFilterStatus,
  filterRentalCategory,
  onFilterRentalCategory,
  showArchived,
  onToggleArchived,
  selectedRowKeys,
  batchLoading,
  canEditRooms,
  canPurgeRooms,
  canDeleteRooms,
  hasCreatePermission,
  onBatchRestore,
  onBatchPurge,
  onBatchDelete,
  onAddRoom,
  onImport,
  onDownloadTemplate,
  onExport,
  templateLoading,
  exportLoading,
}) => {
  return (
    <div className="responsive-toolbar">
      <Space wrap className="responsive-toolbar__group">
        <h3 style={{ margin: 0 }}>宿舍管理</h3>
        <Input.Search
          placeholder="搜索房间号"
          onSearch={onSearch}
          allowClear
          style={{ width: 160 }}
          prefix={<SearchOutlined />}
        />
        <Select
          placeholder="筛选楼栋"
          allowClear
          style={{ width: 120 }}
          value={filterBuilding}
          onChange={onFilterBuilding}
          options={buildings.map((b) => ({ value: b, label: b }))}
        />
        <Select
          placeholder="状态"
          allowClear
          style={{ width: 110 }}
          value={filterStatus}
          onChange={onFilterStatus}
          options={[
            { value: 'available', label: '可入住' },
            { value: 'full', label: '已满' },
            { value: 'maintenance', label: '维护中' },
          ]}
        />
        <Select
          placeholder="租赁类型"
          allowClear
          style={{ width: 120 }}
          value={filterRentalCategory}
          onChange={onFilterRentalCategory}
          options={[
            { value: 'long', label: '长租' },
            { value: 'short', label: '短租' },
          ]}
        />
        <Button type={showArchived ? 'primary' : 'default'} onClick={onToggleArchived}>
          {showArchived ? '返回正常数据' : '查看已归档'}
        </Button>
      </Space>
      <Space wrap className="responsive-toolbar__group">
        {showArchived && canEditRooms ? (
          <>
            <Popconfirm
              title={`确定批量恢复选中的 ${selectedRowKeys.length} 间宿舍？`}
              onConfirm={onBatchRestore}
              okText="恢复"
              cancelText="取消"
              disabled={selectedRowKeys.length === 0}
            >
              <Button
                type="primary"
                icon={<UndoOutlined />}
                disabled={selectedRowKeys.length === 0}
                loading={batchLoading}
              >
                批量恢复
              </Button>
            </Popconfirm>
            {canPurgeRooms ? (
              <Popconfirm
                title={`确定永久删除选中的 ${selectedRowKeys.length} 间宿舍？删除后不可恢复！`}
                onConfirm={onBatchPurge}
                okText="永久删除"
                okButtonProps={{ danger: true }}
                cancelText="取消"
                disabled={selectedRowKeys.length === 0}
              >
                <Button
                  danger
                  icon={<DeleteOutlined />}
                  disabled={selectedRowKeys.length === 0}
                  loading={batchLoading}
                >
                  批量删除
                </Button>
              </Popconfirm>
            ) : null}
          </>
        ) : !showArchived && canDeleteRooms ? (
          <Popconfirm
            title={`确定批量归档选中的 ${selectedRowKeys.length} 间宿舍？（有在住人员的会跳过）`}
            onConfirm={onBatchDelete}
            okText="归档"
            cancelText="取消"
            disabled={selectedRowKeys.length === 0}
          >
            <Button
              danger
              icon={<InboxOutlined />}
              disabled={selectedRowKeys.length === 0}
              loading={batchLoading}
            >
              批量归档
            </Button>
          </Popconfirm>
        ) : null}
        {!showArchived ? (
          <PermissionButton
            permission="room:create"
            type="primary"
            icon={<PlusOutlined />}
            onClick={onAddRoom}
          >
            添加宿舍
          </PermissionButton>
        ) : null}
        {!showArchived && hasCreatePermission ? (
          <Upload accept=".xlsx,.xls" showUploadList={false} customRequest={onImport}>
            <Button icon={<UploadOutlined />}>导入Excel</Button>
          </Upload>
        ) : null}
        <PermissionButton
          permission="room:view"
          icon={<DownloadOutlined />}
          loading={templateLoading}
          onClick={onDownloadTemplate}
        >
          下载模板
        </PermissionButton>
        <PermissionButton
          permission="room:view"
          icon={<ExportOutlined />}
          loading={exportLoading}
          onClick={onExport}
        >
          导出列表
        </PermissionButton>
      </Space>
    </div>
  );
};
