import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Button,
  Form,
  Input,
  InputNumber,
  Modal,
  Radio,
  Select,
  Space,
  Switch,
  Tabs,
  message,
} from 'antd';
import { FinalMaskForm } from '@/lib/xray/forms/transport';
import { HeaderMapEditor } from '@/components/form';
import { HysteriaMasqueradeForm } from '@/lib/xray/forms/protocols/shared';
import { JsonEditor } from '@/components/form';
import { Wireguard } from '@/utils';
import {
  XMUX_DEFAULTS,
  formValuesToWirePayload,
  rawOutboundToFormValues,
} from '@/lib/xray/outbound-form-adapter';
import { parseOutboundLink } from '@/lib/xray/outbound-link-parser';
import {
  OutboundFormBaseSchema,
  type OutboundFormValues,
} from '@/schemas/forms/outbound-form';
import {
  DOMAIN_STRATEGY_OPTION,
  SNIFFING_OPTION,
  TCP_CONGESTION_OPTION,
} from '@/schemas/primitives';
import {
  HappyEyeballsSchema,
  SockoptStreamSettingsSchema,
} from '@/schemas/protocols/stream/sockopt';
import {
  canEnableReality,
  canEnableStream,
  canEnableTls,
  canEnableTlsFlow,
} from '@/lib/xray/protocol-capabilities';
import { antdRule } from '@/utils/zodForm';

import {
  ADDRESS_PORT_STRATEGY_OPTIONS,
  ALPN_OPTIONS,
  FLOW_OPTIONS,
  HYSTERIA_NETWORK_OPTION,
  MODE_OPTIONS,
  NETWORK_OPTIONS,
  PROTOCOL_OPTIONS,
  SERVER_PROTOCOLS,
  UTLS_OPTIONS,
} from './outbound-form-constants';
import {
  buildAddModeValues,
  hysteriaStreamSlice,
  isMuxAllowed,
  newStreamSlice,
} from './outbound-form-helpers';
import {
  BlackholeFields,
  DnsFields,
  FreedomFields,
  HttpFields,
  LoopbackFields,
  ServerTarget,
  ShadowsocksFields,
  SocksFields,
  TrojanFields,
  VlessFields,
  VmessFields,
  WireguardFields,
} from './protocols';
import './OutboundFormModal.css';

// Pattern A rewrite of OutboundFormModal. Built as a sibling `.new.tsx`
// file so the build stays green section-by-section. The atomic swap at
// the end of the rewrite replaces the legacy file in one commit
// (per Core Decision 7 in the migration spec).

interface OutboundFormModalProps {
  open: boolean;
  outbound: Record<string, unknown> | null;
  existingTags: string[];
  onClose: () => void;
  onConfirm: (outbound: Record<string, unknown>) => void;
}


