<template>
  <div class="strategy-page">
    <div class="strategy-header">
      <div class="header-left">
        <div class="data-title">🤖 AI策略中心</div>
        <p class="header-desc">基于数据分析，AI自动发现并优化营销策略</p>
      </div>
      <div style="display: flex; gap: 8px;">
        <button class="btn btn-secondary" @click="showHistoryModal = true">
          <i class="fas fa-history"></i> 策略历史
        </button>
        <button class="btn btn-secondary" @click="exportReport">
          <i class="fas fa-download"></i> 导出报告
        </button>
        <button class="btn btn-primary" @click="refreshStrategies" :disabled="isRefreshing">
          <i class="fas fa-sync" :class="{ 'fa-spin': isRefreshing }"></i> 
          {{ isRefreshing ? '分析中...' : '刷新策略' }}
        </button>
      </div>
    </div>

    <!-- Stats -->
    <div class="stats-row">
      <div class="stat-card-lg" @click="filterStrategies('all')">
        <div class="stat-icon-lg blue"><i class="fas fa-lightbulb"></i></div>
        <div class="stat-content-lg">
          <h3>{{ strategyStats.active }}</h3>
          <p>活跃策略</p>
        </div>
      </div>
      <div class="stat-card-lg" @click="filterStrategies('applied')">
        <div class="stat-icon-lg green"><i class="fas fa-check-circle"></i></div>
        <div class="stat-content-lg">
          <h3>{{ strategyStats.applied }}</h3>
          <p>已应用</p>
        </div>
      </div>
      <div class="stat-card-lg" @click="filterStrategies('pending')">
        <div class="stat-icon-lg orange"><i class="fas fa-clock"></i></div>
        <div class="stat-content-lg">
          <h3>{{ strategyStats.pending }}</h3>
          <p>待审核</p>
        </div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg purple"><i class="fas fa-chart-line"></i></div>
        <div class="stat-content-lg">
          <h3>{{ avgImprovement }}%</h3>
          <p>平均提升</p>
        </div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
          <i class="fas fa-coins"></i>
        </div>
        <div class="stat-content-lg">
          <h3>¥{{ formatNumber(totalRevenueImpact) }}</h3>
          <p>预计增收</p>
        </div>
      </div>
    </div>

    <!-- Tabs & Search -->
    <div class="tabs-row">
      <div class="tabs">
        <div v-for="tab in tabs" :key="tab.key" 
             class="tab-item"
             :class="{ active: filterTab === tab.key }"
             @click="filterTab = tab.key">
          {{ tab.label }}
          <span class="tab-count">{{ tab.count }}</span>
        </div>
      </div>
      <div class="search-filter">
        <div class="search-box-small">
          <i class="fas fa-search"></i>
          <input type="text" v-model="searchQuery" placeholder="搜索策略...">
        </div>
        <select class="filter-select" v-model="sortBy">
          <option value="confidence">按置信度</option>
          <option value="improvement">按效果</option>
          <option value="date">按时间</option>
        </select>
      </div>
    </div>

    <!-- Strategy Cards -->
    <div class="strategy-grid">
      <div v-for="strategy in filteredStrategies" :key="strategy.id" 
           class="strategy-card"
           :class="{ applied: strategy.status === 'applied' }"
           @click="showStrategyDetail(strategy)">
        <!-- Header -->
        <div class="card-header">
          <div class="card-icon" :style="{ background: strategy.iconBg, color: strategy.iconColor }">
            <i :class="strategy.icon"></i>
          </div>
          <div class="card-badges">
            <span class="badge" :class="strategy.status">{{ strategy.status === 'applied' ? '已应用' : '待审核' }}</span>
            <span class="badge confidence" :class="{ high: strategy.confidence >= 85 }">
              {{ strategy.confidence }}% 置信
            </span>
          </div>
        </div>

        <!-- Content -->
        <div class="card-title">{{ strategy.title }}</div>
        <div class="card-desc">{{ strategy.description }}</div>

        <!-- Category Tags -->
        <div class="card-tags">
          <span v-for="tag in strategy.tags" :key="tag" class="tag">{{ tag }}</span>
        </div>

        <!-- Metrics -->
        <div class="card-metrics">
          <div class="metric">
            <span class="metric-label">数据来源</span>
            <span class="metric-value">{{ strategy.dataSource }}</span>
          </div>
          <div class="metric">
            <span class="metric-label">效果提升</span>
            <span class="metric-value highlight">{{ strategy.improvement }}</span>
          </div>
        </div>

        <!-- Progress Bar (for applied strategies) -->
        <div v-if="strategy.status === 'applied'" class="card-progress">
          <div class="progress-header">
            <span>应用效果</span>
            <span>{{ strategy.effectProgress }}%</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: strategy.effectProgress + '%' }"></div>
          </div>
        </div>

        <!-- Actions -->
        <div class="card-actions" @click.stop>
          <button v-if="strategy.status === 'pending'" 
                  class="btn btn-primary btn-sm" 
                  @click="applyStrategy(strategy)">
            <i class="fas fa-play"></i> 应用策略
          </button>
          <button v-else class="btn btn-success btn-sm" disabled>
            <i class="fas fa-check"></i> 已应用
          </button>
          <button class="btn btn-secondary btn-sm" @click="showStrategyDetail(strategy)">
            <i class="fas fa-chart-bar"></i>
          </button>
          <button class="btn btn-secondary btn-sm" @click="toggleFavorite(strategy)">
            <i :class="strategy.favorite ? 'fas fa-star' : 'far fa-star'" 
               :style="{ color: strategy.favorite ? 'var(--warning)' : 'inherit' }"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- Strategy Detail Modal -->
    <div v-if="showDetailModal" class="modal-overlay" @click.self="showDetailModal = false">
      <div class="modal strategy-detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <div class="title-icon" :style="{ background: selectedStrategy?.iconBg, color: selectedStrategy?.iconColor }">
              <i :class="selectedStrategy?.icon"></i>
            </div>
            <div>
              <h3>{{ selectedStrategy?.title }}</h3>
              <p>{{ selectedStrategy?.category }}</p>
            </div>
          </div>
          <button class="modal-close" @click="showDetailModal = false">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body" v-if="selectedStrategy">
          <!-- Overview -->
          <div class="detail-section">
            <h4><i class="fas fa-info-circle"></i> 策略概述</h4>
            <p>{{ selectedStrategy.description }}</p>
            <div class="detail-tags">
              <span v-for="tag in selectedStrategy.tags" :key="tag" class="tag">{{ tag }}</span>
            </div>
          </div>

          <!-- Data Analysis -->
          <div class="detail-section">
            <h4><i class="fas fa-chart-bar"></i> 数据分析</h4>
            <div class="analysis-grid">
              <div class="analysis-item">
                <div class="analysis-value">{{ selectedStrategy.dataSource }}</div>
                <div class="analysis-label">样本数据</div>
              </div>
              <div class="analysis-item">
                <div class="analysis-value highlight">{{ selectedStrategy.confidence }}%</div>
                <div class="analysis-label">置信度</div>
              </div>
              <div class="analysis-item">
                <div class="analysis-value success">{{ selectedStrategy.improvement }}</div>
                <div class="analysis-label">预期提升</div>
              </div>
              <div class="analysis-item">
                <div class="analysis-value">{{ selectedStrategy.timeToImplement }}</div>
                <div class="analysis-label">实施时间</div>
              </div>
            </div>
          </div>

          <!-- Implementation Steps -->
          <div class="detail-section">
            <h4><i class="fas fa-tasks"></i> 实施步骤</h4>
            <div class="steps-list">
              <div v-for="(step, index) in selectedStrategy.implementationSteps" :key="index" 
                   class="step-item"
                   :class="{ completed: selectedStrategy.status === 'applied' && index < 2 }">
                <div class="step-number">{{ index + 1 }}</div>
                <div class="step-content">
                  <div class="step-title">{{ step.title }}</div>
                  <div class="step-desc">{{ step.description }}</div>
                </div>
                <i v-if="selectedStrategy.status === 'applied' && index < 2" 
                   class="fas fa-check-circle step-check"></i>
              </div>
            </div>
          </div>

          <!-- Expected Impact -->
          <div class="detail-section">
            <h4><i class="fas fa-coins"></i> 预期影响</h4>
            <div class="impact-cards">
              <div class="impact-card">
                <i class="fas fa-envelope-open-text"></i>
                <div class="impact-value">{{ selectedStrategy.impact.opens }}</div>
                <div class="impact-label">邮件打开率提升</div>
              </div>
              <div class="impact-card">
                <i class="fas fa-reply"></i>
                <div class="impact-value">{{ selectedStrategy.impact.replies }}</div>
                <div class="impact-label">回复率提升</div>
              </div>
              <div class="impact-card">
                <i class="fas fa-handshake"></i>
                <div class="impact-value">{{ selectedStrategy.impact.conversions }}</div>
                <div class="impact-label">转化率提升</div>
              </div>
              <div class="impact-card highlight">
                <i class="fas fa-dollar-sign"></i>
                <div class="impact-value">{{ selectedStrategy.impact.revenue }}</div>
                <div class="impact-label">预计增收</div>
              </div>
            </div>
          </div>

          <!-- A/B Test Results -->
          <div v-if="selectedStrategy.abTestResults" class="detail-section">
            <h4><i class="fas fa-flask"></i> A/B 测试结果</h4>
            <div class="ab-test-results">
              <div class="ab-group control">
                <div class="group-label">对照组</div>
                <div class="group-value">{{ selectedStrategy.abTestResults.control }}%</div>
                <div class="group-metric">打开率</div>
              </div>
              <div class="vs-divider">VS</div>
              <div class="ab-group test">
                <div class="group-label">测试组</div>
                <div class="group-value">{{ selectedStrategy.abTestResults.test }}%</div>
                <div class="group-metric">打开率</div>
                <div class="group-improvement">+{{ selectedStrategy.abTestResults.test - selectedStrategy.abTestResults.control }}%</div>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showDetailModal = false">关闭</button>
          <button v-if="selectedStrategy?.status === 'pending'" 
                  class="btn btn-primary" 
                  @click="applyStrategy(selectedStrategy)">
            <i class="fas fa-play"></i> 应用此策略
          </button>
          <button v-else class="btn btn-success" disabled>
            <i class="fas fa-check"></i> 已应用
          </button>
        </div>
      </div>
    </div>

    <!-- History Modal -->
    <div v-if="showHistoryModal" class="modal-overlay" @click.self="showHistoryModal = false">
      <div class="modal history-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-history"></i> 策略历史记录</div>
          <button class="modal-close" @click="showHistoryModal = false">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <!-- 筛选和搜索 -->
          <div class="history-filters">
            <div class="search-box-small">
              <i class="fas fa-search"></i>
              <input type="text" v-model="historySearch" placeholder="搜索策略历史...">
            </div>
            <div class="filter-group">
              <select class="filter-select-sm" v-model="historyFilter.type">
                <option value="">全部类型</option>
                <option value="apply">应用策略</option>
                <option value="optimize">策略优化</option>
                <option value="discover">新策略发现</option>
                <option value="result">效果报告</option>
              </select>
              <select class="filter-select-sm" v-model="historyFilter.dateRange">
                <option value="">全部时间</option>
                <option value="today">今天</option>
                <option value="week">本周</option>
                <option value="month">本月</option>
              </select>
            </div>
          </div>

          <!-- 统计概览 -->
          <div class="history-stats">
            <div class="history-stat-item">
              <div class="stat-icon apply"><i class="fas fa-check-circle"></i></div>
              <div class="stat-content">
                <div class="stat-value">{{ appliedStrategyCount }}</div>
                <div class="stat-label">已应用</div>
              </div>
            </div>
            <div class="history-stat-item">
              <div class="stat-icon discover"><i class="fas fa-lightbulb"></i></div>
              <div class="stat-content">
                <div class="stat-value">{{ discoveredStrategyCount }}</div>
                <div class="stat-label">新发现</div>
              </div>
            </div>
            <div class="history-stat-item">
              <div class="stat-icon optimize"><i class="fas fa-sync"></i></div>
              <div class="stat-content">
                <div class="stat-value">{{ optimizedStrategyCount }}</div>
                <div class="stat-label">已优化</div>
              </div>
            </div>
            <div class="history-stat-item highlight">
              <div class="stat-icon result"><i class="fas fa-chart-line"></i></div>
              <div class="stat-content">
                <div class="stat-value">{{ totalImprovementFromHistory }}%</div>
                <div class="stat-label">总提升</div>
              </div>
            </div>
          </div>

          <!-- 时间线标签页 -->
          <div class="history-tabs">
            <span class="history-tab" :class="{ active: historyViewMode === 'timeline' }" @click="historyViewMode = 'timeline'">
              <i class="fas fa-stream"></i> 时间线
            </span>
            <span class="history-tab" :class="{ active: historyViewMode === 'list' }" @click="historyViewMode = 'list'">
              <i class="fas fa-list"></i> 列表
            </span>
            <span class="history-tab" :class="{ active: historyViewMode === 'stats' }" @click="historyViewMode = 'stats'">
              <i class="fas fa-chart-pie"></i> 统计
            </span>
          </div>

          <!-- 时间线视图 -->
          <div v-if="historyViewMode === 'timeline'" class="history-timeline-enhanced">
            <div v-for="(item, index) in filteredHistoryItems" :key="index" class="history-item-enhanced">
              <div class="timeline-left">
                <div class="timeline-date">{{ item.date }}</div>
                <div class="timeline-time">{{ item.time }}</div>
              </div>
              <div class="timeline-center">
                <div class="timeline-dot" :class="item.type">
                  <i :class="getHistoryTypeIcon(item.type)"></i>
                </div>
                <div v-if="index < filteredHistoryItems.length - 1" class="timeline-line"></div>
              </div>
              <div class="timeline-right">
                <div class="timeline-card" :class="item.type">
                  <div class="timeline-header">
                    <span class="timeline-type" :class="item.type">{{ getHistoryTypeLabel(item.type) }}</span>
                    <span class="timeline-category">{{ item.category }}</span>
                  </div>
                  <div class="timeline-title">{{ item.title }}</div>
                  <div class="timeline-desc">{{ item.description }}</div>
                  <div class="timeline-meta" v-if="item.strategy">
                    <div class="meta-item" v-if="item.strategy.confidence">
                      <i class="fas fa-check-circle"></i>
                      <span>置信度 {{ item.strategy.confidence }}%</span>
                    </div>
                    <div class="meta-item" v-if="item.strategy.improvement">
                      <i class="fas fa-arrow-up"></i>
                      <span>效果 {{ item.strategy.improvement }}</span>
                    </div>
                    <div class="meta-item" v-if="item.strategy.revenue">
                      <i class="fas fa-coins"></i>
                      <span>{{ item.strategy.revenue }}</span>
                    </div>
                  </div>
                  <div class="timeline-actions" v-if="item.strategy">
                    <button class="btn btn-sm btn-outline" @click="viewHistoryStrategy(item)">
                      <i class="fas fa-eye"></i> 查看详情
                    </button>
                    <button v-if="item.type === 'apply' || item.type === 'result'" class="btn btn-sm btn-outline" @click="viewHistoryReport(item)">
                      <i class="fas fa-file-alt"></i> 效果报告
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 列表视图 -->
          <div v-if="historyViewMode === 'list'" class="history-list-view">
            <div class="history-table-header">
              <span class="col-type">类型</span>
              <span class="col-title">策略名称</span>
              <span class="col-category">分类</span>
              <span class="col-effect">效果</span>
              <span class="col-time">时间</span>
              <span class="col-actions">操作</span>
            </div>
            <div v-for="(item, index) in filteredHistoryItems" :key="index" class="history-table-row">
              <span class="col-type">
                <span class="type-badge" :class="item.type">{{ getHistoryTypeLabel(item.type) }}</span>
              </span>
              <span class="col-title">{{ item.title }}</span>
              <span class="col-category">{{ item.category }}</span>
              <span class="col-effect" v-if="item.strategy">{{ item.strategy.improvement || '-' }}</span>
              <span class="col-effect" v-else>-</span>
              <span class="col-time">{{ item.date }} {{ item.time }}</span>
              <span class="col-actions">
                <button class="btn-icon-sm" @click="viewHistoryStrategy(item)" title="查看">
                  <i class="fas fa-eye"></i>
                </button>
              </span>
            </div>
          </div>

          <!-- 统计视图 -->
          <div v-if="historyViewMode === 'stats'" class="history-stats-view">
            <div class="stats-chart-section">
              <h5><i class="fas fa-chart-bar"></i> 策略类型分布</h5>
              <div class="type-distribution">
                <div class="distribution-item">
                  <div class="distribution-bar">
                    <div class="bar-fill apply" :style="{ width: typeDistribution.apply + '%' }"></div>
                  </div>
                  <div class="distribution-info">
                    <span class="type-label"><i class="fas fa-check-circle"></i> 应用策略</span>
                    <span class="type-value">{{ typeDistribution.apply }}%</span>
                  </div>
                </div>
                <div class="distribution-item">
                  <div class="distribution-bar">
                    <div class="bar-fill discover" :style="{ width: typeDistribution.discover + '%' }"></div>
                  </div>
                  <div class="distribution-info">
                    <span class="type-label"><i class="fas fa-lightbulb"></i> 新发现</span>
                    <span class="type-value">{{ typeDistribution.discover }}%</span>
                  </div>
                </div>
                <div class="distribution-item">
                  <div class="distribution-bar">
                    <div class="bar-fill optimize" :style="{ width: typeDistribution.optimize + '%' }"></div>
                  </div>
                  <div class="distribution-info">
                    <span class="type-label"><i class="fas fa-sync"></i> 优化</span>
                    <span class="type-value">{{ typeDistribution.optimize }}%</span>
                  </div>
                </div>
                <div class="distribution-item">
                  <div class="distribution-bar">
                    <div class="bar-fill result" :style="{ width: typeDistribution.result + '%' }"></div>
                  </div>
                  <div class="distribution-info">
                    <span class="type-label"><i class="fas fa-chart-line"></i> 效果报告</span>
                    <span class="type-value">{{ typeDistribution.result }}%</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="stats-metrics-section">
              <h5><i class="fas fa-trophy"></i> 关键指标</h5>
              <div class="metrics-grid-sm">
                <div class="metric-item-sm">
                  <div class="metric-icon-sm blue"><i class="fas fa-envelope-open"></i></div>
                  <div class="metric-info-sm">
                    <div class="metric-value-sm">+{{ avgOpenRateImprovement }}%</div>
                    <div class="metric-label-sm">平均打开率提升</div>
                  </div>
                </div>
                <div class="metric-item-sm">
                  <div class="metric-icon-sm green"><i class="fas fa-reply"></i></div>
                  <div class="metric-info-sm">
                    <div class="metric-value-sm">+{{ avgReplyRateImprovement }}%</div>
                    <div class="metric-label-sm">平均回复率提升</div>
                  </div>
                </div>
                <div class="metric-item-sm">
                  <div class="metric-icon-sm purple"><i class="fas fa-handshake"></i></div>
                  <div class="metric-info-sm">
                    <div class="metric-value-sm">+{{ avgConversionImprovement }}%</div>
                    <div class="metric-label-sm">平均转化率提升</div>
                  </div>
                </div>
                <div class="metric-item-sm highlight">
                  <div class="metric-icon-sm gold"><i class="fas fa-coins"></i></div>
                  <div class="metric-info-sm">
                    <div class="metric-value-sm">¥{{ totalRevenueFromHistory }}K</div>
                    <div class="metric-label-sm">累计增收</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="top-strategies-section">
              <h5><i class="fas fa-star"></i> 效果最佳策略</h5>
              <div class="top-strategies-list">
                <div v-for="(strategy, index) in topStrategies" :key="index" class="top-strategy-item">
                  <div class="rank" :class="{ gold: index === 0, silver: index === 1, bronze: index === 2 }">{{ index + 1 }}</div>
                  <div class="strategy-info">
                    <div class="strategy-name">{{ strategy.name }}</div>
                    <div class="strategy-category">{{ strategy.category }}</div>
                  </div>
                  <div class="strategy-effect">{{ strategy.improvement }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="exportHistoryReport">
            <i class="fas fa-download"></i> 导出报告
          </button>
          <button class="btn btn-secondary" @click="showHistoryModal = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- Toast Notification -->
    <transition name="toast">
      <div v-if="showToast" class="toast" :class="toastType">
        <i :class="toastType === 'success' ? 'fas fa-check-circle' : 'fas fa-info-circle'"></i>
        {{ toastMessage }}
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const filterTab = ref('all')
const searchQuery = ref('')
const sortBy = ref('confidence')
const isRefreshing = ref(false)
const showDetailModal = ref(false)
const showHistoryModal = ref(false)
const selectedStrategy = ref(null)
const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

// History filters
const historySearch = ref('')
const historyFilter = ref({ type: '', dateRange: '' })
const historyViewMode = ref('timeline')

const strategyStats = {
  active: 20,
  applied: 11,
  pending: 9,
  high: 15
}

const tabs = [
  { key: 'all', label: '全部策略', count: 20 },
  { key: 'timing', label: '触达时机', count: 3 },
  { key: 'content', label: '内容优化', count: 4 },
  { key: 'audience', label: '受众细分', count: 5 },
  { key: 'channel', label: '渠道策略', count: 8 }
]

const strategies = ref([
  { 
    id: 1, 
    icon: 'fas fa-clock', 
    iconBg: 'rgba(99, 102, 241, 0.2)', 
    iconColor: 'var(--primary)', 
    title: '最佳邮件发送时间', 
    description: '周二上午10点和周四下午2点发送邮件打开率最高，建议调整邮件营销时间安排', 
    category: '触达时机',
    tags: ['邮件营销', '发送时间', '打开率'],
    dataSource: '8,562封邮件', 
    confidence: 92, 
    improvement: '+35%', 
    status: 'applied',
    favorite: true,
    effectProgress: 87,
    timeToImplement: '即时生效',
    implementationSteps: [
      { title: '自动调整发送队列', description: '系统自动将待发送邮件调整至最优时段' },
      { title: '监控效果数据', description: '实时追踪打开率变化' },
      { title: '持续优化模型', description: '根据新数据不断优化预测准确度' }
    ],
    impact: { opens: '+35%', replies: '+12%', conversions: '+8%', revenue: '¥128K/月' },
    abTestResults: { control: 22, test: 30 }
  },
  { 
    id: 2, 
    icon: 'fab fa-whatsapp', 
    iconBg: 'rgba(37, 211, 102, 0.2)', 
    iconColor: '#25D366', 
    title: 'WhatsApp最佳联系时段', 
    description: '中东客户晚上8-10点回复率最高，建议在该时段集中跟进', 
    category: '触达时机',
    tags: ['WhatsApp', '中东市场', '回复率'],
    dataSource: '3,421条记录', 
    confidence: 88, 
    improvement: '+52%', 
    status: 'pending',
    favorite: false,
    effectProgress: 0,
    timeToImplement: '1-2天',
    implementationSteps: [
      { title: '配置时段规则', description: '设置中东客户专属联系时段' },
      { title: '启用定时发送', description: '消息自动在最佳时段发送' },
      { title: '效果追踪', description: '监控回复率变化' }
    ],
    impact: { opens: '+28%', replies: '+52%', conversions: '+15%', revenue: '¥85K/月' },
    abTestResults: null
  },
  { 
    id: 3, 
    icon: 'fas fa-language', 
    iconBg: 'rgba(16, 185, 129, 0.2)', 
    iconColor: 'var(--success)', 
    title: '德国市场本地化话术', 
    description: '使用德语撰写邮件+强调ISO认证，德国客户响应率提升显著', 
    category: '内容优化',
    tags: ['德国', '本地化', '认证'],
    dataSource: '156封邮件', 
    confidence: 90, 
    improvement: '+130%', 
    status: 'applied',
    favorite: true,
    effectProgress: 92,
    timeToImplement: '3-5天',
    implementationSteps: [
      { title: '导入德语模板', description: 'AI生成德语邮件模板' },
      { title: '添加认证信息', description: '自动插入ISO认证说明' },
      { title: 'A/B测试验证', description: '对比原模板与新模板效果' }
    ],
    impact: { opens: '+45%', replies: '+130%', conversions: '+35%', revenue: '¥220K/月' },
    abTestResults: { control: 15, test: 35 }
  },
  { 
    id: 4, 
    icon: 'fas fa-heading', 
    iconBg: 'rgba(139, 92, 246, 0.2)', 
    iconColor: 'var(--secondary)', 
    title: '邮件标题数字效应', 
    description: '邮件标题包含具体数字（如"提升30%"）点击率显著提升', 
    category: '内容优化',
    tags: ['邮件标题', '文案优化', '点击率'],
    dataSource: '12,847封邮件', 
    confidence: 76, 
    improvement: '+42%', 
    status: 'pending',
    favorite: false,
    effectProgress: 0,
    timeToImplement: '即时生效',
    implementationSteps: [
      { title: '标题模板优化', description: 'AI自动为标题添加数字元素' },
      { title: '批量更新队列', description: '待发邮件标题自动优化' }
    ],
    impact: { opens: '+42%', replies: '+18%', conversions: '+10%', revenue: '¥95K/月' },
    abTestResults: { control: 28, test: 40 }
  },
  { 
    id: 5, 
    icon: 'fas fa-user-tie', 
    iconBg: 'rgba(236, 72, 153, 0.2)', 
    iconColor: '#EC4899', 
    title: '采购决策人识别', 
    description: '优先触达CTO/CIO级别决策人，比普通Manager打开率高40%', 
    category: '受众细分',
    tags: ['决策人', '职位分析', '触达策略'],
    dataSource: '职位标签分析', 
    confidence: 89, 
    improvement: '+40%', 
    status: 'applied',
    favorite: true,
    effectProgress: 78,
    timeToImplement: '5-7天',
    implementationSteps: [
      { title: '职位数据清洗', description: '识别并标记决策人职位' },
      { title: '优先级调整', description: '决策人客户优先触达' },
      { title: '话术定制', description: '针对不同职位生成定制话术' }
    ],
    impact: { opens: '+40%', replies: '+25%', conversions: '+20%', revenue: '¥180K/月' },
    abTestResults: null
  },
  { 
    id: 6, 
    icon: 'fab fa-linkedin', 
    iconBg: 'rgba(59, 130, 246, 0.2)', 
    iconColor: '#0A66C2', 
    title: 'LinkedIn个性化连接', 
    description: '发送连接请求时添加个性化消息，接受率提升3倍', 
    category: '渠道策略',
    tags: ['LinkedIn', '社交营销', '个性化'],
    dataSource: '892个连接', 
    confidence: 87, 
    improvement: '+210%', 
    status: 'applied',
    favorite: false,
    effectProgress: 65,
    timeToImplement: '即时生效',
    implementationSteps: [
      { title: '启用个性化模板', description: '自动生成个性化连接消息' },
      { title: '批量应用', description: '新连接请求自动添加个性化内容' }
    ],
    impact: { opens: '+60%', replies: '+210%', conversions: '+45%', revenue: '¥150K/月' },
    abTestResults: { control: 12, test: 38 }
  },
  { 
    id: 7, 
    icon: 'fas fa-redo', 
    iconBg: 'rgba(245, 158, 11, 0.2)', 
    iconColor: 'var(--warning)', 
    title: '跟进频率优化', 
    description: '第3天和第7天是最佳跟进时机，错过这两个节点转化率下降60%', 
    category: '触达时机',
    tags: ['跟进', '转化率', '时机'],
    dataSource: '2,156个跟进案例', 
    confidence: 91, 
    improvement: '+38%', 
    status: 'pending',
    favorite: false,
    effectProgress: 0,
    timeToImplement: '即时生效',
    implementationSteps: [
      { title: '设置跟进提醒', description: '系统在最优时机自动提醒跟进' },
      { title: 'SOP自动化', description: '自动创建跟进任务' }
    ],
    impact: { opens: '+25%', replies: '+38%', conversions: '+28%', revenue: '¥110K/月' },
    abTestResults: null
  },
  { 
    id: 8, 
    icon: 'fas fa-file-alt', 
    iconBg: 'rgba(6, 182, 212, 0.2)', 
    iconColor: 'var(--info)', 
    title: '附件命名策略', 
    description: '使用"公司名_产品名_日期.pdf"格式命名附件，打开率提升22%', 
    category: '内容优化',
    tags: ['附件', '命名规范', '专业度'],
    dataSource: '4,532封带附件邮件', 
    confidence: 82, 
    improvement: '+22%', 
    status: 'pending',
    favorite: false,
    effectProgress: 0,
    timeToImplement: '即时生效',
    implementationSteps: [
      { title: '启用自动命名', description: '附件自动按规范命名' }
    ],
    impact: { opens: '+22%', replies: '+15%', conversions: '+8%', revenue: '¥65K/月' },
    abTestResults: { control: 45, test: 55 }
  },
  // ========== 受众细分策略 ==========
  { 
    id: 9, 
    icon: 'fas fa-building', 
    iconBg: 'rgba(236, 72, 153, 0.2)', 
    iconColor: '#EC4899', 
    title: '企业规模分层触达', 
    description: '大型企业（500+人）优先电话+视频会议，中小型企业优先邮件+WhatsApp，转化率提升45%', 
    category: '受众细分',
    tags: ['企业规模', '分层触达', '转化率'],
    dataSource: '1,247个客户案例', 
    confidence: 94, 
    improvement: '+45%', 
    status: 'applied',
    favorite: true,
    effectProgress: 82,
    timeToImplement: '3-5天',
    implementationSteps: [
      { title: '客户规模分类', description: '按员工数量自动分类客户' },
      { title: '触达渠道配置', description: '为不同规模客户配置最优渠道' },
      { title: '话术模板匹配', description: '自动匹配对应规模的话术模板' }
    ],
    impact: { opens: '+35%', replies: '+45%', conversions: '+38%', revenue: '¥280K/月' },
    abTestResults: { control: 18, test: 28 }
  },
  { 
    id: 10, 
    icon: 'fas fa-globe-americas', 
    iconBg: 'rgba(34, 197, 94, 0.2)', 
    iconColor: '#22C55E', 
    title: '地区文化适配策略', 
    description: '中东客户重视关系建立，欧美客户重视数据证明，需采用不同沟通策略', 
    category: '受众细分',
    tags: ['地区', '文化适配', '沟通策略'],
    dataSource: '3,892封跨区域邮件', 
    confidence: 88, 
    improvement: '+56%', 
    status: 'applied',
    favorite: true,
    effectProgress: 75,
    timeToImplement: '5-7天',
    implementationSteps: [
      { title: '地区标签设置', description: '为客户添加地区标签' },
      { title: '文化特征分析', description: 'AI分析各地区沟通偏好' },
      { title: '话术库建立', description: '建立各地区专属话术库' }
    ],
    impact: { opens: '+42%', replies: '+56%', conversions: '+32%', revenue: '¥195K/月' },
    abTestResults: { control: 22, test: 35 }
  },
  { 
    id: 11, 
    icon: 'fas fa-industry', 
    iconBg: 'rgba(168, 85, 247, 0.2)', 
    iconColor: '#A855F7', 
    title: '行业垂直化内容', 
    description: '针对数据中心、消费电子、安防监控三个行业，使用行业专属案例和术语，响应率提升68%', 
    category: '受众细分',
    tags: ['行业', '垂直化', '案例营销'],
    dataSource: '856个行业客户', 
    confidence: 91, 
    improvement: '+68%', 
    status: 'pending',
    favorite: false,
    effectProgress: 0,
    timeToImplement: '7-10天',
    implementationSteps: [
      { title: '行业分类标记', description: '为客户标记所属行业' },
      { title: '行业案例库', description: 'AI生成行业专属案例内容' },
      { title: '术语优化', description: '使用行业专业术语增强专业度' }
    ],
    impact: { opens: '+48%', replies: '+68%', conversions: '+42%', revenue: '¥320K/月' },
    abTestResults: null
  },
  { 
    id: 12, 
    icon: 'fas fa-history', 
    iconBg: 'rgba(251, 146, 60, 0.2)', 
    iconColor: '#FB923C', 
    title: '采购周期识别', 
    description: '识别客户采购周期（季度/年度预算），在预算审批前2周主动触达，成交率提升35%', 
    category: '受众细分',
    tags: ['采购周期', '预算', '时机'],
    dataSource: '2,345个采购记录', 
    confidence: 86, 
    improvement: '+35%', 
    status: 'pending',
    favorite: false,
    effectProgress: 0,
    timeToImplement: '3-5天',
    implementationSteps: [
      { title: '周期模式识别', description: 'AI分析客户历史采购时间' },
      { title: '提醒设置', description: '在预算审批前自动提醒' },
      { title: '主动触达', description: '自动发送预算方案' }
    ],
    impact: { opens: '+38%', replies: '+35%', conversions: '+35%', revenue: '¥175K/月' },
    abTestResults: { control: 15, test: 22 }
  },
  { 
    id: 13, 
    icon: 'fas fa-fire', 
    iconBg: 'rgba(239, 68, 68, 0.2)', 
    iconColor: '#EF4444', 
    title: '高意向客户优先级', 
    description: '基于行为数据（多次打开邮件、访问定价页）识别高意向客户，优先分配销售资源', 
    category: '受众细分',
    tags: ['高意向', '行为分析', '资源分配'],
    dataSource: '12,847条行为记录', 
    confidence: 93, 
    improvement: '+52%', 
    status: 'applied',
    favorite: true,
    effectProgress: 88,
    timeToImplement: '即时生效',
    implementationSteps: [
      { title: '行为追踪启用', description: '追踪邮件打开、页面访问等行为' },
      { title: '意向评分模型', description: 'AI计算客户意向分数' },
      { title: '优先级队列', description: '高意向客户自动置顶' }
    ],
    impact: { opens: '+42%', replies: '+52%', conversions: '+48%', revenue: '¥350K/月' },
    abTestResults: { control: 12, test: 22 }
  },
  // ========== 渠道策略 ==========
  { 
    id: 14, 
    icon: 'fab fa-whatsapp', 
    iconBg: 'rgba(37, 211, 102, 0.2)', 
    iconColor: '#25D366', 
    title: 'WhatsApp即时跟进', 
    description: '邮件未回复48小时后，自动通过WhatsApp发送温馨提醒，回复率提升125%', 
    category: '渠道策略',
    tags: ['WhatsApp', '多渠道', '跟进'],
    dataSource: '1,567个跟进案例', 
    confidence: 89, 
    improvement: '+125%', 
    status: 'applied',
    favorite: true,
    effectProgress: 72,
    timeToImplement: '即时生效',
    implementationSteps: [
      { title: '规则配置', description: '设置48小时未回复触发规则' },
      { title: '模板创建', description: '创建WhatsApp跟进模板' },
      { title: '自动发送', description: '系统自动发送提醒消息' }
    ],
    impact: { opens: '+85%', replies: '+125%', conversions: '+55%', revenue: '¥165K/月' },
    abTestResults: { control: 8, test: 18 }
  },
  { 
    id: 15, 
    icon: 'fas fa-phone-alt', 
    iconBg: 'rgba(59, 130, 246, 0.2)', 
    iconColor: '#3B82F6', 
    title: '电话+邮件组合策略', 
    description: '高价值客户（年采购$100K+）采用电话预热+邮件详情+电话跟进的组合策略', 
    category: '渠道策略',
    tags: ['电话', '组合营销', '高价值'],
    dataSource: '234个高价值客户', 
    confidence: 92, 
    improvement: '+78%', 
    status: 'applied',
    favorite: false,
    effectProgress: 65,
    timeToImplement: '即时生效',
    implementationSteps: [
      { title: '高价值客户筛选', description: '识别年采购$100K+客户' },
      { title: '组合流程设计', description: '设计电话-邮件-电话流程' },
      { title: '执行监控', description: '监控组合策略执行效果' }
    ],
    impact: { opens: '+65%', replies: '+78%', conversions: '+62%', revenue: '¥420K/月' },
    abTestResults: { control: 18, test: 32 }
  },
  { 
    id: 16, 
    icon: 'fas fa-video', 
    iconBg: 'rgba(236, 72, 153, 0.2)', 
    iconColor: '#EC4899', 
    title: '视频会议预约策略', 
    description: '邮件中嵌入视频会议预约链接，相比纯文字邮件，预约率提升85%', 
    category: '渠道策略',
    tags: ['视频会议', '预约', '互动'],
    dataSource: '678封邮件对比', 
    confidence: 87, 
    improvement: '+85%', 
    status: 'pending',
    favorite: false,
    effectProgress: 0,
    timeToImplement: '3-5天',
    implementationSteps: [
      { title: '预约系统集成', description: '集成Calendly等预约工具' },
      { title: '邮件模板更新', description: '在邮件中添加预约链接' },
      { title: '自动提醒', description: '预约后自动发送提醒' }
    ],
    impact: { opens: '+35%', replies: '+85%', conversions: '+45%', revenue: '¥135K/月' },
    abTestResults: { control: 12, test: 22 }
  },
  { 
    id: 17, 
    icon: 'fab fa-weixin', 
    iconBg: 'rgba(7, 193, 96, 0.2)', 
    iconColor: '#07C160', 
    title: '微信企业号触达', 
    description: '中国客户优先使用微信企业号，比邮件打开率高3倍，建议建立微信触达流程', 
    category: '渠道策略',
    tags: ['微信', '中国客户', '触达'],
    dataSource: '456个中国客户', 
    confidence: 95, 
    improvement: '+200%', 
    status: 'pending',
    favorite: true,
    effectProgress: 0,
    timeToImplement: '5-7天',
    implementationSteps: [
      { title: '企业微信配置', description: '配置企业微信机器人' },
      { title: '客户绑定', description: '邀请客户绑定微信' },
      { title: '消息模板', description: '创建微信消息模板' }
    ],
    impact: { opens: '+200%', replies: '+150%', conversions: '+80%', revenue: '¥250K/月' },
    abTestResults: null
  },
  { 
    id: 18, 
    icon: 'fas fa-robot', 
    iconBg: 'rgba(139, 92, 246, 0.2)', 
    iconColor: '#8B5CF6', 
    title: 'AI聊天机器人预筛选', 
    description: '官网集成AI聊天机器人，自动收集客户需求后转交销售，有效线索提升40%', 
    category: '渠道策略',
    tags: ['AI机器人', '线索收集', '官网'],
    dataSource: '3,245次网站访问', 
    confidence: 84, 
    improvement: '+40%', 
    status: 'pending',
    favorite: false,
    effectProgress: 0,
    timeToImplement: '7-14天',
    implementationSteps: [
      { title: '机器人配置', description: '配置AI对话流程' },
      { title: '需求收集表单', description: '设计需求收集表单' },
      { title: 'CRM集成', description: '自动同步到CRM系统' }
    ],
    impact: { opens: '+30%', replies: '+40%', conversions: '+35%', revenue: '¥180K/月' },
    abTestResults: { control: 8, test: 12 }
  },
  { 
    id: 19, 
    icon: 'fas fa-bullhorn', 
    iconBg: 'rgba(245, 158, 11, 0.2)', 
    iconColor: '#F59E0B', 
    title: '多渠道协同触达', 
    description: '邮件+LinkedIn+WhatsApp三渠道协同触达，比单一渠道转化率高65%', 
    category: '渠道策略',
    tags: ['多渠道', '协同', '转化率'],
    dataSource: '1,892个触达案例', 
    confidence: 91, 
    improvement: '+65%', 
    status: 'applied',
    favorite: true,
    effectProgress: 78,
    timeToImplement: '5-7天',
    implementationSteps: [
      { title: '渠道顺序设计', description: '设计最优渠道触达顺序' },
      { title: '内容适配', description: '为不同渠道适配内容格式' },
      { title: '自动化流程', description: '建立自动化触达流程' }
    ],
    impact: { opens: '+55%', replies: '+65%', conversions: '+65%', revenue: '¥290K/月' },
    abTestResults: { control: 15, test: 25 }
  },
  { 
    id: 20, 
    icon: 'fas fa-envelope-open-text', 
    iconBg: 'rgba(6, 182, 212, 0.2)', 
    iconColor: '#06B6D4', 
    title: 'EDM邮件营销优化', 
    description: '月度Newsletter添加行业动态+产品更新+客户案例三合一内容，打开率稳定在42%', 
    category: '渠道策略',
    tags: ['EDM', 'Newsletter', '内容营销'],
    dataSource: '12期Newsletter数据', 
    confidence: 88, 
    improvement: '+28%', 
    status: 'applied',
    favorite: false,
    effectProgress: 85,
    timeToImplement: '即时生效',
    implementationSteps: [
      { title: '内容模板设计', description: '设计三合一内容模板' },
      { title: '自动化发送', description: '设置月度自动发送' },
      { title: '效果追踪', description: '追踪打开率和点击率' }
    ],
    impact: { opens: '+28%', replies: '+22%', conversions: '+15%', revenue: '¥95K/月' },
    abTestResults: { control: 32, test: 42 }
  }
])

const historyItems = ref([
  { type: 'apply', title: '应用策略：最佳邮件发送时间', description: '策略已生效，预计提升35%打开率', time: '14:30', date: '今天', category: '触达时机', strategy: { confidence: 92, improvement: '+35%', revenue: '¥128K/月' } },
  { type: 'optimize', title: '策略优化：德国本地化话术', description: '基于新数据调整了邮件模板', time: '10:15', date: '今天', category: '内容优化', strategy: { confidence: 90, improvement: '+130%' } },
  { type: 'discover', title: '新策略发现：跟进频率优化', description: 'AI分析发现最佳跟进时机', time: '16:45', date: '昨天', category: '触达时机', strategy: { confidence: 91, improvement: '+38%' } },
  { type: 'apply', title: '应用策略：LinkedIn个性化连接', description: '策略已生效', time: '09:00', date: '昨天', category: '渠道策略', strategy: { confidence: 87, improvement: '+210%', revenue: '¥150K/月' } },
  { type: 'result', title: '效果报告：采购决策人识别', description: '应用30天，转化率提升20%', time: '11:30', date: '3天前', category: '受众细分', strategy: { confidence: 89, improvement: '+40%', revenue: '¥180K/月' } },
  { type: 'apply', title: '应用策略：企业规模分层触达', description: '大型企业优先电话跟进', time: '15:20', date: '3天前', category: '受众细分', strategy: { confidence: 94, improvement: '+45%', revenue: '¥280K/月' } },
  { type: 'discover', title: '新策略发现：WhatsApp即时跟进', description: '邮件未回复48小时后通过WhatsApp提醒', time: '14:00', date: '5天前', category: '渠道策略', strategy: { confidence: 89, improvement: '+125%' } },
  { type: 'result', title: '效果报告：地区文化适配策略', description: '应用15天，中东客户回复率提升56%', time: '10:45', date: '5天前', category: '受众细分', strategy: { confidence: 88, improvement: '+56%', revenue: '¥195K/月' } },
  { type: 'optimize', title: '策略优化：邮件标题数字效应', description: '新增5个有效数字模板', time: '09:30', date: '一周前', category: '内容优化', strategy: { confidence: 76, improvement: '+42%' } },
  { type: 'apply', title: '应用策略：高意向客户优先级', description: '行为数据分析识别高意向客户', time: '16:00', date: '一周前', category: '受众细分', strategy: { confidence: 93, improvement: '+52%', revenue: '¥350K/月' } },
  { type: 'result', title: '效果报告：最佳邮件发送时间', description: '应用60天，打开率稳定提升32%', time: '14:15', date: '一周前', category: '触达时机', strategy: { confidence: 92, improvement: '+35%', revenue: '¥128K/月' } },
  { type: 'discover', title: '新策略发现：微信企业号触达', description: '中国客户打开率提升200%', time: '11:00', date: '两周前', category: '渠道策略', strategy: { confidence: 95, improvement: '+200%' } }
])

const filteredStrategies = computed(() => {
  let result = strategies.value
  
  // Filter by tab - 按 category 字段筛选
  if (filterTab.value !== 'all') {
    const categoryMap = {
      timing: '触达时机',
      content: '内容优化',
      audience: '受众细分',
      channel: '渠道策略'
    }
    result = result.filter(s => s.category === categoryMap[filterTab.value])
  }
  
  // Filter by search
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(s => 
      s.title.toLowerCase().includes(query) || 
      s.description.toLowerCase().includes(query) ||
      s.tags.some(t => t.toLowerCase().includes(query))
    )
  }
  
  // Sort
  if (sortBy.value === 'confidence') {
    result = [...result].sort((a, b) => b.confidence - a.confidence)
  } else if (sortBy.value === 'improvement') {
    result = [...result].sort((a, b) => {
      const aVal = parseInt(a.improvement.replace(/[^0-9]/g, ''))
      const bVal = parseInt(b.improvement.replace(/[^0-9]/g, ''))
      return bVal - aVal
    })
  }
  
  return result
})

