import { useCallback, useEffect, useMemo, useState } from 'react';
import { ProFormSelect, ProFormTreeSelect } from '@ant-design/pro-components';
import {
  App as AntdApp,
  Button,
  Drawer,
  Form,
  Input,
  InputNumber,
  Select,
  Space,
} from 'antd';
import { createOrg, getLeaderDetail, getLeaderOptions, 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[];
  onClose: () => void;
  onSuccess: () => void;
}

const DepartmentFormDrawer = ({
  open,
  mode,
  record,
  parentId,
  orgTree,
  onClose,
  onSuccess,
}: DepartmentFormDrawerProps) => {
  const [form] = Form.useForm<DepartmentFormValues>();
  const [submitting, setSubmitting] = useState(false);
  const { message } = AntdApp.useApp();
  const isEdit = mode === 'edit';
  /** 新增入口只有「新增子部门」，上级组织已确定，不允许再选择。 */
  const parentDisabled = !isEdit;

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

  /** 负责人远程搜索：按姓名 / 手机号模糊查询员工。 */
  const requestLeaderOptions = useCallback(
    async ({ keyWords }: { keyWords?: string }) => {
      const keyword = keyWords?.trim();
      const result = await getLeaderOptions({
        page: 1,
        size: 50,
        keyword: keyword || undefined,
      });
      const options = (result.records ?? []).map((employee) => ({
        label: employee.name,
        value: employee.id,
      }));

      // 编辑时把当前负责人补进首屏选项，避免回填后显示为员工 ID。
      const currentLeaderId = isEdit ? record?.leaderId : undefined;
      if (
        !keyword &&
        currentLeaderId &&
        !options.some((option) => option.value === currentLeaderId)
      ) {
        try {
          const leader = await getLeaderDetail({ id: currentLeaderId });
          options.unshift({ label: leader.name, value: leader.id });
        } catch {
          // 错误已由 request 统一提示
        }
      }

      return options;
    },
    [isEdit, 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 ? '编辑部门' : '新增子部门';

  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>
        <ProFormTreeSelect
          name="parentId"
          label="上级组织"
          placeholder="不选则作为根组织"
          disabled={parentDisabled}
          fieldProps={{
            treeData: parentOptions,
            treeDefaultExpandAll: true,
            allowClear: true,
            showSearch: true,
            treeNodeFilterProp: 'title',
            style: { width: '100%' },
          }}
        />
        <ProFormSelect
          name="leaderId"
          label="负责人"
          rules={isEdit ? undefined : [{ required: true, message: '请选择负责人' }]}
          placeholder="请输入姓名搜索负责人"
          showSearch
          allowClear
          debounceTime={300}
          request={requestLeaderOptions}
          fieldProps={{ filterOption: false, style: { width: '100%' } }}
        />
        <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;