export default function OutboundFormModal({
  open,
  outbound: outboundProp,
  existingTags,
  onClose,
  onConfirm,
}: OutboundFormModalProps) {
  const { t } = useTranslation();
  const [messageApi, messageContextHolder] = message.useMessage();
  const [form] = Form.useForm<OutboundFormValues>();
  const [activeKey, setActiveKey] = useState('1');
  const [jsonText, setJsonText] = useState('');
  const [jsonDirty, setJsonDirty] = useState(false);
  const [linkInput, setLinkInput] = useState('');

  // Parse a share link (vmess:// / vless:// / trojan:// / ss:// /
  // hysteria2:// / wireguard://) and replace form state with the result.
  // The current tag is preserved when the parsed link doesn't carry one.
  function importLink() {
    const link = linkInput.trim();
    if (!link) return;
    const parsed = parseOutboundLink(link);
    if (!parsed) {
      messageApi.error('Wrong Link!');
      return;
    }
    const currentTag = form.getFieldValue('tag') as string | undefined;
    if (!parsed.tag && currentTag) parsed.tag = currentTag;
    const next = rawOutboundToFormValues(parsed);
    form.resetFields();
    form.setFieldsValue(next);
    setJsonText(JSON.stringify(formValuesToWirePayload(next), null, 2));
    setJsonDirty(false);
    setLinkInput('');
    messageApi.success('Link imported successfully');
    switchTab('1');
  }

  const isEdit = outboundProp != null;
  const title = isEdit
    ? `${t('edit')} ${t('pages.xray.Outbounds')}`
    : `+ ${t('pages.xray.Outbounds')}`;
  const okText = isEdit ? t('pages.clients.submitEdit') : t('create');

  useEffect(() => {
    if (!open) return;
    const initial = outboundProp
      ? rawOutboundToFormValues(outboundProp)
      : buildAddModeValues();
    form.resetFields();
    form.setFieldsValue(initial);
    setActiveKey('1');
    setJsonText(JSON.stringify(formValuesToWirePayload(initial), null, 2));
    setJsonDirty(false);
  }, [open, outboundProp, form]);

  const tag = Form.useWatch('tag', form) ?? '';
  const protocol = (Form.useWatch('protocol', form) ?? 'vless') as string;
  const network = (Form.useWatch(['streamSettings', 'network'], { form, preserve: true }) ?? '') as string;
  const security = (Form.useWatch(['streamSettings', 'security'], { form, preserve: true }) ?? 'none') as string;
  const streamAllowed = canEnableStream({ protocol });
  const tlsAllowed = canEnableTls({ protocol, streamSettings: { network, security } });
  const realityAllowed = canEnableReality({ protocol, streamSettings: { network, security } });
  const tlsFlowAllowed = canEnableTlsFlow({ protocol, streamSettings: { network, security } });

  useEffect(() => {
    if (!streamAllowed) return;
    if (network) return;
    form.setFieldValue('streamSettings', { ...newStreamSlice('tcp'), security: 'none' });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [streamAllowed, network]);

  useEffect(() => {
    if (protocol !== 'hysteria') return;
    if (network === 'hysteria' && security === 'tls') return;
    const existing = (form.getFieldValue('streamSettings') ?? {}) as Record<string, unknown>;
    const slice = hysteriaStreamSlice();
    if (existing.hysteriaSettings) slice.hysteriaSettings = existing.hysteriaSettings;
    if (existing.tlsSettings) slice.tlsSettings = existing.tlsSettings;
    form.setFieldValue('streamSettings', slice);
  }, [protocol, network, security]);

  const wgSecretKey = Form.useWatch(['settings', 'secretKey'], form) as string | undefined;
  useEffect(() => {
    if (protocol !== 'wireguard') return;
    const sk = (wgSecretKey ?? '').trim();
    if (!sk) {
      form.setFieldValue(['settings', 'pubKey'], '');
      return;
    }
    try {
      const { publicKey } = Wireguard.generateKeypair(sk);
      form.setFieldValue(['settings', 'pubKey'], publicKey);
    } catch {
      form.setFieldValue(['settings', 'pubKey'], '');
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [protocol, wgSecretKey]);

  function onValuesChange(changed: Partial<OutboundFormValues>) {
    if ('protocol' in changed && changed.protocol) {
      const next = rawOutboundToFormValues({ protocol: changed.protocol });
      form.setFieldValue('settings', next.settings);
      if (changed.protocol === 'hysteria') {
        form.setFieldValue('streamSettings', hysteriaStreamSlice());
      } else if ((form.getFieldValue(['streamSettings', 'network']) ?? '') === 'hysteria') {
        form.setFieldValue('streamSettings', { ...newStreamSlice('tcp'), security: 'none' });
      }
    }
  }

  function onSecurityChange(next: string) {
    const stream = form.getFieldValue('streamSettings') ?? {};
    const cleaned = { ...stream } as Record<string, unknown>;
    delete cleaned.tlsSettings;
    delete cleaned.realitySettings;
    if (next === 'tls') {
      cleaned.tlsSettings = {
        serverName: '',
        alpn: [],
        fingerprint: '',
        echConfigList: '',
        verifyPeerCertByName: '',
        pinnedPeerCertSha256: '',
      };
    } else if (next === 'reality') {
      cleaned.realitySettings = {
        publicKey: '',
        fingerprint: 'chrome',
        serverName: '',
        shortId: '',
        spiderX: '',
        mldsa65Verify: '',
      };
    }
    cleaned.security = next;
    form.setFieldValue('streamSettings', cleaned);
  }

  // Network change cascade: swap the per-network sub-key (tcpSettings,
  // wsSettings, etc.) so the DU branch matches. Preserve security if
  // the new network supports it, otherwise force back to 'none'.
  function onNetworkChange(next: string) {
    if (next === 'hysteria') {
      form.setFieldValue('streamSettings', hysteriaStreamSlice());
      return;
    }
    const currentSecurity = form.getFieldValue(['streamSettings', 'security']) ?? 'none';
    const stillAllowed = canEnableTls({ protocol, streamSettings: { network: next, security: currentSecurity } });
    const stillReality = canEnableReality({ protocol, streamSettings: { network: next, security: currentSecurity } });
    const newSecurity =
      currentSecurity === 'tls' && !stillAllowed
        ? 'none'
        : currentSecurity === 'reality' && !stillReality
          ? 'none'
          : currentSecurity;
    form.setFieldValue('streamSettings', { ...newStreamSlice(next), security: newSecurity });
  }

  function onXmuxToggle(checked: boolean) {
    if (!checked) return;
    const existing = form.getFieldValue(['streamSettings', 'xhttpSettings', 'xmux']);
    const hasValues = existing && typeof existing === 'object' && Object.keys(existing).length > 0;
    if (hasValues) return;
    form.setFieldValue(['streamSettings', 'xhttpSettings', 'xmux'], { ...XMUX_DEFAULTS });
  }

  const duplicateTag = useMemo(() => {
    const myTag = tag.trim();
    if (!myTag) return false;
    if (isEdit && (outboundProp?.tag as string | undefined) === myTag) return false;
    return (existingTags || []).includes(myTag);
  }, [tag, existingTags, isEdit, outboundProp]);

  // Bridge form ↔ JSON tab: when leaving the JSON tab back to Basic, push
  // any edits into form state. When entering JSON tab, snapshot current
  // form values so the user sees the live shape.
  function applyJsonToForm(): boolean {
    if (!jsonDirty) return true;
    const raw = jsonText.trim();
    if (!raw) return true;
    let parsed: Record<string, unknown>;
    try {
      parsed = JSON.parse(raw) as Record<string, unknown>;
    } catch (e) {
      messageApi.error(`JSON: ${(e as Error).message}`);
      return false;
    }
    const next = rawOutboundToFormValues(parsed);
    form.resetFields();
    form.setFieldsValue(next);
    setJsonDirty(false);
    return true;
  }

  function switchTab(key: string) {
    if (typeof document !== 'undefined') {
      (document.activeElement as HTMLElement | null)?.blur?.();
    }
    setActiveKey(key);
  }

  function onTabChange(key: string) {
    if (key === '2') {
      const values = form.getFieldsValue(true) as OutboundFormValues;
      setJsonText(JSON.stringify(formValuesToWirePayload(values), null, 2));
      setJsonDirty(false);
      switchTab(key);
      return;
    }
    if (key === '1' && activeKey === '2') {
      if (!applyJsonToForm()) return;
    }
    switchTab(key);
  }

  async function onOk() {
    let values: OutboundFormValues;
    if (activeKey === '2') {
      const raw = jsonText.trim();
      if (!raw) return;
      let parsed: Record<string, unknown>;
      try {
        parsed = JSON.parse(raw) as Record<string, unknown>;
      } catch (e) {
        messageApi.error(`JSON: ${(e as Error).message}`);
        return;
      }
      values = rawOutboundToFormValues(parsed);
      form.resetFields();
      form.setFieldsValue(values);
      setJsonDirty(false);
    } else {
      try {
        await form.validateFields();
      } catch {
        return;
      }
      values = form.getFieldsValue(true) as OutboundFormValues;
    }
    const tagValue = (values.tag ?? '').trim();
    if (!tagValue) {
      messageApi.error(t('pages.xray.outboundForm.tagRequired'));
      return;
    }
    const isDuplicateTag = (existingTags || []).includes(tagValue)
      && !(isEdit && (outboundProp?.tag as string | undefined) === tagValue);
    if (isDuplicateTag) {
      messageApi.error('Tag already used by another outbound');
      return;
    }
    onConfirm(formValuesToWirePayload(values));
  }

  return (
    <>
      {messageContextHolder}
      <Modal
        open={open}
        title={title}
        okText={okText}
        cancelText={t('close')}
        mask={{ closable: false }}
        width={780}
        onOk={onOk}
        onCancel={onClose}
        destroyOnHidden
      >
        <Form
          form={form}
          colon={false}
          labelCol={{ md: { span: 8 } }}
          wrapperCol={{ md: { span: 14 } }}
          onValuesChange={onValuesChange}
        >
          <Tabs
            activeKey={activeKey}
            onChange={onTabChange}
            items={[
              {
                key: '1',
                label: t('pages.xray.basicTemplate'),
                children: (
                  <>
                    <Form.Item
                      label={t('protocol')}
                      name="protocol"
                      rules={[antdRule(OutboundFormBaseSchema.shape.tag, t)]}
                    >
                      <Select options={PROTOCOL_OPTIONS} />
                    </Form.Item>

                    <Form.Item
                      label={t('pages.xray.outbound.tag')}
                      name="tag"
                      validateStatus={duplicateTag ? 'warning' : undefined}
                      help={duplicateTag ? t('pages.xray.outboundForm.tagDuplicate') : undefined}
                      rules={[
                        { required: true, message: t('pages.xray.outboundForm.tagRequired') },
                      ]}
                    >
                      <Input placeholder={t('pages.xray.outboundForm.tagPlaceholder')} />
                    </Form.Item>

                    <Form.Item label={t('pages.xray.outbound.sendThrough')} name="sendThrough">
                      <Input placeholder={t('pages.xray.outboundForm.localIpPlaceholder')} />
                    </Form.Item>

                    {SERVER_PROTOCOLS.has(protocol) && <ServerTarget />}
                    {protocol === 'vmess' && <VmessFields />}
                    {protocol === 'vless' && <VlessFields />}
                    {protocol === 'trojan' && <TrojanFields />}
                    {protocol === 'shadowsocks' && <ShadowsocksFields />}
                    {protocol === 'http' && <HttpFields />}
                    {protocol === 'socks' && <SocksFields />}

                    {protocol === 'loopback' && <LoopbackFields />}
                    {protocol === 'blackhole' && <BlackholeFields />}
                    {protocol === 'dns' && <DnsFields />}

                    {protocol === 'freedom' && <FreedomFields form={form} />}

                    {protocol === 'vless' && (
                      <Form.Item shouldUpdate noStyle>
                        {() => {
                          const reverseTag = form.getFieldValue(['settings', 'reverseTag']);
                          if (!reverseTag) return null;
                          const sniff = (form.getFieldValue(['settings', 'reverseSniffing']) ?? {}) as {
                            enabled?: boolean;
                          };
                          return (
                            <>
                              <Form.Item
                                label={t('pages.xray.outboundForm.reverseSniffing')}
                                name={['settings', 'reverseSniffing', 'enabled']}
                                valuePropName="checked"
                              >
                                <Switch />
                              </Form.Item>
                              {sniff.enabled && (
                                <>
                                  <Form.Item
                                    wrapperCol={{ md: { span: 14, offset: 8 } }}
                                    name={['settings', 'reverseSniffing', 'destOverride']}
                                  >
                                    <Select
                                      mode="multiple"
                                      className="sniffing-options"
                                      options={Object.entries(SNIFFING_OPTION).map(([k, v]) => ({
                                        value: v,
                                        label: k,
                                      }))}
                                    />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.inbounds.sniffingMetadataOnly')}
                                    name={['settings', 'reverseSniffing', 'metadataOnly']}
                                    valuePropName="checked"
                                  >
                                    <Switch />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.inbounds.sniffingRouteOnly')}
                                    name={['settings', 'reverseSniffing', 'routeOnly']}
                                    valuePropName="checked"
                                  >
                                    <Switch />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.inbounds.sniffingIpsExcluded')}
                                    name={['settings', 'reverseSniffing', 'ipsExcluded']}
                                  >
                                    <Select
                                      mode="tags"
                                      tokenSeparators={[',']}
                                      placeholder="IP/CIDR/geoip:*"
                                    />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.inbounds.sniffingDomainsExcluded')}
                                    name={['settings', 'reverseSniffing', 'domainsExcluded']}
                                  >
                                    <Select
                                      mode="tags"
                                      tokenSeparators={[',']}
                                      placeholder="domain:*"
                                    />
                                  </Form.Item>
                                </>
                              )}
                            </>
                          );
                        }}
                      </Form.Item>
                    )}

                    {protocol === 'wireguard' && <WireguardFields form={form} />}

                    {streamAllowed && network && (
                      <>
                        <Form.Item
                          label={t('transmission')}
                          name={['streamSettings', 'network']}
                        >
                          <Select
                            value={network}
                            onChange={onNetworkChange}
                            options={
                              protocol === 'hysteria'
                                ? [HYSTERIA_NETWORK_OPTION]
                                : NETWORK_OPTIONS
                            }
                          />
                        </Form.Item>

                        {network === 'tcp' && (
                          <Form.Item shouldUpdate noStyle>
                            {() => {
                              const type =
                                form.getFieldValue([
                                  'streamSettings',
                                  'tcpSettings',
                                  'header',
                                  'type',
                                ]) ?? 'none';
                              return (
                                <>
                                  <Form.Item label={`HTTP ${t('camouflage')}`}>
                                    <Switch
                                      checked={type === 'http'}
                                      onChange={(checked) =>
                                        form.setFieldValue(
                                          ['streamSettings', 'tcpSettings', 'header'],
                                          checked
                                            ? {
                                              type: 'http',
                                              request: {
                                                version: '1.1',
                                                method: 'GET',
                                                path: ['/'],
                                                headers: {},
                                              },
                                              response: {
                                                version: '1.1',
                                                status: '200',
                                                reason: 'OK',
                                                headers: {},
                                              },
                                            }
                                            : { type: 'none' },
                                        )
                                      }
                                    />
                                  </Form.Item>
                                  {type === 'http' && (
                                    <>
                                      <Form.Item
                                        label={t('pages.inbounds.form.requestMethod')}
                                        name={[
                                          'streamSettings', 'tcpSettings', 'header',
                                          'request', 'method',
                                        ]}
                                      >
                                        <Input placeholder="GET" />
                                      </Form.Item>
                                      <Form.Item
                                        label={t('pages.inbounds.form.requestVersion')}
                                        name={[
                                          'streamSettings', 'tcpSettings', 'header',
                                          'request', 'version',
                                        ]}
                                      >
                                        <Input placeholder="1.1" />
                                      </Form.Item>
                                      <Form.Item
                                        label={t('pages.inbounds.form.requestHeaders')}
                                        name={[
                                          'streamSettings', 'tcpSettings', 'header',
                                          'request', 'headers',
                                        ]}
                                      >
                                        <HeaderMapEditor mode="v2" />
                                      </Form.Item>

                                      <Form.Item
                                        label={t('pages.inbounds.form.responseVersion')}
                                        name={[
                                          'streamSettings', 'tcpSettings', 'header',
                                          'response', 'version',
                                        ]}
                                      >
                                        <Input placeholder="1.1" />
                                      </Form.Item>
                                      <Form.Item
                                        label={t('pages.inbounds.form.responseStatus')}
                                        name={[
                                          'streamSettings', 'tcpSettings', 'header',
                                          'response', 'status',
                                        ]}
                                      >
                                        <Input placeholder="200" />
                                      </Form.Item>
                                      <Form.Item
                                        label={t('pages.inbounds.form.responseReason')}
                                        name={[
                                          'streamSettings', 'tcpSettings', 'header',
                                          'response', 'reason',
                                        ]}
                                      >
                                        <Input placeholder="OK" />
                                      </Form.Item>
                                      <Form.Item
                                        label={t('pages.inbounds.form.responseHeaders')}
                                        name={[
                                          'streamSettings', 'tcpSettings', 'header',
                                          'response', 'headers',
                                        ]}
                                      >
                                        <HeaderMapEditor mode="v2" />
                                      </Form.Item>
                                    </>
                                  )}
                                </>
                              );
                            }}
                          </Form.Item>
                        )}

                        {network === 'kcp' && (
                          <>
                            <Form.Item label="MTU" name={['streamSettings', 'kcpSettings', 'mtu']}>
                              <InputNumber min={0} />
                            </Form.Item>
                            <Form.Item label={t('pages.inbounds.form.ttiMs')} name={['streamSettings', 'kcpSettings', 'tti']}>
                              <InputNumber min={0} />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.uplinkMbps')}
                              name={['streamSettings', 'kcpSettings', 'uplinkCapacity']}
                            >
                              <InputNumber min={0} />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.downlinkMbps')}
                              name={['streamSettings', 'kcpSettings', 'downlinkCapacity']}
                            >
                              <InputNumber min={0} />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.cwndMultiplier')}
                              name={['streamSettings', 'kcpSettings', 'cwndMultiplier']}
                            >
                              <InputNumber min={1} />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.maxSendingWindow')}
                              name={['streamSettings', 'kcpSettings', 'maxSendingWindow']}
                            >
                              <InputNumber min={0} />
                            </Form.Item>
                          </>
                        )}

                        {network === 'ws' && (
                          <>
                            <Form.Item label={t('host')} name={['streamSettings', 'wsSettings', 'host']}>
                              <Input />
                            </Form.Item>
                            <Form.Item label={t('path')} name={['streamSettings', 'wsSettings', 'path']}>
                              <Input />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.heartbeatPeriod')}
                              name={['streamSettings', 'wsSettings', 'heartbeatPeriod']}
                            >
                              <InputNumber min={0} />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.headers')}
                              name={['streamSettings', 'wsSettings', 'headers']}
                            >
                              <HeaderMapEditor mode="v1" />
                            </Form.Item>
                          </>
                        )}

                        {network === 'grpc' && (
                          <>
                            <Form.Item
                              label={t('pages.inbounds.form.serviceName')}
                              name={['streamSettings', 'grpcSettings', 'serviceName']}
                            >
                              <Input />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.authority')}
                              name={['streamSettings', 'grpcSettings', 'authority']}
                            >
                              <Input />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.multiMode')}
                              name={['streamSettings', 'grpcSettings', 'multiMode']}
                              valuePropName="checked"
                            >
                              <Switch />
                            </Form.Item>
                          </>
                        )}

                        {network === 'httpupgrade' && (
                          <>
                            <Form.Item
                              label={t('host')}
                              name={['streamSettings', 'httpupgradeSettings', 'host']}
                            >
                              <Input />
                            </Form.Item>
                            <Form.Item
                              label={t('path')}
                              name={['streamSettings', 'httpupgradeSettings', 'path']}
                            >
                              <Input />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.headers')}
                              name={['streamSettings', 'httpupgradeSettings', 'headers']}
                            >
                              <HeaderMapEditor mode="v1" />
                            </Form.Item>
                          </>
                        )}

                        {network === 'xhttp' && (
                          <>
                            <Form.Item
                              label={t('host')}
                              name={['streamSettings', 'xhttpSettings', 'host']}
                            >
                              <Input />
                            </Form.Item>
                            <Form.Item
                              label={t('path')}
                              name={['streamSettings', 'xhttpSettings', 'path']}
                            >
                              <Input />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.info.mode')}
                              name={['streamSettings', 'xhttpSettings', 'mode']}
                            >
                              <Select options={MODE_OPTIONS} />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.paddingBytes')}
                              name={['streamSettings', 'xhttpSettings', 'xPaddingBytes']}
                            >
                              <Input />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.headers')}
                              name={['streamSettings', 'xhttpSettings', 'headers']}
                            >
                              <HeaderMapEditor mode="v1" />
                            </Form.Item>

                            {/* Padding obfs sub-section: gated by a Switch.
                                When on, four extra knobs (key/header/placement/
                                method) tune how Xray injects random padding to
                                disguise the post body shape. */}
                            <Form.Item
                              label={t('pages.inbounds.form.paddingObfsMode')}
                              name={['streamSettings', 'xhttpSettings', 'xPaddingObfsMode']}
                              valuePropName="checked"
                            >
                              <Switch />
                            </Form.Item>
                            <Form.Item shouldUpdate noStyle>
                              {() => {
                                const obfs = !!form.getFieldValue([
                                  'streamSettings', 'xhttpSettings', 'xPaddingObfsMode',
                                ]);
                                if (!obfs) return null;
                                return (
                                  <>
                                    <Form.Item
                                      label={t('pages.inbounds.form.paddingKey')}
                                      name={['streamSettings', 'xhttpSettings', 'xPaddingKey']}
                                    >
                                      <Input placeholder="x_padding" />
                                    </Form.Item>
                                    <Form.Item
                                      label={t('pages.inbounds.form.paddingHeader')}
                                      name={['streamSettings', 'xhttpSettings', 'xPaddingHeader']}
                                    >
                                      <Input placeholder="X-Padding" />
                                    </Form.Item>
                                    <Form.Item
                                      label={t('pages.inbounds.form.paddingPlacement')}
                                      name={['streamSettings', 'xhttpSettings', 'xPaddingPlacement']}
                                    >
                                      <Select
                                        options={[
                                          { value: '', label: 'Default (queryInHeader)' },
                                          { value: 'queryInHeader', label: 'queryInHeader' },
                                          { value: 'header', label: 'header' },
                                          { value: 'cookie', label: 'cookie' },
                                          { value: 'query', label: 'query' },
                                        ]}
                                      />
                                    </Form.Item>
                                    <Form.Item
                                      label={t('pages.inbounds.form.paddingMethod')}
                                      name={['streamSettings', 'xhttpSettings', 'xPaddingMethod']}
                                    >
                                      <Select
                                        options={[
                                          { value: '', label: 'Default (repeat-x)' },
                                          { value: 'repeat-x', label: 'repeat-x' },
                                          { value: 'tokenish', label: 'tokenish' },
                                        ]}
                                      />
                                    </Form.Item>
                                  </>
                                );
                              }}
                            </Form.Item>

                            <Form.Item
                              noStyle
                              shouldUpdate={(prev, curr) =>
                                prev?.streamSettings?.xhttpSettings?.mode !==
                                curr?.streamSettings?.xhttpSettings?.mode
                              }
                            >
                              {() => {
                                const mode = form.getFieldValue([
                                  'streamSettings', 'xhttpSettings', 'mode',
                                ]);
                                return (
                                  <Form.Item
                                    label={t('pages.inbounds.form.uplinkHttpMethod')}
                                    name={['streamSettings', 'xhttpSettings', 'uplinkHTTPMethod']}
                                  >
                                    <Select
                                      placeholder="Default (POST)"
                                      options={[
                                        { value: '', label: 'Default (POST)' },
                                        { value: 'POST', label: 'POST' },
                                        { value: 'PUT', label: 'PUT' },
                                        { value: 'GET', label: 'GET (packet-up only)', disabled: mode !== 'packet-up' },
                                      ]}
                                    />
                                  </Form.Item>
                                );
                              }}
                            </Form.Item>

                            {/* Session + sequence + uplinkData placements:
                                three orthogonal slots Xray uses to thread
                                request metadata through the transport
                                (path / header / cookie / query). Key field
                                only matters when placement is not 'path'. */}
                            <Form.Item
                              label={t('pages.inbounds.form.sessionPlacement')}
                              name={['streamSettings', 'xhttpSettings', 'sessionPlacement']}
                            >
                              <Select
                                placeholder="Default (path)"
                                options={[
                                  { value: '', label: 'Default (path)' },
                                  { value: 'path', label: 'path' },
                                  { value: 'header', label: 'header' },
                                  { value: 'cookie', label: 'cookie' },
                                  { value: 'query', label: 'query' },
                                ]}
                              />
                            </Form.Item>
                            <Form.Item shouldUpdate noStyle>
                              {() => {
                                const placement = form.getFieldValue([
                                  'streamSettings', 'xhttpSettings', 'sessionPlacement',
                                ]);
                                if (!placement || placement === 'path') return null;
                                return (
                                  <Form.Item
                                    label={t('pages.inbounds.form.sessionKey')}
                                    name={['streamSettings', 'xhttpSettings', 'sessionKey']}
                                  >
                                    <Input placeholder="x_session" />
                                  </Form.Item>
                                );
                              }}
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.sequencePlacement')}
                              name={['streamSettings', 'xhttpSettings', 'seqPlacement']}
                            >
                              <Select
                                placeholder="Default (path)"
                                options={[
                                  { value: '', label: 'Default (path)' },
                                  { value: 'path', label: 'path' },
                                  { value: 'header', label: 'header' },
                                  { value: 'cookie', label: 'cookie' },
                                  { value: 'query', label: 'query' },
                                ]}
                              />
                            </Form.Item>
                            <Form.Item shouldUpdate noStyle>
                              {() => {
                                const placement = form.getFieldValue([
                                  'streamSettings', 'xhttpSettings', 'seqPlacement',
                                ]);
                                if (!placement || placement === 'path') return null;
                                return (
                                  <Form.Item
                                    label={t('pages.inbounds.form.sequenceKey')}
                                    name={['streamSettings', 'xhttpSettings', 'seqKey']}
                                  >
                                    <Input placeholder="x_seq" />
                                  </Form.Item>
                                );
                              }}
                            </Form.Item>

                            {/* Mode-conditional sub-sections. */}
                            <Form.Item shouldUpdate noStyle>
                              {() => {
                                const mode = form.getFieldValue([
                                  'streamSettings', 'xhttpSettings', 'mode',
                                ]);
                                if (mode !== 'packet-up') return null;
                                return (
                                  <>
                                    <Form.Item
                                      label={t('pages.xray.outboundForm.minUploadInterval')}
                                      name={['streamSettings', 'xhttpSettings', 'scMinPostsIntervalMs']}
                                    >
                                      <Input placeholder="30" />
                                    </Form.Item>
                                    <Form.Item
                                      label={t('pages.xray.outboundForm.maxUploadSizeBytes')}
                                      name={['streamSettings', 'xhttpSettings', 'scMaxEachPostBytes']}
                                    >
                                      <Input placeholder="1000000" />
                                    </Form.Item>
                                    <Form.Item
                                      label={t('pages.inbounds.form.uplinkDataPlacement')}
                                      name={['streamSettings', 'xhttpSettings', 'uplinkDataPlacement']}
                                    >
                                      <Select
                                        options={[
                                          { value: '', label: 'Default (body)' },
                                          { value: 'body', label: 'body' },
                                          { value: 'header', label: 'header' },
                                          { value: 'cookie', label: 'cookie' },
                                          { value: 'query', label: 'query' },
                                        ]}
                                      />
                                    </Form.Item>
                                    <Form.Item shouldUpdate noStyle>
                                      {() => {
                                        const place = form.getFieldValue([
                                          'streamSettings', 'xhttpSettings', 'uplinkDataPlacement',
                                        ]);
                                        if (!place || place === 'body') return null;
                                        return (
                                          <>
                                            <Form.Item
                                              label={t('pages.inbounds.form.uplinkDataKey')}
                                              name={['streamSettings', 'xhttpSettings', 'uplinkDataKey']}
                                            >
                                              <Input placeholder="x_data" />
                                            </Form.Item>
                                            <Form.Item
                                              label={t('pages.xray.outboundForm.uplinkChunkSize')}
                                              name={['streamSettings', 'xhttpSettings', 'uplinkChunkSize']}
                                            >
                                              <InputNumber
                                                min={0}
                                                placeholder="0 (unlimited)"
                                                style={{ width: '100%' }}
                                              />
                                            </Form.Item>
                                          </>
                                        );
                                      }}
                                    </Form.Item>
                                  </>
                                );
                              }}
                            </Form.Item>
                            <Form.Item shouldUpdate noStyle>
                              {() => {
                                const mode = form.getFieldValue([
                                  'streamSettings', 'xhttpSettings', 'mode',
                                ]);
                                if (mode !== 'stream-up' && mode !== 'stream-one') return null;
                                return (
                                  <Form.Item
                                    label={t('pages.xray.outboundForm.noGrpcHeader')}
                                    name={['streamSettings', 'xhttpSettings', 'noGRPCHeader']}
                                    valuePropName="checked"
                                  >
                                    <Switch />
                                  </Form.Item>
                                );
                              }}
                            </Form.Item>

                            {/* XMUX is the connection-multiplexing layer
                                xHTTP uses to fan out parallel requests over
                                a small pool of upstream connections. UI-only
                                toggle (enableXmux) hides the 6 nested knobs
                                when off. */}
                            <Form.Item
                              label="XMUX"
                              name={['streamSettings', 'xhttpSettings', 'enableXmux']}
                              valuePropName="checked"
                            >
                              <Switch onChange={onXmuxToggle} />
                            </Form.Item>
                            <Form.Item shouldUpdate noStyle>
                              {() => {
                                if (!form.getFieldValue([
                                  'streamSettings', 'xhttpSettings', 'enableXmux',
                                ])) return null;
                                return (
                                  <>
                                    <Form.Item
                                      label={t('pages.xray.outboundForm.maxConcurrency')}
                                      name={['streamSettings', 'xhttpSettings', 'xmux', 'maxConcurrency']}
                                    >
                                      <Input placeholder="16-32" />
                                    </Form.Item>
                                    <Form.Item
                                      label={t('pages.xray.outboundForm.maxConnections')}
                                      name={['streamSettings', 'xhttpSettings', 'xmux', 'maxConnections']}
                                    >
                                      <Input placeholder="0" />
                                    </Form.Item>
                                    <Form.Item
                                      label={t('pages.xray.outboundForm.maxReuseTimes')}
                                      name={['streamSettings', 'xhttpSettings', 'xmux', 'cMaxReuseTimes']}
                                    >
                                      <Input />
                                    </Form.Item>
                                    <Form.Item
                                      label={t('pages.xray.outboundForm.maxRequestTimes')}
                                      name={['streamSettings', 'xhttpSettings', 'xmux', 'hMaxRequestTimes']}
                                    >
                                      <Input placeholder="600-900" />
                                    </Form.Item>
                                    <Form.Item
                                      label={t('pages.xray.outboundForm.maxReusableSecs')}
                                      name={['streamSettings', 'xhttpSettings', 'xmux', 'hMaxReusableSecs']}
                                    >
                                      <Input placeholder="1800-3000" />
                                    </Form.Item>
                                    <Form.Item
                                      label={t('pages.xray.outboundForm.keepAlivePeriod')}
                                      name={['streamSettings', 'xhttpSettings', 'xmux', 'hKeepAlivePeriod']}
                                    >
                                      <InputNumber min={0} style={{ width: '100%' }} />
                                    </Form.Item>
                                  </>
                                );
                              }}
                            </Form.Item>
                          </>
                        )}

                        {network === 'hysteria' && (
                          <>
                            <Form.Item
                              label={t('pages.inbounds.form.version')}
                              name={['streamSettings', 'hysteriaSettings', 'version']}
                            >
                              <InputNumber min={2} max={2} disabled style={{ width: '100%' }} />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.xray.outboundForm.authPassword')}
                              name={['streamSettings', 'hysteriaSettings', 'auth']}
                            >
                              <Input />
                            </Form.Item>
                            <Form.Item
                              label={t('pages.inbounds.form.udpIdleTimeout')}
                              name={['streamSettings', 'hysteriaSettings', 'udpIdleTimeout']}
                            >
                              <InputNumber min={1} style={{ width: '100%' }} />
                            </Form.Item>
                            <HysteriaMasqueradeForm form={form} />
                          </>
                        )}
                      </>
                    )}

                    {tlsFlowAllowed && (
                      <Form.Item label={t('pages.clients.flow')} name={['settings', 'flow']}>
                        <Select
                          allowClear
                          placeholder={t('none')}
                          options={[{ value: '', label: t('none') }, ...FLOW_OPTIONS]}
                        />
                      </Form.Item>
                    )}

                    {/* Vision seed knobs only meaningful for the exact
                        xtls-rprx-vision flow, on TCP+(tls|reality). The
                        legacy class gated this on `canEnableVisionSeed()`
                        — same condition encoded inline here. */}
                    <Form.Item shouldUpdate noStyle>
                      {() => {
                        const flow =
                          (form.getFieldValue(['settings', 'flow']) ?? '') as string;
                        if (!(tlsFlowAllowed && flow === 'xtls-rprx-vision')) return null;
                        return (
                          <>
                            <Form.Item label={t('pages.xray.outboundForm.visionTestpre')} name={['settings', 'testpre']}>
                              <InputNumber min={0} style={{ width: '100%' }} />
                            </Form.Item>
                            <Form.Item label={t('pages.inbounds.form.visionTestseed')}>
                              <Space.Compact block>
                                {[900, 500, 900, 256].map((def, i) => (
                                  <Form.Item key={i} name={['settings', 'testseed', i]} noStyle initialValue={def}>
                                    <InputNumber min={1} style={{ width: '25%' }} />
                                  </Form.Item>
                                ))}
                              </Space.Compact>
                            </Form.Item>
                          </>
                        );
                      }}
                    </Form.Item>

                    {streamAllowed && network && (
                      <Form.Item label={t('security')}>
                        <Radio.Group
                          value={security}
                          buttonStyle="solid"
                          onChange={(e) => onSecurityChange(e.target.value as string)}
                        >
                          {network !== 'hysteria' && <Radio.Button value="none">{t('none')}</Radio.Button>}
                          {tlsAllowed && <Radio.Button value="tls">TLS</Radio.Button>}
                          {realityAllowed && <Radio.Button value="reality">Reality</Radio.Button>}
                        </Radio.Group>
                      </Form.Item>
                    )}

                    {security === 'tls' && tlsAllowed && (
                      <>
                        <Form.Item
                          label="SNI"
                          name={['streamSettings', 'tlsSettings', 'serverName']}
                        >
                          <Input placeholder={t('pages.xray.outboundForm.serverNamePlaceholder')} />
                        </Form.Item>
                        <Form.Item
                          label="uTLS"
                          name={['streamSettings', 'tlsSettings', 'fingerprint']}
                        >
                          <Select
                            allowClear
                            placeholder={t('none')}
                            options={UTLS_OPTIONS}
                          />
                        </Form.Item>
                        <Form.Item
                          label="ALPN"
                          name={['streamSettings', 'tlsSettings', 'alpn']}
                        >
                          <Select mode="multiple" options={ALPN_OPTIONS} />
                        </Form.Item>
                        <Form.Item
                          label="ECH"
                          name={['streamSettings', 'tlsSettings', 'echConfigList']}
                        >
                          <Input />
                        </Form.Item>
                        <Form.Item
                          label={t('pages.xray.outboundForm.verifyPeerName')}
                          name={['streamSettings', 'tlsSettings', 'verifyPeerCertByName']}
                        >
                          <Input placeholder="cloudflare-dns.com" />
                        </Form.Item>
                        <Form.Item
                          label={t('pages.xray.outboundForm.pinnedSha256')}
                          name={['streamSettings', 'tlsSettings', 'pinnedPeerCertSha256']}
                        >
                          <Input placeholder="base64 SHA256" />
                        </Form.Item>
                      </>
                    )}

                    {security === 'reality' && realityAllowed && (
                      <>
                        <Form.Item
                          label="SNI"
                          name={['streamSettings', 'realitySettings', 'serverName']}
                        >
                          <Input />
                        </Form.Item>
                        <Form.Item
                          label="uTLS"
                          name={['streamSettings', 'realitySettings', 'fingerprint']}
                        >
                          <Select options={UTLS_OPTIONS} />
                        </Form.Item>
                        <Form.Item
                          label={t('pages.xray.outboundForm.shortId')}
                          name={['streamSettings', 'realitySettings', 'shortId']}
                        >
                          <Input />
                        </Form.Item>
                        <Form.Item
                          label={t('pages.inbounds.form.spiderX')}
                          name={['streamSettings', 'realitySettings', 'spiderX']}
                        >
                          <Input />
                        </Form.Item>
                        <Form.Item
                          label={t('pages.inbounds.publicKey')}
                          name={['streamSettings', 'realitySettings', 'publicKey']}
                        >
                          <Input.TextArea autoSize={{ minRows: 2 }} />
                        </Form.Item>
                        <Form.Item
                          label={t('pages.inbounds.form.mldsa65Verify')}
                          name={['streamSettings', 'realitySettings', 'mldsa65Verify']}
                        >
                          <Input.TextArea autoSize={{ minRows: 2 }} />
                        </Form.Item>
                      </>
                    )}

                    {((streamAllowed && network) || !streamAllowed) && (
                      <Form.Item shouldUpdate noStyle>
                        {() => {
                          const hasSockopt = !!form.getFieldValue([
                            'streamSettings',
                            'sockopt',
                          ]);
                          return (
                            <>
                              <Form.Item label={t('pages.xray.outboundForm.sockopts')}>
                                <Switch
                                  checked={hasSockopt}
                                  onChange={(checked) => {
                                    form.setFieldValue(
                                      ['streamSettings', 'sockopt'],
                                      checked ? SockoptStreamSettingsSchema.parse({}) : undefined,
                                    );
                                  }}
                                />
                              </Form.Item>
                              {hasSockopt && (
                                <>
                                  <Form.Item
                                    label={t('pages.inbounds.form.dialerProxy')}
                                    name={['streamSettings', 'sockopt', 'dialerProxy']}
                                  >
                                    <Input />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.xray.wireguard.domainStrategy')}
                                    name={['streamSettings', 'sockopt', 'domainStrategy']}
                                  >
                                    <Select
                                      options={Object.values(DOMAIN_STRATEGY_OPTION).map((v) => ({
                                        value: v,
                                        label: v,
                                      }))}
                                    />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.inbounds.form.addressPortStrategy')}
                                    name={['streamSettings', 'sockopt', 'addressPortStrategy']}
                                  >
                                    <Select options={ADDRESS_PORT_STRATEGY_OPTIONS} />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.xray.outboundForm.keepAliveInterval')}
                                    name={['streamSettings', 'sockopt', 'tcpKeepAliveInterval']}
                                  >
                                    <InputNumber min={0} />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.inbounds.form.tcpFastOpen')}
                                    name={['streamSettings', 'sockopt', 'tcpFastOpen']}
                                    valuePropName="checked"
                                  >
                                    <Switch />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.inbounds.form.multipathTcp')}
                                    name={['streamSettings', 'sockopt', 'tcpMptcp']}
                                    valuePropName="checked"
                                  >
                                    <Switch />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.inbounds.form.penetrate')}
                                    name={['streamSettings', 'sockopt', 'penetrate']}
                                    valuePropName="checked"
                                  >
                                    <Switch />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.xray.outboundForm.markFwmark')}
                                    name={['streamSettings', 'sockopt', 'mark']}
                                  >
                                    <InputNumber min={0} />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.xray.outboundForm.interface')}
                                    name={['streamSettings', 'sockopt', 'interfaceName']}
                                  >
                                    <Input />
                                  </Form.Item>
                                  <Form.Item
                                    label="TProxy"
                                    name={['streamSettings', 'sockopt', 'tproxy']}
                                  >
                                    <Select
                                      options={[
                                        { value: 'off', label: 'off' },
                                        { value: 'redirect', label: 'redirect' },
                                        { value: 'tproxy', label: 'tproxy' },
                                      ]}
                                    />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.inbounds.form.tcpCongestion')}
                                    name={['streamSettings', 'sockopt', 'tcpcongestion']}
                                  >
                                    <Select
                                      options={Object.values(TCP_CONGESTION_OPTION).map((v) => ({
                                        value: v,
                                        label: v,
                                      }))}
                                    />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.xray.outboundForm.ipv6Only')}
                                    name={['streamSettings', 'sockopt', 'V6Only']}
                                    valuePropName="checked"
                                  >
                                    <Switch />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.xray.outboundForm.acceptProxyProtocol')}
                                    name={['streamSettings', 'sockopt', 'acceptProxyProtocol']}
                                    valuePropName="checked"
                                  >
                                    <Switch />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.xray.outboundForm.tcpUserTimeoutMs')}
                                    name={['streamSettings', 'sockopt', 'tcpUserTimeout']}
                                  >
                                    <InputNumber min={0} style={{ width: '100%' }} />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.xray.outboundForm.tcpKeepAliveIdleS')}
                                    name={['streamSettings', 'sockopt', 'tcpKeepAliveIdle']}
                                  >
                                    <InputNumber min={0} style={{ width: '100%' }} />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.inbounds.form.tcpMaxSeg')}
                                    name={['streamSettings', 'sockopt', 'tcpMaxSeg']}
                                  >
                                    <InputNumber min={0} style={{ width: '100%' }} />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.inbounds.form.tcpWindowClamp')}
                                    name={['streamSettings', 'sockopt', 'tcpWindowClamp']}
                                  >
                                    <InputNumber min={0} style={{ width: '100%' }} />
                                  </Form.Item>
                                  <Form.Item
                                    label={t('pages.inbounds.form.trustedXForwardedFor')}
                                    name={['streamSettings', 'sockopt', 'trustedXForwardedFor']}
                                  >
                                    <Select
                                      mode="tags"
                                      tokenSeparators={[',', ' ']}
                                      placeholder="trusted-proxy.example,10.0.0.0/8"
                                    />
                                  </Form.Item>
                                  <Form.Item shouldUpdate noStyle>
                                    {() => {
                                      const he = form.getFieldValue([
                                        'streamSettings', 'sockopt', 'happyEyeballs',
                                      ]);
                                      const hasHe = he != null;
                                      return (
                                        <>
                                          <Form.Item label="Happy Eyeballs">
                                            <Switch
                                              checked={hasHe}
                                              onChange={(v) => {
                                                form.setFieldValue(
                                                  ['streamSettings', 'sockopt', 'happyEyeballs'],
                                                  v ? HappyEyeballsSchema.parse({}) : undefined,
                                                );
                                              }}
                                            />
                                          </Form.Item>
                                          {hasHe && (
                                            <>
                                              <Form.Item
                                                label={t('pages.inbounds.form.tryDelayMs')}
                                                name={['streamSettings', 'sockopt', 'happyEyeballs', 'tryDelayMs']}
                                              >
                                                <InputNumber min={0} style={{ width: '100%' }} placeholder="0 (disabled) — 250 recommended" />
                                              </Form.Item>
                                              <Form.Item
                                                label={t('pages.inbounds.form.prioritizeIPv6')}
                                                name={['streamSettings', 'sockopt', 'happyEyeballs', 'prioritizeIPv6']}
                                                valuePropName="checked"
                                              >
                                                <Switch />
                                              </Form.Item>
                                              <Form.Item
                                                label={t('pages.inbounds.form.interleave')}
                                                name={['streamSettings', 'sockopt', 'happyEyeballs', 'interleave']}
                                              >
                                                <InputNumber min={1} style={{ width: '100%' }} />
                                              </Form.Item>
                                              <Form.Item
                                                label={t('pages.inbounds.form.maxConcurrentTry')}
                                                name={['streamSettings', 'sockopt', 'happyEyeballs', 'maxConcurrentTry']}
                                              >
                                                <InputNumber min={0} style={{ width: '100%' }} />
                                              </Form.Item>
                                            </>
                                          )}
                                        </>
                                      );
                                    }}
                                  </Form.Item>
                                  <Form.List name={['streamSettings', 'sockopt', 'customSockopt']}>
                                    {(fields, { add, remove }) => (
                                      <>
                                        <Form.Item label={t('pages.inbounds.form.customSockopt')}>
                                          <Button
                                            type="dashed"
                                            size="small"
                                            onClick={() => add({ type: 'int', level: '6', opt: '', value: '' })}
                                          >
                                            + {t('pages.inbounds.form.addCustomOption')}
                                          </Button>
                                        </Form.Item>
                                        {fields.map((field) => (
                                          <Space.Compact key={field.key} style={{ display: 'flex', marginBottom: 8 }}>
                                            <Form.Item name={[field.name, 'system']} noStyle>
                                              <Select
                                                placeholder="all"
                                                allowClear
                                                style={{ width: 100 }}
                                                options={[
                                                  { value: 'linux', label: 'linux' },
                                                  { value: 'windows', label: 'windows' },
                                                  { value: 'darwin', label: 'darwin' },
                                                ]}
                                              />
                                            </Form.Item>
                                            <Form.Item name={[field.name, 'type']} noStyle>
                                              <Select
                                                style={{ width: 80 }}
                                                options={[
                                                  { value: 'int', label: 'int' },
                                                  { value: 'str', label: 'str' },
                                                ]}
                                              />
                                            </Form.Item>
                                            <Form.Item name={[field.name, 'level']} noStyle>
                                              <Input placeholder="level (6=TCP)" style={{ width: 100 }} />
                                            </Form.Item>
                                            <Form.Item name={[field.name, 'opt']} noStyle>
                                              <Input placeholder="opt (decimal)" style={{ width: 120 }} />
                                            </Form.Item>
                                            <Form.Item name={[field.name, 'value']} noStyle>
                                              <Input placeholder="value" style={{ flex: 1 }} />
                                            </Form.Item>
                                            <Button danger onClick={() => remove(field.name)}>−</Button>
                                          </Space.Compact>
                                        ))}
                                      </>
                                    )}
                                  </Form.List>
                                </>
                              )}
                            </>
                          );
                        }}
                      </Form.Item>
                    )}

                    <FinalMaskForm
                      name={['streamSettings', 'finalmask']}
                      network={network}
                      protocol={protocol}
                      form={form}
                    />

                    {(() => {
                      const flow = (form.getFieldValue(['settings', 'flow']) ?? '') as string;
                      if (!isMuxAllowed(protocol, flow, network)) return null;
                      return (
                        <Form.Item shouldUpdate noStyle>
                          {() => {
                            const muxEnabled = !!form.getFieldValue(['mux', 'enabled']);
                            return (
                              <>
                                <Form.Item
                                  label={t('pages.settings.mux')}
                                  name={['mux', 'enabled']}
                                  valuePropName="checked"
                                >
                                  <Switch />
                                </Form.Item>
                                {muxEnabled && (
                                  <>
                                    <Form.Item
                                      label={t('pages.settings.subFormats.concurrency')}
                                      name={['mux', 'concurrency']}
                                    >
                                      <InputNumber min={-1} max={1024} />
                                    </Form.Item>
                                    <Form.Item
                                      label={t('pages.settings.subFormats.xudpConcurrency')}
                                      name={['mux', 'xudpConcurrency']}
                                    >
                                      <InputNumber min={-1} max={1024} />
                                    </Form.Item>
                                    <Form.Item
                                      label={t('pages.settings.subFormats.xudpUdp443')}
                                      name={['mux', 'xudpProxyUDP443']}
                                    >
                                      <Select
                                        options={['reject', 'allow', 'skip'].map((v) => ({
                                          value: v,
                                          label: v,
                                        }))}
                                      />
                                    </Form.Item>
                                  </>
                                )}
                              </>
                            );
                          }}
                        </Form.Item>
                      );
                    })()}
                  </>
                ),
              },
              {
                key: '2',
                label: 'JSON',
                children: (
                  <Space orientation="vertical" size={10} style={{ width: '100%', marginTop: 10 }}>
                    <Input.Search
                      value={linkInput}
                      placeholder="vmess:// vless:// trojan:// ss:// hysteria2:// wireguard://"
                      enterButton="Import"
                      onChange={(e) => setLinkInput(e.target.value)}
                      onSearch={importLink}
                    />
                    <JsonEditor
                      value={jsonText}
                      onChange={(next) => {
                        setJsonText(next);
                        setJsonDirty(true);
                      }}
                      minHeight="360px"
                      maxHeight="600px"
                    />
                  </Space>
                ),
              },
            ]}
          />
        </Form>
      </Modal>
    </>
  );
}