const avgImprovement = computed(() => {
  const total = strategies.value.reduce((sum, s) => {
    return sum + parseInt(s.improvement.replace(/[^0-9]/g, ''))
  }, 0)
  return Math.round(total / strategies.value.length)
})

const totalRevenueImpact = computed(() => {
  return strategies.value.reduce((sum, s) => {
    const revenue = parseInt(s.impact.revenue.replace(/[^0-9]/g, ''))
    return sum + revenue
  }, 0)
})

// History computed
const filteredHistoryItems = computed(() => {
  let result = historyItems.value
  if (historySearch.value) {
    const query = historySearch.value.toLowerCase()
    result = result.filter(item => 
      item.title.toLowerCase().includes(query) || 
      item.description.toLowerCase().includes(query)
    )
  }
  if (historyFilter.value.type) {
    result = result.filter(item => item.type === historyFilter.value.type)
  }
  return result
})

const appliedStrategyCount = computed(() => historyItems.value.filter(h => h.type === 'apply').length)
const discoveredStrategyCount = computed(() => historyItems.value.filter(h => h.type === 'discover').length)
const optimizedStrategyCount = computed(() => historyItems.value.filter(h => h.type === 'optimize').length)
const totalImprovementFromHistory = computed(() => {
  const items = historyItems.value.filter(h => h.strategy?.improvement)
  if (items.length === 0) return 0
  return Math.round(items.reduce((sum, h) => sum + parseInt(h.strategy.improvement.replace(/[^0-9]/g, '')), 0) / items.length)
})

