import { useCallback, useEffect, useMemo, useState } from 'react';
import {
  App as AntdApp,
  Button,
  Drawer,
  Form,
  Input,
  InputNumber,
  Select,
  Space,
  TreeSelect,
} from 'antd';
import { createOrg, updateOrg } from '../server';
import type { DepartmentFormValues, OrgVO } from '../types';
import { toOrgTreeSelectData } from '../utils';

interface DepartmentFormDrawerProps {
  open: boolean;
  mode: 'create' | 'edit';
  /** 编辑对象；新增时为空。 */
  record: OrgVO | null;
  /** 新增子部门时的上级组织 ID。 */
  parentId?: number;
  /** 组织树，用于上级组织选择。 */
  orgTree: OrgVO[];
  /** 负责人员工下拉选项。 */
  leaderOptions: { label: string; value: number }[];
  onClose: () => void;
  onSuccess: () => void;
}

const DepartmentFormDrawer = ({
  open,
  mode,
  record,
  parentId,
  orgTree,
  leaderOptions,
  onClose,
  onSuccess,
}: DepartmentFormDrawerProps) => {
  const [form] = Form.useForm<DepartmentFormValues>();
  const [submitting, setSubmitting] = useState(false);
  const { message } = AntdApp.useApp();
  const isEdit = mode === 'edit';

  const parentOptions = useMemo(
    () => toOrgTreeSelectData(orgTree, isEdit ? record?.id : undefined),
    [isEdit, orgTree, record],
  );

  useEffect(() => {
    if (!open) return;

    form.resetFields();
    form.setFieldsValue(
      isEdit && record
        ? {
            orgName: record.orgName,
            orgType: record.orgType ?? 'DEPT',
            parentId: record.parentId ?? undefined,
            leaderId: record.leaderId ?? undefined,
            region: record.region,
            sortOrder: record.sortOrder,
          }
        : {
            orgType: 'DEPT',
            parentId,
          },
    );
  }, [form, isEdit, open, parentId, record]);

  const handleSubmit = useCallback(async () => {
    let values: DepartmentFormValues;
    try {
      values = await form.validateFields();
    } catch {
      return;
    }

    setSubmitting(true);

    try {
      if (isEdit && record) {
        await updateOrg({ id: record.id, ...values });
        message.success('部门已更新');
      } else {
        await createOrg(values);
        message.success('部门创建成功');
      }

      onSuccess();
    } catch {
      // 错误已由 request 统一提示
    } finally {
      setSubmitting(false);
    }
  }, [form, isEdit, message, onSuccess, record]);

  const title = isEdit ? '编辑部门' : parentId ? '新增子部门' : '新增部门';

  return (
    <Drawer
      title={title}
      width={420}
      open={open}
      forceRender
      onClose={onClose}
      footer={
        <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <Button onClick={onClose}>取消</Button>
          <Button type="primary" loading={submitting} onClick={handleSubmit}>
            {isEdit ? '保存' : '创建'}
          </Button>
        </Space>
      }
    >
      <Form form={form} layout="vertical" preserve={false}>
        <Form.Item
          name="orgName"
          label="部门名称"
          rules={[{ required: true, whitespace: true, message: '请输入部门名称' }]}
        >
          <Input placeholder="请输入部门名称" maxLength={50} />
        </Form.Item>
        <Form.Item
          name="orgType"
          label="组织类型"
          rules={[{ required: true, message: '请选择组织类型' }]}
        >
          <Select
            placeholder="请选择组织类型"
            options={[
              { label: '总部', value: 'HQ' },
              { label: '分公司', value: 'BRANCH' },
              { label: '经销商', value: 'DEALER' },
              { label: '代理商', value: 'AGENT' },
              { label: '部门', value: 'DEPT' },
              { label: '团队', value: 'TEAM' },
            ]}
          />
        </Form.Item>
        <Form.Item name="parentId" label="上级组织">
          <TreeSelect
            treeData={parentOptions}
            treeDefaultExpandAll
            allowClear
            showSearch
            treeNodeFilterProp="title"
            placeholder="不选则作为根组织"
            style={{ width: '100%' }}
          />
        </Form.Item>
        <Form.Item name="leaderId" label="负责人">
          <Select
            options={leaderOptions}
            showSearch
            optionFilterProp="label"
            allowClear
            placeholder="请选择负责人"
          />
        </Form.Item>
        <Form.Item name="region" label="所在地区">
          <Input placeholder="请输入所在地区" maxLength={50} />
        </Form.Item>
        <Form.Item name="sortOrder" label="同级排序">
          <InputNumber
            min={0}
            precision={0}
            placeholder="数字越小越靠前"
            style={{ width: '100%' }}
          />
        </Form.Item>
      </Form>
    </Drawer>
  );
};

export default DepartmentFormDrawer;