<template>
  <a-modal
    :title="$t('dashboard.indicator.backtest.title')"
    :visible="visible"
    :width="1100"
    @cancel="handleCancel"
    :maskClosable="false"
    class="backtest-modal"
  >
    <div class="backtest-content">
      <a-steps :current="currentStep" size="small" style="margin-bottom: 16px;">
        <a-step :title="$t('dashboard.indicator.backtest.steps.strategy.title')" :description="$t('dashboard.indicator.backtest.steps.strategy.desc')" />
        <a-step :title="$t('dashboard.indicator.backtest.steps.trading.title')" :description="$t('dashboard.indicator.backtest.steps.trading.desc')" />
        <a-step :title="$t('dashboard.indicator.backtest.steps.results.title')" :description="$t('dashboard.indicator.backtest.steps.results.desc')" />
      </a-steps>

      <!-- Steps 1 & 2: configuration -->
      <div v-show="currentStep !== 2" class="config-section">
        <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <!-- Step 1: strategy settings -->
          <div v-show="currentStep === 0">
            <a-collapse v-model="step1CollapseKeys" :bordered="false" style="background: #fafafa;">
              <a-collapse-panel key="risk" :header="$t('dashboard.indicator.backtest.panel.risk')">
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.stopLossPct')">
                      <a-input-number
                        v-decorator="['stopLossPct', { initialValue: 0 }]"
                        :min="0"
                        :max="100"
                        :step="0.01"
                        :precision="4"
                        style="width: 220px"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.takeProfitPct')">
                      <a-input-number
                        v-decorator="['takeProfitPct', { initialValue: 0 }]"
                        :min="0"
                        :max="1000"
                        :step="0.01"
                        :precision="4"
                        style="width: 220px"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.trailingEnabled')">
                      <a-switch
                        v-decorator="['trailingEnabled', { valuePropName: 'checked', initialValue: false }]"
                        @change="onTrailingToggle"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12"></a-col>
                </a-row>

                <template v-if="trailingEnabledUi">
                  <a-row :gutter="24">
                    <a-col :span="12">
                      <a-form-item :label="$t('dashboard.indicator.backtest.field.trailingStopPct')">
                        <a-input-number
                          v-decorator="['trailingStopPct', { initialValue: 0 }]"
                          :min="0"
                          :max="100"
                          :step="0.01"
                          :precision="4"
                          style="width: 220px"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item :label="$t('dashboard.indicator.backtest.field.trailingActivationPct')">
                        <a-input-number
                          v-decorator="['trailingActivationPct', { initialValue: 0 }]"
                          :min="0"
                          :max="1000"
                          :step="0.01"
                          :precision="4"
                          style="width: 220px"
                        />
                      </a-form-item>
                    </a-col>
                  </a-row>
                </template>
              </a-collapse-panel>

              <a-collapse-panel key="scale" :header="$t('dashboard.indicator.backtest.panel.scale')">
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.trendAddEnabled')">
                      <a-switch
                        v-decorator="['trendAddEnabled', { valuePropName: 'checked', initialValue: false }]"
                        @change="onTrendAddToggle"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.dcaAddEnabled')">
                      <a-switch
                        v-decorator="['dcaAddEnabled', { valuePropName: 'checked', initialValue: false }]"
                        @change="onDcaAddToggle"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.trendAddStepPct')">
                      <a-input-number
                        v-decorator="['trendAddStepPct', { initialValue: 0 }]"
                        :min="0"
                        :max="1000"
                        :step="0.01"
                        :precision="4"
                        style="width: 220px"
                        @change="onScaleParamsChange"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.dcaAddStepPct')">
                      <a-input-number
                        v-decorator="['dcaAddStepPct', { initialValue: 0 }]"
                        :min="0"
                        :max="1000"
                        :step="0.01"
                        :precision="4"
                        style="width: 220px"
                        @change="onScaleParamsChange"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.trendAddSizePct')">
                      <a-input-number
                        v-decorator="['trendAddSizePct', { initialValue: 0 }]"
                        :min="0"
                        :max="100"
                        :step="0.1"
                        :precision="4"
                        style="width: 220px"
                        @change="onScaleParamsChange"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.dcaAddSizePct')">
                      <a-input-number
                        v-decorator="['dcaAddSizePct', { initialValue: 0 }]"
                        :min="0"
                        :max="100"
                        :step="0.1"
                        :precision="4"
                        style="width: 220px"
                        @change="onScaleParamsChange"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.trendAddMaxTimes')">
                      <a-input-number
                        v-decorator="['trendAddMaxTimes', { initialValue: 0 }]"
                        :min="0"
                        :max="50"
                        :step="1"
                        :precision="0"
                        style="width: 220px"
                        @change="onScaleParamsChange"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.dcaAddMaxTimes')">
                      <a-input-number
                        v-decorator="['dcaAddMaxTimes', { initialValue: 0 }]"
                        :min="0"
                        :max="50"
                        :step="1"
                        :precision="0"
                        style="width: 220px"
                        @change="onScaleParamsChange"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-collapse-panel>

              <a-collapse-panel key="reduce" :header="$t('dashboard.indicator.backtest.panel.reduce')">
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.trendReduceEnabled')">
                      <a-switch v-decorator="['trendReduceEnabled', { valuePropName: 'checked', initialValue: false }]" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.adverseReduceEnabled')">
                      <a-switch v-decorator="['adverseReduceEnabled', { valuePropName: 'checked', initialValue: false }]" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.trendReduceStepPct')">
                      <a-input-number
                        v-decorator="['trendReduceStepPct', { initialValue: 0 }]"
                        :min="0"
                        :max="1000"
                        :step="0.01"
                        :precision="4"
                        style="width: 220px"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.adverseReduceStepPct')">
                      <a-input-number
                        v-decorator="['adverseReduceStepPct', { initialValue: 0 }]"
                        :min="0"
                        :max="1000"
                        :step="0.01"
                        :precision="4"
                        style="width: 220px"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.trendReduceSizePct')">
                      <a-input-number
                        v-decorator="['trendReduceSizePct', { initialValue: 0 }]"
                        :min="0"
                        :max="100"
                        :step="0.1"
                        :precision="4"
                        style="width: 220px"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.adverseReduceSizePct')">
                      <a-input-number
                        v-decorator="['adverseReduceSizePct', { initialValue: 0 }]"
                        :min="0"
                        :max="100"
                        :step="0.1"
                        :precision="4"
                        style="width: 220px"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.trendReduceMaxTimes')">
                      <a-input-number
                        v-decorator="['trendReduceMaxTimes', { initialValue: 0 }]"
                        :min="0"
                        :max="50"
                        :step="1"
                        :precision="0"
                        style="width: 100%" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.adverseReduceMaxTimes')">
                      <a-input-number
                        v-decorator="['adverseReduceMaxTimes', { initialValue: 0 }]"
                        :min="0"
                        :max="50"
                        :step="1"
                        :precision="0"
                        style="width: 100%" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-collapse-panel>

              <a-collapse-panel key="position" :header="$t('dashboard.indicator.backtest.panel.position')">
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item :label="$t('dashboard.indicator.backtest.field.entryPct')" :help="$t('dashboard.indicator.backtest.hint.entryPctMax', { maxPct: Number(entryPctMaxUi || 0).toFixed(0) })">
                      <a-input-number
                        v-decorator="['entryPct', { initialValue: 100 }]"
                        :min="0"
                        :max="entryPctMaxUi"
                        :step="0.1"
                        :precision="4"
                        style="width: 220px"
                        @change="onEntryPctChange"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12"></a-col>
                </a-row>
              </a-collapse-panel>
            </a-collapse>
          </div>

          <!-- Step 2: trading settings -->
          <div v-show="currentStep === 1">
            <a-alert
              type="info"
              show-icon
              style="margin-bottom: 12px;"
              :message="$t('dashboard.indicator.backtest.metaLine', { symbol: symbol || '-', market: market || '-', timeframe: timeframe || '-' })"
            />

            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item :label="$t('dashboard.indicator.backtest.startDate')">
                  <a-date-picker
                    v-decorator="['startDate', { rules: [{ required: true, message: $t('dashboard.indicator.backtest.startDateRequired') }], initialValue: defaultStartDate }]"
                    style="width: 100%"
                    :disabled-date="disabledStartDate"
                    :placeholder="$t('dashboard.indicator.backtest.selectStartDate')"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('dashboard.indicator.backtest.endDate')">
                  <a-date-picker
                    v-decorator="['endDate', { rules: [{ required: true, message: $t('dashboard.indicator.backtest.endDateRequired') }], initialValue: defaultEndDate }]"
                    style="width: 100%"
                    :disabled-date="disabledEndDate"
                    :placeholder="$t('dashboard.indicator.backtest.selectEndDate')"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item :label="$t('dashboard.indicator.backtest.initialCapital')">
                  <a-input-number
                    v-decorator="['initialCapital', { rules: [{ required: true, message: $t('dashboard.indicator.backtest.initialCapitalRequired') }], initialValue: 10000 }]"
                    :min="1000"
                    :step="10000"
                    :precision="2"
                    style="width: 100%"
                    :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                    :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('dashboard.indicator.backtest.commission')">
                  <a-input-number
                    v-decorator="['commission', { initialValue: 0.02 }]"
                    :min="0"
                    :max="10"
                    :step="0.01"
                    :precision="4"
                    style="width: 100%"
                  />
                  <div class="field-hint">{{ $t('dashboard.indicator.backtest.commissionHint') }}</div>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item :label="$t('dashboard.indicator.backtest.field.slippage')">
                  <a-input-number
                    v-decorator="['slippage', { initialValue: 0 }]"
                    :min="0"
                    :max="10"
                    :step="0.01"
                    :precision="4"
                    style="width: 100%"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('dashboard.indicator.backtest.leverage')">
                  <a-input-number
                    v-decorator="['leverage', { initialValue: 1 }]"
                    :min="1"
                    :max="125"
                    :step="1"
                    :precision="0"
                    style="width: 100%"
                    :formatter="value => `${value}x`"
                    :parser="value => value.replace('x', '')"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item :label="$t('dashboard.indicator.backtest.tradeDirection')">
                  <a-select
                    v-decorator="['tradeDirection', { initialValue: 'long' }]"
                    style="width: 100%"
                  >
                    <a-select-option value="long">
                      {{ $t('dashboard.indicator.backtest.longOnly') }}
                    </a-select-option>
                    <a-select-option value="short">
                      {{ $t('dashboard.indicator.backtest.shortOnly') }}
                    </a-select-option>
                    <a-select-option value="both">
                      {{ $t('dashboard.indicator.backtest.both') }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12"></a-col>
            </a-row>
          </div>
        </a-form>
      </div>

      <!-- 回测结果区域 -->
      <div v-show="currentStep === 2 && hasResult" class="result-section">
        <a-alert
          v-if="backtestRunId"
          type="success"
          show-icon
          style="margin-bottom: 12px;"
          :message="$t('dashboard.indicator.backtest.savedRunId', { id: backtestRunId })"
        />

        <!-- 关键指标卡片 -->
        <div class="metrics-cards">
          <div class="metric-card" :class="{ positive: result.totalReturn > 0, negative: result.totalReturn < 0 }">
            <div class="metric-label">{{ $t('dashboard.indicator.backtest.totalReturn') }}</div>
            <div class="metric-value">{{ formatPercent(result.totalReturn) }}</div>
            <div class="metric-amount">{{ formatMoney(result.totalProfit) }}</div>
          </div>
          <div class="metric-card" :class="{ positive: result.annualReturn > 0, negative: result.annualReturn < 0 }">
            <div class="metric-label">{{ $t('dashboard.indicator.backtest.annualReturn') }}</div>
            <div class="metric-value">{{ formatPercent(result.annualReturn) }}</div>
          </div>
          <div class="metric-card negative">
            <div class="metric-label">{{ $t('dashboard.indicator.backtest.maxDrawdown') }}</div>
            <div class="metric-value">{{ formatPercent(result.maxDrawdown) }}</div>
          </div>
          <div class="metric-card">
            <div class="metric-label">{{ $t('dashboard.indicator.backtest.sharpeRatio') }}</div>
            <div class="metric-value">{{ result.sharpeRatio.toFixed(2) }}</div>
          </div>
          <div class="metric-card">
            <div class="metric-label">{{ $t('dashboard.indicator.backtest.winRate') }}</div>
            <div class="metric-value">{{ formatPercent(result.winRate) }}</div>
          </div>
          <div class="metric-card" :class="{ positive: result.profitFactor >= 1.5, negative: result.profitFactor < 1 }">
            <div class="metric-label">{{ $t('dashboard.indicator.backtest.profitFactor') }}</div>
            <div class="metric-value">{{ result.profitFactor.toFixed(2) }}</div>
          </div>
          <div class="metric-card">
            <div class="metric-label">{{ $t('dashboard.indicator.backtest.totalTrades') }}</div>
            <div class="metric-value">{{ result.totalTrades }}</div>
          </div>
          <div class="metric-card negative">
            <div class="metric-label">{{ $t('dashboard.indicator.backtest.totalCommission') }}</div>
            <div class="metric-value">-${{ result.totalCommission ? result.totalCommission.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '0.00' }}</div>
          </div>
        </div>

        <!-- 收益曲线图表 -->
        <div class="chart-section">
          <div class="chart-title">{{ $t('dashboard.indicator.backtest.equityCurve') }}</div>
          <div ref="equityChartRef" class="equity-chart"></div>
        </div>

        <!-- 交易记录表格 -->
        <div class="trades-section">
          <div class="chart-title">{{ $t('dashboard.indicator.backtest.tradeHistory') }}</div>
          <a-table
            :columns="tradeColumns"
            :data-source="result.trades"
            :pagination="{ pageSize: 5, size: 'small' }"
            size="small"
            :scroll="{ x: 600 }"
          >
            <template slot="type" slot-scope="text">
              <a-tag :color="getTradeTypeColor(text)">
                {{ getTradeTypeText(text) }}
              </a-tag>
            </template>
            <template slot="balance" slot-scope="text">
              <span style="color: #1890ff; font-weight: 500;">
                ${{ text ? text.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '--' }}
              </span>
            </template>
            <template slot="profit" slot-scope="text">
              <span :style="{ color: text > 0 ? '#52c41a' : text < 0 ? '#f5222d' : '#666' }">
                {{ formatMoney(text) }}
              </span>
            </template>
          </a-table>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-overlay">
        <a-spin size="large">
          <a-icon slot="indicator" type="loading" style="font-size: 32px; color: #1890ff" spin />
        </a-spin>
        <div class="loading-text">{{ $t('dashboard.indicator.backtest.running') }}</div>
      </div>
    </div>

    <template slot="footer">
      <div style="display:flex; justify-content: space-between; align-items:center; width: 100%;">
        <div>
          <a-button v-if="currentStep > 0" :disabled="loading" @click="handlePrev">{{ $t('dashboard.indicator.backtest.prev') }}</a-button>
        </div>
        <div>
          <a-button :disabled="loading" @click="handleCancel">{{ $t('dashboard.indicator.backtest.close') }}</a-button>
          <a-button
            v-if="currentStep < 1"
            type="primary"
            style="margin-left: 8px;"
            :disabled="loading"
            @click="handleNext"
          >{{ $t('dashboard.indicator.backtest.next') }}</a-button>
          <a-button
            v-else-if="currentStep === 1"
            type="primary"
            style="margin-left: 8px;"
            :loading="loading"
            @click="handleRunBacktest"
          >{{ $t('dashboard.indicator.backtest.run') }}</a-button>
          <a-button
            v-else
            type="primary"
            style="margin-left: 8px;"
            :disabled="loading"
            @click="handleRerun"
          >{{ $t('dashboard.indicator.backtest.rerun') }}</a-button>
        </div>
      </div>
    </template>
  </a-modal>
</template>

<script>
import moment from 'moment'
import * as echarts from 'echarts'
import request from '@/utils/request'

export default {
  name: 'BacktestModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    userId: {
      type: [Number, String],
      default: 1
    },
    indicator: {
      type: Object,
      default: null
    },
    symbol: {
      type: String,
      default: ''
    },
    market: {
      type: String,
      default: ''
    },
    timeframe: {
      type: String,
      default: '1D'
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      loading: false,
      currentStep: 0,
      hasResult: false,
      backtestRunId: null,
      step1CollapseKeys: ['risk'],
      // Step1 UI state (Ant Form getFieldValue is not reactive)
      trailingEnabledUi: false,
      entryPctMaxUi: 100,
      result: {
        totalReturn: 0,
        annualReturn: 0,
        maxDrawdown: 0,
        sharpeRatio: 0,
        winRate: 0,
        profitFactor: 0,
        totalTrades: 0,
        totalProfit: 0,
        totalCommission: 0,
        trades: [],
        equityCurve: []
      },
      equityChart: null,
      tradeColumns: []
    }
  },
  computed: {
    // 根据周期计算最大回测时间范围
    maxBacktestRange () {
      // 1分钟线：最多1个月
      if (this.timeframe === '1m') {
        return { months: 1, label: '1个月' }
      }
      // 5分钟线：最多6个月
      if (this.timeframe === '5m') {
        return { months: 6, label: '6个月' }
      }
      // 15分钟和30分钟：最多1年
      if (['15m', '30m'].includes(this.timeframe)) {
        return { years: 1, label: '1年' }
      }
      // 1小时及以上：最多3年
      return { years: 3, label: '3年' }
    },
    defaultStartDate () {
      // 默认开始日期：根据周期限制
      if (this.maxBacktestRange.months) {
        return moment().subtract(this.maxBacktestRange.months, 'months')
      }
      return moment().subtract(1, 'years') // 默认1年
    },
    defaultEndDate () {
      // 默认结束日期：今天
      return moment()
    },
    // 最早可选日期
    earliestDate () {
      if (this.maxBacktestRange.months) {
        return moment().subtract(this.maxBacktestRange.months, 'months')
      }
      return moment().subtract(this.maxBacktestRange.years, 'years')
    },
    labelCol () {
      // Wider label area in Step 1 to avoid overlap with inputs
      if (this.currentStep === 0) return { span: 9 }
      return { span: 6 }
    },
    wrapperCol () {
      if (this.currentStep === 0) return { span: 15 }
      return { span: 18 }
    }
    // entryPctMaxUi is in data (percent units)
  },
  watch: {
    visible (val) {
      if (val) {
        // 弹窗打开时重置状态
        this.currentStep = 0
        this.hasResult = false
        this.backtestRunId = null
        this.step1CollapseKeys = ['risk']
        this.trailingEnabledUi = false
        this.entryPctMaxUi = 100
        this.result = {
          totalReturn: 0,
          annualReturn: 0,
          maxDrawdown: 0,
          sharpeRatio: 0,
          winRate: 0,
          profitFactor: 0,
          totalTrades: 0,
          totalProfit: 0,
          totalCommission: 0,
          trades: [],
          equityCurve: []
        }
        this.$nextTick(() => {
          if (this.form) {
            this.form.resetFields()
            // Sync non-reactive form values into UI state
            this.trailingEnabledUi = !!this.form.getFieldValue('trailingEnabled')
            this.recalcEntryPctMaxUi()
          }
        })
      } else {
        // 弹窗关闭时销毁图表
        if (this.equityChart) {
          this.equityChart.dispose()
          this.equityChart = null
        }
      }
    }
  },
  created () {
    // 初始化表格列（需要在created中初始化才能使用$t）
    this.tradeColumns = [
      {
        title: this.$t('dashboard.indicator.backtest.tradeTime'),
        dataIndex: 'time',
        key: 'time',
        width: 160
      },
      {
        title: this.$t('dashboard.indicator.backtest.tradeType'),
        dataIndex: 'type',
        key: 'type',
        width: 120,
        scopedSlots: { customRender: 'type' }
      },
      {
        title: this.$t('dashboard.indicator.backtest.price'),
        dataIndex: 'price',
        key: 'price',
        width: 110
      },
      {
        title: this.$t('dashboard.indicator.backtest.amount'),
        dataIndex: 'amount',
        key: 'amount',
        width: 100,
        customRender: (text) => {
          return text ? text.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 4 }) : '--'
        }
      },
      {
        title: this.$t('dashboard.indicator.backtest.profit'),
        dataIndex: 'profit',
        key: 'profit',
        width: 110,
        scopedSlots: { customRender: 'profit' }
      },
      {
        title: this.$t('dashboard.indicator.backtest.balance'),
        dataIndex: 'balance',
        key: 'balance',
        width: 130,
        scopedSlots: { customRender: 'balance' }
      }
    ]
  },
  methods: {
    // --- Step 1 UX helpers ---
    recalcEntryPctMaxUi () {
      if (!this.form) {
        this.entryPctMaxUi = 100
        return
      }
      const trendOn = !!this.form.getFieldValue('trendAddEnabled')
      const dcaOn = !!this.form.getFieldValue('dcaAddEnabled')
      const trendTimes = Number(this.form.getFieldValue('trendAddMaxTimes') || 0)
      const dcaTimes = Number(this.form.getFieldValue('dcaAddMaxTimes') || 0)
      const trendSizePct = Number(this.form.getFieldValue('trendAddSizePct') || 0) // percent
      const dcaSizePct = Number(this.form.getFieldValue('dcaAddSizePct') || 0) // percent

      const reservePct = (trendOn ? trendTimes * trendSizePct : 0) + (dcaOn ? dcaTimes * dcaSizePct : 0)
      const maxEntryPct = Math.max(0, Math.min(100, 100 - reservePct))
      this.entryPctMaxUi = maxEntryPct
    },
    normalizeEntryPct () {
      if (!this.form) return
      const current = Number(this.form.getFieldValue('entryPct') || 0)
      const max = Number(this.entryPctMaxUi || 100)
      if (current > max) {
        this.form.setFieldsValue({ entryPct: max })
      }
    },
    onTrendAddToggle (checked) {
      if (!this.form) return
      // Mutual exclusion to avoid double scale-in on the same candle.
      if (checked) {
        this.form.setFieldsValue({ dcaAddEnabled: false })
      }
      this.$nextTick(() => {
        this.recalcEntryPctMaxUi()
        this.normalizeEntryPct()
      })
    },
    onDcaAddToggle (checked) {
      if (!this.form) return
      if (checked) {
        this.form.setFieldsValue({ trendAddEnabled: false })
      }
      this.$nextTick(() => {
        this.recalcEntryPctMaxUi()
        this.normalizeEntryPct()
      })
    },
    onScaleParamsChange () {
      this.$nextTick(() => {
        this.recalcEntryPctMaxUi()
        this.normalizeEntryPct()
      })
    },
    onEntryPctChange () {
      this.$nextTick(() => this.normalizeEntryPct())
    },
    onTrailingToggle (checked) {
      if (!this.form) return
      this.trailingEnabledUi = !!checked
      // Only show fields when enabled; also clear values when disabled.
      if (!checked) {
        this.form.setFieldsValue({ trailingStopPct: 0, trailingActivationPct: 0 })
      }
    },
    // 获取交易类型颜色
    getTradeTypeColor (type) {
      const colorMap = {
        // 旧格式
        'buy': 'green',
        'sell': 'red',
        'liquidation': 'orange',
        // 新格式 - 做多
        'open_long': 'green',
        'add_long': 'cyan',
        'close_long': 'orange',
        'close_long_stop': 'red',
        'close_long_profit': 'lime',
        'close_long_trailing': 'gold',
        'reduce_long': 'volcano',
        // 新格式 - 做空
        'open_short': 'red',
        'add_short': 'magenta',
        'close_short': 'blue',
        'close_short_stop': 'red',
        'close_short_profit': 'cyan',
        'close_short_trailing': 'gold',
        'reduce_short': 'volcano'
      }
      return colorMap[type] || 'default'
    },
    // 获取交易类型文本
    getTradeTypeText (type) {
      const textMap = {
        // 旧格式
        'buy': this.$t('dashboard.indicator.backtest.buy'),
        'sell': this.$t('dashboard.indicator.backtest.sell'),
        'liquidation': this.$t('dashboard.indicator.backtest.liquidation'),
        // 新格式 - 做多
        'open_long': this.$t('dashboard.indicator.backtest.openLong'),
        'add_long': this.$t('dashboard.indicator.backtest.addLong'),
        'close_long': this.$t('dashboard.indicator.backtest.closeLong'),
        'close_long_stop': this.$t('dashboard.indicator.backtest.closeLongStop'),
        'close_long_profit': this.$t('dashboard.indicator.backtest.closeLongProfit'),
        'close_long_trailing': this.$t('dashboard.indicator.backtest.closeLongTrailing'),
        'reduce_long': this.$t('dashboard.indicator.backtest.reduceLong'),
        // 新格式 - 做空
        'open_short': this.$t('dashboard.indicator.backtest.openShort'),
        'add_short': this.$t('dashboard.indicator.backtest.addShort'),
        'close_short': this.$t('dashboard.indicator.backtest.closeShort'),
        'close_short_stop': this.$t('dashboard.indicator.backtest.closeShortStop'),
        'close_short_profit': this.$t('dashboard.indicator.backtest.closeShortProfit'),
        'close_short_trailing': this.$t('dashboard.indicator.backtest.closeShortTrailing'),
        'reduce_short': this.$t('dashboard.indicator.backtest.reduceShort')
      }
      return textMap[type] || type
    },
    disabledStartDate (current) {
      if (!current) return false
      // 不能选择今天之后的日期
      if (current > moment().endOf('day')) return true
      // 不能选择最早日期之前的日期
      if (current < this.earliestDate.startOf('day')) return true
      return false
    },
    disabledEndDate (current) {
      if (!current) return false
      // 不能选择今天之后的日期
      if (current > moment().endOf('day')) return true
      // 不能选择最早日期之前的日期
      if (current < this.earliestDate.startOf('day')) return true

      // 如果已选择开始日期，限制结束日期不能超过开始日期+最大回测范围
      const startDate = this.form.getFieldValue('startDate')
      if (startDate) {
        const maxDays = this.maxBacktestRange.months
          ? Math.floor(this.maxBacktestRange.months * 30.44)
          : (this.maxBacktestRange.years * 365)
        const maxEndDate = moment(startDate).add(maxDays, 'days')
        if (current > maxEndDate.endOf('day')) return true
      }

      return false
    },
    // 验证日期范围
    validateDateRange (startDate, endDate) {
      if (!startDate || !endDate) return true
      const diffDays = endDate.diff(startDate, 'days')
      let maxDays = 0
      if (this.maxBacktestRange.months) {
        // 对于月份限制，使用实际月份天数（约30.44天/月）
        maxDays = Math.floor(this.maxBacktestRange.months * 30.44)
      } else if (this.maxBacktestRange.years) {
        maxDays = this.maxBacktestRange.years * 365
      }
      if (diffDays > maxDays) {
        this.$message.error(this.$t('dashboard.indicator.backtest.dateRangeExceededDays', {
          timeframe: this.timeframe,
          maxRange: this.maxBacktestRange.label,
          maxDays
        }))
        return false
      }
      return true
    },
    formatPercent (value) {
      if (value === null || value === undefined) return '--'
      // 后端返回的已经是百分比数值（如59.34表示59.34%），不需要再乘100
      const sign = value >= 0 ? '+' : ''
      return `${sign}${value.toFixed(2)}%`
    },
    formatMoney (value) {
      if (value === null || value === undefined) return '--'
      // 正数显示+，负数显示-
      const sign = value >= 0 ? '+' : '-'
      return `${sign}$${Math.abs(value).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
    },
    handleCancel () {
      this.$emit('cancel')
    },
    handlePrev () {
      if (this.loading) return
      if (this.currentStep > 0) this.currentStep -= 1
    },
    handleNext () {
      if (this.loading) return
      if (this.currentStep === 0) {
        // Step 1 has no required fields; proceed directly.
        this.currentStep = 1
        return
      }
      if (this.currentStep === 1) {
        // Normally Step 2 uses Run button; keep this for completeness.
        this.handleRunBacktest()
      }
    },
    handleRerun () {
      if (this.loading) return
      // Go back to Step 2 so user can adjust settings then run again.
      this.currentStep = 1
      this.hasResult = false
      this.backtestRunId = null
    },
    async handleRunBacktest () {
      // Only validate Step 2 fields (dates/capital/fees/etc.)
      const step2Fields = ['startDate', 'endDate', 'initialCapital', 'commission', 'leverage', 'tradeDirection', 'slippage']
      this.form.validateFields(step2Fields, async (err, values) => {
        if (err) return

        // IMPORTANT:
        // validateFields(step2Fields) only returns those fields' values.
        // Strategy/risk params are in Step 1, so we must also read all form values,
        // otherwise stopLoss/takeProfit/trailing configs will be missing (defaulting to 0).
        const allValues = { ...(this.form.getFieldsValue() || {}), ...(values || {}) }

        if (!this.indicator || !this.indicator.id) {
          this.$message.error(this.$t('dashboard.indicator.backtest.noIndicatorCode'))
          return
        }

        if (!this.symbol) {
          this.$message.error(this.$t('dashboard.indicator.backtest.noSymbol'))
          return
        }

        // Validate date range
        if (!this.validateDateRange(values.startDate, values.endDate)) {
          return
        }

        this.loading = true
        this.hasResult = false

        try {
          const pct = (v) => Number(v || 0) / 100
          const strategyConfig = {
            risk: {
              stopLossPct: pct(allValues.stopLossPct),
              takeProfitPct: pct(allValues.takeProfitPct),
              trailing: {
                enabled: !!allValues.trailingEnabled,
                pct: pct(allValues.trailingStopPct),
                activationPct: pct(allValues.trailingActivationPct)
              }
            },
            position: {
              entryPct: pct(allValues.entryPct || 0)
            },
            scale: {
              trendAdd: {
                enabled: !!allValues.trendAddEnabled,
                stepPct: pct(allValues.trendAddStepPct),
                sizePct: pct(allValues.trendAddSizePct),
                maxTimes: allValues.trendAddMaxTimes || 0
              },
              dcaAdd: {
                enabled: !!allValues.dcaAddEnabled,
                stepPct: pct(allValues.dcaAddStepPct),
                sizePct: pct(allValues.dcaAddSizePct),
                maxTimes: allValues.dcaAddMaxTimes || 0
              },
              trendReduce: {
                enabled: !!allValues.trendReduceEnabled,
                stepPct: pct(allValues.trendReduceStepPct),
                sizePct: pct(allValues.trendReduceSizePct),
                maxTimes: allValues.trendReduceMaxTimes || 0
              },
              adverseReduce: {
                enabled: !!allValues.adverseReduceEnabled,
                stepPct: pct(allValues.adverseReduceStepPct),
                sizePct: pct(allValues.adverseReduceSizePct),
                maxTimes: allValues.adverseReduceMaxTimes || 0
              }
            }
          }

          const requestData = {
            userid: this.userId || 1,
            indicatorId: this.indicator.id,
            symbol: this.symbol,
            market: this.market,
            timeframe: this.timeframe,
            startDate: values.startDate.format('YYYY-MM-DD'),
              endDate: values.endDate.format('YYYY-MM-DD'),
              initialCapital: values.initialCapital,
              commission: pct(values.commission || 0),
              slippage: pct(values.slippage || 0),
              leverage: values.leverage || 1,
              tradeDirection: values.tradeDirection || 'long',
              strategyConfig
            }

          const response = await request({
            url: '/api/indicator/backtest',
            method: 'post',
            data: requestData
          })

          if (response.code === 1 && response.data) {
            // Backward compatible: data can be { runId, result } or raw result
            if (response.data.runId) {
              this.backtestRunId = response.data.runId
            }
            this.result = response.data.result || response.data
            this.hasResult = true
            this.currentStep = 2
            this.$nextTick(() => {
              this.renderEquityChart()
            })
            this.$message.success(this.$t('dashboard.indicator.backtest.success'))
          } else {
            this.$message.error(response.msg || this.$t('dashboard.indicator.backtest.failed'))
          }
        } catch (error) {
          this.$message.error(this.$t('dashboard.indicator.backtest.failed'))
        } finally {
          this.loading = false
        }
      })
    },
    renderEquityChart () {
      if (!this.$refs.equityChartRef) return

      if (this.equityChart) {
        this.equityChart.dispose()
      }

      this.equityChart = echarts.init(this.$refs.equityChartRef)

      const data = this.result.equityCurve || []
      // 后端返回格式：{ time: "2025-06-01 00:00", value: 100000 }
      // 前端需要：dates, equity (value字段), benchmark (可选)
      const dates = data.map(item => item.time || item.date)
      const equity = data.map(item => item.value !== undefined ? item.value : item.equity)

      // 计算收益是正还是负，用于渐变颜色
      const initialValue = equity[0] || 100000
      const finalValue = equity[equity.length - 1] || initialValue
      const isPositive = finalValue >= initialValue
      const mainColor = isPositive ? '#52c41a' : '#f5222d'
      const gradientColor = isPositive
        ? [{ offset: 0, color: 'rgba(82, 196, 26, 0.35)' }, { offset: 1, color: 'rgba(82, 196, 26, 0.02)' }]
        : [{ offset: 0, color: 'rgba(245, 34, 45, 0.35)' }, { offset: 1, color: 'rgba(245, 34, 45, 0.02)' }]

      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.96)',
          borderColor: '#e8e8e8',
          borderWidth: 1,
          textStyle: {
            color: '#333'
          },
          formatter: (params) => {
            let result = `<div style="font-weight: 600; margin-bottom: 8px; color: #262626;">${params[0].axisValue}</div>`
            params.forEach(param => {
              if (param.value !== undefined && param.value !== null) {
                const value = param.value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                result += `<div style="display: flex; justify-content: space-between; gap: 24px; margin: 4px 0;">
                  <span>${param.marker} ${param.seriesName}</span>
                  <span style="font-weight: 600; color: ${mainColor};">$${value}</span>
                </div>`
              }
            })
            return result
          }
        },
        legend: {
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '12%',
          top: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: dates,
          boundaryGap: false,
          axisLine: {
            lineStyle: { color: '#e8e8e8' }
          },
          axisTick: { show: false },
          axisLabel: {
            color: '#8c8c8c',
            fontSize: 11,
            rotate: 0,
            interval: Math.floor(dates.length / 6) // 自动间隔显示
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: { color: '#f5f5f5', type: 'dashed' }
          },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: '#8c8c8c',
            fontSize: 11,
            formatter: (value) => {
              if (value >= 1000000) {
                return (value / 1000000).toFixed(1) + 'M'
              } else if (value >= 1000) {
                return (value / 1000).toFixed(0) + 'K'
              }
              return value
            }
          }
        },
        series: [
          {
            name: this.$t('dashboard.indicator.backtest.strategy'),
            type: 'line',
            data: equity,
            smooth: 0.4, // 平滑系数，0-1之间，值越大越平滑
            symbol: 'none', // 不显示数据点
            sampling: 'lttb', // 使用 LTTB 算法降采样，保持曲线形状
            lineStyle: {
              width: 2.5,
              color: mainColor,
              cap: 'round',
              join: 'round'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, gradientColor)
            },
            emphasis: {
              lineStyle: { width: 3 }
            }
          }
        ],
        animation: true,
        animationDuration: 800,
        animationEasing: 'cubicOut'
      }

      this.equityChart.setOption(option)

      // 响应式调整
      window.addEventListener('resize', () => {
        if (this.equityChart) {
          this.equityChart.resize()
        }
      })
    }
  },
  beforeDestroy () {
    if (this.equityChart) {
      this.equityChart.dispose()
      this.equityChart = null
    }
  }
}
</script>

<style lang="less" scoped>
/* Allow long labels to wrap instead of being visually covered by inputs */
:deep(.ant-form-item-label) {
  white-space: normal;
  line-height: 1.2;
}

:deep(.ant-form-item-label > label) {
  white-space: normal;
}

:deep(.ant-form-item-control) {
  min-width: 0;
}
.backtest-modal {
  :deep(.ant-modal-body) {
    padding: 16px;
    max-height: 70vh;
    overflow-y: auto;
  }
}

.backtest-content {
  position: relative;
}

.field-hint {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #8c8c8c;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 8px;

  .anticon {
    color: #1890ff;
  }
}

.config-section {
  margin-bottom: 24px;
}

.result-section {
  margin-top: 24px;
}

.metrics-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;

  @media (max-width: 1200px) {
    grid-template-columns: repeat(4, 1fr);
  }

  @media (max-width: 992px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (max-width: 576px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.metric-card {
  background: #fafafa;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  &.positive {
    background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
    .metric-value {
      color: #52c41a;
    }
  }

  &.negative {
    background: linear-gradient(135deg, #fff2f0 0%, #ffccc7 100%);
    .metric-value {
      color: #f5222d;
    }
  }

  .metric-label {
    font-size: 12px;
    color: #8c8c8c;
    margin-bottom: 8px;
  }

  .metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #262626;
  }

  .metric-amount {
    font-size: 12px;
    color: #8c8c8c;
    margin-top: 4px;
  }
}

.chart-section {
  margin-bottom: 24px;
}

.chart-title {
  font-size: 14px;
  font-weight: 600;
  color: #595959;
  margin-bottom: 12px;
}

.equity-chart {
  width: 100%;
  height: 300px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.trades-section {
  margin-top: 24px;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 8px;

  .loading-text {
    margin-top: 16px;
    font-size: 14px;
    color: #1890ff;
  }
}
</style>
