import React, { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { api } from '../services/api'
import { selectAccountId } from '../store/appSlice'
import './TradeList.css'

const TradeList = () => {
  const accountId = useSelector(selectAccountId) // 从 Redux 获取当前账号ID
  const [trades, setTrades] = useState([])
  const [stats, setStats] = useState(null)
  const [loading, setLoading] = useState(true)
  const [showStatsTable, setShowStatsTable] = useState(false) // 控制详细统计表格折叠

  // 筛选状态
  const [period, setPeriod] = useState('today') // '1d', '7d', '30d', 'today', 'week', 'month', null
  const [startDate, setStartDate] = useState('')
  const [endDate, setEndDate] = useState('')
  const [symbol, setSymbol] = useState('')
  const [status, setStatus] = useState('')
  const [useCustomDate, setUseCustomDate] = useState(false)
  const [tradeType, setTradeType] = useState('')
  const [exitReason, setExitReason] = useState('')
  const [reconciledOnly, setReconciledOnly] = useState(true) // 默认仅可对账，与币安一致
  const [timeFilter, setTimeFilter] = useState('exit') // 'exit' 按平仓时间（今天=今天平掉的单）, 'entry' 按开仓时间
  const [syncing, setSyncing] = useState(false) // 同步订单状态
  const [syncResult, setSyncResult] = useState(null) // 同步结果
  const [syncDays, setSyncDays] = useState(7) // 同步天数
  const [syncAllSymbols, setSyncAllSymbols] = useState(false) // 是否同步所有交易对的订单

  useEffect(() => {
    loadData()
  }, [accountId, reconciledOnly, timeFilter, period, useCustomDate, startDate, endDate, symbol, status, tradeType, exitReason]) // 筛选条件变化时重新加载（含按创建时间、快速时间段）

  const loadData = async () => {
    setLoading(true)
    try {
      const params = {
        limit: 100
      }

      // 如果使用快速时间段筛选
      if (!useCustomDate && period) {
        params.period = period
      } else if (useCustomDate) {
        // 使用自定义日期
        if (startDate) params.start_date = startDate
        if (endDate) params.end_date = endDate
      }

      if (symbol) params.symbol = symbol
      if (status) params.status = status
      if (tradeType) params.trade_type = tradeType
      if (exitReason) params.exit_reason = exitReason
      params.reconciled_only = reconciledOnly
      params.time_filter = timeFilter || 'exit'

      const [tradesData, statsData] = await Promise.all([
        api.getTrades(params),
        api.getTradeStats(params)
      ])
      setTrades(tradesData.trades || [])
      setStats(statsData)
    } catch (error) {
      console.error('Failed to load trades:', error)
    } finally {
      setLoading(false)
    }
  }

  const handlePeriodChange = (newPeriod) => {
    setPeriod(newPeriod)
    setUseCustomDate(false)
    setStartDate('')
    setEndDate('')
  }

  const handleCustomDateToggle = () => {
    setUseCustomDate(!useCustomDate)
    if (!useCustomDate) {
      setPeriod(null)
    }
  }

  const handleReset = () => {
    setPeriod(null)
    setStartDate('')
    setEndDate('')
    setSymbol('')
    setStatus('')
    setUseCustomDate(false)
    setReconciledOnly(true)
  }

  // 同步订单：从币安同步历史订单，补全缺失的订单号
  const handleSyncOrders = async () => {
    if (syncing) {
      return // 防止重复点击
    }
    
    const confirmMsg = syncAllSymbols 
      ? `确定要同步最近 ${syncDays} 天的所有交易对订单吗？\n这将从币安拉取所有交易对的历史订单，并创建缺失的交易记录。\n⚠️ 注意：这会请求大量数据，可能需要较长时间。`
      : `确定要同步最近 ${syncDays} 天的订单吗？\n这将从币安拉取历史订单并补全缺失的订单号（仅限数据库中已有的交易对）。`
    
    if (!window.confirm(confirmMsg)) {
      return
    }
    
    setSyncing(true)
    setSyncResult(null)
    
    try {
      const result = await api.syncTradesFromBinance(syncDays, syncAllSymbols)
      const backfillHint = (result.entry_order_id_filled || result.exit_order_id_filled)
        ? `，补全开仓订单号 ${result.entry_order_id_filled || 0} 个、平仓订单号 ${result.exit_order_id_filled || 0} 个（勾选「仅可对账」后可见）`
        : ''
      setSyncResult({
        success: true,
        message: `同步完成：共处理 ${result.total_orders || 0} 个订单，更新 ${result.updated_trades || 0} 条记录${result.created_trades ? `，创建 ${result.created_trades} 条新记录` : ''}${backfillHint}`,
        details: result
      })
      // 同步成功后自动刷新数据
      setTimeout(() => {
        loadData()
      }, 1000)
    } catch (error) {
      setSyncResult({
        success: false,
        message: `同步失败：${error.message || '未知错误'}`,
        details: null
      })
    } finally {
      setSyncing(false)
    }
  }

  // 导出当前订单数据（含入场/离场原因、入场思路等完整字段，便于后续分析）
  // type: 'csv' | 'json'
  const handleExport = (type = 'csv') => {
    if (trades.length === 0) {
      alert('暂无数据可导出')
      return
    }

    const exportData = trades.map(trade => {
      const notional = trade.notional_usdt !== undefined && trade.notional_usdt !== null
        ? parseFloat(trade.notional_usdt)
        : (trade.entry_value_usdt !== undefined && trade.entry_value_usdt !== null
          ? parseFloat(trade.entry_value_usdt)
          : (parseFloat(trade.quantity || 0) * parseFloat(trade.entry_price || 0)))
      const leverage = parseFloat(trade.leverage || 10)
      const margin = trade.margin_usdt !== undefined && trade.margin_usdt !== null
        ? parseFloat(trade.margin_usdt)
        : (leverage > 0 ? notional / leverage : 0)

      const localPnl = parseFloat(trade.pnl || 0)
      const localPnlPercent = margin > 0 ? (localPnl / margin) * 100 : 0

      const realizedPnl = trade.realized_pnl !== undefined && trade.realized_pnl !== null
        ? parseFloat(trade.realized_pnl)
        : null
      const commission = trade.commission !== undefined && trade.commission !== null
        ? parseFloat(trade.commission)
        : null
      const commissionAsset = trade.commission_asset || null

      let netBinancePnl = null
      if (realizedPnl !== null) {
        netBinancePnl = realizedPnl
        if (commission !== null && commissionAsset === 'USDT') {
          netBinancePnl = netBinancePnl - commission
        }
      }

      const effectivePnl = netBinancePnl !== null ? netBinancePnl : localPnl
      const effectivePnlPercent = margin > 0 ? (effectivePnl / margin) * 100 : 0

      const row = {
        交易ID: trade.id,
        交易对: trade.symbol,
        方向: trade.side,
        数量: parseFloat(trade.quantity || 0),
        名义价值: notional,
        保证金: margin,
        杠杆: leverage,
        入场价: parseFloat(trade.entry_price || 0),
        出场价: trade.exit_price ? parseFloat(trade.exit_price) : null,
        盈亏: effectivePnl,
        盈亏比例: effectivePnlPercent,
        盈亏_实盘: netBinancePnl,
        盈亏_实盘比例: netBinancePnl !== null && margin > 0 ? (netBinancePnl / margin) * 100 : null,
        盈亏_价格差: localPnl,
        盈亏_价格差比例: localPnlPercent,
        状态: trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消',
        平仓类型: trade.exit_reason_display || '-',
        开仓订单号: trade.entry_order_id || '-',
        自定义订单号: trade.client_order_id || '-',
        平仓订单号: trade.exit_order_id || '-',
        入场时间: trade.entry_time,
        平仓时间: trade.exit_time || null,
        // 以下为分析用完整字段
        入场原因: trade.entry_reason ?? null,
        离场原因: trade.exit_reason ?? null,
        持仓时长分钟: trade.duration_minutes ?? null,
        止损价: trade.stop_loss_price != null ? parseFloat(trade.stop_loss_price) : null,
        止盈价: trade.take_profit_price != null ? parseFloat(trade.take_profit_price) : null,
        第一目标止盈价: trade.take_profit_1 != null ? parseFloat(trade.take_profit_1) : null,
        第二目标止盈价: trade.take_profit_2 != null ? parseFloat(trade.take_profit_2) : null,
        ATR: trade.atr != null ? parseFloat(trade.atr) : null,
        策略类型: trade.strategy_type ?? null,
      }
      if (trade.entry_context != null) {
        row.入场思路 = trade.entry_context
      }
      return row
    })

    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-')
    
    if (type === 'json') {
      const filename = `交易记录_${timestamp}.json`
      const dataStr = JSON.stringify(exportData, null, 2)
      const dataBlob = new Blob([dataStr], { type: 'application/json' })
      const url = URL.createObjectURL(dataBlob)
      const link = document.createElement('a')
      link.href = url
      link.download = filename
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(url)
    } else {
      // 转换为CSV格式 helper
      const convertToCSV = (objArray) => {
        const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
        let str = '';
        
        if (array.length === 0) return '';

        // Header
        const headers = Object.keys(array[0]);
        str += headers.join(',') + '\r\n';

        // Rows
        for (let i = 0; i < array.length; i++) {
          let line = '';
          for (const index in array[i]) {
            if (line !== '') line += ',';
            
            let value = array[i][index];
            if (value === null || value === undefined) {
                value = '';
            } else if (typeof value === 'object') {
                value = JSON.stringify(value);
            } else {
                value = String(value);
            }

            // Escape quotes and wrap in quotes if necessary
            // Excel needs double quotes to be escaped as ""
            if (value.search(/("|,|\n|\r)/g) >= 0) {
                value = '"' + value.replace(/"/g, '""') + '"';
            }
            line += value;
          }
          str += line + '\r\n';
        }
        return str;
      }

      const filename = `交易记录_${timestamp}.csv`
      // 创建并下载文件 (CSV with BOM for Excel)
      const csvStr = convertToCSV(exportData)
      const bom = '\uFEFF'
      const dataBlob = new Blob([bom + csvStr], { type: 'text/csv;charset=utf-8;' })
      const url = URL.createObjectURL(dataBlob)
      const link = document.createElement('a')
      link.href = url
      link.download = filename
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(url)
    }
  }

  // 兼容性复制函数
  const fallbackCopyTextToClipboard = (text) => {
    const textArea = document.createElement("textarea")
    textArea.value = text
    
    // 避免滚动到底部
    textArea.style.top = "0"
    textArea.style.left = "0"
    textArea.style.position = "fixed"
    textArea.style.opacity = "0"
    
    document.body.appendChild(textArea)
    textArea.focus()
    textArea.select()
    
    try {
      const successful = document.execCommand('copy')
      if (successful) {
        alert('统计数据已复制到剪贴板（可直接粘贴到Excel）')
      } else {
        alert('复制失败，请手动选择复制')
      }
    } catch (err) {
      console.error('Fallback copy failed:', err)
      alert('复制失败，您的浏览器不支持自动复制')
    }
    
    document.body.removeChild(textArea)
  }

  // 复制统计数据到剪贴板
  const handleCopyStats = (statsData) => {
    if (!statsData) return

    const m = statsData.exit_reason_counts || {}
    const exitReasonText = [
        m.stop_loss ? `止损 ${m.stop_loss}` : '',
        m.take_profit ? `止盈 ${m.take_profit}` : '',
        m.trailing_stop ? `移动止损 ${m.trailing_stop}` : '',
        m.manual ? `手动 ${m.manual}` : '',
        m.sync ? `同步 ${m.sync}` : '',
        m.unknown ? `其他 ${m.unknown}` : ''
    ].filter(Boolean).join(' / ') || '—'

    const lines = [
      `总交易数\t${statsData.total_trades}`,
      `胜率\t${statsData.win_rate.toFixed(2)}%`,
      `总盈亏\t${statsData.total_pnl.toFixed(2)} USDT`,
      `平均盈亏\t${statsData.avg_pnl.toFixed(2)} USDT`,
      `平均持仓时长\t${statsData.avg_duration_minutes ? Number(statsData.avg_duration_minutes).toFixed(0) : 0} 分钟`,
      `平仓原因分布\t${exitReasonText}`,
      `盈亏比\t${Number(statsData.avg_win_loss_ratio || 0).toFixed(2)} : 1`,
      `总交易量\t${Number(statsData.total_notional_usdt || 0).toFixed(2)} USDT`
    ]
    
    const text = lines.join('\n')
    
    // 优先尝试 Clipboard API
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(() => {
        alert('统计数据已复制到剪贴板（可直接粘贴到Excel）')
      }).catch(err => {
        console.error('Clipboard API failed:', err)
        fallbackCopyTextToClipboard(text)
      })
    } else {
      fallbackCopyTextToClipboard(text)
    }
  }

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

  return (
    <div className="trade-list">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '10px' }}>
        <div>
          <h2 style={{ margin: 0 }}>交易记录</h2>
          <p style={{ color: '#666', fontSize: '14px', marginTop: '5px', marginBottom: '0' }}>
            说明：每条记录代表一笔完整的交易（开仓+平仓），统计总盈亏时每条记录只计算一次。默认「仅可对账」：只显示有开仓/平仓订单号的记录，统计与币安一致。时间依据：按平仓时间=今日平仓+今日开仓未平仓；按开仓时间=实际入场时间，适合策略分析；按创建时间=记录写入 DB 时间。
          </p>
        </div>
        <div style={{ 
          display: 'flex', 
          flexDirection: 'column', 
          gap: '8px', 
          alignItems: 'flex-end',
          padding: '10px',
          backgroundColor: '#f5f5f5',
          borderRadius: '4px',
          border: '1px solid #ddd'
        }}>
          <div style={{ fontSize: '12px', fontWeight: 'bold', color: '#666', marginBottom: '4px' }}>订单同步</div>
          <p style={{ fontSize: '11px', color: '#888', margin: '0 0 6px 0' }}>
            同步的是当前选中账号的币安订单。若系统里几乎没有记录，请勾选「全量同步」并选 7 天或 30 天。
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
            <select
              value={syncDays}
              onChange={(e) => setSyncDays(Number(e.target.value))}
              disabled={syncing}
              style={{ padding: '4px 8px', fontSize: '12px', width: '70px' }}
            >
              <option value={3}>3天</option>
              <option value={7}>7天</option>
              <option value={14}>14天</option>
              <option value={30}>30天</option>
            </select>
            <label style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '12px', cursor: 'pointer' }}>
              <input
                type="checkbox"
                checked={syncAllSymbols}
                onChange={(e) => setSyncAllSymbols(e.target.checked)}
                disabled={syncing}
                style={{ cursor: 'pointer' }}
              />
              <span title="勾选后将同步所有交易对的订单（不限于数据库中的），用于补全缺失的交易记录">全量同步</span>
            </label>
            <button
              onClick={handleSyncOrders}
              disabled={syncing}
              style={{
                backgroundColor: syncing ? '#ccc' : '#4CAF50',
                color: 'white',
                border: 'none',
                padding: '6px 12px',
                fontSize: '12px',
                borderRadius: '4px',
                cursor: syncing ? 'not-allowed' : 'pointer'
              }}
              title={syncAllSymbols ? "从币安同步所有交易对的历史订单，并创建缺失的交易记录（会请求大量数据）" : "从币安同步历史订单，补全缺失的订单号（仅限数据库中已有的交易对，不会重复同步）"}
            >
              {syncing ? '同步中...' : '同步订单'}
            </button>
          </div>
        </div>
      </div>

      {/* 筛选面板 */}
      <div className="filter-panel">
        <div className="filter-section">
          <label>时间依据：</label>
          <div className="period-buttons">
            <button
              className={timeFilter === 'exit' ? 'active' : ''}
              onClick={() => setTimeFilter('exit')}
              title="选「今天」= 今天平仓的已平仓单 + 今天开仓的未平仓单"
            >
              按平仓时间
            </button>
            <button
              className={timeFilter === 'entry' ? 'active' : ''}
              onClick={() => setTimeFilter('entry')}
              title="选「今天」= 今天开仓的（含未平仓）。开仓时间=实际入场时间，适合策略分析"
            >
              按开仓时间
            </button>
            <button
              className={timeFilter === 'created' ? 'active' : ''}
              onClick={() => setTimeFilter('created')}
              title="选「今天」= 今天创建记录的。创建时间=记录写入 DB 时间"
            >
              按创建时间
            </button>
          </div>
        </div>
        <div className="filter-section">
          <label>快速筛选：</label>
          <div className="period-buttons">
            <button
              className={period === 'today' ? 'active' : ''}
              onClick={() => handlePeriodChange('today')}
            >
              今天
            </button>
            <button
              className={period === 'week' ? 'active' : ''}
              onClick={() => handlePeriodChange('week')}
            >
              本周
            </button>
            <button
              className={period === 'month' ? 'active' : ''}
              onClick={() => handlePeriodChange('month')}
            >
              本月
            </button>
            <button
              className={period === '1d' ? 'active' : ''}
              onClick={() => handlePeriodChange('1d')}
            >
              最近1天
            </button>
            <button
              className={period === '7d' ? 'active' : ''}
              onClick={() => handlePeriodChange('7d')}
            >
              最近7天
            </button>
            <button
              className={period === '30d' ? 'active' : ''}
              onClick={() => handlePeriodChange('30d')}
            >
              最近30天
            </button>
            <button
              className={period === null && !useCustomDate ? 'active' : ''}
              onClick={() => handlePeriodChange(null)}
            >
              全部
            </button>
          </div>
        </div>

        <div className="filter-section">
          <label>
            <input
              type="checkbox"
              checked={useCustomDate}
              onChange={handleCustomDateToggle}
            />
            自定义时间段
          </label>
          {useCustomDate && (
            <div className="date-inputs">
              <input
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                placeholder="开始日期"
              />
              <span>至</span>
              <input
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
                placeholder="结束日期"
                min={startDate}
              />
            </div>
          )}
        </div>

        <div className="filter-section">
          <label>交易对：</label>
          <input
            type="text"
            value={symbol}
            onChange={(e) => setSymbol(e.target.value)}
            placeholder="如: BTCUSDT"
            style={{ width: '150px' }}
          />
        </div>
        <div className="filter-section">
          <label>交易类型：</label>
          <select
            value={tradeType}
            onChange={(e) => setTradeType(e.target.value)}
            style={{ width: '120px' }}
          >
            <option value="">全部</option>
            <option value="buy">买入</option>
            <option value="sell">卖出</option>
          </select>
        </div>
        <div className="filter-section">
          <label title="确认系统自动止盈：筛选「止盈」可只看自动止盈记录；表格中平仓类型列会显示「自动平仓（止盈）」等">
            平仓原因：
          </label>
          <select
            value={exitReason}
            onChange={(e) => setExitReason(e.target.value)}
            style={{ width: '140px' }}
            title="选「止盈」可确认系统自动止盈记录"
          >
            <option value="">全部</option>
            <option value="stop_loss">止损</option>
            <option value="take_profit">止盈</option>
            <option value="take_profit_partial_then_take_profit">分步止盈后止盈</option>
            <option value="early_take_profit">早止盈</option>
            <option value="trailing_stop">移动止损</option>
            <option value="manual">手动平仓</option>
            <option value="sync">同步平仓</option>
          </select>
        </div>

        <div className="filter-section">
          <label>状态：</label>
          <select
            value={status}
            onChange={(e) => setStatus(e.target.value)}
            style={{ width: '120px' }}
          >
            <option value="">全部</option>
            <option value="open">持仓中</option>
            <option value="closed">已平仓</option>
            <option value="cancelled">已取消</option>
          </select>
        </div>

        <div className="filter-section">
          <label title="只显示有开仓/平仓订单号的记录，统计与币安一致，避免系统盈利而币安亏损的偏差">
            <input
              type="checkbox"
              checked={reconciledOnly}
              onChange={(e) => setReconciledOnly(e.target.checked)}
            />
            仅可对账（与币安一致）
          </label>
        </div>

        <div className="filter-actions">
          <button className="btn-primary" onClick={loadData}>
            查询
          </button>
          <button className="btn-secondary" onClick={handleReset}>
            重置
          </button>
          {trades.length > 0 && (
            <>
              <button className="btn-export" onClick={() => handleExport('csv')} title="导出Excel/CSV（含入场/离场原因、入场思路等），便于后续分析">
                导出 Excel ({trades.length})
              </button>
              <button className="btn-export" onClick={() => handleExport('json')} style={{ backgroundColor: '#607D8B' }} title="导出JSON数据，方便程序处理">
                导出 JSON ({trades.length})
              </button>
            </>
          )}
        </div>
        {syncResult && (
          <div style={{
            marginTop: '10px',
            padding: '10px',
            backgroundColor: syncResult.success ? '#e8f5e9' : '#ffebee',
            border: `1px solid ${syncResult.success ? '#4CAF50' : '#f44336'}`,
            borderRadius: '4px',
            fontSize: '13px',
            color: syncResult.success ? '#2e7d32' : '#c62828'
          }}>
            {syncResult.message}
            {syncResult.details && syncResult.success && (
              <div style={{ marginTop: '8px', fontSize: '12px', color: '#666' }}>
                开仓订单：{syncResult.details.open_orders || 0} | 
                平仓订单：{syncResult.details.close_orders || 0} | 
                更新记录：{syncResult.details.updated_trades || 0}
                {syncResult.details.created_trades ? ` | 新建记录：${syncResult.details.created_trades}` : ''}
                {syncResult.details.entry_order_id_filled ? ` | 补全开仓订单号：${syncResult.details.entry_order_id_filled}` : ''}
                {syncResult.details.exit_order_id_filled ? ` | 补全平仓订单号：${syncResult.details.exit_order_id_filled}` : ''}
              </div>
            )}
            <button
              onClick={() => setSyncResult(null)}
              style={{
                float: 'right',
                background: 'none',
                border: 'none',
                color: '#666',
                cursor: 'pointer',
                fontSize: '16px'
              }}
            >
              ×
            </button>
          </div>
        )}
      </div>

      {
        stats && (
          <div className="stats-section">
            {/* 卡片式统计（始终显示） */}
            <div className="stats-summary">
              <div className="stat-card">
                <div className="stat-label">总交易数</div>
                <div className="stat-value">{stats.total_trades}</div>
                <div style={{ fontSize: '12px', color: '#999', marginTop: '4px' }}>
                  {stats.meaningful_trades !== undefined && (
                    <>（有意义: {stats.meaningful_trades}，0盈亏: {stats.zero_pnl_trades || 0}）</>
                  )}
                  {stats.meaningful_trades === undefined && <>（已平仓的完整交易）</>}
                </div>
              </div>
              <div className="stat-card">
                <div className="stat-label">胜率</div>
                <div className="stat-value">{stats.win_rate.toFixed(2)}%</div>
                <div style={{ fontSize: '12px', color: '#999', marginTop: '4px' }}>
                  {stats.meaningful_trades !== undefined && <>（已排除0盈亏订单）</>}
                </div>
              </div>
              <div className="stat-card">
                <div className="stat-label">总盈亏</div>
                <div className={`stat-value ${stats.total_pnl >= 0 ? 'positive' : 'negative'}`}>
                  {stats.total_pnl.toFixed(2)} USDT
                </div>
              </div>
              <div className="stat-card">
                <div className="stat-label">平均盈亏</div>
                <div className={`stat-value ${stats.avg_pnl >= 0 ? 'positive' : 'negative'}`}>
                  {stats.avg_pnl.toFixed(2)} USDT
                </div>
              </div>
              {"avg_duration_minutes" in stats && stats.avg_duration_minutes !== null && stats.avg_duration_minutes !== undefined && (
                <div className="stat-card">
                  <div className="stat-label">平均持仓时长（分钟）</div>
                  <div className="stat-value">{Number(stats.avg_duration_minutes || 0).toFixed(0)}</div>
                  <div style={{ fontSize: '12px', color: '#999', marginTop: '4px' }}>
                    （仅统计“有意义交易”；优先使用 duration_minutes，缺失时用 exit_time-entry_time 计算）
                  </div>
                </div>
              )}
              {"exit_reason_counts" in stats && stats.exit_reason_counts && (
                <div className="stat-card">
                  <div className="stat-label">平仓原因（有意义交易）</div>
                  <div className="stat-value" style={{ fontSize: '1.1rem' }}>
                    {(() => {
                      const m = stats.exit_reason_counts || {}
                      const stopLoss = Number(m.stop_loss || 0)
                      const takeProfit = Number(m.take_profit || 0)
                      const trailing = Number(m.trailing_stop || 0)
                      const manual = Number(m.manual || 0)
                      const sync = Number(m.sync || 0)
                      const other = Number(m.unknown || 0)
                      const parts = []
                      if (stopLoss) parts.push(`止损 ${stopLoss}`)
                      if (takeProfit) parts.push(`止盈 ${takeProfit}`)
                      if (trailing) parts.push(`移动止损 ${trailing}`)
                      if (manual) parts.push(`手动 ${manual}`)
                      if (sync) parts.push(`同步 ${sync}`)
                      if (other) parts.push(`其他 ${other}`)
                      return parts.length ? parts.join(' / ') : '—'
                    })()}
                  </div>
                </div>
              )}
              {"avg_win_pnl" in stats && "avg_loss_pnl_abs" in stats && Number(stats.total_pnl || 0) > 0 && (
                <div className="stat-card">
                  <div className="stat-label">平均盈利 / 平均亏损（期望 3:1）</div>
                  <div
                    className={`stat-value ${typeof stats.avg_win_loss_ratio === 'number' && stats.avg_win_loss_ratio >= 3 ? 'positive' : ''
                      }`}
                  >
                    {typeof stats.avg_win_loss_ratio === 'number'
                      ? `${stats.avg_win_loss_ratio.toFixed(2)} : 1`
                      : '—'}
                  </div>
                  <div style={{ fontSize: '12px', color: '#999', marginTop: '4px' }}>
                    +{Number(stats.avg_win_pnl || 0).toFixed(2)} / -{Number(stats.avg_loss_pnl_abs || 0).toFixed(2)} USDT
                  </div>
                </div>
              )}
              {"total_notional_usdt" in stats && (
                <div className="stat-card">
                  <div className="stat-label">总交易量（名义）</div>
                  <div className="stat-value">{Number(stats.total_notional_usdt || 0).toFixed(2)} USDT</div>
                  <div style={{ fontSize: '12px', color: '#999', marginTop: '4px' }}>
                    （口径：入场价×数量）
                  </div>
                </div>
              )}
            </div>

            {/* 折叠控制按钮 */}
            <div className="stats-toggle-row">
              <button 
                className="btn-toggle" 
                onClick={() => setShowStatsTable(!showStatsTable)}
                title="查看可复制的详细统计表格"
              >
                {showStatsTable ? '▲ 收起详细统计' : '▼ 展开详细统计（分析用）'}
              </button>
            </div>

            {/* 详细统计表格（可折叠） */}
            {showStatsTable && (
              <div className="stats-copy-section">
                <div className="stats-header">
                  <h3>详细统计数据</h3>
                  <button className="btn-copy" onClick={() => handleCopyStats(stats)}>
                    复制统计
                  </button>
                </div>
                <table className="stats-table">
                  <tbody>
                    <tr>
                      <td>总交易数</td>
                      <td>{stats.total_trades}</td>
                    </tr>
                    <tr>
                      <td>胜率</td>
                      <td>{stats.win_rate.toFixed(2)}%</td>
                    </tr>
                    <tr>
                      <td>总盈亏</td>
                      <td>{stats.total_pnl.toFixed(2)} USDT</td>
                    </tr>
                    <tr>
                      <td>平均盈亏</td>
                      <td>{stats.avg_pnl.toFixed(2)} USDT</td>
                    </tr>
                    <tr>
                      <td>平均持仓时长</td>
                      <td>{stats.avg_duration_minutes ? Number(stats.avg_duration_minutes).toFixed(0) : 0} 分钟</td>
                    </tr>
                    <tr>
                      <td>平仓原因分布</td>
                      <td>
                        {(() => {
                          const m = stats.exit_reason_counts || {}
                          const stopLoss = Number(m.stop_loss || 0)
                          const takeProfit = Number(m.take_profit || 0)
                          const trailing = Number(m.trailing_stop || 0)
                          const manual = Number(m.manual || 0)
                          const sync = Number(m.sync || 0)
                          const other = Number(m.unknown || 0)
                          const parts = []
                          if (stopLoss) parts.push(`止损 ${stopLoss}`)
                          if (takeProfit) parts.push(`止盈 ${takeProfit}`)
                          if (trailing) parts.push(`移动止损 ${trailing}`)
                          if (manual) parts.push(`手动 ${manual}`)
                          if (sync) parts.push(`同步 ${sync}`)
                          if (other) parts.push(`其他 ${other}`)
                          return parts.length ? parts.join(' / ') : '—'
                        })()}
                      </td>
                    </tr>
                    <tr>
                      <td>盈亏比 (期望 3:1)</td>
                      <td>{Number(stats.avg_win_loss_ratio || 0).toFixed(2)} : 1</td>
                    </tr>
                    <tr>
                      <td>总交易量 (名义)</td>
                      <td>{Number(stats.total_notional_usdt || 0).toFixed(2)} USDT</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            )}
          </div>
        )
      }

      {
        trades.length === 0 ? (
          <div className="no-data">
            <div>暂无交易记录</div>
            {reconciledOnly && (
              <p style={{ marginTop: '10px', fontSize: '13px', color: '#666', maxWidth: '420px' }}>
                若币安今日有订单但此处为空，可先点击右上角「同步订单」补全开仓/平仓订单号，或取消勾选「仅可对账」查看全部记录。
              </p>
            )}
          </div>
        ) : (
          <>
            {/* 桌面端表格：用横向滚动包裹，避免整页过宽 */}
            <div className="table-wrapper">
            <table className="trades-table">
              <thead>
                <tr>
                  <th>交易ID</th>
                  <th>交易对</th>
                  <th>方向</th>
                  <th>数量</th>
                  <th>名义</th>
                  <th>保证金</th>
                  <th>入场价</th>
                  <th>出场价</th>
                  <th>盈亏</th>
                  <th>盈亏比例</th>
                  <th>状态</th>
                  <th>平仓类型</th>
                  <th>币安订单号</th>
                  <th>自定义订单号</th>
                  <th>创建时间</th>
                  <th>入场时间</th>
                  <th>平仓时间</th>
                </tr>
              </thead>
              <tbody>
                {trades.map(trade => {
                  // 名义/保证金：优先使用后端返回字段（notional_usdt / margin_usdt），否则回退计算
                  const notional = trade.notional_usdt !== undefined && trade.notional_usdt !== null
                    ? parseFloat(trade.notional_usdt)
                    : (
                      trade.entry_value_usdt !== undefined && trade.entry_value_usdt !== null
                        ? parseFloat(trade.entry_value_usdt)
                        : (parseFloat(trade.quantity || 0) * parseFloat(trade.entry_price || 0))
                    )
                  const leverage = parseFloat(trade.leverage || 10)
                  const margin = trade.margin_usdt !== undefined && trade.margin_usdt !== null
                    ? parseFloat(trade.margin_usdt)
                    : (leverage > 0 ? notional / leverage : 0)

                  // 计算盈亏（优先使用币安实际结算盈亏 realized_pnl - commission）
                  let pnl = parseFloat(trade.pnl || 0)
                  const realizedPnl = trade.realized_pnl !== undefined && trade.realized_pnl !== null ? parseFloat(trade.realized_pnl) : null
                  const commission = trade.commission !== undefined && trade.commission !== null ? parseFloat(trade.commission) : 0
                  const commissionAsset = trade.commission_asset || 'USDT'
                  
                  if (realizedPnl !== null) {
                    pnl = realizedPnl
                    // 如果手续费是 USDT，则从盈亏中扣除（得到净值）
                    if (commissionAsset === 'USDT') {
                      pnl -= commission
                    }
                  }

                  const pnlPercent = margin > 0 ? (pnl / margin) * 100 : 0

                  // 格式化时间为北京时间
                  // 支持Unix时间戳（秒数）或日期字符串
                  const formatTime = (timeValue) => {
                    if (!timeValue) return '-'
                    try {
                      let date
                      // 如果是数字（Unix时间戳），转换为毫秒
                      if (typeof timeValue === 'number') {
                        date = new Date(timeValue * 1000)
                      } else {
                        date = new Date(timeValue)
                      }
                      if (isNaN(date.getTime())) return String(timeValue)
                      return date.toLocaleString('zh-CN', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        timeZone: 'Asia/Shanghai'
                      })
                    } catch (e) {
                      return String(timeValue)
                    }
                  }

                  // 格式化订单号显示
                  const formatOrderIds = () => {
                    const entry = trade.entry_order_id || '-'
                    const exit = trade.exit_order_id || '-'
                    if (entry === '-' && exit === '-') return '-'
                    if (entry !== '-' && exit !== '-') {
                      return `开仓: ${entry} / 平仓: ${exit}`
                    }
                    return entry !== '-' ? `开仓: ${entry}` : `平仓: ${exit}`
                  }

                  return (
                    <tr key={trade.id}>
                      <td style={{ fontSize: '12px', color: '#999' }}>#{trade.id}</td>
                      <td>{trade.symbol}</td>
                      <td>
                        <span className={`side-badge ${trade.side === 'BUY' ? 'buy' : 'sell'}`}>
                          {trade.side === 'BUY' ? '做多' : '做空'}
                        </span>
                      </td>
                      <td>{parseFloat(trade.quantity).toFixed(4)}</td>
                      <td>{notional >= 0.01 ? notional.toFixed(2) : notional.toFixed(4)} USDT</td>
                      <td>{margin >= 0.01 ? margin.toFixed(2) : margin.toFixed(4)} USDT</td>
                      <td>{parseFloat(trade.entry_price).toFixed(4)}</td>
                      <td>{trade.exit_price ? parseFloat(trade.exit_price).toFixed(4) : '-'}</td>
                      <td className={pnl >= 0 ? 'positive' : 'negative'}>
                        {pnl.toFixed(2)} USDT
                      </td>
                      <td className={pnlPercent >= 0 ? 'positive' : 'negative'}>
                        {pnlPercent >= 0 ? '+' : ''}{pnlPercent.toFixed(2)}%
                      </td>
                      <td>
                        <span className={`status-badge status-${trade.status}`}>{trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消'}</span>
                      </td>
                      <td>{trade.exit_reason_display || '-'}</td>
                      <td className="order-id" style={{ fontSize: '12px' }}>{formatOrderIds()}</td>
                      <td className="order-id" style={{ fontSize: '12px' }} title={trade.client_order_id || ''}>{trade.client_order_id || '-'}</td>
                      <td>{formatTime(trade.created_at)}</td>
                      <td>{formatTime(trade.entry_time)}</td>
                      <td>{trade.exit_time ? formatTime(trade.exit_time) : '-'}</td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
            </div>

            {/* 移动端卡片 */}
            <div className="trades-cards">
              {trades.map(trade => {
                // 名义/保证金：优先后端字段
                const notional = trade.notional_usdt !== undefined && trade.notional_usdt !== null
                  ? parseFloat(trade.notional_usdt)
                  : (
                    trade.entry_value_usdt !== undefined && trade.entry_value_usdt !== null
                      ? parseFloat(trade.entry_value_usdt)
                      : (parseFloat(trade.quantity || 0) * parseFloat(trade.entry_price || 0))
                  )
                const leverage = parseFloat(trade.leverage || 10)
                const margin = trade.margin_usdt !== undefined && trade.margin_usdt !== null
                  ? parseFloat(trade.margin_usdt)
                  : (leverage > 0 ? notional / leverage : 0)
                
                // 计算盈亏（优先使用币安实际结算盈亏 realized_pnl - commission）
                let pnl = parseFloat(trade.pnl || 0)
                const realizedPnl = trade.realized_pnl !== undefined && trade.realized_pnl !== null ? parseFloat(trade.realized_pnl) : null
                const commission = trade.commission !== undefined && trade.commission !== null ? parseFloat(trade.commission) : 0
                const commissionAsset = trade.commission_asset || 'USDT'
                
                if (realizedPnl !== null) {
                  pnl = realizedPnl
                  if (commissionAsset === 'USDT') {
                    pnl -= commission
                  }
                }

                const pnlPercent = margin > 0 ? (pnl / margin) * 100 : 0

                // 格式化时间为北京时间
                // 支持Unix时间戳（秒数）或日期字符串
                const formatTime = (timeValue) => {
                  if (!timeValue) return '-'
                  try {
                    let date
                    // 如果是数字（Unix时间戳），转换为毫秒
                    if (typeof timeValue === 'number') {
                      date = new Date(timeValue * 1000)
                    } else {
                      date = new Date(timeValue)
                    }
                    if (isNaN(date.getTime())) return String(timeValue)
                    return date.toLocaleString('zh-CN', {
                      month: '2-digit',
                      day: '2-digit',
                      hour: '2-digit',
                      minute: '2-digit',
                      timeZone: 'Asia/Shanghai'
                    })
                  } catch (e) {
                    return String(timeValue)
                  }
                }

                return (
                  <div key={trade.id} className="trade-card">
                    <div className="trade-card-header">
                      <div>
                        <span className="trade-card-symbol">{trade.symbol}</span>
                        <span style={{ fontSize: '12px', color: '#999', marginLeft: '8px' }}>#{trade.id}</span>
                      </div>
                      <div style={{ display: 'flex', gap: '8px' }}>
                        <span className={`trade-card-side ${trade.side === 'BUY' ? 'buy' : 'sell'}`}>
                          {trade.side === 'BUY' ? '买入' : '卖出'}
                        </span>
                        <span className={`status-badge status-${trade.status}`}>
                          {trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消'}
                        </span>
                      </div>
                    </div>
                    <div className="trade-card-body">
                      <div className="trade-card-field">
                        <span className="trade-card-label">数量</span>
                        <span className="trade-card-value">{parseFloat(trade.quantity).toFixed(4)}</span>
                      </div>
                      <div className="trade-card-field">
                        <span className="trade-card-label">名义</span>
                        <span className="trade-card-value">{notional >= 0.01 ? notional.toFixed(2) : notional.toFixed(4)} USDT</span>
                      </div>
                      <div className="trade-card-field">
                        <span className="trade-card-label">保证金</span>
                        <span className="trade-card-value">{margin >= 0.01 ? margin.toFixed(2) : margin.toFixed(4)} USDT</span>
                      </div>
                      <div className="trade-card-field">
                        <span className="trade-card-label">入场价</span>
                        <span className="trade-card-value">{parseFloat(trade.entry_price).toFixed(4)}</span>
                      </div>
                      <div className="trade-card-field">
                        <span className="trade-card-label">出场价</span>
                        <span className="trade-card-value">{trade.exit_price ? parseFloat(trade.exit_price).toFixed(4) : '-'}</span>
                      </div>
                      <div className="trade-card-field">
                        <span className="trade-card-label">盈亏</span>
                        <span className={`trade-card-value ${pnl >= 0 ? 'positive' : 'negative'}`}>
                          {pnl.toFixed(2)} USDT
                        </span>
                      </div>
                      <div className="trade-card-field">
                        <span className="trade-card-label">盈亏比例</span>
                        <span className={`trade-card-value ${pnlPercent >= 0 ? 'positive' : 'negative'}`}>
                          {pnlPercent >= 0 ? '+' : ''}{pnlPercent.toFixed(2)}%
                        </span>
                      </div>
                      {trade.exit_reason_display && (
                        <div className="trade-card-field">
                          <span className="trade-card-label">平仓类型</span>
                          <span className="trade-card-value">{trade.exit_reason_display}</span>
                        </div>
                      )}
                      {(trade.entry_order_id || trade.exit_order_id) && (
                        <div className="trade-card-field">
                          <span className="trade-card-label">币安订单号</span>
                          <span className="trade-card-value order-id" style={{ fontSize: '12px' }}>
                            {trade.entry_order_id ? `开仓: ${trade.entry_order_id}` : ''}
                            {trade.entry_order_id && trade.exit_order_id ? ' / ' : ''}
                            {trade.exit_order_id ? `平仓: ${trade.exit_order_id}` : ''}
                          </span>
                        </div>
                      )}
                      {trade.client_order_id && (
                        <div className="trade-card-field">
                          <span className="trade-card-label">自定义订单号</span>
                          <span className="trade-card-value order-id" style={{ fontSize: '12px' }} title={trade.client_order_id}>{trade.client_order_id}</span>
                        </div>
                      )}
                    </div>
                    <div className="trade-card-footer">
                      <div className="trade-time-item">
                        <span className="time-label">创建:</span>
                        <span>{formatTime(trade.created_at)}</span>
                      </div>
                      <div className="trade-time-item">
                        <span className="time-label">入场:</span>
                        <span>{formatTime(trade.entry_time)}</span>
                      </div>
                      {trade.exit_time && (
                        <div className="trade-time-item">
                          <span className="time-label">平仓:</span>
                          <span>{formatTime(trade.exit_time)}</span>
                        </div>
                      )}
                    </div>
                  </div>
                )
              })}
            </div>
          </>
        )
      }
    </div >
  )
}

export default TradeList
