import {
  createInterface,
  createInterfaceIntegration,
  exportInterfaceChangeLog,
  manageInterfaceIntegrationKey,
  previewInterfaceRoute,
  queryInterfaceChangeLogs,
  queryInterfaceDocInfo,
  queryInterfaceGatewayPolicy,
  queryInterfaceIntegrationInfo,
  queryInterfaceList,
  queryInterfaceMockInfo,
  removeInterface,
  startInterfaceDebug,
  updateInterface,
  updateInterfaceGatewayPolicy,
} from '@/services/interface';
import { PlusOutlined } from '@ant-design/icons';
import {
  ActionType,
  ModalForm,
  PageContainer,
  ProColumns,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProTable,
  QueryFilter,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
import {
  Button,
  Descriptions,
  Drawer,
  Modal,
  Popconfirm,
  Space,
  Tabs,
  Timeline,
  Typography,
  message,
  theme,
} from 'antd';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import type {
  HttpMethod,
  InterfaceActionResponse,
  InterfaceChangeLogItem,
  InterfaceDocInfo,
  InterfaceExportResponse,
  InterfaceFormValues,
  InterfaceGatewayFormValues,
  InterfaceGatewayPolicy,
  InterfaceIntegrationInfo,
  InterfaceItem,
  InterfaceListParams,
  InterfaceMockInfo,
  InterfaceRoutePreview,
  InterfaceStatus,
} from './data';

type InterfaceListResponse = {
  data: InterfaceItem[];
  total: number;
  success?: boolean;
};

type DetailSectionItem = {
  label: string;
  value: string;
};

type DetailSectionBlock = {
  title: string;
  items: DetailSectionItem[];
};

type IntegrationFormValues = Pick<
  InterfaceIntegrationInfo,
  'partner' | 'channel'
>;

const InterfaceManagement: React.FC = () => {
  const intl = useIntl();
  const { token } = theme.useToken();
  const actionRef = useRef<ActionType>();
  const [queryParams, setQueryParams] = useState<InterfaceListParams>({});
  const [currentRow, setCurrentRow] = useState<InterfaceItem | undefined>();
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [docInfo, setDocInfo] = useState<InterfaceDocInfo | null>(null);
  const [gatewayPolicy, setGatewayPolicy] =
    useState<InterfaceGatewayPolicy | null>(null);
  const [mockInfo, setMockInfo] = useState<InterfaceMockInfo | null>(null);
  const [integrationInfo, setIntegrationInfo] =
    useState<InterfaceIntegrationInfo | null>(null);
  const [changeLogs, setChangeLogs] = useState<InterfaceChangeLogItem[]>([]);
  const [gatewayModalOpen, setGatewayModalOpen] = useState(false);
  const [integrationModalOpen, setIntegrationModalOpen] = useState(false);
  const [routePreviewOpen, setRoutePreviewOpen] = useState(false);
  const [routePreview, setRoutePreview] =
    useState<InterfaceRoutePreview | null>(null);

  const fetchListService = (params?: InterfaceListParams) =>
    queryInterfaceList(params) as Promise<InterfaceListResponse>;

  const { run: fetchList, loading: tableLoading } = useRequest(
    fetchListService,
    {
      manual: true,
    },
  );

  const { run: createItem, loading: creating } = useRequest<
    InterfaceItem,
    [InterfaceFormValues]
  >(createInterface, {
    manual: true,
  });

  const { run: updateItem, loading: updating } = useRequest<
    InterfaceItem,
    [string, InterfaceFormValues]
  >(updateInterface, {
    manual: true,
  });

  const { run: removeItem, loading: removing } = useRequest<
    { success: boolean },
    [string]
  >(removeInterface, {
    manual: true,
  });

  const { run: fetchDocInfo, loading: docLoading } = useRequest<
    InterfaceDocInfo,
    [string]
  >(queryInterfaceDocInfo, {
    manual: true,
    onSuccess: (data) => {
      setDocInfo(data as InterfaceDocInfo);
    },
    onError: () => {
      message.error(
        intl.formatMessage({
          id: 'interface.message.detail.load.error',
          defaultMessage: '详情加载失败',
        }),
      );
    },
  });

  const { run: fetchGatewayPolicy, loading: gatewayLoading } = useRequest<
    InterfaceGatewayPolicy,
    [string]
  >(queryInterfaceGatewayPolicy, {
    manual: true,
    onSuccess: (data) => {
      setGatewayPolicy(data as InterfaceGatewayPolicy);
    },
    onError: () => {
      message.error(
        intl.formatMessage({
          id: 'interface.message.detail.load.error',
          defaultMessage: '详情加载失败',
        }),
      );
    },
  });

  const { run: fetchMockInfo, loading: mockLoading } = useRequest<
    InterfaceMockInfo,
    [string]
  >(queryInterfaceMockInfo, {
    manual: true,
    onSuccess: (data) => {
      setMockInfo(data as InterfaceMockInfo);
    },
    onError: () => {
      message.error(
        intl.formatMessage({
          id: 'interface.message.detail.load.error',
          defaultMessage: '详情加载失败',
        }),
      );
    },
  });

  const { run: fetchIntegrationInfo, loading: integrationLoading } = useRequest<
    InterfaceIntegrationInfo,
    [string]
  >(queryInterfaceIntegrationInfo, {
    manual: true,
    onSuccess: (data) => {
      setIntegrationInfo(data as InterfaceIntegrationInfo);
    },
    onError: () => {
      message.error(
        intl.formatMessage({
          id: 'interface.message.detail.load.error',
          defaultMessage: '详情加载失败',
        }),
      );
    },
  });

  const { run: fetchChangeLogs, loading: changeLogLoading } = useRequest<
    InterfaceChangeLogItem[],
    [string]
  >(queryInterfaceChangeLogs, {
    manual: true,
    onSuccess: (data) => {
      setChangeLogs((data as InterfaceChangeLogItem[]) ?? []);
    },
    onError: () => {
      message.error(
        intl.formatMessage({
          id: 'interface.message.detail.load.error',
          defaultMessage: '详情加载失败',
        }),
      );
    },
  });

  const { run: openDoc, loading: openingDoc } = useRequest<
    InterfaceDocInfo,
    [string]
  >(
    async (id: string) => {
      const data = await queryInterfaceDocInfo(id);
      if (!data.docUrl) {
        throw new Error('missing-doc-url');
      }
      return data;
    },
    {
      manual: true,
      onSuccess: (data) => {
        const docData = data as InterfaceDocInfo;
        window.open(docData.docUrl, '_blank', 'noopener');
      },
      onError: () => {
        message.error(
          intl.formatMessage({
            id: 'interface.message.doc.open.error',
            defaultMessage: '文档打开失败',
          }),
        );
      },
    },
  );

  const { run: copyExample, loading: copyingExample } = useRequest<
    InterfaceDocInfo,
    [string]
  >(
    async (id: string) => {
      const data = await queryInterfaceDocInfo(id);
      if (!navigator?.clipboard?.writeText) {
        throw new Error('clipboard-unavailable');
      }
      await navigator.clipboard.writeText(data.exampleText);
      return data;
    },
    {
      manual: true,
      onSuccess: () => {
        message.success(
          intl.formatMessage({
            id: 'interface.message.doc.copy.success',
            defaultMessage: '示例已复制',
          }),
        );
      },
      onError: () => {
        message.error(
          intl.formatMessage({
            id: 'interface.message.doc.copy.error',
            defaultMessage: '复制失败',
          }),
        );
      },
    },
  );

  const { run: saveGatewayPolicy, loading: savingGateway } = useRequest<
    InterfaceGatewayPolicy,
    [string, InterfaceGatewayFormValues]
  >(updateInterfaceGatewayPolicy, {
    manual: true,
    onSuccess: (data) => {
      setGatewayPolicy(data as InterfaceGatewayPolicy);
      message.success(
        intl.formatMessage({
          id: 'interface.message.gateway.update.success',
          defaultMessage: '网关策略已更新',
        }),
      );
      setGatewayModalOpen(false);
    },
    onError: () => {
      message.error(
        intl.formatMessage({
          id: 'interface.message.gateway.update.error',
          defaultMessage: '网关策略更新失败',
        }),
      );
    },
  });

  const { run: previewRoute, loading: previewLoading } = useRequest<
    InterfaceRoutePreview,
    [string]
  >(previewInterfaceRoute, {
    manual: true,
    onSuccess: (data) => {
      setRoutePreview(data as InterfaceRoutePreview);
      setRoutePreviewOpen(true);
    },
    onError: () => {
      message.error(
        intl.formatMessage({
          id: 'interface.message.gateway.preview.error',
          defaultMessage: '路由预览失败',
        }),
      );
    },
  });

  const { run: startDebug, loading: startingDebug } = useRequest<
    InterfaceActionResponse,
    [string]
  >(startInterfaceDebug, {
    manual: true,
    onSuccess: () => {
      message.success(
        intl.formatMessage({
          id: 'interface.message.debug.start.success',
          defaultMessage: '调试已启动',
        }),
      );
      if (currentRow?.id) {
        fetchMockInfo(currentRow.id);
      }
    },
    onError: () => {
      message.error(
        intl.formatMessage({
          id: 'interface.message.debug.start.error',
          defaultMessage: '调试启动失败',
        }),
      );
    },
  });

  const { run: viewMock, loading: viewingMock } = useRequest<
    InterfaceMockInfo,
    [string]
  >(
    async (id: string) => {
      const data = await queryInterfaceMockInfo(id);
      if (!data.mockUrl) {
        throw new Error('missing-mock-url');
      }
      return data;
    },
    {
      manual: true,
      onSuccess: (data) => {
        const mockData = data as InterfaceMockInfo;
        window.open(mockData.mockUrl, '_blank', 'noopener');
      },
      onError: () => {
        message.error(
          intl.formatMessage({
            id: 'interface.message.mock.open.error',
            defaultMessage: 'Mock 打开失败',
          }),
        );
      },
    },
  );

  const { run: addIntegration, loading: addingIntegration } = useRequest<
    InterfaceIntegrationInfo,
    [string, IntegrationFormValues]
  >(createInterfaceIntegration, {
    manual: true,
    onSuccess: (data) => {
      setIntegrationInfo(data as InterfaceIntegrationInfo);
      message.success(
        intl.formatMessage({
          id: 'interface.message.integration.add.success',
          defaultMessage: '接入已新增',
        }),
      );
      setIntegrationModalOpen(false);
    },
    onError: () => {
      message.error(
        intl.formatMessage({
          id: 'interface.message.integration.add.error',
          defaultMessage: '新增接入失败',
        }),
      );
    },
  });

  const { run: manageKeys, loading: managingKeys } = useRequest<
    InterfaceIntegrationInfo,
    [string]
  >(manageInterfaceIntegrationKey, {
    manual: true,
    onSuccess: (data) => {
      const info = data as InterfaceIntegrationInfo;
      window.open(info.consoleUrl, '_blank', 'noopener');
      message.success(
        intl.formatMessage({
          id: 'interface.message.integration.key.success',
          defaultMessage: '已进入密钥管理',
        }),
      );
    },
    onError: () => {
      message.error(
        intl.formatMessage({
          id: 'interface.message.integration.key.error',
          defaultMessage: '密钥管理打开失败',
        }),
      );
    },
  });

  const { run: exportChangeLog, loading: exportingLog } = useRequest<
    InterfaceExportResponse,
    [string]
  >(exportInterfaceChangeLog, {
    manual: true,
    onSuccess: (data) => {
      const exportInfo = data as InterfaceExportResponse;
      window.open(exportInfo.downloadUrl, '_blank', 'noopener');
      message.success(
        intl.formatMessage({
          id: 'interface.message.changelog.export.success',
          defaultMessage: '记录已导出',
        }),
      );
    },
    onError: () => {
      message.error(
        intl.formatMessage({
          id: 'interface.message.changelog.export.error',
          defaultMessage: '导出失败',
        }),
      );
    },
  });

  const formSubmitting = creating || updating;

  const ensureCurrentRowId = () => {
    if (!currentRow?.id) {
      message.warning(
        intl.formatMessage({
          id: 'interface.message.select.warning',
          defaultMessage: '请先选择接口',
        }),
      );
      return null;
    }
    return currentRow.id;
  };

  const renderDetailValue = (value: string | undefined, loading?: boolean) =>
    loading
      ? intl.formatMessage({
          id: 'common.loading',
          defaultMessage: '加载中...',
        })
      : value ??
        intl.formatMessage({
          id: 'common.placeholder.empty',
          defaultMessage: '-',
        });

  const normalizeListResponse = (
    response: InterfaceListResponse | InterfaceItem[],
  ) => {
    if (Array.isArray(response)) {
      return {
        data: response,
        total: response.length,
        success: true,
      };
    }
    return {
      data: response.data ?? [],
      total: response.total ?? response.data?.length ?? 0,
      success: response.success ?? true,
    };
  };

  const methodValueEnum = useMemo<
    Record<HttpMethod, { text: React.ReactNode }>
  >(
    () => ({
      GET: {
        text: intl.formatMessage({
          id: 'interface.method.get',
          defaultMessage: 'GET',
        }),
      },
      POST: {
        text: intl.formatMessage({
          id: 'interface.method.post',
          defaultMessage: 'POST',
        }),
      },
      PUT: {
        text: intl.formatMessage({
          id: 'interface.method.put',
          defaultMessage: 'PUT',
        }),
      },
      DELETE: {
        text: intl.formatMessage({
          id: 'interface.method.delete',
          defaultMessage: 'DELETE',
        }),
      },
      PATCH: {
        text: intl.formatMessage({
          id: 'interface.method.patch',
          defaultMessage: 'PATCH',
        }),
      },
    }),
    [intl],
  );

  const statusValueEnum = useMemo<
    Record<
      InterfaceStatus,
      { text: React.ReactNode; status: 'Success' | 'Warning' | 'Error' }
    >
  >(
    () => ({
      active: {
        text: intl.formatMessage({
          id: 'interface.status.active',
          defaultMessage: '启用',
        }),
        status: 'Success',
      },
      deprecated: {
        text: intl.formatMessage({
          id: 'interface.status.deprecated',
          defaultMessage: '已废弃',
        }),
        status: 'Warning',
      },
      disabled: {
        text: intl.formatMessage({
          id: 'interface.status.disabled',
          defaultMessage: '已停用',
        }),
        status: 'Error',
      },
    }),
    [intl],
  );

  useEffect(() => {
    if (!drawerOpen || !currentRow?.id) {
      return;
    }
    setDocInfo(null);
    setGatewayPolicy(null);
    setMockInfo(null);
    setIntegrationInfo(null);
    setChangeLogs([]);
    fetchDocInfo(currentRow.id);
    fetchGatewayPolicy(currentRow.id);
    fetchMockInfo(currentRow.id);
    fetchIntegrationInfo(currentRow.id);
    fetchChangeLogs(currentRow.id);
  }, [
    drawerOpen,
    currentRow?.id,
    fetchDocInfo,
    fetchGatewayPolicy,
    fetchMockInfo,
    fetchIntegrationInfo,
    fetchChangeLogs,
  ]);

  const columns: ProColumns<InterfaceItem>[] = [
    {
      title: (
        <FormattedMessage
          id="interface.column.name"
          defaultMessage="接口名称"
        />
      ),
      dataIndex: 'name',
      ellipsis: true,
    },
    {
      title: (
        <FormattedMessage
          id="interface.column.method"
          defaultMessage="请求方法"
        />
      ),
      dataIndex: 'method',
      valueEnum: methodValueEnum,
      width: 120,
    },
    {
      title: (
        <FormattedMessage
          id="interface.column.path"
          defaultMessage="请求路径"
        />
      ),
      dataIndex: 'path',
      copyable: true,
      ellipsis: true,
    },
    {
      title: (
        <FormattedMessage id="interface.column.owner" defaultMessage="负责人" />
      ),
      dataIndex: 'owner',
      width: 120,
    },
    {
      title: (
        <FormattedMessage id="interface.column.status" defaultMessage="状态" />
      ),
      dataIndex: 'status',
      valueEnum: statusValueEnum,
      width: 120,
    },
    {
      title: (
        <FormattedMessage id="interface.column.version" defaultMessage="版本" />
      ),
      dataIndex: 'version',
      width: 120,
    },
    {
      title: (
        <FormattedMessage
          id="interface.column.updatedAt"
          defaultMessage="更新时间"
        />
      ),
      dataIndex: 'updatedAt',
      valueType: 'dateTime',
      width: 180,
    },
    {
      title: <FormattedMessage id="common.action" defaultMessage="操作" />,
      valueType: 'option',
      width: 200,
      render: (_, record) => [
        <a
          key="view"
          onClick={() => {
            setCurrentRow(record);
            setDrawerOpen(true);
          }}
        >
          <FormattedMessage id="interface.action.view" defaultMessage="查看" />
        </a>,
        <a
          key="edit"
          onClick={() => {
            setCurrentRow(record);
            setModalOpen(true);
          }}
        >
          <FormattedMessage id="common.edit" defaultMessage="编辑" />
        </a>,
        <Popconfirm
          key="delete"
          title={intl.formatMessage({
            id: 'interface.confirm.delete',
            defaultMessage: '确认删除该接口吗？',
          })}
          onConfirm={async () => {
            setDeletingId(record.id);
            try {
              await removeItem(record.id);
              message.success(
                intl.formatMessage({
                  id: 'interface.message.delete.success',
                  defaultMessage: '删除成功',
                }),
              );
              actionRef.current?.reload();
            } catch (error) {
              message.error(
                intl.formatMessage({
                  id: 'interface.message.delete.error',
                  defaultMessage: '删除失败',
                }),
              );
            } finally {
              setDeletingId(null);
            }
          }}
          okButtonProps={{
            loading: deletingId === record.id && removing,
          }}
        >
          <a>
            <FormattedMessage id="common.delete" defaultMessage="删除" />
          </a>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <PageContainer
      title={
        <FormattedMessage id="interface.page.title" defaultMessage="接口管理" />
      }
    >
      <QueryFilter<InterfaceListParams>
        layout="vertical"
        style={{
          background: token.colorBgContainer,
          padding: token.paddingLG,
          borderRadius: token.borderRadiusLG,
          marginBottom: token.marginLG,
        }}
        onFinish={async (values) => {
          setQueryParams({ ...values });
          actionRef.current?.reload();
          return true;
        }}
        onReset={() => {
          setQueryParams({});
          actionRef.current?.reload();
        }}
        submitter={{
          searchConfig: {
            submitText: intl.formatMessage({
              id: 'common.search',
              defaultMessage: '查询',
            }),
            resetText: intl.formatMessage({
              id: 'common.reset',
              defaultMessage: '重置',
            }),
          },
          submitButtonProps: { loading: tableLoading },
          resetButtonProps: { loading: tableLoading },
        }}
      >
        <ProFormText
          name="name"
          label={
            <FormattedMessage
              id="interface.search.name"
              defaultMessage="接口名称"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.search.name.placeholder',
            defaultMessage: '请输入接口名称',
          })}
        />
        <ProFormSelect
          name="method"
          label={
            <FormattedMessage
              id="interface.search.method"
              defaultMessage="请求方法"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.search.method.placeholder',
            defaultMessage: '请选择请求方法',
          })}
          valueEnum={methodValueEnum}
        />
        <ProFormText
          name="path"
          label={
            <FormattedMessage
              id="interface.search.path"
              defaultMessage="请求路径"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.search.path.placeholder',
            defaultMessage: '请输入请求路径',
          })}
        />
        <ProFormText
          name="owner"
          label={
            <FormattedMessage
              id="interface.search.owner"
              defaultMessage="负责人"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.search.owner.placeholder',
            defaultMessage: '请输入负责人姓名',
          })}
        />
        <ProFormSelect
          name="status"
          label={
            <FormattedMessage
              id="interface.search.status"
              defaultMessage="状态"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.search.status.placeholder',
            defaultMessage: '请选择状态',
          })}
          valueEnum={statusValueEnum}
        />
        <ProFormText
          name="version"
          label={
            <FormattedMessage
              id="interface.search.version"
              defaultMessage="版本"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.search.version.placeholder',
            defaultMessage: '如 v1',
          })}
        />
      </QueryFilter>

      <ProTable<InterfaceItem, InterfaceListParams>
        rowKey="id"
        actionRef={actionRef}
        search={false}
        loading={tableLoading}
        headerTitle={
          <FormattedMessage
            id="interface.table.title"
            defaultMessage="接口列表"
          />
        }
        toolBarRender={() => [
          <Button
            key="create"
            type="primary"
            icon={<PlusOutlined />}
            loading={formSubmitting}
            onClick={() => {
              setCurrentRow(undefined);
              setModalOpen(true);
            }}
          >
            <FormattedMessage
              id="interface.action.add"
              defaultMessage="新增接口"
            />
          </Button>,
        ]}
        pagination={{
          showTotal: (total) =>
            intl.formatMessage(
              {
                id: 'interface.pagination.total',
                defaultMessage: '共 {total} 条记录',
              },
              { total },
            ),
        }}
        params={queryParams}
        request={async (params) => {
          const response = (await fetchList(params)) as unknown as
            | InterfaceListResponse
            | InterfaceItem[];
          return normalizeListResponse(response);
        }}
        columns={columns}
      />

      <ModalForm<InterfaceFormValues>
        title={
          currentRow
            ? intl.formatMessage({
                id: 'interface.form.edit.title',
                defaultMessage: '编辑接口',
              })
            : intl.formatMessage({
                id: 'interface.form.create.title',
                defaultMessage: '新增接口',
              })
        }
        width={520}
        open={modalOpen}
        onOpenChange={setModalOpen}
        initialValues={currentRow}
        modalProps={{
          destroyOnHidden: true,
        }}
        submitter={{
          submitButtonProps: { loading: formSubmitting },
          resetButtonProps: { loading: formSubmitting },
        }}
        onFinish={async (values) => {
          try {
            if (currentRow) {
              await updateItem(currentRow.id, values);
              message.success(
                intl.formatMessage({
                  id: 'interface.message.update.success',
                  defaultMessage: '更新成功',
                }),
              );
            } else {
              await createItem(values);
              message.success(
                intl.formatMessage({
                  id: 'interface.message.create.success',
                  defaultMessage: '创建成功',
                }),
              );
            }
            setModalOpen(false);
            actionRef.current?.reload();
            return true;
          } catch (error) {
            message.error(
              intl.formatMessage({
                id: 'interface.message.operation.error',
                defaultMessage: '操作失败',
              }),
            );
            return false;
          }
        }}
      >
        <ProFormText
          name="name"
          label={
            <FormattedMessage
              id="interface.form.name"
              defaultMessage="接口名称"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.form.name.placeholder',
            defaultMessage: '请输入接口名称',
          })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'interface.form.name.required',
                defaultMessage: '接口名称不能为空',
              }),
            },
          ]}
        />
        <ProFormSelect
          name="method"
          label={
            <FormattedMessage
              id="interface.form.method"
              defaultMessage="请求方法"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.form.method.placeholder',
            defaultMessage: '请选择请求方法',
          })}
          valueEnum={methodValueEnum}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'interface.form.method.required',
                defaultMessage: '请选择请求方法',
              }),
            },
          ]}
        />
        <ProFormText
          name="path"
          label={
            <FormattedMessage
              id="interface.form.path"
              defaultMessage="请求路径"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.form.path.placeholder',
            defaultMessage: '请输入请求路径',
          })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'interface.form.path.required',
                defaultMessage: '请求路径不能为空',
              }),
            },
          ]}
        />
        <ProFormText
          name="owner"
          label={
            <FormattedMessage
              id="interface.form.owner"
              defaultMessage="负责人"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.form.owner.placeholder',
            defaultMessage: '请输入负责人姓名',
          })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'interface.form.owner.required',
                defaultMessage: '负责人不能为空',
              }),
            },
          ]}
        />
        <ProFormText
          name="version"
          label={
            <FormattedMessage
              id="interface.form.version"
              defaultMessage="版本"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.form.version.placeholder',
            defaultMessage: '如 v1',
          })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'interface.form.version.required',
                defaultMessage: '版本不能为空',
              }),
            },
          ]}
        />
        <ProFormSelect
          name="status"
          label={
            <FormattedMessage
              id="interface.form.status"
              defaultMessage="状态"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.form.status.placeholder',
            defaultMessage: '请选择状态',
          })}
          valueEnum={statusValueEnum}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'interface.form.status.required',
                defaultMessage: '请选择状态',
              }),
            },
          ]}
        />
        <ProFormTextArea
          name="description"
          label={
            <FormattedMessage
              id="interface.form.description"
              defaultMessage="接口说明"
            />
          }
          placeholder={intl.formatMessage({
            id: 'interface.form.description.placeholder',
            defaultMessage: '请输入接口说明',
          })}
          fieldProps={{ rows: 4 }}
        />
      </ModalForm>

      <Drawer
        title={
          <FormattedMessage
            id="interface.drawer.title"
            defaultMessage="接口详情"
          />
        }
        open={drawerOpen}
        onClose={() => {
          setDrawerOpen(false);
          setGatewayModalOpen(false);
          setIntegrationModalOpen(false);
          setRoutePreviewOpen(false);
        }}
        width={640}
        footer={
          <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button onClick={() => setDrawerOpen(false)}>
              <FormattedMessage id="common.cancel" defaultMessage="取消" />
            </Button>
            <Button
              type="primary"
              loading={formSubmitting}
              onClick={() => {
                if (currentRow) {
                  setDrawerOpen(false);
                  setModalOpen(true);
                }
              }}
            >
              <FormattedMessage id="common.edit" defaultMessage="编辑" />
            </Button>
          </Space>
        }
      >
        <Tabs
          items={(() => {
            const basicInfoBlocks: DetailSectionBlock[] = [
              {
                title: intl.formatMessage({
                  id: 'interface.drawer.basic.section.core',
                  defaultMessage: '核心信息',
                }),
                items: [
                  {
                    label: intl.formatMessage({
                      id: 'interface.column.name',
                      defaultMessage: '接口名称',
                    }),
                    value: renderDetailValue(currentRow?.name),
                  },
                  {
                    label: intl.formatMessage({
                      id: 'interface.column.method',
                      defaultMessage: '请求方法',
                    }),
                    value: currentRow
                      ? String(methodValueEnum[currentRow.method].text)
                      : intl.formatMessage({
                          id: 'common.placeholder.empty',
                          defaultMessage: '-',
                        }),
                  },
                  {
                    label: intl.formatMessage({
                      id: 'interface.column.path',
                      defaultMessage: '请求路径',
                    }),
                    value: renderDetailValue(currentRow?.path),
                  },
                  {
                    label: intl.formatMessage({
                      id: 'interface.column.status',
                      defaultMessage: '状态',
                    }),
                    value: currentRow
                      ? String(statusValueEnum[currentRow.status].text)
                      : intl.formatMessage({
                          id: 'common.placeholder.empty',
                          defaultMessage: '-',
                        }),
                  },
                ],
              },
              {
                title: intl.formatMessage({
                  id: 'interface.drawer.basic.section.owner',
                  defaultMessage: '负责人信息',
                }),
                items: [
                  {
                    label: intl.formatMessage({
                      id: 'interface.column.owner',
                      defaultMessage: '负责人',
                    }),
                    value: renderDetailValue(currentRow?.owner),
                  },
                  {
                    label: intl.formatMessage({
                      id: 'interface.column.version',
                      defaultMessage: '版本',
                    }),
                    value: renderDetailValue(currentRow?.version),
                  },
                  {
                    label: intl.formatMessage({
                      id: 'interface.column.createdAt',
                      defaultMessage: '创建时间',
                    }),
                    value: renderDetailValue(currentRow?.createdAt),
                  },
                  {
                    label: intl.formatMessage({
                      id: 'interface.column.updatedAt',
                      defaultMessage: '更新时间',
                    }),
                    value: renderDetailValue(currentRow?.updatedAt),
                  },
                ],
              },
            ];

            const docBlocks: DetailSectionBlock[] = [
              {
                title: intl.formatMessage({
                  id: 'interface.drawer.doc.section.docs',
                  defaultMessage: '文档与示例',
                }),
                items: [
                  {
                    label: intl.formatMessage({
                      id: 'interface.drawer.doc.owner',
                      defaultMessage: '文档负责人',
                    }),
                    value: renderDetailValue(docInfo?.owner, docLoading),
                  },
                  {
                    label: intl.formatMessage({
                      id: 'interface.drawer.doc.updatedAt',
                      defaultMessage: '文档更新时间',
                    }),
                    value: renderDetailValue(docInfo?.updatedAt, docLoading),
                  },
                ],
              },
            ];

            const gatewayBlocks: DetailSectionBlock[] = [
              {
                title: intl.formatMessage({
                  id: 'interface.drawer.gateway.section',
                  defaultMessage: '网关与治理',
                }),
                items: [
                  {
                    label: intl.formatMessage({
                      id: 'interface.drawer.gateway.route',
                      defaultMessage: '路由标识',
                    }),
                    value: renderDetailValue(
                      gatewayPolicy?.routeId,
                      gatewayLoading,
                    ),
                  },
                  {
                    label: intl.formatMessage({
                      id: 'interface.drawer.gateway.rateLimit',
                      defaultMessage: '限流策略',
                    }),
                    value: renderDetailValue(
                      gatewayPolicy?.rateLimit,
                      gatewayLoading,
                    ),
                  },
                  {
                    label: intl.formatMessage({
                      id: 'interface.drawer.gateway.auth',
                      defaultMessage: '鉴权策略',
                    }),
                    value: renderDetailValue(
                      gatewayPolicy?.authType,
                      gatewayLoading,
                    ),
                  },
                  {
                    label: intl.formatMessage({
                      id: 'interface.drawer.gateway.timeout',
                      defaultMessage: '超时设置',
                    }),
                    value: gatewayLoading
                      ? intl.formatMessage({
                          id: 'common.loading',
                          defaultMessage: '加载中...',
                        })
                      : gatewayPolicy?.timeoutMs
                      ? intl.formatMessage(
                          {
                            id: 'interface.drawer.gateway.timeout.value',
                            defaultMessage: '{value} 秒',
                          },
                          { value: gatewayPolicy.timeoutMs / 1000 },
                        )
                      : intl.formatMessage({
                          id: 'common.placeholder.empty',
                          defaultMessage: '-',
                        }),
                  },
                ],
              },
            ];

            const mockDebugInfo: InterfaceMockInfo = mockInfo ?? {
              requestSample: `curl -X ${currentRow?.method ?? 'GET'} \\\n+  ${
                currentRow?.path ?? '/api/example'
              }?page=1&pageSize=10`,
              responseSample: intl.formatMessage({
                id: 'interface.drawer.debug.response.empty',
                defaultMessage: '暂无响应示例',
              }),
              latency: intl.formatMessage({
                id: 'interface.drawer.debug.latency.empty',
                defaultMessage: '-',
              }),
              mockEnabled: false,
              mockUrl: '',
            };

            const mockStatusText = mockLoading
              ? intl.formatMessage({
                  id: 'common.loading',
                  defaultMessage: '加载中...',
                })
              : mockInfo
              ? mockInfo.mockEnabled
                ? intl.formatMessage({
                    id: 'interface.drawer.debug.status.enabled',
                    defaultMessage: '已启用',
                  })
                : intl.formatMessage({
                    id: 'interface.drawer.debug.status.disabled',
                    defaultMessage: '未启用',
                  })
              : intl.formatMessage({
                  id: 'common.placeholder.empty',
                  defaultMessage: '-',
                });

            const mockLatencyText = mockLoading
              ? intl.formatMessage({
                  id: 'common.loading',
                  defaultMessage: '加载中...',
                })
              : mockInfo?.latency ??
                intl.formatMessage({
                  id: 'interface.drawer.debug.latency.empty',
                  defaultMessage: '-',
                });

            const mockRequestSample = mockLoading
              ? intl.formatMessage({
                  id: 'common.loading',
                  defaultMessage: '加载中...',
                })
              : mockInfo?.requestSample ??
                intl.formatMessage({
                  id: 'interface.drawer.debug.request.empty',
                  defaultMessage: '暂无请求示例',
                });

            const mockResponseSample = mockLoading
              ? intl.formatMessage({
                  id: 'common.loading',
                  defaultMessage: '加载中...',
                })
              : mockInfo?.responseSample ??
                intl.formatMessage({
                  id: 'interface.drawer.debug.response.empty',
                  defaultMessage: '暂无响应示例',
                });

            const integrationBlocks: DetailSectionBlock[] = [
              {
                title: intl.formatMessage({
                  id: 'interface.drawer.integration.section',
                  defaultMessage: '第三方接入',
                }),
                items: [
                  {
                    label: intl.formatMessage({
                      id: 'interface.drawer.integration.partner',
                      defaultMessage: '合作方',
                    }),
                    value: renderDetailValue(
                      integrationInfo?.partner,
                      integrationLoading,
                    ),
                  },
                  {
                    label: intl.formatMessage({
                      id: 'interface.drawer.integration.channel',
                      defaultMessage: '接入方式',
                    }),
                    value: renderDetailValue(
                      integrationInfo?.channel,
                      integrationLoading,
                    ),
                  },
                  {
                    label: intl.formatMessage({
                      id: 'interface.drawer.integration.status',
                      defaultMessage: '接入状态',
                    }),
                    value: renderDetailValue(
                      integrationInfo?.status,
                      integrationLoading,
                    ),
                  },
                ],
              },
            ];

            const renderBlock = (block: DetailSectionBlock) => (
              <Descriptions
                key={block.title}
                column={2}
                bordered
                size="small"
                title={block.title}
                style={{ marginBottom: token.marginLG }}
              >
                {block.items.map((item) => (
                  <Descriptions.Item key={item.label} label={item.label}>
                    {item.value}
                  </Descriptions.Item>
                ))}
              </Descriptions>
            );

            return [
              {
                key: 'basic',
                label: intl.formatMessage({
                  id: 'interface.drawer.tab.basic',
                  defaultMessage: '基础信息',
                }),
                children: (
                  <div>
                    {basicInfoBlocks.map(renderBlock)}
                    <Descriptions column={1} bordered size="small">
                      <Descriptions.Item
                        label={intl.formatMessage({
                          id: 'interface.form.description',
                          defaultMessage: '接口说明',
                        })}
                      >
                        {currentRow?.description ||
                          intl.formatMessage({
                            id: 'common.noDescription',
                            defaultMessage: '暂无描述',
                          })}
                      </Descriptions.Item>
                    </Descriptions>
                  </div>
                ),
              },
              {
                key: 'doc',
                label: intl.formatMessage({
                  id: 'interface.drawer.tab.doc',
                  defaultMessage: '文档与示例',
                }),
                children: (
                  <div>
                    <Space style={{ marginBottom: token.marginLG }}>
                      <Button
                        loading={openingDoc}
                        onClick={() => {
                          const id = ensureCurrentRowId();
                          if (!id) {
                            return;
                          }
                          openDoc(id);
                        }}
                      >
                        <FormattedMessage
                          id="interface.drawer.doc.button.view"
                          defaultMessage="查看文档"
                        />
                      </Button>
                      <Button
                        loading={copyingExample}
                        onClick={() => {
                          const id = ensureCurrentRowId();
                          if (!id) {
                            return;
                          }
                          copyExample(id);
                        }}
                      >
                        <FormattedMessage
                          id="interface.drawer.doc.button.copy"
                          defaultMessage="复制示例"
                        />
                      </Button>
                    </Space>
                    {docBlocks.map(renderBlock)}
                    <Typography.Paragraph>
                      {intl.formatMessage({
                        id: 'interface.drawer.doc.tip',
                        defaultMessage:
                          '请在文档中心维护接口说明与示例，便于前后端联调。',
                      })}
                    </Typography.Paragraph>
                  </div>
                ),
              },
              {
                key: 'gateway',
                label: intl.formatMessage({
                  id: 'interface.drawer.tab.gateway',
                  defaultMessage: '网关与治理',
                }),
                children: (
                  <div>
                    <Space style={{ marginBottom: token.marginLG }}>
                      <Button
                        loading={gatewayLoading}
                        onClick={() => {
                          const id = ensureCurrentRowId();
                          if (!id) {
                            return;
                          }
                          setGatewayModalOpen(true);
                        }}
                      >
                        <FormattedMessage
                          id="interface.drawer.gateway.button.edit"
                          defaultMessage="编辑网关策略"
                        />
                      </Button>
                      <Button
                        loading={previewLoading}
                        onClick={() => {
                          const id = ensureCurrentRowId();
                          if (!id) {
                            return;
                          }
                          previewRoute(id);
                        }}
                      >
                        <FormattedMessage
                          id="interface.drawer.gateway.button.preview"
                          defaultMessage="预览路由"
                        />
                      </Button>
                    </Space>
                    {gatewayBlocks.map(renderBlock)}
                  </div>
                ),
              },
              {
                key: 'debug',
                label: intl.formatMessage({
                  id: 'interface.drawer.tab.debug',
                  defaultMessage: '调试与 Mock',
                }),
                children: (
                  <div>
                    <Space style={{ marginBottom: token.marginLG }}>
                      <Button
                        type="primary"
                        loading={startingDebug}
                        onClick={() => {
                          const id = ensureCurrentRowId();
                          if (!id) {
                            return;
                          }
                          startDebug(id);
                        }}
                      >
                        <FormattedMessage
                          id="interface.drawer.debug.button.start"
                          defaultMessage="启动调试"
                        />
                      </Button>
                      <Button
                        loading={viewingMock}
                        onClick={() => {
                          const id = ensureCurrentRowId();
                          if (!id) {
                            return;
                          }
                          viewMock(id);
                        }}
                      >
                        <FormattedMessage
                          id="interface.drawer.debug.button.view"
                          defaultMessage="查看 Mock"
                        />
                      </Button>
                    </Space>
                    <Descriptions column={2} bordered size="small">
                      <Descriptions.Item
                        label={intl.formatMessage({
                          id: 'interface.drawer.debug.status',
                          defaultMessage: 'Mock 状态',
                        })}
                      >
                        {mockStatusText}
                      </Descriptions.Item>
                      <Descriptions.Item
                        label={intl.formatMessage({
                          id: 'interface.drawer.debug.latency',
                          defaultMessage: '平均耗时',
                        })}
                      >
                        {mockLatencyText}
                      </Descriptions.Item>
                    </Descriptions>
                    <Typography.Title
                      level={5}
                      style={{ marginTop: token.marginLG }}
                    >
                      {intl.formatMessage({
                        id: 'interface.drawer.debug.request',
                        defaultMessage: '请求示例',
                      })}
                    </Typography.Title>
                    <Typography.Paragraph
                      style={{
                        background: token.colorFillSecondary,
                        padding: token.paddingSM,
                        borderRadius: token.borderRadiusLG,
                      }}
                    >
                      <pre style={{ margin: 0 }}>{mockRequestSample}</pre>
                    </Typography.Paragraph>
                    <Typography.Title level={5}>
                      {intl.formatMessage({
                        id: 'interface.drawer.debug.response',
                        defaultMessage: '响应示例',
                      })}
                    </Typography.Title>
                    <Typography.Paragraph
                      style={{
                        background: token.colorFillSecondary,
                        padding: token.paddingSM,
                        borderRadius: token.borderRadiusLG,
                      }}
                    >
                      <pre style={{ margin: 0 }}>{mockResponseSample}</pre>
                    </Typography.Paragraph>
                  </div>
                ),
              },
              {
                key: 'integration',
                label: intl.formatMessage({
                  id: 'interface.drawer.tab.integration',
                  defaultMessage: '第三方接入',
                }),
                children: (
                  <div>
                    <Space style={{ marginBottom: token.marginLG }}>
                      <Button
                        type="primary"
                        loading={addingIntegration}
                        onClick={() => {
                          const id = ensureCurrentRowId();
                          if (!id) {
                            return;
                          }
                          setIntegrationModalOpen(true);
                        }}
                      >
                        <FormattedMessage
                          id="interface.drawer.integration.button.add"
                          defaultMessage="新增接入"
                        />
                      </Button>
                      <Button
                        loading={managingKeys}
                        onClick={() => {
                          const id = ensureCurrentRowId();
                          if (!id) {
                            return;
                          }
                          manageKeys(id);
                        }}
                      >
                        <FormattedMessage
                          id="interface.drawer.integration.button.manage"
                          defaultMessage="管理密钥"
                        />
                      </Button>
                    </Space>
                    {integrationBlocks.map(renderBlock)}
                  </div>
                ),
              },
              {
                key: 'changelog',
                label: intl.formatMessage({
                  id: 'interface.drawer.tab.changelog',
                  defaultMessage: '变更记录',
                }),
                children: (
                  <div>
                    <Space style={{ marginBottom: token.marginLG }}>
                      <Button
                        loading={exportingLog}
                        onClick={() => {
                          const id = ensureCurrentRowId();
                          if (!id) {
                            return;
                          }
                          exportChangeLog(id);
                        }}
                      >
                        <FormattedMessage
                          id="interface.drawer.changelog.button.export"
                          defaultMessage="导出记录"
                        />
                      </Button>
                    </Space>
                    {changeLogLoading ? (
                      <Typography.Text type="secondary">
                        {intl.formatMessage({
                          id: 'common.loading',
                          defaultMessage: '加载中...',
                        })}
                      </Typography.Text>
                    ) : changeLogs.length > 0 ? (
                      <Timeline
                        items={changeLogs.map((item) => ({
                          key: item.id,
                          children: (
                            <div>
                              <Typography.Text strong>
                                {item.time}
                              </Typography.Text>
                              <Typography.Paragraph style={{ marginBottom: 4 }}>
                                {item.description}
                              </Typography.Paragraph>
                              <Typography.Text type="secondary">
                                {intl.formatMessage({
                                  id: 'interface.drawer.changelog.operator',
                                  defaultMessage: '操作人',
                                })}
                                {intl.formatMessage({
                                  id: 'common.colon',
                                  defaultMessage: '：',
                                })}
                                {item.operator}
                              </Typography.Text>
                            </div>
                          ),
                        }))}
                      />
                    ) : (
                      <Typography.Text type="secondary">
                        {intl.formatMessage({
                          id: 'interface.drawer.changelog.empty',
                          defaultMessage: '暂无变更记录',
                        })}
                      </Typography.Text>
                    )}
                  </div>
                ),
              },
            ];
          })()}
        />
      </Drawer>

      <ModalForm<InterfaceGatewayFormValues>
        title={intl.formatMessage({
          id: 'interface.gateway.modal.title',
          defaultMessage: '编辑网关策略',
        })}
        open={gatewayModalOpen}
        onOpenChange={setGatewayModalOpen}
        width={520}
        initialValues={gatewayPolicy ?? undefined}
        modalProps={{ destroyOnHidden: true }}
        submitter={{ submitButtonProps: { loading: savingGateway } }}
        onFinish={async (values) => {
          const id = ensureCurrentRowId();
          if (!id) {
            return false;
          }
          const timeoutMs = Number(values.timeoutMs);
          if (Number.isNaN(timeoutMs)) {
            message.error(
              intl.formatMessage({
                id: 'interface.gateway.form.timeout.invalid',
                defaultMessage: '超时设置必须为数字',
              }),
            );
            return false;
          }
          try {
            await saveGatewayPolicy(id, {
              ...values,
              timeoutMs,
            });
            return true;
          } catch (error) {
            return false;
          }
        }}
      >
        <ProFormText
          name="rateLimit"
          label={intl.formatMessage({
            id: 'interface.gateway.form.rateLimit',
            defaultMessage: '限流策略',
          })}
          placeholder={intl.formatMessage({
            id: 'interface.gateway.form.rateLimit.placeholder',
            defaultMessage: '如 2000 次/分钟',
          })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'interface.gateway.form.rateLimit.required',
                defaultMessage: '请输入限流策略',
              }),
            },
          ]}
        />
        <ProFormText
          name="authType"
          label={intl.formatMessage({
            id: 'interface.gateway.form.authType',
            defaultMessage: '鉴权策略',
          })}
          placeholder={intl.formatMessage({
            id: 'interface.gateway.form.authType.placeholder',
            defaultMessage: '如 OAuth2 + 签名校验',
          })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'interface.gateway.form.authType.required',
                defaultMessage: '请输入鉴权策略',
              }),
            },
          ]}
        />
        <ProFormText
          name="timeoutMs"
          label={intl.formatMessage({
            id: 'interface.gateway.form.timeout',
            defaultMessage: '超时设置（毫秒）',
          })}
          placeholder={intl.formatMessage({
            id: 'interface.gateway.form.timeout.placeholder',
            defaultMessage: '如 3000',
          })}
          fieldProps={{ type: 'number', min: 1 }}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'interface.gateway.form.timeout.required',
                defaultMessage: '请输入超时设置',
              }),
            },
          ]}
        />
      </ModalForm>

      <ModalForm<IntegrationFormValues>
        title={intl.formatMessage({
          id: 'interface.integration.modal.title',
          defaultMessage: '新增接入',
        })}
        open={integrationModalOpen}
        onOpenChange={setIntegrationModalOpen}
        width={520}
        modalProps={{ destroyOnHidden: true }}
        submitter={{ submitButtonProps: { loading: addingIntegration } }}
        onFinish={async (values) => {
          const id = ensureCurrentRowId();
          if (!id) {
            return false;
          }
          try {
            await addIntegration(id, values);
            return true;
          } catch (error) {
            return false;
          }
        }}
      >
        <ProFormText
          name="partner"
          label={intl.formatMessage({
            id: 'interface.integration.form.partner',
            defaultMessage: '合作方',
          })}
          placeholder={intl.formatMessage({
            id: 'interface.integration.form.partner.placeholder',
            defaultMessage: '请输入合作方名称',
          })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'interface.integration.form.partner.required',
                defaultMessage: '请输入合作方名称',
              }),
            },
          ]}
        />
        <ProFormText
          name="channel"
          label={intl.formatMessage({
            id: 'interface.integration.form.channel',
            defaultMessage: '接入方式',
          })}
          placeholder={intl.formatMessage({
            id: 'interface.integration.form.channel.placeholder',
            defaultMessage: '请输入接入方式',
          })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'interface.integration.form.channel.required',
                defaultMessage: '请输入接入方式',
              }),
            },
          ]}
        />
      </ModalForm>

      <Modal
        title={intl.formatMessage({
          id: 'interface.gateway.preview.title',
          defaultMessage: '路由预览',
        })}
        open={routePreviewOpen}
        onCancel={() => setRoutePreviewOpen(false)}
        footer={null}
        width={640}
      >
        {routePreview ? (
          <Descriptions column={2} bordered size="small">
            <Descriptions.Item
              label={intl.formatMessage({
                id: 'interface.drawer.gateway.route',
                defaultMessage: '路由标识',
              })}
            >
              {routePreview.routeId}
            </Descriptions.Item>
            <Descriptions.Item
              label={intl.formatMessage({
                id: 'interface.drawer.gateway.upstream',
                defaultMessage: '上游地址',
              })}
            >
              {routePreview.upstream}
            </Descriptions.Item>
            <Descriptions.Item
              label={intl.formatMessage({
                id: 'interface.column.path',
                defaultMessage: '请求路径',
              })}
            >
              {routePreview.path}
            </Descriptions.Item>
            <Descriptions.Item
              label={intl.formatMessage({
                id: 'interface.column.method',
                defaultMessage: '请求方法',
              })}
            >
              {routePreview.method}
            </Descriptions.Item>
            <Descriptions.Item
              label={intl.formatMessage({
                id: 'interface.drawer.gateway.timeout',
                defaultMessage: '超时设置',
              })}
            >
              {intl.formatMessage(
                {
                  id: 'interface.drawer.gateway.timeout.value',
                  defaultMessage: '{value} 秒',
                },
                { value: routePreview.timeoutMs / 1000 },
              )}
            </Descriptions.Item>
            <Descriptions.Item
              label={intl.formatMessage({
                id: 'interface.drawer.gateway.rateLimit',
                defaultMessage: '限流策略',
              })}
            >
              {routePreview.rateLimit}
            </Descriptions.Item>
            <Descriptions.Item
              label={intl.formatMessage({
                id: 'interface.drawer.gateway.auth',
                defaultMessage: '鉴权策略',
              })}
            >
              {routePreview.authType}
            </Descriptions.Item>
          </Descriptions>
        ) : (
          <Typography.Text type="secondary">
            {intl.formatMessage({
              id: 'common.loading',
              defaultMessage: '加载中...',
            })}
          </Typography.Text>
        )}
      </Modal>
    </PageContainer>
  );
};

export default InterfaceManagement;
