import React, { useEffect, useMemo, useState } from 'react';
import { Alert, Empty, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag } from 'antd';
import { BankOutlined, InboxOutlined, PlusOutlined, UndoOutlined } from '@ant-design/icons';
import api from '../../api';
import PermissionButton from '../../components/PermissionButton';
import EditableCell from '../../components/EditableCell';
import { message } from '../../ui/app-message';

const PRESET_COLORS = [
  '#ff7875',
  '#ffa940',
  '#ffc53d',
  '#73d13d',
  '#36cfc9',
  '#40a9ff',
  '#597ef7',
  '#9254de',
  '#f759ab',
  '#8c8c8c',
];

interface OrganizationItem {
  id: number;
  code: string;
  name: string;
  isHost: boolean;
  contactName?: string;
  phone?: string;
  color?: string;
  notes?: string;
  status: 'active' | 'archived';
}

const OrganizationsPage: React.FC = () => {
  const [data, setData] = useState<OrganizationItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<OrganizationItem | null>(null);
  const [form] = Form.useForm();
  const [saving, setSaving] = useState(false);
  const [searchText, setSearchText] = useState('');
  const [filterStatus, setFilterStatus] = useState<string>();

  const filteredData = useMemo(() => {
    const keyword = searchText.trim().toLowerCase();
    return data.filter((item) => {
      const matchesKeyword =
        !keyword ||
        item.name.toLowerCase().includes(keyword) ||
        item.code.toLowerCase().includes(keyword) ||
        item.contactName?.toLowerCase().includes(keyword);
      return matchesKeyword && (!filterStatus || item.status === filterStatus);
    });
  }, [data, searchText, filterStatus]);

  const fetchData = async () => {
    setLoading(true);
    try {
      setData(
        await api.get<OrganizationItem[]>('/organizations', { params: { includeArchived: true } }),
      );
    } catch (error: any) {
      message.error(error?.message || '机构数据加载失败');
    } finally {
      setLoading(false);
    }
  };

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

  const openEditor = (record?: OrganizationItem) => {
    setEditing(record ?? null);
    form.resetFields();
    if (record) form.setFieldsValue(record);
    else form.setFieldsValue({ color: PRESET_COLORS[data.length % PRESET_COLORS.length] });
    setModalOpen(true);
  };

  const handleSave = async () => {
    const values = await form.validateFields();
    setSaving(true);
    try {
      if (editing) await api.put(`/organizations/${editing.id}`, values);
      else await api.post('/organizations', values);
      message.success(editing ? '机构已更新' : '机构已创建');
      setModalOpen(false);
      await fetchData();
    } catch (error: any) {
      message.error(error?.message || '保存失败');
    } finally {
      setSaving(false);
    }
  };

  const saveCell = async (record: OrganizationItem, field: string, value: unknown) => {
    await api.put(`/organizations/${record.id}`, { [field]: value });
    message.success('已保存');
    await fetchData();
  };

  const columns = [
    {
      title: '机构',
      dataIndex: 'name',
      width: 220,
      render: (name: string, record: OrganizationItem) => (
        <EditableCell
          value={name}
          required
          permission="organization:edit"
          disabled={record.status === 'archived'}
          onSave={(next) => saveCell(record, 'name', next)}
        >
          <Space>
            <span
              style={{
                width: 10,
                height: 10,
                borderRadius: '50%',
                background: record.color || '#8c8c8c',
              }}
            />
            <strong>{name}</strong>
            {record.isHost ? (
              <Tag color="blue" icon={<BankOutlined />}>
                本机构
              </Tag>
            ) : (
              <Tag>外部机构</Tag>
            )}
          </Space>
        </EditableCell>
      ),
    },
    {
      title: '机构编码',
      dataIndex: 'code',
      width: 130,
      render: (value: string, record: OrganizationItem) => (
        <EditableCell
          value={value}
          required
          permission="organization:edit"
          disabled={record.status === 'archived'}
          onSave={(next) => saveCell(record, 'code', next)}
        >
          <code>{value}</code>
        </EditableCell>
      ),
    },
    {
      title: '联系人',
      dataIndex: 'contactName',
      width: 120,
      render: (value: string | undefined, record: OrganizationItem) => (
        <EditableCell
          value={value}
          permission="organization:edit"
          disabled={record.status === 'archived'}
          onSave={(next) => saveCell(record, 'contactName', next)}
        >
          {value || '-'}
        </EditableCell>
      ),
    },
    {
      title: '电话',
      dataIndex: 'phone',
      width: 140,
      render: (value: string | undefined, record: OrganizationItem) => (
        <EditableCell
          value={value}
          permission="organization:edit"
          disabled={record.status === 'archived'}
          onSave={(next) => saveCell(record, 'phone', next)}
        >
          {value || '-'}
        </EditableCell>
      ),
    },
    {
      title: '备注',
      dataIndex: 'notes',
      ellipsis: true,
      render: (value: string | undefined, record: OrganizationItem) => (
        <EditableCell
          value={value}
          editor="textarea"
          permission="organization:edit"
          disabled={record.status === 'archived'}
          onSave={(next) => saveCell(record, 'notes', next)}
        >
          {value || '-'}
        </EditableCell>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 90,
      render: (status: string) => (
        <Tag color={status === 'active' ? 'green' : 'default'}>
          {status === 'active' ? '正常' : '已归档'}
        </Tag>
      ),
    },
    {
      title: '操作',
      width: 160,
      render: (_: unknown, record: OrganizationItem) => (
        <Space>
          {record.status === 'archived' ? (
            <Popconfirm
              title="确定恢复此机构？"
              onConfirm={async () => {
                try {
                  await api.put(`/organizations/${record.id}`, { status: 'active' });
                  message.success('机构已恢复');
                  await fetchData();
                } catch (error: any) {
                  message.error(error?.message || '恢复失败');
                }
              }}
            >
              <PermissionButton
                permission="organization:edit"
                size="small"
                type="link"
                icon={<UndoOutlined />}
              >
                恢复
              </PermissionButton>
            </Popconfirm>
          ) : (
            <>
              <PermissionButton
                permission="organization:edit"
                size="small"
                onClick={() => openEditor(record)}
              >
                编辑
              </PermissionButton>
              {!record.isHost ? (
                <Popconfirm
                  title="归档后仍保留历史学生、入住和租赁记录"
                  onConfirm={async () => {
                    try {
                      await api.delete(`/organizations/${record.id}`);
                      message.success('机构已归档');
                      await fetchData();
                    } catch (error: any) {
                      message.error(error?.message || '归档失败');
                    }
                  }}
                >
                  <PermissionButton
                    permission="organization:delete"
                    size="small"
                    icon={<InboxOutlined />}
                  >
                    归档
                  </PermissionButton>
                </Popconfirm>
              ) : null}
            </>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Alert
        type="info"
        showIcon
        message="统一机构管理"
        description="本机构与外部机构使用同一套资料。学生明确归属机构；教室租赁则单独记录出租机构和承租机构。"
        style={{ marginBottom: 16 }}
      />
      <div
        style={{
          marginBottom: 16,
          display: 'flex',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: 8,
        }}
      >
        <Space wrap>
          <Input.Search
            placeholder="搜索名称、编码或联系人"
            allowClear
            style={{ width: 260 }}
            onChange={(event) => setSearchText(event.target.value)}
          />
          <Select
            placeholder="全部状态"
            allowClear
            style={{ width: 120 }}
            value={filterStatus}
            onChange={setFilterStatus}
            options={[
              { value: 'active', label: '正常' },
              { value: 'archived', label: '已归档' },
            ]}
          />
        </Space>
        <PermissionButton
          permission="organization:create"
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => openEditor()}
        >
          添加机构
        </PermissionButton>
      </div>
      <Table
        columns={columns}
        dataSource={filteredData}
        rowKey="id"
        loading={loading}
        locale={{ emptyText: <Empty description="暂无机构" /> }}
        scroll={{ x: 1100 }}
        pagination={{
          defaultPageSize: 20,
          showSizeChanger: true,
          pageSizeOptions: [20, 50, 100],
          showTotal: (total) => `共 ${total} 个机构`,
        }}
      />
      <Modal
        title={editing ? `编辑机构 · ${editing.name}` : '添加外部机构'}
        open={modalOpen}
        onOk={handleSave}
        onCancel={() => setModalOpen(false)}
        confirmLoading={saving}
        okText="保存"
      >
        <Form form={form} layout="vertical">
          {editing?.isHost ? (
            <Alert
              type="warning"
              showIcon
              message="这是系统本机构，不可归档，也不能改为外部机构。"
              style={{ marginBottom: 16 }}
            />
          ) : null}
          <Form.Item
            name="name"
            label="机构名称"
            rules={[{ required: true, message: '请输入机构名称' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="code"
            label="机构编码"
            tooltip="用于导入和系统识别，建议使用大写英文、数字、下划线或短横线"
            rules={[
              { required: true },
              { pattern: /^[A-Z0-9_-]+$/, message: '仅支持大写英文、数字、下划线和短横线' },
            ]}
          >
            <Input
              disabled={editing?.isHost}
              placeholder="如 PARTNER_A"
              onChange={(event) => form.setFieldValue('code', event.target.value.toUpperCase())}
            />
          </Form.Item>
          <Form.Item name="contactName" label="联系人">
            <Input />
          </Form.Item>
          <Form.Item name="phone" label="电话">
            <Input />
          </Form.Item>
          <Form.Item name="color" label="识别颜色">
            <Space wrap>
              {PRESET_COLORS.map((color) => (
                <button
                  type="button"
                  key={color}
                  aria-label={`选择 ${color}`}
                  onClick={() => form.setFieldValue('color', color)}
                  style={{
                    width: 30,
                    height: 30,
                    borderRadius: 6,
                    border: '1px solid #d9d9d9',
                    background: color,
                    cursor: 'pointer',
                  }}
                />
              ))}
            </Space>
          </Form.Item>
          <Form.Item name="notes" label="备注">
            <Input.TextArea rows={3} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default OrganizationsPage;