const typeDistribution = computed(() => {
  const total = historyItems.value.length
  return {
    apply: Math.round(historyItems.value.filter(h => h.type === 'apply').length / total * 100),
    discover: Math.round(historyItems.value.filter(h => h.type === 'discover').length / total * 100),
    optimize: Math.round(historyItems.value.filter(h => h.type === 'optimize').length / total * 100),
    result: Math.round(historyItems.value.filter(h => h.type === 'result').length / total * 100)
  }
})

const avgOpenRateImprovement = computed(() => 35)
const avgReplyRateImprovement = computed(() => 52)
const avgConversionImprovement = computed(() => 38)
const totalRevenueFromHistory = computed(() => 1688)

const topStrategies = computed(() => [
  { name: 'LinkedIn个性化连接', category: '渠道策略', improvement: '+210%' },
  { name: '微信企业号触达', category: '渠道策略', improvement: '+200%' },
  { name: '德国市场本地化话术', category: '内容优化', improvement: '+130%' },
  { name: 'WhatsApp即时跟进', category: '渠道策略', improvement: '+125%' },
  { name: '高意向客户优先级', category: '受众细分', improvement: '+52%' }
])

const formatNumber = (num) => {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'M'
  }
  return num.toLocaleString()
}

const filterStrategies = (type) => {
  filterTab.value = type
}

