import React, { useState, useEffect, useRef } from 'react'
import { Link } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { api } from '../services/api'
import {
  setAccountId,
  selectAccountId,
  selectCurrentUser,
  selectViewingUserId,
  selectIsAdmin,
  selectEffectiveUserId,
} from '../store/appSlice'
import './ConfigPanel.css'

const ConfigPanel = () => {
  const dispatch = useDispatch()
  const accountId = useSelector(selectAccountId) // 从 Redux 获取当前账号ID
  const currentUser = useSelector(selectCurrentUser)
  const isAdmin = useSelector(selectIsAdmin)
  
  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 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)
    }
  }

  // 普通用户仅可编辑的配置项（与后端 USER_RISK_KNOBS 一致；用于隐藏不可编辑分组与项）
  const USER_RISK_KNOBS_SET = new Set([
    'MIN_MARGIN_USDT', 'MIN_POSITION_PERCENT', 'MAX_POSITION_PERCENT', 'MAX_TOTAL_POSITION_PERCENT',
    'AUTO_TRADE_ENABLED', 'MAX_OPEN_POSITIONS', 'MAX_DAILY_ENTRIES',
    'TOP_N_SYMBOLS', 'MIN_SIGNAL_STRENGTH', 'MIN_VOLUME_24H', 'MIN_VOLATILITY',
    'SCAN_EXTRA_SYMBOLS_FOR_SUPPLEMENT', 'EXCLUDE_MAJOR_COINS', 'MAX_SCAN_SYMBOLS', 'SCAN_INTERVAL',
  ])
  const USER_EDITABLE_KEYS = new Set([
    ...USER_RISK_KNOBS_SET,
    'BINANCE_API_KEY', 'BINANCE_API_SECRET', 'USE_TESTNET',
  ])
  const isKeyEditableForUser = (key) => USER_EDITABLE_KEYS.has(key)

  const [credForm, setCredForm] = useState({ api_key: '', api_secret: '', use_testnet: false })

  // 预设方案配置
  // 例如 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 = {
    altcoin: {
      name: '⭐山寨币狙击',
      desc: '合理盈亏比（3:1）+ 宽止损（2.0×ATR）+ 移动止损保护 + 严格流动性筛选。2026-01-27优化：让收益率真实，胜率正常化。期望胜率40%+，盈亏比1.5:1+。',
      configs: {
        ATR_STOP_LOSS_MULTIPLIER: 1.5, STOP_LOSS_PERCENT: 12.0, RISK_REWARD_RATIO: 3.0,
        ATR_TAKE_PROFIT_MULTIPLIER: 2.0, TAKE_PROFIT_PERCENT: 20.0, MIN_HOLD_TIME_SEC: 0,
        USE_FIXED_RISK_SIZING: true, FIXED_RISK_PERCENT: 1.0,
        USE_TRAILING_STOP: true, TRAILING_STOP_ACTIVATION: 20.0, TRAILING_STOP_PROTECT: 10.0,
        MAX_POSITION_PERCENT: 1.5, MAX_TOTAL_POSITION_PERCENT: 12.0, MAX_DAILY_ENTRIES: 8,
        MIN_VOLUME_24H: 30000000, MIN_VOLATILITY: 3.0, TOP_N_SYMBOLS: 20, MIN_SIGNAL_STRENGTH: 5,
        MAX_SCAN_SYMBOLS: 1500, SCAN_INTERVAL: 900, SMART_ENTRY_ENABLED: true, AUTO_TRADE_ONLY_TRENDING: true,
        AUTO_TRADE_ALLOW_4H_NEUTRAL: true, EXCLUDE_MAJOR_COINS: true,
        SCAN_EXTRA_SYMBOLS_FOR_SUPPLEMENT: 15,
      },
    },
    swing: {
      name: '波段回归（推荐）',
      desc: '根治高频与追价：关闭智能入场，回归“纯限价 + 30分钟扫描 + 更高信号门槛”的低频波段。建议先跑20-30单再评估。',
      configs: {
        // 操作频率
        SCAN_INTERVAL: 1800, // 30分钟
        TOP_N_SYMBOLS: 20,

        // 仓位管理（重要语义：这些百分比均按“保证金占用比例”理解）
        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: 1.5,  // ATR止盈倍数（从4.5降至1.5，将盈亏比从3:1降至更现实、可达成的1.5:1，提升止盈触发率）
        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: 1.5,  // ATR止盈倍数（从4.5降至1.5，将盈亏比从3:1降至更现实、可达成的1.5:1，提升止盈触发率）
        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: 1.5,  // ATR止盈倍数（从4.5降至1.5，将盈亏比从3:1降至更现实、可达成的1.5:1，提升止盈触发率）
        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: 1.5,  // ATR止盈倍数（从4.5降至1.5，将盈亏比从3:1降至更现实、可达成的1.5:1，提升止盈触发率）
        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: 1.5,  // ATR止盈倍数（从4.5降至1.5，将盈亏比从3:1降至更现实、可达成的1.5:1，提升止盈触发率）
        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: 1.5,  // ATR止盈倍数（从4.5降至1.5，将盈亏比从3:1降至更现实、可达成的1.5:1，提升止盈触发率）
        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: 1.5,  // ATR止盈倍数（从4.5降至1.5，将盈亏比从3:1降至更现实、可达成的1.5:1，提升止盈触发率）
        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 () => {
    if (!accountId) return
    try {
      const res = await api.getAccountTradingStatus(accountId)
      setAccountTradingStatus(res)
      setAccountTradingErr('')
    } catch (error) {
      setAccountTradingStatus(null)
      setAccountTradingErr(error?.message || '获取交易进程状态失败')
    }
  }

  const loadCurrentAccountMeta = async (targetAccountId = null) => {
    // 使用传入的 accountId 或当前的 accountId（确保使用最新的值）
    const targetId = targetAccountId !== null ? targetAccountId : accountId
    if (!targetId) return null
    try {
      // 统一使用getAccounts获取所有账号（管理员会返回所有账号，普通用户返回自己的）
      // 这样可以确保获取到完整的status等信息
      const list = await api.getAccounts()
      const accounts = Array.isArray(list) ? list : []
      const meta = accounts.find((a) => parseInt(String(a?.id || '0'), 10) === parseInt(String(targetId || '0'), 10))
      // 确保status字段正确设置（如果meta存在但status为空，默认为'active'）
      if (meta) {
        meta.status = meta.status || 'active'
      }
      setCurrentAccountMeta(meta || null)
      // 同步 testnet 开关到表单（仅在未输入时同步，避免打断正在输入）
      if (meta && !credForm.api_key && !credForm.api_secret) {
        setCredForm((prev) => ({ ...prev, use_testnet: !!meta.use_testnet }))
      }
      return meta
    } catch (e) {
      setCurrentAccountMeta(null)
      return null
    }
  }

  const handleAccountTradingEnsure = async () => {
    setSystemBusy(true)
    setMessage('')
    try {
      const res = await api.ensureAccountTradingProgram(accountId)
      setMessage(`已成功生成进程配置文件：${res.program || ''}`)
      await loadAccountTradingStatus()
    } catch (error) {
      setMessage('生成进程配置失败：' + (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 handleTriggerScan = async () => {
    setSystemBusy(true)
    setMessage('')
    try {
      const res = await api.triggerScan()
      setMessage(res.message || '已触发手动扫描')
    } catch (e) {
      setMessage('触发扫描失败: ' + (e?.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)
    }
  }

  // 使用 ref 记录上一次的 accountId，避免初始化时刷新页面
  const prevAccountIdRef = useRef(accountId)
  
  useEffect(() => {
    // 如果没有选中账号，不加载数据
    if (!accountId) return

    // 初始化时，更新 ref 并加载数据
    prevAccountIdRef.current = accountId
    loadConfigMeta()
    loadConfigs()
    checkFeasibility()
    loadAccountTradingStatus()
    loadCurrentAccountMeta(accountId)

    const timer = setInterval(() => {
      // 定时器中使用最新的 accountId
      if (accountId) {
        loadAccountTradingStatus()
        loadCurrentAccountMeta(accountId)
      }
    }, 3000)

    return () => clearInterval(timer)
  }, [accountId]) // 当 accountId 变化时，如果是切换账号则刷新页面

  // 当accountId变化时，重新加载相关数据（避免重复调用，已在onChanged和定时器中处理）

  // 注意：accountId 变化时的刷新逻辑已在上面的 useEffect 中处理

  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', 'MAX_OPEN_POSITIONS', 'MAX_DAILY_ENTRIES', '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
                : value,
            type,
            category,
            description: desc
          }
        }
        return {
          key,
          value:
            (key.includes('PERCENT') || key.includes('PCT')) && !PCT_LIKE_KEYS.has(key)
              ? value
              : 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配置'
  }

  // 普通用户只展示含“可编辑项”的分组，避免出现不可修改的策略组
  const visibleCategories = isAdmin
    ? configCategories
    : Object.fromEntries(
        Object.entries(configCategories).filter(([cat]) =>
          Object.keys(configs).some(
            (key) => configs[key]?.category === cat && isKeyEditableForUser(key)
          )
        )
      )

  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 && currentAccountMeta && currentAccountMeta.status === 'active' ? (
              <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={() => {
                        dispatch(setAccountId(globalStrategyAccountId))
                        setAccountId(globalStrategyAccountId)
                        setMessage('已切换到全局策略账号（策略核心统一在这里维护）')
                      }}
                    >
                      切换到全局策略账号 #{globalStrategyAccountId}
                    </button>
                  </div>
                ) : null}
              </div>
            ) : null}
          </div>
          <div className="header-actions">
            {/* 查看整体配置和配置说明已移至全局配置页面 */}
          </div>
        </div>
        <div className="config-info">
          <p>修改配置后，交易系统将在下次扫描时自动使用新配置</p>
        </div>

        {/* 我的交易进程（按账号；该账号 owner 或 admin 可启停） */}
        {currentAccountMeta && currentAccountMeta.status === 'active' ? (
        <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 primary" onClick={handleTriggerScan} disabled={systemBusy || !accountTradingStatus?.running} title="通知该账号交易进程立即执行一次市场扫描（无需重启）">
              立即扫描
            </button>
            <button type="button" className="system-btn" onClick={handleAccountTradingEnsure} disabled={systemBusy} title="为该账号生成/刷新 supervisor 进程配置文件（需该账号 owner 或管理员）">
              生成配置
            </button>
            <button type="button" className="system-btn" onClick={handleAccountTradingStop} disabled={systemBusy || !accountTradingStatus?.running} title="停止该账号交易进程（需该账号 owner 或管理员）">
              停止
            </button>
            <button type="button" className="system-btn" onClick={handleAccountTradingStart} disabled={systemBusy || accountTradingStatus?.running} title="启动该账号交易进程（需该账号 owner 或管理员）">
              启动
            </button>
            <button type="button" className="system-btn primary" onClick={handleAccountTradingRestart} disabled={systemBusy} title="重启该账号交易进程（需该账号 owner 或管理员）">
              重启
            </button>
          </div>
          <div className="system-hint">
            提示：生成配置、启停/重启进程、修改 API 密钥均需该账号的 owner（每账号仅一个）。若报“无权限”请让管理员将该账号分配为 owner；若报 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>
        ) : null}

        {/* 账号密钥（当前账号；owner/admin 可改） */}
        {currentAccountMeta && currentAccountMeta.status === 'active' ? (
        <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>
        ) : null}



        {/* 用户提示 */}
        {!isAdmin && (
          <div className="system-hint" style={{ marginTop: '12px' }}>
            平台已开启“傻瓜化模式”：策略核心由管理员统一管理。你只需要配置密钥、充值余额，并调整少量风控参数（如最小/最大仓位、每日开仓次数等）。
          </div>
        )}
      </div>

      {/* 配置可行性检查提示 */}
      {currentAccountMeta && currentAccountMeta.status === 'active' && 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>
            <p>
              最大单笔保证金: <strong>{feasibilityCheck.current_config?.max_single_position_margin_usdt != null ? feasibilityCheck.current_config.max_single_position_margin_usdt.toFixed(2) : 'N/A'}</strong> USDT
              {feasibilityCheck.current_config?.max_open_positions != null && (
                <> | 最多持仓: <strong>{feasibilityCheck.current_config.max_open_positions}</strong> 个</>
              )}
              {feasibilityCheck.current_config?.max_daily_entries != null && (
                <> | 每日最多开仓: <strong>{feasibilityCheck.current_config.max_daily_entries}</strong> 次</>
              )}
            </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>
      )}

      {/* 配置项（禁用account时不显示）；普通用户只显示可编辑的风险旋钮与 API 配置 */}
      {currentAccountMeta && currentAccountMeta.status === 'active' ? (
        Object.entries(visibleCategories).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
                  // 密钥在“账号密钥”模块展示，此处可选展示（api 组保留）
                  if (key === 'BINANCE_API_KEY' || key === 'BINANCE_API_SECRET' || key === 'USE_TESTNET') return true
                  if (!isAdmin && !isKeyEditableForUser(key)) 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>
        ))
      ) : currentAccountMeta && currentAccountMeta.status === 'disabled' ? (
        <div className="system-hint" style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
          当前账号已禁用，无法查看和修改配置
        </div>
      ) : null}

      {/* 配置快照已移至全局配置页面 */}
    </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 ''
      }
      // ⚠️ 简化：直接显示数据库中的值（0.30），用户直接输入小数（0.30）
      // 如果值>1，说明可能是旧数据（百分比形式），需要转换；否则直接显示
      if (isPctLike) {
        // pct-like：值本身就是"百分比数值"（<=1表示<=1%），直接显示
        return formatPercent(numVal <= 0.05 ? numVal * 100 : numVal)
      }
      // 常规比例型：直接显示数据库中的值（0.30），如果>1则可能是旧数据
      return formatPercent(numVal)
    }
    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) : value)
            : value
          setLocalValue(restoreValue)
          return
        } else {
          numValue = parseFloat(localValue)
        }
      } else {
        numValue = localValue
      }

      if (isNaN(numValue)) {
        // 如果输入无效，恢复原值
        const restoreValue = isPercentKey
          ? (typeof value === 'number' ? formatPercent(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 > 1) {
            setLocalValue(getInitialDisplayValue(value))
            return
          }
          // ⚠️ 简化：直接使用输入的值（0.30），不做转换
          // 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-1），用户直接输入小数
              if (isPercentKey) {
                const numValue = parseFloat(newValue)
                if (newValue !== '' && !isNaN(numValue) && (numValue < 0 || numValue > 1)) {
                  // 超出范围，不更新
                  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 ? '输入小数（0-1之间，如0.30表示30%）' : '输入数值'}
        />
        {/* ⚠️ 简化：去掉%符号，直接显示小数（0.30） */}
        {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
