import React, { useEffect, useState, useMemo, useCallback } from 'react';
import {
  Table,
  Button,
  Modal,
  Form,
  Input,
  InputNumber,
  Select,
  Space,
  Tag,
  Popconfirm,
  Badge,
  Upload,
  Drawer,
  Tabs,
  Empty,
} from 'antd';
import type { UploadRequestError, UploadRequestOption } from '@rc-component/upload/lib/interface';
import {
  PlusOutlined,
  UploadOutlined,
  DownloadOutlined,
  UndoOutlined,
  InboxOutlined,
  SearchOutlined,
  ExportOutlined,
} from '@ant-design/icons';
import api from '../../api';
import { downloadBlob } from '../../utils/download';
import PermissionButton from '../../components/PermissionButton';
import { message } from '../../ui/app-message';

const statusMap: Record<string, { text: string; color: string }> = {
  available: { text: '可入住', color: 'green' },
  full: { text: '已满', color: 'red' },
  maintenance: { text: '维修中', color: 'orange' },
  archived: { text: '已归档', color: '#999' },
};

interface BedItem {
  id: number;
  bedNumber: string;
  status: string;
  notes?: string | null;
}

interface LockerItem {
  id: number;
  lockerNumber: string;
  status: string;
  notes?: string | null;
}

function parseRoomNumber(input: string) {
  const cleaned = input.replace(/[（(].*?[）)]/g, '').trim();
  const familyMatch = cleaned.match(/^(\d+)-(\d+)-(\d+)$/);
  if (familyMatch) {
    return {
      building: `${familyMatch[1]}-${familyMatch[2]}栋`,
      floor: parseInt(familyMatch[3].charAt(0), 10) || undefined,
      roomType: '家庭房',
      capacity: 4,
    };
  }
  const stdMatch = cleaned.match(/^(\d+)-(\d+)$/);
  if (stdMatch) {
    const bldgNum = stdMatch[1];
    const roomPart = stdMatch[2];
    const floor = parseInt(roomPart.charAt(0), 10) || undefined;
    let roomType = '四人间';
    let capacity = 4;
    if (bldgNum === '2') { roomType = '单人间'; capacity = 1; }
    else if (bldgNum === '8') { roomType = '爆改房'; capacity = 2; }
    return { building: `${bldgNum}号楼`, floor, roomType, capacity };
  }
  return null;
}

