import React, { useEffect, useState, useMemo } from 'react';
import {
  Table,
  Button,
  Modal,
  Form,
  Input,
  InputNumber,
  Select,
  Space,
  message,
  Tag,
  Popconfirm,
  Upload,
  Tooltip,
  Empty,
} from 'antd';
import {
  PlusOutlined,
  UploadOutlined,
  DownloadOutlined,
  UndoOutlined,
  InboxOutlined,
} from '@ant-design/icons';
import api from '../../api';
import PermissionButton from '../../components/PermissionButton';

const statusMap: Record<string, { text: string; color: string }> = {
  available: { text: '可用', color: 'green' },
  in_use: { text: '使用中', color: 'blue' },
  reserved: { text: '已预留', color: 'purple' },
  maintenance: { text: '维护中', color: 'orange' },
  archived: { text: '已归档', color: '#999' },
};

interface CurrentUsage {
  type: 'schedule' | 'rental';
  title: string;
  startTime: string;
  endTime: string;
}

const typeColor: Record<string, string> = {
  大: 'volcano',
  次大: 'geekblue',
  小: 'cyan',
};

const ClassroomsPage: 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 [form] = Form.useForm();
  const [searchText, setSearchText] = useState('');
  const [filterStatus, setFilterStatus] = useState<string | undefined>(undefined);

  const [saving, setSaving] = useState(false);

  const filteredData = useMemo(() => {
    let result = data;
    if (searchText) { const s = searchText.toLowerCase(); result = result.filter((d: Record<string, unknown>) => (typeof d.name === 'string' && d.name.toLowerCase().includes(s)) || (typeof d.building === 'string' && d.building.toLowerCase().includes(s))); }
    if (filterStatus) result = result.filter((d: Record<string, unknown>) => d.status === filterStatus);
    return result;
  }, [data, searchText, filterStatus]);

  const fetchData = async () => {
    setLoading(true);
    try {
      const res: any = await api.get('/classrooms', { params: { includeArchived: showArchived } });
      setData(res);
    } catch (e: any) {
      message.error(e?.message || '加载失败，请稍后重试');
    }
    setLoading(false);
  };

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

  const handleSave = async () => {
    const values = await form.validateFields();
    setSaving(true);
    try {
      if (editing) {
        await api.put(`/classrooms/${editing.id}`, values);
        message.success('更新成功');
      } else {
        await api.post('/classrooms', values);
        message.success('创建成功');
      }
      setModalOpen(false);
      form.resetFields();
      setEditing(null);
      fetchData();
    } catch (e: any) {
      message.error(e?.message || '操作失败');
    } finally {
      setSaving(false);
    }
  };

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

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

  const handleDownloadTemplate = () => {
    const baseURL = import.meta.env.PROD
      ? '/api'
      : `http://localhost:${import.meta.env.VITE_API_PORT || 3002}/api`;
    const token = localStorage.getItem('token');
    fetch(`${baseURL}/classrooms/template`, { headers: { Authorization: `Bearer ${token}` } })
      .then((res) => res.blob())
      .then((blob) => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '教室导入模板.xlsx';
        a.click();
        URL.revokeObjectURL(url);
      })
      .catch(() => message.error('下载失败'));
  };

  const columns = useMemo(() => [
    {
      title: '教室名', width: 120,
      dataIndex: 'name',
      sorter: (a: any, b: any) => a.name.localeCompare(b.name),
    },
    { title: '楼栋', dataIndex: 'building', width: 80 },
    { title: '楼层', dataIndex: 'floor', width: 80 },
    {
      title: '类型', width: 90,
      dataIndex: 'roomType',
      render: (v: string) => <Tag color={typeColor[v] || 'default'}>{v || '-'}</Tag>,
    },
    { title: '容量', dataIndex: 'capacity', width: 80 },
    { title: '课程类型', dataIndex: 'courseType', width: 100, render: (v: string) => v || '-' },
    { title: '负责人', dataIndex: 'supervisor', width: 100, render: (v: string) => v || '-' },
    {
      title: '状态', width: 100,
      dataIndex: 'status',
      render: (s: string, record: { currentUsage?: CurrentUsage | null }) => {
        const effectiveStatus = record.currentUsage ? 'in_use' : s;
        return (
          <Tooltip title={record.currentUsage ? `${record.currentUsage.title} (${record.currentUsage.startTime}-${record.currentUsage.endTime})` : undefined}>
            <Tag color={statusMap[effectiveStatus]?.color}>{statusMap[effectiveStatus]?.text || s}</Tag>
          </Tooltip>
        );
      },
    },
    {
      title: '操作',
      width: 180,
      render: (_: any, record: any) => (
        <Space>
          {record.status === 'archived' ? (
            <Popconfirm title="确定恢复此教室？" onConfirm={() => handleRestore(record.id)}>
              <PermissionButton permission="classroom:edit" size="small" icon={<UndoOutlined />} type="link">
                恢复
              </PermissionButton>
            </Popconfirm>
          ) : (
            <>
              <PermissionButton
                permission="classroom:edit"
                size="small"
                onClick={() => {
                  setEditing(record);
                  form.setFieldsValue(record);
                  setModalOpen(true);
                }}
              >
                编辑
              </PermissionButton>
              <Popconfirm
                title="归档后数据保留，可随时恢复。存在进行中的租赁将无法归档。"
                onConfirm={() => handleArchive(record.id)}
                okText="归档"
                cancelText="取消"
              >
                <PermissionButton permission="classroom:delete" size="small" icon={<InboxOutlined />}>
                  归档
                </PermissionButton>
              </Popconfirm>
            </>
          )}
        </Space>
      ),
    },
  ], []);

  return (
    <div>
      <div
        style={{
          marginBottom: 16,
          display: 'flex',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: 8,
        }}
      >
        <Space wrap>
          <Input.Search
            placeholder="搜索教室名/楼栋"
            allowClear
            style={{ width: 180 }}
            onSearch={(v) => setSearchText(v)}
            onChange={(e) => {
              if (!e.target.value) setSearchText('');
            }}
          />
          <Select placeholder="状态" allowClear style={{ width: 110 }} value={filterStatus} onChange={setFilterStatus} options={[{value:'available',label:'可用'},{value:'in_use',label:'使用中'},{value:'reserved',label:'已预留'},{value:'maintenance',label:'维护中'}]} />
          <Button
            type={showArchived ? 'primary' : 'default'}
            onClick={() => setShowArchived(!showArchived)}
          >
            {showArchived ? '隐藏已归档' : '显示已归档'}
          </Button>
        </Space>
        <Space wrap>
          <PermissionButton
            permission="classroom:create"
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              setEditing(null);
              form.resetFields();
              setModalOpen(true);
            }}
          >
            添加教室
          </PermissionButton>
          <PermissionButton permission="classroom:view" icon={<DownloadOutlined />} onClick={() => { const baseURL = '/api'; const token = localStorage.getItem('token'); fetch(`${baseURL}/classrooms/export`, { headers: { Authorization: `Bearer ${token}` } }).then(r => r.blob()).then(b => { const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = '教室使用报表.xlsx'; a.click(); }); }}>导出报表</PermissionButton>
          <Upload
            accept=".xlsx,.xls"
            showUploadList={false}
            customRequest={async ({ file, onSuccess, onError }: any) => {
              const formData = new FormData();
              formData.append('file', file);
              try {
                const res: any = await api.post('/classrooms/import', formData, {
                  headers: { 'Content-Type': 'multipart/form-data' },
                });
                message.success(res.message);
                onSuccess?.(res);
                fetchData();
              } catch (e: any) {
                message.error(e?.message || '导入失败');
                onError?.(e);
              }
            }}
          >
            <Button icon={<UploadOutlined />}>导入Excel</Button>
          </Upload>
          <PermissionButton
            permission="classroom:view"
            icon={<DownloadOutlined />}
            onClick={handleDownloadTemplate}
          >
            下载模板
          </PermissionButton>
        </Space>
      </div>
      <Table
        scroll={{ x: 1100 }}
        columns={columns}
        dataSource={filteredData}
        rowKey="id"
        loading={loading}
        locale={{ emptyText: <Empty description="暂无数据" /> }}
        pagination={{ pageSize: 20, showTotal: (total) => `共 ${total} 条` }}
      />
      <Modal
        title={editing ? '编辑教室' : '添加教室'}
        open={modalOpen}
        onOk={handleSave}
        onCancel={() => {
          setModalOpen(false);
          setEditing(null);
        }}
        confirmLoading={saving}
        okText="保存"
      >
        <Form form={form} layout="vertical">
          <Form.Item name="name" label="教室名" rules={[{ required: true }]}>
            <Input placeholder="如：A201 / B301" />
          </Form.Item>
          <Form.Item name="building" label="楼栋">
            <Input placeholder="如：A座 / B座" />
          </Form.Item>
          <Form.Item name="floor" label="楼层">
            <InputNumber min={1} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="roomType" label="类型" tooltip="大/次大/小 对应可容纳规模">
            <Select
              options={[
                { value: '大', label: '大' },
                { value: '次大', label: '次大' },
                { value: '小', label: '小' },
              ]}
              placeholder="选择类型"
            />
          </Form.Item>
          <Form.Item name="capacity" label="容量">
            <InputNumber min={1} max={500} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="courseType" label="课程类型" tooltip="如：尊享培优班 / 专业课集训班">
            <Input />
          </Form.Item>
          <Form.Item name="supervisor" label="负责人/班主任">
            <Input />
          </Form.Item>
          <Form.Item name="notes" label="备注">
            <Input.TextArea rows={2} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ClassroomsPage;