import { productcontrollerSearchproducts } from '@/servers/api/product';
import {
  stockcontrollerCanceltransfer,
  stockcontrollerCreatetransfer,
  stockcontrollerGetallstockpoints,
  stockcontrollerGettransfers,
  stockcontrollerLosttransfer,
  stockcontrollerReceivetransfer,
  stockcontrollerUpdatetransfer,
} from '@/servers/api/stock';
import { EditOutlined, PlusOutlined } from '@ant-design/icons';
import {
  ActionType,
  DrawerForm,
  PageContainer,
  ProColumns,
  ProForm,
  ProFormDatePicker,
  ProFormDependency,
  ProFormDigit,
  ProFormList,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProTable,
} from '@ant-design/pro-components';
import { App, Button, Divider, Form, Popconfirm } from 'antd';
import { useRef } from 'react';

const TransferPage: React.FC = () => {
  const { message } = App.useApp();
  const actionRef = useRef<ActionType>();
  const columns: ProColumns[] = [
    {
      title: '订单编号',
      dataIndex: 'orderNumber',
    },
    {
      title: '源仓库',
      dataIndex: 'sourceStockPointName',
      hideInSearch: true,
    },
    {
      title: '目标仓库',
      dataIndex: 'destStockPointName',
      hideInSearch: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch: true,
      render(_, record) {
        if (record.isLost) return '已丢失';
        if (record.isCancel) return '已取消';
        if (record.isArrived) return '已到达';
        return '运输中';
      },
    },
    {
      title: '数量',
      hideInSearch: true,
      render(_, record) {
        return record.items.reduce((cur, next) => {
          return cur + next.quantity;
        }, 0);
      },
    },
    {
      title: '备注',
      dataIndex: 'note',
      hideInSearch: true,
    },
    {
      title: '到货时间',
      dataIndex: 'arriveAt',
      valueType: 'dateTime',
      hideInSearch: true,
    },
    {
      title: '发货时间',
      dataIndex: 'sendAt',
      valueType: 'dateTime',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          {!record.isCancel && !record.isArrived && !record.isLost ? (
            <>
              <UpdateForm tableRef={actionRef} values={record} />
              <Divider type="vertical" />
              <Popconfirm
                title="入库"
                description="确认已到达？"
                onConfirm={async () => {
                  try {
                    const { success, message: errMsg } =
                      await stockcontrollerReceivetransfer({
                        id: record.id as number,
                      });
                    if (!success) {
                      throw new Error(errMsg);
                    }
                    actionRef.current?.reload();
                  } catch (error: any) {
                    message.error(error.message);
                  }
                }}
              >
                <Button type="primary">入库</Button>
              </Popconfirm>
              <Divider type="vertical" />
              <Popconfirm
                title="丢失"
                description="确认该批货已丢失？"
                onConfirm={async () => {
                  try {
                    const { success, message: errMsg } =
                      await stockcontrollerLosttransfer({
                        id: record.id as number,
                      });
                    if (!success) {
                      throw new Error(errMsg);
                    }
                    actionRef.current?.reload();
                  } catch (error: any) {
                    message.error(error.message);
                  }
                }}
              >
                <Button type="primary">丢失</Button>
              </Popconfirm>
              <Divider type="vertical" />
              <Popconfirm
                title="取消"
                description="确认取消？"
                onConfirm={async () => {
                  try {
                    const { success, message: errMsg } =
                      await stockcontrollerCanceltransfer({
                        id: record.id as number,
                      });
                    if (!success) {
                      throw new Error(errMsg);
                    }
                    actionRef.current?.reload();
                  } catch (error: any) {
                    message.error(error.message);
                  }
                }}
              >
                <Button type="primary" danger>
                  取消
                </Button>
              </Popconfirm>
            </>
          ) : (
            <DetailForm tableRef={actionRef} values={record} />
          )}
        </>
      ),
    },
  ];

  return (
    <PageContainer ghost>
      <ProTable
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="id"
        request={async (params) => {
          const { data, success } = await stockcontrollerGettransfers(params);
          return {
            total: data?.total || 0,
            data: data?.items || [],
            success,
          };
        }}
        columns={columns}
        toolBarRender={() => [<CreateForm tableRef={actionRef} />]}
      />
    </PageContainer>
  );
};