const showStrategyDetail = (strategy) => {
  selectedStrategy.value = strategy
  showDetailModal.value = true
}

const applyStrategy = (strategy) => {
  strategy.status = 'applied'
  showDetailModal.value = false
  showToastMessage(`策略"${strategy.title}"已应用`, 'success')
}

const toggleFavorite = (strategy) => {
  strategy.favorite = !strategy.favorite
  showToastMessage(strategy.favorite ? '已添加收藏' : '已取消收藏', 'success')
}

const refreshStrategies = () => {
  isRefreshing.value = true
  setTimeout(() => {
    isRefreshing.value = false
    showToastMessage('策略已刷新，发现 2 个新策略', 'success')
  }, 2000)
}

const exportReport = () => {
  showToastMessage('策略报告已导出', 'success')
}

// History functions
const getHistoryTypeIcon = (type) => {
  const icons = { apply: 'fas fa-check', optimize: 'fas fa-sync', discover: 'fas fa-lightbulb', result: 'fas fa-chart-line' }
  return icons[type] || 'fas fa-circle'
}

const getHistoryTypeLabel = (type) => {
  const labels = { apply: '应用策略', optimize: '策略优化', discover: '新策略发现', result: '效果报告' }
  return labels[type] || type
}

const viewHistoryStrategy = (item) => {
  const strategy = strategies.value.find(s => item.title.includes(s.title))
  if (strategy) {
    selectedStrategy.value = strategy
    showDetailModal.value = true
    showHistoryModal.value = false
  } else {
    showToastMessage('查看策略详情', 'info')
  }
}

