import React, { useEffect, useMemo, useState } from 'react';
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Tag, Typography, message } from 'antd';
import { DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined, AppstoreOutlined } from '@ant-design/icons';
import { SycmCard } from '../../components/Common';
import {
  createDepartment,
  deleteDepartment,
  getDepartmentPagePermissions,
  getDepartments,
  updateDepartment,
  updateDepartmentPagePermissions,
} from '../../api/admin';

const { Text } = Typography;

const DEPARTMENT_SOURCE_META = {
  dingtalk: { color: 'blue', label: '钉钉同步' },
  hr: { color: 'cyan', label: 'HR同步' },
  local: { color: 'default', label: '本地' },
};

const DepartmentManagement = () => {
  const [departments, setDepartments] = useState([]);
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [permissionSaving, setPermissionSaving] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [permissionVisible, setPermissionVisible] = useState(false);
  const [editingDepartment, setEditingDepartment] = useState(null);
  const [permissionDepartment, setPermissionDepartment] = useState(null);
  const [pagePermissions, setPagePermissions] = useState([]);
  const [form] = Form.useForm();

  const departmentMap = useMemo(() => {
    return departments.reduce((acc, item) => {
      acc[item.id] = item;
      return acc;
    }, {});
  }, [departments]);

  const fetchDepartments = async () => {
    try {
      setLoading(true);
      const data = await getDepartments();
      setDepartments(Array.isArray(data) ? data : []);
    } catch (error) {
      message.error(error.response?.data?.error || '获取部门列表失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchDepartments();
  }, []);

  const openCreateModal = () => {
    setEditingDepartment(null);
    form.resetFields();
    form.setFieldsValue({
      sort: 0,
      status: 'active',
    });
    setModalVisible(true);
  };

  const openEditModal = (record) => {
    setEditingDepartment(record);
    form.setFieldsValue({
      name: record.name,
      code: record.code,
      parentId: record.parentId || undefined,
      sort: record.sort,
      status: record.status,
    });
    setModalVisible(true);
  };

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      setSaving(true);
      if (editingDepartment) {
        await updateDepartment(editingDepartment.id, values);
        message.success('部门信息已更新');
      } else {
        await createDepartment(values);
        message.success('部门已创建');
      }
      setModalVisible(false);
      fetchDepartments();
    } catch (error) {
      if (!error?.errorFields) {
        message.error(error.response?.data?.error || '保存部门失败');
      }
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id) => {
    try {
      await deleteDepartment(id);
      message.success('部门已删除');
      fetchDepartments();
    } catch (error) {
      message.error(error.response?.data?.error || '删除部门失败');
    }
  };

  const openPermissionModal = async (record) => {
    try {
      setPermissionDepartment(record);
      const data = await getDepartmentPagePermissions(record.id);
      setPagePermissions(Array.isArray(data.permissions) ? data.permissions : []);
      setPermissionVisible(true);
    } catch (error) {
      message.error(error.response?.data?.error || '获取部门功能页面失败');
    }
  };

  const handlePermissionToggle = (pageKey, allowed) => {
    setPagePermissions((prev) =>
      prev.map((item) => (item.pageKey === pageKey ? { ...item, allowed } : item))
    );
  };

  const handleSavePermissions = async () => {
    if (!permissionDepartment) {
      return;
    }

    try {
      setPermissionSaving(true);
      await updateDepartmentPagePermissions(permissionDepartment.id, {
        permissions: pagePermissions.map((item) => ({
          pageKey: item.pageKey,
          allowed: item.allowed,
        })),
      });
      message.success('部门功能页面权限已更新');
      setPermissionVisible(false);
    } catch (error) {
      message.error(error.response?.data?.error || '更新部门功能页面失败');
    } finally {
      setPermissionSaving(false);
    }
  };

  const columns = [
    {
      title: '部门名称',
      dataIndex: 'name',
      width: 220,
    },
    {
      title: '编码',
      dataIndex: 'code',
      width: 160,
    },
    {
      title: '上级部门',
      dataIndex: 'parentId',
      width: 180,
      render: (value) => (value && departmentMap[value] ? departmentMap[value].name : '顶级部门'),
    },
    {
      title: '来源',
      dataIndex: 'source',
      width: 120,
      render: (value) => {
        const sourceMeta = DEPARTMENT_SOURCE_META[value] || { color: 'default', label: value || '未知' };
        return <Tag color={sourceMeta.color}>{sourceMeta.label}</Tag>;
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 120,
      render: (value) => <Tag color={value === 'active' ? 'success' : 'default'}>{value === 'active' ? '启用' : '停用'}</Tag>,
    },
    {
      title: '排序',
      dataIndex: 'sort',
      width: 90,
    },
    {
      title: '操作',
      key: 'actions',
      width: 260,
      render: (_, record) => {
        return (
          <Space>
            <Button type="link" size="small" icon={<AppstoreOutlined />} onClick={() => openPermissionModal(record)}>
              功能页面
            </Button>
            {record.source === 'local' && (
              <Button type="link" size="small" icon={<EditOutlined />} onClick={() => openEditModal(record)}>
                编辑
              </Button>
            )}
            {record.source === 'local' && (
              <Popconfirm title="确定删除该部门吗？" onConfirm={() => handleDelete(record.id)}>
                <Button type="link" size="small" danger icon={<DeleteOutlined />}>
                  删除
                </Button>
              </Popconfirm>
            )}
            {record.source !== 'local' && <Text type="secondary">同步部门</Text>}
          </Space>
        );
      },
    },
  ];

  return (
    <div className="settings-tab-page">
      <SycmCard bodyStyle={{ padding: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 12 }}>
          <Space wrap>
            <Button icon={<ReloadOutlined />} onClick={fetchDepartments}>
              刷新
            </Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreateModal}>
              新增部门
            </Button>
          </Space>
        </div>

        <Table rowKey="id" columns={columns} dataSource={departments} loading={loading} pagination={false} scroll={{ x: 920 }} />
      </SycmCard>

      <Modal
        title={editingDepartment ? '编辑部门' : '新增部门'}
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        onOk={handleSave}
        confirmLoading={saving}
      >
        <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item label="部门名称" name="name" rules={[{ required: true, message: '请输入部门名称' }]}>
            <Input />
          </Form.Item>
          <Form.Item label="部门编码" name="code" rules={[{ required: true, message: '请输入部门编码' }]}>
            <Input />
          </Form.Item>
          <Form.Item label="上级部门" name="parentId">
            <Select
              allowClear
              placeholder="请选择上级部门"
              options={departments
                .filter((item) => item.source === 'local' && item.id !== editingDepartment?.id)
                .map((item) => ({
                  value: item.id,
                  label: item.name,
                }))}
            />
          </Form.Item>
          <Form.Item label="排序" name="sort">
            <InputNumber min={0} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="状态" name="status">
            <Select
              options={[
                { value: 'active', label: '启用' },
                { value: 'inactive', label: '停用' },
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={permissionDepartment ? `${permissionDepartment.name} - 功能页面权限` : '功能页面权限'}
        open={permissionVisible}
        onCancel={() => setPermissionVisible(false)}
        onOk={handleSavePermissions}
        confirmLoading={permissionSaving}
        width={640}
      >
        <div style={{ marginTop: 12 }}>
          <Text type="secondary">开启后，该部门下的用户在侧边栏中可以看到对应功能页面；管理员角色不受部门侧限制。</Text>
          <div style={{ marginTop: 20, display: 'grid', gap: 12 }}>
            {pagePermissions.map((item) => (
              <div
                key={item.pageKey}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  padding: '12px 14px',
                  borderRadius: 'var(--sycm-radius-lg)',
                  background: 'var(--sycm-bg-subtle)',
                }}
              >
                <div>
                  <div style={{ fontWeight: 600 }}>{item.pageName}</div>
                  <Text type="secondary">{item.path}</Text>
                </div>
                <Switch checked={Boolean(item.allowed)} onChange={(value) => handlePermissionToggle(item.pageKey, value)} />
              </div>
            ))}
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default DepartmentManagement;