const CreateForm: React.FC<{
  tableRef: React.MutableRefObject<ActionType | undefined>;
}> = ({ tableRef }) => {
  const { message } = App.useApp();
  const [form] = Form.useForm();
  return (
    <DrawerForm
      title="新建"
      trigger={
        <Button type="primary">
          <PlusOutlined />
          新建
        </Button>
      }
      form={form}
      autoFocusFirstInput
      layout="vertical"
      drawerProps={{
        destroyOnClose: true,
      }}
      onFinish={async (values) => {
        try {
          console.log(values);
          const { success, message: errMsg } =
            await stockcontrollerCreatetransfer(values);
          if (!success) {
            throw new Error(errMsg);
          }
          tableRef.current?.reload();
          message.success('提交成功');
          return true;
        } catch (error: any) {
          message.error(error.message);
        }
      }}
    >
      <ProFormDatePicker
        name="sendAt"
        label="发货时间"
        rules={[{ required: true, message: '请选择发货时间' }]}
      />
      <ProFormSelect
        request={async () => {
          try {
            const { data } = await stockcontrollerGetallstockpoints();
            return (
              data?.map((item) => {
                return {
                  label: item.name,
                  value: item.id,
                };
              }) || []
            );
          } catch (error) {
            return [];
          }
        }}
        name="sourceStockPointId"
        label="源仓库"
        width="lg"
        placeholder="请选择仓库"
        rules={[{ required: true, message: '请选择源仓库' }]}
      />
      <ProFormSelect
        request={async () => {
          try {
            const { data } = await stockcontrollerGetallstockpoints();
            return (
              data?.map((item) => {
                return {
                  label: item.name,
                  value: item.id,
                };
              }) || []
            );
          } catch (error) {
            return [];
          }
        }}
        name="destStockPointId"
        label="目标仓库"
        width="lg"
        placeholder="请选择仓库"
        rules={[{ required: true, message: '请选择源目标仓库' }]}
      />
      <ProFormTextArea name="note" label="备注" />
      <ProFormDependency name={['items']}>
        {({ items }) => {
          return '数量：' + items?.reduce((acc, cur) => acc + cur.quantity, 0);
        }}
      </ProFormDependency>
      <ProFormList
        name="items"
        label="产品"
        rules={[
          {
            required: true,
            message: '至少需要一个商品',
            validator: (_, value) =>
              value && value.length > 0
                ? Promise.resolve()
                : Promise.reject('至少需要一个商品'),
          },
        ]}
        creatorButtonProps={{ children: '新增', size: 'large' }}
        wrapperCol={{ span: 24 }}
      >
        {(fields, idx, { remove }) => (
          <div key={idx}>
            <ProFormSelect
              request={async ({ keyWords }) => {
                if (keyWords.length < 3) return [];
                try {
                  const { data } = await productcontrollerSearchproducts({
                    name: keyWords,
                  });
                  return (
                    data?.map((item) => {
                      return {
                        label: item.name,
                        value: item.sku,
                      };
                    }) || []
                  );
                } catch (error) {
                  return [];
                }
              }}
              name="productSku"
              label={'产品' + (idx + 1)}
              width="lg"
              placeholder="请选择产品"
              tooltip="至少输入3个字符"
              fieldProps={{
                showSearch: true,
              }}
              transform={(value) => {
                return value?.value || value;
              }}
              debounceTime={300} // 防抖，减少请求频率
              rules={[{ required: true, message: '请选择产品' }]}
              onChange={(_, option) => {
                form.setFieldValue(
                  ['items', fields.key, 'productName'],
                  option.title,
                );
              }}
            />
            <ProFormText name={'productName'} label="产品名称" hidden={true} />
            <ProFormDigit
              name="quantity"
              label="数量"
              placeholder="请输入数量"
              rules={[{ required: true, message: '请输入数量' }]}
              fieldProps={{
                precision: 0,
              }}
            />
          </div>
        )}
      </ProFormList>
    </DrawerForm>
  );
};