const RoomsPage: React.FC = () => {
  const [data, setData] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<any>(null);
  const [showArchived, setShowArchived] = useState(false);
  const [archivedCount, setArchivedCount] = useState(0);
  const [searchText, setSearchText] = useState('');
  const [filterBuilding, setFilterBuilding] = useState<string | undefined>(undefined);
  const [filterStatus, setFilterStatus] = useState<string | undefined>(undefined);
  const [filterRentalCategory, setFilterRentalCategory] = useState<string | undefined>(undefined);
  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
  const [saving, setSaving] = useState(false);
  const [form] = Form.useForm();
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [drawerRoom, setDrawerRoom] = useState<any>(null);
  const [beds, setBeds] = useState<any[]>([]);
  const [lockers, setLockers] = useState<any[]>([]);
  const [bedModalOpen, setBedModalOpen] = useState(false);
  const [bedEditing, setBedEditing] = useState<any>(null);
  const [lockerModalOpen, setLockerModalOpen] = useState(false);
  const [lockerEditing, setLockerEditing] = useState<any>(null);
  const [bedForm] = Form.useForm();
  const [lockerForm] = Form.useForm();
  const [savingBed, setSavingBed] = useState(false);
  const [savingLocker, setSavingLocker] = useState(false);
  const [batchLoading, setBatchLoading] = useState(false);

  const handleBatchDelete = async () => {
    setBatchLoading(true);
    try {
      const res: any = await api.post('/rooms/batch-delete', { ids: selectedRowKeys });
      message.success(res?.message || `已批量归档 ${selectedRowKeys.length} 间`);
      setSelectedRowKeys([]);
      fetchData();
    } catch (e: any) {
      message.error(e?.message || '批量归档失败');
    } finally {
      setBatchLoading(false);
    }
  };

  const fetchData = async () => {
    setLoading(true);
    try {
      const params: any = { includeArchived: 'true' };
      const res: any = await api.get('/rooms/overview', { params });
      const archived = res.filter((r: any) => r.status === 'archived');
      setArchivedCount(archived.length);
      const filtered = showArchived ? res : res.filter((r: any) => r.status !== 'archived');
      setData(filtered);
    } catch (e: unknown) {
      const err = e as { message?: string };
      message.error(err?.message || '加载失败，请稍后重试');
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchData();
  }, [showArchived]);

  // 获取楼栋列表用于筛选
  const buildings = useMemo(() => {
    const set = new Set(data.map((r: any) => r.building).filter(Boolean));
    return [...set].sort();
  }, [data]);

  // 前端搜索和楼栋筛选
  const filteredData = useMemo(() => {
    let result = data;
    if (searchText) {
      const keyword = searchText.toLowerCase();
      result = result.filter((r: Record<string, unknown>) => typeof r.roomNumber === 'string' && r.roomNumber.toLowerCase().includes(keyword));
    }
    if (filterBuilding) result = result.filter((r: Record<string, unknown>) => r.building === filterBuilding);
    if (filterStatus) result = result.filter((r: Record<string, unknown>) => r.status === filterStatus);
    if (filterRentalCategory) {
      result = result.filter((r: Record<string, unknown>) => r.rentalCategory === filterRentalCategory);
    }
    return result;
  }, [data, searchText, filterBuilding, filterStatus, filterRentalCategory]);
  const remainingBedSlots = useMemo(() => {
    const capacity = Number(drawerRoom?.capacity) || 0;
    return Math.max(capacity - beds.length, 0);
  }, [drawerRoom?.capacity, beds.length]);
  const defaultBatchBedCount = Math.min(4, Math.max(remainingBedSlots, 1));

  const handleSave = async () => {
    const values = await form.validateFields();
    const payload = values;
    setSaving(true);
    try {
      if (editing) {
        await api.put(`/rooms/${editing.id}`, payload);
        message.success('更新成功');
      } else {
        await api.post('/rooms', payload);
        message.success(`创建成功，已自动生成 ${values.capacity} 张床位`);
      }
      setModalOpen(false);
      form.resetFields();
      setEditing(null);
      fetchData();
    } catch (e: any) {
      message.error(e?.message || '操作失败');
    } finally {
      setSaving(false);
    }
  };
  const fetchBeds = useCallback(async (roomId: number) => {
    try {
      const res = await api.get<BedItem[]>(`/rooms/${roomId}/beds`);
      setBeds(res);
    } catch (e: unknown) {
      const err = e as { message?: string };
      message.error(err?.message || '加载床位失败');
    }
  }, []);

  const fetchLockers = useCallback(async (roomId: number) => {
    try {
      const res = await api.get<LockerItem[]>(`/rooms/${roomId}/lockers`);
      setLockers(res);
    } catch (e: unknown) {
      const err = e as { message?: string };
      message.error(err?.message || '加载柜子失败');
    }
  }, []);

  const handleSaveBed = async () => {
    const values = await bedForm.validateFields();
    setSavingBed(true);
    try {
      if (bedEditing) {
        await api.put(`/rooms/${drawerRoom.id}/beds/${bedEditing.id}`, values);
      } else {
        await api.post(`/rooms/${drawerRoom.id}/beds`, values);
      }
      message.success(bedEditing ? '更新成功' : '添加成功');
      setBedModalOpen(false);
      bedForm.resetFields();
      setBedEditing(null);
      fetchBeds(drawerRoom.id);
    } catch (e: any) { message.error(e?.message || '操作失败'); }
    finally { setSavingBed(false); }
  };

  const handleDeleteBed = async (id: number) => {
    try {
      await api.delete(`/rooms/${drawerRoom.id}/beds/${id}`);
      message.success('已归档');
      fetchBeds(drawerRoom.id);
    } catch (e: any) { message.error(e?.message || '归档失败'); }
  };

  const handleBatchBeds = async (count: number) => {
    try {
      await api.post(`/rooms/${drawerRoom.id}/beds/batch`, { count });
      message.success(`已生成 ${count} 张床位`);
      fetchBeds(drawerRoom.id);
    } catch (e: any) { message.error(e?.message || '批量生成失败'); }
  };

  const handleSaveLocker = async () => {
    const values = await lockerForm.validateFields();
    setSavingLocker(true);
    try {
      if (lockerEditing) {
        await api.put(`/rooms/${drawerRoom.id}/lockers/${lockerEditing.id}`, values);
      } else {
        await api.post(`/rooms/${drawerRoom.id}/lockers`, values);
      }
      message.success(lockerEditing ? '更新成功' : '添加成功');
      setLockerModalOpen(false);
      lockerForm.resetFields();
      setLockerEditing(null);
      fetchLockers(drawerRoom.id);
    } catch (e: any) { message.error(e?.message || '操作失败'); }
    finally { setSavingLocker(false); }
  };

  const handleDeleteLocker = async (id: number) => {
    try {
      await api.delete(`/rooms/${drawerRoom.id}/lockers/${id}`);
      message.success('已归档');
      fetchLockers(drawerRoom.id);
    } catch (e: any) { message.error(e?.message || '归档失败'); }
  };

  const handleBatchLockers = async (count: number) => {
    try {
      await api.post(`/rooms/${drawerRoom.id}/lockers/batch`, { count });
      message.success(`已生成 ${count} 个柜子`);
      fetchLockers(drawerRoom.id);
    } catch (e: any) { message.error(e?.message || '批量生成失败'); }
  };

  const handleArchive = async (id: number) => {
    try {
      await api.delete(`/rooms/${id}`);
      message.success('已归档');
      fetchData();
    } catch (e: any) {
      message.error(e?.message || '归档失败');
    }
  };

  const handleRestore = async (id: number) => {
    try {
      await api.put(`/rooms/${id}/restore`);
      message.success('已恢复');
      fetchData();
    } catch (e: any) {
      message.error(e?.message || '恢复失败');
    }
  };

  const handleDownloadTemplate = () => {
    downloadBlob('/rooms/template', '房间导入模板.xlsx').catch(() => message.error('下载失败'));
  };

  const handleExport = () => {
    const params = showArchived ? '?includeArchived=true' : '';
    downloadBlob('/rooms/export' + params, '房间列表.xlsx').catch(() => message.error('导出失败'));
  };

  const columns = useMemo(() => [
    {
      title: '房间号',
      dataIndex: 'roomNumber',
      width: 100,
      sorter: (a: any, b: any) => a.roomNumber.localeCompare(b.roomNumber),
    },
    { title: '楼栋', dataIndex: 'building', width: 80 },
    { title: '楼层', dataIndex: 'floor', width: 80 },
    { title: '类型', dataIndex: 'roomType', width: 90, render: (v: any) => v || '-' },
    {
      title: '租赁类型',
      dataIndex: 'rentalCategory',
      width: 100,
      render: (v: string) => {
        if (v === 'long') return <Tag color="blue">长租</Tag>;
        if (v === 'short') return <Tag color="green">短租</Tag>;
        return '-';
      },
    },
    {
      title: '月租金',
      dataIndex: 'monthlyRate',
      width: 100,
      render: (v: number) => (v ? `¥${v}` : '-'),
    },
    { title: '额定人数', dataIndex: 'capacity', width: 80 },
    {
      title: '当前入住',
      width: 80,
      render: (_: any, r: any) =>
        r.status === 'archived' ? (
          <Tag color="#999">-</Tag>
        ) : (
          <Badge
            count={r.currentCount}
            showZero
            overflowCount={99}
            style={{ backgroundColor: r.currentCount >= r.capacity ? '#ff4d4f' : '#52c41a' }}
          />
        ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 80,
      render: (s: string) => <Tag color={statusMap[s]?.color}>{statusMap[s]?.text || s}</Tag>,
    },
    {
      title: '操作',
      width: 220,
      render: (_: unknown, record: unknown) => {
        const r = record as { status?: string; id: number };
        return (
          <Space>
            {r.status === 'archived' ? (
              <Popconfirm
                title="确定恢复此宿舍？"
                onConfirm={() => handleRestore(r.id)}
              >
                <PermissionButton permission="room:edit" size="small" icon={<UndoOutlined />} type="link">
                  恢复
                </PermissionButton>
              </Popconfirm>
            ) : (
              <>
                <PermissionButton
                  permission="room:view"
                  size="small"
                  type="link"
                  onClick={async () => {
                    const rec = record as { id: number };
                    setDrawerRoom(record);
                    setDrawerOpen(true);
                    await Promise.all([fetchBeds(rec.id), fetchLockers(rec.id)]);
                  }}
                >
                  查看
                </PermissionButton>
                <PermissionButton
                  permission="room:edit"
                  size="small"
                  onClick={() => {
                    const rec = record as { id: number };
                    setEditing(rec);
                    form.setFieldsValue(rec);
                    setModalOpen(true);
                  }}
                >
                  编辑
                </PermissionButton>
                <Popconfirm title="确定归档？" onConfirm={() => handleArchive(r.id)}>
                  <PermissionButton permission="room:delete" size="small" icon={<InboxOutlined />}>
                    归档
                  </PermissionButton>
                </Popconfirm>
              </>
            )}
          </Space>
        );
      },
    },
  ], [showArchived, buildings, handleBatchDelete, handleRestore, handleArchive, fetchBeds, fetchLockers]);

  return (
    <div>
      <div className="responsive-toolbar">
        <Space wrap className="responsive-toolbar__group">
          <h3 style={{ margin: 0 }}>宿舍管理</h3>
          <Input.Search
            placeholder="搜索房间号"
            onSearch={setSearchText}
            allowClear
            style={{ width: 160 }}
            prefix={<SearchOutlined />}
          />
          <Select
            placeholder="筛选楼栋"
            allowClear
            style={{ width: 120 }}
            onChange={(v) => setFilterBuilding(v)}
            options={buildings.map((b) => ({ value: b, label: b }))}
          />
          <Select placeholder="状态" allowClear style={{ width: 110 }} value={filterStatus} onChange={setFilterStatus}
            options={[{value:'available',label:'可入住'},{value:'full',label:'已满'},{value:'maintenance',label:'维护中'}]} />
          <Select
            placeholder="租赁类型"
            allowClear
            style={{ width: 120 }}
            value={filterRentalCategory}
            onChange={setFilterRentalCategory}
            options={[
              { value: 'long', label: '长租' },
              { value: 'short', label: '短租' },
            ]}
          />
          <Button
            type={showArchived ? 'primary' : 'default'}
            onClick={() => setShowArchived(!showArchived)}
          >
            {showArchived
              ? '隐藏已归档'
              : `显示已归档${archivedCount > 0 ? ` (${archivedCount})` : ''}`}
          </Button>
        </Space>
        <Space wrap className="responsive-toolbar__group">
          <Popconfirm
            title={`确定批量归档选中的 ${selectedRowKeys.length} 间宿舍？（有在住人员的会跳过）`}
            onConfirm={handleBatchDelete}
            okText="归档"
            cancelText="取消"
            disabled={selectedRowKeys.length === 0}
          >
            <PermissionButton
              permission="room:delete"
              danger
              icon={<InboxOutlined />}
              disabled={selectedRowKeys.length === 0}
              loading={batchLoading}
            >
              批量归档
            </PermissionButton>
          </Popconfirm>
          <PermissionButton
            permission="room:create"
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              setEditing(null);
              form.resetFields();
              setModalOpen(true);
            }}
          >
            添加宿舍
          </PermissionButton>
          <Upload
            accept=".xlsx,.xls"
            showUploadList={false}
            customRequest={async (options: UploadRequestOption<{ message?: string }>) => {
              const { file, onSuccess, onError } = options;
              if (typeof file === 'string') {
                message.error('不支持字符串文件');
                return;
              }
              try {
                const formData = new FormData();
                formData.append('file', file);
                const res = await api.post<{ message?: string }>('/rooms/import', formData, {
                  headers: { 'Content-Type': 'multipart/form-data' },
                });
                message.success(res.message || '导入成功');
                onSuccess?.(res);
                fetchData();
              } catch (e: unknown) {
                const err = e as { message?: string };
                message.error(err?.message || '导入失败');
                onError?.(e as UploadRequestError);
              }
            }}
          >
            <Button icon={<UploadOutlined />}>导入Excel</Button>
          </Upload>
          <PermissionButton
            permission="room:view"
            icon={<DownloadOutlined />}
            onClick={handleDownloadTemplate}
          >
            下载模板
          </PermissionButton>
          <PermissionButton permission="room:view" icon={<ExportOutlined />} onClick={handleExport}>
            导出列表
          </PermissionButton>
        </Space>
      </div>
      <Table
        columns={columns}
        dataSource={filteredData}
        rowKey="id"
        scroll={{ x: 1200 }}
        loading={loading}
        locale={{ emptyText: <Empty description="暂无数据" /> }}
        pagination={{
          defaultPageSize: 20,
          showSizeChanger: true,
          pageSizeOptions: [20, 50, 100],
          showTotal: (total) => `共 ${total} 间`,
        }}
        rowClassName={(record) => (record.status === 'archived' ? 'archived-row' : '')}
        rowSelection={{
          selectedRowKeys,
          onChange: (keys) => setSelectedRowKeys(keys as number[]),
          getCheckboxProps: (record: any) => ({ disabled: record.status === 'archived' }),
        }}
      />
      <style>{`.archived-row { opacity: 0.6; background: #fafafa !important; }`}</style>

      <Modal
        title={editing ? '编辑宿舍' : '添加宿舍'}
        open={modalOpen}
        onOk={handleSave}
        onCancel={() => {
          setModalOpen(false);
          setEditing(null);
        }}
        okText="保存"
        confirmLoading={saving}
      >
        <Form form={form} layout="vertical">
          <Form.Item name="roomNumber" label="房间号" rules={[{ required: true }]}>
            <Input
              placeholder="如：4-102（自动解析楼栋楼层）"
              onChange={(e) => {
                const parsed = parseRoomNumber(e.target.value);
                if (parsed) form.setFieldsValue(parsed);
              }}
            />
          </Form.Item>
          <Form.Item name="building" label="楼栋">
            <Input placeholder="如：4号楼（留空自动解析）" />
          </Form.Item>
          <Form.Item name="floor" label="楼层">
            <InputNumber min={1} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="capacity" label="额定人数" rules={[{ required: true }]}>
            <InputNumber min={1} max={20} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="roomType" label="宿舍类型">
            <Select
              allowClear
              options={[
                { value: '四人间', label: '四人间' },
                { value: '单人间', label: '单人间' },
                { value: '家庭房', label: '家庭房' },
                { value: '爆改房', label: '爆改房' },
              ]}
              placeholder="留空自动解析"
            />
          </Form.Item>
          <Form.Item name="rentalCategory" label="租赁类别">
            <Select
              allowClear
              options={[
                { value: 'short', label: '短租' },
                { value: 'long', label: '长租' },
              ]}
              placeholder="默认为短租"
            />
          </Form.Item>
          <Form.Item name="monthlyRate" label="月租金">
            <InputNumber min={0} precision={2} style={{ width: '100%' }} placeholder="长租月租金" />
          </Form.Item>
          {editing && (
            <Form.Item name="status" label="状态">
              <Select
                options={[
                  { value: 'available', label: '可入住' },
                  { value: 'full', label: '已满' },
                  { value: 'maintenance', label: '维修中' },
                ]}
              />
            </Form.Item>
          )}
        </Form>
      </Modal>

      <Drawer
        title={`${drawerRoom?.roomNumber} 房间详情`}
        open={drawerOpen}
        onClose={() => { setDrawerOpen(false); setDrawerRoom(null); }}
        width={640}
        destroyOnClose
      >
        <Tabs
          defaultActiveKey="info"
          items={[
            {
              key: 'info',
              label: '基本信息',
              children: drawerRoom && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  <div><strong>房间号：</strong>{drawerRoom.roomNumber}</div>
                  <div><strong>楼栋：</strong>{drawerRoom.building || '-'}</div>
                  <div><strong>楼层：</strong>{drawerRoom.floor ?? '-'}</div>
                  <div><strong>类型：</strong>{drawerRoom.roomType || '-'}</div>
                  <div><strong>额定人数：</strong>{drawerRoom.capacity}</div>
                  <div><strong>租赁类别：</strong>{drawerRoom.rentalCategory === 'long' ? '长租' : '短租'}</div>
                  <div><strong>月租金：</strong>{drawerRoom.monthlyRate ? `¥${drawerRoom.monthlyRate}` : '-'}</div>
                  <div><strong>状态：</strong><Tag color={statusMap[drawerRoom.status]?.color}>{statusMap[drawerRoom.status]?.text}</Tag></div>
                </div>
              ),
            },
            {
              key: 'beds',
              label: `床位管理 (${beds.length})`,
              children: (
                <div>
                  <div style={{ marginBottom: 12, display: 'flex', gap: 8 }}>
                    <Button
                      type="primary"
                      size="small"
                      icon={<PlusOutlined />}
                      disabled={drawerRoom?.status === 'archived' || remainingBedSlots === 0}
                      onClick={() => { setBedEditing(null); bedForm.resetFields(); setBedModalOpen(true); }}
                    >
                      添加床位
                    </Button>
                    <Popconfirm
                      title={remainingBedSlots > 0 ? '批量生成床位' : '床位已达到额定人数'}
                      description={
                        remainingBedSlots > 0
                          ? <InputNumber min={1} max={remainingBedSlots} defaultValue={defaultBatchBedCount} id="batch-bed-count" style={{ width: 80 }} />
                          : '如需增加床位，请先调整宿舍额定人数'
                      }
                      onConfirm={() => {
                        const input = document.getElementById('batch-bed-count') as HTMLInputElement;
                        handleBatchBeds(input ? parseInt(input.value) || defaultBatchBedCount : defaultBatchBedCount);
                      }}
                      okText="生成"
                      disabled={drawerRoom?.status === 'archived' || remainingBedSlots === 0}
                    >
                      <Button size="small" disabled={drawerRoom?.status === 'archived' || remainingBedSlots === 0}>批量生成</Button>
                    </Popconfirm>
                  </div>
                  <Table
                    dataSource={beds}
                    rowKey="id"
                    pagination={false}
                    size="small"
                    columns={[
                      { title: '编号', dataIndex: 'bedNumber', width: 80 },
                      {
                        title: '状态', dataIndex: 'status', width: 80,
                        render: (s: string) => {
                          const map: Record<string, { text: string; color: string }> = {
                            available: { text: '空闲', color: 'green' },
                            occupied: { text: '占用', color: 'blue' },
                            maintenance: { text: '维修', color: 'orange' },
                          };
                          return <Tag color={map[s]?.color}>{map[s]?.text || s}</Tag>;
                        },
                      },
                      { title: '备注', dataIndex: 'notes', render: (v: string) => v || '-' },
                      {
                        title: '操作', width: 120,
                        render: (_: any, r: any) => (
                          <Space size="small">
                            <PermissionButton
                              permission="room:edit"
                              size="small"
                              type="link"
                              disabled={drawerRoom?.status === 'archived'}
                              onClick={() => { setBedEditing(r); bedForm.setFieldsValue(r); setBedModalOpen(true); }}
                            >
                              编辑
                            </PermissionButton>
                            {r.status !== 'occupied' && (
                              <Popconfirm title="确定归档？" onConfirm={() => handleDeleteBed(r.id)}>
                                <PermissionButton
                                  permission="room:edit"
                                  size="small"
                                  type="link"
                                  danger
                                  disabled={drawerRoom?.status === 'archived'}
                                >
                                  归档
                                </PermissionButton>
                              </Popconfirm>
                            )}
                          </Space>
                        ),
                      },
                    ]}
                  />
                </div>
              ),
            },
            {
              key: 'lockers',
              label: `柜子管理 (${lockers.length})`,
              children: (
                <div>
                  <div style={{ marginBottom: 12, display: 'flex', gap: 8 }}>
                    <Button
                      type="primary"
                      size="small"
                      icon={<PlusOutlined />}
                      disabled={drawerRoom?.status === 'archived'}
                      onClick={() => { setLockerEditing(null); lockerForm.resetFields(); setLockerModalOpen(true); }}
                    >
                      添加柜子
                    </Button>
                    <Popconfirm
                      title="批量生成柜子"
                      description={
                        <InputNumber min={1} max={20} defaultValue={4} id="batch-locker-count" style={{ width: 80 }} />
                      }
                      onConfirm={() => {
                        const input = document.getElementById('batch-locker-count') as HTMLInputElement;
                        handleBatchLockers(input ? parseInt(input.value) || 4 : 4);
                      }}
                      okText="生成"
                      disabled={drawerRoom?.status === 'archived'}
                    >
                      <Button size="small" disabled={drawerRoom?.status === 'archived'}>批量生成</Button>
                    </Popconfirm>
                  </div>
                  <Table
                    dataSource={lockers}
                    rowKey="id"
                    pagination={false}
                    size="small"
                    columns={[
                      { title: '编号', dataIndex: 'lockerNumber', width: 80 },
                      {
                        title: '状态', dataIndex: 'status', width: 80,
                        render: (s: string) => {
                          const map: Record<string, { text: string; color: string }> = {
                            available: { text: '空闲', color: 'green' },
                            occupied: { text: '占用', color: 'blue' },
                            maintenance: { text: '维修', color: 'orange' },
                          };
                          return <Tag color={map[s]?.color}>{map[s]?.text || s}</Tag>;
                        },
                      },
                      { title: '备注', dataIndex: 'notes', render: (v: string) => v || '-' },
                      {
                        title: '操作', width: 120,
                        render: (_: any, r: any) => (
                          <Space size="small">
                            <PermissionButton
                              permission="room:edit"
                              size="small"
                              type="link"
                              disabled={drawerRoom?.status === 'archived'}
                              onClick={() => { setLockerEditing(r); lockerForm.setFieldsValue(r); setLockerModalOpen(true); }}
                            >
                              编辑
                            </PermissionButton>
                            {r.status !== 'occupied' && (
                              <Popconfirm title="确定归档？" onConfirm={() => handleDeleteLocker(r.id)}>
                                <PermissionButton
                                  permission="room:edit"
                                  size="small"
                                  type="link"
                                  danger
                                  disabled={drawerRoom?.status === 'archived'}
                                >
                                  归档
                                </PermissionButton>
                              </Popconfirm>
                            )}
                          </Space>
                        ),
                      },
                    ]}
                  />
                </div>
              ),
            },
          ]}
        />
      </Drawer>

      <Modal
        title={bedEditing ? '编辑床位' : '添加床位'}
        open={bedModalOpen}
        onOk={handleSaveBed}
        onCancel={() => { setBedModalOpen(false); setBedEditing(null); }}
        confirmLoading={savingBed}
        okText="保存"
      >
        <Form form={bedForm} layout="vertical">
          <Form.Item name="bedNumber" label="床位编号" rules={[{ required: true }]}>
            <Input placeholder="如：1号床" />
          </Form.Item>
          <Form.Item name="status" label="状态">
            <Select
              options={[
                { value: 'available', label: '空闲' },
                { value: 'maintenance', label: '维修中' },
              ]}
              placeholder="默认为空闲"
            />
          </Form.Item>
          <Form.Item name="notes" label="备注">
            <Input.TextArea rows={2} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={lockerEditing ? '编辑柜子' : '添加柜子'}
        open={lockerModalOpen}
        onOk={handleSaveLocker}
        onCancel={() => { setLockerModalOpen(false); setLockerEditing(null); }}
        confirmLoading={savingLocker}
        okText="保存"
      >
        <Form form={lockerForm} layout="vertical">
          <Form.Item name="lockerNumber" label="柜子编号" rules={[{ required: true }]}>
            <Input placeholder="如：1号柜" />
          </Form.Item>
          <Form.Item name="status" label="状态">
            <Select
              options={[
                { value: 'available', label: '空闲' },
                { value: 'maintenance', label: '维修中' },
              ]}
              placeholder="默认为空闲"
            />
          </Form.Item>
          <Form.Item name="notes" label="备注">
            <Input.TextArea rows={2} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default RoomsPage;
