<template>
  <div class="marketing-page">
    <div class="marketing-header">
      <div class="header-left">
        <div class="data-title">📧 自动营销</div>
        <p class="header-desc">多渠道自动化营销，AI 智能生成个性化内容</p>
      </div>
      <div class="header-actions">
        <button class="btn btn-secondary" @click="showHistoryModal = true">
          <i class="fas fa-history"></i> 历史活动
        </button>
        <button class="btn btn-secondary" @click="showTemplatesModal = true">
          <i class="fas fa-file-alt"></i> 模板库
        </button>
        <button class="btn btn-primary" @click="openCreateModal">
          <i class="fas fa-plus"></i> 创建营销活动
        </button>
      </div>
    </div>

    <!-- Stats -->
    <div class="stats-row">
      <div class="stat-card-lg">
        <div class="stat-icon-lg blue"><i class="fas fa-paper-plane"></i></div>
        <div class="stat-content-lg">
          <h3>{{ formatNumber(marketingStats.totalSent) }}</h3>
          <p>本月发送</p>
        </div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg green"><i class="fas fa-envelope-open"></i></div>
        <div class="stat-content-lg">
          <h3>{{ marketingStats.openRate }}%</h3>
          <p>平均打开率</p>
        </div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg purple"><i class="fas fa-mouse-pointer"></i></div>
        <div class="stat-content-lg">
          <h3>{{ marketingStats.clickRate }}%</h3>
          <p>点击率</p>
        </div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg orange"><i class="fas fa-reply"></i></div>
        <div class="stat-content-lg">
          <h3>{{ marketingStats.replyRate }}%</h3>
          <p>回复率</p>
        </div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg success"><i class="fas fa-shield-alt"></i></div>
        <div class="stat-content-lg">
          <h3>{{ marketingStats.protectedCustomers }}</h3>
          <p>受保护客户</p>
        </div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg warning"><i class="fas fa-exclamation-circle"></i></div>
        <div class="stat-content-lg">
          <h3>{{ marketingStats.pendingReview }}</h3>
          <p>待审核</p>
        </div>
      </div>
    </div>

    <!-- Tabs -->
    <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>

    <!-- Campaigns Grid -->
    <div class="campaigns-grid">
      <div v-for="campaign in filteredCampaigns" :key="campaign.id" 
           class="campaign-card" @click="showCampaignDetail(campaign)">
        <div class="card-header">
          <div class="card-icon" :style="{ background: campaign.iconBg }">
            <i :class="campaign.icon" :style="{ color: campaign.iconColor }"></i>
          </div>
          <span class="status-badge" :class="campaign.status">{{ getStatusLabel(campaign.status) }}</span>
        </div>
        <div class="card-title">{{ campaign.name }}</div>
        <div class="card-desc">{{ campaign.description }}</div>
        <div class="card-channels">
          <span v-for="ch in campaign.channels" :key="ch" class="channel-tag">
            <i :class="getChannelIcon(ch)"></i> {{ ch }}
          </span>
        </div>
        <div class="card-stats">
          <div class="stat-item">
            <span class="stat-value">{{ formatNumber(campaign.stats.sent) }}</span>
            <span class="stat-label">已发送</span>
          </div>
          <div class="stat-item">
            <span class="stat-value success">{{ campaign.stats.openRate }}%</span>
            <span class="stat-label">打开率</span>
          </div>
          <div class="stat-item">
            <span class="stat-value primary">{{ campaign.stats.replyRate }}%</span>
            <span class="stat-label">回复率</span>
          </div>
        </div>
        <div class="card-progress">
          <div class="progress-header">
            <span>进度</span>
            <span>{{ campaign.progress }}%</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: campaign.progress + '%' }"></div>
          </div>
        </div>
        <div class="card-actions" @click.stop>
          <button class="btn btn-secondary btn-sm" @click.stop="openOpenedCustomers(campaign)" :title="`打开邮件: ${campaign.openedCustomers}个客户`">
            <i class="fas fa-envelope-open"></i> {{ campaign.openedCustomers }}
          </button>
          <button class="btn btn-secondary btn-sm" @click.stop="openReplyReview(campaign)" :title="`回复邮件: ${campaign.repliedCustomers}个客户`">
            <i class="fas fa-reply"></i> {{ campaign.repliedCustomers }}
          </button>
          <button class="btn btn-secondary btn-sm" @click="openInterventionModal(campaign)" title="人工干预">
            <i class="fas fa-hand-paper"></i>
          </button>
          <button class="btn btn-primary btn-sm" @click="openAIGenerator(campaign)">
            <i class="fas fa-magic"></i> AI生成
          </button>
        </div>
      </div>
    </div>

    <!-- Campaign Detail Modal -->
    <div v-if="showCampaignDetailModal" class="modal-overlay" @click.self="showCampaignDetailModal = false">
      <div class="modal campaign-detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-chart-bar"></i> 活动详情
            <span class="detail-status" :class="selectedCampaign?.status">{{ getStatusLabel(selectedCampaign?.status) }}</span>
          </div>
          <button class="modal-close" @click="showCampaignDetailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" v-if="selectedCampaign">
          <!-- 基本信息 -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-info-circle"></i> 基本信息</h4>
            </div>
            <div class="detail-grid">
              <div class="detail-item">
                <label>活动名称</label>
                <span>{{ selectedCampaign.name }}</span>
              </div>
              <div class="detail-item">
                <label>活动类型</label>
                <span>{{ selectedCampaign.type || '潜客开发' }}</span>
              </div>
              <div class="detail-item">
                <label>优先级</label>
                <span class="priority-badge" :class="selectedCampaign.priority || 'medium'">{{ getPriorityLabel(selectedCampaign.priority || 'medium') }}</span>
              </div>
              <div class="detail-item">
                <label>负责人</label>
                <span>{{ selectedCampaign.owner || '张经理' }}</span>
              </div>
              <div class="detail-item">
                <label>创建时间</label>
                <span>{{ selectedCampaign.createdAt || '2026-03-15 10:30' }}</span>
              </div>
              <div class="detail-item">
                <label>活动周期</label>
                <span>{{ selectedCampaign.dateRange || '2026-03-15 至 2026-04-15' }}</span>
              </div>
              <div class="detail-item full-width">
                <label>活动描述</label>
                <span>{{ selectedCampaign.description }}</span>
              </div>
            </div>
          </div>

          <!-- 核心数据 -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-chart-line"></i> 核心数据</h4>
              <div class="progress-info">达成 {{ selectedCampaign.progress }}%</div>
            </div>
            <div class="detail-progress-bar">
              <div class="progress-fill" :style="{ width: selectedCampaign.progress + '%' }"></div>
            </div>
            <div class="metrics-grid">
              <div class="metric-card">
                <div class="metric-icon blue"><i class="fas fa-paper-plane"></i></div>
                <div class="metric-content">
                  <div class="metric-value">{{ formatNumber(selectedCampaign.stats.sent) }}</div>
                  <div class="metric-label">已发送</div>
                </div>
              </div>
              <div class="metric-card">
                <div class="metric-icon green"><i class="fas fa-envelope-open"></i></div>
                <div class="metric-content">
                  <div class="metric-value">{{ Math.round(selectedCampaign.stats.sent * selectedCampaign.stats.openRate / 100) }}</div>
                  <div class="metric-label">打开数 ({{ selectedCampaign.stats.openRate }}%)</div>
                </div>
              </div>
              <div class="metric-card">
                <div class="metric-icon purple"><i class="fas fa-reply"></i></div>
                <div class="metric-content">
                  <div class="metric-value">{{ Math.round(selectedCampaign.stats.sent * selectedCampaign.stats.replyRate / 100) }}</div>
                  <div class="metric-label">回复数 ({{ selectedCampaign.stats.replyRate }}%)</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 触达渠道 -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-bullhorn"></i> 触达渠道</h4>
            </div>
            <div class="channel-detail-list">
              <div v-for="ch in selectedCampaign.channels.filter(ch => ch !== 'WhatsApp' && ch !== 'LinkedIn')" :key="ch" class="channel-detail-item">
                <div class="channel-icon-wrapper" :style="getChannelStyleByName(ch)">
                  <i :class="getChannelIcon(ch)"></i>
                </div>
                <div class="channel-detail-info">
                  <div class="channel-detail-name">{{ ch }}</div>
                  <div class="channel-detail-stats">
                    <span>发送: {{ Math.round(selectedCampaign.stats.sent / selectedCampaign.channels.length) }}</span>
                    <span>打开率: {{ selectedCampaign.stats.openRate }}%</span>
                    <span>回复率: {{ selectedCampaign.stats.replyRate }}%</span>
                  </div>
                </div>
                <div class="channel-status">
                  <span class="status-dot active"></span> 运行中
                </div>
              </div>
            </div>
          </div>

          <!-- 目标客户 -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-users"></i> 目标客户</h4>
            </div>
            <div class="target-info">
              <div class="target-stat">
                <div class="target-value">{{ selectedCampaign.targetCount || 847 }}</div>
                <div class="target-label">目标客户数</div>
              </div>
              <div class="target-stat">
                <div class="target-value">{{ selectedCampaign.reachedCount || 623 }}</div>
                <div class="target-label">已触达</div>
              </div>
              <div class="target-stat">
                <div class="target-value">{{ selectedCampaign.pendingCount || 224 }}</div>
                <div class="target-label">待触达</div>
              </div>
            </div>
          </div>

          <!-- SOP 序列 -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-robot"></i> SOP 自动化序列</h4>
            </div>
            <div class="sop-detail">
              <div class="sop-header-info">
                <span class="sop-name">{{ selectedCampaign.sopTemplate || '标准开发序列' }}</span>
                <span class="sop-steps">4 步序列</span>
              </div>
              <div class="sop-timeline-detail">
                <div class="sop-step-item completed">
                  <div class="step-marker"><i class="fas fa-check"></i></div>
                  <div class="step-content">
                    <div class="step-title">首封介绍邮件</div>
                    <div class="step-meta">第1天 · 邮件 · 已完成</div>
                  </div>
                </div>
                <div class="sop-step-item completed">
                  <div class="step-marker"><i class="fas fa-check"></i></div>
                  <div class="step-content">
                    <div class="step-title">产品优势介绍</div>
                    <div class="step-meta">第3天 · 邮件 · 已完成</div>
                  </div>
                </div>
                <div class="sop-step-item current">
                  <div class="step-marker">3</div>
                  <div class="step-content">
                    <div class="step-title">案例分享</div>
                    <div class="step-meta">第7天 · LinkedIn · 进行中</div>
                  </div>
                </div>
                <div class="sop-step-item pending">
                  <div class="step-marker">4</div>
                  <div class="step-content">
                    <div class="step-title">电话跟进</div>
                    <div class="step-meta">第14天 · 电话 · 待执行</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 最近互动 -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-comments"></i> 最近互动</h4>
              <button class="btn-link" @click="showAllInteractions">查看全部</button>
            </div>
            <div class="interactions-list">
              <div class="interaction-item">
                <div class="interaction-avatar">M</div>
                <div class="interaction-content">
                  <div class="interaction-header">
                    <span class="interaction-name">Mohammed Al-Rashid</span>
                    <span class="interaction-time">10分钟前</span>
                  </div>
                  <div class="interaction-text">回复了您的邮件，询问价格和交期</div>
                  <div class="interaction-tags">
                    <span class="tag reply">回复</span>
                    <span class="tag interested">高意向</span>
                  </div>
                </div>
              </div>
              <div class="interaction-item">
                <div class="interaction-avatar">A</div>
                <div class="interaction-content">
                  <div class="interaction-header">
                    <span class="interaction-name">Ahmed Hassan</span>
                    <span class="interaction-time">1小时前</span>
                  </div>
                  <div class="interaction-text">打开了您的邮件</div>
                  <div class="interaction-tags">
                    <span class="tag open">打开</span>
                  </div>
                </div>
              </div>
              <div class="interaction-item">
                <div class="interaction-avatar">S</div>
                <div class="interaction-content">
                  <div class="interaction-header">
                    <span class="interaction-name">Sarah Williams</span>
                    <span class="interaction-time">3小时前</span>
                  </div>
                  <div class="interaction-text">点击了邮件中的产品链接</div>
                  <div class="interaction-tags">
                    <span class="tag click">点击</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="duplicateCampaign(selectedCampaign)">
            <i class="fas fa-copy"></i> 复制活动
          </button>
          <button class="btn btn-secondary" @click="exportCampaignReport(selectedCampaign)">
            <i class="fas fa-download"></i> 导出报告
          </button>
          <button class="btn btn-secondary" @click="showCampaignDetailModal = false">关闭</button>
          <button class="btn btn-primary" @click="editCampaign(selectedCampaign)">
            <i class="fas fa-edit"></i> 编辑活动
          </button>
        </div>
      </div>
    </div>

    <!-- All Interactions Modal -->
    <div v-if="showInteractionsModal" class="modal-overlay" @click.self="showInteractionsModal = false">
      <div class="modal interactions-detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-comments"></i> 互动详情 - {{ selectedCampaign?.name }}
            <span class="interaction-count">{{ selectedCampaignInteractions.length }}条记录</span>
          </div>
          <button class="modal-close" @click="showInteractionsModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- 筛选 -->
          <div class="interactions-filters">
            <button class="filter-btn active">全部</button>
            <button class="filter-btn"><i class="fas fa-reply"></i> 回复</button>
            <button class="filter-btn"><i class="fas fa-envelope-open"></i> 打开</button>
            <button class="filter-btn"><i class="fas fa-mouse-pointer"></i> 点击</button>
          </div>

          <!-- 互动列表 -->
          <div class="all-interactions-list">
            <div v-for="item in selectedCampaignInteractions" :key="item.id" class="interaction-detail-item">
              <div class="interaction-detail-avatar" :class="item.type">{{ item.avatar }}</div>
              <div class="interaction-detail-content">
                <div class="interaction-detail-header">
                  <div class="interaction-detail-info">
                    <span class="interaction-detail-name">{{ item.name }}</span>
                    <span class="interaction-detail-company">{{ item.company }}</span>
                  </div>
                  <div class="interaction-detail-time">{{ item.time }}</div>
                </div>
                <div class="interaction-detail-action">
                  <span class="action-badge" :class="item.type">
                    <i :class="{
                      'reply': 'fas fa-reply',
                      'open': 'fas fa-envelope-open',
                      'click': 'fas fa-mouse-pointer'
                    }[item.type]"></i>
                    {{ item.action }}
                  </span>
                  <span class="sentiment-badge" :class="item.sentiment">{{ item.sentiment }}</span>
                  <span class="priority-badge" :class="item.priority">{{ item.priority }}优先级</span>
                </div>
                <div class="interaction-detail-text">{{ item.content }}</div>
                <div class="interaction-detail-contact">
                  <span><i class="fas fa-envelope"></i> {{ item.email }}</span>
                  <span><i class="fas fa-phone"></i> {{ item.phone }}</span>
                </div>
              </div>
              <div class="interaction-detail-actions">
                <button class="btn btn-sm btn-primary" v-if="item.interested">
                  <i class="fas fa-user-plus"></i> 立即跟进
                </button>
                <button class="btn btn-sm btn-secondary">
                  <i class="fas fa-envelope"></i> 发邮件
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showInteractionsModal = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- Create Campaign Modal -->
    <div v-if="showCreateModal" class="modal-overlay" @click.self="closeCreateModal">
      <div class="modal create-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-plus-circle"></i> 创建营销活动</div>
          <button class="modal-close" @click="closeCreateModal"><i class="fas fa-times"></i></button>
        </div>
        
        <div class="modal-body">
          <!-- Step Indicator -->
          <div class="step-indicator">
            <div class="step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
              <div class="step-number">1</div>
              <div class="step-label">基本信息</div>
            </div>
            <div class="step-line" :class="{ active: currentStep > 1 }"></div>
            <div class="step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
              <div class="step-number">2</div>
              <div class="step-label">目标客户</div>
            </div>
            <div class="step-line" :class="{ active: currentStep > 2 }"></div>
            <div class="step" :class="{ active: currentStep >= 3, completed: currentStep > 3 }">
              <div class="step-number">3</div>
              <div class="step-label">触达渠道</div>
            </div>
            <div class="step-line" :class="{ active: currentStep > 3 }"></div>
            <div class="step" :class="{ active: currentStep >= 4, completed: currentStep > 4 }">
              <div class="step-number">4</div>
              <div class="step-label">自动化规则</div>
            </div>
            <div class="step-line" :class="{ active: currentStep > 4 }"></div>
            <div class="step" :class="{ active: currentStep >= 5 }">
              <div class="step-number">5</div>
              <div class="step-label">预览确认</div>
            </div>
          </div>

          <!-- Step 1: Basic Info -->
          <div v-if="currentStep === 1" class="step-content">
            <h4><i class="fas fa-info-circle"></i> 活动基本信息</h4>
            <div class="form-group">
              <label class="form-label">活动名称 <span class="required">*</span></label>
              <input type="text" class="form-input" v-model="newCampaign.name" placeholder="例如：2026春季中东客户开发活动">
              <div class="form-hint" v-if="!newCampaign.name">建议格式：时间+区域+目标+活动类型</div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">活动类型</label>
                <select class="form-select" v-model="newCampaign.type">
                  <option value="prospect">潜客开发</option>
                  <option value="nurture">客户培育</option>
                  <option value="reactivate">客户唤醒</option>
                  <option value="promote">产品推广</option>
                  <option value="seasonal">节日营销</option>
                  <option value="exhibition">展会跟进</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">优先级</label>
                <select class="form-select" v-model="newCampaign.priority">
                  <option value="urgent">紧急</option>
                  <option value="high">高优先</option>
                  <option value="medium">中等</option>
                  <option value="low">低优先</option>
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">开始日期</label>
                <input type="date" class="form-input" v-model="newCampaign.startDate">
              </div>
              <div class="form-group">
                <label class="form-label">结束日期</label>
                <input type="date" class="form-input" v-model="newCampaign.endDate">
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">负责人</label>
                <select class="form-select" v-model="newCampaign.owner">
                  <option value="">选择负责人</option>
                  <option value="sales1">张经理</option>
                  <option value="sales2">李主管</option>
                  <option value="sales3">王小明</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">活动描述</label>
              <textarea class="form-textarea" v-model="newCampaign.description" rows="3" placeholder="描述本次营销活动的目标和策略..."></textarea>
            </div>
            <div class="form-group">
              <label class="form-label">活动目标</label>
              <div class="goal-inputs">
                <div class="goal-item">
                  <i class="fas fa-envelope"></i>
                  <input type="number" class="goal-input" v-model="newCampaign.goals.sent" placeholder="0">
                  <span>发送量</span>
                </div>
                <div class="goal-item">
                  <i class="fas fa-envelope-open"></i>
                  <input type="number" class="goal-input" v-model="newCampaign.goals.openRate" placeholder="0">
                  <span>% 打开率</span>
                </div>
                <div class="goal-item">
                  <i class="fas fa-reply"></i>
                  <input type="number" class="goal-input" v-model="newCampaign.goals.replyRate" placeholder="0">
                  <span>% 回复率</span>
                </div>
              </div>
            </div>
            <div class="ai-suggest-section" v-if="newCampaign.name">
              <h5><i class="fas fa-lightbulb"></i> AI 建议</h5>
              <div class="ai-suggestions">
                <div class="ai-suggestion" @click="applySuggestion('name')">
                  <i class="fas fa-magic"></i>
                  <span>根据类型生成最佳活动名称</span>
                </div>
                <div class="ai-suggestion" @click="applySuggestion('desc')">
                  <i class="fas fa-file-alt"></i>
                  <span>智能生成活动描述和策略</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Step 2: Target Customers -->
          <div v-if="currentStep === 2" class="step-content">
            <h4><i class="fas fa-users"></i> 目标客户群</h4>
            
            <!-- AI智能推荐 -->
            <div class="ai-recommend-section">
              <div class="ai-recommend-header">
                <i class="fas fa-robot"></i>
                <span>AI 智能推荐客户</span>
              </div>
              <div class="ai-recommend-tags">
                <span class="ai-tag" :class="{ active: newCampaign.aiRecommend === 'high-value' }" @click="newCampaign.aiRecommend = 'high-value'">
                  <i class="fas fa-crown"></i> 高价值客户
                </span>
                <span class="ai-tag" :class="{ active: newCampaign.aiRecommend === 'recent' }" @click="newCampaign.aiRecommend = 'recent'">
                  <i class="fas fa-clock"></i> 最近互动
                </span>
                <span class="ai-tag" :class="{ active: newCampaign.aiRecommend === 'similar' }" @click="newCampaign.aiRecommend = 'similar'">
                  <i class="fas fa-copy"></i> 相似客户
                </span>
                <span class="ai-tag" :class="{ active: newCampaign.aiRecommend === 'dormant' }" @click="newCampaign.aiRecommend = 'dormant'">
                  <i class="fas fa-moon"></i> 沉睡唤醒
                </span>
              </div>
            </div>

            <div class="quick-segments">
              <div v-for="seg in segmentOptions" :key="seg.id" 
                   class="segment-option" :class="{ selected: newCampaign.segment === seg.id }"
                   @click="newCampaign.segment = seg.id">
                <i :class="seg.icon"></i>
                <div class="segment-info">
                  <div class="segment-name">{{ seg.name }}</div>
                  <div class="segment-count">{{ seg.count }} 位客户</div>
                </div>
                <div class="segment-check" v-if="newCampaign.segment === seg.id">
                  <i class="fas fa-check-circle"></i>
                </div>
              </div>
            </div>
            
            <div class="advanced-filters">
              <div class="filter-header">
                <h5><i class="fas fa-filter"></i> 高级筛选</h5>
                <button class="btn-link" @click="clearFilters">清除筛选</button>
              </div>
              <div class="filter-row">
                <div class="form-group">
                  <label class="form-label">地区</label>
                  <select class="form-select" v-model="newCampaign.filters.region">
                    <option value="">全部地区</option>
                    <option value="middle-east">中东</option>
                    <option value="europe">欧洲</option>
                    <option value="north-america">北美</option>
                    <option value="southeast-asia">东南亚</option>
                    <option value="africa">非洲</option>
                    <option value="south-america">南美</option>
                  </select>
                </div>
                <div class="form-group">
                  <label class="form-label">行业</label>
                  <select class="form-select" v-model="newCampaign.filters.industry">
                    <option value="">全部行业</option>
                    <option value="datacenter">数据中心</option>
                    <option value="consumer">消费电子</option>
                    <option value="distributor">电子分销</option>
                    <option value="retail">零售</option>
                    <option value="manufacturing">制造业</option>
                  </select>
                </div>
              </div>
              <div class="filter-row">
                <div class="form-group">
                  <label class="form-label">意向分数</label>
                  <select class="form-select" v-model="newCampaign.filters.scoreRange">
                    <option value="">不限</option>
                    <option value="high">80-100分</option>
                    <option value="medium">60-79分</option>
                    <option value="low">40-59分</option>
                  </select>
                </div>
                <div class="form-group">
                  <label class="form-label">客户规模</label>
                  <select class="form-select" v-model="newCampaign.filters.companySize">
                    <option value="">不限</option>
                    <option value="large">大型企业(500+)</option>
                    <option value="medium">中型企业(100-500)</option>
                    <option value="small">小微企业(<100)</option>
                  </select>
                </div>
              </div>
              <!-- 自定义关键词搜索 -->
              <div class="form-group">
                <label class="form-label">关键词搜索</label>
                <div class="keyword-search">
                  <input type="text" class="form-input" v-model="newCampaign.filters.keyword" placeholder="搜索公司名、联系人、产品关键词...">
                  <button class="btn btn-secondary"><i class="fas fa-search"></i></button>
                </div>
              </div>
              <!-- 已选客户标签 -->
              <div class="selected-tags" v-if="newCampaign.filters.selectedTags.length > 0">
                <span v-for="tag in newCampaign.filters.selectedTags" :key="tag" class="selected-tag">
                  {{ tag }}
                  <i class="fas fa-times" @click="removeTag(tag)"></i>
                </span>
              </div>
            </div>
            
            <div class="preview-count">
              <i class="fas fa-users"></i>
              <div class="count-info">
                <div class="count-value">已选择 <strong>{{ selectedCustomerCount }}</strong> 位客户</div>
                <div class="count-detail">基于当前筛选条件</div>
              </div>
              <button class="btn btn-sm btn-outline" @click="showCustomerPreview = true">
                <i class="fas fa-eye"></i> 预览客户
              </button>
            </div>
            
            <!-- 客户来源分布 -->
            <div class="customer-source">
              <h5><i class="fas fa-chart-pie"></i> 客户来源分布</h5>
              <div class="source-bars">
                <div class="source-item">
                  <span class="source-label">AI推荐</span>
                  <div class="source-bar"><div class="source-fill" style="width: 45%; background: var(--primary);"></div></div>
                  <span class="source-value">45%</span>
                </div>
                <div class="source-item">
                  <span class="source-label">展会获取</span>
                  <div class="source-bar"><div class="source-fill" style="width: 25%; background: var(--success);"></div></div>
                  <span class="source-value">25%</span>
                </div>
                <div class="source-item">
                  <span class="source-label">官网注册</span>
                  <div class="source-bar"><div class="source-fill" style="width: 20%; background: var(--info);"></div></div>
                  <span class="source-value">20%</span>
                </div>
                <div class="source-item">
                  <span class="source-label">转介绍</span>
                  <div class="source-bar"><div class="source-fill" style="width: 10%; background: var(--warning);"></div></div>
                  <span class="source-value">10%</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Step 3: Channels -->
          <div v-if="currentStep === 3" class="step-content">
            <h4><i class="fas fa-bullhorn"></i> 触达渠道配置</h4>

            <div class="channel-grid">
              <div v-for="ch in availableChannels" :key="ch.id"
                   class="channel-card"
                   :class="{ selected: newCampaign.channels.includes(ch.id), disabled: !ch.enabled }"
                   @click="ch.enabled && toggleChannel(ch.id)">
                <div class="channel-icon" :style="{ background: ch.iconBg, color: ch.iconColor }">
                  <i :class="ch.icon"></i>
                </div>
                <div class="channel-info">
                  <div class="channel-name">{{ ch.name }}</div>
                  <div class="channel-desc">{{ ch.description }}</div>
                  <div class="channel-stats-mini">
                    <span><i class="fas fa-chart-line"></i> {{ ch.avgOpenRate }}% 打开率</span>
                  </div>
                </div>
                <div class="channel-check" v-if="newCampaign.channels.includes(ch.id)">
                  <i class="fas fa-check-circle"></i>
                </div>
              </div>
            </div>
            
            <!-- 邮件设置 -->
            <div v-if="newCampaign.channels.includes('email')" class="channel-settings">
              <h5><i class="fas fa-envelope"></i> 邮件设置</h5>
              <div class="form-row">
                <div class="form-group">
                  <label class="form-label">发件邮箱</label>
                  <select class="form-select" v-model="newCampaign.emailSender">
                    <option>sales@company.com</option>
                    <option>marketing@company.com</option>
                    <option>support@company.com</option>
                  </select>
                </div>
                <div class="form-group">
                  <label class="form-label">发送时间</label>
                  <select class="form-select" v-model="newCampaign.emailSendTime">
                    <option value="optimal">AI推荐最优时间</option>
                    <option value="morning">上午 9:00-11:00</option>
                    <option value="afternoon">下午 14:00-16:00</option>
                    <option value="evening">晚上 19:00-21:00</option>
                  </select>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group">
                  <label class="form-label">生成方式</label>
                  <select class="form-select" v-model="newCampaign.emailTemplate">
                    <option value="default">默认模板</option>
                    <option value="professional">专业商务</option>
                    <option value="friendly">友好亲切</option>
                    <option value="minimal">极简风格</option>
                  </select>
                </div>
                <div class="form-group">
                  <label class="form-label">每批发送量</label>
                  <select class="form-select" v-model="newCampaign.batchSize">
                    <option value="50">50封/批</option>
                    <option value="100">100封/批</option>
                    <option value="200">200封/批</option>
                    <option value="500">500封/批</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">邮件主题 <span class="required">*</span></label>
                <div class="subject-input-group">
                  <input type="text" class="form-input" v-model="newCampaign.emailSubject" placeholder="输入邮件主题">
                  <button class="btn btn-primary" @click="generateSubjectAI">
                    <i class="fas fa-magic"></i> AI优化
                  </button>
                </div>
                <div class="subject-suggestions" v-if="showSubjectSuggestions">
                  <div class="suggestion-header">AI 推荐主题：</div>
                  <div v-for="subj in subjectSuggestions" :key="subj" class="suggestion-item" @click="selectSubject(subj)">
                    {{ subj }}
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">邮件预览文本</label>
                <input type="text" class="form-input" v-model="newCampaign.emailPreviewText" placeholder="邮件列表中显示的预览文字（可选）">
              </div>
            </div>

            <!-- WhatsApp设置 -->
            <div v-if="newCampaign.channels.includes('whatsapp')" class="channel-settings">
              <h5><i class="fab fa-whatsapp"></i> WhatsApp 设置</h5>
              <div class="form-row">
                <div class="form-group">
                  <label class="form-label">发送账号</label>
                  <select class="form-select" v-model="newCampaign.whatsappAccount">
                    <option>业务账号1</option>
                    <option>业务账号2</option>
                  </select>
                </div>
                <div class="form-group">
                  <label class="form-label">发送间隔</label>
                  <select class="form-select" v-model="newCampaign.whatsappInterval">
                    <option value="30">30秒/条</option>
                    <option value="60">1分钟/条</option>
                    <option value="120">2分钟/条</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">消息模板</label>
                <textarea class="form-textarea" v-model="newCampaign.whatsappTemplate" rows="3" placeholder="输入 WhatsApp 消息模板..."></textarea>
              </div>
            </div>

            <!-- LinkedIn设置 -->
            <div v-if="newCampaign.channels.includes('linkedin')" class="channel-settings">
              <h5><i class="fab fa-linkedin"></i> LinkedIn 设置</h5>
              <div class="form-row">
                <div class="form-group">
                  <label class="form-label">操作类型</label>
                  <select class="form-select" v-model="newCampaign.linkedinAction">
                    <option value="message">发送消息</option>
                    <option value="connect">发送连接请求</option>
                    <option value="inmail">InMail</option>
                  </select>
                </div>
                <div class="form-group">
                  <label class="form-label">每日上限</label>
                  <select class="form-select" v-model="newCampaign.linkedinLimit">
                    <option value="20">20次/天</option>
                    <option value="30">30次/天</option>
                    <option value="50">50次/天</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <!-- Step 4: Automation Rules -->
          <div v-if="currentStep === 4" class="step-content">
            <h4><i class="fas fa-robot"></i> 自动化规则</h4>
            
            <!-- SOP 序列模板 -->
            <div class="sop-section">
              <h5><i class="fas fa-magic"></i> SOP 序列模板</h5>
              <div class="sop-grid">
                <div v-for="sop in sopTemplates" :key="sop.id"
                     class="sop-card" :class="{ selected: newCampaign.sopTemplate === sop.id }"
                     @click="newCampaign.sopTemplate = sop.id">
                  <div class="sop-icon">{{ sop.icon }}</div>
                  <div class="sop-info">
                    <div class="sop-name">{{ sop.name }}</div>
                    <div class="sop-steps">{{ sop.steps }} 步序列</div>
                    <div class="sop-desc">{{ sop.description }}</div>
                  </div>
                  <div class="sop-check" v-if="newCampaign.sopTemplate === sop.id">
                    <i class="fas fa-check-circle"></i>
                  </div>
                </div>
              </div>
              <!-- SOP 预览 -->
              <div class="sop-preview" v-if="selectedSopTemplate">
                <div class="sop-preview-header">
                  <span>{{ selectedSopTemplate.name }} - 序列步骤预览</span>
                  <button class="btn-link" @click="editSopTemplate">自定义</button>
                </div>
                <div class="sop-timeline">
                  <div v-for="(step, idx) in selectedSopTemplate.stepsDetail" :key="idx" class="sop-step">
                    <div class="sop-step-marker">{{ idx + 1 }}</div>
                    <div class="sop-step-content">
                      <div class="sop-step-title">{{ step.title }}</div>
                      <div class="sop-step-meta">
                        <span><i class="fas fa-clock"></i> 第{{ step.day }}天</span>
                        <span><i :class="step.channelIcon"></i> {{ step.channel }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 自动跟进规则 -->
            <div class="rules-section">
              <h5><i class="fas fa-sitemap"></i> 跟进规则</h5>
              <div class="rule-item">
                <div class="rule-toggle" :class="{ active: newCampaign.rules.noOpenFollowup }"
                     @click="newCampaign.rules.noOpenFollowup = !newCampaign.rules.noOpenFollowup"></div>
                <div class="rule-content">
                  <div class="rule-title">未打开邮件自动跟进</div>
                  <div class="rule-desc">3天后发送提醒邮件，更换主题行</div>
                </div>
                <div class="rule-config" v-if="newCampaign.rules.noOpenFollowup">
                  <select class="mini-select" v-model="newCampaign.rules.noOpenFollowupDays">
                    <option value="2">2天后</option>
                    <option value="3">3天后</option>
                    <option value="5">5天后</option>
                    <option value="7">7天后</option>
                  </select>
                </div>
              </div>
              <div class="rule-item">
                <div class="rule-toggle" :class="{ active: newCampaign.rules.noReplyFollowup }"
                     @click="newCampaign.rules.noReplyFollowup = !newCampaign.rules.noReplyFollowup"></div>
                <div class="rule-content">
                  <div class="rule-title">未回复自动跟进</div>
                  <div class="rule-desc">7天后跟进</div>
                </div>
                <div class="rule-config" v-if="newCampaign.rules.noReplyFollowup">
                  <select class="mini-select" v-model="newCampaign.rules.noReplyFollowupDays">
                    <option value="5">5天后</option>
                    <option value="7">7天后</option>
                    <option value="10">10天后</option>
                  </select>
                </div>
              </div>
              <div class="rule-item">
                <div class="rule-toggle" :class="{ active: newCampaign.rules.stopOnReply }"
                     @click="newCampaign.rules.stopOnReply = !newCampaign.rules.stopOnReply"></div>
                <div class="rule-content">
                  <div class="rule-title">客户回复后停止自动化</div>
                  <div class="rule-desc">检测到客户回复后不再发送，转人工跟进</div>
                </div>
              </div>
            </div>

            <!-- A/B 测试 -->
            <div class="ab-test-section">
              <div class="ab-test-header">
                <h5><i class="fas fa-flask"></i> A/B 测试</h5>
                <div class="rule-toggle" :class="{ active: newCampaign.abTest.enabled }"
                     @click="newCampaign.abTest.enabled = !newCampaign.abTest.enabled"></div>
              </div>
              <div class="ab-test-config" v-if="newCampaign.abTest.enabled">
                <div class="form-row">
                  <div class="form-group">
                    <label class="form-label">测试变量</label>
                    <select class="form-select" v-model="newCampaign.abTest.variable">
                      <option value="subject">邮件主题</option>
                      <option value="content">邮件内容</option>
                      <option value="sendTime">发送时间</option>
                      <option value="fromName">发件人名称</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label class="form-label">测试比例</label>
                    <select class="form-select" v-model="newCampaign.abTest.ratio">
                      <option value="50">50% : 50%</option>
                      <option value="30">30% : 70%</option>
                      <option value="20">20% : 80%</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label class="form-label">胜出条件</label>
                  <select class="form-select" v-model="newCampaign.abTest.winnerCriteria">
                    <option value="openRate">打开率最高</option>
                    <option value="clickRate">点击率最高</option>
                    <option value="replyRate">回复率最高</option>
                  </select>
                </div>
                <div class="ab-test-preview">
                  <div class="ab-variant">
                    <span class="variant-label">A 版本</span>
                    <span class="variant-desc">{{ newCampaign.emailSubject || '原主题' }}</span>
                  </div>
                  <div class="ab-variant">
                    <span class="variant-label">B 版本</span>
                    <input type="text" class="variant-input" v-model="newCampaign.abTest.variantB" placeholder="输入测试主题...">
                  </div>
                </div>
              </div>
            </div>

            <!-- 智能调度 -->
            <div class="smart-schedule-section">
              <h5><i class="fas fa-clock"></i> 智能调度</h5>
              <div class="schedule-options">
                <label class="schedule-option" :class="{ active: newCampaign.scheduleMode === 'asap' }">
                  <input type="radio" v-model="newCampaign.scheduleMode" value="asap">
                  <div class="option-content">
                    <div class="option-title"><i class="fas fa-bolt"></i> 立即发送</div>
                    <div class="option-desc">立即开始执行活动</div>
                  </div>
                </label>
                <label class="schedule-option" :class="{ active: newCampaign.scheduleMode === 'scheduled' }">
                  <input type="radio" v-model="newCampaign.scheduleMode" value="scheduled">
                  <div class="option-content">
                    <div class="option-title"><i class="fas fa-calendar"></i> 定时发送</div>
                    <div class="option-desc">设置具体开始时间</div>
                  </div>
                </label>
                <label class="schedule-option" :class="{ active: newCampaign.scheduleMode === 'optimal' }">
                  <input type="radio" v-model="newCampaign.scheduleMode" value="optimal">
                  <div class="option-content">
                    <div class="option-title"><i class="fas fa-robot"></i> AI最优时间</div>
                    <div class="option-desc">根据客户行为自动选择最佳时间</div>
                  </div>
                </label>
              </div>
              <div class="schedule-time-config" v-if="newCampaign.scheduleMode === 'scheduled'">
                <div class="form-row">
                  <div class="form-group">
                    <label class="form-label">开始日期</label>
                    <input type="date" class="form-input" v-model="newCampaign.scheduledDate">
                  </div>
                  <div class="form-group">
                    <label class="form-label">开始时间</label>
                    <input type="time" class="form-input" v-model="newCampaign.scheduledTime">
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Step 5: Preview -->
          <div v-if="currentStep === 5" class="step-content">
            <h4><i class="fas fa-eye"></i> 活动预览</h4>
            
            <!-- 基本信息 -->
            <div class="preview-section">
              <div class="preview-section-header">
                <h5><i class="fas fa-info-circle"></i> 基本信息</h5>
                <button class="btn-link" @click="goToStep(1)">编辑</button>
              </div>
              <div class="preview-cards">
                <div class="preview-card">
                  <div class="preview-icon"><i class="fas fa-tag"></i></div>
                  <div class="preview-info">
                    <div class="preview-label">活动名称</div>
                    <div class="preview-value">{{ newCampaign.name || '未命名活动' }}</div>
                  </div>
                </div>
                <div class="preview-card">
                  <div class="preview-icon"><i class="fas fa-layer-group"></i></div>
                  <div class="preview-info">
                    <div class="preview-label">活动类型</div>
                    <div class="preview-value">{{ getTypeLabel(newCampaign.type) }}</div>
                  </div>
                </div>
                <div class="preview-card">
                  <div class="preview-icon"><i class="fas fa-flag"></i></div>
                  <div class="preview-info">
                    <div class="preview-label">优先级</div>
                    <div class="preview-value" :class="'priority-' + newCampaign.priority">{{ getPriorityLabel(newCampaign.priority) }}</div>
                  </div>
                </div>
                <div class="preview-card">
                  <div class="preview-icon"><i class="fas fa-user"></i></div>
                  <div class="preview-info">
                    <div class="preview-label">负责人</div>
                    <div class="preview-value">{{ getOwnerName(newCampaign.owner) || '未指定' }}</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 目标客户 -->
            <div class="preview-section">
              <div class="preview-section-header">
                <h5><i class="fas fa-users"></i> 目标客户</h5>
                <button class="btn-link" @click="goToStep(2)">编辑</button>
              </div>
              <div class="preview-cards">
                <div class="preview-card">
                  <div class="preview-icon"><i class="fas fa-users"></i></div>
                  <div class="preview-info">
                    <div class="preview-label">客户数量</div>
                    <div class="preview-value highlight">{{ selectedCustomerCount }} 位</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 触达渠道 -->
            <div class="preview-section">
              <div class="preview-section-header">
                <h5><i class="fas fa-bullhorn"></i> 触达渠道</h5>
                <button class="btn-link" @click="goToStep(3)">编辑</button>
              </div>
              <div class="preview-channels">
                <div v-for="chId in newCampaign.channels" :key="chId" class="preview-channel-item">
                  <div class="channel-badge" :style="getChannelStyle(chId)">
                    <i :class="getChannelIconById(chId)"></i>
                  </div>
                  <div class="channel-details">
                    <div class="channel-name">{{ getChannelName(chId) }}</div>
                    <div class="channel-config">{{ getChannelConfig(chId) }}</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 自动化规则 -->
            <div class="preview-section">
              <div class="preview-section-header">
                <h5><i class="fas fa-robot"></i> 自动化规则</h5>
                <button class="btn-link" @click="goToStep(4)">编辑</button>
              </div>
              <div class="preview-rules">
                <div class="rule-summary">
                  <span class="rule-badge">SOP: {{ selectedSopTemplate?.name || '未选择' }}</span>
                  <span class="rule-badge" v-if="newCampaign.rules.noOpenFollowup">未打开跟进</span>
                  <span class="rule-badge" v-if="newCampaign.rules.noReplyFollowup">未回复跟进</span>
                  <span class="rule-badge" v-if="newCampaign.rules.stopOnReply">回复后停止</span>
                  <span class="rule-badge highlight" v-if="newCampaign.abTest.enabled">A/B测试</span>
                </div>
              </div>
            </div>

            <!-- 警告提示 -->
            <div class="warning-section" v-if="hasWarnings">
              <h5><i class="fas fa-exclamation-triangle"></i> 注意事项</h5>
              <div class="warning-list">
                <div class="warning-item" v-if="selectedCustomerCount > 500">
                  <i class="fas fa-info-circle"></i>
                  <span>目标客户数量较多，建议分批发送以避免被标记为垃圾邮件</span>
                </div>
                <div class="warning-item" v-if="!newCampaign.emailSubject">
                  <i class="fas fa-exclamation-circle"></i>
                  <span>邮件主题未设置，请在渠道配置中添加</span>
                </div>
                <div class="warning-item" v-if="newCampaign.channels.length === 0">
                  <i class="fas fa-exclamation-circle"></i>
                  <span>尚未选择任何触达渠道</span>
                </div>
              </div>
            </div>

            <!-- 确认项 -->
            <div class="confirm-section">
              <h5><i class="fas fa-check-double"></i> 确认事项</h5>
              <label class="confirm-item">
                <input type="checkbox" v-model="confirmChecks.content">
                <span class="checkmark"></span>
                <span>已确认营销内容符合规范</span>
              </label>
              <label class="confirm-item">
                <input type="checkbox" v-model="confirmChecks.schedule">
                <span class="checkmark"></span>
                <span>已确认发送时间和频率合理</span>
              </label>
              <label class="confirm-item">
                <input type="checkbox" v-model="confirmChecks.compliance">
                <span class="checkmark"></span>
                <span>已确认符合反垃圾邮件法规（GDPR/CAN-SPAM）</span>
              </label>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button v-if="currentStep > 1" class="btn btn-secondary" @click="currentStep--">
            <i class="fas fa-arrow-left"></i> 上一步
          </button>
          <button v-else class="btn btn-secondary" @click="closeCreateModal">取消</button>
          <button v-if="currentStep < 5" class="btn btn-primary" @click="currentStep++">
            下一步 <i class="fas fa-arrow-right"></i>
          </button>
          <button v-else class="btn btn-primary" :disabled="!canCreate" @click="createCampaign">
            <i class="fas fa-rocket"></i> 创建活动
          </button>
        </div>
      </div>
    </div>

    <!-- Custom SOP Modal -->
    <div v-if="showCustomSopModal" class="modal-overlay" @click.self="showCustomSopModal = false">
      <div class="modal custom-sop-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-cogs"></i> 自定义 SOP 序列</div>
          <button class="modal-close" @click="showCustomSopModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- SOP 名称 -->
          <div class="form-group">
            <label class="form-label">序列名称 <span class="required">*</span></label>
            <input type="text" class="form-input" v-model="customSopData.name" placeholder="例如：我的自定义开发序列">
          </div>

          <!-- 步骤列表 -->
          <div class="custom-steps-section">
            <div class="section-header">
              <h5><i class="fas fa-list-ol"></i> 序列步骤</h5>
              <button class="btn btn-sm btn-primary" @click="addCustomSopStep">
                <i class="fas fa-plus"></i> 添加步骤
              </button>
            </div>
            
            <div class="custom-steps-list">
              <div v-for="(step, index) in customSopData.steps" :key="index" class="custom-step-item">
                <div class="step-number">{{ index + 1 }}</div>
                <div class="step-fields">
                  <div class="step-row">
                    <div class="form-group">
                      <label class="form-label">步骤名称</label>
                      <input type="text" class="form-input" v-model="step.title" placeholder="例如：发送产品介绍">
                    </div>
                    <div class="form-group">
                      <label class="form-label">间隔天数</label>
                      <input type="number" class="form-input" v-model="step.day" min="1" max="30">
                    </div>
                  </div>
                  <div class="step-row">
                    <div class="form-group">
                      <label class="form-label">触达渠道</label>
                      <select class="form-select" v-model="step.channel" @change="updateChannelIcon(index)">
                        <option value="email">邮件</option>
                        <option value="whatsapp">WhatsApp</option>
                        <option value="linkedin">LinkedIn</option>
                        <option value="phone">电话</option>
                        <option value="wechat">微信</option>
                      </select>
                    </div>
                    <div class="channel-preview">
                      <div class="preview-badge" :class="step.channel">
                        <i :class="step.channelIcon"></i> {{ getChannelName(step.channel) }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="step-actions">
                  <button class="btn-icon" @click="removeCustomSopStep(index)" :disabled="customSopData.steps.length <= 1" title="删除步骤">
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 预览效果 -->
          <div class="custom-sop-preview">
            <h5><i class="fas fa-eye"></i> 效果预览</h5>
            <div class="preview-timeline">
              <div v-for="(step, index) in customSopData.steps.filter(s => s.title)" :key="index" class="preview-step">
                <div class="preview-marker">
                  <i :class="step.channelIcon"></i>
                </div>
                <div class="preview-content">
                  <div class="preview-title">{{ step.title }}</div>
                  <div class="preview-meta">第{{ step.day }}天 · {{ getChannelName(step.channel) }}</div>
                </div>
              </div>
              <div v-if="customSopData.steps.filter(s => s.title).length === 0" class="preview-empty">
                <i class="fas fa-info-circle"></i> 请填写步骤内容以预览效果
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showCustomSopModal = false">取消</button>
          <button class="btn btn-primary">
            <i class="fas fa-save"></i> 保存为新序列
          </button>
          <button class="btn btn-primary" @click="saveCustomSop">
            <i class="fas fa-save"></i> 保存自定义SOP
          </button>
        </div>
      </div>
    </div>

    <!-- AI Email Generator Modal -->
    <div v-if="showAIModal" class="modal-overlay" @click.self="showAIModal = false">
      <div class="modal ai-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-magic"></i> AI 邮件生成器</div>
          <button class="modal-close" @click="showAIModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="ai-generator">
            <div class="generator-input">
              <h4>输入要求</h4>
              <div class="form-group">
                <label class="form-label">邮件类型</label>
                <select class="form-select" v-model="aiGenerator.type">
                  <option value="introduction">首次介绍信</option>
                  <option value="followup">跟进邮件</option>
                  <option value="product">产品推荐</option>
                  <option value="offer">报价邮件</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">产品/服务</label>
                <select class="form-select" v-model="aiGenerator.product">
                  <option value="ssd">固态硬盘 SSD</option>
                  <option value="hdd">机械硬盘 HDD</option>
                  <option value="memory">内存条</option>
                  <option value="storage">存储方案</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">核心卖点</label>
                <div class="checkbox-grid">
                  <label v-for="point in sellingPoints" :key="point.id" class="checkbox-item">
                    <input type="checkbox" v-model="aiGenerator.selectedPoints" :value="point.id">
                    <span>{{ point.label }}</span>
                  </label>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">语气风格</label>
                <div class="tone-options">
                  <span v-for="tone in toneOptions" :key="tone.value"
                        class="tone-option" :class="{ active: aiGenerator.tone === tone.value }"
                        @click="aiGenerator.tone = tone.value">{{ tone.label }}</span>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">语言</label>
                <div class="language-options">
                  <span v-for="lang in languageOptions" :key="lang.value"
                        class="language-option" :class="{ active: aiGenerator.language === lang.value }"
                        @click="aiGenerator.language = lang.value">{{ lang.label }}</span>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">额外要求</label>
                <textarea class="form-textarea" v-model="aiGenerator.additionalRequirements" rows="2"
                          placeholder="例如：强调价格优势、提及促销信息"></textarea>
              </div>
              <button class="btn btn-primary btn-block" @click="generateEmail" :disabled="isGenerating">
                <i class="fas fa-magic" :class="{ 'fa-spin': isGenerating }"></i>
                {{ isGenerating ? '生成中...' : '生成邮件' }}
              </button>
            </div>
            <div class="generator-output">
              <h4>效果预览</h4>
              <div v-if="!generatedEmail.subject" class="output-placeholder">
                <i class="fas fa-envelope-open-text"></i>
                <p>填写表单并点击生成</p>
              </div>
              <div v-else class="email-preview">
                <div class="email-field">
                  <label>主题：</label>
                  <div class="email-value subject">{{ generatedEmail.subject }}</div>
                </div>
                <div class="email-field">
                  <label>正文：</label>
                  <div class="email-body" v-html="generatedEmail.body"></div>
                </div>
                <div class="email-stats">
                  <span><i class="fas fa-font"></i> {{ generatedEmail.wordCount }} 字</span>
                  <span><i class="fas fa-clock"></i> {{ generatedEmail.readTime }}秒</span>
                  <span class="success"><i class="fas fa-star"></i> {{ generatedEmail.readability }}/10</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showAIModal = false">关闭</button>
          <button v-if="generatedEmail.subject" class="btn btn-primary" @click="useEmail">
            <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">
              <i class="fas fa-search"></i>
              <input type="text" v-model="historySearch" placeholder="搜索活动名称...">
            </div>
            <div class="filter-group">
              <select class="filter-select" v-model="historyFilter.status">
                <option value="">全部状态</option>
                <option value="completed">已完成</option>
                <option value="paused">已暂停</option>
                <option value="cancelled">已取消</option>
              </select>
              <select class="filter-select" v-model="historyFilter.type">
                <option value="">全部类型</option>
                <option value="prospect">潜客开发</option>
                <option value="nurture">客户培育</option>
                <option value="reactivate">客户唤醒</option>
                <option value="promote">产品推广</option>
              </select>
              <select class="filter-select" v-model="historyFilter.dateRange">
                <option value="">全部时间</option>
                <option value="week">最近一周</option>
                <option value="month">最近一月</option>
                <option value="quarter">最近三月</option>
                <option value="year">最近一年</option>
              </select>
            </div>
          </div>
          
          <!-- 统计概览 -->
          <div class="history-stats">
            <div class="history-stat">
              <div class="stat-value">{{ historyCampaigns?.length || 0 }}</div>
              <div class="stat-label">历史活动</div>
            </div>
            <div class="history-stat">
              <div class="stat-value">{{ totalHistoricalSent }}</div>
              <div class="stat-label">总发送量</div>
            </div>
            <div class="history-stat">
              <div class="stat-value">{{ avgHistoricalOpenRate }}%</div>
              <div class="stat-label">平均打开率</div>
            </div>
            <div class="history-stat">
              <div class="stat-value">{{ avgHistoricalReplyRate }}%</div>
              <div class="stat-label">平均回复率</div>
            </div>
            <div class="history-stat highlight">
              <div class="stat-value">{{ totalHistoricalOpportunities }}</div>
              <div class="stat-label">转化商机</div>
            </div>
          </div>

          <!-- 活动列表 -->
          <div class="history-list">
            <div v-for="campaign in historyCampaigns" :key="campaign.id" class="history-item">
              <div class="history-item-header">
                <div class="history-item-icon" :style="{ background: campaign.iconBg }">
                  <i :class="campaign.icon" :style="{ color: campaign.iconColor }"></i>
                </div>
                <div class="history-item-info">
                  <div class="history-item-name">{{ campaign.name }}</div>
                  <div class="history-item-meta">
                    <span><i class="fas fa-calendar"></i> {{ campaign.dateRange }}</span>
                    <span><i class="fas fa-user"></i> {{ campaign.owner }}</span>
                    <span class="status-tag" :class="campaign.status">{{ getStatusLabel(campaign.status) }}</span>
                  </div>
                </div>
                <div class="history-item-actions">
                  <button class="btn-icon" @click="duplicateCampaign(campaign)" title="复制活动">
                    <i class="fas fa-copy"></i>
                  </button>
                  <button class="btn-icon" @click="viewHistoryDetail(campaign)" title="查看详情">
                    <i class="fas fa-eye"></i>
                  </button>
                  <button class="btn-icon" @click="exportHistoryReport(campaign)" title="导出报告">
                    <i class="fas fa-download"></i>
                  </button>
                </div>
              </div>
              <div class="history-item-stats">
                <div class="mini-stat">
                  <i class="fas fa-paper-plane"></i>
                  <span class="value">{{ campaign.stats.sent }}</span>
                  <span class="label">发送</span>
                </div>
                <div class="mini-stat">
                  <i class="fas fa-envelope-open"></i>
                  <span class="value">{{ campaign.stats.opened }}</span>
                  <span class="label">打开 ({{ campaign.stats.openRate }}%)</span>
                </div>
                <div class="mini-stat">
                  <i class="fas fa-reply"></i>
                  <span class="value">{{ campaign.stats.replied }}</span>
                  <span class="label">回复 ({{ campaign.stats.replyRate }}%)</span>
                </div>
                <div class="mini-stat">
                  <i class="fas fa-mouse-pointer"></i>
                  <span class="value">{{ campaign.stats.clicked }}</span>
                  <span class="label">点击</span>
                </div>
                <div class="mini-stat highlight">
                  <i class="fas fa-bullseye"></i>
                  <span class="value">{{ campaign.stats.opportunities }}</span>
                  <span class="label">商机</span>
                </div>
              </div>
              <div class="history-item-channels">
                <span v-for="ch in campaign.channels" :key="ch" class="channel-mini-tag">
                  <i :class="getChannelIcon(ch)"></i> {{ ch }}
                </span>
              </div>
            </div>
            <div v-if="historyCampaigns?.length === 0" class="empty-state">
              <i class="fas fa-inbox"></i>
              <p>暂无历史活动数据</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="exportAllHistory">
            <i class="fas fa-file-export"></i> 导出全部报告
          </button>
          <button class="btn btn-secondary" @click="showHistoryModal = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- History Detail Modal -->
    <div v-if="showHistoryDetailModal" class="modal-overlay" @click.self="showHistoryDetailModal = false">
      <div class="modal history-detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-history"></i> 历史活动详情
            <span class="detail-status completed">{{ getStatusLabel(selectedHistoryCampaign?.status) }}</span>
          </div>
          <button class="modal-close" @click="showHistoryDetailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" v-if="selectedHistoryCampaign">
          <!-- 基本信息 -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-info-circle"></i> 基本信息</h4>
            </div>
            <div class="detail-grid">
              <div class="detail-item">
                <label>活动名称</label>
                <span>{{ selectedHistoryCampaign.name }}</span>
              </div>
              <div class="detail-item">
                <label>活动周期</label>
                <span>{{ selectedHistoryCampaign.dateRange }}</span>
              </div>
              <div class="detail-item">
                <label>负责人</label>
                <span>{{ selectedHistoryCampaign.owner }}</span>
              </div>
              <div class="detail-item">
                <label>活动状态</label>
                <span class="status-badge" :class="selectedHistoryCampaign.status">{{ getStatusLabel(selectedHistoryCampaign.status) }}</span>
              </div>
            </div>
          </div>

          <!-- 核心数据统计 -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-chart-pie"></i> 核心数据统计</h4>
            </div>
            <div class="metrics-grid">
              <div class="metric-card">
                <div class="metric-icon blue"><i class="fas fa-paper-plane"></i></div>
                <div class="metric-content">
                  <div class="metric-value">{{ selectedHistoryCampaign.stats.sent.toLocaleString() }}</div>
                  <div class="metric-label">总发送量</div>
                </div>
              </div>
              <div class="metric-card">
                <div class="metric-icon green"><i class="fas fa-envelope-open"></i></div>
                <div class="metric-content">
                  <div class="metric-value">{{ selectedHistoryCampaign.stats.opened.toLocaleString() }}</div>
                  <div class="metric-label">打开数 ({{ selectedHistoryCampaign.stats.openRate }}%)</div>
                </div>
              </div>
              <div class="metric-card">
                <div class="metric-icon purple"><i class="fas fa-reply"></i></div>
                <div class="metric-content">
                  <div class="metric-value">{{ selectedHistoryCampaign.stats.replied.toLocaleString() }}</div>
                  <div class="metric-label">回复数 ({{ selectedHistoryCampaign.stats.replyRate }}%)</div>
                </div>
              </div>
              <div class="metric-card">
                <div class="metric-icon orange"><i class="fas fa-mouse-pointer"></i></div>
                <div class="metric-content">
                  <div class="metric-value">{{ selectedHistoryCampaign.stats.clicked.toLocaleString() }}</div>
                  <div class="metric-label">点击数</div>
                </div>
              </div>
              <div class="metric-card highlight">
                <div class="metric-icon success"><i class="fas fa-bullseye"></i></div>
                <div class="metric-content">
                  <div class="metric-value">{{ selectedHistoryCampaign.stats.opportunities }}</div>
                  <div class="metric-label">转化商机</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 渠道效果分析 -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-chart-bar"></i> 渠道效果分析</h4>
            </div>
            <div class="channel-detail-list">
              <div v-for="ch in selectedHistoryCampaign.channels" :key="ch" class="channel-detail-item">
                <div class="channel-icon-wrapper" :style="getChannelStyleByName(ch)">
                  <i :class="getChannelIcon(ch)"></i>
                </div>
                <div class="channel-detail-info">
                  <div class="channel-detail-name">{{ ch }}</div>
                  <div class="channel-detail-stats">
                    <span>发送: {{ Math.round(selectedHistoryCampaign.stats.sent / selectedHistoryCampaign.channels.length) }}</span>
                    <span>打开率: {{ selectedHistoryCampaign.stats.openRate }}%</span>
                    <span>回复率: {{ selectedHistoryCampaign.stats.replyRate }}%</span>
                  </div>
                </div>
                <div class="channel-status">
                  <span class="status-dot completed"></span> 已完成
                </div>
              </div>
            </div>
          </div>

          <!-- 效果评估 -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-clipboard-check"></i> 效果评估</h4>
            </div>
            <div class="evaluation-grid">
              <div class="eval-item">
                <div class="eval-label">发送效率</div>
                <div class="eval-bar">
                  <div class="eval-fill" :style="{ width: '85%' }"></div>
                </div>
                <div class="eval-value">优秀</div>
              </div>
              <div class="eval-item">
                <div class="eval-label">打开率</div>
                <div class="eval-bar">
                  <div class="eval-fill" :style="{ width: selectedHistoryCampaign.stats.openRate + '%' }"></div>
                </div>
                <div class="eval-value">{{ selectedHistoryCampaign.stats.openRate >= 50 ? '优秀' : '良好' }}</div>
              </div>
              <div class="eval-item">
                <div class="eval-label">回复率</div>
                <div class="eval-bar">
                  <div class="eval-fill" :style="{ width: selectedHistoryCampaign.stats.replyRate * 3 + '%' }"></div>
                </div>
                <div class="eval-value">{{ selectedHistoryCampaign.stats.replyRate >= 15 ? '优秀' : '良好' }}</div>
              </div>
              <div class="eval-item">
                <div class="eval-label">转化率</div>
                <div class="eval-bar">
                  <div class="eval-fill" :style="{ width: (selectedHistoryCampaign.stats.opportunities / selectedHistoryCampaign.stats.sent * 100 * 10) + '%' }"></div>
                </div>
                <div class="eval-value">{{ selectedHistoryCampaign.stats.opportunities > 20 ? '优秀' : '良好' }}</div>
              </div>
            </div>
          </div>

          <!-- 经验总结 -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-lightbulb"></i> 经验总结</h4>
            </div>
            <div class="summary-content">
              <div class="summary-item">
                <i class="fas fa-check-circle success"></i>
                <span>活动时间选择恰当，目标客户响应积极</span>
              </div>
              <div class="summary-item">
                <i class="fas fa-check-circle success"></i>
                <span>邮件主题具有吸引力，打开率超过行业平均水平</span>
              </div>
              <div class="summary-item">
                <i class="fas fa-info-circle info"></i>
                <span>建议下次活动增加 WhatsApp 渠道触达</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="duplicateCampaign(selectedHistoryCampaign)">
            <i class="fas fa-copy"></i> 复制活动
          </button>
          <button class="btn btn-secondary" @click="exportHistoryReport(selectedHistoryCampaign)">
            <i class="fas fa-download"></i> 导出报告
          </button>
          <button class="btn btn-primary" @click="showHistoryDetailModal = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- Templates Modal -->
    <div v-if="showTemplatesModal" class="modal-overlay" @click.self="showTemplatesModal = false">
      <div class="modal templates-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-file-alt"></i> 营销模板库</div>
          <button class="modal-close" @click="showTemplatesModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- 模板分类标签 -->
          <div class="template-tabs">
            <span class="template-tab" :class="{ active: templateTab === 'all' }" @click="templateTab = 'all'">
              全部模板
            </span>
            <span class="template-tab" :class="{ active: templateTab === 'email' }" @click="templateTab = 'email'">
              <i class="fas fa-envelope"></i> 邮件模板
            </span>
            <span class="template-tab" :class="{ active: templateTab === 'whatsapp' }" @click="templateTab = 'whatsapp'">
              <i class="fab fa-whatsapp"></i> WhatsApp
            </span>
            <span class="template-tab" :class="{ active: templateTab === 'linkedin' }" @click="templateTab = 'linkedin'">
              <i class="fab fa-linkedin"></i> LinkedIn
            </span>
            <span class="template-tab" :class="{ active: templateTab === 'my' }" @click="templateTab = 'my'">
              <i class="fas fa-star"></i> 我的模板
            </span>
          </div>

          <!-- 搜索和排序 -->
          <div class="templates-toolbar">
            <div class="search-box">
              <i class="fas fa-search"></i>
              <input type="text" v-model="templateSearch" placeholder="搜索模板名称或内容...">
            </div>
            <div class="sort-options">
              <select class="sort-select" v-model="templateSort">
                <option value="popular">最受欢迎</option>
                <option value="openRate">打开率最高</option>
                <option value="replyRate">回复率最高</option>
                <option value="newest">最新添加</option>
              </select>
            </div>
          </div>

          <!-- 模板统计 -->
          <div class="templates-stats">
            <span><i class="fas fa-folder"></i> 共 {{ filteredTemplates.length }} 个模板</span>
            <span class="divider">|</span>
            <span><i class="fas fa-chart-line"></i> 平均打开率: {{ avgTemplateOpenRate }}%</span>
            <span class="divider">|</span>
            <span><i class="fas fa-reply"></i> 平均回复率: {{ avgTemplateReplyRate }}%</span>
          </div>

          <!-- 模板列表 -->
          <div class="templates-grid-enhanced">
            <div v-for="tpl in filteredTemplates" :key="tpl.id" class="template-card-enhanced">
              <div class="template-card-header">
                <div class="template-type-badge" :class="tpl.channel">
                  <i :class="getTemplateChannelIcon(tpl.channel)"></i>
                  {{ tpl.type }}
                </div>
                <div class="template-lang-badge">{{ tpl.language }}</div>
                <button class="btn-favorite" :class="{ active: tpl.favorite }" @click="toggleFavorite(tpl)">
                  <i :class="tpl.favorite ? 'fas fa-star' : 'far fa-star'"></i>
                </button>
              </div>
              <div class="template-subject-enhanced">{{ tpl.subject }}</div>
              <div class="template-preview-enhanced">{{ tpl.preview }}</div>
              <div class="template-tags" v-if="tpl.tags && tpl.tags.length">
                <span v-for="tag in tpl.tags" :key="tag" class="template-tag">{{ tag }}</span>
              </div>
              <div class="template-stats-enhanced">
                <div class="template-stat">
                  <i class="fas fa-envelope-open"></i>
                  <span class="stat-value">{{ tpl.openRate }}%</span>
                  <span class="stat-label">打开率</span>
                </div>
                <div class="template-stat">
                  <i class="fas fa-reply"></i>
                  <span class="stat-value">{{ tpl.replyRate }}%</span>
                  <span class="stat-label">回复率</span>
                </div>
                <div class="template-stat">
                  <i class="fas fa-users"></i>
                  <span class="stat-value">{{ tpl.usedCount }}</span>
                  <span class="stat-label">使用次数</span>
                </div>
              </div>
              <div class="template-actions">
                <button class="btn btn-secondary btn-sm" @click="previewTemplate(tpl)">
                  <i class="fas fa-eye"></i> 预览
                </button>
                <button class="btn btn-primary btn-sm" @click="useTemplate(tpl)">
                  <i class="fas fa-check"></i> 使用
                </button>
              </div>
            </div>
          </div>

          <!-- AI推荐模板 -->
          <div class="ai-template-section">
            <div class="ai-section-header">
              <i class="fas fa-robot"></i>
              <span>AI 为您推荐</span>
              <span class="ai-badge-mini">基于您的行业和历史数据</span>
            </div>
            <div class="ai-template-list">
              <div v-for="tpl in aiRecommendedTemplates" :key="tpl.id" class="ai-template-item" @click="useTemplate(tpl)">
                <div class="ai-template-icon">
                  <i :class="getTemplateChannelIcon(tpl.channel)"></i>
                </div>
                <div class="ai-template-info">
                  <div class="ai-template-subject">{{ tpl.subject }}</div>
                  <div class="ai-template-meta">
                    <span>{{ tpl.type }}</span>
                    <span>{{ tpl.language }}</span>
                    <span class="highlight">{{ tpl.matchScore }}% 匹配</span>
                  </div>
                </div>
                <div class="ai-template-stats">
                  <span><i class="fas fa-envelope-open"></i> {{ tpl.openRate }}%</span>
                  <span><i class="fas fa-reply"></i> {{ tpl.replyRate }}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showCreateTemplateModal = true">
            <i class="fas fa-plus"></i> 创建模板
          </button>
          <button class="btn btn-secondary" @click="importTemplates">
            <i class="fas fa-file-import"></i> 导入模板
          </button>
          <button class="btn btn-secondary" @click="showTemplatesModal = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- Template Preview Modal -->
    <div v-if="showTemplatePreview" class="modal-overlay" @click.self="showTemplatePreview = false">
      <div class="modal template-preview-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-eye"></i> 模板预览</div>
          <button class="modal-close" @click="showTemplatePreview = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="preview-template-content" v-if="previewingTemplate">
            <div class="preview-row">
              <label>模板类型：</label>
              <span>{{ previewingTemplate.type }}</span>
            </div>
            <div class="preview-row">
              <label>语言：</label>
              <span>{{ previewingTemplate.language }}</span>
            </div>
            <div class="preview-row">
              <label>邮件主题：</label>
              <div class="preview-subject">{{ previewingTemplate.subject }}</div>
            </div>
            <div class="preview-row">
              <label>邮件正文：</label>
              <div class="preview-body" v-html="previewingTemplate.body || previewingTemplate.preview"></div>
            </div>
            <div class="preview-row tags-row" v-if="previewingTemplate.tags">
              <label>标签：</label>
              <div class="preview-tags">
                <span v-for="tag in previewingTemplate.tags" :key="tag" class="preview-tag">{{ tag }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showTemplatePreview = false">关闭</button>
          <button class="btn btn-primary" @click="useTemplate(previewingTemplate)">
            <i class="fas fa-check"></i> 使用此模板
          </button>
        </div>
      </div>
    </div>

    <!-- Opened Customers Modal -->
    <div v-if="showOpenedCustomersModal" class="modal-overlay" @click.self="showOpenedCustomersModal = false">
      <div class="modal detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-envelope-open"></i> 打开邮件的客户 ({{ selectedOpenedCampaign?.openedCustomers }})
          </div>
          <button class="modal-close" @click="showOpenedCustomersModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="filter-bar">
            <button class="filter-btn active">全部</button>
            <button class="filter-btn">高价值</button>
            <button class="filter-btn">已保护</button>
            <button class="filter-btn">营销暂停</button>
          </div>
          <div class="customers-list">
            <div v-for="customer in openedCustomers" :key="customer.id" class="customer-item" :class="{ protected: customer.protected }">
              <div class="customer-header">
                <div class="customer-info">
                  <div class="customer-name">
                    {{ customer.name }}
                    <span v-if="customer.protected" class="protection-badge">
                      <i class="fas fa-shield-alt"></i> 已保护
                    </span>
                  </div>
                  <div class="customer-email">{{ customer.email }}</div>
                </div>
              </div>
              <div class="customer-details">
                <div class="detail-item">
                  <span class="label">打开时间:</span>
                  <span class="value">{{ customer.openTime }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">点击次数:</span>
                  <span class="value">{{ customer.clickCount }}次</span>
                </div>
              </div>
              <div class="customer-actions">
                <button v-if="!customer.protected" class="btn btn-secondary btn-sm" @click="protectCustomer(customer)" title="添加到保护白名单">
                  <i class="fas fa-shield-alt"></i> 保护
                </button>
                <button v-else class="btn btn-secondary btn-sm" @click="unprotectCustomer(customer)" title="从保护白名单中移除">
                  <i class="fas fa-times"></i> 取消保护
                </button>
                <button class="btn btn-secondary btn-sm" @click="pauseCampaignForCustomer(customer)" v-if="customer.interventionStatus !== 'paused'" title="暂停向该客户发送邮件">
                  <i class="fas fa-pause"></i> 暂停
                </button>
                <button class="btn btn-secondary btn-sm" @click="resumeCampaignForCustomer(customer)" v-else title="恢复向该客户发送邮件">
                  <i class="fas fa-play"></i> 恢复
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showOpenedCustomersModal = false">关闭</button>
          <button class="btn btn-primary" @click="showOpenedCustomersModal = false">
            <i class="fas fa-download"></i> 导出列表
          </button>
        </div>
      </div>
    </div>

    <!-- Reply Review Modal -->
    <div v-if="showReplyReviewModal" class="modal-overlay" @click.self="showReplyReviewModal = false">
      <div class="modal detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-reply"></i> 回复邮件的客户 ({{ repliedCustomers.length }}个)
          </div>
          <button class="modal-close" @click="showReplyReviewModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="review-stats">
            <div class="stat-box">
              <span class="stat-label">全部</span>
              <span class="stat-value">{{ repliedCustomers.filter(r => r.status === 'pending-review').length }}</span>
            </div>
            <div class="stat-box">
              <span class="stat-label">已保护</span>
              <span class="stat-value">{{ repliedCustomers.filter(r => r.requiresHumanReview).length }}</span>
            </div>
            <div class="stat-box">
              <span class="stat-label">营销暂停</span>
              <span class="stat-value">{{ repliedCustomers.filter(r => r.priority === '高').length }}</span>
            </div>
          </div>
          <div class="replies-list">
            <div v-for="reply in repliedCustomers" :key="reply.id" class="reply-item" :class="[reply.status, { 'requires-review': reply.requiresHumanReview }]">
              <div class="reply-header">
                <div class="reply-info">
                  <div class="reply-name">
                    {{ reply.name }}
                  </div>
                  <div class="reply-email">{{ reply.email }}</div>
                </div>
                <div class="reply-badges">
                  <span class="priority-badge" :class="reply.priority">
                    {{ reply.priority }}优先级
                  </span>
                  <span class="value-badge" :class="reply.value">{{ reply.value }}</span>
                </div>
              </div>
              <div class="reply-time">回复时间: {{ reply.replyTime }}</div>
              <div class="reply-content">
                <p>{{ reply.replyContent }}</p>
              </div>
              <div class="reply-review-notes" v-if="reply.reviewNotes">
                <i class="fas fa-lightbulb"></i>
                <span>{{ reply.reviewNotes }}</span>
              </div>
              <div class="reply-actions">
                <button v-if="!reply.protected" class="btn btn-secondary btn-sm" @click="protectCustomer(reply)" title="添加到保护白名单">
                  <i class="fas fa-shield-alt"></i> 保护
                </button>
                <button v-else class="btn btn-secondary btn-sm" @click="unprotectCustomer(reply)" title="从保护白名单中移除">
                  <i class="fas fa-times"></i> 取消保护
                </button>
                <button class="btn btn-secondary btn-sm" @click="pauseCampaignForCustomer(reply)" v-if="reply.interventionStatus !== 'paused'" title="暂停向该客户发送邮件">
                  <i class="fas fa-pause"></i> 暂停
                </button>
                <button class="btn btn-secondary btn-sm" @click="resumeCampaignForCustomer(reply)" v-else title="恢复向该客户发送邮件">
                  <i class="fas fa-play"></i> 恢复
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showReplyReviewModal = false">关闭</button>
          <button class="btn btn-primary" @click="showReplyReviewModal = false">
            <i class="fas fa-download"></i> 导出回复
          </button>
        </div>
      </div>
    </div>

    <!-- Intervention Modal -->
    <div v-if="showInterventionModal" class="modal-overlay" @click.self="showInterventionModal = false">
      <div class="modal detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-hand-paper"></i> 人工干预
          </div>
          <button class="modal-close" @click="showInterventionModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" v-if="selectedIntervention">
          <div class="tabs-section">
            <div class="tab-item active" @click="selectedIntervention.activeTab = 'protected'">
              <i class="fas fa-shield-alt"></i> 客户保护白名单
            </div>
            <div class="tab-item" @click="selectedIntervention.activeTab = 'history'">
              <i class="fas fa-hand-paper"></i> 营销暂停
            </div>
          </div>

          <!-- Protected Customers List -->
          <div v-if="!selectedIntervention.activeTab || selectedIntervention.activeTab === 'protected'" class="detail-section">
            <div class="protected-customers">
              <div v-for="customer in protectedCustomersList" :key="customer.id" class="protected-customer-item">
                <div class="customer-header">
                  <div class="customer-info">
                    <div class="customer-name">
                      {{ customer.name }}
                      <span class="protection-level" :class="customer.protectionLevel">
                        {{ customer.protectionLevel }}保护
                      </span>
                    </div>
                    <div class="customer-email">{{ customer.email }}</div>
                  </div>
                </div>
                <div class="customer-details">
                  <span class="detail">保护原因: {{ customer.reason }}</span>
                  <span class="detail">保护时间: {{ customer.protectedSince }}</span>
                </div>
                <div class="customer-actions">
                  <button class="btn btn-secondary btn-sm" @click="unprotectCustomer(customer)">
                    <i class="fas fa-times"></i> 移除保护
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Intervention History -->
          <div v-if="selectedIntervention.activeTab === 'history'" class="detail-section">
            <h5>干预历史记录</h5>
            <div class="interventions-list">
              <div v-for="intervention in interventions.filter(i => i.campaignId === selectedIntervention.id)" :key="intervention.id" class="intervention-item">
                <div class="intervention-header">
                  <span class="intervention-type">{{ intervention.type }}</span>
                  <span class="intervention-status" :class="intervention.status">{{ intervention.status === 'active' ? '进行中' : '已完成' }}</span>
                </div>
                <div class="intervention-info">
                  <p class="description">{{ intervention.description }}</p>
                  <div class="meta">
                    <span>原因: {{ intervention.reason }}</span>
                    <span>影响: {{ intervention.affectedCount }}个客户</span>
                    <span>创建: {{ intervention.createdTime }}</span>
                    <span>创建人: {{ intervention.createdBy }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Current Interventions -->
          <div class="detail-section">
            <h5>现有干预</h5>
            <div class="interventions-list">
              <div v-for="intervention in interventions.filter(i => i.campaignId === selectedIntervention.id)" :key="intervention.id" class="intervention-item">
                <div class="intervention-header">
                  <span class="intervention-type">{{ intervention.type }}</span>
                  <span class="intervention-status" :class="intervention.status">{{ intervention.status === 'active' ? '进行中' : '已完成' }}</span>
                </div>
                <div class="intervention-info">
                  <p class="description">{{ intervention.description }}</p>
                  <div class="meta">
                    <span>原因: {{ intervention.reason }}</span>
                    <span>影响: {{ intervention.affectedCount }}个客户</span>
                    <span>创建: {{ intervention.createdTime }}</span>
                    <span>创建人: {{ intervention.createdBy }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showInterventionModal = false">关闭</button>
          <button class="btn btn-primary" @click="showInterventionModal = false">
            <i class="fas fa-download"></i> 导出报告
          </button>
        </div>
      </div>
    </div>
    <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 showCreateModal = ref(false)
const showAIModal = ref(false)
const showTemplatesModal = ref(false)
const showHistoryModal = ref(false)
const showHistoryDetailModal = ref(false)
const selectedHistoryCampaign = ref(null)
const showTemplatePreview = ref(false)
const showCreateTemplateModal = ref(false)
const showCampaignDetailModal = ref(false)
const showInteractionsModal = ref(false)
const selectedCampaignInteractions = ref([])
const selectedCampaign = ref(null)
const previewingTemplate = ref(null)
const currentStep = ref(1)
const isGenerating = ref(false)
const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')
const showInterventionModal = ref(false)
const showOpenedCustomersModal = ref(false)
const showReplyReviewModal = ref(false)
const selectedIntervention = ref(null)
const selectedOpenedCampaign = ref(null)
const selectedReplyReview = ref(null)

// History filters
const historySearch = ref('')
const historyFilter = ref({ status: '', type: '', dateRange: '' })
const templateSearch = ref('')
const templateTab = ref('all')
const templateSort = ref('popular')

const marketingStats = { totalSent: 2847, openRate: 45, clickRate: 12, replyRate: 8, protectedCustomers: 156, pendingReview: 23, activeCampaigns: 5 }
const tabs = [
  { key: 'all', label: '全部活动', count: 12 },
  { key: 'active', label: '进行中', count: 5 },
  { key: 'paused', label: '已暂停', count: 2 },
  { key: 'completed', label: '已完成', count: 5 }
]

const campaigns = ref([
  // ===== 进行中 =====
  { id: 1, name: '中东潜客开发活动', description: '针对中东地区 SSD 进口商', status: 'active', progress: 68, icon: 'fas fa-globe', iconBg: 'rgba(99, 102, 241, 0.2)', iconColor: 'var(--primary)', channels: ['邮件', 'LinkedIn'], stats: { sent: 312, openRate: 48, replyRate: 12 }, openedCustomers: 150, repliedCustomers: 37 },
  { id: 2, name: '欧洲企业级存储推广', description: '面向欧洲数据中心客户', status: 'active', progress: 45, icon: 'fas fa-server', iconBg: 'rgba(16, 185, 129, 0.2)', iconColor: 'var(--success)', channels: ['邮件', 'WhatsApp'], stats: { sent: 178, openRate: 52, replyRate: 15 }, openedCustomers: 93, repliedCustomers: 27 },
  { id: 3, name: '沉默客户唤醒计划', description: '重新激活90天未互动客户', status: 'active', progress: 32, icon: 'fas fa-moon', iconBg: 'rgba(139, 92, 246, 0.2)', iconColor: 'var(--secondary)', channels: ['邮件'], stats: { sent: 89, openRate: 35, replyRate: 8 }, openedCustomers: 31, repliedCustomers: 7 },
  { id: 5, name: '东南亚分销商招募', description: '招募东南亚电子产品分销商', status: 'active', progress: 55, icon: 'fas fa-handshake', iconBg: 'rgba(6, 182, 212, 0.2)', iconColor: 'var(--info)', channels: ['邮件', 'WhatsApp'], stats: { sent: 234, openRate: 38, replyRate: 11 }, openedCustomers: 89, repliedCustomers: 26 },
  { id: 6, name: '非洲新兴市场开拓', description: '开拓非洲电子产品进口商资源', status: 'active', progress: 22, icon: 'fas fa-map-marker-alt', iconBg: 'rgba(239, 68, 68, 0.2)', iconColor: 'var(--danger)', channels: ['邮件', 'WhatsApp'], stats: { sent: 145, openRate: 31, replyRate: 7 }, openedCustomers: 45, repliedCustomers: 10 },
  { id: 7, name: '2026春季产品推广', description: '推广最新一代企业级SSD产品线', status: 'active', progress: 60, icon: 'fas fa-box-open', iconBg: 'rgba(251, 191, 36, 0.2)', iconColor: '#FBBF24', channels: ['邮件', 'LinkedIn', 'WhatsApp'], stats: { sent: 420, openRate: 55, replyRate: 18 }, openedCustomers: 231, repliedCustomers: 76 },
  { id: 8, name: '展会客户跟进计划', description: '跟进2026广交会收集的名片客户', status: 'active', progress: 78, icon: 'fas fa-id-card', iconBg: 'rgba(16, 185, 129, 0.2)', iconColor: 'var(--success)', channels: ['邮件', 'WhatsApp'], stats: { sent: 267, openRate: 61, replyRate: 22 }, openedCustomers: 163, repliedCustomers: 59 },
  // ===== 已暂停 =====
  { id: 4, name: '北美市场拓展', description: '针对美国和加拿大市场', status: 'paused', progress: 25, icon: 'fas fa-flag-usa', iconBg: 'rgba(245, 158, 11, 0.2)', iconColor: 'var(--warning)', channels: ['邮件', 'LinkedIn'], stats: { sent: 156, openRate: 42, replyRate: 10 }, openedCustomers: 65, repliedCustomers: 16 },
  { id: 9, name: '日韩高端客户培育', description: '针对日本和韩国高端企业客户', status: 'paused', progress: 40, icon: 'fas fa-gem', iconBg: 'rgba(139, 92, 246, 0.2)', iconColor: 'var(--secondary)', channels: ['邮件', 'LinkedIn'], stats: { sent: 98, openRate: 44, replyRate: 9 }, openedCustomers: 43, repliedCustomers: 9 },
  { id: 10, name: '南美分销渠道建设', description: '在巴西、阿根廷等地寻找分销商', status: 'paused', progress: 15, icon: 'fas fa-route', iconBg: 'rgba(6, 182, 212, 0.2)', iconColor: 'var(--info)', channels: ['邮件'], stats: { sent: 72, openRate: 28, replyRate: 5 }, openedCustomers: 20, repliedCustomers: 4 },
  { id: 11, name: '印度IT采购季活动', description: '针对印度IT企业Q2采购季', status: 'paused', progress: 50, icon: 'fas fa-rupee-sign', iconBg: 'rgba(245, 158, 11, 0.2)', iconColor: 'var(--warning)', channels: ['邮件', 'WhatsApp'], stats: { sent: 189, openRate: 37, replyRate: 11 }, openedCustomers: 70, repliedCustomers: 21 },
  // ===== 已完成 =====
  { id: 12, name: '2025年终大促活动', description: '2025年Q4年终促销，清库存冲业绩', status: 'completed', progress: 100, icon: 'fas fa-trophy', iconBg: 'rgba(251, 191, 36, 0.2)', iconColor: '#FBBF24', channels: ['邮件', 'WhatsApp', 'LinkedIn'], stats: { sent: 856, openRate: 62, replyRate: 24 }, openedCustomers: 531, repliedCustomers: 205 },
  { id: 13, name: '欧洲圣诞节日营销', description: '圣诞节前针对欧洲客户的节日促销', status: 'completed', progress: 100, icon: 'fas fa-snowflake', iconBg: 'rgba(99, 102, 241, 0.2)', iconColor: 'var(--primary)', channels: ['邮件', 'LinkedIn'], stats: { sent: 412, openRate: 57, replyRate: 19 }, openedCustomers: 235, repliedCustomers: 78 },
  { id: 14, name: '中东斋月特别活动', description: '斋月期间针对中东客户的专项营销', status: 'completed', progress: 100, icon: 'fas fa-star-and-crescent', iconBg: 'rgba(16, 185, 129, 0.2)', iconColor: 'var(--success)', channels: ['邮件', 'WhatsApp'], stats: { sent: 298, openRate: 53, replyRate: 17 }, openedCustomers: 158, repliedCustomers: 51 },
  { id: 15, name: '2025广交会前期预热', description: '广交会前向目标客户发送邀请函', status: 'completed', progress: 100, icon: 'fas fa-handshake', iconBg: 'rgba(6, 182, 212, 0.2)', iconColor: 'var(--info)', channels: ['邮件', 'LinkedIn', 'WhatsApp'], stats: { sent: 634, openRate: 68, replyRate: 28 }, openedCustomers: 431, repliedCustomers: 177 }
])

const filteredCampaigns = computed(() => filterTab.value === 'all' ? campaigns.value : campaigns.value.filter(c => c.status === filterTab.value))

// 打开邮件的客户列表 - 需要人工跟进
const openedCustomers = ref([
  { id: 1, name: '阿里巴巴国际', email: 'contact@alibaba-intl.com', openTime: '2026-03-23 10:30', clickCount: 2, status: 'opened', engagement: '高', value: '高价值', annualPurchase: '¥500K+', lastOrder: '2026-02-15', protected: true, protectionReason: '高价值客户', interventionStatus: 'assigned-to-sales' },
  { id: 2, name: '沙特阿美贸易', email: 'trade@aramco-sa.com', openTime: '2026-03-23 09:15', clickCount: 1, status: 'opened', engagement: '中', value: '中价值', annualPurchase: '¥200K', lastOrder: '2026-03-01', protected: true, protectionReason: '活跃客户', interventionStatus: 'pending-review' },
  { id: 3, name: '迪拜电子商务', email: 'info@dubai-ecom.ae', openTime: '2026-03-23 08:45', clickCount: 3, status: 'opened', engagement: '高', value: '高价值', annualPurchase: '¥800K+', lastOrder: '2026-02-28', protected: true, protectionReason: '高价值客户', interventionStatus: 'assigned-to-sales' },
  { id: 4, name: '新加坡科技', email: 'sales@sg-tech.com.sg', openTime: '2026-03-22 16:20', clickCount: 0, status: 'opened', engagement: '低', value: '低价值', annualPurchase: '¥50K', lastOrder: '2025-12-10', protected: false, protectionReason: '', interventionStatus: 'auto-follow' },
  { id: 5, name: '印度IT服务', email: 'contact@india-it.in', openTime: '2026-03-22 14:50', clickCount: 2, status: 'opened', engagement: '中', value: '中价值', annualPurchase: '¥150K', lastOrder: '2026-01-20', protected: true, protectionReason: '活跃客户', interventionStatus: 'pending-review' },
  { id: 6, name: '巴西进出口', email: 'export@brasil-trade.br', openTime: '2026-03-22 11:30', clickCount: 1, status: 'opened', engagement: '低', value: '低价值', annualPurchase: '¥30K', lastOrder: '2025-11-05', protected: false, protectionReason: '', interventionStatus: 'auto-follow' },
  { id: 7, name: '德国工业集团', email: 'procurement@de-industry.de', openTime: '2026-03-21 15:45', clickCount: 4, status: 'opened', engagement: '高', value: '高价值', annualPurchase: '¥1.2M+', lastOrder: '2026-03-10', protected: true, protectionReason: '高价值客户', interventionStatus: 'assigned-to-sales' },
  { id: 8, name: '英国分销商', email: 'sales@uk-dist.co.uk', openTime: '2026-03-21 13:20', clickCount: 2, status: 'opened', engagement: '中', value: '中价值', annualPurchase: '¥300K', lastOrder: '2026-02-20', protected: true, protectionReason: '活跃客户', interventionStatus: 'pending-review' }
])

// 回复邮件的客户列表 - 需要人工审核和介入
const repliedCustomers = ref([
  { id: 1, name: '中东贸易公司', email: 'buyer@middle-east-trade.com', replyTime: '2026-03-23 11:45', replyContent: '感谢您的邮件，我们对您的产品很感兴趣，能否提供详细的产品规格和价格？', status: 'pending-review', sentiment: '正面', priority: '高', value: '高价值', annualPurchase: '¥600K+', lastOrder: '2026-02-10', requiresHumanReview: true, reviewNotes: '需要销售人员立即跟进，客户明确表示感兴趣', assignedTo: '', reviewedBy: '', reviewTime: '' },
  { id: 2, name: '欧洲数据中心', email: 'procurement@eu-datacenter.eu', replyTime: '2026-03-23 10:20', replyContent: '我们正在评估新的存储解决方案，您能否安排一次技术演示？', status: 'pending-review', sentiment: '正面', priority: '高', value: '高价值', annualPurchase: '¥1M+', lastOrder: '2026-03-05', requiresHumanReview: true, reviewNotes: '需要技术团队配合，安排产品演示', assignedTo: '', reviewedBy: '', reviewTime: '' },
  { id: 3, name: '北美分销', email: 'sales@na-dist.com', replyTime: '2026-03-22 16:30', replyContent: '价格太高了，能否提供折扣？', status: 'pending-review', sentiment: '中立', priority: '中', value: '中价值', annualPurchase: '¥250K', lastOrder: '2026-01-15', requiresHumanReview: true, reviewNotes: '需要销售经理评估折扣空间', assignedTo: '', reviewedBy: '', reviewTime: '' },
  { id: 4, name: '东南亚进口商', email: 'import@sea-import.com', replyTime: '2026-03-22 14:15', replyContent: '我们有兴趣，但需要了解更多关于技术支持的信息。', status: 'pending-review', sentiment: '正面', priority: '中', value: '中价值', annualPurchase: '¥180K', lastOrder: '2026-02-01', requiresHumanReview: true, reviewNotes: '需要技术支持团队提供详细信息', assignedTo: '', reviewedBy: '', reviewTime: '' },
  { id: 5, name: '日本电子商社', email: 'trade@japan-elec.jp', replyTime: '2026-03-21 17:00', replyContent: '暂时不需要，但会保留您的联系方式。', status: 'pending-review', sentiment: '中立', priority: '低', value: '低价值', annualPurchase: '¥80K', lastOrder: '2025-10-20', requiresHumanReview: false, reviewNotes: '可自动标记为后续跟进', assignedTo: '', reviewedBy: '', reviewTime: '' },
  { id: 6, name: '韩国科技公司', email: 'contact@korea-tech.kr', replyTime: '2026-03-21 15:30', replyContent: '这不是我们需要的产品类型。', status: 'pending-review', sentiment: '负面', priority: '低', value: '低价值', annualPurchase: '¥40K', lastOrder: '2025-09-10', requiresHumanReview: false, reviewNotes: '可自动标记为不适配，从列表中移除', assignedTo: '', reviewedBy: '', reviewTime: '' }
])

// 人工干预列表 - 保护有效客户
const interventions = ref([
  { id: 1, campaignId: 1, type: '客户保护', reason: '高价值客户，需要人工跟进', affectedCount: 12, status: 'active', createdTime: '2026-03-23 12:00', createdBy: '销售经理', description: '将高价值客户从自动营销中移除，由销售人员进行专属跟进' },
  { id: 2, campaignId: 2, type: '审核干预', reason: '回复邮件需要人工审核', affectedCount: 6, status: 'active', createdTime: '2026-03-23 11:30', createdBy: '营销主管', description: '所有回复邮件必须经过人工审核后才能进行后续跟进' },
  { id: 3, campaignId: 3, type: '内容调整', reason: '提高邮件个性化程度', affectedCount: 89, status: 'active', createdTime: '2026-03-22 10:00', createdBy: '营销主管', description: '根据客户历史数据调整邮件内容，提高相关性' },
  { id: 4, campaignId: 1, type: '发送暂停', reason: '等待销售人员反馈', affectedCount: 45, status: 'active', createdTime: '2026-03-21 14:30', createdBy: '销售经理', description: '暂停向该客户群体发送邮件，等待销售团队的跟进反馈' }
])

// 客户保护白名单 - 防止AI营销影响
const protectedCustomersList = ref([
  { id: 1, name: '阿里巴巴国际', email: 'contact@alibaba-intl.com', protectionLevel: '高', reason: '高价值客户', annualValue: '¥500K+', status: 'active', protectedSince: '2026-03-20', assignedSalesRep: '张三' },
  { id: 2, name: '迪拜电子商务', email: 'info@dubai-ecom.ae', protectionLevel: '高', reason: '高价值客户', annualValue: '¥800K+', status: 'active', protectedSince: '2026-03-18', assignedSalesRep: '李四' },
  { id: 3, name: '德国工业集团', email: 'procurement@de-industry.de', protectionLevel: '高', reason: '高价值客户', annualValue: '¥1.2M+', status: 'active', protectedSince: '2026-03-15', assignedSalesRep: '王五' },
  { id: 4, name: '沙特阿美贸易', email: 'trade@aramco-sa.com', protectionLevel: '中', reason: '活跃客户', annualValue: '¥200K', status: 'active', protectedSince: '2026-03-22', assignedSalesRep: '赵六' },
  { id: 5, name: '英国分销商', email: 'sales@uk-dist.co.uk', protectionLevel: '中', reason: '活跃客户', annualValue: '¥300K', status: 'active', protectedSince: '2026-03-21', assignedSalesRep: '孙七' }
])

const newCampaign = ref({
  name: '', type: 'prospect', priority: 'medium', description: '',
  startDate: '', endDate: '', owner: '', relatedOpportunity: '',
  segment: 'all', aiRecommend: 'high-value',
  filters: { 
    region: '', industry: '', scoreRange: '', stage: '', companySize: '', purchaseCycle: '', 
    keyword: '', selectedTags: [] 
  },
  goals: { sent: 500, openRate: 40, replyRate: 10, opportunities: 15 },
  channels: ['email'], 
  emailSender: 'sales@company.com', emailSendTime: 'optimal',
  emailTemplate: 'default', batchSize: '100',
  emailSubject: '', emailPreviewText: '',
  trackOpen: true, trackClick: true, trackReply: true,
  whatsappAccount: '业务账号1', whatsappInterval: '60', whatsappTemplate: '',
  linkedinAction: 'message', linkedinLimit: '30',
  sopTemplate: 'standard', 
  rules: { 
    noOpenFollowup: true, noReplyFollowup: true, noClickFollowup: false, 
    stopOnReply: true, stopOnBooking: true,
    noOpenFollowupDays: '3', noReplyFollowupDays: '7'
  },
  abTest: { enabled: false, variable: 'subject', ratio: '50', winnerCriteria: 'openRate', variantB: '' },
  scheduleMode: 'optimal', scheduledDate: '', scheduledTime: ''
})

const showCustomerPreview = ref(false)
const showSubjectSuggestions = ref(false)
const showCustomSopModal = ref(false)
const customSopData = ref({
  name: '',
  steps: [
    { title: '', day: 1, channel: 'email', channelIcon: 'fas fa-envelope' },
    { title: '', day: 3, channel: 'email', channelIcon: 'fas fa-envelope' },
    { title: '', day: 7, channel: 'linkedin', channelIcon: 'fab fa-linkedin' },
    { title: '', day: 14, channel: 'phone', channelIcon: 'fas fa-phone' }
  ]
})

const subjectSuggestions = ref([
  'Reliable SSD Solutions for Your Business',
  'Quality Storage Products at Competitive Prices',
  'Partnership Opportunity - Storage Solutions'
])

const confirmChecks = ref({ content: false, schedule: false, compliance: false, unsubscribe: true })

const segmentOptions = [
  { id: 'all', name: '全部潜客', count: 847, icon: 'fas fa-globe' },
  { id: 'new', name: '本周新增', count: 56, icon: 'fas fa-star' },
  { id: 'high-intent', name: '高评分客户', count: 124, icon: 'fas fa-fire' },
  { id: 'silent', name: '沉默客户', count: 89, icon: 'fas fa-moon' }
]

const availableChannels = [
  { id: 'email', name: '邮件营销', icon: 'fas fa-envelope', iconBg: 'rgba(99, 102, 241, 0.2)', iconColor: 'var(--primary)', description: '专业邮件营销', enabled: true, avgOpenRate: 45 },
]

const sopTemplates = [
  { id: 'standard', name: '标准开发序列', icon: '📧', steps: 4, description: '适合初次触达客户', stepsDetail: [
    { title: '首封介绍邮件', day: 1, channel: '邮件', channelIcon: 'fas fa-envelope' },
    { title: '产品优势介绍', day: 3, channel: '邮件', channelIcon: 'fas fa-envelope' },
    { title: '案例分享', day: 7, channel: 'LinkedIn', channelIcon: 'fab fa-linkedin' },
    { title: '电话跟进', day: 14, channel: '电话', channelIcon: 'fas fa-phone' }
  ]},
  { id: 'aggressive', name: '快速跟进序列', icon: '⚡', steps: 3, description: '快速转化意向客户', stepsDetail: [
    { title: '个性化介绍', day: 1, channel: '邮件', channelIcon: 'fas fa-envelope' },
    { title: 'WhatsApp跟进', day: 2, channel: 'WhatsApp', channelIcon: 'fab fa-whatsapp' },
    { title: '报价发送', day: 5, channel: '邮件', channelIcon: 'fas fa-envelope' }
  ]},
  { id: 'nurture', name: '培育序列', icon: '🌱', steps: 5, description: '长期培育潜在客户', stepsDetail: [
    { title: '欢迎邮件', day: 1, channel: '邮件', channelIcon: 'fas fa-envelope' },
    { title: '行业报告', day: 7, channel: '邮件', channelIcon: 'fas fa-envelope' },
    { title: '产品更新', day: 14, channel: '邮件', channelIcon: 'fas fa-envelope' },
    { title: '案例研究', day: 21, channel: 'LinkedIn', channelIcon: 'fab fa-linkedin' },
    { title: '优惠促销', day: 30, channel: '邮件', channelIcon: 'fas fa-envelope' }
  ]},
  { id: 'reactivate', name: '唤醒序列', icon: '🔄', steps: 3, description: '重新激活沉睡客户', stepsDetail: [
    { title: '想念你邮件', day: 1, channel: '邮件', channelIcon: 'fas fa-envelope' },
    { title: '新产品推荐', day: 5, channel: '邮件', channelIcon: 'fas fa-envelope' },
    { title: '特别优惠', day: 10, channel: 'WhatsApp', channelIcon: 'fab fa-whatsapp' }
  ]}
]

const aiGenerator = ref({
  type: 'introduction', product: 'ssd', selectedPoints: ['quality', 'price'],
  tone: 'professional', language: 'en', additionalRequirements: ''
})

const sellingPoints = [
  { id: 'quality', label: '高品质' }, { id: 'price', label: '价格优势' },
  { id: 'service', label: '售后服务' }, { id: 'delivery', label: '快速交付' },
  { id: 'certification', label: '认证' }, { id: 'customization', label: '定制服务' }
]

const toneOptions = [
  { value: 'professional', label: '专业' }, { value: 'friendly', label: '友好' },
  { value: 'direct', label: '简洁' }, { value: 'persuasive', label: '说服力' }
]

const languageOptions = [
  { value: 'en', label: 'English' }, { value: 'zh', label: '中文' },
  { value: 'de', label: 'Deutsch' }, { value: 'ar', label: 'العربية' }
]

const generatedEmail = ref({ subject: '', body: '', wordCount: 0, readTime: 0, readability: 0 })

const emailTemplates = ref([
  { id: 1, type: '介绍信', language: 'EN', subject: 'Reliable SSD Solutions for Your Business', preview: 'Hi [Name], I noticed your company...', openRate: 48, replyRate: 12 },
  { id: 2, type: '跟进邮件', language: 'EN', subject: 'Following Up on Our Conversation', preview: 'Hi [Name], I wanted to follow up...', openRate: 35, replyRate: 8 },
  { id: 3, type: '产品推荐', language: 'EN', subject: 'New Enterprise SSD Line', preview: 'Hi [Name], Exciting news...', openRate: 52, replyRate: 15 },
  { id: 4, type: '介绍信', language: '中文', subject: '为您的企业提供可靠存储方案', preview: '您好，我注意到贵公司...', openRate: 45, replyRate: 10 }
])

const selectedCustomerCount = computed(() => {
  const counts = { all: 847, new: 56, 'high-intent': 124, silent: 89 }
  return counts[newCampaign.value.segment] || 847
})

const selectedSopTemplate = computed(() => sopTemplates.find(s => s.id === newCampaign.value.sopTemplate))

const predictedOpenRate = computed(() => {
  let rate = 35
  if (newCampaign.value.channels.includes('email')) rate += 10
  if (newCampaign.value.channels.includes('whatsapp')) rate += 15
  if (newCampaign.value.channels.includes('linkedin')) rate += 8
  if (newCampaign.value.aiRecommend) rate += 5
  return Math.min(rate, 55)
})

const predictedReplyRate = computed(() => {
  let rate = 8
  if (newCampaign.value.channels.includes('whatsapp')) rate += 5
  if (newCampaign.value.channels.includes('linkedin')) rate += 3
  if (newCampaign.value.rules.noReplyFollowup) rate += 4
  return Math.min(rate, 18)
})

const predictedOpportunities = computed(() => Math.round(selectedCustomerCount.value * predictedReplyRate.value / 100 * 0.4))

const hasWarnings = computed(() => selectedCustomerCount.value > 500 || !newCampaign.value.emailSubject || newCampaign.value.channels.length === 0)

const canCreate = computed(() => confirmChecks.value.content && confirmChecks.value.schedule && confirmChecks.value.compliance)

const formatNumber = (n) => n >= 1000 ? (n / 1000).toFixed(1) + 'K' : n.toLocaleString()
const getStatusLabel = (s) => ({ active: '进行中', paused: '已暂停', completed: '已完成' }[s] || s)
const getChannelIcon = (c) => ({ '邮件': 'fas fa-envelope', 'WhatsApp': 'fab fa-whatsapp', 'LinkedIn': 'fab fa-linkedin' }[c] || 'fas fa-comment')

const getTypeLabel = (type) => ({ prospect: '潜客开发', nurture: '客户培育', reactivate: '客户唤醒', promote: '产品推广', seasonal: '节日营销', exhibition: '展会跟进' }[type] || type)
const getPriorityLabel = (priority) => ({ urgent: '紧急', high: '高优先', medium: '中等', low: '低优先' }[priority] || priority)
const getOwnerName = (owner) => ({ sales1: '张经理', sales2: '李主管', sales3: '王小明' }[owner] || '')
const getRegionLabel = (region) => ({ 'middle-east': '中东', 'europe': '欧洲', 'north-america': '北美', 'southeast-asia': '东南亚', 'africa': '非洲', 'south-america': '南美' }[region] || '全部地区')
const getIndustryLabel = (industry) => ({ 'datacenter': '数据中心', 'consumer': '消费电子', 'distributor': '电子分销', 'retail': '零售', 'manufacturing': '制造业' }[industry] || '全部行业')
const getChannelIconById = (id) => ({ email: 'fas fa-envelope', whatsapp: 'fab fa-whatsapp', linkedin: 'fab fa-linkedin', wechat: 'fab fa-weixin' }[id] || 'fas fa-comment')
const getChannelName = (id) => ({ email: '邮件营销', whatsapp: 'WhatsApp', linkedin: 'LinkedIn', wechat: '微信企业号' }[id] || id)
const getChannelStyle = (id) => {
  const styles = { 
    email: { background: 'rgba(99, 102, 241, 0.2)', color: 'var(--primary)' },
    whatsapp: { background: 'rgba(37, 211, 102, 0.2)', color: '#25D366' },
    linkedin: { background: 'rgba(10, 102, 194, 0.2)', color: '#0A66C2' },
    wechat: { background: 'rgba(7, 193, 96, 0.2)', color: '#07C160' }
  }
  return styles[id] || {}
}
const getChannelConfig = (id) => {
  if (id === 'email') return newCampaign.value.emailSender + ' · ' + (newCampaign.value.emailSendTime === 'optimal' ? 'AI推荐时间' : newCampaign.value.emailSendTime)
  if (id === 'whatsapp') return newCampaign.value.whatsappAccount + ' · ' + newCampaign.value.whatsappInterval + '秒/条'
  if (id === 'linkedin') return newCampaign.value.linkedinAction === 'message' ? '发送消息' : '连接请求' + ' · ' + newCampaign.value.linkedinLimit + '次/天'
  return ''
}

const goToStep = (step) => { currentStep.value = step }
const generateSubjectAI = () => {
  showSubjectSuggestions.value = !showSubjectSuggestions.value
  if (showSubjectSuggestions.value) toast('已生成推荐主题', 'success')
}
const selectSubject = (subj) => { newCampaign.value.emailSubject = subj; showSubjectSuggestions.value = false }
const editSopTemplate = () => {
  customSopData.value = {
    name: selectedSopTemplate.value?.name || '',
    steps: selectedSopTemplate.value?.stepsDetail?.map(s => ({
      title: s.title,
      day: s.day,
      channel: s.channel.toLowerCase().replace('邮件', 'email').replace('linkedin', 'linkedin').replace('电话', 'phone').replace('whatsapp', 'whatsapp'),
      channelIcon: s.channelIcon
    })) || [
      { title: '', day: 1, channel: 'email', channelIcon: 'fas fa-envelope' },
      { title: '', day: 3, channel: 'email', channelIcon: 'fas fa-envelope' },
      { title: '', day: 7, channel: 'linkedin', channelIcon: 'fab fa-linkedin' },
      { title: '', day: 14, channel: 'phone', channelIcon: 'fas fa-phone' }
    ]
  }
  showCustomSopModal.value = true
}

const addCustomSopStep = () => {
  const lastDay = customSopData.value.steps[customSopData.value.steps.length - 1]?.day || 0
  customSopData.value.steps.push({
    title: '',
    day: lastDay + 3,
    channel: 'email',
    channelIcon: 'fas fa-envelope'
  })
}

const removeCustomSopStep = (index) => {
  if (customSopData.value.steps.length > 1) {
    customSopData.value.steps.splice(index, 1)
  }
}

const saveCustomSop = () => {
  if (!customSopData.value.name) {
    toast('请输入SOP名称', 'error')
    return
  }
  const validSteps = customSopData.value.steps.filter(s => s.title)
  if (validSteps.length === 0) {
    toast('请至少填写一个步骤', 'error')
    return
  }
  // 将自定义SOP应用到活动
  newCampaign.value.sopTemplate = 'custom'
  newCampaign.value.customSOP = { ...customSopData.value }
  showCustomSopModal.value = false
  toast('自定义SOP已保存', 'success')
}

const updateChannelIcon = (index) => {
  const channel = customSopData.value.steps[index].channel
  const icons = {
    email: 'fas fa-envelope',
    whatsapp: 'fab fa-whatsapp',
    linkedin: 'fab fa-linkedin',
    phone: 'fas fa-phone',
    wechat: 'fab fa-weixin'
  }
  customSopData.value.steps[index].channelIcon = icons[channel] || 'fas fa-envelope'
}

const openCreateModal = () => { currentStep.value = 1; showCreateModal.value = true }
const closeCreateModal = () => { showCreateModal.value = false; currentStep.value = 1 }
const toggleChannel = (id) => {
  const i = newCampaign.value.channels.indexOf(id)
  i > -1 ? newCampaign.value.channels.splice(i, 1) : newCampaign.value.channels.push(id)
}

const openAIGenerator = (campaign) => { 
  selectedCampaign.value = campaign
  showAIModal.value = true 
}

const generateEmail = () => {
  isGenerating.value = true
  setTimeout(() => {
    generatedEmail.value = {
      subject: 'Reliable SSD Solutions for Your Growing Business',
      body: `Dear [Contact Name],<br><br>I hope this email finds you well. I noticed that <strong>[Company Name]</strong> specializes in SSD distribution, and I wanted to explore potential collaboration opportunities.<br><br>Our company has been a leading SSD manufacturer for over 15 years:<br><br>• <strong>Competitive Pricing:</strong> Factory-direct pricing<br>• <strong>Quality Assurance:</strong> ISO 9001 certified, 3-year warranty<br>• <strong>Fast Delivery:</strong> 15-20 days to major ports<br><br>I'd love to schedule a quick call. Would next Tuesday work?`,
      wordCount: 95,
      readTime: 30,
      readability: 8.5
    }
    isGenerating.value = false
    toast('邮件已生成', 'success')
  }, 2000)
}

const copyEmail = () => {
  const text = generatedEmail.value.body.replace(/<br>/g, '\n').replace(/<strong>/g, '').replace(/<\/strong>/g, '')
  navigator.clipboard.writeText(`Subject: ${generatedEmail.value.subject}\n\n${text}`)
  toast('已复制到剪贴板', 'success')
}

const useEmail = () => { showAIModal.value = false; toast('邮件已应用到活动', 'success') }
const useTemplate = (tpl) => { showTemplatesModal.value = false; toast(`已应用模板: ${tpl.subject}`, 'success') }
const createCampaign = () => { closeCreateModal(); toast('营销活动已创建', 'success') }
const toggleCampaign = (c) => { c.status = c.status === 'paused' ? 'active' : 'paused'; toast(c.status === 'paused' ? '已暂停' : '已恢复', 'success') }
const showCampaignDetail = (campaign) => {
  selectedCampaign.value = campaign
  showCampaignDetailModal.value = true
}

const showAllInteractions = () => {
  // 生成完整的互动列表
  selectedCampaignInteractions.value = [
    { id: 1, name: 'Mohammed Al-Rashid', email: 'mohammed@alrashid.ae', avatar: 'M', type: 'reply', action: '回复邮件', content: '回复了您的邮件，询问价格和交期', time: '10分钟前', sentiment: '正面', priority: '高', interested: true, company: 'Al-Rashid Trading Co.', phone: '+971-50-1234567' },
    { id: 2, name: 'Ahmed Hassan', email: 'ahmed@hassan-trading.ae', avatar: 'A', type: 'open', action: '打开邮件', content: '打开了您的邮件', time: '1小时前', sentiment: '中立', priority: '中', interested: false, company: 'Hassan Trading LLC', phone: '+971-50-2345678' },
    { id: 3, name: 'Sarah Williams', email: 'sarah@techsolutions.uk', avatar: 'S', type: 'click', action: '点击链接', content: '点击了邮件中的产品链接', time: '3小时前', sentiment: '正面', priority: '中', interested: true, company: 'Tech Solutions Ltd', phone: '+44-20-12345678' },
    { id: 4, name: 'John Chen', email: 'john@datacenter.com', avatar: 'J', type: 'reply', action: '回复邮件', content: '希望了解更多关于企业级SSD的详细信息', time: '5小时前', sentiment: '正面', priority: '高', interested: true, company: 'Global Data Center', phone: '+1-555-1234567' },
    { id: 5, name: 'Maria Garcia', email: 'maria@distributor.mx', avatar: 'M', type: 'open', action: '打开邮件', content: '打开了邮件但未回复', time: '昨天', sentiment: '中立', priority: '低', interested: false, company: 'Garcia Distributors', phone: '+52-55-12345678' },
    { id: 6, name: 'David Kim', email: 'david@electronics.kr', avatar: 'D', type: 'click', action: '点击链接', content: '查看了产品规格页面', time: '昨天', sentiment: '正面', priority: '中', interested: true, company: 'Kim Electronics', phone: '+82-2-12345678' },
    { id: 7, name: 'Lisa Brown', email: 'lisa@retail.au', avatar: 'L', type: 'reply', action: '回复邮件', content: '询问批发价格和交货时间', time: '2天前', sentiment: '正面', priority: '高', interested: true, company: 'Brown Retail Group', phone: '+61-2-98765432' },
    { id: 8, name: 'Peter Mueller', email: 'peter@manufacturing.de', avatar: 'P', type: 'open', action: '打开邮件', content: '多次打开邮件查看产品信息', time: '3天前', sentiment: '中立', priority: '低', interested: false, company: 'Mueller Manufacturing', phone: '+49-30-12345678' },
    { id: 9, name: 'Ahmed Al-Sayed', email: 'ahmed@alsayed.ae', avatar: 'A', type: 'click', action: '点击链接', content: '下载了产品目录PDF', time: '4天前', sentiment: '正面', priority: '中', interested: true, company: 'Al-Sayed Group', phone: '+971-4-1234567' },
    { id: 10, name: 'Emma Wilson', email: 'emma@techstartup.us', avatar: 'E', type: 'reply', action: '回复邮件', content: '表示对样品感兴趣，请求寄送样品', time: '5天前', sentiment: '正面', priority: '高', interested: true, company: 'Wilson Tech Startup', phone: '+1-415-1234567' }
  ]
  showInteractionsModal.value = true
}

const clearFilters = () => {
  newCampaign.value.filters = { 
    region: '', industry: '', scoreRange: '', stage: '', companySize: '', purchaseCycle: '', 
    keyword: '', selectedTags: [] 
  }
}

const removeTag = (tag) => {
  const idx = newCampaign.value.filters.selectedTags.indexOf(tag)
  if (idx > -1) newCampaign.value.filters.selectedTags.splice(idx, 1)
}

const applySuggestion = (type) => {
  if (type === 'name') {
    const typeNames = { prospect: '潜客开发', nurture: '客户培育', reactivate: '客户唤醒', promote: '产品推广', seasonal: '节日营销', exhibition: '展会跟进' }
    const regions = ['中东', '欧洲', '北美', '东南亚']
    const region = regions[Math.floor(Math.random() * regions.length)]
    newCampaign.value.name = `2026春季${region}${typeNames[newCampaign.value.type] || '营销'}活动`
    toast('活动名称已生成', 'success')
  } else if (type === 'desc') {
    newCampaign.value.description = `本次活动旨在通过多渠道触达目标客户群体，提升品牌知名度并获取高质量商机。主要策略包括：
1. 针对目标客户发送个性化邮件内容
2. 结合WhatsApp/LinkedIn进行多渠道跟进
3. 设置自动化SOP序列持续培育客户
预期目标：打开率45%+，回复率10%+，转化商机15+`
    toast('活动描述已生成', 'success')
  }
}

const toast = (msg, type = 'success') => {
  toastMessage.value = msg; toastType.value = type; showToast.value = true
  setTimeout(() => { showToast.value = false }, 3000)
}

// 历史活动数据
const historyCampaigns = ref([
  { id: 101, name: '2025冬季中东潜客开发', dateRange: '2025-12-01 至 2025-12-31', owner: '张经理', status: 'completed', icon: 'fas fa-snowflake', iconBg: 'rgba(99, 102, 241, 0.2)', iconColor: 'var(--primary)', channels: ['邮件', 'LinkedIn'], stats: { sent: 1256, opened: 590, openRate: 47, replied: 148, replyRate: 12, clicked: 320, opportunities: 28 } },
  { id: 102, name: '欧洲数据中心展会跟进', dateRange: '2025-11-15 至 2025-12-15', owner: '李主管', status: 'completed', icon: 'fas fa-building', iconBg: 'rgba(16, 185, 129, 0.2)', iconColor: 'var(--success)', channels: ['邮件', 'WhatsApp'], stats: { sent: 856, opened: 478, openRate: 56, replied: 126, replyRate: 15, clicked: 198, opportunities: 22 } },
  { id: 103, name: '黑色星期五促销', dateRange: '2025-11-25 至 2025-11-30', owner: '王小明', status: 'completed', icon: 'fas fa-tag', iconBg: 'rgba(245, 158, 11, 0.2)', iconColor: 'var(--warning)', channels: ['邮件'], stats: { sent: 2340, opened: 890, openRate: 38, replied: 234, replyRate: 10, clicked: 456, opportunities: 45 } },
  { id: 104, name: '北美市场调研活动', dateRange: '2025-10-01 至 2025-10-31', owner: '张经理', status: 'completed', icon: 'fas fa-flag-usa', iconBg: 'rgba(6, 182, 212, 0.2)', iconColor: 'var(--info)', channels: ['邮件', 'LinkedIn'], stats: { sent: 678, opened: 298, openRate: 44, replied: 68, replyRate: 10, clicked: 145, opportunities: 12 } },
  { id: 105, name: '春节客户关怀', dateRange: '2025-01-20 至 2025-02-10', owner: '李主管', status: 'completed', icon: 'fas fa-gift', iconBg: 'rgba(236, 72, 153, 0.2)', iconColor: '#ec4899', channels: ['邮件', 'WhatsApp'], stats: { sent: 1567, opened: 1020, openRate: 65, replied: 312, replyRate: 20, clicked: 380, opportunities: 35 } },
  { id: 106, name: '2025广交会客户回访', dateRange: '2025-10-15 至 2025-11-15', owner: '张经理', status: 'completed', icon: 'fas fa-handshake', iconBg: 'rgba(16, 185, 129, 0.2)', iconColor: 'var(--success)', channels: ['邮件', 'WhatsApp', 'LinkedIn'], stats: { sent: 1567, opened: 980, openRate: 63, replied: 298, replyRate: 19, clicked: 456, opportunities: 52 } },
  { id: 107, name: '中东斋月营销活动', dateRange: '2025-03-01 至 2025-03-31', owner: '李主管', status: 'completed', icon: 'fas fa-star-and-crescent', iconBg: 'rgba(139, 92, 246, 0.2)', iconColor: 'var(--secondary)', channels: ['邮件'], stats: { sent: 890, opened: 512, openRate: 58, replied: 145, replyRate: 16, clicked: 234, opportunities: 28 } },
  { id: 108, name: 'Q3季度产品促销', dateRange: '2025-07-01 至 2025-09-30', owner: '王小明', status: 'completed', icon: 'fas fa-percent', iconBg: 'rgba(239, 68, 68, 0.2)', iconColor: 'var(--danger)', channels: ['邮件', 'WhatsApp'], stats: { sent: 3456, opened: 1382, openRate: 40, replied: 345, replyRate: 10, clicked: 692, opportunities: 65 } },
  { id: 109, name: '东南亚市场开拓', dateRange: '2025-06-01 至 2025-08-31', owner: '张经理', status: 'completed', icon: 'fas fa-map-marker-alt', iconBg: 'rgba(6, 182, 212, 0.2)', iconColor: 'var(--info)', channels: ['邮件', 'LinkedIn'], stats: { sent: 1234, opened: 567, openRate: 46, replied: 98, replyRate: 8, clicked: 189, opportunities: 18 } },
  { id: 110, name: '年度客户答谢活动', dateRange: '2025-12-15 至 2026-01-05', owner: '李主管', status: 'completed', icon: 'fas fa-glass-cheers', iconBg: 'rgba(251, 191, 36, 0.2)', iconColor: '#FBBF24', channels: ['邮件', 'WhatsApp'], stats: { sent: 2890, opened: 2023, openRate: 70, replied: 578, replyRate: 20, clicked: 867, opportunities: 78 } }
])

const totalHistoricalSent = computed(() => historyCampaigns.value.reduce((sum, c) => sum + c.stats.sent, 0).toLocaleString())
const avgHistoricalOpenRate = computed(() => Math.round(historyCampaigns.value.reduce((sum, c) => sum + c.stats.openRate, 0) / historyCampaigns.value.length))
const avgHistoricalReplyRate = computed(() => Math.round(historyCampaigns.value.reduce((sum, c) => sum + c.stats.replyRate, 0) / historyCampaigns.value.length))
const totalHistoricalOpportunities = computed(() => historyCampaigns.value.reduce((sum, c) => sum + c.stats.opportunities, 0))

const filteredHistoryCampaigns = computed(() => {
  return historyCampaigns.value.filter(c => {
    const matchSearch = !historySearch.value || c.name.toLowerCase().includes(historySearch.value.toLowerCase())
    const matchStatus = !historyFilter.value.status || c.status === historyFilter.value.status
    return matchSearch && matchStatus
  })
})

// 模板数据
const allTemplates = ref([
  { id: 1, channel: 'email', type: '介绍信', language: 'English', subject: 'Reliable SSD Solutions for Your Business', preview: 'Hi [Name], I noticed your company specializes in SSD distribution...', openRate: 48, replyRate: 12, usedCount: 156, favorite: true, tags: ['SSD', '潜客开发'], body: '<p>Hi [Name],</p><p>I noticed your company specializes in <strong>SSD distribution</strong>...</p>' },
  { id: 2, channel: 'email', type: '跟进邮件', language: 'English', subject: 'Following Up on Our Conversation', preview: 'Hi [Name], I wanted to follow up on my previous email...', openRate: 35, replyRate: 8, usedCount: 89, favorite: false, tags: ['跟进'], body: '<p>Hi [Name],</p><p>I wanted to follow up...</p>' },
  { id: 3, channel: 'email', type: '产品推荐', language: 'English', subject: 'New Enterprise SSD Line', preview: 'Hi [Name], Exciting news! Our new enterprise SSD...', openRate: 52, replyRate: 15, usedCount: 234, favorite: true, tags: ['产品', '新品'], body: '<p>Hi [Name],</p><p>Exciting news! Our new <strong>enterprise SSD line</strong>...</p>' },
  { id: 4, channel: 'email', type: '报价邮件', language: 'English', subject: 'Competitive Quote for Your Order', preview: 'Hi [Name], As discussed, please find our quote...', openRate: 42, replyRate: 18, usedCount: 178, favorite: false, tags: ['报价'], body: '<p>Hi [Name],</p><p>As discussed, please find our quote...</p>' },
  { id: 5, channel: 'email', type: '节日祝福', language: '中文', subject: '【节日祝福】感谢您一直以来的支持', preview: '尊敬的客户，新春佳节即将来临...', openRate: 65, replyRate: 20, usedCount: 345, favorite: true, tags: ['节日', '中国'], body: '<p>尊敬的客户：</p><p>新春佳节即将来临，感谢您...</p>' },
  { id: 6, channel: 'whatsapp', type: '即时消息', language: 'English', subject: 'Quick Chat About SSD', preview: 'Hi [Name]! 👋 I came across your profile...', openRate: 78, replyRate: 35, usedCount: 456, favorite: true, tags: ['WhatsApp', '即时'], body: 'Hi [Name]! 👋 I came across your profile...' },
  { id: 7, channel: 'linkedin', type: '连接请求', language: 'English', subject: 'Connection Request - Storage Solutions', preview: 'Hi [Name], I noticed we share similar interests...', openRate: 52, replyRate: 25, usedCount: 567, favorite: true, tags: ['LinkedIn', '连接'], body: 'Hi [Name], I noticed we share similar interests...' },
  { id: 8, channel: 'linkedin', type: '私信', language: 'English', subject: 'Quick Question About Enterprise Storage', preview: 'Hi [Name], I saw your recent post about data centers...', openRate: 48, replyRate: 22, usedCount: 345, favorite: false, tags: ['LinkedIn', '私信'], body: 'Hi [Name], I saw your recent post about data centers...' }
])

const filteredTemplates = computed(() => {
  let templates = allTemplates.value
  if (templateTab.value !== 'all') {
    if (templateTab.value === 'my') {
      templates = templates.filter(t => t.favorite)
    } else {
      templates = templates.filter(t => t.channel === templateTab.value)
    }
  }
  if (templateSearch.value) {
    const search = templateSearch.value.toLowerCase()
    templates = templates.filter(t => t.subject.toLowerCase().includes(search) || t.preview.toLowerCase().includes(search))
  }
  return templates
})

const avgTemplateOpenRate = computed(() => Math.round(allTemplates.value.reduce((sum, t) => sum + t.openRate, 0) / allTemplates.value.length))
const avgTemplateReplyRate = computed(() => Math.round(allTemplates.value.reduce((sum, t) => sum + t.replyRate, 0) / allTemplates.value.length))

const aiRecommendedTemplates = computed(() => [
  { id: 1, channel: 'email', type: '介绍信', language: 'English', subject: 'Reliable SSD Solutions for Your Business', openRate: 48, replyRate: 12, matchScore: 95 },
  { id: 6, channel: 'whatsapp', type: '即时消息', language: 'English', subject: 'Quick Chat About SSD', openRate: 78, replyRate: 35, matchScore: 88 },
  { id: 7, channel: 'linkedin', type: '连接请求', language: 'English', subject: 'Connection Request', openRate: 52, replyRate: 25, matchScore: 82 }
])

// 历史活动方法
const duplicateCampaign = (campaign) => {
  toast(`已复制活动"${campaign.name}"`, 'success')
  showHistoryModal.value = false
  setTimeout(() => {
    openCreateModal()
    newCampaign.value.name = campaign.name + ' (副本)'
  }, 300)
}

const viewHistoryDetail = (campaign) => {
  selectedHistoryCampaign.value = campaign
  showHistoryDetailModal.value = true
}

const exportHistoryReport = (campaign) => {
  toast(`正在导出活动报告`, 'success')
}

const exportAllHistory = () => {
  toast('正在导出全部历史报告', 'success')
}

// 模板方法
const getTemplateChannelIcon = (channel) => {
  const icons = { email: 'fas fa-envelope', whatsapp: 'fab fa-whatsapp', linkedin: 'fab fa-linkedin' }
  return icons[channel] || 'fas fa-file-alt'
}

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

const previewTemplate = (tpl) => {
  previewingTemplate.value = tpl
  showTemplatePreview.value = true
}

const importTemplates = () => {
  toast('模板导入功能开发中', 'info')
}

const openOpenedCustomers = (campaign) => {
  selectedOpenedCampaign.value = campaign
  showOpenedCustomersModal.value = true
}

const openReplyReview = (campaign) => {
  selectedReplyReview.value = campaign
  showReplyReviewModal.value = true
}

const openInterventionModal = (campaign) => {
  selectedIntervention.value = campaign
  showInterventionModal.value = true
}

const approveReply = (reply) => {
  reply.status = 'approved'
  toast(`已批准 ${reply.name} 的回复，将由销售人员跟进`, 'success')
}

const rejectReply = (reply) => {
  reply.status = 'rejected'
  toast(`已拒绝 ${reply.name} 的回复`, 'success')
}

const assignToSales = (reply) => {
  reply.status = 'assigned'
  toast(`已分配给销售人员，等待跟进`, 'success')
}

const approveReplyWithReview = (reply, reviewer) => {
  reply.status = 'approved'
  reply.reviewedBy = reviewer
  reply.reviewTime = new Date().toLocaleString('zh-CN')
  toast(`已批准 ${reply.name} 的回复`, 'success')
}

const rejectReplyWithReason = (reply, reason) => {
  reply.status = 'rejected'
  reply.reviewedBy = '当前用户'
  reply.reviewTime = new Date().toLocaleString('zh-CN')
  toast(`已拒绝 ${reply.name} 的回复，原因: ${reason}`, 'success')
}

const assignReplyToSales = (reply, salesPerson) => {
  reply.status = 'assigned'
  reply.assignedTo = salesPerson
  reply.reviewedBy = '当前用户'
  reply.reviewTime = new Date().toLocaleString('zh-CN')
  toast(`已将 ${reply.name} 分配给 ${salesPerson}`, 'success')
}

const createIntervention = (type, reason) => {
  const newIntervention = {
    id: interventions.value.length + 1,
    campaignId: selectedIntervention.value.id,
    type: type,
    reason: reason,
    affectedCount: selectedIntervention.value.stats.sent,
    status: 'active',
    createdTime: new Date().toLocaleString('zh-CN'),
    createdBy: '当前用户'
  }
  interventions.value.push(newIntervention)
  toast(`已创建人工干预: ${type}`, 'success')
  showInterventionModal.value = false
}

const contactCustomer = (customer) => {
  toast(`正在联系 ${customer.name}...`, 'success')
}

const getSentimentColor = (sentiment) => {
  const colors = { '正面': '#10B981', '中立': '#F59E0B', '负面': '#EF4444' }
  return colors[sentiment] || '#6366F1'
}

const protectCustomer = (customer) => {
  customer.protected = true
  customer.protectionReason = '高价值客户'
  customer.interventionStatus = 'assigned-to-sales'
  protectedCustomersList.value.push({
    id: protectedCustomersList.value.length + 1,
    name: customer.name,
    email: customer.email,
    protectionLevel: customer.value === '高价值' ? '高' : '中',
    reason: customer.value === '高价值' ? '高价值客户' : '活跃客户',
    annualValue: customer.annualPurchase,
    status: 'active',
    protectedSince: new Date().toLocaleDateString('zh-CN'),
    assignedSalesRep: '待分配'
  })
  toast(`已将 ${customer.name} 添加到保护白名单`, 'success')
}

const unprotectCustomer = (customer) => {
  customer.protected = false
  customer.protectionReason = ''
  customer.interventionStatus = 'auto-follow'
  protectedCustomersList.value = protectedCustomersList.value.filter(c => c.email !== customer.email)
  toast(`已将 ${customer.name} 从保护白名单中移除`, 'success')
}

const assignToSalesRep = (customer, salesRep) => {
  customer.interventionStatus = 'assigned-to-sales'
  toast(`已分配 ${customer.name} 给销售人员 ${salesRep}`, 'success')
}

const pauseCampaignForCustomer = (customer) => {
  customer.interventionStatus = 'paused'
  toast(`已暂停向 ${customer.name} 发送营销邮件`, 'success')
}

const resumeCampaignForCustomer = (customer) => {
  customer.interventionStatus = 'auto-follow'
  toast(`已恢复向 ${customer.name} 发送营销邮件`, 'success')
}

// 活动详情方法
const openCampaignDetailModal = (campaign) => {
  selectedCampaign.value = campaign
  showCampaignDetailModal.value = true
}

const getChannelStyleByName = (ch) => {
  const styles = {
    '邮件': { background: 'rgba(99, 102, 241, 0.2)', color: 'var(--primary)' },
    'WhatsApp': { background: 'rgba(37, 211, 102, 0.2)', color: '#25D366' },
    'LinkedIn': { background: 'rgba(10, 102, 194, 0.2)', color: '#0A66C2' },
    '微信': { background: 'rgba(7, 193, 96, 0.2)', color: '#07C160' }
  }
  return styles[ch] || { background: 'rgba(99, 102, 241, 0.2)', color: 'var(--primary)' }
}

const exportCampaignReport = (campaign) => {
  toast(`正在导出"${campaign.name}"报告`, 'success')
}

const editCampaign = (campaign) => {
  showCampaignDetailModal.value = false
  toast('正在打开活动编辑...', 'info')
}
</script>

<style scoped>
/* ===== History Detail Modal ===== */
.history-detail-modal { max-width: 800px; max-height: 85vh; }
.history-detail-modal .modal-header { background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.1)); border-bottom: 2px solid var(--warning); }
.history-detail-modal .modal-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.history-detail-modal .detail-status { font-size: 12px; padding: 4px 10px; border-radius: 10px; margin-left: auto; }
.history-detail-modal .detail-status.completed { background: rgba(16, 185, 129, 0.2); color: var(--success); }

.history-detail-modal .evaluation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.history-detail-modal .eval-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--bg-hover); border-radius: 8px; }
.history-detail-modal .eval-label { font-size: 12px; color: var(--text-muted); min-width: 60px; }
.history-detail-modal .eval-bar { flex: 1; height: 8px; background: var(--bg-dark); border-radius: 4px; overflow: hidden; }
.history-detail-modal .eval-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--success)); border-radius: 4px; transition: width 0.3s; }
.history-detail-modal .eval-value { font-size: 11px; font-weight: 600; color: var(--success); min-width: 40px; text-align: right; }

