import React, { useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import {
  Tabs,
  Form,
  Input,
  InputNumber,
  Select,
  Switch,
  Button,
  Space,
  message,
  Modal,
  Spin,
  Tooltip,
} from 'antd';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import { getSystemConfig, setSystemConfig, reloadSystem } from '@/services/kratos/system';
import { emailTest } from '@/services/kratos/email';
import styles from './index.less';

const { Option } = Select;

interface MongoHost {
  host: string;
  port: string;
}

// 生成UUID
const generateUUID = (): string => {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = (Math.random() * 16) | 0;
    const v = c === 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  }).replace(/-/g, '');
};

const SystemConfigPage: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [activeTab, setActiveTab] = useState('1');
  const [config, setConfig] = useState<any>({});
  const [mongoHosts, setMongoHosts] = useState<MongoHost[]>([{ host: '', port: '' }]);

  // 加载配置
  const loadConfig = async () => {
    setLoading(true);
    try {
      const res = await getSystemConfig();
      if (res.code === 0 && res.data?.config) {
        const configData = res.data.config;
        setConfig(configData);
        form.setFieldsValue(configData);
        if (configData.mongo?.hosts) {
          setMongoHosts(configData.mongo.hosts);
        }
      }
    } catch (error) {
      message.error('加载配置失败');
    } finally {
      setLoading(false);
    }
  };

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


  // 更新配置
  const handleUpdate = async () => {
    try {
      const values = await form.validateFields();
      // 合并mongo hosts
      if (values.mongo) {
        values.mongo.hosts = mongoHosts;
      }
      const res = await setSystemConfig({ config: values });
      if (res.code === 0) {
        message.success('配置文件设置成功');
        loadConfig();
      }
    } catch (error) {
      message.error('保存配置失败');
    }
  };

  // 重载服务
  const handleReload = () => {
    Modal.confirm({
      title: '警告',
      content: '确定要重载服务?',
      onOk: async () => {
        try {
          const res = await reloadSystem();
          if (res.code === 0) {
            message.success('操作成功');
          }
        } catch (error) {
          message.error('重载服务失败');
        }
      },
    });
  };

  // 测试邮件
  const handleEmailTest = async () => {
    try {
      const res = await emailTest({ to: form.getFieldValue(['email', 'to']) });
      if (res.code === 0) {
        message.success('邮件发送成功');
      } else {
        message.error('邮件发送失败');
      }
    } catch (error) {
      message.error('邮件发送失败');
    }
  };

  // 生成JWT签名
  const handleGenerateUUID = () => {
    const uuid = generateUUID();
    form.setFieldValue(['jwt', 'signing-key'], uuid);
  };

  // 添加Mongo节点
  const addMongoNode = () => {
    setMongoHosts([...mongoHosts, { host: '', port: '' }]);
  };

  // 删除Mongo节点
  const removeMongoNode = (index: number) => {
    if (mongoHosts.length > 1) {
      const newHosts = mongoHosts.filter((_, i) => i !== index);
      setMongoHosts(newHosts);
    }
  };

  // 更新Mongo节点
  const updateMongoHost = (index: number, field: 'host' | 'port', value: string) => {
    const newHosts = [...mongoHosts];
    newHosts[index][field] = value;
    setMongoHosts(newHosts);
  };

  const useRedis = Form.useWatch(['system', 'use-redis'], form);
  const useMongo = Form.useWatch(['system', 'use-mongo'], form);
  const dbType = Form.useWatch(['system', 'db-type'], form);
  const ossType = Form.useWatch(['system', 'oss-type'], form);

  // 数据库配置表单项
  const renderDbConfig = (type: string, prefix: string) => (
    <>
      <h3 className={styles.dbTitle}>{type}</h3>
      <Form.Item label="用户名" name={[prefix, 'username']}>
        <Input placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item label="密码" name={[prefix, 'password']}>
        <Input placeholder="请输入密码" />
      </Form.Item>
      <Form.Item label="地址" name={[prefix, 'path']}>
        <Input placeholder="请输入地址" />
      </Form.Item>
      {(prefix === 'mssql' || prefix === 'sqlite') && (
        <Form.Item label="端口" name={[prefix, 'port']}>
          <Input placeholder="请输入端口" />
        </Form.Item>
      )}
      <Form.Item label="数据库名称" name={[prefix, 'db-name']}>
        <Input placeholder="请输入数据库名称" />
      </Form.Item>
      {prefix !== 'sqlite' && (
        <>
          <Form.Item label="前缀" name={[prefix, 'prefix']}>
            <Input placeholder="默认为空" />
          </Form.Item>
          <Form.Item label="复数表" name={[prefix, 'singular']} valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item label="引擎" name={[prefix, 'engine']}>
            <Input placeholder="默认为InnoDB" />
          </Form.Item>
        </>
      )}
      <Form.Item label="maxIdleConns" name={[prefix, 'max-idle-conns']}>
        <InputNumber min={1} style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item label="maxOpenConns" name={[prefix, 'max-open-conns']}>
        <InputNumber min={1} style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item label="写入日志" name={[prefix, 'log-zap']} valuePropName="checked">
        <Switch />
      </Form.Item>
      <Form.Item label="日志模式" name={[prefix, 'log-mode']}>
        <Select>
          <Option value="off">关闭</Option>
          <Option value="fatal">致命</Option>
          <Option value="error">错误</Option>
          <Option value="warn">警告</Option>
          <Option value="info">信息</Option>
          <Option value="debug">调试</Option>
          <Option value="trace">跟踪</Option>
        </Select>
      </Form.Item>
    </>
  );


  const tabItems = [
    {
      key: '1',
      label: '系统配置',
      children: (
        <>
          <Form.Item label="端口值" name={['system', 'addr']}>
            <InputNumber placeholder="请输入端口值" style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="数据库类型" name={['system', 'db-type']}>
            <Select>
              <Option value="mysql">mysql</Option>
              <Option value="pgsql">pgsql</Option>
              <Option value="mssql">mssql</Option>
              <Option value="sqlite">sqlite</Option>
              <Option value="oracle">oracle</Option>
            </Select>
          </Form.Item>
          <Form.Item label="Oss类型" name={['system', 'oss-type']}>
            <Select>
              <Option value="local">本地</Option>
              <Option value="qiniu">七牛</Option>
              <Option value="tencent-cos">腾讯云COS</Option>
              <Option value="aliyun-oss">阿里云OSS</Option>
              <Option value="huawei-obs">华为云OBS</Option>
              <Option value="cloudflare-r2">cloudflare R2</Option>
            </Select>
          </Form.Item>
          <Form.Item label="多点登录拦截" name={['system', 'use-multipoint']} valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item label="开启redis" name={['system', 'use-redis']} valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item label="开启Mongo" name={['system', 'use-mongo']} valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item label="严格角色模式" name={['system', 'use-strict-auth']} valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item label="限流次数" name={['system', 'iplimit-count']}>
            <InputNumber style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="限流时间" name={['system', 'iplimit-time']}>
            <InputNumber style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="禁用自动迁移数据库表结构" name={['system', 'disable-auto-migrate']} valuePropName="checked">
            <Switch />
          </Form.Item>
          <Tooltip title="请修改完成后，注意一并修改前端env环境下的VITE_BASE_PATH">
            <Form.Item label="全局路由前缀" name={['system', 'router-prefix']}>
              <Input placeholder="请输入全局路由前缀" />
            </Form.Item>
          </Tooltip>
        </>
      ),
    },
    {
      key: '2',
      label: 'jwt签名',
      children: (
        <>
          <Form.Item label="jwt签名" name={['jwt', 'signing-key']}>
            <Input
              placeholder="请输入jwt签名"
              addonAfter={<Button type="link" size="small" onClick={handleGenerateUUID}>生成</Button>}
            />
          </Form.Item>
          <Form.Item label="有效期" name={['jwt', 'expires-time']}>
            <Input placeholder="请输入有效期" />
          </Form.Item>
          <Form.Item label="缓冲期" name={['jwt', 'buffer-time']}>
            <Input placeholder="请输入缓冲期" />
          </Form.Item>
          <Form.Item label="签发者" name={['jwt', 'issuer']}>
            <Input placeholder="请输入签发者" />
          </Form.Item>
        </>
      ),
    },
    {
      key: '3',
      label: 'Zap日志配置',
      children: (
        <>
          <Form.Item label="级别" name={['zap', 'level']}>
            <Select>
              <Option value="off">关闭</Option>
              <Option value="fatal">致命</Option>
              <Option value="error">错误</Option>
              <Option value="warn">警告</Option>
              <Option value="info">信息</Option>
              <Option value="debug">调试</Option>
              <Option value="trace">跟踪</Option>
            </Select>
          </Form.Item>
          <Form.Item label="输出" name={['zap', 'format']}>
            <Select>
              <Option value="console">console</Option>
              <Option value="json">json</Option>
            </Select>
          </Form.Item>
          <Form.Item label="日志前缀" name={['zap', 'prefix']}>
            <Input placeholder="请输入日志前缀" />
          </Form.Item>
          <Form.Item label="日志文件夹" name={['zap', 'director']}>
            <Input placeholder="请输入日志文件夹" />
          </Form.Item>
          <Form.Item label="编码级" name={['zap', 'encode-level']}>
            <Select style={{ width: '50%' }}>
              <Option value="LowercaseLevelEncoder">LowercaseLevelEncoder</Option>
              <Option value="LowercaseColorLevelEncoder">LowercaseColorLevelEncoder</Option>
              <Option value="CapitalLevelEncoder">CapitalLevelEncoder</Option>
              <Option value="CapitalColorLevelEncoder">CapitalColorLevelEncoder</Option>
            </Select>
          </Form.Item>
          <Form.Item label="栈名" name={['zap', 'stacktrace-key']}>
            <Input placeholder="请输入栈名" />
          </Form.Item>
          <Form.Item label="日志留存时间(默认以天为单位)" name={['zap', 'retention-day']}>
            <InputNumber style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="显示行" name={['zap', 'show-line']} valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item label="输出控制台" name={['zap', 'log-in-console']} valuePropName="checked">
            <Switch />
          </Form.Item>
        </>
      ),
    },
  ];


  // Redis配置
  if (useRedis) {
    tabItems.push({
      key: '4',
      label: 'Redis',
      children: (
        <>
          <Form.Item label="库" name={['redis', 'db']}>
            <InputNumber min={0} max={16} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="地址" name={['redis', 'addr']}>
            <Input placeholder="请输入地址" />
          </Form.Item>
          <Form.Item label="密码" name={['redis', 'password']}>
            <Input placeholder="请输入密码" />
          </Form.Item>
        </>
      ),
    });
  }

  // 邮箱配置
  tabItems.push({
    key: '5',
    label: '邮箱配置',
    children: (
      <>
        <Form.Item label="接收者邮箱" name={['email', 'to']}>
          <Input placeholder="可多个，以逗号分隔" />
        </Form.Item>
        <Form.Item label="端口" name={['email', 'port']}>
          <InputNumber style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item label="发送者邮箱" name={['email', 'from']}>
          <Input placeholder="请输入发送者邮箱" />
        </Form.Item>
        <Form.Item label="host" name={['email', 'host']}>
          <Input placeholder="请输入host" />
        </Form.Item>
        <Form.Item label="是否为ssl" name={['email', 'is-ssl']} valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label="是否LoginAuth认证" name={['email', 'is-loginauth']} valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label="secret" name={['email', 'secret']}>
          <Input placeholder="请输入secret" />
        </Form.Item>
        <Form.Item label="测试邮件">
          <Button onClick={handleEmailTest}>测试邮件</Button>
        </Form.Item>
      </>
    ),
  });

  // 验证码配置
  tabItems.push({
    key: '7',
    label: '验证码配置',
    children: (
      <>
        <Form.Item label="字符长度" name={['captcha', 'key-long']}>
          <InputNumber min={4} max={6} style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item label="图片宽度" name={['captcha', 'img-width']}>
          <InputNumber style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item label="图片高度" name={['captcha', 'img-height']}>
          <InputNumber style={{ width: '100%' }} />
        </Form.Item>
      </>
    ),
  });

  // 数据库配置
  tabItems.push({
    key: '9',
    label: '数据库配置',
    children: (
      <>
        {dbType === 'mysql' && renderDbConfig('MySQL', 'mysql')}
        {dbType === 'pgsql' && renderDbConfig('PostgreSQL', 'pgsql')}
        {dbType === 'mssql' && renderDbConfig('MsSQL', 'mssql')}
        {dbType === 'sqlite' && renderDbConfig('SQLite', 'sqlite')}
        {dbType === 'oracle' && renderDbConfig('Oracle', 'oracle')}
      </>
    ),
  });


  // OSS配置
  tabItems.push({
    key: '10',
    label: 'oss配置',
    children: (
      <>
        {ossType === 'local' && (
          <>
            <h3 className={styles.dbTitle}>本地配置</h3>
            <Form.Item label="本地文件访问路径" name={['local', 'path']}>
              <Input placeholder="请输入本地文件访问路径" />
            </Form.Item>
            <Form.Item label="本地文件存储路径" name={['local', 'store-path']}>
              <Input placeholder="请输入本地文件存储路径" />
            </Form.Item>
          </>
        )}
        {ossType === 'qiniu' && (
          <>
            <h3 className={styles.dbTitle}>七牛上传配置</h3>
            <Form.Item label="存储区域" name={['qiniu', 'zone']}>
              <Input placeholder="请输入存储区域" />
            </Form.Item>
            <Form.Item label="空间名称" name={['qiniu', 'bucket']}>
              <Input placeholder="请输入空间名称" />
            </Form.Item>
            <Form.Item label="CDN加速域名" name={['qiniu', 'img-path']}>
              <Input placeholder="请输入CDN加速域名" />
            </Form.Item>
            <Form.Item label="是否使用https" name={['qiniu', 'use-https']} valuePropName="checked">
              <Switch />
            </Form.Item>
            <Form.Item label="accessKey" name={['qiniu', 'access-key']}>
              <Input placeholder="请输入accessKey" />
            </Form.Item>
            <Form.Item label="secretKey" name={['qiniu', 'secret-key']}>
              <Input placeholder="请输入secretKey" />
            </Form.Item>
            <Form.Item label="上传是否使用CDN上传加速" name={['qiniu', 'use-cdn-domains']} valuePropName="checked">
              <Switch />
            </Form.Item>
          </>
        )}
        {ossType === 'tencent-cos' && (
          <>
            <h3 className={styles.dbTitle}>腾讯云COS上传配置</h3>
            <Form.Item label="存储桶名称" name={['tencent-cos', 'bucket']}>
              <Input placeholder="请输入存储桶名称" />
            </Form.Item>
            <Form.Item label="所属地域" name={['tencent-cos', 'region']}>
              <Input placeholder="请输入所属地域" />
            </Form.Item>
            <Form.Item label="secretID" name={['tencent-cos', 'secret-id']}>
              <Input placeholder="请输入secretID" />
            </Form.Item>
            <Form.Item label="secretKey" name={['tencent-cos', 'secret-key']}>
              <Input placeholder="请输入secretKey" />
            </Form.Item>
            <Form.Item label="路径前缀" name={['tencent-cos', 'path-prefix']}>
              <Input placeholder="请输入路径前缀" />
            </Form.Item>
            <Form.Item label="访问域名" name={['tencent-cos', 'base-url']}>
              <Input placeholder="请输入访问域名" />
            </Form.Item>
          </>
        )}
        {ossType === 'aliyun-oss' && (
          <>
            <h3 className={styles.dbTitle}>阿里云OSS上传配置</h3>
            <Form.Item label="区域" name={['aliyun-oss', 'endpoint']}>
              <Input placeholder="请输入区域" />
            </Form.Item>
            <Form.Item label="accessKeyId" name={['aliyun-oss', 'access-key-id']}>
              <Input placeholder="请输入accessKeyId" />
            </Form.Item>
            <Form.Item label="accessKeySecret" name={['aliyun-oss', 'access-key-secret']}>
              <Input placeholder="请输入accessKeySecret" />
            </Form.Item>
            <Form.Item label="存储桶名称" name={['aliyun-oss', 'bucket-name']}>
              <Input placeholder="请输入存储桶名称" />
            </Form.Item>
            <Form.Item label="访问域名" name={['aliyun-oss', 'bucket-url']}>
              <Input placeholder="请输入访问域名" />
            </Form.Item>
          </>
        )}
        {ossType === 'huawei-obs' && (
          <>
            <h3 className={styles.dbTitle}>华为云OBS上传配置</h3>
            <Form.Item label="路径" name={['hua-wei-obs', 'path']}>
              <Input placeholder="请输入路径" />
            </Form.Item>
            <Form.Item label="存储桶名称" name={['hua-wei-obs', 'bucket']}>
              <Input placeholder="请输入存储桶名称" />
            </Form.Item>
            <Form.Item label="区域" name={['hua-wei-obs', 'endpoint']}>
              <Input placeholder="请输入区域" />
            </Form.Item>
            <Form.Item label="accessKey" name={['hua-wei-obs', 'access-key']}>
              <Input placeholder="请输入accessKey" />
            </Form.Item>
            <Form.Item label="secretKey" name={['hua-wei-obs', 'secret-key']}>
              <Input placeholder="请输入secretKey" />
            </Form.Item>
          </>
        )}
        {ossType === 'cloudflare-r2' && (
          <>
            <h3 className={styles.dbTitle}>Cloudflare R2上传配置</h3>
            <Form.Item label="路径" name={['cloudflare-r2', 'path']}>
              <Input placeholder="请输入路径" />
            </Form.Item>
            <Form.Item label="存储桶名称" name={['cloudflare-r2', 'bucket']}>
              <Input placeholder="请输入存储桶名称" />
            </Form.Item>
            <Form.Item label="Base URL" name={['cloudflare-r2', 'base-url']}>
              <Input placeholder="请输入Base URL" />
            </Form.Item>
            <Form.Item label="Account ID" name={['cloudflare-r2', 'account-id']}>
              <Input placeholder="请输入Account ID" />
            </Form.Item>
            <Form.Item label="Access Key ID" name={['cloudflare-r2', 'access-key-id']}>
              <Input placeholder="请输入Access Key ID" />
            </Form.Item>
            <Form.Item label="Secret Access Key" name={['cloudflare-r2', 'secret-access-key']}>
              <Input placeholder="请输入Secret Access Key" />
            </Form.Item>
          </>
        )}
      </>
    ),
  });


  // Excel上传配置
  tabItems.push({
    key: '11',
    label: 'Excel上传配置',
    children: (
      <Form.Item label="合成目标地址" name={['excel', 'dir']}>
        <Input placeholder="请输入合成目标地址" />
      </Form.Item>
    ),
  });

  // 自动化代码配置
  tabItems.push({
    key: '12',
    label: '自动化代码配置',
    children: (
      <>
        <Form.Item label="是否自动重启(linux)" name={['autocode', 'transfer-restart']} valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label="root(项目根路径)" name={['autocode', 'root']}>
          <Input disabled />
        </Form.Item>
        <Form.Item label="Server(后端代码地址)" name={['autocode', 'server']}>
          <Input placeholder="请输入后端代码地址" />
        </Form.Item>
        <Form.Item label="SApi(后端api文件夹地址)" name={['autocode', 'server-api']}>
          <Input placeholder="请输入后端api文件夹地址" />
        </Form.Item>
        <Form.Item label="SInitialize(后端Initialize文件夹)" name={['autocode', 'server-initialize']}>
          <Input placeholder="请输入后端Initialize文件夹" />
        </Form.Item>
        <Form.Item label="SModel(后端Model文件地址)" name={['autocode', 'server-model']}>
          <Input placeholder="请输入后端Model文件地址" />
        </Form.Item>
        <Form.Item label="SRequest(后端Request文件夹地址)" name={['autocode', 'server-request']}>
          <Input placeholder="请输入后端Request文件夹地址" />
        </Form.Item>
        <Form.Item label="SRouter(后端Router文件夹地址)" name={['autocode', 'server-router']}>
          <Input placeholder="请输入后端Router文件夹地址" />
        </Form.Item>
        <Form.Item label="SService(后端Service文件夹地址)" name={['autocode', 'server-service']}>
          <Input placeholder="请输入后端Service文件夹地址" />
        </Form.Item>
        <Form.Item label="Web(前端文件夹地址)" name={['autocode', 'web']}>
          <Input placeholder="请输入前端文件夹地址" />
        </Form.Item>
        <Form.Item label="WApi(后端WApi文件夹地址)" name={['autocode', 'web-api']}>
          <Input placeholder="请输入后端WApi文件夹地址" />
        </Form.Item>
        <Form.Item label="WForm(后端WForm文件夹地址)" name={['autocode', 'web-form']}>
          <Input placeholder="请输入后端WForm文件夹地址" />
        </Form.Item>
        <Form.Item label="WTable(后端WTable文件夹地址)" name={['autocode', 'web-table']}>
          <Input placeholder="请输入后端WTable文件夹地址" />
        </Form.Item>
      </>
    ),
  });

  // Mongo配置
  if (useMongo) {
    tabItems.push({
      key: '14',
      label: 'Mongo 数据库配置',
      children: (
        <>
          <Form.Item label="collection name(表名,一般不写)" name={['mongo', 'coll']}>
            <Input placeholder="请输入collection name" />
          </Form.Item>
          <Form.Item label="mongodb 选项" name={['mongo', 'options']}>
            <Input placeholder="请输入mongodb 选项" />
          </Form.Item>
          <Form.Item label="database name(数据库名)" name={['mongo', 'database']}>
            <Input placeholder="请输入数据库名" />
          </Form.Item>
          <Form.Item label="用户名" name={['mongo', 'username']}>
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item label="密码" name={['mongo', 'password']}>
            <Input placeholder="请输入密码" />
          </Form.Item>
          <Form.Item label="最小连接池" name={['mongo', 'min-pool-size']}>
            <InputNumber min={0} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="最大连接池" name={['mongo', 'max-pool-size']}>
            <InputNumber min={100} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="socket超时时间" name={['mongo', 'socket-timeout-ms']}>
            <InputNumber min={0} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="连接超时时间" name={['mongo', 'connect-timeout-ms']}>
            <InputNumber min={0} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="是否开启zap日志" name={['mongo', 'is-zap']} valuePropName="checked">
            <Switch />
          </Form.Item>
          {mongoHosts.map((host, index) => (
            <Form.Item key={index} label={`节点 ${index + 1}`}>
              <Space>
                <Input
                  placeholder="请输入地址"
                  value={host.host}
                  onChange={(e) => updateMongoHost(index, 'host', e.target.value)}
                  style={{ width: 200 }}
                />
                <Input
                  placeholder="请输入端口"
                  value={host.port}
                  onChange={(e) => updateMongoHost(index, 'port', e.target.value)}
                  style={{ width: 120 }}
                />
                {index > 0 && (
                  <Button
                    type="primary"
                    danger
                    size="small"
                    icon={<MinusOutlined />}
                    onClick={() => removeMongoNode(index)}
                  />
                )}
              </Space>
            </Form.Item>
          ))}
          <Form.Item label=" " colon={false}>
            <Button type="primary" size="small" icon={<PlusOutlined />} onClick={addMongoNode} />
          </Form.Item>
        </>
      ),
    });
  }


  return (
    <PageContainer>
      <Spin spinning={loading}>
        <div className={styles.systemConfig}>
          <Form form={form} layout="horizontal" labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
            <Tabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} />
          </Form>
          <div className={styles.buttonGroup}>
            <Space>
              <Button type="primary" onClick={handleUpdate}>
                立即更新
              </Button>
              <Button type="primary" onClick={handleReload}>
                重载服务
              </Button>
            </Space>
          </div>
        </div>
      </Spin>
    </PageContainer>
  );
};

export default SystemConfigPage;