const viewHistoryReport = (item) => {
  showToastMessage(`正在生成"${item.title}"的效果报告`, 'info')
}

const exportHistoryReport = () => {
  showToastMessage('策略历史报告已导出', 'success')
}

const showToastMessage = (message, type = 'success') => {
  toastMessage.value = message
  toastType.value = type
  showToast.value = true
  setTimeout(() => {
    showToast.value = false
  }, 3000)
}
</script>

<style scoped>
.strategy-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
  background: var(--bg-dark);
}

.strategy-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.data-title {
  font-size: 20px;
  font-weight: 600;
}

.header-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Stats Row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card-lg {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}

.stat-card-lg:hover {
  border-color: var(--primary);
}

.stat-icon-lg {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary);
}

.stat-icon-lg.green { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.stat-icon-lg.orange { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.stat-icon-lg.purple { background: rgba(139, 92, 246, 0.2); color: var(--secondary); }

.stat-content-lg h3 {
  font-size: 24px;
  font-weight: 700;
}

.stat-content-lg p {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Tabs Row */
.tabs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.tabs {
  display: flex;
  gap: 4px;
}

.tab-item {
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.tab-item:hover {
  background: var(--bg-hover);
}

.tab-item.active {
  background: var(--bg-hover);
  color: var(--text-primary);
  font-weight: 600;
}

.tab-count {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--bg-dark);
  border-radius: 10px;
  color: var(--text-muted);
}

.tab-item.active .tab-count {
  background: var(--primary);
  color: white;
}

.search-filter {
  display: flex;
  gap: 12px;
}

.search-box-small {
  position: relative;
  width: 200px;
}

.search-box-small i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 12px;
}

.search-box-small input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
}

.search-box-small input:focus {
  outline: none;
  border-color: var(--primary);
}

.filter-select {
  padding: 8px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
}

/* Strategy Grid */
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.strategy-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.strategy-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.strategy-card.applied {
  border-color: rgba(16, 185, 129, 0.3);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.card-badges {
  display: flex;
  gap: 6px;
}

.badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
}

.badge.applied {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.badge.pending {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}

.badge.confidence {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}

.badge.confidence.high {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.tag {
  font-size: 10px;
  padding: 3px 8px;
  background: var(--bg-hover);
  border-radius: 10px;
  color: var(--text-secondary);
}

.card-metrics {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-hover);
  border-radius: 8px;
}

.metric {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.metric-label {
  color: var(--text-muted);
}

.metric-value {
  font-weight: 500;
}

.metric-value.highlight {
  color: var(--success);
  font-weight: 600;
}

.card-progress {
  margin-bottom: 12px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 6px;
}

.progress-bar {
  height: 4px;
  background: var(--bg-dark);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--success);
  border-radius: 2px;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.btn-success {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
  border: 1px solid var(--success);
}

.btn-success:hover {
  background: var(--success);
  color: white;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.strategy-detail-modal {
  max-width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title h3 {
  font-size: 16px;
  font-weight: 600;
}

.modal-title p {
  font-size: 12px;
  color: var(--text-secondary);
}

.title-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.modal-close {
  width: 32px;
  height: 32px;
  background: var(--bg-hover);
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--border);
  color: var(--text-primary);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid var(--border);
}

/* Detail Sections */
.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.detail-section h4 i {
  color: var(--primary);
}

.detail-section p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* Analysis Grid */
.analysis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.analysis-item {
  background: var(--bg-hover);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.analysis-value {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.analysis-value.highlight {
  color: var(--primary);
}

.analysis-value.success {
  color: var(--success);
}

.analysis-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* Steps List */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg-hover);
  border-radius: 10px;
  align-items: flex-start;
}

.step-item.completed {
  background: rgba(16, 185, 129, 0.1);
}

.step-number {
  width: 24px;
  height: 24px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.step-item.completed .step-number {
  background: var(--success);
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.step-desc {
  font-size: 11px;
  color: var(--text-secondary);
}

.step-check {
  color: var(--success);
  font-size: 16px;
}

/* Impact Cards */
.impact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.impact-card {
  background: var(--bg-hover);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.impact-card i {
  font-size: 24px;
  color: var(--primary);
  margin-bottom: 8px;
}

.impact-card.highlight {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.impact-card.highlight i {
  color: var(--success);
}

.impact-value {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.impact-card.highlight .impact-value {
  color: var(--success);
}

.impact-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* A/B Test Results */
.ab-test-results {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--bg-hover);
  border-radius: 12px;
}

.ab-group {
  flex: 1;
  text-align: center;
  padding: 16px;
  border-radius: 10px;
}

.ab-group.control {
  background: rgba(148, 163, 184, 0.1);
}

.ab-group.test {
  background: rgba(16, 185, 129, 0.1);
}

.group-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.group-value {
  font-size: 28px;
  font-weight: 700;
}

.ab-group.test .group-value {
  color: var(--success);
}

.group-metric {
  font-size: 11px;
  color: var(--text-secondary);
}

.group-improvement {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--success);
}

.vs-divider {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

/* History Timeline */
.history-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-item {
  display: flex;
  gap: 12px;
  position: relative;
}

.history-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.history-dot.apply {
  background: var(--success);
}

.history-dot.optimize {
  background: var(--primary);
}

.history-dot.discover {
  background: var(--warning);
}

.history-dot.result {
  background: var(--secondary);
}

.history-content {
  flex: 1;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.history-item:last-child .history-content {
  border-bottom: none;
  padding-bottom: 0;
}

.history-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.history-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.history-time {
  font-size: 11px;
  color: var(--text-muted);
}

/* History Modal Enhanced */
.history-modal { max-width: 900px; }
.history-filters { display: flex; gap: 12px; margin-bottom: 16px; }
.filter-group { display: flex; gap: 8px; }
.filter-select-sm { padding: 6px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 12px; }

.history-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.history-stat-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.history-stat-item .stat-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.history-stat-item .stat-icon.apply { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.history-stat-item .stat-icon.discover { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.history-stat-item .stat-icon.optimize { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.history-stat-item .stat-icon.result { background: rgba(139, 92, 246, 0.2); color: var(--secondary); }
.history-stat-item .stat-content .stat-value { font-size: 18px; font-weight: 700; }
.history-stat-item .stat-content .stat-label { font-size: 11px; color: var(--text-muted); }
.history-stat-item.highlight { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); }
.history-stat-item.highlight .stat-value { color: var(--success); }

.history-tabs { display: flex; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.history-tab { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--bg-hover); border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.history-tab:hover { background: rgba(99, 102, 241, 0.1); }
.history-tab.active { background: var(--primary); color: white; }

/* Timeline Enhanced */
.history-timeline-enhanced { max-height: 450px; overflow-y: auto; padding-right: 8px; }
.history-item-enhanced { display: flex; gap: 16px; margin-bottom: 20px; }
.timeline-left { width: 70px; text-align: right; flex-shrink: 0; }
.timeline-date { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.timeline-time { font-size: 11px; color: var(--text-muted); }
.timeline-center { display: flex; flex-direction: column; align-items: center; width: 40px; flex-shrink: 0; }
.timeline-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 1; }
.timeline-dot.apply { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.timeline-dot.discover { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.timeline-dot.optimize { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.timeline-dot.result { background: rgba(139, 92, 246, 0.2); color: var(--secondary); }
.timeline-line { width: 2px; flex: 1; background: var(--border); margin-top: 8px; min-height: 40px; }
.timeline-right { flex: 1; min-width: 0; }
.timeline-card { background: var(--bg-hover); border-radius: 12px; padding: 16px; border-left: 3px solid var(--border); }
.timeline-card.apply { border-left-color: var(--success); }
.timeline-card.discover { border-left-color: var(--warning); }
.timeline-card.optimize { border-left-color: var(--primary); }
.timeline-card.result { border-left-color: var(--secondary); }
.timeline-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.timeline-type { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.timeline-type.apply { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.timeline-type.discover { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.timeline-type.optimize { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.timeline-type.result { background: rgba(139, 92, 246, 0.2); color: var(--secondary); }
.timeline-category { font-size: 11px; color: var(--text-muted); }
.timeline-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.timeline-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.timeline-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.timeline-meta .meta-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.timeline-meta .meta-item i { font-size: 10px; }
.timeline-actions { display: flex; gap: 8px; }

/* List View */
.history-list-view { max-height: 400px; overflow-y: auto; }
.history-table-header { display: grid; grid-template-columns: 80px 1fr 100px 80px 140px 60px; gap: 12px; padding: 12px 16px; background: var(--bg-hover); border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.history-table-row { display: grid; grid-template-columns: 80px 1fr 100px 80px 140px 60px; gap: 12px; padding: 12px 16px; background: var(--bg-hover); border-radius: 8px; align-items: center; margin-bottom: 6px; font-size: 12px; transition: all 0.2s; }
.history-table-row:hover { background: rgba(99, 102, 241, 0.1); }
.type-badge { padding: 3px 8px; border-radius: 10px; font-size: 10px; }
.type-badge.apply { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.type-badge.discover { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.type-badge.optimize { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.type-badge.result { background: rgba(139, 92, 246, 0.2); color: var(--secondary); }
.btn-icon-sm { width: 28px; height: 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-icon-sm:hover { background: var(--primary); border-color: var(--primary); color: white; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); padding: 4px 10px; font-size: 11px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

/* Stats View */
.history-stats-view { display: flex; flex-direction: column; gap: 20px; }
.stats-chart-section h5, .stats-metrics-section h5, .top-strategies-section h5 { font-size: 13px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.stats-chart-section h5 i, .stats-metrics-section h5 i, .top-strategies-section h5 i { color: var(--primary); }
.type-distribution { display: flex; flex-direction: column; gap: 12px; }
.distribution-item { }
.distribution-bar { height: 8px; background: var(--bg-dark); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.bar-fill { height: 100%; border-radius: 4px; }
.bar-fill.apply { background: var(--success); }
.bar-fill.discover { background: var(--warning); }
.bar-fill.optimize { background: var(--primary); }
.bar-fill.result { background: var(--secondary); }
.distribution-info { display: flex; justify-content: space-between; font-size: 12px; }
.type-label { display: flex; align-items: center; gap: 6px; }
.type-label i { font-size: 10px; }
.type-value { font-weight: 600; }

.metrics-grid-sm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric-item-sm { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.metric-item-sm .metric-icon-sm { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.metric-icon-sm.blue { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.metric-icon-sm.green { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.metric-icon-sm.purple { background: rgba(139, 92, 246, 0.2); color: var(--secondary); }
.metric-icon-sm.gold { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.metric-item-sm .metric-info-sm .metric-value-sm { font-size: 16px; font-weight: 700; }
.metric-item-sm .metric-info-sm .metric-label-sm { font-size: 10px; color: var(--text-muted); }
.metric-item-sm.highlight { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); }
.metric-item-sm.highlight .metric-value-sm { color: var(--warning); }

.top-strategies-list { display: flex; flex-direction: column; gap: 8px; }
.top-strategy-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.top-strategy-item .rank { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-dark); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.top-strategy-item .rank.gold { background: linear-gradient(135deg, #FFD700, #FFA500); color: #333; }
.top-strategy-item .rank.silver { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); color: #333; }
.top-strategy-item .rank.bronze { background: linear-gradient(135deg, #CD7F32, #B87333); color: white; }
.top-strategy-item .strategy-info { flex: 1; }
.top-strategy-item .strategy-name { font-size: 13px; font-weight: 600; }
.top-strategy-item .strategy-category { font-size: 11px; color: var(--text-muted); }
.top-strategy-item .strategy-effect { font-size: 14px; font-weight: 700; color: var(--success); }

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 2000;
}

.toast.success {
  border-color: var(--success);
}

.toast.success i {
  color: var(--success);
}

.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

/* Responsive */
@media (max-width: 1400px) {
  .strategy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stats-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .strategy-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .analysis-grid,
  .impact-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