const UpdateForm: React.FC<{
  tableRef: React.MutableRefObject<ActionType | undefined>;
  values: API.UpdatePurchaseOrderDTO & {
    id: number;
  };
}> = ({ tableRef, values }) => {
  const { message } = App.useApp();
  const [form] = Form.useForm();
  const initialValues = {
    ...values,
    items: values?.items?.map((item: API.PurchaseOrderItem) => ({
      ...item,
      productSku: {
        label: item.productName,
        value: item.productSku,
      },
    })),
  };
  return (
    <DrawerForm<API.UpdatePurchaseOrderDTO>
      title="编辑"
      form={form}
      initialValues={initialValues}
      trigger={
        <Button type="primary">
          <EditOutlined />
          编辑
        </Button>
      }
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      onFinish={async (values) => {
        try {
          const { success, message: errMsg } =
            await stockcontrollerUpdatetransfer(
              { id: initialValues.id },
              values,
            );
          if (!success) {
            throw new Error(errMsg);
          }
          message.success('提交成功');
          tableRef.current?.reload();
          return true;
        } catch (error: any) {
          message.error(error.message);
        }
      }}
    >
      <ProFormSelect
        readonly
        request={async () => {
          try {
            const { data } = await stockcontrollerGetallstockpoints();
            return (
              data?.map((item) => {
                return {
                  label: item.name,
                  value: item.id,
                };
              }) || []
            );
          } catch (error) {
            return [];
          }
        }}
        name="sourceStockPointId"
        label="源仓库"
        width="lg"
        placeholder="请选择仓库"
        rules={[{ required: true, message: '请选择源仓库' }]}
      />
      <ProFormSelect
        request={async () => {
          try {
            const { data } = await stockcontrollerGetallstockpoints();
            return (
              data?.map((item) => {
                return {
                  label: item.name,
                  value: item.id,
                };
              }) || []
            );
          } catch (error) {
            return [];
          }
        }}
        name="destStockPointId"
        label="目标仓库"
        width="lg"
        placeholder="请选择仓库"
        rules={[{ required: true, message: '请选择源目标仓库' }]}
      />
      <ProFormTextArea name="note" label="备注" />
      <ProFormDependency name={['items']}>
        {({ items }) => {
          return '数量：' + items?.reduce((acc, cur) => acc + cur.quantity, 0);
        }}
      </ProFormDependency>
      <ProFormList
        name="items"
        label="产品"
        rules={[
          {
            required: true,
            message: '至少需要一个商品',
            validator: (_, value) =>
              value && value.length > 0
                ? Promise.resolve()
                : Promise.reject('至少需要一个商品'),
          },
        ]}
        creatorButtonProps={{ children: '新增', size: 'large' }}
        wrapperCol={{ span: 24 }}
      >
        {(fields, idx, { remove }) => (
          <div key={idx}>
            <ProFormSelect
              request={async ({ keyWords }) => {
                if (keyWords.length < 3) return [];
                try {
                  const { data } = await productcontrollerSearchproducts({
                    name: keyWords,
                  });
                  return (
                    data?.map((item) => {
                      return {
                        label: item.name,
                        value: item.sku,
                      };
                    }) || []
                  );
                } catch (error) {
                  return [];
                }
              }}
              name="productSku"
              label={'产品' + (idx + 1)}
              width="lg"
              placeholder="请选择产品"
              tooltip="至少输入3个字符"
              fieldProps={{
                showSearch: true,
              }}
              transform={(value) => {
                return value?.value || value;
              }}
              debounceTime={300} // 防抖，减少请求频率
              rules={[{ required: true, message: '请选择产品' }]}
              onChange={(_, option) => {
                form.setFieldValue(
                  ['items', fields.key, 'productName'],
                  option.title,
                );
              }}
            />
            <ProFormText name={'productName'} label="产品名称" hidden={true} />
            <ProFormDigit
              name="quantity"
              label="数量"
              placeholder="请输入数量"
              rules={[{ required: true, message: '请输入数量' }]}
              fieldProps={{
                precision: 0,
              }}
            />
          </div>
        )}
      </ProFormList>
    </DrawerForm>
  );
};

