import { RestartAltRounded } from '@mui/icons-material'
import {
  Alert,
  Box,
  Button,
  FormControl,
  List,
  ListItem,
  ListItemText,
  MenuItem,
  Select,
  styled,
  TextField,
  Typography,
} from '@mui/material'
import { useLockFn } from 'ahooks'
import * as yaml from 'js-yaml'
import type { Ref } from 'react'
import { useCallback, useEffect, useReducer, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'

import {
  BaseDialog,
  type DialogRef,
  MonacoEditor,
  Switch,
} from '@/components/base'
import { useClash } from '@/hooks/use-clash'
import { useProfiles } from '@/hooks/use-profiles'
import { useVerge } from '@/hooks/use-verge'
import {
  applyDnsConfig,
  getDnsConfigContent,
  saveDnsConfig,
  validateDnsConfig,
} from '@/services/cmds'
import { mutate } from '@/services/mutate'
import { showNotice } from '@/services/notice-service'
import { useThemeMode } from '@/services/states'
import type { MonacoEditorInstance } from '@/types/monaco'
import { MONACO_FONT_FAMILY } from '@/utils/font-family'

import { useSettingDialog } from '../settings-search-context'

const Item = styled(ListItem)(() => ({
  padding: '5px 2px',
  '& textarea': {
    lineHeight: 1.5,
    fontSize: 14,
    resize: 'vertical',
  },
}))

type NameserverPolicy = Record<string, any>

function parseNameserverPolicy(str: string): NameserverPolicy {
  const result: NameserverPolicy = {}
  if (!str) return result

  const ruleRegex = /\s*([^=]+?)\s*=\s*([^,]+)(?:,|$)/g
  const matchs = [...str.matchAll(ruleRegex)]

  matchs.forEach((match) => {
    const [, domainsPart, serversPart] = match

    const domains = [domainsPart.trim()]
    const servers = serversPart.split(';').map((s) => s.trim())

    domains.forEach((domain) => {
      result[domain] = servers
    })
  })

  return result
}

function formatNameserverPolicy(policy: unknown): string {
  if (!policy || typeof policy !== 'object') return ''

  return Object.entries(policy as Record<string, unknown>)
    .map(([domain, servers]) => {
      const serversStr = Array.isArray(servers) ? servers.join(';') : servers
      return `${domain}=${serversStr}`
    })
    .join(', ')
}

function formatHosts(hosts: unknown): string {
  if (!hosts || typeof hosts !== 'object') return ''

  const result: string[] = []

  Object.entries(hosts as Record<string, unknown>).forEach(
    ([domain, value]) => {
      if (Array.isArray(value)) {
        const ipsStr = value.join(';')
        result.push(`${domain}=${ipsStr}`)
      } else {
        result.push(`${domain}=${value}`)
      }
    },
  )

  return result.join(', ')
}

function parseHosts(str: string): NameserverPolicy {
  const result: NameserverPolicy = {}
  if (!str) return result

  str.split(',').forEach((item) => {
    const parts = item.trim().split('=')
    if (parts.length < 2) return

    const domain = parts[0].trim()
    const valueStr = parts.slice(1).join('=').trim()

    if (valueStr.includes(';')) {
      result[domain] = valueStr
        .split(';')
        .map((s) => s.trim())
        .filter(Boolean)
    } else {
      result[domain] = valueStr
    }
  })

  return result
}

function parseList(str: string): string[] {
  if (!str?.trim()) return []
  return str
    .split(',')
    .map((item) => item.trim())
    .filter(Boolean)
}

const DEFAULT_DNS_CONFIG = {
  enable: true,
  listen: ':53',
  'enhanced-mode': 'fake-ip' as 'fake-ip' | 'redir-host',
  'fake-ip-range': '198.18.0.1/16',
  'fake-ip-range6': 'fdfe:dcba:9876::1/64',
  'fake-ip-filter-mode': 'blacklist' as 'blacklist' | 'whitelist',
  'prefer-h3': false,
  'respect-rules': false,
  'use-hosts': false,
  'use-system-hosts': false,
  ipv6: true,
  'fake-ip-filter': [
    '*.lan',
    '*.local',
    '*.arpa',
    'time.*.com',
    'ntp.*.com',
    'time.*.com',
    '+.market.xiaomi.com',
    'localhost.ptlogin2.qq.com',
    '*.msftncsi.com',
    'www.msftconnecttest.com',
  ],
  'default-nameserver': [
    'system',
    '223.6.6.6',
    '8.8.8.8',
    '2400:3200::1',
    '2001:4860:4860::8888',
  ],
  nameserver: [
    '8.8.8.8',
    'https://doh.pub/dns-query',
    'https://dns.alidns.com/dns-query',
  ],
  fallback: [],
  'nameserver-policy': {},
  'proxy-server-nameserver': [],
  'direct-nameserver': [],
  'direct-nameserver-follow-policy': false,
  'fallback-filter': {
    geoip: true,
    'geoip-code': 'CN',
    ipcidr: ['240.0.0.0/4', '0.0.0.0/32'],
    domain: ['+.google.com', '+.facebook.com', '+.youtube.com'],
  },
}

type DnsFormValues = {
  enable: boolean
  listen: string
  enhancedMode: 'fake-ip' | 'redir-host'
  fakeIpRange: string
  fakeIpRange6: string
  fakeIpFilterMode: 'blacklist' | 'whitelist'
  preferH3: boolean
  respectRules: boolean
  useHosts: boolean
  useSystemHosts: boolean
  ipv6: boolean
  fakeIpFilter: string
  nameserver: string
  fallback: string
  defaultNameserver: string
  proxyServerNameserver: string
  directNameserver: string
  directNameserverFollowPolicy: boolean
  fallbackGeoip: boolean
  fallbackGeoipCode: string
  fallbackIpcidr: string
  fallbackDomain: string
  nameserverPolicy: string
  hosts: string // hosts设置，独立于dns
}

const DEFAULT_FORM_VALUES: DnsFormValues = {
  enable: DEFAULT_DNS_CONFIG.enable,
  listen: DEFAULT_DNS_CONFIG.listen,
  enhancedMode: DEFAULT_DNS_CONFIG['enhanced-mode'],
  fakeIpRange: DEFAULT_DNS_CONFIG['fake-ip-range'],
  fakeIpRange6: DEFAULT_DNS_CONFIG['fake-ip-range6'],
  fakeIpFilterMode: DEFAULT_DNS_CONFIG['fake-ip-filter-mode'],
  preferH3: DEFAULT_DNS_CONFIG['prefer-h3'],
  respectRules: DEFAULT_DNS_CONFIG['respect-rules'],
  useHosts: DEFAULT_DNS_CONFIG['use-hosts'],
  useSystemHosts: DEFAULT_DNS_CONFIG['use-system-hosts'],
  ipv6: DEFAULT_DNS_CONFIG.ipv6,
  fakeIpFilter: DEFAULT_DNS_CONFIG['fake-ip-filter'].join(', '),
  defaultNameserver: DEFAULT_DNS_CONFIG['default-nameserver'].join(', '),
  nameserver: DEFAULT_DNS_CONFIG.nameserver.join(', '),
  fallback: DEFAULT_DNS_CONFIG.fallback.join(', '),
  proxyServerNameserver:
    DEFAULT_DNS_CONFIG['proxy-server-nameserver']?.join(', ') || '',
  directNameserver: DEFAULT_DNS_CONFIG['direct-nameserver']?.join(', ') || '',
  directNameserverFollowPolicy:
    DEFAULT_DNS_CONFIG['direct-nameserver-follow-policy'] || false,
  fallbackGeoip: DEFAULT_DNS_CONFIG['fallback-filter'].geoip,
  fallbackGeoipCode: DEFAULT_DNS_CONFIG['fallback-filter']['geoip-code'],
  fallbackIpcidr:
    DEFAULT_DNS_CONFIG['fallback-filter'].ipcidr?.join(', ') || '',
  fallbackDomain:
    DEFAULT_DNS_CONFIG['fallback-filter'].domain?.join(', ') || '',
  nameserverPolicy: '',
  hosts: '',
}

function buildDnsConfig(values: DnsFormValues) {
  const dnsConfig: any = {
    enable: values.enable,
    listen: values.listen,
    'enhanced-mode': values.enhancedMode,
    'fake-ip-range': values.fakeIpRange,
    'fake-ip-range6': values.fakeIpRange6,
    'fake-ip-filter-mode': values.fakeIpFilterMode,
    'prefer-h3': values.preferH3,
    'respect-rules': values.respectRules,
    'use-hosts': values.useHosts,
    'use-system-hosts': values.useSystemHosts,
    ipv6: values.ipv6,
    'fake-ip-filter': parseList(values.fakeIpFilter),
    'default-nameserver': parseList(values.defaultNameserver),
    nameserver: parseList(values.nameserver),
    'nameserver-policy': parseNameserverPolicy(values.nameserverPolicy),
    'direct-nameserver-follow-policy': values.directNameserverFollowPolicy,
    'fallback-filter': {
      geoip: values.fallbackGeoip,
      'geoip-code': values.fallbackGeoipCode,
      ipcidr: parseList(values.fallbackIpcidr),
      domain: parseList(values.fallbackDomain),
    },

    fallback: parseList(values.fallback),
    'proxy-server-nameserver': parseList(values.proxyServerNameserver),
    'direct-nameserver': parseList(values.directNameserver),
  }

  return dnsConfig
}

function buildDnsYaml(values: DnsFormValues) {
  const config: Record<string, any> = {}

  const dnsConfig = buildDnsConfig(values)
  if (Object.keys(dnsConfig).length > 0) {
    config.dns = dnsConfig
  }

  config.hosts = parseHosts(values.hosts)

  return yaml.dump(config, { forceQuotes: true })
}

export function DnsViewer({ ref }: { ref?: Ref<DialogRef> }) {
  const { t } = useTranslation()
  const { mutateClash } = useClash()
  const { verge } = useVerge()
  const { current: currentProfile } = useProfiles()
  const dnsEnabled = currentProfile
    ? (verge?.profile_dns_settings?.[currentProfile.uid!]?.enabled ??
      verge?.enable_dns_settings ??
      false)
    : false
  const themeMode = useThemeMode()

  const [open, setOpen] = useState(false)
  const [initializing, setInitializing] = useState(false)
  const [visualization, setVisualization] = useState(true)
  const editorRef = useRef<MonacoEditorInstance | null>(null)
  const [values, setValues] = useState<DnsFormValues>(DEFAULT_FORM_VALUES)

  // Prevent YAML-to-form sync before configuration loads.
  const [yamlContent, setYamlContent] = useReducer(
    (_: string, next: string) => next,
    '{ isInitValue: true }',
  )

  const updateValuesFromConfig = useCallback((config: any) => {
    if (!config) return undefined

    const dnsConfig = config.dns || {}
    const hostsConfig = config.hosts || {}

    const enhancedMode =
      dnsConfig['enhanced-mode'] || DEFAULT_DNS_CONFIG['enhanced-mode']
    const validEnhancedMode =
      enhancedMode === 'fake-ip' || enhancedMode === 'redir-host'
        ? enhancedMode
        : DEFAULT_DNS_CONFIG['enhanced-mode']

    const fakeIpFilterMode =
      dnsConfig['fake-ip-filter-mode'] ||
      DEFAULT_DNS_CONFIG['fake-ip-filter-mode']
    const validFakeIpFilterMode =
      fakeIpFilterMode === 'blacklist' || fakeIpFilterMode === 'whitelist'
        ? fakeIpFilterMode
        : DEFAULT_DNS_CONFIG['fake-ip-filter-mode']

    const next: DnsFormValues = {
      enable: dnsConfig.enable ?? DEFAULT_DNS_CONFIG.enable,
      listen: dnsConfig.listen ?? DEFAULT_DNS_CONFIG.listen,
      enhancedMode: validEnhancedMode,
      fakeIpRange:
        dnsConfig['fake-ip-range'] ?? DEFAULT_DNS_CONFIG['fake-ip-range'],
      fakeIpRange6:
        dnsConfig['fake-ip-range6'] ?? DEFAULT_DNS_CONFIG['fake-ip-range6'],
      fakeIpFilterMode: validFakeIpFilterMode,
      preferH3: dnsConfig['prefer-h3'] ?? DEFAULT_DNS_CONFIG['prefer-h3'],
      respectRules:
        dnsConfig['respect-rules'] ?? DEFAULT_DNS_CONFIG['respect-rules'],
      useHosts: dnsConfig['use-hosts'] ?? DEFAULT_DNS_CONFIG['use-hosts'],
      useSystemHosts:
        dnsConfig['use-system-hosts'] ?? DEFAULT_DNS_CONFIG['use-system-hosts'],
      ipv6: dnsConfig.ipv6 ?? DEFAULT_DNS_CONFIG.ipv6,
      fakeIpFilter:
        dnsConfig['fake-ip-filter']?.join(', ') ??
        DEFAULT_DNS_CONFIG['fake-ip-filter'].join(', '),
      nameserver:
        dnsConfig.nameserver?.join(', ') ??
        DEFAULT_DNS_CONFIG.nameserver.join(', '),
      fallback:
        dnsConfig.fallback?.join(', ') ??
        DEFAULT_DNS_CONFIG.fallback.join(', '),
      defaultNameserver:
        dnsConfig['default-nameserver']?.join(', ') ??
        DEFAULT_DNS_CONFIG['default-nameserver'].join(', '),
      proxyServerNameserver:
        dnsConfig['proxy-server-nameserver']?.join(', ') ??
        (DEFAULT_DNS_CONFIG['proxy-server-nameserver']?.join(', ') || ''),
      directNameserver:
        dnsConfig['direct-nameserver']?.join(', ') ??
        (DEFAULT_DNS_CONFIG['direct-nameserver']?.join(', ') || ''),
      directNameserverFollowPolicy:
        dnsConfig['direct-nameserver-follow-policy'] ??
        DEFAULT_DNS_CONFIG['direct-nameserver-follow-policy'],
      fallbackGeoip:
        dnsConfig['fallback-filter']?.geoip ??
        DEFAULT_DNS_CONFIG['fallback-filter'].geoip,
      fallbackGeoipCode:
        dnsConfig['fallback-filter']?.['geoip-code'] ??
        DEFAULT_DNS_CONFIG['fallback-filter']['geoip-code'],
      fallbackIpcidr:
        dnsConfig['fallback-filter']?.ipcidr?.join(', ') ??
        DEFAULT_DNS_CONFIG['fallback-filter'].ipcidr.join(', '),
      fallbackDomain:
        dnsConfig['fallback-filter']?.domain?.join(', ') ??
        DEFAULT_DNS_CONFIG['fallback-filter'].domain.join(', '),
      nameserverPolicy:
        formatNameserverPolicy(dnsConfig['nameserver-policy']) || '',
      hosts: formatHosts(hostsConfig) || '',
    }
    setValues(next)
    return next
  }, [])

  const resetToDefaults = useCallback(() => {
    setValues(DEFAULT_FORM_VALUES)
    setYamlContent(buildDnsYaml(DEFAULT_FORM_VALUES))
  }, [])

  const updateValuesFromYaml = useCallback(() => {
    try {
      const parsedYaml = yaml.load(yamlContent) as any
      if (!parsedYaml || parsedYaml.isInitValue) return

      updateValuesFromConfig(parsedYaml)
    } catch {
      showNotice.error('settings.modals.dns.errors.invalidYaml')
    }
  }, [yamlContent, updateValuesFromConfig])

  useEffect(() => {
    return () => {
      editorRef.current?.dispose()
      editorRef.current = null
    }
  }, [])

  const initDnsConfig = useCallback(async () => {
    setInitializing(true)
    try {
      const dnsConfig = await getDnsConfigContent()

      if (dnsConfig !== null) {
        const config = yaml.load(dnsConfig) as any

        const loaded = updateValuesFromConfig(config)
        setYamlContent(loaded ? buildDnsYaml(loaded) : dnsConfig)
      } else {
        resetToDefaults()
      }
    } catch (err) {
      console.error('Failed to initialize DNS config', err)
      resetToDefaults()
    } finally {
      setInitializing(false)
    }
  }, [resetToDefaults, updateValuesFromConfig])

  useSettingDialog(ref, 'dns-viewer', open, () => ({
    open: () => {
      setOpen(true)
      void initDnsConfig()
    },
    close: () => setOpen(false),
  }))

  const onSave = useLockFn(async () => {
    try {
      let config: Record<string, any>

      if (visualization) {
        config = {}

        const dnsConfig = buildDnsConfig(values)
        if (Object.keys(dnsConfig).length > 0) {
          config.dns = dnsConfig
        }

        config.hosts = parseHosts(values.hosts)
      } else {
        const parsedConfig = yaml.load(yamlContent)
        if (typeof parsedConfig !== 'object' || parsedConfig === null) {
          throw new Error(t('settings.modals.dns.errors.invalid'))
        }
        config = parsedConfig as Record<string, any>
      }

      await mutate(() => saveDnsConfig(config), {
        id: 'save-dns-config',
        errorNotice: false,
      })

      const validation = await validateDnsConfig()

      if (validation.status !== 'valid') {
        const errorMsg =
          validation.status === 'invalid'
            ? validation.message
            : 'Configuration validation skipped'
        let cleanErrorMsg = errorMsg

        if (errorMsg.includes('level=error')) {
          const errorLines = errorMsg
            .split('\n')
            .filter(
              (line) =>
                line.includes('level=error') ||
                line.includes('level=fatal') ||
                line.includes('failed'),
            )

          if (errorLines.length > 0) {
            cleanErrorMsg = errorLines
              .map((line) => {
                const msgMatch = line.match(/msg="([^"]+)"/)
                return msgMatch ? msgMatch[1] : line
              })
              .join(', ')
          }
        }

        showNotice.error(
          'settings.modals.dns.messages.configError',
          cleanErrorMsg,
        )
        return
      }

      if (dnsEnabled) {
        await mutate(() => applyDnsConfig(true), {
          id: 'apply-dns-config',
          errorNotice: false,
        })
        mutateClash()
      }

      setOpen(false)
      showNotice.success('settings.modals.dns.messages.saved')
    } catch (err) {
      showNotice.error('settings.modals.dns.messages.configError', err)
    }
  })

  const handleYamlChange = (value?: string) => {
    setYamlContent(value || '')
  }

  const handleChange = (field: string) => (event: any) => {
    const value =
      event.target.type === 'checkbox'
        ? event.target.checked
        : event.target.value

    setValues((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

  return (
    <BaseDialog
      open={open}
      disableEnforceFocus={!visualization}
      title={
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          {t('settings.modals.dns.dialog.title')}
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Button
              data-setting-target="dns-viewer-reset"
              variant="outlined"
              size="small"
              color="warning"
              startIcon={<RestartAltRounded />}
              onClick={resetToDefaults}
            >
              {t('shared.actions.resetToDefault')}
            </Button>
            <Button
              variant="contained"
              size="small"
              data-setting-target="dns-mode"
              onClick={() => {
                if (visualization) {
                  setYamlContent(buildDnsYaml(values))
                } else {
                  updateValuesFromYaml()
                }
                setVisualization(!visualization)
              }}
            >
              {visualization
                ? t('shared.editorModes.advanced')
                : t('shared.editorModes.visualization')}
            </Button>
          </Box>
        </Box>
      }
      contentSx={{
        width: 550,
        overflow: 'auto',
        ...(visualization
          ? {}
          : { padding: '0 24px', display: 'flex', flexDirection: 'column' }),
      }}
      okBtn={t('shared.actions.save')}
      cancelBtn={t('shared.actions.cancel')}
      onClose={() => setOpen(false)}
      onCancel={() => setOpen(false)}
      onOk={onSave}
    >
      <span
        data-settings-dialog="dns-viewer"
        data-search-ready={!initializing}
      />
      {initializing && (
        <Typography role="status" data-settings-loading tabIndex={-1}>
          {t('shared.statuses.loading')}
        </Typography>
      )}
      <Alert severity="info" sx={{ mb: 2 }}>
        {t('settings.modals.dns.dialog.profileScope')}
      </Alert>
      <Typography
        variant="body2"
        color="warning.main"
        sx={{ mb: 2, mt: 0, fontStyle: 'italic' }}
      >
        {t('settings.modals.dns.dialog.warning')}
      </Typography>

      {visualization ? (
        <List>
          <Typography
            variant="subtitle1"
            sx={{ mt: 1, mb: 1, fontWeight: 'bold' }}
          >
            {t('settings.modals.dns.sections.general')}
          </Typography>

          <Item data-setting-target="settings.modals.dns.fields.enable">
            <ListItemText primary={t('settings.modals.dns.fields.enable')} />
            <Switch
              edge="end"
              checked={values.enable}
              onChange={handleChange('enable')}
            />
          </Item>

          <Item data-setting-target="settings.modals.dns.fields.listen">
            <ListItemText primary={t('settings.modals.dns.fields.listen')} />
            <TextField
              size="small"
              autoComplete="off"
              spellCheck="false"
              value={values.listen}
              onChange={handleChange('listen')}
              placeholder=":53"
              sx={{ width: 150 }}
            />
          </Item>

          <Item data-setting-target="settings.modals.dns.fields.enhancedMode">
            <ListItemText
              primary={t('settings.modals.dns.fields.enhancedMode')}
            />
            <FormControl size="small" sx={{ width: 150 }}>
              <Select
                value={values.enhancedMode}
                onChange={handleChange('enhancedMode')}
              >
                <MenuItem value="fake-ip">fake-ip</MenuItem>
                <MenuItem value="redir-host">redir-host</MenuItem>
              </Select>
            </FormControl>
          </Item>

          <Item data-setting-target="settings.modals.dns.fields.fakeIpRange">
            <ListItemText
              primary={t('settings.modals.dns.fields.fakeIpRange')}
            />
            <TextField
              size="small"
              autoComplete="off"
              spellCheck="false"
              value={values.fakeIpRange}
              onChange={handleChange('fakeIpRange')}
              placeholder="198.18.0.1/16"
              sx={{ width: 150 }}
            />
          </Item>

          <Item data-setting-target="settings.modals.dns.fields.fakeIpRange6">
            <ListItemText
              primary={t('settings.modals.dns.fields.fakeIpRange6')}
            />
            <TextField
              size="small"
              autoComplete="off"
              spellCheck="false"
              value={values.fakeIpRange6}
              onChange={handleChange('fakeIpRange6')}
              placeholder="fdfe:dcba:9876::1/64"
              sx={{ width: 200 }}
            />
          </Item>

          <Item data-setting-target="settings.modals.dns.fields.fakeIpFilterMode">
            <ListItemText
              primary={t('settings.modals.dns.fields.fakeIpFilterMode')}
            />
            <FormControl size="small" sx={{ width: 150 }}>
              <Select
                value={values.fakeIpFilterMode}
                onChange={handleChange('fakeIpFilterMode')}
              >
                <MenuItem value="blacklist">blacklist</MenuItem>
                <MenuItem value="whitelist">whitelist</MenuItem>
              </Select>
            </FormControl>
          </Item>

          <Item data-setting-target="settings.modals.dns.fields.ipv6.label">
            <ListItemText
              primary={t('settings.modals.dns.fields.ipv6.label')}
              secondary={t('settings.modals.dns.fields.ipv6.description')}
            />
            <Switch
              edge="end"
              checked={values.ipv6}
              onChange={handleChange('ipv6')}
            />
          </Item>

          <Item data-setting-target="settings.modals.dns.fields.preferH3.label">
            <ListItemText
              primary={t('settings.modals.dns.fields.preferH3.label')}
              secondary={t('settings.modals.dns.fields.preferH3.description')}
            />
            <Switch
              edge="end"
              checked={values.preferH3}
              onChange={handleChange('preferH3')}
            />
          </Item>

          <Item data-setting-target="settings.modals.dns.fields.respectRules.label">
            <ListItemText
              primary={t('settings.modals.dns.fields.respectRules.label')}
              secondary={t(
                'settings.modals.dns.fields.respectRules.description',
              )}
            />
            <Switch
              edge="end"
              checked={values.respectRules}
              onChange={handleChange('respectRules')}
            />
          </Item>

          <Item data-setting-target="settings.modals.dns.fields.useHosts.label">
            <ListItemText
              primary={t('settings.modals.dns.fields.useHosts.label')}
              secondary={t('settings.modals.dns.fields.useHosts.description')}
            />
            <Switch
              edge="end"
              checked={values.useHosts}
              onChange={handleChange('useHosts')}
            />
          </Item>

          <Item data-setting-target="settings.modals.dns.fields.useSystemHosts.label">
            <ListItemText
              primary={t('settings.modals.dns.fields.useSystemHosts.label')}
              secondary={t(
                'settings.modals.dns.fields.useSystemHosts.description',
              )}
            />
            <Switch
              edge="end"
              checked={values.useSystemHosts}
              onChange={handleChange('useSystemHosts')}
            />
          </Item>

          <Item data-setting-target="settings.modals.dns.fields.directPolicy.label">
            <ListItemText
              primary={t('settings.modals.dns.fields.directPolicy.label')}
              secondary={t(
                'settings.modals.dns.fields.directPolicy.description',
              )}
            />
            <Switch
              edge="end"
              checked={values.directNameserverFollowPolicy}
              onChange={handleChange('directNameserverFollowPolicy')}
            />
          </Item>

          <Item
            data-setting-target="settings.modals.dns.fields.defaultNameserver.label"
            sx={{ flexDirection: 'column', alignItems: 'flex-start' }}
          >
            <ListItemText
              primary={t('settings.modals.dns.fields.defaultNameserver.label')}
              secondary={t(
                'settings.modals.dns.fields.defaultNameserver.description',
              )}
            />
            <TextField
              fullWidth
              multiline
              minRows={2}
              maxRows={3}
              size="small"
              spellCheck="false"
              value={values.defaultNameserver}
              onChange={handleChange('defaultNameserver')}
              placeholder="system,223.6.6.6, 8.8.8.8, 2400:3200::1, 2001:4860:4860::8888"
            />
          </Item>

          <Item
            data-setting-target="settings.modals.dns.fields.nameserver.label"
            sx={{ flexDirection: 'column', alignItems: 'flex-start' }}
          >
            <ListItemText
              primary={t('settings.modals.dns.fields.nameserver.label')}
              secondary={t('settings.modals.dns.fields.nameserver.description')}
            />
            <TextField
              fullWidth
              multiline
              minRows={2}
              maxRows={4}
              size="small"
              spellCheck="false"
              value={values.nameserver}
              onChange={handleChange('nameserver')}
              placeholder="8.8.8.8, https://doh.pub/dns-query, https://dns.alidns.com/dns-query"
            />
          </Item>

          <Item
            data-setting-target="settings.modals.dns.fields.fallback.label"
            sx={{ flexDirection: 'column', alignItems: 'flex-start' }}
          >
            <ListItemText
              primary={t('settings.modals.dns.fields.fallback.label')}
              secondary={t('settings.modals.dns.fields.fallback.description')}
            />
            <TextField
              fullWidth
              multiline
              minRows={2}
              maxRows={4}
              size="small"
              spellCheck="false"
              value={values.fallback}
              onChange={handleChange('fallback')}
              placeholder="https://dns.alidns.com/dns-query, https://dns.google/dns-query, https://cloudflare-dns.com/dns-query"
            />
          </Item>

          <Item
            data-setting-target="settings.modals.dns.fields.proxy.label"
            sx={{ flexDirection: 'column', alignItems: 'flex-start' }}
          >
            <ListItemText
              primary={t('settings.modals.dns.fields.proxy.label')}
              secondary={t('settings.modals.dns.fields.proxy.description')}
            />
            <TextField
              fullWidth
              multiline
              minRows={2}
              maxRows={3}
              size="small"
              spellCheck="false"
              value={values.proxyServerNameserver}
              onChange={handleChange('proxyServerNameserver')}
              placeholder="https://doh.pub/dns-query, https://dns.alidns.com/dns-query"
            />
          </Item>

          <Item
            data-setting-target="settings.modals.dns.fields.directNameserver.label"
            sx={{ flexDirection: 'column', alignItems: 'flex-start' }}
          >
            <ListItemText
              primary={t('settings.modals.dns.fields.directNameserver.label')}
              secondary={t(
                'settings.modals.dns.fields.directNameserver.description',
              )}
            />
            <TextField
              fullWidth
              multiline
              minRows={2}
              maxRows={3}
              size="small"
              spellCheck="false"
              value={values.directNameserver}
              onChange={handleChange('directNameserver')}
              placeholder="system, 223.6.6.6"
            />
          </Item>

          <Item
            data-setting-target="settings.modals.dns.fields.fakeIpFilter.label"
            sx={{ flexDirection: 'column', alignItems: 'flex-start' }}
          >
            <ListItemText
              primary={t('settings.modals.dns.fields.fakeIpFilter.label')}
              secondary={t(
                'settings.modals.dns.fields.fakeIpFilter.description',
              )}
            />
            <TextField
              fullWidth
              multiline
              minRows={2}
              maxRows={4}
              size="small"
              spellCheck="false"
              value={values.fakeIpFilter}
              onChange={handleChange('fakeIpFilter')}
              placeholder="*.lan, *.local, localhost.ptlogin2.qq.com"
            />
          </Item>

          <Item
            data-setting-target="settings.modals.dns.fields.nameserverPolicy.label"
            sx={{ flexDirection: 'column', alignItems: 'flex-start' }}
          >
            <ListItemText
              primary={t('settings.modals.dns.fields.nameserverPolicy.label')}
              secondary={t(
                'settings.modals.dns.fields.nameserverPolicy.description',
              )}
            />
            <TextField
              fullWidth
              multiline
              minRows={2}
              maxRows={4}
              size="small"
              spellCheck="false"
              value={values.nameserverPolicy}
              onChange={handleChange('nameserverPolicy')}
              placeholder="+.arpa=10.0.0.1, rule-set:cn=https://doh.pub/dns-query;https://dns.alidns.com/dns-query"
            />
          </Item>

          <Typography
            variant="subtitle2"
            sx={{ mt: 2, mb: 1, fontWeight: 'bold' }}
          >
            {t('settings.modals.dns.sections.fallbackFilter')}
          </Typography>

          <Item data-setting-target="settings.modals.dns.fields.geoipFiltering.label">
            <ListItemText
              primary={t('settings.modals.dns.fields.geoipFiltering.label')}
              secondary={t(
                'settings.modals.dns.fields.geoipFiltering.description',
              )}
            />
            <Switch
              edge="end"
              checked={values.fallbackGeoip}
              onChange={handleChange('fallbackGeoip')}
            />
          </Item>

          <Item data-setting-target="settings.modals.dns.fields.geoipCode">
            <ListItemText primary={t('settings.modals.dns.fields.geoipCode')} />
            <TextField
              size="small"
              autoComplete="off"
              spellCheck="false"
              value={values.fallbackGeoipCode}
              onChange={handleChange('fallbackGeoipCode')}
              placeholder="CN"
              sx={{ width: 100 }}
            />
          </Item>

          <Item
            data-setting-target="settings.modals.dns.fields.fallbackIpCidr.label"
            sx={{ flexDirection: 'column', alignItems: 'flex-start' }}
          >
            <ListItemText
              primary={t('settings.modals.dns.fields.fallbackIpCidr.label')}
              secondary={t(
                'settings.modals.dns.fields.fallbackIpCidr.description',
              )}
            />
            <TextField
              fullWidth
              multiline
              minRows={2}
              maxRows={3}
              size="small"
              spellCheck="false"
              value={values.fallbackIpcidr}
              onChange={handleChange('fallbackIpcidr')}
              placeholder="240.0.0.0/4, 127.0.0.1/8"
            />
          </Item>

          <Item
            data-setting-target="settings.modals.dns.fields.fallbackDomain.label"
            sx={{ flexDirection: 'column', alignItems: 'flex-start' }}
          >
            <ListItemText
              primary={t('settings.modals.dns.fields.fallbackDomain.label')}
              secondary={t(
                'settings.modals.dns.fields.fallbackDomain.description',
              )}
            />
            <TextField
              fullWidth
              multiline
              minRows={2}
              maxRows={3}
              size="small"
              spellCheck="false"
              value={values.fallbackDomain}
              onChange={handleChange('fallbackDomain')}
              placeholder="+.google.com, +.facebook.com, +.youtube.com"
            />
          </Item>

          <Typography
            variant="subtitle1"
            sx={{ mt: 3, mb: 0, fontWeight: 'bold' }}
          >
            {t('settings.modals.dns.sections.hosts')}
          </Typography>

          <Item
            data-setting-target="settings.modals.dns.fields.hosts.label"
            sx={{ flexDirection: 'column', alignItems: 'flex-start' }}
          >
            <ListItemText
              primary={t('settings.modals.dns.fields.hosts.label')}
              secondary={t('settings.modals.dns.fields.hosts.description')}
            />
            <TextField
              fullWidth
              multiline
              minRows={2}
              maxRows={4}
              size="small"
              spellCheck="false"
              value={values.hosts}
              onChange={handleChange('hosts')}
              placeholder="*.clash.dev=127.0.0.1, alpha.clash.dev=::1, test.com=1.1.1.1;2.2.2.2, baidu.com=google.com"
            />
          </Item>
        </List>
      ) : (
        <MonacoEditor
          height="100vh"
          language="yaml"
          value={yamlContent}
          theme={themeMode === 'light' ? 'light' : 'vs-dark'}
          className="flex-grow"
          onMount={(editorInstance) => {
            editorRef.current = editorInstance
          }}
          options={{
            tabSize: 2,
            minimap: {
              enabled: document.documentElement.clientWidth >= 1500,
            },
            mouseWheelZoom: true,
            quickSuggestions: {
              strings: true,
              comments: true,
              other: true,
            },
            padding: {
              top: 33,
            },
            fontFamily: MONACO_FONT_FAMILY,
            fontLigatures: false,
            smoothScrolling: true,
          }}
          onChange={handleYamlChange}
        />
      )}
    </BaseDialog>
  )
}