.history-detail-modal .summary-content { display: flex; flex-direction: column; gap: 10px; }
.history-detail-modal .summary-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; background: var(--bg-hover); border-radius: 8px; font-size: 13px; }
.history-detail-modal .summary-item i { margin-top: 2px; }
.history-detail-modal .summary-item .success { color: var(--success); }
.history-detail-modal .summary-item .info { color: var(--primary); }

/* ===== Custom SOP Modal ===== */
.custom-sop-modal { max-width: 700px; max-height: 85vh; }
.custom-sop-modal .modal-header { background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1)); border-bottom: 2px solid var(--secondary); }
.custom-sop-modal .modal-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--secondary); }

.custom-steps-section { margin-bottom: 20px; }
.custom-steps-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.custom-steps-section h5 { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; margin: 0; }

.custom-steps-list { display: flex; flex-direction: column; gap: 12px; max-height: 300px; overflow-y: auto; }
.custom-step-item { display: flex; gap: 12px; padding: 14px; background: var(--bg-hover); border-radius: 10px; border: 1px solid var(--border); transition: all 0.2s; }
.custom-step-item:hover { border-color: var(--secondary); }
.custom-step-item .step-number { width: 32px; height: 32px; background: var(--secondary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.custom-step-item .step-fields { flex: 1; }
.custom-step-item .step-row { display: flex; gap: 10px; margin-bottom: 8px; }
.custom-step-item .step-row:last-child { margin-bottom: 0; }
.custom-step-item .step-row .form-group { flex: 1; margin-bottom: 0; }
.custom-step-item .step-row .form-group .form-label { font-size: 11px; margin-bottom: 4px; }
.custom-step-item .step-row .form-input, .custom-step-item .step-row .form-select { padding: 8px 10px; font-size: 12px; }
.custom-step-item .channel-preview { display: flex; align-items: flex-end; }
.custom-step-item .preview-badge { padding: 6px 12px; border-radius: 8px; font-size: 11px; display: flex; align-items: center; gap: 6px; }
.custom-step-item .preview-badge.email { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.custom-step-item .preview-badge.whatsapp { background: rgba(37, 211, 102, 0.2); color: #25D366; }
.custom-step-item .preview-badge.linkedin { background: rgba(10, 102, 194, 0.2); color: #0A66C2; }
.custom-step-item .preview-badge.phone { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.custom-step-item .preview-badge.wechat { background: rgba(7, 193, 96, 0.2); color: #07C160; }
.custom-step-item .step-actions { display: flex; align-items: center; }
.custom-step-item .btn-icon { width: 32px; height: 32px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 6px; transition: all 0.2s; }
.custom-step-item .btn-icon:hover:not(:disabled) { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
.custom-step-item .btn-icon:disabled { opacity: 0.3; cursor: not-allowed; }

/* Custom SOP Preview */
.custom-sop-preview { padding: 14px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1)); border-radius: 10px; }
.custom-sop-preview h5 { font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; color: var(--secondary); }
.custom-sop-preview .preview-timeline { display: flex; flex-direction: column; gap: 8px; }
.custom-sop-preview .preview-step { display: flex; gap: 10px; align-items: center; padding: 8px; background: var(--bg-card); border-radius: 8px; }
.custom-sop-preview .preview-marker { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 12px; }
.custom-sop-preview .preview-content { flex: 1; }
.custom-sop-preview .preview-title { font-size: 12px; font-weight: 500; }
.custom-sop-preview .preview-meta { font-size: 10px; color: var(--text-muted); }
.custom-sop-preview .preview-empty { text-align: center; padding: 20px; color: var(--text-muted); font-size: 12px; }

/* ===== Interactions Detail Modal ===== */
.interactions-detail-modal { max-width: 900px; max-height: 85vh; }
.interactions-detail-modal .modal-header { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border-bottom: 2px solid var(--primary); }
.interactions-detail-modal .modal-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.interactions-detail-modal .interaction-count { font-size: 12px; padding: 4px 10px; background: var(--bg-hover); border-radius: 10px; margin-left: auto; color: var(--text-muted); }

.interactions-filters { display: flex; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.interactions-filters .filter-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 20px; font-size: 12px; cursor: pointer; transition: all 0.2s; color: var(--text-secondary); }
.interactions-filters .filter-btn:hover { border-color: var(--primary); }
.interactions-filters .filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

.all-interactions-list { display: flex; flex-direction: column; gap: 12px; max-height: 500px; overflow-y: auto; }
.interaction-detail-item { display: flex; gap: 14px; padding: 16px; background: var(--bg-hover); border-radius: 12px; transition: all 0.2s; }
.interaction-detail-item:hover { background: rgba(99, 102, 241, 0.05); }
.interaction-detail-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; flex-shrink: 0; }
.interaction-detail-avatar.reply { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.interaction-detail-avatar.open { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.interaction-detail-avatar.click { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.interaction-detail-content { flex: 1; }
.interaction-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.interaction-detail-name { font-size: 14px; font-weight: 600; margin-right: 8px; }
.interaction-detail-company { font-size: 12px; color: var(--text-muted); }
.interaction-detail-time { font-size: 11px; color: var(--text-muted); }
.interaction-detail-action { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.action-badge { display: flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 11px; }
.action-badge.reply { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.action-badge.open { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.action-badge.click { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.interaction-detail-text { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.5; }
.interaction-detail-contact { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); }
.interaction-detail-contact i { margin-right: 4px; }
.interaction-detail-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; }

/* ===== Create Campaign Modal Optimization ===== */
.create-modal { max-width: 850px; max-height: 85vh; }
.create-modal .modal-header { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border-bottom: 2px solid var(--primary); }
.create-modal .modal-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--primary); }
.create-modal .modal-title i { font-size: 20px; }

/* Step Indicator Enhancement */
.step-indicator { display: flex; align-items: center; justify-content: center; margin-bottom: 28px; gap: 0; }
.step { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; }
.step-number { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--text-muted); border: 2px solid var(--border); transition: all 0.3s; }
.step.active .step-number { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 0 12px rgba(99, 102, 241, 0.3); }
.step.completed .step-number { background: var(--success); color: white; border-color: var(--success); }
.step-label { font-size: 11px; margin-top: 6px; color: var(--text-muted); text-align: center; }
.step.active .step-label { color: var(--primary); font-weight: 600; }
.step-line { flex: 1; height: 2px; background: var(--border); margin: 0 -8px; position: relative; top: -18px; }
.step-line.active { background: var(--primary); }

/* Step Content Enhancement */
.step-content { animation: fadeIn 0.3s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.step-content h4 { font-size: 16px; font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
.step-content h4 i { color: var(--primary); font-size: 18px; }

/* Form Enhancement */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 13px; transition: all 0.2s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 8px rgba(99, 102, 241, 0.2); background: var(--bg-card); }
.form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-style: italic; }
.required { color: var(--danger); }

/* Goal Inputs Enhancement */
.goal-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.goal-item { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--bg-hover); border-radius: 10px; border: 1px solid var(--border); transition: all 0.2s; }
.goal-item:hover { border-color: var(--primary); background: rgba(99, 102, 241, 0.05); }
.goal-item i { color: var(--primary); font-size: 16px; flex-shrink: 0; }
.goal-input { width: 50px; padding: 6px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 12px; text-align: center; }
.goal-item span { font-size: 11px; color: var(--text-secondary); }

/* AI Suggest Section Enhancement */
.ai-suggest-section { margin-top: 16px; padding: 14px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 10px; }
.ai-suggest-section h5 { font-size: 13px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; }
.ai-suggestions { display: flex; gap: 10px; }
.ai-suggestion { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; cursor: pointer; transition: all 0.2s; flex: 1; }
.ai-suggestion:hover { border-color: var(--primary); background: rgba(99, 102, 241, 0.1); }
.ai-suggestion i { color: var(--primary); }

/* ===== Reply Review Modal Optimization ===== */
.detail-modal { max-width: 750px; max-height: 85vh; }
.detail-modal .modal-header { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(99, 102, 241, 0.1)); border-bottom: 2px solid var(--success); }
.detail-modal .modal-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* Review Stats Enhancement */
.review-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.stat-box { padding: 14px; background: var(--bg-hover); border-radius: 10px; border-left: 3px solid var(--primary); text-align: center; transition: all 0.2s; }
.stat-box:hover { background: rgba(99, 102, 241, 0.05); border-left-color: var(--success); }
.stat-label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; display: block; }
.stat-value { font-size: 24px; font-weight: 700; color: var(--primary); }

/* Replies List Enhancement */
.replies-list { display: flex; flex-direction: column; gap: 12px; max-height: 400px; overflow-y: auto; }
.reply-item { padding: 14px; background: var(--bg-hover); border-radius: 10px; border-left: 3px solid var(--border); transition: all 0.2s; }
.reply-item:hover { background: rgba(99, 102, 241, 0.05); border-left-color: var(--primary); }
.reply-item.pending-review { border-left-color: var(--warning); background: rgba(245, 158, 11, 0.05); }
.reply-item.approved { border-left-color: var(--success); opacity: 0.9; }
.reply-item.rejected { border-left-color: var(--danger); opacity: 0.7; }

/* Reply Header Enhancement */
.reply-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.reply-info { flex: 1; }
.reply-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.review-required-badge { font-size: 10px; padding: 2px 8px; background: rgba(245, 158, 11, 0.2); color: var(--warning); border-radius: 10px; font-weight: normal; }
.reply-email { font-size: 12px; color: var(--text-muted); }
.reply-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.sentiment-badge { font-size: 11px; padding: 3px 8px; border-radius: 10px; }
.priority-badge { font-size: 11px; padding: 3px 8px; border-radius: 10px; }
.priority-badge.高 { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.priority-badge.中 { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.priority-badge.低 { background: rgba(107, 114, 128, 0.2); color: var(--text-muted); }

/* Reply Content Enhancement */
.reply-content { padding: 10px; background: var(--bg-dark); border-radius: 8px; margin-bottom: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.reply-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reply-status { display: flex; flex-direction: column; gap: 6px; }

/* ===== Modal Footer Enhancement ===== */
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border); background: var(--bg-hover); }

/* ===== Button Styles ===== */
.btn { padding: 10px 16px; border-radius: 8px; border: none; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: #5B5FDE; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }
.btn-secondary { background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { background: rgba(99, 102, 241, 0.1); border-color: var(--primary); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* Customers & Replies List */
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.filter-btn { padding: 6px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text-secondary); transition: all 0.2s; }
.filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.filter-btn:hover { background: rgba(99, 102, 241, 0.1); }

.customers-list { display: flex; flex-direction: column; gap: 12px; }
.customer-item { padding: 14px; background: var(--bg-hover); border-radius: 10px; border-left: 3px solid var(--border); transition: all 0.2s; }
.customer-item.protected { border-left-color: var(--success); background: rgba(16, 185, 129, 0.05); }
.customer-item .customer-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.customer-item .customer-info { flex: 1; }
.customer-item .customer-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; }
.customer-item .protection-badge { font-size: 10px; padding: 2px 8px; background: rgba(16, 185, 129, 0.2); color: var(--success); border-radius: 10px; font-weight: normal; }
.customer-item .customer-email { font-size: 12px; color: var(--text-muted); }
.customer-item .customer-badges { display: flex; gap: 8px; }
.customer-item .value-badge { font-size: 11px; padding: 4px 10px; border-radius: 10px; }
.customer-item .value-badge.高价值 { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.customer-item .value-badge.中价值 { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.customer-item .value-badge.低价值 { background: rgba(107, 114, 128, 0.2); color: #6B7280; }
.customer-item .engagement-badge { font-size: 11px; padding: 4px 10px; border-radius: 10px; }
.customer-item .customer-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; font-size: 12px; }
.customer-item .detail-item { display: flex; justify-content: space-between; padding: 6px 8px; background: var(--bg-dark); border-radius: 6px; }
.customer-item .detail-item .label { color: var(--text-muted); }
.customer-item .detail-item .value { font-weight: 600; }
.customer-item .customer-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.customer-item .customer-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.replies-list { display: flex; flex-direction: column; gap: 12px; }
.reply-item { padding: 14px; background: var(--bg-hover); border-radius: 10px; border-left: 3px solid var(--border); transition: all 0.2s; }
.reply-item.pending-review { border-left-color: var(--warning); }
.reply-item.approved { border-left-color: var(--success); opacity: 0.9; }
.reply-item.rejected { border-left-color: #EF4444; opacity: 0.7; }
.reply-item.assigned { border-left-color: var(--primary); }
.reply-item.requires-review { background: rgba(245, 158, 11, 0.05); }
.reply-item .reply-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.reply-item .reply-info { flex: 1; }
.reply-item .reply-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; }
.reply-item .review-required-badge { font-size: 10px; padding: 2px 8px; background: rgba(245, 158, 11, 0.2); color: #F59E0B; border-radius: 10px; font-weight: normal; }
.reply-item .reply-email { font-size: 12px; color: var(--text-muted); }
.reply-item .reply-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.reply-item .sentiment-badge { font-size: 11px; padding: 3px 8px; border-radius: 10px; }
.reply-item .priority-badge { font-size: 11px; padding: 3px 8px; border-radius: 10px; }
.reply-item .priority-badge.high { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.reply-item .priority-badge.medium { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.reply-item .priority-badge.low { background: rgba(107, 114, 128, 0.2); color: #6B7280; }
.reply-item .reply-customer-info { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.reply-item .reply-time { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.reply-item .reply-content { padding: 10px; background: var(--bg-dark); border-radius: 8px; margin-bottom: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.reply-item .reply-review-notes { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: rgba(99, 102, 241, 0.1); border-radius: 6px; margin-bottom: 10px; font-size: 12px; color: var(--text-secondary); }
.reply-item .reply-review-notes i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.reply-item .reply-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reply-item .reply-status { display: flex; flex-direction: column; gap: 6px; }
.reply-item .status-badge { font-size: 11px; padding: 4px 10px; border-radius: 10px; display: inline-block; width: fit-content; }
.reply-item .status-badge.approved { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.reply-item .status-badge.rejected { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.reply-item .status-badge.assigned { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.reply-item .review-info { font-size: 10px; color: var(--text-muted); }

/* Protected Customers */
.protected-customers { display: flex; flex-direction: column; gap: 10px; }
.protected-customer-item { padding: 12px; background: var(--bg-dark); border-radius: 8px; border-left: 3px solid var(--success); }
.protected-customer-item .customer-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.protected-customer-item .customer-info { flex: 1; }
.protected-customer-item .customer-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; }
.protection-level { font-size: 10px; padding: 2px 8px; border-radius: 10px; margin-left: 8px; }
.protection-level.高 { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.protection-level.中 { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.protected-customer-item .customer-email { font-size: 12px; color: var(--text-muted); }
.customer-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }
.meta-item { display: flex; align-items: center; gap: 4px; }
.protected-customer-item .customer-details { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.detail { display: flex; align-items: center; gap: 4px; }
.protected-customer-item .customer-actions { display: flex; gap: 8px; }

/* Intervention Options */
.tabs-section { display: flex; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.tabs-section .tab-item { padding: 6px 12px; font-size: 13px; color: var(--text-secondary); cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 6px; }
.tabs-section .tab-item.active { background: var(--bg-hover); color: var(--text-primary); font-weight: 600; }

.intervention-options { display: flex; flex-direction: column; gap: 10px; }
.intervention-options .option-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--bg-dark); border-radius: 10px; cursor: pointer; transition: all 0.2s; border: 1px solid var(--border); }
.intervention-options .option-item:hover { background: rgba(99, 102, 241, 0.1); border-color: var(--primary); }
.intervention-options .option-item i { font-size: 20px; color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.intervention-options .option-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.intervention-options .option-desc { font-size: 11px; color: var(--text-muted); }

.interventions-list { display: flex; flex-direction: column; gap: 8px; }
.interventions-list .intervention-item { padding: 12px; background: var(--bg-dark); border-radius: 8px; border-left: 3px solid var(--primary); }
.interventions-list .intervention-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.interventions-list .intervention-type { font-size: 13px; font-weight: 600; }
.interventions-list .intervention-status { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.interventions-list .intervention-status.active { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.interventions-list .intervention-status.completed { background: rgba(107, 114, 128, 0.2); color: #6B7280; }
.interventions-list .intervention-info { display: flex; flex-direction: column; gap: 6px; }
.interventions-list .description { font-size: 12px; color: var(--text-secondary); margin: 0; }
.interventions-list .meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-muted); }

/* Info Grid */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.info-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--bg-dark); border-radius: 8px; }
.info-item .label { font-size: 11px; color: var(--text-muted); }
.info-item .value { font-size: 14px; font-weight: 600; }


.marketing-page { flex: 1; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; background: var(--bg-dark); }
.marketing-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); }
.header-actions { display: flex; gap: 8px; }

.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); }
.stat-icon-lg { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.stat-icon-lg.blue { 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.purple { background: rgba(139, 92, 246, 0.2); color: var(--secondary); }
.stat-icon-lg.orange { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.stat-icon-lg.success { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.stat-content-lg h3 { font-size: 24px; font-weight: 700; }
.stat-content-lg p { font-size: 12px; color: var(--text-secondary); }

.tabs-row { display: flex; justify-content: space-between; 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; }
.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; }
.tab-item.active .tab-count { background: var(--primary); color: white; }

.campaigns-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.campaign-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; cursor: pointer; transition: all 0.2s; }
.campaign-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.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; }
.status-badge { font-size: 10px; padding: 3px 8px; border-radius: 10px; }
.status-badge.active { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.status-badge.paused { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.card-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.card-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.card-channels { display: flex; gap: 6px; margin-bottom: 12px; }
.channel-tag { display: flex; align-items: center; gap: 4px; font-size: 11px; padding: 4px 10px; background: var(--bg-hover); border-radius: 12px; color: var(--text-secondary); }
.card-stats { display: flex; gap: 20px; margin-bottom: 12px; padding: 12px; background: var(--bg-hover); border-radius: 8px; }
.stat-item { text-align: center; }
.stat-item .stat-value { font-size: 18px; font-weight: 700; display: block; }
.stat-item .stat-value.success { color: var(--success); }
.stat-item .stat-value.primary { color: var(--primary); }
.stat-item .stat-label { font-size: 11px; color: var(--text-muted); }
.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(--primary); border-radius: 2px; }
.card-actions { display: flex; gap: 8px; }

/* Modal */
.modal-overlay { position: fixed; inset: 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; }
.create-modal, .ai-modal { max-width: 800px; }
.detail-modal { max-width: 750px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.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-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 Section */
.detail-section { margin-bottom: 20px; }
.detail-section h5 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); }

/* Step Indicator */
.step-indicator { display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.step { display: flex; flex-direction: column; align-items: center; }
.step-number { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.step.active .step-number { background: var(--primary); color: white; }
.step.completed .step-number { background: var(--success); color: white; }
.step-label { font-size: 11px; margin-top: 4px; color: var(--text-muted); }
.step.active .step-label { color: var(--text-primary); font-weight: 500; }
.step-line { width: 40px; height: 2px; background: var(--border); }
.step-line.active { background: var(--primary); }

.step-content h4 { font-size: 14px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.step-content h4 i { color: var(--primary); }

/* Forms */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-style: italic; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 13px; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.required { color: var(--danger); }

/* Goal Inputs */
.goal-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.goal-item { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.goal-item i { color: var(--primary); font-size: 16px; }
.goal-input { width: 70px; padding: 8px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 14px; text-align: center; }
.goal-item span { font-size: 11px; color: var(--text-secondary); }

/* AI Suggest */
.ai-suggest-section { margin-top: 16px; padding: 14px; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 10px; }
.ai-suggest-section h5 { font-size: 13px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; color: var(--primary); }
.ai-suggestions { display: flex; gap: 10px; }
.ai-suggestion { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; cursor: pointer; transition: all 0.2s; }
.ai-suggestion:hover { border-color: var(--primary); background: rgba(99, 102, 241, 0.2); }
.ai-suggestion i { color: var(--primary); }

/* AI Recommend Tags */
.ai-recommend-section { margin-bottom: 16px; padding: 14px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 10px; }
.ai-recommend-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--primary); }
.ai-recommend-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-tag { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 20px; font-size: 12px; cursor: pointer; transition: all 0.2s; }
.ai-tag:hover { border-color: var(--primary); }
.ai-tag.active { background: var(--primary); border-color: var(--primary); color: white; }
.ai-tag i { font-size: 11px; }

/* Filter Header */
.filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.filter-header h5 { margin: 0; }
.btn-link { background: none; border: none; color: var(--primary); font-size: 12px; cursor: pointer; }

/* Keyword Search */
.keyword-search { display: flex; gap: 8px; }
.keyword-search .form-input { flex: 1; }

/* Selected Tags */
.selected-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.selected-tag { display: flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(99, 102, 241, 0.2); border-radius: 16px; font-size: 12px; color: var(--primary); }
.selected-tag i { cursor: pointer; opacity: 0.7; }
.selected-tag i:hover { opacity: 1; }

/* Customer Source */
.customer-source { margin-top: 16px; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.customer-source h5 { font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.source-bars { display: flex; flex-direction: column; gap: 10px; }
.source-item { display: flex; align-items: center; gap: 10px; }
.source-label { width: 70px; font-size: 12px; color: var(--text-secondary); }
.source-bar { flex: 1; height: 8px; background: var(--bg-dark); border-radius: 4px; overflow: hidden; }
.source-fill { height: 100%; border-radius: 4px; }
.source-value { width: 40px; font-size: 12px; text-align: right; }

/* Segment Check */
.segment-check { color: var(--primary); font-size: 18px; margin-left: auto; }

/* Preview Count Button */
.btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: rgba(99, 102, 241, 0.1); }

/* Segments */
.quick-segments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.segment-option { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.segment-option:hover { border-color: var(--primary); }
.segment-option.selected { border-color: var(--primary); background: rgba(99, 102, 241, 0.1); }
.segment-option i { font-size: 20px; color: var(--primary); }
.segment-name { font-size: 13px; font-weight: 600; }
.segment-count { font-size: 11px; color: var(--text-secondary); }

.advanced-filters { margin-bottom: 20px; }
.advanced-filters h5 { font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.filter-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.preview-count { display: flex; align-items: center; gap: 12px; padding: 16px; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 10px; }
.preview-count i { font-size: 24px; color: var(--primary); }
.count-value { font-size: 14px; }
.count-detail { font-size: 12px; color: var(--text-secondary); }

/* Channels */
.channel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.channel-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.channel-card:hover { border-color: var(--primary); }
.channel-card.selected { border-color: var(--primary); background: rgba(99, 102, 241, 0.1); }
.channel-card.disabled { opacity: 0.5; cursor: not-allowed; }
.channel-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.channel-name { font-size: 14px; font-weight: 600; }
.channel-desc { font-size: 11px; color: var(--text-secondary); }
.channel-check { color: var(--primary); font-size: 18px; }
.channel-settings h5 { font-size: 13px; margin-bottom: 12px; }

/* SOP & Rules */
.sop-section { margin-bottom: 20px; }
.sop-section h5 { font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.sop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sop-card { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.sop-card.selected { border-color: var(--primary); background: rgba(99, 102, 241, 0.1); }
.sop-icon { font-size: 24px; }
.sop-name { font-size: 12px; font-weight: 600; }
.sop-steps { font-size: 10px; color: var(--text-secondary); }

.rules-section h5 { font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.rule-item { display: flex; gap: 12px; padding: 12px; background: var(--bg-hover); border-radius: 8px; margin-bottom: 8px; }
.rule-toggle { width: 44px; height: 24px; background: var(--border); border-radius: 12px; position: relative; cursor: pointer; flex-shrink: 0; }
.rule-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: all 0.2s; }
.rule-toggle.active { background: var(--success); }
.rule-toggle.active::after { left: 23px; }
.rule-title { font-size: 13px; font-weight: 500; }
.rule-desc { font-size: 11px; color: var(--text-secondary); }

/* Preview */
.preview-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.preview-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.preview-icon { width: 40px; height: 40px; background: rgba(99, 102, 241, 0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); }
.preview-label { font-size: 11px; color: var(--text-secondary); }
.preview-value { font-size: 14px; font-weight: 600; }

.estimated-impact { margin-bottom: 20px; }
.estimated-impact h5 { font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.impact-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.impact-metric { background: var(--bg-hover); border-radius: 10px; padding: 14px; text-align: center; }
.impact-metric .metric-value { font-size: 18px; font-weight: 700; }
.impact-metric.highlight { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); }
.impact-metric.highlight .metric-value { color: var(--success); }
.impact-metric .metric-label { font-size: 11px; color: var(--text-secondary); }

.confirm-section { display: flex; flex-direction: column; gap: 10px; }
.confirm-item { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.confirm-item input { width: 16px; height: 16px; }

/* AI Generator */
.ai-generator { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.generator-input h4, .generator-output h4 { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.checkbox-item { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.checkbox-item input { width: 14px; height: 14px; }
.tone-options, .language-options { display: flex; flex-wrap: wrap; gap: 8px; }
.tone-option, .language-option { padding: 6px 12px; background: var(--bg-hover); border-radius: 16px; font-size: 12px; cursor: pointer; }
.tone-option.active, .language-option.active { background: var(--primary); color: white; }
.btn-block { width: 100%; }

.output-placeholder { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.output-placeholder i { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.email-preview { background: var(--bg-hover); border-radius: 10px; padding: 16px; }
.email-field { margin-bottom: 12px; }
.email-field label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.email-value { font-size: 13px; }
.email-value.subject { font-weight: 600; color: var(--primary); }
.email-body { font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.email-stats { display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }
.email-stats .success { color: var(--success); }

/* Templates */
.templates-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.template-card { background: var(--bg-hover); border-radius: 10px; padding: 16px; }
.template-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.template-type { font-size: 11px; padding: 2px 8px; background: rgba(99, 102, 241, 0.2); color: var(--primary); border-radius: 10px; }
.template-lang { font-size: 11px; color: var(--text-muted); }
.template-subject { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.template-preview { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.template-stats { display: flex; gap: 16px; margin-bottom: 12px; font-size: 11px; color: var(--text-muted); }

/* Campaign Detail Modal */
.campaign-detail-modal { max-width: 800px; }
.detail-status { margin-left: 12px; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; }
.detail-status.active { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.detail-status.paused { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.detail-status.completed { background: rgba(99, 102, 241, 0.2); color: var(--primary); }

.detail-section { margin-bottom: 20px; padding: 16px; background: var(--bg-hover); border-radius: 12px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.section-header h4 { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin: 0; }
.section-header h4 i { color: var(--primary); }
.progress-info { font-size: 12px; color: var(--primary); font-weight: 600; }

.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.detail-item { display: flex; flex-direction: column; gap: 4px; }
.detail-item.full-width { grid-column: 1 / -1; }
.detail-item label { font-size: 11px; color: var(--text-muted); }
.detail-item span { font-size: 13px; color: var(--text-primary); }
.priority-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; }
.priority-badge.urgent { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.priority-badge.high { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.priority-badge.medium { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.priority-badge.low { background: rgba(107, 114, 128, 0.2); color: var(--text-muted); }

.detail-progress-bar { height: 6px; background: var(--bg-dark); border-radius: 3px; margin-bottom: 16px; overflow: hidden; }
.detail-progress-bar .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--success)); border-radius: 3px; }

.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.metric-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--bg-card); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); }
.metric-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.metric-icon.blue { background: rgba(99, 102, 241, 0.16); color: var(--primary); }
.metric-icon.green { background: rgba(16, 185, 129, 0.16); color: var(--success); }
.metric-icon.purple { background: rgba(139, 92, 246, 0.16); color: var(--secondary); }
.metric-content .metric-value { font-size: 20px; font-weight: 700; }
.metric-content .metric-label { font-size: 12px; color: var(--text-muted); }
@media (max-width: 900px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .metrics-grid { grid-template-columns: 1fr; }
}

.channel-detail-list { display: flex; flex-direction: column; gap: 10px; }
.channel-detail-item { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--bg-card); border-radius: 10px; }
.channel-icon-wrapper { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.channel-detail-info { flex: 1; }
.channel-detail-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.channel-detail-stats { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); }
.channel-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot.active { background: var(--success); }

.target-info { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; }
.target-stat { flex: 1; min-width: 180px; text-align: center; padding: 18px; background: var(--bg-card); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }
.target-value { font-size: 26px; font-weight: 700; color: var(--text-primary); }
.target-label { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.target-breakdown { display: none; }
.breakdown-item { display: none; }
.breakdown-label { display: none; }
.breakdown-value { display: none; }

.sop-detail { }
.sop-header-info { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sop-header-info .sop-name { font-size: 14px; font-weight: 600; }
.sop-header-info .sop-steps { font-size: 11px; padding: 3px 10px; background: rgba(99, 102, 241, 0.2); color: var(--primary); border-radius: 10px; }
.sop-timeline-detail { display: flex; flex-direction: column; gap: 8px; }
.sop-step-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-card); border-radius: 8px; border-left: 3px solid var(--border); }
.sop-step-item.completed { border-left-color: var(--success); opacity: 0.8; }
.sop-step-item.current { border-left-color: var(--primary); background: rgba(99, 102, 241, 0.1); }
.sop-step-item.pending { border-left-color: var(--border); opacity: 0.6; }
.sop-step-item .step-marker { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.sop-step-item.completed .step-marker { background: var(--success); color: white; }
.sop-step-item.current .step-marker { background: var(--primary); color: white; }
.sop-step-item .step-content { flex: 1; }
.sop-step-item .step-title { font-size: 13px; font-weight: 500; }
.sop-step-item .step-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.interactions-list { display: flex; flex-direction: column; gap: 10px; }
.interaction-item { display: flex; gap: 12px; padding: 12px; background: var(--bg-card); border-radius: 10px; }
.interaction-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: 600; }
.interaction-content { flex: 1; }
.interaction-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.interaction-name { font-size: 13px; font-weight: 600; }
.interaction-time { font-size: 11px; color: var(--text-muted); }
.interaction-text { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.interaction-tags { display: flex; gap: 6px; }
.interaction-tags .tag { padding: 2px 8px; border-radius: 10px; font-size: 10px; }
.tag.reply { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.tag.open { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.tag.click { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.tag.interested { background: rgba(236, 72, 153, 0.2); color: #ec4899; }

/* 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); }

/* Channel Priority AI */
.channel-priority-ai { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(99, 102, 241, 0.1)); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 10px; margin-bottom: 16px; }
.ai-badge { padding: 4px 10px; background: var(--primary); color: white; border-radius: 12px; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.priority-text { font-size: 13px; }
.priority-text .highlight { color: var(--success); font-weight: 600; }
.channel-stats-mini { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.channel-stats-mini i { margin-right: 4px; }

/* Subject Input Group */
.subject-input-group { display: flex; gap: 8px; }
.subject-input-group .form-input { flex: 1; }
.subject-suggestions { margin-top: 8px; padding: 12px; background: var(--bg-hover); border-radius: 8px; }
.suggestion-header { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.suggestion-item { padding: 8px 12px; background: var(--bg-card); border-radius: 6px; margin-bottom: 6px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
.suggestion-item:hover { background: rgba(99, 102, 241, 0.1); border: 1px solid var(--primary); }

/* Tracking Options */
.tracking-options { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.toggle-option { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; }
.toggle-option input { width: 14px; height: 14px; }
.toggle-label { color: var(--text-secondary); }

/* Channel Effect Prediction */
.channel-effect-prediction { margin-top: 16px; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.channel-effect-prediction h5 { font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.effect-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.effect-item { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg-card); border-radius: 8px; }
.effect-item.highlight { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); }
.effect-icon { width: 36px; height: 36px; background: rgba(99, 102, 241, 0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--primary); }
.effect-label { font-size: 11px; color: var(--text-secondary); }
.effect-value { font-size: 16px; font-weight: 700; }

/* SOP Preview */
.sop-preview { margin-top: 12px; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.sop-preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 12px; }
.sop-timeline { display: flex; flex-direction: column; gap: 8px; }
.sop-step { display: flex; gap: 12px; }
.sop-step-marker { width: 24px; height: 24px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.sop-step-content { flex: 1; padding: 8px 12px; background: var(--bg-card); border-radius: 6px; }
.sop-step-title { font-size: 12px; font-weight: 500; }
.sop-step-meta { display: flex; gap: 12px; margin-top: 4px; font-size: 10px; color: var(--text-muted); }
.sop-card { position: relative; }
.sop-check { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--primary); }
.sop-desc { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Rule Config */
.rule-config { margin-left: auto; }
.mini-select { padding: 4px 8px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 11px; }

/* A/B Test Section */
.ab-test-section { margin-bottom: 20px; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.ab-test-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ab-test-header h5 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ab-test-config { padding-top: 12px; border-top: 1px solid var(--border); }
.ab-test-preview { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ab-variant { padding: 12px; background: var(--bg-card); border-radius: 8px; }
.variant-label { font-size: 11px; color: var(--primary); font-weight: 600; margin-bottom: 6px; display: block; }
.variant-desc { font-size: 12px; }
.variant-input { width: 100%; padding: 8px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 12px; }

/* Smart Schedule */
.smart-schedule-section { margin-bottom: 20px; }
.smart-schedule-section h5 { font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.schedule-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.schedule-option { position: relative; cursor: pointer; }
.schedule-option input { position: absolute; opacity: 0; }
.schedule-option .option-content { padding: 14px; background: var(--bg-hover); border: 2px solid var(--border); border-radius: 10px; text-align: center; transition: all 0.2s; }
.schedule-option.active .option-content { border-color: var(--primary); background: rgba(99, 102, 241, 0.1); }
.option-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.option-title i { margin-right: 6px; color: var(--primary); }
.option-desc { font-size: 11px; color: var(--text-muted); }
.schedule-time-config { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* Preview Section */
.preview-section { margin-bottom: 20px; }
.preview-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.preview-section-header h5 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.preview-channels { display: flex; flex-direction: column; gap: 10px; }
.preview-channel-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.channel-badge { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.channel-details { flex: 1; }
.channel-details .channel-name { font-size: 14px; font-weight: 600; }
.channel-config { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Preview Rules */
.preview-rules { padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.rule-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.rule-badge { padding: 4px 12px; background: var(--bg-card); border-radius: 16px; font-size: 11px; color: var(--text-secondary); }
.rule-badge.highlight { background: rgba(99, 102, 241, 0.2); color: var(--primary); }

/* Priority Colors */
.preview-value.priority-urgent { color: var(--danger); }
.preview-value.priority-high { color: var(--warning); }
.preview-value.priority-medium { color: var(--info); }
.preview-value.priority-low { color: var(--text-muted); }
.preview-value.highlight { color: var(--primary); font-weight: 700; }

/* Impact Metric Enhanced */
.impact-metric { position: relative; }
.impact-metric .metric-icon { font-size: 18px; margin-bottom: 6px; opacity: 0.5; }
.impact-metric .metric-rate { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

/* Warning Section */
.warning-section { margin-bottom: 16px; padding: 14px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: 10px; }
.warning-section h5 { font-size: 13px; margin-bottom: 10px; color: var(--warning); display: flex; align-items: center; gap: 6px; }
.warning-list { display: flex; flex-direction: column; gap: 8px; }
.warning-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.warning-item i { color: var(--warning); }

/* Confirm Section Enhanced */
.confirm-section { padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.confirm-section h5 { font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.confirm-item { position: relative; padding-left: 28px; }
.confirm-item .checkmark { position: absolute; left: 0; width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 4px; }
.confirm-item input:checked + .checkmark { background: var(--success); border-color: var(--success); }
.confirm-item input:checked + .checkmark::after { content: '✓'; position: absolute; color: white; font-size: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media (max-width: 1200px) {
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .campaigns-grid { grid-template-columns: 1fr; }
  .quick-segments { grid-template-columns: repeat(2, 1fr); }
  .schedule-options { grid-template-columns: 1fr; }
  .impact-metrics { grid-template-columns: repeat(3, 1fr); }
  .goal-inputs { grid-template-columns: repeat(2, 1fr); }
}

/* History Modal */
.history-modal { max-width: 900px; }
.history-filters { display: flex; gap: 12px; margin-bottom: 16px; }
.history-filters .search-box { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg-hover); border-radius: 8px; }
.history-filters .search-box input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 13px; outline: none; }
.filter-group { display: flex; gap: 8px; }
.filter-select { padding: 8px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 12px; }

.history-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
.history-stat { padding: 14px; background: var(--bg-hover); border-radius: 10px; text-align: center; }
.history-stat .stat-value { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.history-stat .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.history-stat.highlight { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); }
.history-stat.highlight .stat-value { color: var(--success); }

.history-list { display: flex; flex-direction: column; gap: 12px; max-height: 400px; overflow-y: auto; }
.history-item { background: var(--bg-hover); border-radius: 12px; padding: 16px; }
.history-item-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.history-item-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.history-item-info { flex: 1; }
.history-item-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.history-item-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }
.history-item-meta .status-tag { padding: 2px 8px; border-radius: 10px; }
.history-item-meta .status-tag.completed { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.history-item-meta .status-tag.paused { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.history-item-actions { display: flex; gap: 6px; }
.btn-icon { width: 32px; height: 32px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.btn-icon:hover { background: var(--primary); border-color: var(--primary); color: white; }

.history-item-stats { display: flex; gap: 16px; padding: 12px; background: var(--bg-card); border-radius: 8px; }
.mini-stat { display: flex; align-items: center; gap: 6px; }
.mini-stat i { color: var(--primary); font-size: 12px; }
.mini-stat .value { font-weight: 600; font-size: 13px; }
.mini-stat .label { font-size: 10px; color: var(--text-muted); }
.mini-stat.highlight i { color: var(--success); }
.mini-stat.highlight .value { color: var(--success); }

.history-item-channels { display: flex; gap: 6px; margin-top: 10px; }
.channel-mini-tag { display: flex; align-items: center; gap: 4px; padding: 3px 10px; background: var(--bg-card); border-radius: 12px; font-size: 11px; color: var(--text-secondary); }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.empty-state i { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.empty-state p { font-size: 14px; }

/* Templates Modal */
.templates-modal { max-width: 900px; }
.template-tabs { display: flex; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.template-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; }
.template-tab:hover { background: rgba(99, 102, 241, 0.1); }
.template-tab.active { background: var(--primary); color: white; }
.template-tab i { font-size: 12px; }

.templates-toolbar { display: flex; gap: 12px; margin-bottom: 12px; }
.templates-toolbar .search-box { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg-hover); border-radius: 8px; }
.templates-toolbar .search-box input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 13px; outline: none; }
.sort-select { padding: 8px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 12px; }

.templates-stats { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.templates-stats .divider { margin: 0 8px; }

.templates-grid-enhanced { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
.template-card-enhanced { background: var(--bg-hover); border-radius: 12px; padding: 16px; transition: all 0.2s; }
.template-card-enhanced:hover { background: rgba(99, 102, 241, 0.05); }
.template-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.template-type-badge { display: flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; }
.template-type-badge.email { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.template-type-badge.whatsapp { background: rgba(37, 211, 102, 0.2); color: #25D366; }
.template-type-badge.linkedin { background: rgba(10, 102, 194, 0.2); color: #0A66C2; }
.template-lang-badge { font-size: 10px; color: var(--text-muted); }
.btn-favorite { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; transition: color 0.2s; }
.btn-favorite:hover { color: var(--warning); }
.btn-favorite.active { color: var(--warning); }

.template-subject-enhanced { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.template-preview-enhanced { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.template-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.template-tag { padding: 2px 8px; background: var(--bg-card); border-radius: 10px; font-size: 10px; color: var(--text-secondary); }

.template-stats-enhanced { display: flex; gap: 12px; margin-bottom: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.template-stat { display: flex; flex-direction: column; align-items: center; }
.template-stat i { font-size: 12px; color: var(--primary); margin-bottom: 4px; }
.template-stat .stat-value { font-size: 14px; font-weight: 600; }
.template-stat .stat-label { font-size: 10px; color: var(--text-muted); }

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

/* AI Template Section */
.ai-template-section { padding: 14px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 12px; }
.ai-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.ai-section-header i { color: var(--primary); }
.ai-badge-mini { margin-left: auto; font-size: 10px; font-weight: 400; color: var(--text-muted); }

.ai-template-list { display: flex; flex-direction: column; gap: 10px; }
.ai-template-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-card); border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.ai-template-item:hover { background: rgba(99, 102, 241, 0.1); }
.ai-template-icon { width: 36px; height: 36px; background: rgba(99, 102, 241, 0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--primary); }
.ai-template-info { flex: 1; }
.ai-template-subject { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.ai-template-meta { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted); }
.ai-template-meta .highlight { color: var(--success); font-weight: 500; }
.ai-template-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }

/* Template Preview Modal */
.template-preview-modal { max-width: 600px; }
.preview-template-content { padding: 10px 0; }
.preview-row { display: flex; margin-bottom: 16px; }
.preview-row label { width: 80px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
.preview-row span { font-size: 13px; }
.preview-subject { font-size: 15px; font-weight: 600; color: var(--primary); }
.preview-body { font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.preview-row.tags-row { align-items: flex-start; }
.preview-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.preview-tag { padding: 3px 10px; background: var(--bg-hover); border-radius: 12px; font-size: 11px; }

/* Info Grid */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.info-grid .info-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--bg-dark); border-radius: 8px; }
.info-grid .info-item .label { font-size: 11px; color: var(--text-muted); }
.info-grid .info-item .value { font-size: 14px; font-weight: 600; }

/* Reply Customer Detail */
.reply-content-box { display: none; }
.sentiment-analysis { display: none; }
.sentiment-item { display: none; }
.review-badge { display: none; }
.review-info-box { display: none; }
.review-item { display: none; }
.history-timeline { display: none; }
.history-item { display: none; }
.history-marker { display: none; }
.history-content { display: none; }
.ai-recommendation { display: none; }
.ai-header { display: none; }
.ai-title { display: none; }
.ai-confidence { display: none; }
.ai-content { display: none; }
.suggested-actions { display: none; }
.action-card { display: none; }
.action-header { display: none; }
.action-name { display: none; }
.action-desc { display: none; }
.next-steps { display: none; }
.step-item { display: none; }
.step-number { display: none; }
.step-text { display: none; }


@media (max-width: 1400px) {
  .campaigns-grid { grid-template-columns: 1fr; }
  .templates-grid-enhanced { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .modal { max-width: 95vw; }
  .customer-details { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .review-stats { grid-template-columns: 1fr; }
  .customer-actions { flex-direction: column; }
  .customer-actions .btn { width: 100%; }
}
</style>