const DetailForm: React.FC<{
  tableRef: React.MutableRefObject<ActionType | undefined>;
  values: Record<string, any>;
}> = ({ tableRef, values }) => {
  const { message } = App.useApp();
  const [form] = Form.useForm();
  const initialValues = {
    ...values,
    items: values?.items?.map(
      (item: { productName: string; productSku: string }) => ({
        ...item,
        productSku: {
          label: item.productName,
          value: item.productSku,
        },
      }),
    ),
  };
  return (
    <DrawerForm
      title="详情"
      form={form}
      initialValues={initialValues}
      trigger={<Button type="primary">详情</Button>}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      readonly={true}
      layout="vertical"
    >
      <ProFormText
        name="orderNumber"
        label="订单编号"
        placeholder="请输入订单编号"
        width={'lg'}
        rules={[{ required: true, message: '请输入订单编号' }]}
      />
      <ProFormSelect
        request={async () => {
          try {
            const { data } = await stockcontrollerGetallstockpoints();
            return (
              data?.map((item) => {
                return {
                  label: item.name,
                  value: item.id,
                };
              }) || []
            );
          } catch (error) {
            return [];
          }
        }}
        name="sourceStockPointId"
        label="源仓库"
        width="lg"
        placeholder="请选择仓库"
        rules={[{ required: true, message: '请选择源仓库' }]}
      />
      <ProFormSelect
        request={async () => {
          try {
            const { data } = await stockcontrollerGetallstockpoints();
            return (
              data?.map((item) => {
                return {
                  label: item.name,
                  value: item.id,
                };
              }) || []
            );
          } catch (error) {
            return [];
          }
        }}
        name="destStockPointId"
        label="目标仓库"
        width="lg"
        placeholder="请选择仓库"
        rules={[{ required: true, message: '请选择源目标仓库' }]}
      />
      <ProFormTextArea name="note" label="备注" />
      <ProFormList<API.PurchaseOrderItem>
        name="items"
        rules={[
          {
            required: true,
            message: '至少需要一个商品',
            validator: (_, value) =>
              value && value.length > 0
                ? Promise.resolve()
                : Promise.reject('至少需要一个商品'),
          },
        ]}
        creatorButtonProps={{ children: '新增', size: 'large' }}
        wrapperCol={{ span: 24 }}
      >
        {(fields, idx, { remove }) => (
          <div key={idx}>
            <ProForm.Group>
              <ProFormSelect
                request={async ({ keyWords }) => {
                  if (keyWords.length < 3) return [];
                  try {
                    const { data } = await productcontrollerSearchproducts({
                      name: keyWords,
                    });
                    return (
                      data?.map((item) => {
                        return {
                          label: item.name,
                          value: item.sku,
                        };
                      }) || []
                    );
                  } catch (error) {
                    return [];
                  }
                }}
                name="productSku"
                label="产品"
                width="lg"
                placeholder="请选择产品"
                tooltip="至少输入3个字符"
                fieldProps={{
                  showSearch: true,
                }}
                transform={(value) => {
                  return value?.value || value;
                }}
                debounceTime={300} // 防抖，减少请求频率
                rules={[{ required: true, message: '请选择产品' }]}
                onChange={(_, option) => {
                  form.setFieldValue(
                    ['items', fields.key, 'productName'],
                    option?.title,
                  );
                }}
              />
              <ProFormText name="productName" label="产品名称" hidden={true} />
              <ProFormDigit
                name="quantity"
                label="数量"
                placeholder="请输入数量"
                rules={[{ required: true, message: '请输入数量' }]}
                fieldProps={{
                  precision: 0,
                }}
              />
            </ProForm.Group>
          </div>
        )}
      </ProFormList>
    </DrawerForm>
  );
};

export default TransferPage;