import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { api, getCurrentAccountId, setCurrentAccountId } from '../services/api'
import './ConfigPanel.css'

const ConfigPanel = ({ currentUser }) => {
  const [configs, setConfigs] = useState({})
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [message, setMessage] = useState('')
  const [feasibilityCheck, setFeasibilityCheck] = useState(null)
  const [checkingFeasibility, setCheckingFeasibility] = useState(false)
  const [systemStatus, setSystemStatus] = useState(null)
  const [backendStatus, setBackendStatus] = useState(null)
  const [systemBusy, setSystemBusy] = useState(false)
  const [accountTradingStatus, setAccountTradingStatus] = useState(null)
  const [accountTradingErr, setAccountTradingErr] = useState('')
  const [currentAccountMeta, setCurrentAccountMeta] = useState(null)
  const [configMeta, setConfigMeta] = useState(null)

  // 多账号：当前账号（仅用于配置页提示；全局切换器在顶部导航）
  const [accountId, setAccountId] = useState(getCurrentAccountId())

  const isAdmin = (currentUser?.role || '') === 'admin'
  const globalStrategyAccountId = parseInt(String(configMeta?.global_strategy_account_id || '1'), 10) || 1
  const isGlobalStrategyAccount = isAdmin && accountId === globalStrategyAccountId
  const loadConfigMeta = async () => {
    try {
      const m = await api.getConfigMeta()
      setConfigMeta(m || null)
    } catch (e) {
      setConfigMeta(null)
    }
  }

  // 账号管理（超管）
  const [accountsAdmin, setAccountsAdmin] = useState([])
  const [accountsBusy, setAccountsBusy] = useState(false)
  const [showAccountsAdmin, setShowAccountsAdmin] = useState(false)
  const [newAccount, setNewAccount] = useState({
    name: '',
    api_key: '',
    api_secret: '',
    use_testnet: false,
    status: 'active',
  })
  const [credEditId, setCredEditId] = useState(null)
  const [credForm, setCredForm] = useState({ api_key: '', api_secret: '', use_testnet: false })

  // “PCT”类配置里有少数是“百分比数值（<=1表示<=1%）”，而不是“0~1比例”
  // 例如 LIMIT_ORDER_OFFSET_PCT=0.5 表示 0.5%（而不是 50%）
  const PCT_LIKE_KEYS = new Set([
    'LIMIT_ORDER_OFFSET_PCT',
    'ENTRY_MAX_DRIFT_PCT_TRENDING',
    'ENTRY_MAX_DRIFT_PCT_RANGING',
  ])

  // 配置快照（用于整体分析/导出）
  const [showSnapshot, setShowSnapshot] = useState(false)
  const [snapshotText, setSnapshotText] = useState('')
  const [snapshotIncludeSecrets, setSnapshotIncludeSecrets] = useState(false)
  const [snapshotBusy, setSnapshotBusy] = useState(false)

  // 预设方案配置
  // 注意：百分比配置使用整数形式（如8.0表示8%），在应用时会转换为小数（0.08）
  const presets = {
    swing: {
      name: '波段回归（推荐）',
      desc: '根治高频与追价：关闭智能入场，回归“纯限价 + 30分钟扫描 + 更高信号门槛”的低频波段。建议先跑20-30单再评估。',
      configs: {
        // 操作频率
        SCAN_INTERVAL: 1800, // 30分钟
        TOP_N_SYMBOLS: 8,

        // 仓位管理（重要语义：这些百分比均按“保证金占用比例”理解）
        MAX_POSITION_PERCENT: 2.0, // 2%
        MAX_TOTAL_POSITION_PERCENT: 20.0, // 20%
        MIN_POSITION_PERCENT: 0.0, // 0%（等价于关闭最小仓位占比）

        // 风控
        MIN_SIGNAL_STRENGTH: 8,
        USE_TRAILING_STOP: false,  // 禁用移动止损，让利润奔跑
        ATR_TAKE_PROFIT_MULTIPLIER: 4.5,  // 放大ATR止盈倍数（从3.0提升到4.5）
        TAKE_PROFIT_PERCENT: 25.0,  // 放宽固定止盈（从30%到25%，配合ATR止盈放大盈亏比）
        MIN_HOLD_TIME_SEC: 1800,  // 最小持仓时间30分钟（强制波段持仓纪律）

        // 根治：关闭智能入场（回归纯限价，不追价/不市价兜底）
        SMART_ENTRY_ENABLED: false,
      },
    },
    fill: {
      name: '成交优先（更少漏单）',
      desc: '优先解决“挂单NEW→超时撤单→没成交”的问题：解锁自动交易过滤 + 保守智能入场（限制追价步数与追价上限），在趋势强时允许可控的市价兜底。',
      configs: {
        // 频率与精选
        SCAN_INTERVAL: 1800,
        TOP_N_SYMBOLS: 6,
        MIN_SIGNAL_STRENGTH: 7,

        // 自动交易过滤：先保证“会下单”
        AUTO_TRADE_ONLY_TRENDING: false,
        AUTO_TRADE_ALLOW_4H_NEUTRAL: true,

        // 入场（减少撤单/漏单）
        SMART_ENTRY_ENABLED: true,
        LIMIT_ORDER_OFFSET_PCT: 0.1, // 0.1% 更贴近当前价
        ENTRY_CONFIRM_TIMEOUT_SEC: 120,
        ENTRY_CHASE_MAX_STEPS: 2,
        ENTRY_STEP_WAIT_SEC: 20,
        ENTRY_MARKET_FALLBACK_AFTER_SEC: 60,
        ENTRY_MAX_DRIFT_PCT_TRENDING: 0.3, // 0.3%
        ENTRY_MAX_DRIFT_PCT_RANGING: 0.15, // 0.15%

        // 风控：默认关闭移动止损（避免“保本价”过早触发）
        USE_TRAILING_STOP: false,  // 禁用移动止损，让利润奔跑
        ATR_TAKE_PROFIT_MULTIPLIER: 4.5,  // 放大ATR止盈倍数（从3.0提升到4.5）
        TAKE_PROFIT_PERCENT: 25.0,  // 放宽固定止盈（从30%到25%，配合ATR止盈放大盈亏比）
        MIN_HOLD_TIME_SEC: 1800,  // 最小持仓时间30分钟（强制波段持仓纪律）
      },
    },
    strict: {
      name: '精选低频（高胜率倾向）',
      desc: '更偏“少单、质量优先”：仅趋势行情自动交易 + 4H中性不自动下单 + 更高信号门槛。仍保持较贴近的限价偏移，减少“完全成交不了”。',
      configs: {
        SCAN_INTERVAL: 1800,
        TOP_N_SYMBOLS: 6,
        MIN_SIGNAL_STRENGTH: 8,

        AUTO_TRADE_ONLY_TRENDING: true,
        AUTO_TRADE_ALLOW_4H_NEUTRAL: false,

        SMART_ENTRY_ENABLED: false,
        LIMIT_ORDER_OFFSET_PCT: 0.1,
        ENTRY_CONFIRM_TIMEOUT_SEC: 180,

        USE_TRAILING_STOP: false,  // 禁用移动止损，让利润奔跑
        ATR_TAKE_PROFIT_MULTIPLIER: 4.5,  // 放大ATR止盈倍数（从3.0提升到4.5）
        TAKE_PROFIT_PERCENT: 25.0,  // 放宽固定止盈（从30%到25%，配合ATR止盈放大盈亏比）
        MIN_HOLD_TIME_SEC: 1800,  // 最小持仓时间30分钟（强制波段持仓纪律）
      },
    },
    steady: {
      name: '稳定出单（均衡收益/频率）',
      desc: '在“会下单”的基础上略提高出单频率：更短扫描间隔 + 更宽松门槛 + 保守智能入场（追价受限），适合想要稳定有单但不想回到高频。',
      configs: {
        SCAN_INTERVAL: 900,
        TOP_N_SYMBOLS: 8,
        MIN_SIGNAL_STRENGTH: 6,

        AUTO_TRADE_ONLY_TRENDING: false,
        AUTO_TRADE_ALLOW_4H_NEUTRAL: true,

        SMART_ENTRY_ENABLED: true,
        LIMIT_ORDER_OFFSET_PCT: 0.12,
        ENTRY_CONFIRM_TIMEOUT_SEC: 120,
        ENTRY_CHASE_MAX_STEPS: 3,
        ENTRY_STEP_WAIT_SEC: 15,
        ENTRY_MARKET_FALLBACK_AFTER_SEC: 45,
        ENTRY_MAX_DRIFT_PCT_TRENDING: 0.4,
        ENTRY_MAX_DRIFT_PCT_RANGING: 0.2,

        USE_TRAILING_STOP: false,  // 禁用移动止损，让利润奔跑
        ATR_TAKE_PROFIT_MULTIPLIER: 4.5,  // 放大ATR止盈倍数（从3.0提升到4.5）
        TAKE_PROFIT_PERCENT: 25.0,  // 放宽固定止盈（从30%到25%，配合ATR止盈放大盈亏比）
        MIN_HOLD_TIME_SEC: 1800,  // 最小持仓时间30分钟（强制波段持仓纪律）
      },
    },
    conservative: {
      name: '保守配置',
      desc: '适合新手，风险较低，止损止盈较宽松，避免被正常波动触发',
      configs: {
        SCAN_INTERVAL: 900,
        MIN_CHANGE_PERCENT: 2.0,  // 2%
        MIN_SIGNAL_STRENGTH: 5,
        TOP_N_SYMBOLS: 10,
        MAX_SCAN_SYMBOLS: 150,
        MIN_VOLATILITY: 0.02,  // 保持小数形式（波动率）
        STOP_LOSS_PERCENT: 10.0,  // 10%（相对于保证金，更宽松）
        TAKE_PROFIT_PERCENT: 25.0,  // 25%（相对于保证金，从20%提升到25%，放大盈亏比）
        MIN_STOP_LOSS_PRICE_PCT: 2.0,  // 2%最小价格变动保护
        MIN_TAKE_PROFIT_PRICE_PCT: 3.0,  // 3%最小价格变动保护
        USE_TRAILING_STOP: false,  // 禁用移动止损，让利润奔跑
        ATR_TAKE_PROFIT_MULTIPLIER: 4.5,  // 放大ATR止盈倍数（从3.0提升到4.5）
        MIN_HOLD_TIME_SEC: 1800  // 最小持仓时间30分钟（强制波段持仓纪律）
      }
    },
    balanced: {
      name: '平衡配置',
      desc: '推荐使用，平衡频率和质量，止损止盈适中（盈亏比2.5:1）',
      configs: {
        SCAN_INTERVAL: 600,
        MIN_CHANGE_PERCENT: 1.5,  // 1.5%
        MIN_SIGNAL_STRENGTH: 4,
        TOP_N_SYMBOLS: 12,
        MAX_SCAN_SYMBOLS: 250,
        MIN_VOLATILITY: 0.018,  // 保持小数形式（波动率）
        STOP_LOSS_PERCENT: 8.0,  // 8%（相对于保证金，默认值）
        TAKE_PROFIT_PERCENT: 25.0,  // 25%（相对于保证金，从20%提升到25%，放大盈亏比）
        MIN_STOP_LOSS_PRICE_PCT: 2.0,  // 2%最小价格变动保护
        MIN_TAKE_PROFIT_PRICE_PCT: 3.0,  // 3%最小价格变动保护
        USE_TRAILING_STOP: false,  // 禁用移动止损，让利润奔跑
        ATR_TAKE_PROFIT_MULTIPLIER: 4.5,  // 放大ATR止盈倍数（从3.0提升到4.5）
        MIN_HOLD_TIME_SEC: 1800  // 最小持仓时间30分钟（强制波段持仓纪律）
      }
    },
    aggressive: {
      name: '激进高频',
      desc: '晚间波动大时使用，交易频率高，止损较紧但止盈合理（盈亏比3:1）',
      configs: {
        SCAN_INTERVAL: 300,
        MIN_CHANGE_PERCENT: 1.0,  // 1%
        MIN_SIGNAL_STRENGTH: 3,
        TOP_N_SYMBOLS: 18,
        MAX_SCAN_SYMBOLS: 350,
        MIN_VOLATILITY: 0.015,  // 保持小数形式（波动率）
        STOP_LOSS_PERCENT: 5.0,  // 5%（相对于保证金，较紧）
        TAKE_PROFIT_PERCENT: 25.0,  // 25%（相对于保证金，从15%大幅提升到25%，放大盈亏比到5:1）
        MIN_STOP_LOSS_PRICE_PCT: 1.5,  // 1.5%最小价格变动保护
        MIN_TAKE_PROFIT_PRICE_PCT: 2.0,  // 2%最小价格变动保护
        USE_TRAILING_STOP: false,  // 禁用移动止损，让利润奔跑
        ATR_TAKE_PROFIT_MULTIPLIER: 4.5,  // 放大ATR止盈倍数（从3.0提升到4.5）
        MIN_HOLD_TIME_SEC: 1800  // 最小持仓时间30分钟（强制波段持仓纪律）
      }
    }
  }

  const loadSystemStatus = async () => {
    try {
      const res = await api.getTradingSystemStatus()
      setSystemStatus(res)
    } catch (error) {
      // 静默失败：不影响配置页使用
    }
  }

  const loadBackendStatus = async () => {
    try {
      const res = await api.getBackendStatus()
      setBackendStatus(res)
    } catch (error) {
      // 静默失败：不影响配置页使用
    }
  }

  const loadAccountTradingStatus = async () => {
    try {
      const res = await api.getAccountTradingStatus(accountId)
      setAccountTradingStatus(res)
      setAccountTradingErr('')
    } catch (error) {
      setAccountTradingStatus(null)
      setAccountTradingErr(error?.message || '获取交易进程状态失败')
    }
  }

  const loadCurrentAccountMeta = async () => {
    try {
      const list = await api.getAccounts()
      const accounts = Array.isArray(list) ? list : []
      const meta = accounts.find((a) => parseInt(String(a?.id || '0'), 10) === parseInt(String(accountId || '0'), 10))
      setCurrentAccountMeta(meta || null)
      // 同步 testnet 开关到表单（仅在未输入时同步，避免打断正在输入）
      if (meta && !credForm.api_key && !credForm.api_secret) {
        setCredForm((prev) => ({ ...prev, use_testnet: !!meta.use_testnet }))
      }
    } catch (e) {
      setCurrentAccountMeta(null)
    }
  }

  const handleAccountTradingEnsure = async () => {
    setSystemBusy(true)
    setMessage('')
    try {
      const res = await api.ensureAccountTradingProgram(accountId)
      setMessage(`已生成/刷新 supervisor 配置：${res.program || ''}`)
      await loadAccountTradingStatus()
    } catch (error) {
      setMessage('生成 supervisor 配置失败: ' + (error.message || '未知错误'))
    } finally {
      setSystemBusy(false)
    }
  }

  const handleAccountTradingStart = async () => {
    const hasKey = !!currentAccountMeta?.has_api_key
    const hasSecret = !!currentAccountMeta?.has_api_secret
    if (!hasKey || !hasSecret) {
      setMessage('请先在“账号密钥（当前账号）”中配置 BINANCE_API_KEY 与 BINANCE_API_SECRET，然后再启动交易进程')
      return
    }
    setSystemBusy(true)
    setMessage('')
    try {
      const res = await api.startAccountTrading(accountId)
      setMessage(res.message || '交易进程已启动')
      await loadAccountTradingStatus()
    } catch (error) {
      setMessage('启动交易进程失败: ' + (error.message || '未知错误'))
    } finally {
      setSystemBusy(false)
    }
  }

  const handleAccountTradingStop = async () => {
    setSystemBusy(true)
    setMessage('')
    try {
      const res = await api.stopAccountTrading(accountId)
      setMessage(res.message || '交易进程已停止')
      await loadAccountTradingStatus()
    } catch (error) {
      setMessage('停止交易进程失败: ' + (error.message || '未知错误'))
    } finally {
      setSystemBusy(false)
    }
  }

  const handleAccountTradingRestart = async () => {
    const hasKey = !!currentAccountMeta?.has_api_key
    const hasSecret = !!currentAccountMeta?.has_api_secret
    if (!hasKey || !hasSecret) {
      setMessage('请先在“账号密钥（当前账号）”中配置 BINANCE_API_KEY 与 BINANCE_API_SECRET，然后再重启交易进程')
      return
    }
    setSystemBusy(true)
    setMessage('')
    try {
      const res = await api.restartAccountTrading(accountId)
      setMessage(res.message || '交易进程已重启')
      await loadAccountTradingStatus()
    } catch (error) {
      setMessage('重启交易进程失败: ' + (error.message || '未知错误'))
    } finally {
      setSystemBusy(false)
    }
  }

  const handleClearCache = async () => {
    setSystemBusy(true)
    setMessage('')
    try {
      const res = await api.clearSystemCache()
      setMessage(res.message || '缓存已清理')
      await loadConfigs()
      await loadSystemStatus()
    } catch (error) {
      setMessage('清理缓存失败: ' + (error.message || '未知错误'))
    } finally {
      setSystemBusy(false)
    }
  }

  const handleStartTrading = async () => {
    setSystemBusy(true)
    setMessage('')
    try {
      const res = await api.startTradingSystem()
      setMessage(res.message || '交易系统已启动')
      await loadSystemStatus()
    } catch (error) {
      setMessage('启动失败: ' + (error.message || '未知错误'))
    } finally {
      setSystemBusy(false)
    }
  }

  const handleStopTrading = async () => {
    setSystemBusy(true)
    setMessage('')
    try {
      const res = await api.stopTradingSystem()
      setMessage(res.message || '交易系统已停止')
      await loadSystemStatus()
    } catch (error) {
      setMessage('停止失败: ' + (error.message || '未知错误'))
    } finally {
      setSystemBusy(false)
    }
  }

  const handleRestartTrading = async () => {
    setSystemBusy(true)
    setMessage('')
    try {
      const res = await api.restartTradingSystem()
      setMessage(res.message || '交易系统已重启')
      await loadSystemStatus()
    } catch (error) {
      setMessage('重启失败: ' + (error.message || '未知错误'))
    } finally {
      setSystemBusy(false)
    }
  }

  const handleRestartBackend = async () => {
    if (!window.confirm('确定要重启后端服务吗？重启期间页面接口会短暂不可用（约 3-10 秒）。')) return
    setSystemBusy(true)
    setMessage('')
    try {
      const res = await api.restartBackend()
      setMessage(res.message || '已发起后端重启')
      // 给后端一点时间完成重启，再刷新状态
      setTimeout(() => {
        loadBackendStatus()
      }, 4000)
    } catch (error) {
      setMessage('重启后端失败: ' + (error.message || '未知错误'))
    } finally {
      setSystemBusy(false)
    }
  }

  const handleRestartAllTrading = async () => {
    if (!window.confirm('确定要重启【所有账号】的交易进程吗？这会让所有用户的交易服务短暂中断（约 3-10 秒），用于升级代码后统一生效。')) return
    setSystemBusy(true)
    setMessage('')
    try {
      const res = await api.restartAllTradingSystems({ prefix: 'auto_sys_acc', do_update: true })
      setMessage(`已发起批量重启：共 ${res.count} 个，成功 ${res.ok}，失败 ${res.failed}`)
    } catch (e) {
      setMessage('批量重启失败: ' + (e?.message || '未知错误'))
    } finally {
      setSystemBusy(false)
    }
  }

  useEffect(() => {
    loadConfigMeta()
    loadConfigs()
    checkFeasibility()
    if (isAdmin) {
      loadSystemStatus()
      loadBackendStatus()
    }
    loadAccountTradingStatus()
    loadCurrentAccountMeta()

    const timer = setInterval(() => {
      if (isAdmin) {
        loadSystemStatus()
        loadBackendStatus()
      }
      loadAccountTradingStatus()
      loadCurrentAccountMeta()
    }, 3000)

    return () => clearInterval(timer)
  }, [])

  const loadAccountsAdmin = async () => {
    try {
      const list = await api.getAccounts()
      setAccountsAdmin(Array.isArray(list) ? list : [])
    } catch (e) {
      setAccountsAdmin([])
    }
  }

  const notifyAccountsUpdated = () => {
    try {
      window.dispatchEvent(new Event('ats:accounts:updated'))
    } catch (e) {
      // ignore
    }
  }

  // 切换账号时，刷新页面数据
  useEffect(() => {
    setCurrentAccountId(accountId)
    setMessage('')
    setLoading(true)
    loadConfigs()
    checkFeasibility()
    if (isAdmin) {
      loadSystemStatus()
      loadBackendStatus()
    }
    loadAccountTradingStatus()
    loadCurrentAccountMeta()
  }, [accountId])

  // 顶部导航切换账号时：即时同步（比 setInterval 更及时）
  useEffect(() => {
    const onChanged = (e) => {
      const next = parseInt(String(e?.detail?.accountId || ''), 10)
      if (Number.isFinite(next) && next > 0) setAccountId(next)
    }
    window.addEventListener('ats:account:changed', onChanged)
    return () => window.removeEventListener('ats:account:changed', onChanged)
  }, [])

  // 顶部导航切换账号时（localStorage更新），这里做一个轻量同步
  useEffect(() => {
    const timer = setInterval(() => {
      const cur = getCurrentAccountId()
      
      if (cur !== accountId) setAccountId(cur)
    }, 1000)
    return () => clearInterval(timer)
  }, [accountId])

  const checkFeasibility = async () => {
    setCheckingFeasibility(true)
    try {
      const result = await api.checkConfigFeasibility()
      setFeasibilityCheck(result)
    } catch (error) {
      console.error('检查配置可行性失败:', error)
      // 静默失败，不显示错误
    } finally {
      setCheckingFeasibility(false)
    }
  }

  const loadConfigs = async () => {
    try {
      const data = await api.getConfigs()
      setConfigs(data)
    } catch (error) {
      console.error('Failed to load configs:', error)
      setMessage('加载配置失败: ' + error.message)
    } finally {
      setLoading(false)
    }
  }

  const handleUpdate = async (key, value, type, category) => {
    setSaving(true)
    setMessage('')
    try {
      const response = await api.updateConfig(key, {
        value,
        type,
        category
      })
      setMessage(response.message || '配置已更新')
      if (response.note) {
        setTimeout(() => {
          setMessage(response.note)
        }, 2000)
      }
      // 重新加载配置
      await loadConfigs()
      // 如果更新的是与可行性相关的配置，重新检查可行性
      if (['MIN_MARGIN_USDT', 'MIN_POSITION_PERCENT', 'MAX_POSITION_PERCENT', 'LEVERAGE'].includes(key)) {
        await checkFeasibility()
      }
    } catch (error) {
      const errorMsg = error.message || '更新失败'
      setMessage('更新失败: ' + errorMsg)
      console.error('Config update error:', error)
    } finally {
      setSaving(false)
    }
  }

  const isSecretKey = (key) => {
    return key === 'BINANCE_API_KEY' || key === 'BINANCE_API_SECRET'
  }

  const maskSecret = (val) => {
    const s = val === null || val === undefined ? '' : String(val)
    if (!s) return ''
    if (s.length <= 8) return '****'
    return `${s.slice(0, 4)}...${s.slice(-4)}`
  }

  const toDisplayValueForSnapshot = (key, value) => {
    if (value === null || value === undefined) return value
    // 百分比/比例：尽量转成 “百分比值”
    if (typeof value === 'number' && (key.includes('PERCENT') || key.includes('PCT'))) {
      // 兼容两种：
      // - 常规 PERCENT/PCT：存储为 0~1（比例），展示为 0~100（%）
      // - PCT_LIKE_KEYS：存储可能是 0.006(=0.6%) 或 0.6(=0.6%)，展示统一为“百分比数值”
      if (PCT_LIKE_KEYS.has(key)) {
        return value <= 0.05 ? value * 100 : value
      }
      return value < 1 ? value * 100 : value
    }
    return value
  }

  const buildConfigSnapshot = async (includeSecrets) => {
    // 为了确保是最新值，这里点击时再拉一次
    const data = await api.getConfigs()
    const now = new Date()

    const categoryMap = {
      scan: '市场扫描',
      position: '仓位控制',
      risk: '风险控制',
      strategy: '策略参数',
      api: 'API配置',
    }

    const entries = Object.entries(data || {}).map(([key, cfg]) => {
      const rawVal = cfg?.value
      const valMasked = isSecretKey(key) && !includeSecrets ? maskSecret(rawVal) : rawVal
      const displayVal = toDisplayValueForSnapshot(key, valMasked)
      return {
        key,
        category: cfg?.category || '',
        category_label: categoryMap[cfg?.category] || cfg?.category || '',
        type: cfg?.type || '',
        value: valMasked,
        display_value: displayVal,
        description: cfg?.description || '',
      }
    })

    // 排序：先分类再按 key
    entries.sort((a, b) => {
      const ca = a.category_label || a.category || ''
      const cb = b.category_label || b.category || ''
      if (ca !== cb) return ca.localeCompare(cb)
      return a.key.localeCompare(b.key)
    })

    const snapshot = {
      fetched_at: now.toISOString(),
      note: 'display_value 对 PERCENT/PCT 做了百分比换算；敏感字段可选择脱敏/明文。',
      preset_detected: detectCurrentPreset(),
      system_status: systemStatus
        ? {
          running: !!systemStatus.running,
          pid: systemStatus.pid || null,
          program: systemStatus.program || null,
          state: systemStatus.state || null,
        }
        : null,
      feasibility_check_summary: feasibilityCheck
        ? {
          feasible: !!feasibilityCheck.feasible,
          account_balance: feasibilityCheck.account_balance ?? null,
          base_leverage: feasibilityCheck.base_leverage ?? feasibilityCheck.leverage ?? null,
          max_leverage: feasibilityCheck.max_leverage ?? null,
          use_dynamic_leverage: feasibilityCheck.use_dynamic_leverage ?? null,
          min_margin_usdt: feasibilityCheck.current_config?.min_margin_usdt ?? null,
        }
        : null,
      configs: entries,
    }

    return JSON.stringify(snapshot, null, 2)
  }

  const openSnapshot = async (includeSecrets) => {
    setSnapshotBusy(true)
    setMessage('')
    try {
      const text = await buildConfigSnapshot(includeSecrets)
      setSnapshotText(text)
      setShowSnapshot(true)
    } catch (e) {
      setMessage('生成配置快照失败: ' + (e?.message || '未知错误'))
    } finally {
      setSnapshotBusy(false)
    }
  }

  const copySnapshot = async () => {
    try {
      if (navigator?.clipboard?.writeText) {
        await navigator.clipboard.writeText(snapshotText || '')
        setMessage('已复制配置快照到剪贴板')
      } else {
        setMessage('当前浏览器不支持剪贴板 API，可手动全选复制')
      }
    } catch (e) {
      setMessage('复制失败: ' + (e?.message || '未知错误'))
    }
  }

  const downloadSnapshot = () => {
    try {
      const blob = new Blob([snapshotText || ''], { type: 'application/json;charset=utf-8' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `config-snapshot-${new Date().toISOString().replace(/[:.]/g, '-')}.json`
      document.body.appendChild(a)
      a.click()
      a.remove()
      URL.revokeObjectURL(url)
    } catch (e) {
      setMessage('下载失败: ' + (e?.message || '未知错误'))
    }
  }

  // 检测当前配置匹配哪个预设方案
  const detectCurrentPreset = () => {
    if (!configs || Object.keys(configs).length === 0) return null

    for (const [presetKey, preset] of Object.entries(presets)) {
      let match = true
      for (const [key, expectedValue] of Object.entries(preset.configs)) {
        const currentConfig = configs[key]
        if (!currentConfig) {
          match = false
          break
        }

        // 获取当前值（处理百分比转换）
        let currentValue = currentConfig.value
        if (key.includes('PERCENT') || key.includes('PCT')) {
          if (PCT_LIKE_KEYS.has(key)) {
            // 兼容旧值：0.006(=0.6%) 或 0.6(=0.6%)
            currentValue = currentValue <= 0.05 ? currentValue * 100 : currentValue
          } else {
            currentValue = currentValue * 100
          }
        }

        // 比较值（允许小的浮点数误差）
        if (typeof expectedValue === 'number' && typeof currentValue === 'number') {
          if (Math.abs(currentValue - expectedValue) > 0.01) {
            match = false
            break
          }
        } else if (currentValue !== expectedValue) {
          match = false
          break
        }
      }

      if (match) {
        return presetKey
      }
    }

    return null
  }

  const applyPreset = async (presetKey) => {
    const preset = presets[presetKey]
    if (!preset) return

    setSaving(true)
    setMessage('')
    try {
      const configItems = Object.entries(preset.configs).map(([key, value]) => {
        const config = configs[key]
        if (!config) {
          // 如果配置项不存在，尝试创建（用于新增的配置项）
          // 根据key判断类型和分类
          let type = 'number'
          let category = 'risk'
          if (typeof value === 'boolean') {
            type = 'boolean'
            category = 'strategy'
          }
          if (key.startsWith('ENTRY_') || key.startsWith('SMART_ENTRY_') || key === 'SMART_ENTRY_ENABLED') {
            type = typeof value === 'boolean' ? 'boolean' : 'number'
            category = 'strategy'
          } else if (key.startsWith('AUTO_TRADE_')) {
            type = typeof value === 'boolean' ? 'boolean' : 'number'
            category = 'strategy'
          } else if (key === 'LIMIT_ORDER_OFFSET_PCT') {
            type = 'number'
            category = 'strategy'
          } else if (key.includes('PERCENT') || key.includes('PCT')) {
            type = 'number'
            if (key.includes('STOP_LOSS') || key.includes('TAKE_PROFIT')) {
              category = 'risk'
            } else if (key.includes('POSITION')) {
              category = 'position'
            } else {
              category = 'scan'
            }
          } else if (key === 'MIN_VOLATILITY') {
            type = 'number'
            category = 'scan'
          } else if (typeof value === 'number') {
            type = 'number'
            category = 'scan'
          }

          const detail = typeof getConfigDetail === 'function' ? getConfigDetail(key) : ''
          const desc =
            detail && typeof detail === 'string' && !detail.includes('暂无详细说明')
              ? detail
              : `预设方案配置项：${key}`

          return {
            key,
            value:
              (key.includes('PERCENT') || key.includes('PCT')) && !PCT_LIKE_KEYS.has(key)
                ? value / 100
                : value,
            type,
            category,
            description: desc
          }
        }
        return {
          key,
          value:
            (key.includes('PERCENT') || key.includes('PCT')) && !PCT_LIKE_KEYS.has(key)
              ? value / 100
              : value,
          type: config.type,
          category: config.category,
          description: config.description
        }
      }).filter(Boolean)

      const response = await api.updateConfigsBatch(configItems)
      setMessage(response.message || `已应用${preset.name}`)
      if (response.note) {
        setTimeout(() => {
          setMessage(response.note)
        }, 2000)
      }
      await loadConfigs()
    } catch (error) {
      setMessage('应用预设失败: ' + error.message)
    } finally {
      setSaving(false)
    }
  }

  const currentPreset = detectCurrentPreset()

  if (loading) return <div className="loading">加载中...</div>

  const configCategories = {
    'scan': '市场扫描',
    'position': '仓位控制',
    'risk': '风险控制',
    'strategy': '策略参数',
    'api': 'API配置'
  }

  return (
    <div className="config-panel">
      <div className="config-header">
        <div className="header-top">
          <div className="header-left">
            <h2>交易配置</h2>
            <div className="account-switch">
              <span className="account-hint">当前账号：#{accountId}（在顶部导航切换）</span>
            </div>
            {isAdmin ? (
              <div
                className="system-hint"
                style={{
                  marginTop: '8px',
                  padding: '10px',
                  border: '1px solid #e0b400',
                  background: '#fff8e1',
                }}
              >
                <div style={{ fontWeight: 700 }}>
                  {isGlobalStrategyAccount ? (
                    <>
                      你正在编辑 <span style={{ fontWeight: 900 }}>全局策略账号 #{globalStrategyAccountId}</span>：
                      此处修改将影响所有用户的策略核心。
                    </>
                  ) : (
                    <>
                      你正在编辑账号 #{accountId}：这里只允许调整 <span style={{ fontWeight: 900 }}>风险旋钮</span>（仓位/次数/自动交易开关等）。
                      策略核心统一来自 <span style={{ fontWeight: 900 }}>全局策略账号 #{globalStrategyAccountId}</span>。
                    </>
                  )}
                </div>
                {!isGlobalStrategyAccount ? (
                  <div style={{ marginTop: '8px' }}>
                    <button
                      type="button"
                      className="system-btn primary"
                      onClick={() => {
                        setCurrentAccountId(globalStrategyAccountId)
                        setAccountId(globalStrategyAccountId)
                        setMessage('已切换到全局策略账号（策略核心统一在这里维护）')
                      }}
                    >
                      切换到全局策略账号 #{globalStrategyAccountId}
                    </button>
                  </div>
                ) : null}
              </div>
            ) : null}
          </div>
          <div className="header-actions">
            <button
              type="button"
              className="guide-link snapshot-btn"
              onClick={() => openSnapshot(snapshotIncludeSecrets)}
              disabled={snapshotBusy}
              title="导出当前全量配置（用于分析）"
            >
              {snapshotBusy ? '生成中...' : '查看整体配置'}
            </button>
            <Link to="/config/guide" className="guide-link">📖 配置说明</Link>
          </div>
        </div>
        <div className="config-info">
          <p>修改配置后，交易系统将在下次扫描时自动使用新配置</p>
        </div>

        {/* 我的交易进程（按账号；owner/admin 可启停） */}
        <div className="system-section">
          <div className="system-header">
            <h3>我的交易进程（当前账号 #{accountId}）</h3>
            <div className="system-status">
              <span className={`system-status-badge ${accountTradingStatus?.running ? 'running' : 'stopped'}`}>
                {accountTradingStatus?.running ? '运行中' : '未运行/未知'}
              </span>
              {accountTradingStatus?.pid ? <span className="system-status-meta">PID: {accountTradingStatus.pid}</span> : null}
              {accountTradingStatus?.program ? <span className="system-status-meta">程序: {accountTradingStatus.program}</span> : null}
              {accountTradingStatus?.state ? <span className="system-status-meta">状态: {accountTradingStatus.state}</span> : null}
            </div>
          </div>
          <div className="system-actions">
            <button type="button" className="system-btn" onClick={handleAccountTradingEnsure} disabled={systemBusy} title="为该账号生成/刷新 supervisor program 配置（需要 owner/admin）">
              生成配置
            </button>
            <button type="button" className="system-btn" onClick={handleAccountTradingStop} disabled={systemBusy} title="停止该账号交易进程（需要 owner/admin）">
              停止
            </button>
            <button type="button" className="system-btn" onClick={handleAccountTradingStart} disabled={systemBusy} title="启动该账号交易进程（需要 owner/admin）">
              启动
            </button>
            <button type="button" className="system-btn primary" onClick={handleAccountTradingRestart} disabled={systemBusy} title="重启该账号交易进程（需要 owner/admin）">
              重启
            </button>
          </div>
          <div className="system-hint">
            提示：若按钮报“无权限”，请让管理员在用户授权里把该账号分配为 owner；若报 supervisor 相关错误，请检查后端对 `/www/server/panel/plugin/supervisor` 的写权限与 supervisorctl 可执行权限。
          </div>
          {accountTradingErr ? (
            <div className="system-hint" style={{ color: '#b00020' }}>
              {accountTradingErr}
            </div>
          ) : null}
          {accountTradingStatus?.raw ? (
            <details style={{ marginTop: '8px' }}>
              <summary style={{ cursor: 'pointer' }}>查看原始状态输出</summary>
              <pre style={{ whiteSpace: 'pre-wrap', marginTop: '8px' }}>{String(accountTradingStatus.raw || '')}</pre>
            </details>
          ) : null}
          {accountTradingStatus?.stderr_tail ? (
            <details style={{ marginTop: '8px' }}>
              <summary style={{ cursor: 'pointer' }}>查看最近错误日志（stderr）</summary>
              <pre style={{ whiteSpace: 'pre-wrap', marginTop: '8px' }}>{String(accountTradingStatus.stderr_tail || '')}</pre>
            </details>
          ) : null}
          {accountTradingStatus?.stdout_tail ? (
            <details style={{ marginTop: '8px' }}>
              <summary style={{ cursor: 'pointer' }}>查看最近输出日志（stdout，常见原因在这里）</summary>
              <pre style={{ whiteSpace: 'pre-wrap', marginTop: '8px' }}>{String(accountTradingStatus.stdout_tail || '')}</pre>
            </details>
          ) : null}
          {accountTradingStatus?.stderr_tail_error ? (
            <details style={{ marginTop: '8px' }}>
              <summary style={{ cursor: 'pointer' }}>读取 stderr 失败原因（用于排障）</summary>
              <pre style={{ whiteSpace: 'pre-wrap', marginTop: '8px' }}>{String(accountTradingStatus.stderr_tail_error || '')}</pre>
            </details>
          ) : null}
          {['FATAL', 'EXITED', 'BACKOFF'].includes(String(accountTradingStatus?.state || '')) ? (
            <details style={{ marginTop: '8px' }}>
              <summary style={{ cursor: 'pointer' }}>supervisord 主日志尾部（spawn error 常见原因在这里）</summary>
              <pre style={{ whiteSpace: 'pre-wrap', marginTop: '8px' }}>
                {String(accountTradingStatus?.supervisord_tail || '（暂无：可能未配置 supervisord logfile 或当前用户无权限读取。可在后端配置 SUPERVISOR_LOGFILE 指向 supervisord 主日志路径）')}
              </pre>
            </details>
          ) : null}
        </div>

        {/* 账号密钥（当前账号；owner/admin 可改） */}
        <div className="system-section">
          <div className="system-header">
            <h3>账号密钥（当前账号）</h3>
            <div className="system-status">
              <span className="system-status-meta">说明：为安全起见，页面不会回显 Secret；填入后保存即可。</span>
            </div>
          </div>
          <div className="accounts-form">
            <label>
              API KEY（留空=不改）
              <div className="system-status-meta" style={{ marginTop: '4px' }}>
                当前状态：{currentAccountMeta?.has_api_key ? '已配置（******）' : '未配置（必须先配置才能启动交易）'}
              </div>
              <input
                type="password"
                value={credForm.api_key}
                onChange={(e) => setCredForm({ ...credForm, api_key: e.target.value })}
                placeholder={currentAccountMeta?.has_api_key ? '已配置（******），如需更换请重新填写' : '粘贴你的 Binance API KEY'}
              />
            </label>
            <label>
              API SECRET（留空=不改）
              <div className="system-status-meta" style={{ marginTop: '4px' }}>
                当前状态：{currentAccountMeta?.has_api_secret ? '已配置（******）' : '未配置（必须先配置才能启动交易）'}
              </div>
              <input
                type="password"
                value={credForm.api_secret}
                onChange={(e) => setCredForm({ ...credForm, api_secret: e.target.value })}
                placeholder={currentAccountMeta?.has_api_secret ? '已配置（******），如需更换请重新填写' : '粘贴你的 Binance API SECRET'}
              />
            </label>
            <label className="accounts-inline">
              <span>测试网</span>
              <input
                type="checkbox"
                checked={!!credForm.use_testnet}
                onChange={(e) => setCredForm({ ...credForm, use_testnet: e.target.checked })}
              />
            </label>
            <div className="accounts-form-actions">
              <button
                type="button"
                className="system-btn primary"
                disabled={systemBusy}
                onClick={async () => {
                  setSystemBusy(true)
                  setMessage('')
                  try {
                    const payload = {}
                    if (credForm.api_key) payload.api_key = credForm.api_key
                    if (credForm.api_secret) payload.api_secret = credForm.api_secret
                    payload.use_testnet = !!credForm.use_testnet
                    await api.updateAccountCredentials(accountId, payload)
                    setMessage('密钥已更新（建议重启该账号交易进程）')
                    setCredForm({ api_key: '', api_secret: '', use_testnet: !!credForm.use_testnet })
                  } catch (e) {
                    setMessage('更新密钥失败: ' + (e?.message || '未知错误'))
                  } finally {
                    setSystemBusy(false)
                  }
                }}
              >
                保存密钥
              </button>
            </div>
          </div>
        </div>

        {/* 系统控制：清缓存 / 启停 / 重启（supervisor） */}
        {isAdmin ? (
          <div className="system-section">
            <div className="system-header">
              <h3>系统控制</h3>
              <div className="system-status">
                <span className={`system-status-badge ${systemStatus?.running ? 'running' : 'stopped'}`}>
                  {systemStatus?.running ? '运行中' : '未运行'}
                </span>
                {systemStatus?.pid ? <span className="system-status-meta">PID: {systemStatus.pid}</span> : null}
                {systemStatus?.program ? <span className="system-status-meta">程序: {systemStatus.program}</span> : null}
                {systemStatus?.meta?.requested_at ? <span className="system-status-meta">上次重启: {systemStatus.meta.requested_at}</span> : null}
              </div>
            </div>
            <div className="system-actions">
              <button
                type="button"
                className="system-btn"
                onClick={handleClearCache}
                disabled={systemBusy}
                title="清理Redis配置缓存并从数据库回灌。切换API Key后建议先点这里，再重启交易系统。"
              >
                清除缓存
              </button>
              <button
                type="button"
                className="system-btn"
                onClick={handleStopTrading}
                disabled={systemBusy || systemStatus?.running === false}
                title="通过 supervisorctl 停止交易系统"
              >
                停止
              </button>
              <button
                type="button"
                className="system-btn"
                onClick={handleStartTrading}
                disabled={systemBusy || systemStatus?.running === true}
                title="通过 supervisorctl 启动交易系统"
              >
                启动
              </button>
              <button
                type="button"
                className="system-btn primary"
                onClick={handleRestartTrading}
                disabled={systemBusy}
                title="通过 supervisorctl 重启交易系统（建议切换API Key后使用）"
              >
                重启交易系统
              </button>
              <button
                type="button"
                className="system-btn primary"
                onClick={handleRestartAllTrading}
                disabled={systemBusy}
                title="批量重启所有账号交易进程（auto_sys_acc*），用于代码升级后统一生效"
              >
                重启所有账号交易
              </button>
              <button
                type="button"
                className="system-btn primary"
                onClick={handleRestartBackend}
                disabled={systemBusy}
                title="通过 backend/restart.sh 重启后端（uvicorn）。重启期间接口会短暂不可用。"
              >
                重启后端服务
              </button>
            </div>
            <div className="system-status" style={{ marginTop: '10px' }}>
              <span className={`system-status-badge ${backendStatus?.running ? 'running' : 'stopped'}`}>
                后端 {backendStatus?.running ? '运行中' : '未知'}
              </span>
              {backendStatus?.pid ? <span className="system-status-meta">PID: {backendStatus.pid}</span> : null}
              {backendStatus?.meta?.requested_at ? <span className="system-status-meta">上次重启: {backendStatus.meta.requested_at}</span> : null}
            </div>
            <div className="system-hint">
              建议流程：先更新配置里的 Key → 点击“清除缓存” → 点击“重启交易系统”，确保不再使用旧账号下单。
            </div>
          </div>
        ) : null}

        {/* 账号管理（超管） */}
        {isAdmin ? (
          <div className="accounts-admin-section">
            <div className="accounts-admin-header">
              <h3>账号管理（多账号）</h3>
              <div className="accounts-admin-actions">
                <button
                  type="button"
                  className="system-btn"
                  onClick={async () => {
                    setAccountsBusy(true)
                    try {
                      await loadAccountsAdmin()
                      setShowAccountsAdmin((v) => !v)
                    } finally {
                      setAccountsBusy(false)
                    }
                  }}
                  disabled={accountsBusy}
                  title="创建/禁用账号；为每个账号配置独立 API KEY/SECRET；交易/配置/统计会按账号隔离"
                >
                  {showAccountsAdmin ? '收起' : '管理账号'}
                </button>
                <button
                  type="button"
                  className="system-btn"
                  onClick={async () => {
                    setAccountsBusy(true)
                    try {
                      await loadAccountsAdmin()
                      notifyAccountsUpdated()
                      setMessage('账号列表已刷新')
                    } finally {
                      setAccountsBusy(false)
                    }
                  }}
                  disabled={accountsBusy}
                >
                  刷新
                </button>
              </div>
            </div>

            {showAccountsAdmin ? (
              <div className="accounts-admin-body">
                <div className="accounts-admin-card">
                  <div className="accounts-admin-card-title">新增账号</div>
                  <div className="accounts-form">
                    <label>
                      名称
                      <input
                        type="text"
                        value={newAccount.name}
                        onChange={(e) => setNewAccount({ ...newAccount, name: e.target.value })}
                        placeholder="例如：user_a"
                      />
                    </label>
                    <label>
                      API KEY
                      <input
                        type="password"
                        value={newAccount.api_key}
                        onChange={(e) => setNewAccount({ ...newAccount, api_key: e.target.value })}
                        placeholder="可先留空，后续再填"
                      />
                    </label>
                    <label>
                      API SECRET
                      <input
                        type="password"
                        value={newAccount.api_secret}
                        onChange={(e) => setNewAccount({ ...newAccount, api_secret: e.target.value })}
                        placeholder="可先留空，后续再填"
                      />
                    </label>
                    <label className="accounts-inline">
                      <span>测试网</span>
                      <input
                        type="checkbox"
                        checked={!!newAccount.use_testnet}
                        onChange={(e) => setNewAccount({ ...newAccount, use_testnet: e.target.checked })}
                      />
                    </label>
                    <label>
                      状态
                      <select
                        value={newAccount.status}
                        onChange={(e) => setNewAccount({ ...newAccount, status: e.target.value })}
                      >
                        <option value="active">启用</option>
                        <option value="disabled">禁用</option>
                      </select>
                    </label>
                    <div className="accounts-form-actions">
                      <button
                        type="button"
                        className="system-btn primary"
                        disabled={accountsBusy || !newAccount.name.trim()}
                        onClick={async () => {
                          setAccountsBusy(true)
                          setMessage('')
                          try {
                            await api.createAccount(newAccount)
                            setMessage('账号已创建')
                            setNewAccount({ name: '', api_key: '', api_secret: '', use_testnet: false, status: 'active' })
                            await loadAccountsAdmin()
                            notifyAccountsUpdated()
                          } catch (e) {
                            setMessage('创建账号失败: ' + (e?.message || '未知错误'))
                          } finally {
                            setAccountsBusy(false)
                          }
                        }}
                      >
                        创建账号
                      </button>
                    </div>
                  </div>
                </div>

                <div className="accounts-admin-card">
                  <div className="accounts-admin-card-title">账号列表</div>
                  <div className="accounts-table">
                    {(accountsAdmin || []).length ? (
                      <table>
                        <thead>
                          <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>状态</th>
                            <th>测试网</th>
                            <th>API KEY</th>
                            <th>SECRET</th>
                            <th>操作</th>
                          </tr>
                        </thead>
                        <tbody>
                          {accountsAdmin.map((a) => (
                            <tr key={a.id}>
                              <td>#{a.id}</td>
                              <td>{a.name || '-'}</td>
                              <td>
                                <span className={`acct-badge ${a.status === 'active' ? 'ok' : 'off'}`}>
                                  {a.status === 'active' ? '启用' : '禁用'}
                                </span>
                              </td>
                              <td>{a.use_testnet ? '是' : '否'}</td>
                              <td>{a.api_key_masked || (a.has_api_key ? '已配置' : '未配置')}</td>
                              <td>{a.has_api_secret ? '已配置' : '未配置'}</td>
                              <td className="accounts-actions-cell">
                                <button
                                  type="button"
                                  className="system-btn"
                                  disabled={accountsBusy || a.id === 1}
                                  title={a.id === 1 ? '默认账号建议保留' : '切换启用/禁用'}
                                  onClick={async () => {
                                    setAccountsBusy(true)
                                    setMessage('')
                                    try {
                                      const next = a.status === 'active' ? 'disabled' : 'active'
                                      await api.updateAccount(a.id, { status: next })
                                      await loadAccountsAdmin()
                                      notifyAccountsUpdated()
                                      setMessage(`账号 #${a.id} 已${next === 'active' ? '启用' : '禁用'}`)
                                    } catch (e) {
                                      setMessage('更新账号失败: ' + (e?.message || '未知错误'))
                                    } finally {
                                      setAccountsBusy(false)
                                    }
                                  }}
                                >
                                  {a.status === 'active' ? '禁用' : '启用'}
                                </button>
                                <button
                                  type="button"
                                  className="system-btn"
                                  disabled={accountsBusy}
                                  onClick={() => {
                                    setCredEditId(a.id)
                                    setCredForm({ api_key: '', api_secret: '', use_testnet: !!a.use_testnet })
                                  }}
                                >
                                  更新密钥
                                </button>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    ) : (
                      <div className="accounts-empty">暂无账号（默认账号 #1 会自动存在）</div>
                    )}
                  </div>
                </div>

                {credEditId ? (
                  <div className="accounts-admin-card">
                    <div className="accounts-admin-card-title">更新账号 #{credEditId} 的密钥</div>
                    <div className="accounts-form">
                      <label>
                        API KEY（留空=不改）
                        <input
                          type="password"
                          value={credForm.api_key}
                          onChange={(e) => setCredForm({ ...credForm, api_key: e.target.value })}
                        />
                      </label>
                      <label>
                        API SECRET（留空=不改）
                        <input
                          type="password"
                          value={credForm.api_secret}
                          onChange={(e) => setCredForm({ ...credForm, api_secret: e.target.value })}
                        />
                      </label>
                      <label className="accounts-inline">
                        <span>测试网</span>
                        <input
                          type="checkbox"
                          checked={!!credForm.use_testnet}
                          onChange={(e) => setCredForm({ ...credForm, use_testnet: e.target.checked })}
                        />
                      </label>
                      <div className="accounts-form-actions">
                        <button
                          type="button"
                          className="system-btn"
                          disabled={accountsBusy}
                          onClick={() => setCredEditId(null)}
                        >
                          取消
                        </button>
                        <button
                          type="button"
                          className="system-btn primary"
                          disabled={accountsBusy}
                          onClick={async () => {
                            setAccountsBusy(true)
                            setMessage('')
                            try {
                              const payload = {}
                              if (credForm.api_key) payload.api_key = credForm.api_key
                              if (credForm.api_secret) payload.api_secret = credForm.api_secret
                              payload.use_testnet = !!credForm.use_testnet
                              await api.updateAccountCredentials(credEditId, payload)
                              setMessage(`账号 #${credEditId} 密钥已更新（建议重启该账号交易进程）`)
                              setCredEditId(null)
                              await loadAccountsAdmin()
                              notifyAccountsUpdated()
                            } catch (e) {
                              setMessage('更新密钥失败: ' + (e?.message || '未知错误'))
                            } finally {
                              setAccountsBusy(false)
                            }
                          }}
                        >
                          保存
                        </button>
                      </div>
                    </div>
                  </div>
                ) : null}
              </div>
            ) : null}
          </div>
        ) : null}

        {/* 预设方案快速切换（仅管理员 + 全局策略账号：策略核心统一管理） */}
        {isAdmin && isGlobalStrategyAccount ? (
          <div className="preset-section">
            <div className="preset-header">
              <h3>快速切换方案</h3>
              <div className="current-preset-status">
                <span className="status-label">当前方案：</span>
                <span className={`status-badge ${currentPreset ? 'preset' : 'custom'}`}>
                  {currentPreset ? presets[currentPreset].name : '自定义'}
                </span>
              </div>
            </div>
            <div className="preset-guide">
              <div className="preset-guide-title">怎么选更不迷糊</div>
              <ul className="preset-guide-list">
                <li>
                  <strong>先选入场机制</strong>：纯限价（更控频但可能撤单） vs 智能入场（更少漏单但需限制追价）。
                </li>
                <li>
                  <strong>再看“会不会下单”</strong>：如果你发现几乎不出单，优先把 <code>AUTO_TRADE_ONLY_TRENDING</code> 关掉、把 <code>AUTO_TRADE_ALLOW_4H_NEUTRAL</code> 打开。
                </li>
                <li>
                  <strong>最后再微调</strong>：想更容易成交 → 调小 <code>LIMIT_ORDER_OFFSET_PCT</code>、调大 <code>ENTRY_CONFIRM_TIMEOUT_SEC</code>。
                </li>
              </ul>
            </div>

            {(() => {
            const presetUiMeta = {
              swing: { group: 'limit', tag: '纯限价' },
              strict: { group: 'limit', tag: '纯限价' },
              fill: { group: 'smart', tag: '智能入场' },
              steady: { group: 'smart', tag: '智能入场' },
              conservative: { group: 'legacy', tag: '传统' },
              balanced: { group: 'legacy', tag: '传统' },
              aggressive: { group: 'legacy', tag: '高频实验' },
            }

            const groups = [
              {
                key: 'limit',
                title: 'A. 纯限价（SMART_ENTRY_ENABLED=false）',
                desc: '只下 1 次限价单，未在确认时间内成交就撤单跳过。更控频、更接近“波段”，但更容易出现 NEW→撤单。',
                presetKeys: ['swing', 'strict'],
              },
              {
                key: 'smart',
                title: 'B. 智能入场（SMART_ENTRY_ENABLED=true）',
                desc: '限价回调 + 受限追价 +（趋势强时）可控市价兜底。更少漏单，但必须限制追价步数与偏离上限，避免回到高频追价。',
                presetKeys: ['fill', 'steady'],
              },
              {
                key: 'legacy',
                title: 'C. 传统 / 实验（不建议长期）',
                desc: '这组更多用于对比或临时实验（频率更高/更容易过度交易），建议在稳定盈利前谨慎使用。',
                presetKeys: ['conservative', 'balanced', 'aggressive'],
              },
            ]

            return (
              <div className="preset-groups">
                {groups.map((g) => (
                  <div key={g.key} className="preset-group">
                    <div className="preset-group-header">
                      <div className="preset-group-title">{g.title}</div>
                      <div className="preset-group-desc">{g.desc}</div>
                    </div>
                    <div className="preset-buttons">
                      {g.presetKeys
                        .filter((k) => presets[k])
                        .map((k) => {
                          const preset = presets[k]
                          const meta = presetUiMeta[k] || { group: g.key, tag: '' }
                          return (
                            <button
                              key={k}
                              className={`preset-btn ${currentPreset === k ? 'active' : ''}`}
                              onClick={() => applyPreset(k)}
                              disabled={saving}
                              title={preset.desc}
                            >
                              <div className="preset-name">
                                {preset.name}
                                {meta.tag ? (
                                  <span className={`preset-tag preset-tag--${meta.group}`}>{meta.tag}</span>
                                ) : null}
                                {currentPreset === k ? <span className="active-indicator">✓</span> : null}
                              </div>
                              <div className="preset-desc">{preset.desc}</div>
                            </button>
                          )
                        })}
                    </div>
                  </div>
                ))}
              </div>
            )
            })()}
          </div>
        ) : (
          <div className="system-hint" style={{ marginTop: '12px' }}>
            平台已开启“傻瓜化模式”：策略核心由管理员统一管理。你只需要配置密钥、充值余额，并调整少量风控参数（如最小/最大仓位、每日开仓次数等）。
          </div>
        )}
      </div>

      {/* 配置可行性检查提示 */}
      {feasibilityCheck && (
        <div className={`feasibility-check ${feasibilityCheck.feasible ? 'feasible' : 'infeasible'}`}>
          <div className="feasibility-header">
            <h4>
              {feasibilityCheck.feasible ? '✓ 配置可行' : '⚠ 配置冲突'}
            </h4>
            <button
              onClick={checkFeasibility}
              disabled={checkingFeasibility}
              className="refresh-btn"
              title="重新检查"
            >
              {checkingFeasibility ? '检查中...' : '🔄 刷新'}
            </button>
          </div>
          <div className="feasibility-info">
            <p>
              账户余额: <strong>{feasibilityCheck.account_balance?.toFixed(2) || 'N/A'}</strong> USDT |
              基础杠杆: <strong>{feasibilityCheck.base_leverage || feasibilityCheck.leverage || 'N/A'}x</strong>
              {feasibilityCheck.use_dynamic_leverage && feasibilityCheck.max_leverage && (
                <> | 最大杠杆: <strong>{feasibilityCheck.max_leverage}x</strong></>
              )} |
              最小保证金: <strong>{feasibilityCheck.current_config?.min_margin_usdt?.toFixed(2) || 'N/A'}</strong> USDT
            </p>
            {!feasibilityCheck.feasible && (
              <div className="warning-text">
                <p>
                  需要保证金占比: <strong>{feasibilityCheck.calculated_values?.required_position_percent?.toFixed(1)}%</strong> |
                  最大允许保证金占比: <strong>{feasibilityCheck.calculated_values?.max_allowed_position_percent?.toFixed(1)}%</strong>
                </p>
                {feasibilityCheck.calculated_values?.actual_min_margin !== undefined && (
                  <p>
                    最小保证金占比可提供保证金: <strong>{feasibilityCheck.calculated_values.actual_min_margin.toFixed(2)} USDT</strong>
                    (MIN_POSITION_PERCENT={feasibilityCheck.calculated_values.min_position_percent?.toFixed(1)}%) |
                    最小保证金要求: <strong>{feasibilityCheck.current_config?.min_margin_usdt?.toFixed(2)} USDT</strong>
                  </p>
                )}
              </div>
            )}
          </div>
          {feasibilityCheck.suggestions && feasibilityCheck.suggestions.length > 0 && (
            <div className="feasibility-suggestions">
              <h5>建议方案：</h5>
              {feasibilityCheck.suggestions.map((suggestion, index) => {
                // 如果是杠杆分析结果，显示详细表格
                if (suggestion.type === 'leverage_analysis' && suggestion.leverage_results) {
                  return (
                    <div key={index} className="suggestion-item leverage-analysis">
                      <div className="suggestion-header">
                        <strong>{suggestion.title}</strong>
                      </div>
                      <div className="leverage-table">
                        <table>
                          <thead>
                            <tr>
                              <th>杠杆倍数</th>
                              <th>需要保证金(USDT)</th>
                              <th>需要保证金%</th>
                              <th>实际最小保证金</th>
                              <th>状态</th>
                            </tr>
                          </thead>
                          <tbody>
                            {suggestion.leverage_results.map((result, idx) => (
                              <tr key={idx} className={result.feasible ? 'feasible-row' : 'infeasible-row'}>
                                <td><strong>{result.leverage}x</strong></td>
                                <td>{result.required_position_value.toFixed(2)} USDT</td>
                                <td>{result.required_position_percent.toFixed(1)}%</td>
                                <td>{result.actual_min_margin.toFixed(2)} USDT</td>
                                <td>
                                  <span className={result.feasible ? 'status-ok' : 'status-error'}>
                                    {result.feasible ? '✓ 可行' : '✗ 不可行'}
                                  </span>
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  )
                }

                // 普通建议
                return (
                  <div key={index} className="suggestion-item">
                    <div className="suggestion-header">
                      <strong>{suggestion.title}</strong>
                    </div>
                    <p className="suggestion-desc">{suggestion.description}</p>
                    {suggestion.config_key && suggestion.suggested_value !== null && (
                      <button
                        className="apply-suggestion-btn"
                        onClick={async () => {
                          try {
                            await api.updateConfig(suggestion.config_key, {
                              value: suggestion.suggested_value,
                              type: 'number',
                              category: 'position'
                            })
                            setMessage(`已应用建议: ${suggestion.title}`)
                            await loadConfigs()
                            await checkFeasibility()
                          } catch (error) {
                            setMessage('应用建议失败: ' + error.message)
                          }
                        }}
                      >
                        应用此建议
                      </button>
                    )}
                  </div>
                )
              })}
            </div>
          )}
        </div>
      )}

      {message && (
        <div className={`message ${message.includes('失败') || message.includes('错误') ? 'error' : 'success'}`}>
          {message}
        </div>
      )}

      {Object.entries(configCategories).map(([category, label]) => (
        <section key={category} className="config-section">
          <h3>{label}</h3>
          <div className="config-grid">
            {Object.entries(configs)
              .filter(([key, config]) => {
                if (config.category !== category) return false
                // 密钥相关配置统一在“账号密钥（当前账号）”模块管理，这里不重复展示
                if (key === 'BINANCE_API_KEY' || key === 'BINANCE_API_SECRET' || key === 'USE_TESTNET') return false
                return true
              })
              .map(([key, config]) => (
                <ConfigItem
                  key={key}
                  label={key}
                  config={config}
                  onUpdate={(value) => handleUpdate(key, value, config.type, config.category)}
                  disabled={saving}
                />
              ))}
          </div>
        </section>
      ))}

      {showSnapshot && (
        <div className="snapshot-modal-overlay" onClick={() => setShowSnapshot(false)} role="presentation">
          <div className="snapshot-modal" onClick={(e) => e.stopPropagation()}>
            <div className="snapshot-modal-header">
              <div>
                <h3>当前整体配置快照</h3>
                <div className="snapshot-hint">
                  默认脱敏 BINANCE_API_KEY/SECRET。你可以选择明文后重新生成再复制/下载。
                </div>
              </div>
              <button type="button" className="snapshot-close" onClick={() => setShowSnapshot(false)}>
                关闭
              </button>
            </div>

            <div className="snapshot-toolbar">
              <label className="snapshot-checkbox">
                <input
                  type="checkbox"
                  checked={snapshotIncludeSecrets}
                  onChange={async (e) => {
                    const checked = e.target.checked
                    setSnapshotIncludeSecrets(checked)
                    // 重新生成（确保脱敏/明文一致）
                    await openSnapshot(checked)
                  }}
                />
                显示敏感信息（明文）
              </label>

              <div className="snapshot-actions">
                <button type="button" className="system-btn" onClick={copySnapshot}>
                  复制
                </button>
                <button type="button" className="system-btn primary" onClick={downloadSnapshot}>
                  下载 JSON
                </button>
              </div>
            </div>

            <pre className="snapshot-pre">{snapshotText}</pre>
          </div>
        </div>
      )}
    </div>
  )
}

const ConfigItem = ({ label, config, onUpdate, disabled }) => {
  const isPercentKey = label.includes('PERCENT') || label.includes('PCT')
  const PCT_LIKE_KEYS = new Set([
    'LIMIT_ORDER_OFFSET_PCT',
    'ENTRY_MAX_DRIFT_PCT_TRENDING',
    'ENTRY_MAX_DRIFT_PCT_RANGING',
  ])
  const isPctLike = PCT_LIKE_KEYS.has(label)
  const isRatioPercentKey = isPercentKey && !isPctLike

  const formatPercent = (n) => {
    // 最多 4 位小数，去掉尾随 0（例如 2.3000 -> 2.3）
    if (typeof n !== 'number' || isNaN(n)) return ''
    return n.toFixed(4).replace(/\.?0+$/, '')
  }

  // 初始化显示值：百分比配置转为“百分比数值”（支持小数）
  const getInitialDisplayValue = (val) => {
    if (config.type === 'number' && isPercentKey) {
      if (val === null || val === undefined || val === '') {
        return ''
      }
      const numVal = typeof val === 'string' ? parseFloat(val) : val
      if (isNaN(numVal)) {
        return ''
      }
      // 两类：
      // 1) 常规比例型（如 STOP_LOSS_PERCENT=0.08）：展示为 8（%）
      // 2) pct-like（如 LIMIT_ORDER_OFFSET_PCT=0.5 表示0.5%）：展示为 0.5（%）
      if (isPctLike) {
        const pctNum = numVal <= 0.05 ? numVal * 100 : numVal
        return formatPercent(pctNum)
      }
      const percent = numVal <= 1 ? numVal * 100 : numVal
      return formatPercent(percent)
    }
    return val === null || val === undefined ? '' : val
  }

  const [value, setValue] = useState(config.value)
  const [localValue, setLocalValue] = useState(getInitialDisplayValue(config.value))
  const [isEditing, setIsEditing] = useState(false)
  const [showDetail, setShowDetail] = useState(false)

  useEffect(() => {
    setValue(config.value)
    // 当配置值更新时，重置编辑状态和本地值
    setIsEditing(false)
    setLocalValue(getInitialDisplayValue(config.value))
  }, [config.value])

  const handleChange = (newValue) => {
    setLocalValue(newValue)
    setIsEditing(true)
  }

  const handleSave = () => {
    setIsEditing(false)

    // 处理localValue可能是字符串的情况
    let processedValue = localValue
    if (config.type === 'number') {
      // 如果是空字符串，恢复原值
      if (localValue === '' || localValue === null || localValue === undefined) {
        setLocalValue(value)
        return
      }

      // 处理字符串形式的数字输入（包括部分输入如 "0." 或 "."）
      let numValue
      if (typeof localValue === 'string') {
        // 如果字符串以 "." 结尾（如 "0." 或 "."），尝试补全为有效数字
        if (localValue.endsWith('.') && localValue.length > 1) {
          // "0." -> 0, "1." -> 1
          numValue = parseFloat(localValue)
        } else if (localValue === '.' || localValue === '-.') {
          // "." 或 "-." 视为无效，恢复原值
          const restoreValue = isPercentKey
            ? (typeof value === 'number' ? formatPercent((value <= 1 ? value * 100 : value)) : value)
            : value
          setLocalValue(restoreValue)
          return
        } else {
          numValue = parseFloat(localValue)
        }
      } else {
        numValue = localValue
      }

      if (isNaN(numValue)) {
        // 如果输入无效，恢复原值
        const restoreValue = isPercentKey
          ? (typeof value === 'number' ? formatPercent((value <= 1 ? value * 100 : value)) : value)
          : value
        setLocalValue(restoreValue)
        return
      }

      processedValue = numValue
      // 百分比配置
      if (isPercentKey) {
        if (isPctLike) {
          // pct-like：值本身就是“百分比数值”（<=1表示<=1%），不做 /100
          if (processedValue < 0 || processedValue > 1) {
            setLocalValue(getInitialDisplayValue(value))
            return
          }
        } else {
          // 常规比例型：前端按“百分比”输入（0~100），存储为 0~1
          if (processedValue < 0 || processedValue > 100) {
            setLocalValue(getInitialDisplayValue(value))
            return
          }
          processedValue = processedValue / 100
        }
      }
    } else if (config.type === 'boolean') {
      processedValue = localValue === 'true' || localValue === true
    }

    // 只有当值真正发生变化时才保存
    if (processedValue !== value) {
      onUpdate(processedValue)
    } else {
      // 值没变化，但需要更新显示值
      setValue(processedValue)
    }
  }

  const handleBlur = () => {
    // 移动端不自动保存，需要点击保存按钮
    if (window.innerWidth > 768) {
      handleSave()
    }
  }

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      handleSave()
    }
  }

  const displayValue = localValue === null || localValue === undefined ? '' : localValue

  if (config.type === 'boolean') {
    return (
      <div className="config-item">
        <div className="config-item-header">
          <label>{label}</label>
          {config.description && (
            <button
              className="help-btn"
              onClick={() => setShowDetail(!showDetail)}
              type="button"
            >
              {showDetail ? '收起' : '说明'}
            </button>
          )}
        </div>
        {showDetail && (
          <div className="config-detail-popup">
            {getConfigDetail(label)}
          </div>
        )}
        <select
          value={localValue ? 'true' : 'false'}
          onChange={(e) => {
            handleChange(e.target.value)
            // 布尔值立即保存
            onUpdate(e.target.value === 'true')
          }}
          disabled={disabled}
        >
          <option value="true">是</option>
          <option value="false">否</option>
        </select>
        {config.description && (
          <span className="description">
            {config.description}
          </span>
        )}
      </div>
    )
  }

  if (label.includes('INTERVAL') && ['PRIMARY_INTERVAL', 'CONFIRM_INTERVAL', 'ENTRY_INTERVAL', 'KLINE_INTERVAL'].includes(label)) {
    const options = ['1m', '3m', '5m', '15m', '30m', '1h', '2h', '4h', '1d']
    return (
      <div className="config-item">
        <div className="config-item-header">
          <label>{label}</label>
          {config.description && (
            <button
              className="help-btn"
              onClick={() => setShowDetail(!showDetail)}
              type="button"
            >
              {showDetail ? '收起' : '说明'}
            </button>
          )}
        </div>
        {showDetail && (
          <div className="config-detail-popup">
            {getConfigDetail(label)}
          </div>
        )}
        <select
          value={localValue}
          onChange={(e) => {
            handleChange(e.target.value)
            // 下拉框立即保存
            onUpdate(e.target.value)
          }}
          disabled={disabled}
        >
          {options.map(opt => (
            <option key={opt} value={opt}>{opt}</option>
          ))}
        </select>
        {config.description && (
          <span className="description">
            {config.description}
          </span>
        )}
      </div>
    )
  }

  return (
    <div className="config-item">
      <div className="config-item-header">
        <label>{label}</label>
        {config.description && (
          <button
            className="help-btn"
            onClick={() => setShowDetail(!showDetail)}
            type="button"
          >
            {showDetail ? '收起' : '说明'}
          </button>
        )}
      </div>
      {showDetail && (
        <div className="config-detail-popup">
          {getConfigDetail(label)}
        </div>
      )}
      <div className="config-input-wrapper">
        <input
          type="text"
          inputMode={config.type === 'number' ? 'decimal' : 'text'}
          value={displayValue === '' ? '' : String(displayValue)}
          onChange={(e) => {
            // 使用文本输入，避免number类型的自动补0问题
            let newValue = e.target.value

            // 对于数字类型，只允许数字、小数点和负号
            if (config.type === 'number') {
              // 允许空字符串、数字、小数点和负号
              // const validPattern = /^-?\d*\.?\d*$/
              // if (newValue !== '' && !validPattern.test(newValue)) {
              //   // 无效输入，不更新
              //   return
              // }

              // 如果是百分比配置，限制输入范围（0-100）
              if (isPercentKey) {
                const numValue = parseFloat(newValue)
                const maxAllowed = isPctLike ? 1 : 100
                if (newValue !== '' && !isNaN(numValue) && (numValue < 0 || numValue > maxAllowed)) {
                  // 超出范围，不更新
                  return
                }
              }
            }

            // 更新本地值
            if (config.type === 'number' && isPercentKey) {
              // 百分比配置：允许字符串中间态（如 "2."），并支持小数
              if (newValue === '') {
                handleChange('')
              } else {
                const validPattern = /^-?\d*\.?\d*$/
                if (validPattern.test(newValue)) {
                  handleChange(newValue)
                }
              }
            } else if (config.type === 'number') {
              // 其他数字配置：允许字符串形式的中间状态（如 "0." 或 "."），支持小数输入
              if (newValue === '') {
                handleChange('')
              } else {
                // 允许部分输入状态（如 "0.", ".5", "-" 等）
                // 使用正则验证是否为有效的数字格式（包括部分输入）
                const validPattern = /^-?\d*\.?\d*$/
                if (validPattern.test(newValue)) {
                  // 如果是有效的数字格式（包括部分输入），直接保存字符串
                  handleChange(newValue)
                }
                // 如果无效，不更新（保持原值）
              }
            } else {
              handleChange(newValue)
            }
          }}
          onBlur={handleBlur}
          onKeyPress={handleKeyPress}
          onKeyDown={(e) => {
            // 允许删除、退格、方向键等
            if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(e.key)) {
              return
            }
            // 对于数字输入，只允许数字、小数点和负号
            if (config.type === 'number') {
              const currentValue = String(localValue || '')
              // 如果已经包含小数点，不允许再次输入小数点
              if (e.key === '.' && currentValue.includes('.')) {
                e.preventDefault()
                return
              }
              // 如果已经包含负号，不允许再次输入负号（除非是删除操作）
              if (e.key === '-' && currentValue.includes('-')) {
                e.preventDefault()
                return
              }
              const validKeys = /^[0-9.-]$/
              if (!validKeys.test(e.key) && !['Enter', 'Escape'].includes(e.key)) {
                e.preventDefault()
              }
            }
          }}
          disabled={disabled}
          className={isEditing ? 'editing' : ''}
          placeholder={isPercentKey ? (isPctLike ? '输入0~1（表示0%~1%）' : '输入百分比（可小数）') : '输入数值'}
        />
        {isPercentKey && <span className="percent-suffix">%</span>}
        {isEditing && (
          <button
            className="save-btn"
            onClick={handleSave}
            disabled={disabled}
            type="button"
          >
            保存
          </button>
        )}
      </div>
      {isEditing && window.innerWidth > 768 && <span className="edit-hint">按Enter保存</span>}
      {config.description && (
        <span className="description">
          {config.description}
        </span>
      )}
    </div>
  )
}

// 配置项详细说明
const getConfigDetail = (key) => {
  const details = {
    // 市场扫描参数
    'SCAN_INTERVAL': '扫描间隔（秒）。系统每隔多长时间扫描一次市场寻找交易机会。值越小扫描越频繁，能更快捕捉波动，但更容易产生噪音与过度交易。建议：低频波段1800秒(30分钟)或更长；稳健/保守可3600秒(1小时)；高频不建议长期使用。',
    'MIN_CHANGE_PERCENT': '最小涨跌幅阈值（%）。只有24小时涨跌幅达到此值的交易对才会被考虑交易。值越小捕捉机会越多，但可能包含噪音和假信号。值越大只捕捉大幅波动，信号质量更高但机会更少。建议：保守策略2.0-3.0%，平衡策略1.5-2.0%，激进策略1.0-1.5%。',
    'MIN_SIGNAL_STRENGTH': '最小信号强度（0-10）。技术指标综合评分，只有达到此强度的信号才会执行交易。值越小机会越多但噪音更大；值越大更偏“精选高质量”。建议：低频波段建议≥8；一般保守5-7；平衡4-5；高频3-4（不推荐长期）。',
    'TOP_N_SYMBOLS': '每次扫描后处理的交易对数量。从符合条件的交易对中选择涨跌幅最大的前N个进行详细分析。值越大机会越多，但计算量增加，API请求增多。建议：保守策略8-10个，平衡策略12-15个，激进策略15-20个。',
    'MAX_SCAN_SYMBOLS': '扫描的最大交易对数量（0表示扫描所有）。限制每次扫描时处理的交易对总数，减少API请求和计算量。值越小扫描越快，但可能错过一些机会。值越大覆盖更全面，但API请求和计算量增加。建议：保守策略100-200个，平衡策略200-300个，激进策略300-500个。设置为0会扫描所有交易对（约500+个）。',
    'MIN_VOLATILITY': '最小波动率（小数形式，如0.02表示2%）。过滤掉波动率低于此值的交易对，确保只交易有足够波动的币种。值越小允许更多交易对，但可能包含波动不足的币种。值越大只交易高波动币种，但可能错过一些机会。建议：0.015-0.025（1.5%-2.5%）。',
    'MIN_VOLUME_24H': '最小24小时成交量（USDT）。过滤掉24小时交易量低于此值的交易对，确保只交易流动性好的币种，避免滑点和流动性风险。建议：≥500万USDT，主流币种可设置1000万以上。',
    'KLINE_INTERVAL': 'K线数据周期。获取K线数据的基础周期，影响技术指标的计算粒度。周期越短反应越快，但可能包含更多噪音。周期越长信号更平滑，但反应较慢。建议：5m-1h，通常与PRIMARY_INTERVAL保持一致。',
    'PRIMARY_INTERVAL': '主周期。策略分析的主要时间周期，用于计算技术指标（RSI、MACD、布林带等）。决定策略主要关注的市场趋势级别。周期越短反应越快，周期越长趋势更明确。建议：保守策略4h-1d，平衡策略1h-4h，激进策略15m-1h。',
    'CONFIRM_INTERVAL': '确认周期。用于确认交易信号的更长时间周期，增加信号的可靠性，减少假信号。通常比主周期更长。建议：保守策略1d，平衡策略4h-1d，激进策略1h-4h。',
    'ENTRY_INTERVAL': '入场周期。用于精确入场的短时间周期，优化入场点，提高单笔交易的盈亏比。通常比主周期更短。建议：保守策略1h，平衡策略15m-30m，激进策略5m-15m。',

    // 仓位控制参数
    'MAX_POSITION_PERCENT': '单笔最大保证金占用（账户余额的百分比，如0.02表示2%）。系统会先按该比例分配“保证金”，再根据杠杆换算名义价值下单。值越小越保守，适合回归波段交易、降低单笔波动对账户的伤害。注意：币安合约有最小名义价值要求（通常≥5 USDT），如果保证金过小且杠杆不够，系统会提示无法满足最小名义价值。',
    'MAX_TOTAL_POSITION_PERCENT': '总保证金上限（账户余额的百分比，如0.20表示20%）。所有持仓占用的保证金之和不能超过该上限，防止过度分散和风险集中。值越小越易控仓，便于管理持仓数量与节奏。',
    'MIN_POSITION_PERCENT': '单笔最小保证金占用（账户余额的百分比，如0.01表示1%）。用于避免过小仓位（意义不大、易受手续费影响）。如果你希望取消这一限制，可设置为0（等价于关闭最小占比）。',

    // 风险控制参数
    'STOP_LOSS_PERCENT': '止损百分比（如0.08表示8%，相对于保证金）。当亏损达到此百分比时自动平仓止损，限制单笔交易的最大亏损。值越小止损更严格，单笔损失更小但可能被正常波动触发。值越大允许更大的回撤，但单笔损失可能较大。建议：保守策略10-15%，平衡策略8-10%，激进策略5-8%。注意：止损应该小于止盈，建议盈亏比至少1:1.5。系统会结合最小价格变动保护，取更宽松的一个。',
    'TAKE_PROFIT_PERCENT': '止盈百分比（如0.15表示15%，相对于保证金）。当盈利达到此百分比时自动平仓止盈，锁定利润。值越大目标利润更高，但可能错过及时止盈的机会，持仓时间更长。值越小能更快锁定利润，但可能错过更大的趋势。建议：保守策略20-30%，平衡策略15-20%，激进策略10-15%。注意：应该大于止损，建议盈亏比至少1:1.5。系统会结合最小价格变动保护，取更宽松的一个。',
    'MIN_STOP_LOSS_PRICE_PCT': '最小止损价格变动百分比（存储为0~1，前端输入按%显示，支持小数，如1.5%）。用于防止止损过紧：即使基于保证金的止损更紧，也会使用至少该百分比的价格变动。建议：1.5%-3%。',
    'MIN_TAKE_PROFIT_PRICE_PCT': '最小止盈价格变动百分比（存储为0~1，前端输入按%显示，支持小数，如2.5%）。用于防止止盈过紧：即使基于保证金的止盈更紧，也会使用至少该百分比的价格变动。建议：2%-4%。',

    // 策略参数
    'LEVERAGE': '交易杠杆倍数。放大资金利用率，同时放大收益和风险。杠杆越高，相同仓位下需要的保证金越少，但风险越大。建议：保守策略5-10倍，平衡策略10倍，激进策略10-15倍。注意：高杠杆会增加爆仓风险，请谨慎使用。',
    'USE_TRAILING_STOP': '是否启用移动止损（true/false）。启用后，当盈利达到激活阈值时，止损会自动跟踪价格，保护利润。适合趋势行情，可以捕捉更大的利润空间。建议：平衡和激进策略启用，保守策略可关闭。',
    'SMART_ENTRY_ENABLED': '智能入场开关（true/false）。开启时会进行“限价回调 + 追价 +（趋势强时）市价兜底”，以减少错过；关闭时回归“纯限价单模式”：只下一次限价单，未在确认时间内成交则撤单跳过，更适合低频波段与控频。',
    'AUTO_TRADE_ONLY_TRENDING': '自动交易仅在市场状态=trending时执行（ranging/unknown只生成推荐，不自动下单）。开启能显著降低震荡扫损，但也会减少出单；如果你发现“几乎不下单”，可先关闭。',
    'AUTO_TRADE_ALLOW_4H_NEUTRAL': '是否允许4H趋势=neutral时自动交易。关闭可减少震荡扫损；开启会显著增加出单（但需要配合更严格的信号门槛/控频）。',
    'LIMIT_ORDER_OFFSET_PCT': '限价入场偏移（%）。BUY 会挂在当前价下方回调位置，SELL 会挂在当前价上方反弹位置。值越小越贴近当前价，更容易成交（但可能更“追价”）；值越大更保守，但更容易出现“挂单NEW→超时撤单”。建议：0.05%-0.20%。',
    'ENTRY_CONFIRM_TIMEOUT_SEC': '下单后等待成交的确认超时（秒）。在“纯限价模式”下，超时未成交会撤单并跳过；在“智能入场”下则进入后续追价/兜底流程。建议：60-180秒。',
    'ENTRY_CHASE_MAX_STEPS': '智能入场最大追价步数。步数越多越不容易错过，但也更接近追价；建议 2-4 步。',
    'ENTRY_STEP_WAIT_SEC': '智能入场每一步等待成交时间（秒）。过短会频繁撤改单，过长会错过行情；建议 15-25 秒。',
    'ENTRY_MARKET_FALLBACK_AFTER_SEC': '趋势强时市价兜底延迟（秒）。用于减少错过（在追价上限内才会触发），建议 45-90 秒。',
    'ENTRY_MAX_DRIFT_PCT_TRENDING': '趋势强时最大追价偏离（%）。例如 0.3 表示 0.3%。越小越保守、越不追价；建议 0.2%-0.6%。',
    'ENTRY_MAX_DRIFT_PCT_RANGING': '震荡/弱趋势最大追价偏离（%）。例如 0.15 表示 0.15%。越小越保守；建议 0.1%-0.3%。',
    'TRAILING_STOP_ACTIVATION': '移动止损激活阈值（百分比，如0.01表示1%）。当盈利达到此百分比时，移动止损开始跟踪价格，将止损移至成本价（保本）。值越小激活越早，更早保护利润但可能过早退出。值越大激活越晚，给价格更多波动空间。建议：1-2%。',
    'TRAILING_STOP_PROTECT': '移动止损保护利润（百分比，如0.01表示1%）。当价格从最高点回撤达到此百分比时，触发止损平仓，锁定利润。值越小保护更严格，能锁定更多利润但可能过早退出。值越大允许更大回撤，可能捕捉更大趋势但利润可能回吐。建议：1-2%。',

    // API配置
    'BINANCE_API_KEY': '币安API密钥。用于访问币安账户的凭证，需要启用"合约交易"权限。请妥善保管，不要泄露。',
    'BINANCE_API_SECRET': '币安API密钥。与API Key配对使用，用于签名验证。请妥善保管，不要泄露。',
    'USE_TESTNET': '是否使用币安测试网（true/false）。true表示使用测试网（模拟交易，无真实资金），false表示使用生产网（真实交易）。建议：测试时使用true，正式交易使用false。'
  }
  return details[key] || '暂无详细说明，请参考配置说明文档'
}

export default ConfigPanel