<template>
  <div class="prospect-page">
    <div class="page-header">
      <div class="header-left">
        <div class="page-title">🎯 自动寻客</div>
        <p class="page-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="showCreateModal = true">
          <i class="fas fa-plus"></i> 创建寻客任务
        </button>
      </div>
    </div>

    <!-- Stats -->
    <div class="stats-row">
      <div class="stat-card-lg" @click="switchTab('all')">
        <div class="stat-icon-lg blue"><i class="fas fa-search"></i></div>
        <div class="stat-content-lg">
          <h3>{{ formatNumber(stats.totalFound) }}</h3>
          <p>已发现潜客</p>
        </div>
      </div>
      <div class="stat-card-lg" @click="switchTab('contacted')">
        <div class="stat-icon-lg green"><i class="fas fa-user-check"></i></div>
        <div class="stat-content-lg">
          <h3>{{ stats.contacted }}</h3>
          <p>已联系客户</p>
        </div>
      </div>
      <div class="stat-card-lg" @click="switchTab('intent')">
        <div class="stat-icon-lg purple"><i class="fas fa-handshake"></i></div>
        <div class="stat-content-lg">
          <h3>{{ stats.intent }}</h3>
          <p>意向客户</p>
        </div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg orange"><i class="fas fa-tasks"></i></div>
        <div class="stat-content-lg">
          <h3>{{ activeTasks.length }}</h3>
          <p>进行中任务</p>
        </div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
          <i class="fas fa-percentage"></i>
        </div>
        <div class="stat-content-lg">
          <h3>{{ stats.conversionRate }}%</h3>
          <p>平均转化率</p>
        </div>
      </div>
    </div>

    <!-- Tabs -->
    <div class="tabs-container">
      <div class="tabs">
        <div v-for="tab in tabs" :key="tab.key" 
             class="tab-item"
             :class="{ active: activeTab === tab.key }"
             @click="activeTab = tab.key">
          <i :class="tab.icon"></i>
          {{ tab.label }}
          <span class="tab-count">{{ tab.count }}</span>
        </div>
      </div>
    </div>

    <!-- Active Tasks Section -->
    <div v-if="activeTab === 'running'" class="section">
      <div class="section-header">
        <h3><i class="fas fa-sync fa-spin"></i> 进行中的任务</h3>
        <span class="task-count">{{ activeTasks.length }} 个任务运行中</span>
      </div>
      <div class="task-grid">
        <div v-for="task in activeTasks" :key="task.id" 
             class="task-card"
             @click="showTaskDetail(task)">
          <div class="task-header">
            <div class="task-icon" :style="{ background: task.iconBg }">
              {{ task.icon }}
            </div>
            <div class="task-info">
              <div class="task-name">{{ task.name }}</div>
              <div class="task-meta">{{ task.region }} · {{ task.product }}</div>
            </div>
            <div class="task-status running">
              <i class="fas fa-circle"></i> 运行中
            </div>
          </div>
          
          <div class="task-stats">
            <div class="task-stat">
              <span class="stat-value">{{ task.found }}</span>
              <span class="stat-label">已发现</span>
            </div>
            <div class="task-stat">
              <span class="stat-value highlight">{{ task.matched }}</span>
              <span class="stat-label">高匹配</span>
            </div>
            <div class="task-stat">
              <span class="stat-value success">{{ task.contacted }}</span>
              <span class="stat-label">已联系</span>
            </div>
          </div>

          <div class="task-progress">
            <div class="progress-header">
              <span>任务进度</span>
              <span class="progress-percent">{{ task.progress }}%</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: task.progress + '%' }"></div>
            </div>
            <div class="progress-detail">
              <span>预计完成: {{ task.estimatedComplete }}</span>
              <span>创建于 {{ task.createdAt }}</span>
            </div>
          </div>

          <div class="task-sources">
            <span v-for="source in task.sources" :key="source" class="source-tag">
              {{ source }}
            </span>
          </div>

          <div class="task-actions" @click.stop>
            <button class="btn btn-secondary btn-sm" @click="pauseTask(task)">
              <i class="fas fa-pause"></i> 暂停
            </button>
            <button class="btn btn-primary btn-sm" @click="showTaskDetail(task)">
              <i class="fas fa-eye"></i> 详情
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Recent Prospects Section -->
    <div v-if="activeTab === 'prospects'" class="section">
      <div class="section-header">
        <h3><i class="fas fa-users"></i> 最新发现的潜客</h3>
        <div class="section-filters">
          <select class="filter-select" v-model="prospectFilter">
            <option value="all">全部潜客</option>
            <option value="high">高匹配 (85+)</option>
            <option value="medium">中匹配 (70-85)</option>
          </select>
          <select class="filter-select" v-model="prospectSort">
            <option value="score">按匹配度</option>
            <option value="time">按发现时间</option>
          </select>
        </div>
      </div>
      
      <div class="prospect-list">
        <div v-for="item in filteredProspects" :key="item.id" class="prospect-card">
          <div class="prospect-avatar">
            <span class="country-flag">{{ item.flag }}</span>
          </div>
          <div class="prospect-info">
            <div class="prospect-header">
              <div class="prospect-name">{{ item.name }}</div>
              <span class="prospect-score" :class="getScoreClass(item.score)">
                {{ item.score }}分
              </span>
            </div>
            <div class="prospect-meta">
              <span><i class="fas fa-map-marker-alt"></i> {{ item.location }}</span>
              <span><i class="fas fa-industry"></i> {{ item.industry }}</span>
              <span><i class="fas fa-dollar-sign"></i> {{ item.annualPurchase }}</span>
            </div>
            <div class="prospect-tags">
              <span v-for="tag in item.tags" :key="tag" class="tag">{{ tag }}</span>
            </div>
            <div class="prospect-source">
              <i class="fas fa-link"></i> 来源: {{ item.source }} · 发现于 {{ item.foundAt }}
            </div>
          </div>
          <div class="prospect-actions">
            <button class="btn btn-primary btn-sm" @click="contactProspect(item)">
              <i class="fas fa-paper-plane"></i> 联系
            </button>
            <button class="btn btn-secondary btn-sm" @click="showProspectDetail(item)">
              <i class="fas fa-eye"></i>
            </button>
            <button class="btn btn-secondary btn-sm" @click="addToPool(item)">
              <i class="fas fa-plus"></i>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Data Sources Section -->
    <div v-if="activeTab === 'sources'" class="section">
      <div class="section-header">
        <h3><i class="fas fa-database"></i> 数据源管理</h3>
      </div>
      <div class="source-grid-large">
        <div v-for="source in dataSourcesDetail" :key="source.id" 
             class="source-card-large"
             :class="{ connected: source.connected }">
          <div class="source-header">
            <div class="source-icon-large">{{ source.icon }}</div>
            <div class="source-status" :class="{ active: source.connected }">
              {{ source.connected ? '已连接' : '未连接' }}
            </div>
          </div>
          <div class="source-name">{{ source.name }}</div>
          <div class="source-desc">{{ source.description }}</div>
          <div class="source-stats" v-if="source.connected">
            <div class="source-stat">
              <span class="value">{{ source.records }}</span>
              <span class="label">数据量</span>
            </div>
            <div class="source-stat">
              <span class="value">{{ source.updateFreq }}</span>
              <span class="label">更新频率</span>
            </div>
          </div>
          <button v-if="!source.connected" class="btn btn-primary btn-sm" style="width: 100%; margin-top: 12px;">
            <i class="fas fa-plug"></i> 连接
          </button>
        </div>
      </div>
    </div>

    <!-- Task Detail Modal -->
    <div v-if="showDetailModal && selectedTask" class="modal-overlay" @click.self="showDetailModal = false">
      <div class="modal task-detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <div class="title-icon" :style="{ background: selectedTask.iconBg }">
              {{ selectedTask.icon }}
            </div>
            <div>
              <h3>{{ selectedTask.name }}</h3>
              <p>{{ selectedTask.region }} · {{ selectedTask.product }}</p>
            </div>
          </div>
          <button class="modal-close" @click="showDetailModal = false">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <!-- Task Overview -->
          <div class="detail-section">
            <h4><i class="fas fa-info-circle"></i> 任务概览</h4>
            <div class="overview-grid">
              <div class="overview-item">
                <div class="overview-label">任务状态</div>
                <div class="overview-value status-running">
                  <i class="fas fa-circle"></i> 运行中
                </div>
              </div>
              <div class="overview-item">
                <div class="overview-label">创建时间</div>
                <div class="overview-value">{{ selectedTask.createdAt }}</div>
              </div>
              <div class="overview-item">
                <div class="overview-label">预计完成</div>
                <div class="overview-value">{{ selectedTask.estimatedComplete }}</div>
              </div>
              <div class="overview-item">
                <div class="overview-label">运行时长</div>
                <div class="overview-value">{{ selectedTask.runningTime }}</div>
              </div>
            </div>
          </div>

          <!-- Progress Stats -->
          <div class="detail-section">
            <h4><i class="fas fa-chart-bar"></i> 运行数据</h4>
            <div class="progress-stats">
              <div class="progress-stat-card">
                <div class="stat-number">{{ selectedTask.found }}</div>
                <div class="stat-text">已发现企业</div>
              </div>
              <div class="progress-stat-card highlight">
                <div class="stat-number">{{ selectedTask.matched }}</div>
                <div class="stat-text">高匹配潜客</div>
              </div>
              <div class="progress-stat-card success">
                <div class="stat-number">{{ selectedTask.contacted }}</div>
                <div class="stat-text">已发起联系</div>
              </div>
              <div class="progress-stat-card purple">
                <div class="stat-number">{{ selectedTask.replies }}</div>
                <div class="stat-text">获得回复</div>
              </div>
            </div>
            
            <div class="main-progress">
              <div class="progress-header">
                <span>总体进度</span>
                <span class="progress-percent">{{ selectedTask.progress }}%</span>
              </div>
              <div class="progress-bar-large">
                <div class="progress-fill" :style="{ width: selectedTask.progress + '%' }"></div>
              </div>
            </div>
          </div>

          <!-- Search Criteria -->
          <div class="detail-section">
            <h4><i class="fas fa-filter"></i> 筛选条件</h4>
            <div class="criteria-list">
              <div class="criteria-item">
                <span class="criteria-label">目标地区</span>
                <span class="criteria-value">{{ selectedTask.criteria.region }}</span>
              </div>
              <div class="criteria-item">
                <span class="criteria-label">产品类别</span>
                <span class="criteria-value">{{ selectedTask.criteria.product }}</span>
              </div>
              <div class="criteria-item">
                <span class="criteria-label">公司规模</span>
                <span class="criteria-value">{{ selectedTask.criteria.companySize }}</span>
              </div>
              <div class="criteria-item">
                <span class="criteria-label">年采购额</span>
                <span class="criteria-value">{{ selectedTask.criteria.purchaseAmount }}</span>
              </div>
              <div class="criteria-item full-width">
                <span class="criteria-label">关键词</span>
                <div class="criteria-tags">
                  <span v-for="keyword in selectedTask.criteria.keywords" :key="keyword" class="tag">
                    {{ keyword }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- AI Features -->
          <div class="detail-section">
            <h4><i class="fas fa-robot"></i> AI 智能功能</h4>
            <div class="ai-features">
              <div class="ai-feature" :class="{ active: selectedTask.aiFeatures.lookalike }">
                <i class="fas fa-users"></i>
                <div class="feature-info">
                  <div class="feature-name">Lookalike 相似推荐</div>
                  <div class="feature-desc">基于成交客户画像智能推荐</div>
                </div>
                <i v-if="selectedTask.aiFeatures.lookalike" class="fas fa-check-circle check"></i>
              </div>
              <div class="ai-feature" :class="{ active: selectedTask.aiFeatures.decisionMaker }">
                <i class="fas fa-user-tie"></i>
                <div class="feature-info">
                  <div class="feature-name">关键人挖掘</div>
                  <div class="feature-desc">自动识别采购决策人</div>
                </div>
                <i v-if="selectedTask.aiFeatures.decisionMaker" class="fas fa-check-circle check"></i>
              </div>
              <div class="ai-feature" :class="{ active: selectedTask.aiFeatures.websiteAnalysis }">
                <i class="fas fa-globe"></i>
                <div class="feature-info">
                  <div class="feature-name">官网智能分析</div>
                  <div class="feature-desc">分析业务匹配度</div>
                </div>
                <i v-if="selectedTask.aiFeatures.websiteAnalysis" class="fas fa-check-circle check"></i>
              </div>
            </div>
          </div>

          <!-- Recent Findings -->
          <div class="detail-section">
            <h4><i class="fas fa-star"></i> 最新发现</h4>
            <div class="recent-findings">
              <div v-for="finding in selectedTask.recentFindings" :key="finding.id" 
                   class="finding-item">
                <span class="finding-flag">{{ finding.flag }}</span>
                <div class="finding-info">
                  <div class="finding-name">{{ finding.name }}</div>
                  <div class="finding-detail">{{ finding.location }} · {{ finding.industry }}</div>
                </div>
                <span class="finding-score" :class="getScoreClass(finding.score)">
                  {{ finding.score }}分
                </span>
              </div>
            </div>
          </div>

          <!-- Activity Log -->
          <div class="detail-section">
            <h4><i class="fas fa-history"></i> 运行日志</h4>
            <div class="activity-log">
              <div v-for="(log, index) in selectedTask.activityLog" :key="index" 
                   class="log-item">
                <div class="log-dot" :class="log.type"></div>
                <div class="log-content">
                  <div class="log-message">{{ log.message }}</div>
                  <div class="log-time">{{ log.time }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-secondary" @click="pauseTask(selectedTask)">
            <i class="fas fa-pause"></i> 暂停任务
          </button>
          <button class="btn btn-secondary" @click="exportTaskResult(selectedTask)">
            <i class="fas fa-download"></i> 导出结果
          </button>
          <button class="btn btn-primary" @click="showDetailModal = false">
            <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-sm">
              <i class="fas fa-search"></i>
              <input type="text" v-model="historySearch" placeholder="搜索任务名称...">
            </div>
            <div class="filter-group-sm">
              <select class="filter-select-sm" v-model="historyFilterStatus">
                <option value="">全部状态</option>
                <option value="completed">已完成</option>
                <option value="paused">已暂停</option>
                <option value="cancelled">已取消</option>
              </select>
              <select class="filter-select-sm" v-model="historyFilterRegion">
                <option value="">全部地区</option>
                <option value="中东">中东</option>
                <option value="欧洲">欧洲</option>
                <option value="北美">北美</option>
                <option value="东南亚">东南亚</option>
              </select>
              <select class="filter-select-sm" v-model="historyFilterDate">
                <option value="">全部时间</option>
                <option value="week">最近一周</option>
                <option value="month">最近一月</option>
                <option value="quarter">最近三月</option>
              </select>
            </div>
          </div>

          <!-- 统计概览 -->
          <div class="history-overview">
            <div class="overview-stat">
              <div class="overview-icon blue"><i class="fas fa-tasks"></i></div>
              <div class="overview-content">
                <div class="overview-value">{{ historyTasks.length }}</div>
                <div class="overview-label">历史任务</div>
              </div>
            </div>
            <div class="overview-stat">
              <div class="overview-icon green"><i class="fas fa-users"></i></div>
              <div class="overview-content">
                <div class="overview-value">{{ totalHistoryFound }}</div>
                <div class="overview-label">总发现潜客</div>
              </div>
            </div>
            <div class="overview-stat">
              <div class="overview-icon purple"><i class="fas fa-star"></i></div>
              <div class="overview-content">
                <div class="overview-value">{{ totalHistoryMatched }}</div>
                <div class="overview-label">高匹配客户</div>
              </div>
            </div>
            <div class="overview-stat highlight">
              <div class="overview-icon gold"><i class="fas fa-handshake"></i></div>
              <div class="overview-content">
                <div class="overview-value">{{ totalHistoryConverted }}</div>
                <div class="overview-label">转化客户</div>
              </div>
            </div>
          </div>

          <!-- 视图切换 -->
          <div class="history-view-tabs">
            <span class="view-tab" :class="{ active: historyViewMode === 'card' }" @click="historyViewMode = 'card'">
              <i class="fas fa-th-large"></i> 卡片
            </span>
            <span class="view-tab" :class="{ active: historyViewMode === 'list' }" @click="historyViewMode = 'list'">
              <i class="fas fa-list"></i> 列表
            </span>
            <span class="view-tab" :class="{ active: historyViewMode === 'stats' }" @click="historyViewMode = 'stats'">
              <i class="fas fa-chart-bar"></i> 统计
            </span>
          </div>

          <!-- 卡片视图 -->
          <div v-if="historyViewMode === 'card'" class="history-cards-grid">
            <div v-for="task in filteredHistoryTasks" :key="task.id" 
                 class="history-card-enhanced"
                 :class="task.status"
                 @click="showHistoryTaskDetail(task)">
              <div class="card-header-row">
                <div class="task-icon-sm" :style="{ background: task.iconBg }">{{ task.icon }}</div>
                <div class="task-info-sm">
                  <div class="task-name-sm">{{ task.name }}</div>
                  <div class="task-meta-sm">{{ task.region }} · {{ task.product }}</div>
                </div>
                <span class="status-badge-sm" :class="task.status">{{ getStatusLabel(task.status) }}</span>
              </div>
              
              <div class="card-metrics">
                <div class="metric-item">
                  <i class="fas fa-search"></i>
                  <span class="metric-val">{{ task.found }}</span>
                  <span class="metric-lbl">发现</span>
                </div>
                <div class="metric-item highlight">
                  <i class="fas fa-star"></i>
                  <span class="metric-val">{{ task.matched }}</span>
                  <span class="metric-lbl">高匹配</span>
                </div>
                <div class="metric-item success">
                  <i class="fas fa-handshake"></i>
                  <span class="metric-val">{{ task.converted }}</span>
                  <span class="metric-lbl">转化</span>
                </div>
                <div class="metric-item">
                  <i class="fas fa-percentage"></i>
                  <span class="metric-val">{{ task.conversionRate || Math.round(task.converted / task.found * 100) }}%</span>
                  <span class="metric-lbl">转化率</span>
                </div>
              </div>

              <div class="card-sources">
                <span v-for="source in task.sources" :key="source" class="source-mini-tag">{{ source }}</span>
              </div>

              <div class="card-time-info">
                <span><i class="fas fa-calendar-plus"></i> {{ task.createdAt }}</span>
                <span><i class="fas fa-calendar-check"></i> {{ task.completedAt }}</span>
              </div>

              <div class="card-actions-row" @click.stop>
                <button class="btn-icon-sm" @click="duplicateHistoryTask(task)" title="复制任务">
                  <i class="fas fa-copy"></i>
                </button>
                <button class="btn-icon-sm" @click="viewHistoryDetail(task)" title="查看详情">
                  <i class="fas fa-eye"></i>
                </button>
                <button class="btn-icon-sm" @click="exportHistoryTask(task)" title="导出数据">
                  <i class="fas fa-download"></i>
                </button>
              </div>
            </div>
          </div>

          <!-- 列表视图 -->
          <div v-if="historyViewMode === 'list'" class="history-table-view">
            <div class="history-table-header">
              <span class="col-name">任务名称</span>
              <span class="col-region">地区</span>
              <span class="col-found">发现</span>
              <span class="col-matched">高匹配</span>
              <span class="col-converted">转化</span>
              <span class="col-rate">转化率</span>
              <span class="col-status">状态</span>
              <span class="col-actions">操作</span>
            </div>
            <div v-for="task in filteredHistoryTasks" :key="task.id" class="history-table-row">
              <span class="col-name">
                <span class="task-icon-mini" :style="{ background: task.iconBg }">{{ task.icon }}</span>
                {{ task.name }}
              </span>
              <span class="col-region">{{ task.region }}</span>
              <span class="col-found">{{ task.found }}</span>
              <span class="col-matched highlight">{{ task.matched }}</span>
              <span class="col-converted success">{{ task.converted }}</span>
              <span class="col-rate">{{ task.conversionRate || Math.round(task.converted / task.found * 100) }}%</span>
              <span class="col-status">
                <span class="status-badge-sm" :class="task.status">{{ getStatusLabel(task.status) }}</span>
              </span>
              <span class="col-actions">
                <button class="btn-icon-sm" @click="duplicateHistoryTask(task)" title="复制">
                  <i class="fas fa-copy"></i>
                </button>
                <button class="btn-icon-sm" @click="viewHistoryDetail(task)" title="详情">
                  <i class="fas fa-eye"></i>
                </button>
              </span>
            </div>
          </div>

          <!-- 统计视图 -->
          <div v-if="historyViewMode === 'stats'" class="history-stats-view">
            <div class="stats-section">
              <h5><i class="fas fa-chart-pie"></i> 地区分布</h5>
              <div class="region-distribution">
                <div v-for="(item, index) in regionDistribution" :key="index" class="distribution-row">
                  <div class="distribution-bar">
                    <div class="bar-fill" :style="{ width: item.percent + '%', background: item.color }"></div>
                  </div>
                  <div class="distribution-info">
                    <span class="region-name">{{ item.name }}</span>
                    <span class="region-value">{{ item.count }} 个任务 ({{ item.percent }}%)</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="stats-section">
              <h5><i class="fas fa-trophy"></i> 效果最佳任务</h5>
              <div class="top-tasks-list">
                <div v-for="(task, index) in topHistoryTasks" :key="task.id" class="top-task-item">
                  <div class="rank-badge" :class="{ gold: index === 0, silver: index === 1, bronze: index === 2 }">{{ index + 1 }}</div>
                  <div class="top-task-info">
                    <div class="top-task-name">{{ task.name }}</div>
                    <div class="top-task-meta">{{ task.region }} · {{ task.product }}</div>
                  </div>
                  <div class="top-task-score">
                    <span class="score-value">{{ task.converted }}</span>
                    <span class="score-label">转化</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="stats-section">
              <h5><i class="fas fa-chart-line"></i> 效率指标</h5>
              <div class="efficiency-metrics">
                <div class="efficiency-item">
                  <div class="eff-icon"><i class="fas fa-clock"></i></div>
                  <div class="eff-info">
                    <div class="eff-value">平均 2.5 天</div>
                    <div class="eff-label">任务平均周期</div>
                  </div>
                </div>
                <div class="efficiency-item">
                  <div class="eff-icon"><i class="fas fa-bullseye"></i></div>
                  <div class="eff-info">
                    <div class="eff-value">{{ avgConversionRate }}%</div>
                    <div class="eff-label">平均转化率</div>
                  </div>
                </div>
                <div class="efficiency-item">
                  <div class="eff-icon"><i class="fas fa-star"></i></div>
                  <div class="eff-info">
                    <div class="eff-value">{{ avgMatchRate }}%</div>
                    <div class="eff-label">平均高匹配率</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="exportAllHistoryTasks">
            <i class="fas fa-download"></i> 导出全部
          </button>
          <button class="btn btn-secondary" @click="showHistoryModal = 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-categories">
            <span class="category-tab" :class="{ active: templateCategory === 'all' }" @click="templateCategory = 'all'">
              全部模板
            </span>
            <span class="category-tab" :class="{ active: templateCategory === 'region' }" @click="templateCategory = 'region'">
              <i class="fas fa-globe"></i> 按地区
            </span>
            <span class="category-tab" :class="{ active: templateCategory === 'industry' }" @click="templateCategory = 'industry'">
              <i class="fas fa-industry"></i> 按行业
            </span>
            <span class="category-tab" :class="{ active: templateCategory === 'product' }" @click="templateCategory = 'product'">
              <i class="fas fa-box"></i> 按产品
            </span>
            <span class="category-tab" :class="{ active: templateCategory === 'my' }" @click="templateCategory = 'my'">
              <i class="fas fa-star"></i> 我的模板
            </span>
          </div>

          <!-- 搜索和排序 -->
          <div class="templates-toolbar">
            <div class="search-box-sm">
              <i class="fas fa-search"></i>
              <input type="text" v-model="templateSearch" placeholder="搜索模板...">
            </div>
            <select class="sort-select-sm" v-model="templateSort">
              <option value="usage">使用最多</option>
              <option value="success">效果最佳</option>
              <option value="newest">最新添加</option>
            </select>
          </div>

          <!-- 模板统计 -->
          <div class="templates-stats-bar">
            <span><i class="fas fa-folder"></i> 共 {{ filteredTemplates.length }} 个模板</span>
            <span class="divider">|</span>
            <span><i class="fas fa-check-circle"></i> 平均成功率: {{ avgTemplateSuccessRate }}%</span>
          </div>

          <!-- 模板列表 -->
          <div class="templates-grid">
            <div v-for="tpl in filteredTemplates" :key="tpl.id" class="template-card">
              <div class="template-header">
                <div class="template-icon" :style="{ background: tpl.iconBg }">
                  <i :class="tpl.icon"></i>
                </div>
                <div class="template-info">
                  <div class="template-name">{{ tpl.name }}</div>
                  <div class="template-category">{{ tpl.categoryLabel }}</div>
                </div>
                <button class="btn-favorite" :class="{ active: tpl.favorite }" @click="toggleTemplateFavorite(tpl)">
                  <i :class="tpl.favorite ? 'fas fa-star' : 'far fa-star'"></i>
                </button>
              </div>
              
              <div class="template-desc">{{ tpl.description }}</div>
              
              <div class="template-config">
                <div class="config-item">
                  <i class="fas fa-globe"></i>
                  <span>{{ tpl.config.region }}</span>
                </div>
                <div class="config-item">
                  <i class="fas fa-industry"></i>
                  <span>{{ tpl.config.industry }}</span>
                </div>
                <div class="config-item">
                  <i class="fas fa-box"></i>
                  <span>{{ tpl.config.product }}</span>
                </div>
              </div>

              <div class="template-tags">
                <span v-for="tag in tpl.tags" :key="tag" class="tag-sm">{{ tag }}</span>
              </div>

              <div class="template-stats">
                <div class="stat-sm">
                  <i class="fas fa-users"></i>
                  <span>{{ tpl.stats.usedCount }} 次使用</span>
                </div>
                <div class="stat-sm highlight">
                  <i class="fas fa-percentage"></i>
                  <span>{{ tpl.stats.successRate }}% 成功率</span>
                </div>
                <div class="stat-sm">
                  <i class="fas fa-clock"></i>
                  <span>约 {{ tpl.stats.avgTime }} 完成</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-templates-section">
            <div class="ai-section-header">
              <i class="fas fa-robot"></i>
              <span>AI 为您推荐</span>
              <span class="ai-badge-sm">基于您的业务数据</span>
            </div>
            <div class="ai-templates-list">
              <div v-for="tpl in aiRecommendedTemplates" :key="tpl.id" class="ai-template-item" @click="useTemplate(tpl)">
                <div class="ai-template-icon"><i :class="tpl.icon"></i></div>
                <div class="ai-template-info">
                  <div class="ai-template-name">{{ tpl.name }}</div>
                  <div class="ai-template-meta">
                    <span>{{ tpl.categoryLabel }}</span>
                    <span>{{ tpl.stats.successRate }}% 成功率</span>
                    <span class="match-score">{{ tpl.matchScore }}% 匹配</span>
                  </div>
                </div>
                <button class="btn btn-primary btn-sm">使用</button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="createCustomTemplate">
            <i class="fas fa-plus"></i> 创建模板
          </button>
          <button class="btn btn-secondary" @click="importTemplate">
            <i class="fas fa-file-import"></i> 导入模板
          </button>
          <button class="btn btn-secondary" @click="showTemplatesModal = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- Create Task Modal -->
    <div v-if="showCreateModal" class="modal-overlay" @click.self="showCreateModal = false">
      <div class="modal create-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-crosshairs"></i> 创建寻客任务</div>
          <button class="modal-close" @click="showCreateModal = false">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-section">
            <div class="form-section-title"><i class="fas fa-info-circle"></i> 基本信息</div>
            <div class="form-group">
              <label class="form-label">任务名称 <span class="required">*</span></label>
              <input type="text" class="form-input" v-model="newTask.name" 
                     placeholder="例如：中东地区SSD进口商寻客">
            </div>
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">目标地区 <span class="required">*</span></label>
                <select class="form-select" v-model="newTask.region">
                  <option value="">选择地区</option>
                  <option value="中东地区">中东地区</option>
                  <option value="欧洲">欧洲</option>
                  <option value="北美">北美</option>
                  <option value="东南亚">东南亚</option>
                  <option value="南美">南美</option>
                  <option value="非洲">非洲</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">产品类别 <span class="required">*</span></label>
                <select class="form-select" v-model="newTask.product">
                  <option value="">选择产品</option>
                  <option value="固态硬盘 SSD">固态硬盘 SSD</option>
                  <option value="机械硬盘 HDD">机械硬盘 HDD</option>
                  <option value="内存条">内存条</option>
                  <option value="闪存产品">闪存产品</option>
                  <option value="企业级存储">企业级存储</option>
                </select>
              </div>
            </div>
          </div>

          <div class="form-section">
            <div class="form-section-title"><i class="fas fa-database"></i> 数据源</div>
            <div class="source-select-grid">
              <div v-for="source in dataSources" :key="source.id" 
                   class="source-select-card"
                   :class="{ selected: newTask.sources.includes(source.id) }"
                   @click="toggleSource(source.id)">
                <div class="source-select-icon">{{ source.icon }}</div>
                <div class="source-select-name">{{ source.name }}</div>
                <div class="source-select-desc">{{ source.desc }}</div>
                <div v-if="newTask.sources.includes(source.id)" class="source-check">
                  <i class="fas fa-check"></i>
                </div>
              </div>
            </div>
          </div>

          <div class="form-section">
            <div class="form-section-title"><i class="fas fa-sliders-h"></i> 筛选条件</div>
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">公司规模</label>
                <select class="form-select" v-model="newTask.companySize">
                  <option value="">不限</option>
                  <option value="1-50人">1-50人</option>
                  <option value="51-200人">51-200人</option>
                  <option value="201-500人">201-500人</option>
                  <option value="500人以上">500人以上</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">年采购额</label>
                <select class="form-select" v-model="newTask.purchaseAmount">
                  <option value="">不限</option>
                  <option value="$100K - $500K">$100K - $500K</option>
                  <option value="$500K - $1M">$500K - $1M</option>
                  <option value="$1M - $5M">$1M - $5M</option>
                  <option value="$5M以上">$5M以上</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">关键词</label>
              <div class="keyword-input-container">
                <div class="keyword-tags">
                  <span v-for="(keyword, index) in newTask.keywords" :key="index" class="keyword-tag">
                    {{ keyword }}
                    <i class="fas fa-times" @click="removeKeyword(index)"></i>
                  </span>
                </div>
                <input type="text" 
                       class="keyword-input"
                       v-model="keywordInput"
                       placeholder="输入关键词回车添加"
                       @keypress.enter="addKeyword">
              </div>
            </div>
          </div>

          <div class="form-section">
            <div class="form-section-title"><i class="fas fa-robot"></i> AI 智能规则</div>
            <div class="ai-rules">
              <div class="ai-rule-item">
                <div class="rule-toggle" 
                     :class="{ active: newTask.lookalikeEnabled }"
                     @click="newTask.lookalikeEnabled = !newTask.lookalikeEnabled">
                  <div class="toggle-slider"></div>
                </div>
                <div class="rule-info">
                  <div class="rule-title">Lookalike 相似客户推荐</div>
                  <div class="rule-desc">基于成交客户特征，自动寻找相似潜客</div>
                </div>
              </div>
              <div class="ai-rule-item">
                <div class="rule-toggle" 
                     :class="{ active: newTask.decisionMakerEnabled }"
                     @click="newTask.decisionMakerEnabled = !newTask.decisionMakerEnabled">
                  <div class="toggle-slider"></div>
                </div>
                <div class="rule-info">
                  <div class="rule-title">关键人挖掘</div>
                  <div class="rule-desc">自动识别采购决策人邮箱和 LinkedIn</div>
                </div>
              </div>
              <div class="ai-rule-item">
                <div class="rule-toggle" 
                     :class="{ active: newTask.websiteAnalysisEnabled }"
                     @click="newTask.websiteAnalysisEnabled = !newTask.websiteAnalysisEnabled">
                  <div class="toggle-slider"></div>
                </div>
                <div class="rule-info">
                  <div class="rule-title">官网智能分析</div>
                  <div class="rule-desc">分析客户官网，判断业务匹配度</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showCreateModal = false">取消</button>
          <button class="btn btn-primary" @click="createTask">
            <i class="fas fa-rocket"></i> 启动任务
          </button>
        </div>
      </div>
    </div>

    <!-- Toast -->
    <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 showCreateModal = ref(false)
const showDetailModal = ref(false)
const showHistoryModal = ref(false)
const showTemplatesModal = ref(false)
const selectedTask = ref(null)
const activeTab = ref('running')
const prospectFilter = ref('all')
const prospectSort = ref('score')
const historyFilter = ref('all')
const historySearch = ref('')
const historyFilterStatus = ref('')
const historyFilterRegion = ref('')
const historyFilterDate = ref('')
const historyViewMode = ref('card')
const templateCategory = ref('all')
const templateSearch = ref('')
const templateSort = ref('usage')
const keywordInput = ref('')
const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

const stats = {
  totalFound: 1247,
  contacted: 356,
  intent: 89,
  conversionRate: 28
}

const tabs = [
  { key: 'running', label: '进行中', count: 3, icon: 'fas fa-sync' },
  { key: 'prospects', label: '潜客列表', count: 156, icon: 'fas fa-users' },
  { key: 'sources', label: '数据源', count: 4, icon: 'fas fa-database' }
]

const activeTasks = ref([
  { 
    id: 1, 
    icon: '🎯', 
    iconBg: 'rgba(99, 102, 241, 0.2)',
    name: '中东SSD寻客', 
    region: '中东', 
    product: '固态硬盘', 
    found: 847, 
    matched: 156, 
    contacted: 23,
    replies: 8,
    progress: 65, 
    createdAt: '2026-03-18 09:30',
    estimatedComplete: '2026-03-20 18:00',
    runningTime: '2天 6小时',
    sources: ['海关数据', 'LinkedIn'],
    criteria: {
      region: '中东地区',
      product: '固态硬盘 SSD',
      companySize: '51-200人',
      purchaseAmount: '$500K - $1M',
      keywords: ['SSD', '进口商', '固态硬盘', '存储']
    },
    aiFeatures: {
      lookalike: true,
      decisionMaker: true,
      websiteAnalysis: true
    },
    recentFindings: [
      { id: 1, flag: '🇸🇦', name: 'Riyadh Tech Distribution', location: '沙特·利雅得', industry: '固态硬盘进口商', score: 92 },
      { id: 2, flag: '🇦🇪', name: 'Dubai Storage Solutions', location: '阿联酋·迪拜', industry: '电子分销商', score: 88 },
      { id: 3, flag: '🇰🇼', name: 'Kuwait Data Systems', location: '科威特', industry: '数据中心集成商', score: 85 }
    ],
    activityLog: [
      { type: 'success', message: '发现高匹配潜客: Riyadh Tech Distribution (92分)', time: '10分钟前' },
      { type: 'info', message: 'LinkedIn 数据同步完成，新增 23 家企业', time: '30分钟前' },
      { type: 'success', message: '自动发送邮件至 Dubai Storage Solutions', time: '1小时前' },
      { type: 'info', message: '海关数据解析完成，发现 156 条进口记录', time: '2小时前' }
    ]
  },
  { 
    id: 2, 
    icon: '🌍', 
    iconBg: 'rgba(16, 185, 129, 0.2)',
    name: '欧洲企业级存储', 
    region: '欧洲', 
    product: '企业级存储', 
    found: 523, 
    matched: 89, 
    contacted: 12,
    replies: 3,
    progress: 42, 
    createdAt: '2026-03-17 14:00',
    estimatedComplete: '2026-03-22 18:00',
    runningTime: '2天 2小时',
    sources: ['海关数据', '展会数据'],
    criteria: {
      region: '欧洲',
      product: '企业级存储',
      companySize: '201-500人',
      purchaseAmount: '$1M - $5M',
      keywords: ['企业级', '数据中心', '存储解决方案']
    },
    aiFeatures: {
      lookalike: true,
      decisionMaker: false,
      websiteAnalysis: true
    },
    recentFindings: [
      { id: 1, flag: '🇩🇪', name: 'Berlin Tech GmbH', location: '德国·柏林', industry: '企业级存储', score: 90 },
      { id: 2, flag: '🇫🇷', name: 'Paris Storage Solutions', location: '法国·巴黎', industry: '云存储服务商', score: 86 }
    ],
    activityLog: [
      { type: 'info', message: '展会数据导入完成', time: '45分钟前' },
      { type: 'success', message: '发现高匹配潜客: Berlin Tech GmbH', time: '2小时前' }
    ]
  },
  { 
    id: 3, 
    icon: '🌏', 
    iconBg: 'rgba(245, 158, 11, 0.2)',
    name: '东南亚分销商', 
    region: '东南亚', 
    product: '消费电子', 
    found: 312, 
    matched: 45, 
    contacted: 8,
    replies: 2,
    progress: 28, 
    createdAt: '2026-03-16 10:00',
    estimatedComplete: '2026-03-23 18:00',
    runningTime: '3天 5小时',
    sources: ['Google Maps', 'LinkedIn'],
    criteria: {
      region: '东南亚',
      product: '消费电子',
      companySize: '1-50人',
      purchaseAmount: '$100K - $500K',
      keywords: ['分销商', '电子产品', '批发']
    },
    aiFeatures: {
      lookalike: false,
      decisionMaker: true,
      websiteAnalysis: false
    },
    recentFindings: [
      { id: 1, flag: '🇸🇬', name: 'Singapore Digital Pte Ltd', location: '新加坡', industry: '电子产品分销', score: 78 }
    ],
    activityLog: [
      { type: 'info', message: 'Google Maps 数据抓取中...', time: '15分钟前' }
    ]
  }
])

const recentProspects = ref([
  { id: 1, flag: '🇸🇦', name: 'Riyadh Tech Distribution', location: '沙特·利雅得', industry: '固态硬盘进口商', annualPurchase: '年采购$2M+', score: 92, tags: ['高匹配', '已验证'], source: '海关数据', foundAt: '10分钟前' },
  { id: 2, flag: '🇦🇪', name: 'Dubai Storage Solutions', location: '阿联酋·迪拜', industry: '电子分销商', annualPurchase: '年采购$1.5M', score: 88, tags: ['高匹配', '关键人已识别'], source: 'LinkedIn', foundAt: '25分钟前' },
  { id: 3, flag: '🇰🇼', name: 'Kuwait Data Systems', location: '科威特·科威特城', industry: '数据中心集成商', annualPurchase: '年采购$2.5M', score: 85, tags: ['高匹配'], source: '海关数据', foundAt: '1小时前' },
  { id: 4, flag: '🇩🇪', name: 'Berlin Tech GmbH', location: '德国·柏林', industry: '企业级存储', annualPurchase: '年采购$3M+', score: 90, tags: ['高匹配', '已验证', 'ISO认证'], source: '展会数据', foundAt: '2小时前' },
  { id: 5, flag: '🇴🇲', name: 'Oman Tech Hub', location: '阿曼·马斯喀特', industry: '政府IT供应商', annualPurchase: '年采购$1.8M', score: 76, tags: ['中匹配'], source: 'Google Maps', foundAt: '3小时前' }
])

const dataSources = ref([
  { id: 'customs', icon: '🚢', name: '海关数据', desc: '进出口记录' },
  { id: 'linkedin', icon: '💼', name: 'LinkedIn', desc: '商业社交' },
  { id: 'google', icon: '📍', name: 'Google Maps', desc: '企业定位' },
  { id: 'exhibition', icon: '🎪', name: '展会数据', desc: '参展商名录' }
])

const dataSourcesDetail = ref([
  { id: 'customs', icon: '🚢', name: '海关数据', description: '全球进出口贸易记录', connected: true, records: '1.2亿条', updateFreq: '每日更新' },
  { id: 'linkedin', icon: '💼', name: 'LinkedIn', description: '全球最大商业社交平台', connected: true, records: '8.5亿用户', updateFreq: '实时' },
  { id: 'google', icon: '📍', name: 'Google Maps', description: '全球企业地理位置数据', connected: true, records: '2亿+企业', updateFreq: '每周' },
  { id: 'exhibition', icon: '🎪', name: '展会数据', description: '全球展会参展商名录', connected: true, records: '50万+企业', updateFreq: '每场展会' },
  { id: 'crunchbase', icon: '🏢', name: 'Crunchbase', description: '创业公司融资数据', connected: false, records: '-', updateFreq: '-' },
  { id: 'zoominfo', icon: '📊', name: 'ZoomInfo', description: '企业联系人数据库', connected: false, records: '-', updateFreq: '-' }
])

const historyTasks = ref([
  { id: 101, icon: '🎯', iconBg: 'rgba(99, 102, 241, 0.2)', name: '北美SSD寻客', region: '北美', product: '固态硬盘', found: 523, matched: 89, converted: 12, status: 'completed', createdAt: '2026-03-01', completedAt: '2026-03-10', sources: ['海关数据', 'LinkedIn'] },
  { id: 102, icon: '🌍', iconBg: 'rgba(16, 185, 129, 0.2)', name: '欧洲分销商开发', region: '欧洲', product: '消费电子', found: 312, matched: 56, converted: 8, status: 'completed', createdAt: '2026-02-15', completedAt: '2026-02-28', sources: ['展会数据'] },
  { id: 103, icon: '🌏', iconBg: 'rgba(245, 158, 11, 0.2)', name: '东南亚内存条市场', region: '东南亚', product: '内存条', found: 156, matched: 23, converted: 3, status: 'paused', createdAt: '2026-02-20', completedAt: '2026-03-05', sources: ['LinkedIn', 'Google Maps'] },
  { id: 104, icon: '🎯', iconBg: 'rgba(139, 92, 246, 0.2)', name: '中东企业级存储', region: '中东', product: '企业级存储', found: 423, matched: 78, converted: 15, status: 'completed', createdAt: '2026-02-01', completedAt: '2026-02-14', sources: ['海关数据'] },
  { id: 105, icon: '🌐', iconBg: 'rgba(236, 72, 153, 0.2)', name: '南美市场拓展', region: '南美', product: '存储设备', found: 287, matched: 45, converted: 6, status: 'completed', createdAt: '2026-01-15', completedAt: '2026-01-30', sources: ['海关数据', 'LinkedIn'] },
  { id: 106, icon: '🎯', iconBg: 'rgba(6, 182, 212, 0.2)', name: '非洲数据中心', region: '非洲', product: '企业存储', found: 98, matched: 12, converted: 2, status: 'completed', createdAt: '2026-01-01', completedAt: '2026-01-15', sources: ['Google Maps'] }
])

// 模板数据
const prospectTemplates = ref([
  { id: 1, icon: 'fas fa-globe', iconBg: 'rgba(99, 102, 241, 0.2)', name: '中东SSD进口商开发', category: 'region', categoryLabel: '地区模板', description: '针对中东地区SSD进口商的寻客模板，已验证高效', config: { region: '中东', industry: '电子分销', product: 'SSD固态硬盘' }, tags: ['高成功率', '验证模板'], favorite: true, stats: { usedCount: 156, successRate: 35, avgTime: '3天' } },
  { id: 2, icon: 'fas fa-industry', iconBg: 'rgba(16, 185, 129, 0.2)', name: '数据中心行业开发', category: 'industry', categoryLabel: '行业模板', description: '针对数据中心行业的寻客模板，覆盖全球主要市场', config: { region: '全球', industry: '数据中心', product: '企业存储' }, tags: ['数据中心', '企业级'], favorite: true, stats: { usedCount: 89, successRate: 28, avgTime: '4天' } },
  { id: 3, icon: 'fas fa-box', iconBg: 'rgba(245, 158, 11, 0.2)', name: '内存条分销商开发', category: 'product', categoryLabel: '产品模板', description: '针对内存条分销商的寻客模板', config: { region: '东南亚', industry: '电子分销', product: '内存条' }, tags: ['内存条', '分销商'], favorite: false, stats: { usedCount: 45, successRate: 22, avgTime: '3天' } },
  { id: 4, icon: 'fas fa-globe', iconBg: 'rgba(139, 92, 246, 0.2)', name: '欧洲消费电子市场', category: 'region', categoryLabel: '地区模板', description: '针对欧洲消费电子分销商的寻客模板', config: { region: '欧洲', industry: '消费电子', product: '消费电子' }, tags: ['欧洲', '消费电子'], favorite: false, stats: { usedCount: 67, successRate: 25, avgTime: '3.5天' } },
  { id: 5, icon: 'fas fa-industry', iconBg: 'rgba(236, 72, 153, 0.2)', name: '安防监控行业', category: 'industry', categoryLabel: '行业模板', description: '针对安防监控存储需求的寻客模板', config: { region: '全球', industry: '安防监控', product: '监控存储' }, tags: ['安防', '监控'], favorite: true, stats: { usedCount: 34, successRate: 30, avgTime: '4天' } },
  { id: 6, icon: 'fas fa-box', iconBg: 'rgba(6, 182, 212, 0.2)', name: '企业级SSD开发', category: 'product', categoryLabel: '产品模板', description: '针对企业级SSD采购商的寻客模板', config: { region: '北美', industry: '企业级存储', product: '企业SSD' }, tags: ['企业级', 'SSD'], favorite: false, stats: { usedCount: 78, successRate: 32, avgTime: '3天' } }
])

const newTask = ref({
  name: '',
  region: '',
  product: '',
  sources: ['customs', 'linkedin'],
  companySize: '',
  purchaseAmount: '',
  keywords: ['SSD', '进口商'],
  lookalikeEnabled: true,
  decisionMakerEnabled: true,
  websiteAnalysisEnabled: true
})

const filteredProspects = computed(() => {
  let result = recentProspects.value
  if (prospectFilter.value === 'high') {
    result = result.filter(p => p.score >= 85)
  } else if (prospectFilter.value === 'medium') {
    result = result.filter(p => p.score >= 70 && p.score < 85)
  }
  if (prospectSort.value === 'score') {
    result = [...result].sort((a, b) => b.score - a.score)
  }
  return result
})

const filteredHistoryTasks = computed(() => {
  let result = historyTasks.value
  if (historyFilterStatus.value) {
    result = result.filter(t => t.status === historyFilterStatus.value)
  }
  if (historyFilterRegion.value) {
    result = result.filter(t => t.region === historyFilterRegion.value)
  }
  if (historySearch.value) {
    const query = historySearch.value.toLowerCase()
    result = result.filter(t => t.name.toLowerCase().includes(query))
  }
  return result
})

// 历史统计
const totalHistoryFound = computed(() => historyTasks.value.reduce((sum, t) => sum + t.found, 0))
const totalHistoryMatched = computed(() => historyTasks.value.reduce((sum, t) => sum + t.matched, 0))
const totalHistoryConverted = computed(() => historyTasks.value.reduce((sum, t) => sum + t.converted, 0))
const avgConversionRate = computed(() => Math.round(totalHistoryConverted.value / totalHistoryFound.value * 100))
const avgMatchRate = computed(() => Math.round(totalHistoryMatched.value / totalHistoryFound.value * 100))

const regionDistribution = computed(() => {
  const regions = {}
  historyTasks.value.forEach(t => { regions[t.region] = (regions[t.region] || 0) + 1 })
  const total = historyTasks.value.length
  const colors = ['var(--primary)', 'var(--success)', 'var(--warning)', 'var(--secondary)', '#EC4899']
  return Object.entries(regions).map(([name, count], i) => ({
    name, count, percent: Math.round(count / total * 100), color: colors[i % colors.length]
  })).sort((a, b) => b.count - a.count)
})

const topHistoryTasks = computed(() => [...historyTasks.value].sort((a, b) => b.converted - a.converted).slice(0, 5))

// 模板计算
const filteredTemplates = computed(() => {
  let result = prospectTemplates.value
  if (templateCategory.value !== 'all') {
    if (templateCategory.value === 'my') {
      result = result.filter(t => t.favorite)
    } else {
      result = result.filter(t => t.category === templateCategory.value)
    }
  }
  if (templateSearch.value) {
    const query = templateSearch.value.toLowerCase()
    result = result.filter(t => t.name.toLowerCase().includes(query) || t.description.toLowerCase().includes(query))
  }
  return result
})

const avgTemplateSuccessRate = computed(() => Math.round(prospectTemplates.value.reduce((sum, t) => sum + t.stats.successRate, 0) / prospectTemplates.value.length))

const aiRecommendedTemplates = computed(() => [
  { id: 1, icon: 'fas fa-globe', name: '中东SSD进口商开发', categoryLabel: '地区模板', stats: { successRate: 35 }, matchScore: 95 },
  { id: 2, icon: 'fas fa-industry', name: '数据中心行业开发', categoryLabel: '行业模板', stats: { successRate: 28 }, matchScore: 88 },
  { id: 3, icon: 'fas fa-box', name: '企业级SSD开发', categoryLabel: '产品模板', stats: { successRate: 32 }, matchScore: 82 }
])

const formatNumber = (num) => num >= 1000 ? (num / 1000).toFixed(1) + 'K' : num.toLocaleString()
const getScoreClass = (score) => score >= 85 ? 'high' : score >= 70 ? 'medium' : 'low'
const getStatusLabel = (status) => ({ completed: '已完成', paused: '已暂停' }[status] || status)
const switchTab = () => { activeTab.value = 'prospects' }

const toggleSource = (id) => {
  const index = newTask.value.sources.indexOf(id)
  if (index > -1) newTask.value.sources.splice(index, 1)
  else newTask.value.sources.push(id)
}

const addKeyword = () => {
  const value = keywordInput.value.trim()
  if (value && !newTask.value.keywords.includes(value)) newTask.value.keywords.push(value)
  keywordInput.value = ''
}

const removeKeyword = (index) => newTask.value.keywords.splice(index, 1)

const showTaskDetail = (task) => { selectedTask.value = task; showDetailModal.value = true }
const showHistoryTaskDetail = (task) => { showHistoryModal.value = false; selectedTask.value = task; showDetailModal.value = true }
const pauseTask = (task) => showToastMessage(`任务"${task.name}"已暂停`, 'success')
const createTask = () => { showCreateModal.value = false; showToastMessage('寻客任务已创建', 'success') }
const exportTaskResult = () => showToastMessage('任务结果已导出', 'success')
const contactProspect = (p) => showToastMessage(`正在联系 ${p.name}...`, 'success')
const showProspectDetail = () => showToastMessage('加载潜客详情...', 'success')
const addToPool = (p) => showToastMessage(`${p.name} 已加入客户池`, 'success')

// 历史任务函数
const duplicateHistoryTask = (task) => {
  showHistoryModal.value = false
  showCreateModal.value = true
  newTask.value.name = task.name + ' (副本)'
  showToastMessage(`已复制任务"${task.name}"`, 'success')
}
const viewHistoryDetail = (task) => {
  selectedTask.value = task
  showHistoryModal.value = false
  showDetailModal.value = true
}
const exportHistoryTask = (task) => showToastMessage(`正在导出"${task.name}"数据`, 'success')
const exportAllHistoryTasks = () => showToastMessage('正在导出全部历史任务...', 'success')

// 模板函数
const toggleTemplateFavorite = (tpl) => {
  tpl.favorite = !tpl.favorite
  showToastMessage(tpl.favorite ? '已添加收藏' : '已取消收藏', 'success')
}
const previewTemplate = (tpl) => showToastMessage(`预览模板: ${tpl.name}`, 'info')
const useTemplate = (tpl) => {
  showTemplatesModal.value = false
  showCreateModal.value = true
  newTask.value.name = tpl.name
  showToastMessage(`已应用模板: ${tpl.name}`, 'success')
}
const createCustomTemplate = () => showToastMessage('创建自定义模板功能开发中', 'info')
const importTemplate = () => showToastMessage('模板导入功能开发中', 'info')

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

<style scoped>
.prospect-page { flex: 1; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; background: var(--bg-dark); }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.header-left { display: flex; flex-direction: column; gap: 4px; }
.page-title { font-size: 20px; font-weight: 600; }
.page-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); cursor: pointer; transition: all 0.2s; }
.stat-card-lg:hover { border-color: var(--primary); }
.stat-icon-lg { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.stat-icon-lg.green { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.stat-icon-lg.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-content-lg h3 { font-size: 24px; font-weight: 700; }
.stat-content-lg p { font-size: 12px; color: var(--text-secondary); }
.tabs-container { margin-bottom: 20px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.tab-item { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--text-secondary); transition: all 0.2s; }
.tab-item:hover { background: var(--bg-hover); }
.tab-item.active { background: var(--bg-card); color: var(--text-primary); font-weight: 600; }
.tab-count { font-size: 11px; padding: 2px 8px; background: var(--bg-dark); border-radius: 10px; color: var(--text-muted); }
.tab-item.active .tab-count { background: var(--primary); color: white; }
.section { margin-bottom: 24px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-header h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.section-header h3 i { color: var(--primary); }
.section-filters { display: flex; gap: 8px; }
.filter-select { padding: 6px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 12px; }
.task-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.task-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; cursor: pointer; transition: all 0.2s; }
.task-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.task-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.task-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.task-info { flex: 1; }
.task-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.task-meta { font-size: 12px; color: var(--text-secondary); }
.task-status { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 4px 10px; border-radius: 12px; }
.task-status.running { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.task-status.running i { font-size: 8px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.task-stats { display: flex; gap: 20px; margin-bottom: 16px; padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.task-stat { display: flex; flex-direction: column; gap: 4px; }
.task-stat .stat-value { font-size: 18px; font-weight: 700; }
.task-stat .stat-value.highlight { color: var(--primary); }
.task-stat .stat-value.success { color: var(--success); }
.task-stat .stat-label { font-size: 11px; color: var(--text-muted); }
.task-progress { margin-bottom: 12px; }
.progress-header { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 6px; }
.progress-percent { color: var(--primary); font-weight: 600; }
.progress-bar { height: 6px; background: var(--bg-dark); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--gradient-1); border-radius: 3px; }
.progress-detail { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 6px; }
.task-sources { display: flex; gap: 6px; margin-bottom: 12px; }
.source-tag { font-size: 10px; padding: 3px 8px; background: var(--bg-hover); border-radius: 10px; color: var(--text-secondary); }
.task-actions { display: flex; gap: 8px; }
.prospect-list { display: flex; flex-direction: column; gap: 12px; }
.prospect-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; transition: all 0.2s; }
.prospect-card:hover { border-color: var(--primary); }
.prospect-avatar { width: 48px; height: 48px; background: var(--bg-hover); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.country-flag { font-size: 28px; }
.prospect-info { flex: 1; }
.prospect-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.prospect-name { font-size: 15px; font-weight: 600; }
.prospect-score { font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; }
.prospect-score.high { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.prospect-score.medium { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.prospect-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.prospect-tags { display: flex; gap: 6px; margin-bottom: 8px; }
.tag { font-size: 10px; padding: 3px 8px; background: var(--bg-hover); border-radius: 10px; color: var(--text-secondary); }
.prospect-source { font-size: 11px; color: var(--text-muted); }
.prospect-actions { display: flex; gap: 8px; }
.source-grid-large { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.source-card-large { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; transition: all 0.2s; }
.source-card-large.connected { border-color: rgba(16, 185, 129, 0.3); }
.source-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.source-icon-large { font-size: 32px; }
.source-status { font-size: 10px; padding: 3px 8px; border-radius: 10px; background: var(--bg-hover); color: var(--text-secondary); }
.source-status.active { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.source-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.source-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.source-stats { display: flex; gap: 20px; padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.source-stat { display: flex; flex-direction: column; gap: 4px; }
.source-stat .value { font-size: 14px; font-weight: 600; }
.source-stat .label { font-size: 10px; color: var(--text-muted); }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal { background: var(--bg-card); border-radius: 16px; width: 100%; max-width: 600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.task-detail-modal { max-width: 800px; }
.history-modal { max-width: 700px; }
.create-modal { max-width: 700px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border); }
.modal-title { display: flex; align-items: center; gap: 12px; }
.modal-title h3 { font-size: 16px; font-weight: 600; }
.modal-title p { font-size: 12px; color: var(--text-secondary); }
.title-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.modal-close { width: 32px; height: 32px; background: var(--bg-hover); border: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--border); color: var(--text-primary); }
.modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 20px; border-top: 1px solid var(--border); }
.detail-section { margin-bottom: 24px; }
.detail-section h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
.detail-section h4 i { color: var(--primary); font-size: 13px; }
.overview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.overview-item { background: var(--bg-hover); border-radius: 10px; padding: 12px; }
.overview-label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.overview-value { font-size: 13px; font-weight: 600; }
.overview-value.status-running { color: var(--primary); display: flex; align-items: center; gap: 6px; }
.overview-value.status-running i { font-size: 8px; animation: pulse 1.5s infinite; }
.progress-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.progress-stat-card { background: var(--bg-hover); border-radius: 12px; padding: 16px; text-align: center; }
.progress-stat-card .stat-number { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.progress-stat-card.highlight .stat-number { color: var(--primary); }
.progress-stat-card.success .stat-number { color: var(--success); }
.progress-stat-card.purple .stat-number { color: var(--secondary); }
.progress-stat-card .stat-text { font-size: 12px; color: var(--text-secondary); }
.main-progress { background: var(--bg-hover); border-radius: 10px; padding: 16px; }
.progress-bar-large { height: 8px; background: var(--bg-dark); border-radius: 4px; overflow: hidden; }
.criteria-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.criteria-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.criteria-item.full-width { grid-column: span 2; }
.criteria-label { font-size: 11px; color: var(--text-muted); }
.criteria-value { font-size: 13px; font-weight: 500; }
.criteria-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-features { display: flex; flex-direction: column; gap: 8px; }
.ai-feature { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.ai-feature.active { background: rgba(99, 102, 241, 0.1); }
.ai-feature i:first-child { font-size: 18px; color: var(--primary); width: 24px; }
.feature-info { flex: 1; }
.feature-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.feature-desc { font-size: 11px; color: var(--text-secondary); }
.ai-feature .check { color: var(--success); font-size: 16px; }
.recent-findings { display: flex; flex-direction: column; gap: 8px; }
.finding-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.finding-flag { font-size: 24px; }
.finding-info { flex: 1; }
.finding-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.finding-detail { font-size: 11px; color: var(--text-secondary); }
.finding-score { font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; }
.activity-log { display: flex; flex-direction: column; gap: 12px; }
.log-item { display: flex; gap: 12px; position: relative; }
.log-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.log-dot.success { background: var(--success); }
.log-dot.info { background: var(--primary); }
.log-dot.warning { background: var(--warning); }
.log-content { flex: 1; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.log-item:last-child .log-content { border-bottom: none; padding-bottom: 0; }
.log-message { font-size: 12px; margin-bottom: 4px; }
.log-time { font-size: 10px; color: var(--text-muted); }
.history-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.history-tab { padding: 8px 16px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
.history-tab.active { background: var(--primary); border-color: var(--primary); color: white; }
.history-list { display: flex; flex-direction: column; gap: 12px; }
.history-card { background: var(--bg-hover); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; }
.history-card:hover { background: var(--border); }
.history-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.history-task-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.history-task-info { flex: 1; }
.history-task-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.history-task-meta { font-size: 11px; color: var(--text-secondary); }
.history-status { font-size: 10px; padding: 3px 8px; border-radius: 10px; }
.history-status.completed { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.history-status.paused { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.history-stats { display: flex; gap: 20px; margin-bottom: 12px; }
.history-stat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.history-stat i { font-size: 11px; }
.history-time { display: flex; gap: 20px; font-size: 11px; color: var(--text-muted); }

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

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

.history-view-tabs { display: flex; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.view-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; }
.view-tab:hover { background: rgba(99, 102, 241, 0.1); }
.view-tab.active { background: var(--primary); color: white; }

.history-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-height: 400px; overflow-y: auto; }
.history-card-enhanced { background: var(--bg-hover); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; border-left: 3px solid var(--border); }
.history-card-enhanced:hover { background: rgba(99, 102, 241, 0.1); }
.history-card-enhanced.completed { border-left-color: var(--success); }
.history-card-enhanced.paused { border-left-color: var(--warning); }
.card-header-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.task-icon-sm { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.task-info-sm { flex: 1; }
.task-name-sm { font-size: 13px; font-weight: 600; }
.task-meta-sm { font-size: 11px; color: var(--text-muted); }
.status-badge-sm { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.status-badge-sm.completed { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.status-badge-sm.paused { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.card-metrics { display: flex; gap: 12px; margin-bottom: 10px; }
.metric-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.metric-item i { font-size: 10px; }
.metric-item .metric-val { font-weight: 600; color: var(--text-primary); }
.metric-item.highlight .metric-val { color: var(--primary); }
.metric-item.success .metric-val { color: var(--success); }
.card-sources { display: flex; gap: 6px; margin-bottom: 10px; }
.source-mini-tag { font-size: 9px; padding: 2px 6px; background: var(--bg-card); border-radius: 8px; color: var(--text-muted); }
.card-time-info { display: flex; gap: 16px; font-size: 10px; color: var(--text-muted); margin-bottom: 10px; }
.card-time-info i { margin-right: 4px; }
.card-actions-row { display: flex; gap: 6px; }
.btn-icon-sm { width: 28px; height: 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.btn-icon-sm:hover { background: var(--primary); border-color: var(--primary); color: white; }

.history-table-view { max-height: 400px; overflow-y: auto; }
.history-table-header { display: grid; grid-template-columns: 2fr 80px 60px 70px 70px 70px 80px 80px; gap: 8px; padding: 10px 14px; background: var(--bg-hover); border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.history-table-row { display: grid; grid-template-columns: 2fr 80px 60px 70px 70px 70px 80px 80px; gap: 8px; padding: 12px 14px; background: var(--bg-hover); border-radius: 8px; align-items: center; font-size: 12px; margin-bottom: 6px; }
.history-table-row:hover { background: rgba(99, 102, 241, 0.1); }
.task-icon-mini { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-right: 8px; vertical-align: middle; }
.col-name { display: flex; align-items: center; }
.col-matched.highlight { color: var(--primary); font-weight: 600; }
.col-converted.success { color: var(--success); font-weight: 600; }

.history-stats-view { display: flex; flex-direction: column; gap: 20px; }
.stats-section h5 { font-size: 13px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.stats-section h5 i { color: var(--primary); }
.region-distribution { display: flex; flex-direction: column; gap: 10px; }
.distribution-row { }
.distribution-row .distribution-bar { height: 8px; background: var(--bg-dark); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.distribution-row .bar-fill { height: 100%; border-radius: 4px; }
.distribution-info { display: flex; justify-content: space-between; font-size: 12px; }
.region-name { color: var(--text-secondary); }
.region-value { font-weight: 600; }

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

.efficiency-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.efficiency-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.eff-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); }
.eff-info .eff-value { font-size: 16px; font-weight: 700; }
.eff-info .eff-label { font-size: 10px; color: var(--text-muted); }

/* Templates Modal */
.templates-modal { max-width: 900px; }
.template-categories { display: flex; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.category-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; }
.category-tab:hover { background: rgba(99, 102, 241, 0.1); }
.category-tab.active { background: var(--primary); color: white; }
.templates-toolbar { display: flex; gap: 12px; margin-bottom: 12px; }
.sort-select-sm { padding: 6px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 12px; }
.templates-stats-bar { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.templates-stats-bar .divider { margin: 0 8px; }

.templates-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; max-height: 350px; overflow-y: auto; }
.template-card { background: var(--bg-hover); border-radius: 12px; padding: 16px; transition: all 0.2s; }
.template-card:hover { background: rgba(99, 102, 241, 0.1); }
.template-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.template-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.template-info { flex: 1; }
.template-name { font-size: 13px; font-weight: 600; }
.template-category { font-size: 10px; color: var(--text-muted); }
.btn-favorite { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; }
.btn-favorite:hover { color: var(--warning); }
.btn-favorite.active { color: var(--warning); }
.template-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.5; }
.template-config { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.config-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.config-item i { font-size: 10px; color: var(--primary); }
.template-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag-sm { font-size: 9px; padding: 2px 8px; background: var(--bg-card); border-radius: 10px; color: var(--text-secondary); }
.template-stats { display: flex; gap: 12px; margin-bottom: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.stat-sm { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.stat-sm i { font-size: 10px; }
.stat-sm.highlight { color: var(--success); }
.template-actions { display: flex; gap: 8px; }

.ai-templates-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-sm { margin-left: auto; font-size: 10px; color: var(--text-muted); font-weight: 400; }
.ai-templates-list { display: flex; flex-direction: column; gap: 8px; }
.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-name { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.ai-template-meta { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted); }
.match-score { color: var(--success); font-weight: 500; }
.form-section { margin-bottom: 24px; }
.form-section-title { font-size: 14px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.form-input { 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 { outline: none; border-color: var(--primary); }
.form-select { width: 100%; padding: 10px 14px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 13px; }
.required { color: var(--danger); }
.source-select-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.source-select-card { padding: 16px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 12px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; }
.source-select-card:hover { border-color: var(--primary); }
.source-select-card.selected { border-color: var(--primary); background: rgba(99, 102, 241, 0.1); }
.source-select-icon { font-size: 24px; margin-bottom: 8px; }
.source-select-name { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.source-select-desc { font-size: 10px; color: var(--text-muted); }
.source-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; }
.keyword-input-container { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.keyword-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.keyword-tag { padding: 4px 10px; background: rgba(99, 102, 241, 0.2); border-radius: 12px; font-size: 11px; display: flex; align-items: center; gap: 6px; }
.keyword-tag i { cursor: pointer; opacity: 0.6; }
.keyword-tag i:hover { opacity: 1; }
.keyword-input { width: 100%; background: transparent; border: none; color: var(--text-primary); font-size: 13px; padding: 4px 0; }
.keyword-input:focus { outline: none; }
.ai-rules { display: flex; flex-direction: column; gap: 12px; }
.ai-rule-item { display: flex; gap: 12px; padding: 12px; background: var(--bg-dark); border-radius: 10px; }
.rule-toggle { width: 44px; height: 24px; background: var(--border); border-radius: 12px; position: relative; cursor: pointer; flex-shrink: 0; transition: all 0.2s; }
.rule-toggle.active { background: var(--success); }
.toggle-slider { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: all 0.2s; }
.rule-toggle.active .toggle-slider { left: 23px; }
.rule-info { flex: 1; }
.rule-title { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.rule-desc { font-size: 11px; color: var(--text-secondary); }
.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); }
@media (max-width: 1400px) { .task-grid, .source-grid-large { grid-template-columns: repeat(2, 1fr); } .stats-row { grid-template-columns: repeat(3, 1fr); } .source-select-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 992px) { .task-grid, .source-grid-large { grid-template-columns: 1fr; } .stats-row { grid-template-columns: repeat(2, 1fr); } .overview-grid, .progress-stats { grid-template-columns: repeat(2, 1fr); } }
</style>
