<template>
  <div class="settings-page">
    <div class="settings-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="resetAllSettings">
          <i class="fas fa-undo"></i> 重置默认
        </button>
        <button class="btn btn-primary" @click="saveAllSettings">
          <i class="fas fa-save"></i> 保存设置
        </button>
      </div>
    </div>

    <!-- Settings Grid -->
    <div class="settings-grid">
      <!-- Left Column -->
      <!-- <div class="settings-column">
        <div class="settings-section">
          <div class="section-header">
            <div class="section-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
              <i class="fas fa-user-shield"></i>
            </div>
            <div class="section-title">
              <h3>账号与安全</h3>
              <p>管理您的账户信息和安全设置</p>
            </div>
          </div>
          
          <div class="settings-list">
            <div class="profile-card">
              <div class="profile-avatar">
                <span>张</span>
                <button class="avatar-edit" @click="showAvatarModal = true">
                  <i class="fas fa-camera"></i>
                </button>
              </div>
              <div class="profile-info">
                <div class="profile-name">张经理</div>
                <div class="profile-role">销售总监</div>
                <div class="profile-email">zhang@company.com</div>
              </div>
              <button class="btn btn-secondary btn-sm" @click="showProfileModal = true">
                <i class="fas fa-edit"></i> 编辑
              </button>
            </div>

            <div class="settings-item" @click="showPasswordModal = true">
              <div class="item-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
                <i class="fas fa-key"></i>
              </div>
              <div class="item-content">
                <div class="item-title">修改密码</div>
                <div class="item-desc">定期更换密码，保护账号安全</div>
              </div>
              <div class="item-action">
                <button class="btn btn-secondary btn-sm">修改</button>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
                <i class="fas fa-shield-alt"></i>
              </div>
              <div class="item-content">
                <div class="item-title">两步验证</div>
                <div class="item-desc">开启后登录需手机验证码，提升安全性</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.twoFactor }" @click="settings.twoFactor = !settings.twoFactor">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>

            <div class="settings-item" @click="showLoginHistoryModal = true">
              <div class="item-icon" style="background: rgba(139, 92, 246, 0.2); color: var(--secondary);">
                <i class="fas fa-history"></i>
              </div>
              <div class="item-content">
                <div class="item-title">登录历史</div>
                <div class="item-desc">查看最近的登录记录</div>
              </div>
              <div class="item-action">
                <span class="item-value">查看</span>
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
          </div>
        </div>

        <div class="settings-section">
          <div class="section-header">
            <div class="section-icon" style="background: rgba(236, 72, 153, 0.2); color: #EC4899;">
              <i class="fas fa-brain"></i>
            </div>
            <div class="section-title">
              <h3>AI大脑配置</h3>
              <p>定制您的智能营销助手</p>
            </div>
          </div>
          
          <div class="settings-list">
            <div class="settings-item" @click="showModelModal = true">
              <div class="item-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
                <i class="fas fa-microchip"></i>
              </div>
              <div class="item-content">
                <div class="item-title">模型微调</div>
                <div class="item-desc">利用企业私有数据微调AI，使其更懂业务</div>
              </div>
              <div class="item-action">
                <span class="item-value success">
                  <i class="fas fa-check-circle"></i> v2.3
                </span>
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="settings-item" @click="showKnowledgeModal = true">
              <div class="item-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
                <i class="fas fa-book"></i>
              </div>
              <div class="item-content">
                <div class="item-title">知识库管理</div>
                <div class="item-desc">维护产品知识、商务条款、行业知识等</div>
              </div>
              <div class="item-action">
                <span class="item-value">1,247条</span>
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(6, 182, 212, 0.2); color: var(--info);">
                <i class="fas fa-graduation-cap"></i>
              </div>
              <div class="item-content">
                <div class="item-title">自动学习</div>
                <div class="item-desc">AI自动从邮件、聊天中学习新知识</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.autoLearn }" @click="settings.autoLearn = !settings.autoLearn">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
                <i class="fas fa-rocket"></i>
              </div>
              <div class="item-content">
                <div class="item-title">策略自进化</div>
                <div class="item-desc">AI自动测试并优化营销策略</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.autoEvolve }" @click="settings.autoEvolve = !settings.autoEvolve">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(239, 68, 68, 0.2); color: var(--danger);">
                <i class="fas fa-brain"></i>
              </div>
              <div class="item-content">
                <div class="item-title">个性化程度</div>
                <div class="item-desc">控制AI生成内容的个性化程度</div>
              </div>
              <div class="item-action">
                <select class="mini-select" v-model="settings.personalizeLevel">
                  <option value="low">低</option>
                  <option value="medium">中</option>
                  <option value="high">高</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div> -->

      <!-- Right Column -->
      <div class="settings-column">
        <!-- Auto Prospect Config -->
        <!-- <div class="settings-section">
          <div class="section-header">
            <div class="section-icon" style="background: rgba(59, 130, 246, 0.2); color: #3B82F6;">
              <i class="fas fa-search"></i>
            </div>
            <div class="section-title">
              <h3>自动寻客配置</h3>
              <p>配置智能寻客的数据源和策略</p>
            </div>
          </div>
          
          <div class="settings-list">
            <div class="settings-item" @click="showDataSourceModal = true">
              <div class="item-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
                <i class="fas fa-database"></i>
              </div>
              <div class="item-content">
                <div class="item-title">数据源管理</div>
                <div class="item-desc">海关数据、LinkedIn、Google Maps等</div>
              </div>
              <div class="item-action">
                <span class="item-value success">8个已启用</span>
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
                <i class="fas fa-users"></i>
              </div>
              <div class="item-content">
                <div class="item-title">Lookalike算法</div>
                <div class="item-desc">基于成交客户特征，智能推荐相似潜客</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.lookalike }" @click="settings.lookalike = !settings.lookalike">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(236, 72, 153, 0.2); color: #EC4899;">
                <i class="fas fa-user-tie"></i>
              </div>
              <div class="item-content">
                <div class="item-title">关键人挖掘</div>
                <div class="item-desc">自动识别目标公司的采购决策人</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.decisionMaker }" @click="settings.decisionMaker = !settings.decisionMaker">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
                <i class="fas fa-globe"></i>
              </div>
              <div class="item-content">
                <div class="item-title">官网智能分析</div>
                <div class="item-desc">分析客户官网，判断业务匹配度</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.websiteAnalysis }" @click="settings.websiteAnalysis = !settings.websiteAnalysis">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>
          </div>
        </div> -->

        <!-- Channel Integration -->
        <div class="settings-section">
          <div class="section-header">
            <div class="section-icon" style="background: rgba(34, 197, 94, 0.2); color: #22C55E;">
              <i class="fas fa-paper-plane"></i>
            </div>
            <div class="section-title">
              <h3>渠道集成</h3>
              <p>绑定营销渠道，启用多渠道触达</p>
            </div>
          </div>
          
          <div class="channel-list">
            <div class="channel-item" :class="{ connected: channels.email.connected }">
              <div class="channel-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
                <i class="fas fa-envelope"></i>
              </div>
              <div class="channel-content">
                <div class="channel-title">企业邮箱</div>
                <div class="channel-desc">{{ channels.email.connected ? channels.email.accounts + '个账号已绑定' : '未绑定' }}</div>
              </div>
              <div class="channel-action">
                <button v-if="channels.email.connected" class="btn btn-secondary btn-sm" @click="showEmailModal = true">
                  <i class="fas fa-cog"></i> 管理
                </button>
                <button v-else class="btn btn-primary btn-sm" @click="showEmailModal = true">
                  <i class="fas fa-plus"></i> 绑定
                </button>
              </div>
            </div>

            <div class="channel-item" :class="{ connected: channels.whatsapp.connected }">
              <div class="channel-icon" style="background: rgba(37, 211, 102, 0.2); color: #25D366;">
                <i class="fab fa-whatsapp"></i>
              </div>
              <div class="channel-content">
                <div class="channel-title">WhatsApp Business</div>
                <div class="channel-desc">{{ channels.whatsapp.connected ? '已绑定: ' + channels.whatsapp.phone : '未绑定' }}</div>
              </div>
              <div class="channel-action">
                <span v-if="channels.whatsapp.connected" class="status-badge success">
                  <i class="fas fa-check"></i> 已连接
                </span>
                <button v-else class="btn btn-primary btn-sm">
                  <i class="fas fa-plus"></i> 绑定
                </button>
              </div>
            </div>

            <div class="channel-item" :class="{ connected: channels.linkedin.connected }">
              <div class="channel-icon" style="background: rgba(10, 102, 194, 0.2); color: #0A66C2;">
                <i class="fab fa-linkedin"></i>
              </div>
              <div class="channel-content">
                <div class="channel-title">LinkedIn</div>
                <div class="channel-desc">{{ channels.linkedin.connected ? channels.linkedin.connections + '个连接' : '未绑定' }}</div>
              </div>
              <div class="channel-action">
                <button class="btn btn-secondary btn-sm" @click="showLinkedInModal = true">
                  <i class="fas fa-cog"></i> 管理
                </button>
              </div>
            </div>

            <div class="channel-item" :class="{ connected: channels.wechat.connected }">
              <div class="channel-icon" style="background: rgba(7, 193, 96, 0.2); color: #07C160;">
                <i class="fab fa-weixin"></i>
              </div>
              <div class="channel-content">
                <div class="channel-title">企业微信</div>
                <div class="channel-desc">{{ channels.wechat.connected ? '已绑定' : '未绑定' }}</div>
              </div>
              <div class="channel-action">
                <button class="btn btn-secondary btn-sm" @click="showWeChatModal = true">
                  <i class="fas fa-cog"></i> 管理
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Notification Settings -->
        <!-- <div class="settings-section">
          <div class="section-header">
            <div class="section-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
              <i class="fas fa-bell"></i>
            </div>
            <div class="section-title">
              <h3>通知设置</h3>
              <p>管理通知偏好和提醒方式</p>
            </div>
          </div>
          
          <div class="settings-list">
            <div class="settings-item">
              <div class="item-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
                <i class="fas fa-envelope"></i>
              </div>
              <div class="item-content">
                <div class="item-title">邮件通知</div>
                <div class="item-desc">重要通知发送到邮箱</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.emailNotify }" @click="settings.emailNotify = !settings.emailNotify">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
                <i class="fas fa-reply"></i>
              </div>
              <div class="item-content">
                <div class="item-title">客户回复提醒</div>
                <div class="item-desc">客户回复邮件、消息时即时提醒</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.replyNotify }" @click="settings.replyNotify = !settings.replyNotify">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>
          </div>
        </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 v-if="showProfileModal" class="modal-overlay" @click.self="showProfileModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-user-edit"></i> 编辑个人信息</div>
          <button class="modal-close" @click="showProfileModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">姓名</label>
            <input type="text" class="form-input" value="张经理" placeholder="请输入姓名">
          </div>
          <div class="form-group">
            <label class="form-label">职位</label>
            <input type="text" class="form-input" value="销售总监" placeholder="请输入职位">
          </div>
          <div class="form-group">
            <label class="form-label">邮箱</label>
            <input type="email" class="form-input" value="zhang@company.com" placeholder="请输入邮箱">
          </div>
          <div class="form-group">
            <label class="form-label">电话</label>
            <input type="tel" class="form-input" value="+86 138****8888" placeholder="请输入电话">
          </div>
          <div class="form-group">
            <label class="form-label">所属部门</label>
            <select class="form-select">
              <option>销售部</option>
              <option>市场部</option>
              <option>商务部</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">个人简介</label>
            <textarea class="form-textarea" rows="3" placeholder="请输入个人简介">负责公司SSD产品在中东、欧洲市场的销售工作，拥有10年电子元器件出口经验。</textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showProfileModal = false">取消</button>
          <button class="btn btn-primary" @click="showProfileModal = false; showToastMessage('个人信息已更新', 'success')">保存</button>
        </div>
      </div>
    </div>

    <!-- 修改密码弹窗 -->
    <div v-if="showPasswordModal" class="modal-overlay" @click.self="showPasswordModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-key"></i> 修改密码</div>
          <button class="modal-close" @click="showPasswordModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">当前密码</label>
            <input type="password" class="form-input" placeholder="请输入当前密码">
          </div>
          <div class="form-group">
            <label class="form-label">新密码</label>
            <input type="password" class="form-input" placeholder="请输入新密码">
          </div>
          <div class="form-group">
            <label class="form-label">确认新密码</label>
            <input type="password" class="form-input" placeholder="请再次输入新密码">
          </div>
          <div class="password-hint">
            <i class="fas fa-info-circle"></i> 密码要求：至少8位，包含字母和数字
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showPasswordModal = false">取消</button>
          <button class="btn btn-primary" @click="showPasswordModal = false; showToastMessage('密码已修改', 'success')">确认修改</button>
        </div>
      </div>
    </div>

    <!-- 登录历史弹窗 -->
    <div v-if="showLoginHistoryModal" class="modal-overlay" @click.self="showLoginHistoryModal = false">
      <div class="modal settings-modal wide">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-history"></i> 登录历史记录</div>
          <button class="modal-close" @click="showLoginHistoryModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="login-history-list">
            <div v-for="login in loginHistory" :key="login.id" class="login-history-item">
              <div class="login-icon" :class="login.status">
                <i :class="login.status === '成功' ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
              </div>
              <div class="login-info">
                <div class="login-time">{{ login.time }}</div>
                <div class="login-details">
                  <span><i class="fas fa-map-marker-alt"></i> {{ login.location }}</span>
                  <span><i class="fas fa-desktop"></i> {{ login.device }}</span>
                  <span><i class="fas fa-network-wired"></i> {{ login.ip }}</span>
                </div>
              </div>
              <div class="login-status" :class="login.status">{{ login.status }}</div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showLoginHistoryModal = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- 模型微调弹窗 -->
    <div v-if="showModelModal" class="modal-overlay" @click.self="showModelModal = false">
      <div class="modal settings-modal wide">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-microchip"></i> AI模型微调配置</div>
          <button class="modal-close" @click="showModelModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="model-info-card">
            <div class="model-header">
              <div class="model-icon"><i class="fas fa-robot"></i></div>
              <div class="model-title">
                <h4>TradeBrain AI v2.3</h4>
                <span class="model-status">已训练</span>
              </div>
            </div>
            <div class="model-stats">
              <div class="model-stat">
                <span class="stat-label">训练数据量</span>
                <span class="stat-value">12,456 条</span>
              </div>
              <div class="model-stat">
                <span class="stat-label">最后训练</span>
                <span class="stat-value">2026-03-20</span>
              </div>
              <div class="model-stat">
                <span class="stat-label">准确率</span>
                <span class="stat-value">94.5%</span>
              </div>
            </div>
          </div>
          <div class="fine-tune-section">
            <h5><i class="fas fa-graduation-cap"></i> 微调训练</h5>
            <div class="form-group">
              <label class="form-label">训练数据来源</label>
              <select class="form-select">
                <option>全部历史邮件</option>
                <option>成交客户邮件</option>
                <option>自定义选择</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">训练频率</label>
              <select class="form-select">
                <option>每天自动</option>
                <option>每周</option>
                <option>手动</option>
              </select>
            </div>
            <button class="btn btn-primary" @click="showModelFineTuneModal = true">
              <i class="fas fa-play"></i> 开始训练
            </button>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showModelModal = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- 数据源管理弹窗 -->
    <div v-if="showDataSourceModal" class="modal-overlay" @click.self="showDataSourceModal = false">
      <div class="modal settings-modal extra-wide">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-database"></i> 数据源管理中心</div>
          <button class="modal-close" @click="showDataSourceModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- 统计概览 -->
          <div class="sources-overview">
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-database"></i></div>
              <div class="overview-info">
                <div class="overview-value">{{ dataSources.filter(s => s.enabled).length }}</div>
                <div class="overview-label">已启用数据源</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-record-vinyl"></i></div>
              <div class="overview-info">
                <div class="overview-value">{{ dataSources.reduce((sum, s) => sum + s.recordsNum, 0).toLocaleString() }}</div>
                <div class="overview-label">总数据量</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-sync"></i></div>
              <div class="overview-info">
                <div class="overview-value">{{ dataSources.filter(s => s.lastSync.includes('2026-03-24')).length }}</div>
                <div class="overview-label">今日同步</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-globe"></i></div>
              <div class="overview-info">
                <div class="overview-value">200+</div>
                <div class="overview-label">覆盖国家</div>
              </div>
            </div>
          </div>

          <!-- 数据源列表 -->
          <div class="data-source-list">
            <div v-for="source in dataSources" :key="source.id" class="data-source-item" @click="showDataSourceDetail(source)">
              <div class="source-icon" :class="source.type">
                <i :class="{
                  'trade': 'fas fa-ship',
                  'linkedin': 'fab fa-linkedin',
                  'maps': 'fas fa-map-marked-alt',
                  'company': 'fas fa-building',
                  'exhibition': 'fas fa-calendar-alt',
                  'procurement': 'fas fa-shopping-cart',
                  'social': 'fas fa-share-alt',
                  'association': 'fas fa-users'
                }[source.type]"></i>
              </div>
              <div class="source-info">
                <div class="source-name">{{ source.name }}</div>
                <div class="source-meta">
                  <span><i class="fas fa-database"></i> {{ source.records }} 条</span>
                  <span><i class="fas fa-sync"></i> {{ source.lastSync }}</span>
                  <span><i class="fas fa-star"></i> 质量: {{ source.quality }}%</span>
                </div>
                <div class="source-desc">{{ source.description }}</div>
              </div>
              <div class="source-status" :class="source.enabled ? 'active' : 'inactive'">
                <i :class="source.enabled ? 'fas fa-check-circle' : 'fas fa-pause-circle'"></i>
                {{ source.enabled ? '已启用' : '已暂停' }}
              </div>
              <div class="source-action">
                <button class="btn btn-sm" :class="source.enabled ? 'btn-secondary' : 'btn-primary'">
                  <i :class="source.enabled ? 'fas fa-pause' : 'fas fa-play'"></i>
                </button>
              </div>
            </div>
          </div>

          <!-- 外贸数据源配置 -->
          <div class="foreign-trade-section">
            <h4><i class="fas fa-globe-americas"></i> 外贸数据源快速入口</h4>
            <div class="quick-source-grid">
              <div class="quick-source-card">
                <i class="fas fa-ship"></i>
                <span>海关数据</span>
                <button class="btn btn-sm btn-primary" @click="selectedQuickSource = {name:'海关数据',type:'trade'}; showQuickSourceModal = true">配置</button>
              </div>
              <div class="quick-source-card">
                <i class="fab fa-linkedin"></i>
                <span>LinkedIn</span>
                <button class="btn btn-sm btn-primary" @click="selectedQuickSource = {name:'LinkedIn',type:'linkedin'}; showQuickSourceModal = true">配置</button>
              </div>
              <div class="quick-source-card">
                <i class="fas fa-calendar-alt"></i>
                <span>展会数据</span>
                <button class="btn btn-sm btn-secondary" @click="selectedQuickSource = {name:'展会数据',type:'exhibition'}; showQuickSourceModal = true">启用</button>
              </div>
              <div class="quick-source-card">
                <i class="fas fa-shopping-cart"></i>
                <span>采购数据</span>
                <button class="btn btn-sm btn-primary" @click="selectedQuickSource = {name:'采购数据',type:'procurement'}; showQuickSourceModal = true">配置</button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showDataSourceModal = false">关闭</button>
          <button class="btn btn-primary" @click="showAddDataSourceModal = true"><i class="fas fa-plus"></i> 添加数据源</button>
        </div>
      </div>
    </div>

    <!-- 添加数据源弹窗 -->
    <div v-if="showAddDataSourceModal" class="modal-overlay" @click.self="showAddDataSourceModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-plus-circle"></i> 添加数据源</div>
          <button class="modal-close" @click="showAddDataSourceModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">数据源类型 <span class="required">*</span></label>
            <select class="form-select">
              <option value="">请选择数据源类型</option>
              <option value="trade">海关数据</option>
              <option value="linkedin">LinkedIn</option>
              <option value="maps">Google Maps</option>
              <option value="company">企业数据库</option>
              <option value="exhibition">展会数据</option>
              <option value="procurement">采购数据</option>
              <option value="social">社交媒体</option>
              <option value="association">行业协会</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">数据源名称 <span class="required">*</span></label>
            <input type="text" class="form-input" placeholder="请输入数据源名称">
          </div>
          <div class="form-group">
            <label class="form-label">API密钥 / 账号</label>
            <input type="text" class="form-input" placeholder="请输入API密钥或账号">
          </div>
          <div class="form-group">
            <label class="form-label">API密码 / 密钥</label>
            <input type="password" class="form-input" placeholder="请输入API密码或密钥">
          </div>
          <div class="form-group">
            <label class="form-label">数据覆盖地区</label>
            <select class="form-select">
              <option value="global">全球</option>
              <option value="china">中国</option>
              <option value="asia">亚洲</option>
              <option value="europe">欧洲</option>
              <option value="americas">美洲</option>
              <option value="middle-east">中东</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">自动同步频率</label>
            <select class="form-select">
              <option value="daily">每天</option>
              <option value="weekly">每周</option>
              <option value="monthly">每月</option>
              <option value="manual">手动</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">数据保留天数</label>
            <select class="form-select">
              <option value="90">90天</option>
              <option value="180">180天</option>
              <option value="365">365天</option>
              <option value="unlimited">无限</option>
            </select>
          </div>
          <div class="test-connection">
            <button class="btn btn-secondary"><i class="fas fa-plug"></i> 测试连接</button>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showAddDataSourceModal = false">取消</button>
          <button class="btn btn-primary" @click="showAddDataSourceModal = false; showToastMessage('数据源添加成功', 'success')">确认添加</button>
        </div>
      </div>
    </div>

    <!-- 外贸数据源快速入口弹窗 -->
    <div v-if="showQuickSourceModal" class="modal-overlay" @click.self="showQuickSourceModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i :class="{
              'trade': 'fas fa-ship',
              'linkedin': 'fab fa-linkedin',
              'exhibition': 'fas fa-calendar-alt',
              'procurement': 'fas fa-shopping-cart'
            }[selectedQuickSource?.type]"></i>
            {{ selectedQuickSource?.name }} - 快速配置
          </div>
          <button class="modal-close" @click="showQuickSourceModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- 海关数据配置 -->
          <div v-if="selectedQuickSource?.type === 'trade'">
            <div class="quick-config-section">
              <h5><i class="fas fa-cog"></i> 基本配置</h5>
              <div class="form-group">
                <label class="form-label">海关数据API</label>
                <select class="form-select">
                  <option>请选择海关数据服务商</option>
                  <option>腾仓数据</option>
                  <option>环球慧展</option>
                  <option>外贸数据宝</option>
                  <option>自定义API</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">API Key</label>
                <input type="text" class="form-input" placeholder="请输入API Key">
              </div>
              <div class="form-group">
                <label class="form-label">API Secret</label>
                <input type="password" class="form-input" placeholder="请输入API Secret">
              </div>
            </div>
            <div class="quick-config-section">
              <h5><i class="fas fa-filter"></i> 数据筛选</h5>
              <div class="form-group">
                <label class="form-label">目标进出口国</label>
                <div class="checkbox-group">
                  <label class="checkbox-item"><input type="checkbox" checked> 中国</label>
                  <label class="checkbox-item"><input type="checkbox" checked> 美国</label>
                  <label class="checkbox-item"><input type="checkbox" checked> 欧盟</label>
                  <label class="checkbox-item"><input type="checkbox"> 中东</label>
                  <label class="checkbox-item"><input type="checkbox"> 东南亚</label>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">产品关键词</label>
                <input type="text" class="form-input" placeholder="SSD, 存储, 电子元器件">
              </div>
            </div>
          </div>

          <!-- LinkedIn配置 -->
          <div v-if="selectedQuickSource?.type === 'linkedin'">
            <div class="quick-config-section">
              <h5><i class="fab fa-linkedin"></i> LinkedIn 账号</h5>
              <div class="form-group">
                <label class="form-label">绑定邮箱/手机</label>
                <input type="text" class="form-input" placeholder="LinkedIn注册邮箱或手机号">
              </div>
              <div class="form-group">
                <label class="form-label">密码</label>
                <input type="password" class="form-input" placeholder="LinkedIn密码">
              </div>
            </div>
            <div class="quick-config-section">
              <h5><i class="fas fa-search"></i> 自动寻客设置</h5>
              <div class="form-group">
                <label class="form-label">每日搜索限额</label>
                <select class="form-select">
                  <option>50次/天</option>
                  <option>100次/天</option>
                  <option>200次/天</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">每日添加好友限额</label>
                <select class="form-select">
                  <option>20人/天</option>
                  <option>50人/天</option>
                  <option>100人/天</option>
                </select>
              </div>
            </div>
          </div>

          <!-- 展会数据配置 -->
          <div v-if="selectedQuickSource?.type === 'exhibition'">
            <div class="quick-config-section">
              <h5><i class="fas fa-calendar-alt"></i> 展会选择</h5>
              <div class="form-group">
                <label class="form-label">目标展会</label>
                <div class="checkbox-group">
                  <label class="checkbox-item"><input type="checkbox" checked> 广交会</label>
                  <label class="checkbox-item"><input type="checkbox" checked> CES</label>
                  <label class="checkbox-item"><input type="checkbox" checked> IFA</label>
                  <label class="checkbox-item"><input type="checkbox"> Computex</label>
                  <label class="checkbox-item"><input type="checkbox"> MWC</label>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">展会年份</label>
                <select class="form-select">
                  <option>2026年</option>
                  <option>2025年</option>
                  <option>2024年</option>
                </select>
              </div>
            </div>
          </div>

          <!-- 采购数据配置 -->
          <div v-if="selectedQuickSource?.type === 'procurement'">
            <div class="quick-config-section">
              <h5><i class="fas fa-shopping-cart"></i> 采购数据配置</h5>
              <div class="form-group">
                <label class="form-label">数据源</label>
                <select class="form-select">
                  <option>中国采购网</option>
                  <option>全球招标网</option>
                  <option>政府采购网</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">行业分类</label>
                <div class="checkbox-group">
                  <label class="checkbox-item"><input type="checkbox" checked> 电子产品</label>
                  <label class="checkbox-item"><input type="checkbox" checked> 信息技术</label>
                  <label class="checkbox-item"><input type="checkbox"> 机械设备</label>
                  <label class="checkbox-item"><input type="checkbox"> 化工原料</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showQuickSourceModal = false">取消</button>
          <button class="btn btn-primary" @click="showQuickSourceModal = false; showToastMessage('数据源配置已保存', 'success')">保存配置</button>
        </div>
      </div>
    </div>

    <!-- 数据源详情弹窗 -->
    <div v-if="showDataSourceDetailModal" class="modal-overlay" @click.self="showDataSourceDetailModal = false">
      <div class="modal settings-modal wide">
        <div class="modal-header">
          <div class="modal-title">
            <i :class="{
              'trade': 'fas fa-ship',
              'linkedin': 'fab fa-linkedin',
              'maps': 'fas fa-map-marked-alt',
              'company': 'fas fa-building',
              'exhibition': 'fas fa-calendar-alt',
              'procurement': 'fas fa-shopping-cart',
              'social': 'fas fa-share-alt',
              'association': 'fas fa-users'
            }[selectedDataSource?.type]"></i>
            {{ selectedDataSource?.name }} - 详情
          </div>
          <button class="modal-close" @click="showDataSourceDetailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" v-if="selectedDataSource">
          <!-- 数据源状态卡片 -->
          <div class="source-detail-header">
            <div class="source-detail-status">
              <span class="status-badge" :class="selectedDataSource.enabled ? 'active' : 'inactive'">
                <i :class="selectedDataSource.enabled ? 'fas fa-check-circle' : 'fas fa-pause-circle'"></i>
                {{ selectedDataSource.enabled ? '已启用' : '已暂停' }}
              </span>
            </div>
            <p class="source-description">{{ selectedDataSource.description }}</p>
          </div>

          <!-- 统计信息 -->
          <div class="source-stats-grid">
            <div class="source-stat-card">
              <div class="stat-icon"><i class="fas fa-database"></i></div>
              <div class="stat-info">
                <div class="stat-value">{{ selectedDataSource.records }}</div>
                <div class="stat-label">数据总量</div>
              </div>
            </div>
            <div class="source-stat-card">
              <div class="stat-icon"><i class="fas fa-globe"></i></div>
              <div class="stat-info">
                <div class="stat-value">{{ selectedDataSource.coverage }}</div>
                <div class="stat-label">覆盖范围</div>
              </div>
            </div>
            <div class="source-stat-card">
              <div class="stat-icon"><i class="fas fa-sync"></i></div>
              <div class="stat-info">
                <div class="stat-value">{{ selectedDataSource.updateFreq }}</div>
                <div class="stat-label">更新频率</div>
              </div>
            </div>
            <div class="source-stat-card">
              <div class="stat-icon"><i class="fas fa-star"></i></div>
              <div class="stat-info">
                <div class="stat-value">{{ selectedDataSource.quality }}%</div>
                <div class="stat-label">数据质量</div>
              </div>
            </div>
          </div>

          <!-- 外贸相关配置 -->
          <div class="detail-section">
            <h5><i class="fas fa-cog"></i> 数据配置</h5>
            <div class="config-grid">
              <div class="config-item">
                <label>自动同步</label>
                <div class="toggle-switch active"><span class="toggle-slider"></span></div>
              </div>
              <div class="config-item">
                <label>同步时间</label>
                <select class="form-select">
                  <option>每天 00:00</option>
                  <option>每天 06:00</option>
                  <option>每天 12:00</option>
                </select>
              </div>
              <div class="config-item">
                <label>保留天数</label>
                <select class="form-select">
                  <option>90天</option>
                  <option>180天</option>
                  <option>365天</option>
                </select>
              </div>
            </div>
          </div>

          <!-- 数据字段映射 -->
          <div class="detail-section">
            <h5><i class="fas fa-th"></i> 数据字段映射</h5>
            <div class="fields-list">
              <div class="field-item">
                <span class="field-name">公司名称</span>
                <i class="fas fa-arrow-right"></i>
                <span class="field-target">company_name</span>
              </div>
              <div class="field-item">
                <span class="field-name">联系人</span>
                <i class="fas fa-arrow-right"></i>
                <span class="field-target">contact_name</span>
              </div>
              <div class="field-item">
                <span class="field-name">邮箱</span>
                <i class="fas fa-arrow-right"></i>
                <span class="field-target">email</span>
              </div>
              <div class="field-item">
                <span class="field-name">电话</span>
                <i class="fas fa-arrow-right"></i>
                <span class="field-target">phone</span>
              </div>
            </div>
          </div>

          <!-- 最近同步日志 -->
          <div class="detail-section">
            <h5><i class="fas fa-history"></i> 最近同步记录</h5>
            <div class="sync-logs">
              <div class="sync-log-item">
                <span class="log-time">2026-03-24 08:00</span>
                <span class="log-status success">成功</span>
                <span class="log-count">+1,234 条新数据</span>
              </div>
              <div class="sync-log-item">
                <span class="log-time">2026-03-23 08:00</span>
                <span class="log-status success">成功</span>
                <span class="log-count">+987 条新数据</span>
              </div>
              <div class="sync-log-item">
                <span class="log-time">2026-03-22 08:00</span>
                <span class="log-status success">成功</span>
                <span class="log-count">+1,456 条新数据</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showDataSourceDetailModal = false">关闭</button>
          <button class="btn btn-secondary" v-if="selectedDataSource?.enabled"><i class="fas fa-pause"></i> 暂停</button>
          <button class="btn btn-primary" v-else><i class="fas fa-play"></i> 启用</button>
        </div>
      </div>
    </div>

    <!-- 企业邮箱弹窗 -->
    <div v-if="showEmailModal" class="modal-overlay" @click.self="showEmailModal = false">
      <div class="modal settings-modal extra-wide">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-envelope"></i> 企业邮箱管理中心</div>
          <button class="modal-close" @click="showEmailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- 邮箱统计概览 -->
          <div class="email-overview">
            <div class="overview-card">
              <div class="overview-icon email"><i class="fas fa-envelope"></i></div>
              <div class="overview-info">
                <div class="overview-value">{{ emailAccounts.length }}</div>
                <div class="overview-label">邮箱账号</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-paper-plane"></i></div>
              <div class="overview-info">
                <div class="overview-value">{{ emailAccounts.reduce((sum, a) => sum + a.sendToday, 0) }}</div>
                <div class="overview-label">今日发送</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-reply"></i></div>
              <div class="overview-info">
                <div class="overview-value">{{ Math.round(emailAccounts.reduce((sum, a) => sum + a.replyRate, 0) / emailAccounts.length) }}%</div>
                <div class="overview-label">平均回复率</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-shield-alt"></i></div>
              <div class="overview-info">
                <div class="overview-value">3/3</div>
                <div class="overview-label">安全认证</div>
              </div>
            </div>
          </div>

          <!-- 标签页导航 -->
          <div class="email-tabs">
            <button class="email-tab active"><i class="fas fa-envelope"></i> 邮箱账号</button>
            <button class="email-tab"><i class="fas fa-chart-bar"></i> 发送统计</button>
          </div>
          
          <div class="email-accounts-list">
            <div v-for="account in emailAccounts" :key="account.id" class="email-account-item" :class="{selected: selectedEmailAccount?.id === account.id}" @click="selectedEmailAccount = account; showEmailDetailModal = true">
              <div class="account-icon"><i class="fas fa-envelope"></i></div>
              <div class="account-info">
                <div class="account-email">{{ account.email }}</div>
                <div class="account-name">{{ account.name }}</div>
                <div class="account-stats">
                  <span><i class="fas fa-paper-plane"></i> 今日: {{ account.sendToday }}</span>
                  <span><i class="fas fa-reply"></i> 回复率: {{ account.replyRate }}%</span>
                  <span><i class="fas fa-sync"></i> {{ account.lastSync }}</span>
                </div>
              </div>
              <div class="account-auth">
                <span class="auth-badge" :class="account.SPF ? 'active' : ''"><i class="fas fa-check"></i> SPF</span>
                <span class="auth-badge" :class="account.DKIM ? 'active' : ''"><i class="fas fa-check"></i> DKIM</span>
                <span class="auth-badge" :class="account.DMARC ? 'active' : ''"><i class="fas fa-check"></i> DMARC</span>
              </div>
            </div>
          </div>

          <!-- 发送统计标签页 -->
          <div class="email-tab-content" v-if="false">
            <div class="stats-overview">
              <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-paper-plane"></i></div>
                <div class="stat-info">
                  <div class="stat-value">{{ emailAccounts.reduce((sum, a) => sum + a.sendToday, 0) }}</div>
                  <div class="stat-label">今日发送</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-envelope-open"></i></div>
                <div class="stat-info">
                  <div class="stat-value">{{ emailAccounts.reduce((sum, a) => sum + a.sendToday * 0.45, 0).toFixed(0) }}</div>
                  <div class="stat-label">今日打开</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-reply"></i></div>
                <div class="stat-info">
                  <div class="stat-value">{{ emailAccounts.reduce((sum, a) => sum + a.sendToday * a.replyRate / 100, 0).toFixed(0) }}</div>
                  <div class="stat-label">今日回复</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-mouse-pointer"></i></div>
                <div class="stat-info">
                  <div class="stat-value">{{ emailAccounts.reduce((sum, a) => sum + a.sendToday * 0.15, 0).toFixed(0) }}</div>
                  <div class="stat-label">今日点击</div>
                </div>
              </div>
            </div>
            <div class="chart-section">
              <h5><i class="fas fa-chart-line"></i> 最近7天发送趋势</h5>
              <div class="simple-chart">
                <div class="chart-bar" style="height: 45%"><span>周一</span></div>
                <div class="chart-bar" style="height: 62%"><span>周二</span></div>
                <div class="chart-bar" style="height: 58%"><span>周三</span></div>
                <div class="chart-bar" style="height: 75%"><span>周四</span></div>
                <div class="chart-bar" style="height: 82%"><span>周五</span></div>
                <div class="chart-bar" style="height: 40%"><span>周六</span></div>
                <div class="chart-bar" style="height: 35%"><span>周日</span></div>
              </div>
            </div>
            <div class="top-performers">
              <h5><i class="fas fa-trophy"></i> 热门模板</h5>
              <div class="template-list">
                <div class="template-item">
                  <span class="template-name">产品介绍邮件</span>
                  <span class="template-stats">发送 1,234 · 打开率 52%</span>
                </div>
                <div class="template-item">
                  <span class="template-name">节日祝福</span>
                  <span class="template-stats">发送 856 · 打开率 68%</span>
                </div>
                <div class="template-item">
                  <span class="template-name">跟进邮件</span>
                  <span class="template-stats">发送 654 · 打开率 45%</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 域名配置标签页 -->
          <div class="email-tab-content" v-if="false">
            <div class="domain-config-section">
              <h5><i class="fas fa-globe"></i> 已配置域名</h5>
              <div class="domain-list">
                <div class="domain-item">
                  <div class="domain-icon"><i class="fas fa-atlas"></i></div>
                  <div class="domain-info">
                    <div class="domain-name">company.com</div>
                    <div class="domain-meta">
                      <span class="domain-status active"><i class="fas fa-check-circle"></i> 已验证</span>
                      <span><i class="fas fa-user"></i> 5个邮箱</span>
                    </div>
                  </div>
                  <button class="btn btn-sm btn-secondary">管理</button>
                </div>
              </div>
            </div>
            <div class="domain-config-section">
              <h5><i class="fas fa-cog"></i> 域名配置指南</h5>
              <div class="config-guide">
                <div class="guide-step">
                  <div class="step-num">1</div>
                  <div class="step-content">
                    <div class="step-title">添加域名</div>
                    <div class="step-desc">在域名服务商处添加DNS记录验证所有权</div>
                  </div>
                </div>
                <div class="guide-step">
                  <div class="step-num">2</div>
                  <div class="step-content">
                    <div class="step-title">配置MX记录</div>
                    <div class="step-desc">设置邮件交换记录指向您的邮件服务器</div>
                  </div>
                </div>
                <div class="guide-step">
                  <div class="step-num">3</div>
                  <div class="step-content">
                    <div class="step-title">配置SPF/DKIM/DMARC</div>
                    <div class="step-desc">添加安全认证记录防止邮件伪造</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 安全设置标签页 -->
          <div class="email-tab-content" v-if="false">
            <div class="security-overview">
              <div class="security-card">
                <div class="security-header">
                  <i class="fas fa-shield-alt"></i>
                  <span>总体安全评分</span>
                </div>
                <div class="security-score">92/100</div>
                <div class="security-desc">您的邮件安全配置良好</div>
              </div>
            </div>
            <div class="security-section">
              <h5><i class="fas fa-lock"></i> 安全策略</h5>
              <div class="security-list">
                <div class="security-item">
                  <div class="security-item-info">
                    <span class="security-item-title">SPF验证</span>
                    <span class="security-item-desc">验证发件服务器授权</span>
                  </div>
                  <div class="toggle-switch active"><span class="toggle-slider"></span></div>
                </div>
                <div class="security-item">
                  <div class="security-item-info">
                    <span class="security-item-title">DKIM签名</span>
                    <span class="security-item-desc">邮件内容数字签名</span>
                  </div>
                  <div class="toggle-switch active"><span class="toggle-slider"></span></div>
                </div>
                <div class="security-item">
                  <div class="security-item-info">
                    <span class="security-item-title">DMARC策略</span>
                    <span class="security-item-desc">防止域名被伪造</span>
                  </div>
                  <div class="toggle-switch active"><span class="toggle-slider"></span></div>
                </div>
                <div class="security-item">
                  <div class="security-item-info">
                    <span class="security-item-title">TLS加密传输</span>
                    <span class="security-item-desc">邮件传输过程加密</span>
                  </div>
                  <div class="toggle-switch active"><span class="toggle-slider"></span></div>
                </div>
              </div>
            </div>
            <div class="security-section">
              <h5><i class="fas fa-history"></i> 安全日志</h5>
              <div class="security-logs">
                <div class="log-item">
                  <span class="log-time">2026-03-24 08:00</span>
                  <span class="log-event">SPF验证通过</span>
                  <span class="log-status success">正常</span>
                </div>
                <div class="log-item">
                  <span class="log-time">2026-03-23 14:30</span>
                  <span class="log-event">DKIM签名验证</span>
                  <span class="log-status success">正常</span>
                </div>
                <div class="log-item">
                  <span class="log-time">2026-03-22 09:15</span>
                  <span class="log-event">DMARC检查</span>
                  <span class="log-status success">正常</span>
                </div>
              </div>
            </div>
          </div>

          <button class="btn btn-primary add-account-btn" @click="showAddEmailModal = true">
            <i class="fas fa-plus"></i> 添加邮箱账号
          </button>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showEmailModal = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- LinkedIn弹窗 -->
    <div v-if="showLinkedInModal" class="modal-overlay" @click.self="showLinkedInModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fab fa-linkedin"></i> LinkedIn 配置</div>
          <button class="modal-close" @click="showLinkedInModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div v-if="!linkedInAccount.connected" class="connect-prompt">
            <div class="connect-icon"><i class="fab fa-linkedin"></i></div>
            <h4>连接您的LinkedIn账号</h4>
            <p>绑定后可以自动搜索潜在客户、发送连接请求、发送私信等</p>
            <button class="btn btn-primary"><i class="fab fa-linkedin"></i> 使用LinkedIn账号登录</button>
          </div>
          <div v-else class="linkedin-connected">
            <div class="account-info-section">
              <div class="form-group">
                <label class="form-label">绑定邮箱</label>
                <input type="email" class="form-input" v-model="linkedInAccount.email" placeholder="LinkedIn注册邮箱">
              </div>
              <div class="form-group">
                <label class="form-label">公司主页</label>
                <input type="text" class="form-input" v-model="linkedInAccount.companyPage" placeholder="公司LinkedIn主页">
              </div>
            </div>
            <div class="linkedin-stats">
              <div class="stat-item">
                <span class="stat-label">连接数</span>
                <span class="stat-value">{{ linkedInAccount.connections }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">本周私信</span>
                <span class="stat-value">{{ linkedInAccount.messages }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">搜索限额</span>
                <span class="stat-value">{{ linkedInAccount.searchLimit }}/周</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showLinkedInModal = false">关闭</button>
          <button class="btn btn-primary" @click="showLinkedInModal = false; showToastMessage('LinkedIn账号已绑定', 'success')">保存</button>
        </div>
      </div>
    </div>

    <!-- 添加邮箱账号弹窗 -->
    <div v-if="showAddEmailModal" class="modal-overlay" @click.self="showAddEmailModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-plus-circle"></i> 添加邮箱账号</div>
          <button class="modal-close" @click="showAddEmailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">邮箱地址 <span class="required">*</span></label>
            <input type="email" class="form-input" placeholder="例如: sales@company.com">
          </div>
          <div class="form-group">
            <label class="form-label">显示名称</label>
            <input type="text" class="form-input" placeholder="例如: 销售团队">
          </div>
          <div class="form-group">
            <label class="form-label">SMTP 服务器 <span class="required">*</span></label>
            <input type="text" class="form-input" placeholder="例如: smtp.company.com">
          </div>
          <div class="form-group">
            <label class="form-label">SMTP 端口 <span class="required">*</span></label>
            <input type="number" class="form-input" placeholder="587 (TLS) 或 465 (SSL)">
          </div>
          <div class="form-group">
            <label class="form-label">SMTP 用户名 <span class="required">*</span></label>
            <input type="text" class="form-input" placeholder="通常为完整邮箱地址">
          </div>
          <div class="form-group">
            <label class="form-label">SMTP 密码 <span class="required">*</span></label>
            <input type="password" class="form-input" placeholder="邮箱密码或应用专用密码">
          </div>
          <div class="form-group">
            <label class="form-label">IMAP 服务器</label>
            <input type="text" class="form-input" placeholder="例如: imap.company.com">
          </div>
          <div class="test-connection">
            <button class="btn btn-secondary"><i class="fas fa-plug"></i> 测试连接</button>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showAddEmailModal = false">取消</button>
          <button class="btn btn-primary" @click="showAddEmailModal = false; showToastMessage('邮箱账号添加成功', 'success')">确认添加</button>
        </div>
      </div>
    </div>

    <!-- 邮箱账号详情弹窗 -->
    <div v-if="showEmailDetailModal" class="modal-overlay" @click.self="showEmailDetailModal = false">
      <div class="modal settings-modal extra-wide">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-envelope"></i> {{ selectedEmailAccount?.email }} - 详细配置
          </div>
          <button class="modal-close" @click="showEmailDetailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" v-if="selectedEmailAccount">
          <!-- 服务器配置 -->
          <div class="detail-section">
            <h5><i class="fas fa-server"></i> SMTP / IMAP 服务器配置</h5>
            <div class="config-grid-2col">
              <div class="config-card">
                <div class="config-card-header">
                  <i class="fas fa-upload"></i> SMTP (发送)
                </div>
                <div class="config-card-body">
                  <div class="config-row">
                    <span class="config-label">服务器地址</span>
                    <span class="config-value">{{ selectedEmailAccount.smtp.host }}</span>
                  </div>
                  <div class="config-row">
                    <span class="config-label">端口</span>
                    <span class="config-value">{{ selectedEmailAccount.smtp.port }}</span>
                  </div>
                  <div class="config-row">
                    <span class="config-label">加密方式</span>
                    <span class="config-value">{{ selectedEmailAccount.smtp.encryption }}</span>
                  </div>
                  <div class="config-row">
                    <span class="config-label">认证方式</span>
                    <span class="config-value">OAuth 2.0 / SMTPAuth</span>
                  </div>
                </div>
              </div>
              <div class="config-card">
                <div class="config-card-header">
                  <i class="fas fa-download"></i> IMAP (接收)
                </div>
                <div class="config-card-body">
                  <div class="config-row">
                    <span class="config-label">服务器地址</span>
                    <span class="config-value">{{ selectedEmailAccount.imap.host }}</span>
                  </div>
                  <div class="config-row">
                    <span class="config-label">端口</span>
                    <span class="config-value">{{ selectedEmailAccount.imap.port }}</span>
                  </div>
                  <div class="config-row">
                    <span class="config-label">加密方式</span>
                    <span class="config-value">{{ selectedEmailAccount.imap.encryption }}</span>
                  </div>
                  <div class="config-row">
                    <span class="config-label">同步文件夹</span>
                    <span class="config-value">INBOX, Sent, Drafts</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 安全认证 -->
          <div class="detail-section">
            <h5><i class="fas fa-shield-alt"></i> 邮件安全认证状态</h5>
            <div class="auth-grid">
              <div class="auth-card" :class="selectedEmailAccount.SPF ? 'pass' : 'fail'">
                <div class="auth-icon"><i class="fas fa-shield-alt"></i></div>
                <div class="auth-info">
                  <div class="auth-name">SPF</div>
                  <div class="auth-desc">发件人策略框架</div>
                </div>
                <div class="auth-status">{{ selectedEmailAccount.SPF ? '已配置' : '未配置' }}</div>
              </div>
              <div class="auth-card" :class="selectedEmailAccount.DKIM ? 'pass' : 'fail'">
                <div class="auth-icon"><i class="fas fa-key"></i></div>
                <div class="auth-info">
                  <div class="auth-name">DKIM</div>
                  <div class="auth-desc">域名密钥识别邮件</div>
                </div>
                <div class="auth-status">{{ selectedEmailAccount.DKIM ? '已配置' : '未配置' }}</div>
              </div>
              <div class="auth-card" :class="selectedEmailAccount.DMARC ? 'pass' : 'fail'">
                <div class="auth-icon"><i class="fas fa-lock"></i></div>
                <div class="auth-info">
                  <div class="auth-name">DMARC</div>
                  <div class="auth-desc">基于域的消息认证</div>
                </div>
                <div class="auth-status">{{ selectedEmailAccount.DMARC ? '已配置' : '未配置' }}</div>
              </div>
            </div>
          </div>

          <!-- 邮件签名 -->
          <div class="detail-section">
            <h5><i class="fas fa-pen"></i> 邮件签名</h5>
            <div class="signature-preview">
              <div class="signature-label">预览效果：</div>
              <div class="signature-content">
                <pre>{{ selectedEmailAccount.signature }}</pre>
              </div>
            </div>
            <textarea class="form-textarea signature-textarea" rows="6">{{ selectedEmailAccount.signature }}</textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showEmailDetailModal = false">关闭</button>
          <button class="btn btn-primary" @click="showEmailDetailModal = false">配置检测</button>
          <button class="btn btn-primary" @click="showEmailDetailModal = false; showToastMessage('配置已保存', 'success')">保存配置</button>
        </div>
      </div>
    </div>

    <!-- 企业微信弹窗 -->
    <div v-if="showWeChatModal" class="modal-overlay" @click.self="showWeChatModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fab fa-weixin"></i> 企业微信配置</div>
          <button class="modal-close" @click="showWeChatModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div v-if="!weChatAccount.connected" class="connect-prompt">
            <div class="connect-icon wechat"><i class="fab fa-weixin"></i></div>
            <h4>连接企业微信</h4>
            <p>绑定后可以自动发送消息、管理客户、查看员工跟进情况</p>
            <button class="btn btn-primary wechat-btn"><i class="fab fa-weixin"></i> 扫码绑定企业微信</button>
          </div>
          <div v-else class="wechat-connected">
            <div class="account-info-section">
              <div class="form-group">
                <label class="form-label">企业ID (CorpId)</label>
                <input type="text" class="form-input" v-model="weChatAccount.corpId" placeholder="企业微信企业ID">
              </div>
              <div class="form-group">
                <label class="form-label">应用AgentId</label>
                <input type="text" class="form-input" v-model="weChatAccount.agentId" placeholder="企业微信应用AgentId">
              </div>
            </div>
            <div class="wechat-stats">
              <div class="stat-item">
                <span class="stat-label">启用用户</span>
                <span class="stat-value">{{ weChatAccount.users }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">部门数量</span>
                <span class="stat-value">{{ weChatAccount.departments }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showWeChatModal = false">关闭</button>
          <button class="btn btn-primary" @click="showWeChatModal = false; showToastMessage('企业微信已绑定', 'success')">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

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

const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

const showProfileModal = ref(false)
const showPasswordModal = ref(false)
const showAvatarModal = ref(false)
const showLoginHistoryModal = ref(false)
const showModelModal = ref(false)
const showModelFineTuneModal = ref(false)
const showKnowledgeModal = ref(false)
const showDataSourceModal = ref(false)
const showDataSourceDetailModal = ref(false)
const showAddDataSourceModal = ref(false)
const showQuickSourceModal = ref(false)
const selectedQuickSource = ref(null)
const showEmailModal = ref(false)
const showEmailDetailModal = ref(false)
const showAddEmailModal = ref(false)
const showLinkedInModal = ref(false)
const showWeChatModal = ref(false)

// 登录历史数据
const loginHistory = ref([
  { id: 1, time: '2026-03-24 09:30', ip: '192.168.1.100', location: '上海', device: 'Chrome / Windows', status: '成功' },
  { id: 2, time: '2026-03-23 14:22', ip: '192.168.1.100', location: '上海', device: 'Chrome / Windows', status: '成功' },
  { id: 3, time: '2026-03-22 10:15', ip: '223.104.3.25', location: '北京', device: 'Safari / macOS', status: '成功' },
  { id: 4, time: '2026-03-21 16:45', ip: '192.168.1.100', location: '上海', device: 'Chrome / Windows', status: '成功' },
  { id: 5, time: '2026-03-20 11:30', ip: '117.136.89.123', location: '广州', device: '手机App / iOS', status: '成功' },
  { id: 6, time: '2026-03-19 08:00', ip: '192.168.1.100', location: '上海', device: 'Chrome / Windows', status: '成功' },
  { id: 7, time: '2026-03-18 09:45', ip: '61.135.169.125', location: '深圳', device: 'Firefox / Windows', status: '失败' },
  { id: 8, time: '2026-03-17 13:20', ip: '192.168.1.100', location: '上海', device: 'Chrome / Windows', status: '成功' }
])

// 数据源列表
const dataSources = ref([
  { id: 1, name: '海关数据', type: 'trade', enabled: true, lastSync: '2026-03-24 08:00', records: '2,456,789', recordsNum: 2456789, status: '正常', description: '全球海关进出口数据，实时更新', coverage: '200+国家', updateFreq: '每日', quality: 95 },
  { id: 2, name: 'LinkedIn', type: 'linkedin', enabled: true, lastSync: '2026-03-24 07:30', records: '89,432', recordsNum: 89432, status: '正常', description: 'LinkedIn企业主页和用户数据', coverage: '全球', updateFreq: '每日', quality: 88 },
  { id: 3, name: 'Google Maps', type: 'maps', enabled: true, lastSync: '2026-03-23 22:00', records: '567,890', recordsNum: 567890, status: '正常', description: '全球企业地址和位置数据', coverage: '全球', updateFreq: '每周', quality: 82 },
  { id: 4, name: '企业数据库', type: 'company', enabled: true, lastSync: '2026-03-24 06:00', records: '1,234,567', recordsNum: 1234567, status: '正常', description: '企业工商信息数据库', coverage: '中国', updateFreq: '每日', quality: 92 },
  { id: 5, name: '展会数据', type: 'exhibition', enabled: false, lastSync: '2026-03-15 18:00', records: '45,678', recordsNum: 45678, status: '已暂停', description: '全球展会参展商和采购商数据', coverage: '全球', updateFreq: '展会季', quality: 85 },
  { id: 6, name: '采购数据', type: 'procurement', enabled: true, lastSync: '2026-03-24 05:00', records: '345,678', recordsNum: 345678, status: '正常', description: '招标采购信息数据库', coverage: '中国', updateFreq: '每日', quality: 90 },
  { id: 7, name: '社交媒体', type: 'social', enabled: true, lastSync: '2026-03-24 04:00', records: '234,567', recordsNum: 234567, status: '正常', description: 'Facebook、Twitter等社交媒体数据', coverage: '全球', updateFreq: '每日', quality: 75 },
  { id: 8, name: '行业协会', type: 'association', enabled: false, lastSync: '2026-03-10 12:00', records: '23,456', recordsNum: 23456, status: '已暂停', description: '行业协会会员企业数据', coverage: '中国', updateFreq: '每月', quality: 80 }
])

// 选中的数据源详情
const selectedDataSource = ref(null)
const showDataSourceDetail = (source) => {
  selectedDataSource.value = source
  showDataSourceDetailModal.value = true
}

// 企业邮箱列表
const emailAccounts = ref([
  { id: 1, email: 'sales@company.com', name: '销售邮箱', signature: 'Best regards,\nZhang Manager\nSales Director', forward: true, autoReply: false, autoReplyContent: '', forwardTo: 'manager@company.com', lastSync: '2026-03-24 09:00', sendToday: 45, replyRate: 32, monthlyLimit: 5000, monthlyUsed: 1280,SPF: true, DKIM: true, DMARC: true, smtp: { host: 'smtp.company.com', port: 587, encryption: 'TLS' }, imap: { host: 'imap.company.com', port: 993, encryption: 'SSL' } },
  { id: 2, email: 'marketing@company.com', name: '市场邮箱', signature: 'Thanks,\nMarketing Team', forward: true, autoReply: true, autoReplyContent: '感谢您的邮件，我们将在工作时间内尽快回复。', forwardTo: 'sales@company.com', lastSync: '2026-03-24 08:30', sendToday: 128, replyRate: 18, monthlyLimit: 10000, monthlyUsed: 3560,SPF: true, DKIM: true, DMARC: true, smtp: { host: 'smtp.company.com', port: 587, encryption: 'TLS' }, imap: { host: 'imap.company.com', port: 993, encryption: 'SSL' } }
])

// 选中的邮箱详情
const selectedEmailAccount = ref(null)

// LinkedIn账号
const linkedInAccount = ref({
  connected: false,
  email: '',
  companyPage: '',
  connections: 0,
  messages: 0,
  searchLimit: 100
})

// 企业微信
const weChatAccount = ref({
  connected: false,
  corpId: '',
  agentId: '',
  users: 0,
  departments: 0
})

const settings = reactive({
  twoFactor: false,
  autoLearn: true,
  autoEvolve: true,
  personalizeLevel: 'high',
  lookalike: true,
  decisionMaker: true,
  websiteAnalysis: true,
  emailNotify: true,
  replyNotify: true,
  riskNotify: true,
  weeklyReport: true
})

const channels = reactive({
  email: { connected: true, accounts: 2 },
  whatsapp: { connected: true, phone: '+86 138****8888' },
  linkedin: { connected: false, connections: 0 },
  wechat: { connected: false }
})

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

const saveAllSettings = () => {
  showToastMessage('设置已保存', 'success')
}

const resetAllSettings = () => {
  showToastMessage('设置已重置为默认值', 'success')
}
</script>

<style scoped>
/* Modal Styles */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: var(--bg-card); border-radius: 16px; width: 90%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
.modal.wide { max-width: 700px; }
.modal.extra-wide { max-width: 1000px; }

.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.modal-title i { color: var(--primary); }
.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(--danger); color: white; }
.modal-body { flex: 1; overflow-y: auto; padding: 24px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--border); }

.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; color: var(--text-primary); }
.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-textarea { resize: vertical; min-height: 80px; }

.password-hint { font-size: 12px; color: var(--text-muted); padding: 12px; background: var(--bg-hover); border-radius: 8px; display: flex; align-items: center; gap: 8px; }
.password-hint i { color: var(--primary); }

/* Login History Modal */
.login-history-list { display: flex; flex-direction: column; gap: 12px; }
.login-history-item { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.login-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.login-icon.成功 { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.login-icon.失败 { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.login-info { flex: 1; }
.login-time { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.login-details { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.login-details span { display: flex; align-items: center; gap: 4px; }
.login-status { font-size: 12px; padding: 4px 10px; border-radius: 10px; }
.login-status.成功 { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.login-status.失败 { background: rgba(239, 68, 68, 0.2); color: var(--danger); }

/* Model Fine Tune Modal */
.model-info-card { padding: 20px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border-radius: 12px; margin-bottom: 20px; }
.model-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.model-icon { width: 48px; height: 48px; background: var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; }
.model-title h4 { font-size: 16px; margin-bottom: 4px; }
.model-status { font-size: 11px; padding: 2px 8px; background: var(--success); color: white; border-radius: 10px; }
.model-stats { display: flex; gap: 24px; }
.model-stat { display: flex; flex-direction: column; }
.model-stat .stat-label { font-size: 11px; color: var(--text-muted); }
.model-stat .stat-value { font-size: 14px; font-weight: 600; }

.fine-tune-section { padding: 16px; background: var(--bg-hover); border-radius: 10px; }
.fine-tune-section h5 { font-size: 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.fine-tune-section h5 i { color: var(--primary); }

/* Data Source Modal */
.data-source-list { display: flex; flex-direction: column; gap: 10px; }
.data-source-item { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--bg-hover); border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.data-source-item:hover { background: rgba(99, 102, 241, 0.1); }
.source-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.source-icon.trade { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.source-icon.linkedin { background: rgba(10, 102, 194, 0.2); color: #0A66C2; }
.source-icon.maps { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.source-icon.company { background: rgba(139, 92, 246, 0.2); color: var(--secondary); }
.source-icon.exhibition { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.source-icon.procurement { background: rgba(6, 182, 212, 0.2); color: var(--info); }
.source-icon.social { background: rgba(236, 72, 153, 0.2); color: #EC4899; }
.source-icon.association { background: rgba(107, 114, 128, 0.2); color: var(--text-muted); }
.source-info { flex: 1; }
.source-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.source-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.source-meta i { margin-right: 4px; }
.source-desc { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.source-status i { margin-right: 4px; }

/* Overview Cards */
.sources-overview, .email-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.overview-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--bg-hover); border-radius: 12px; }
.overview-icon { width: 48px; height: 48px; background: rgba(99, 102, 241, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--primary); }
.overview-icon.email { background: rgba(99, 102, 241, 0.2); }
.overview-info { flex: 1; }
.overview-value { font-size: 22px; font-weight: 700; }
.overview-label { font-size: 12px; color: var(--text-muted); }

/* Quick Source Grid */
.foreign-trade-section { margin-top: 24px; padding: 20px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05)); border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.1); }
.foreign-trade-section h4 { font-size: 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.foreign-trade-section h4 i { color: var(--primary); }
.quick-source-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.quick-source-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; background: var(--bg-card); border-radius: 10px; text-align: center; }
.quick-source-card i { font-size: 24px; color: var(--primary); }
.quick-source-card span { font-size: 12px; font-weight: 500; }
.quick-source-card .btn { margin-top: auto; }

/* Add Data Source & Quick Source Modal */
.required { color: var(--danger); margin-left: 4px; }
.test-connection { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.test-connection .btn { width: 100%; justify-content: center; }

.quick-config-section { margin-bottom: 20px; padding: 16px; background: var(--bg-hover); border-radius: 10px; }
.quick-config-section h5 { font-size: 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.quick-config-section h5 i { color: var(--primary); }

.checkbox-group { display: flex; flex-wrap: wrap; gap: 12px; }
.checkbox-item { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.checkbox-item input { width: 16px; height: 16px; }

/* Email Tab Content */
.email-tab-content { padding: 16px 0; }
.stats-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stat-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--bg-hover); border-radius: 12px; }
.stat-card .stat-icon { width: 44px; height: 44px; background: rgba(99, 102, 241, 0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 18px; }
.stat-card .stat-info { flex: 1; }
.stat-card .stat-value { font-size: 22px; font-weight: 700; }
.stat-card .stat-label { font-size: 12px; color: var(--text-muted); }

.chart-section, .top-performers { margin-top: 20px; }
.chart-section h5, .top-performers h5 { font-size: 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.chart-section h5 i, .top-performers h5 i { color: var(--primary); }

.simple-chart { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding: 20px; background: var(--bg-hover); border-radius: 12px; }
.chart-bar { flex: 1; background: linear-gradient(to top, var(--primary), var(--secondary)); border-radius: 6px 6px 0 0; position: relative; min-height: 20px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.chart-bar span { font-size: 11px; color: var(--text-muted); position: absolute; bottom: -24px; }

.template-list { display: flex; flex-direction: column; gap: 10px; }
.template-item { display: flex; justify-content: space-between; align-items: center; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.template-name { font-size: 14px; font-weight: 500; }
.template-stats { font-size: 12px; color: var(--text-muted); }

/* Domain Config */
.domain-config-section { margin-bottom: 20px; }
.domain-config-section h5 { font-size: 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.domain-config-section h5 i { color: var(--primary); }

.domain-list { display: flex; flex-direction: column; gap: 10px; }
.domain-item { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.domain-icon { width: 44px; height: 44px; background: rgba(99, 102, 241, 0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 18px; }
.domain-info { flex: 1; }
.domain-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.domain-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.domain-status { display: inline-flex; align-items: center; gap: 4px; }
.domain-status.active { color: var(--success); }

.config-guide { display: flex; flex-direction: column; gap: 14px; }
.guide-step { display: flex; gap: 14px; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.step-num { width: 28px; height: 28px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.step-content { flex: 1; }
.step-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.step-desc { font-size: 12px; color: var(--text-muted); }

/* Security */
.security-overview { margin-bottom: 20px; }
.security-card { padding: 24px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(99, 102, 241, 0.1)); border-radius: 12px; text-align: center; }
.security-header { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; font-size: 14px; color: var(--text-secondary); }
.security-header i { color: var(--success); }
.security-score { font-size: 36px; font-weight: 700; color: var(--success); margin-bottom: 8px; }
.security-desc { font-size: 13px; color: var(--text-muted); }

.security-section { margin-bottom: 20px; }
.security-section h5 { font-size: 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.security-section h5 i { color: var(--primary); }

.security-list { display: flex; flex-direction: column; gap: 10px; }
.security-item { display: flex; justify-content: space-between; align-items: center; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.security-item-info { display: flex; flex-direction: column; }
.security-item-title { font-size: 14px; font-weight: 500; }
.security-item-desc { font-size: 12px; color: var(--text-muted); }

.security-logs { display: flex; flex-direction: column; gap: 8px; }
.log-item { display: flex; align-items: center; gap: 16px; padding: 10px; background: var(--bg-hover); border-radius: 8px; font-size: 12px; }
.log-item .log-time { color: var(--text-muted); min-width: 120px; }
.log-item .log-event { flex: 1; }
.log-item .log-status { padding: 2px 8px; border-radius: 10px; }
.log-status.success { background: rgba(16, 185, 129, 0.2); color: var(--success); }

/* Email Enhanced */
.email-account-item.selected { border: 2px solid var(--primary); background: rgba(99, 102, 241, 0.05); }
.account-auth { display: flex; flex-direction: column; gap: 4px; }
.auth-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 6px; background: var(--bg-dark); border-radius: 4px; color: var(--text-muted); }
.auth-badge.active { background: rgba(16, 185, 129, 0.2); color: var(--success); }

.detail-tabs { display: flex; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.detail-tab { padding: 8px 14px; background: transparent; border: none; color: var(--text-secondary); font-size: 12px; cursor: pointer; border-radius: 8px; }
.detail-tab:hover { background: var(--bg-hover); }
.detail-tab.active { background: var(--primary); color: white; }

.config-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.config-card { background: var(--bg-card); border-radius: 10px; overflow: hidden; }
.config-card-header { padding: 12px 16px; background: var(--bg-hover); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.config-card-body { padding: 16px; }
.config-card-body .config-row { background: var(--bg-hover); padding: 10px; border-radius: 6px; margin-bottom: 8px; }
.config-card-body .config-row:last-child { margin-bottom: 0; }

.auth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.auth-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg-card); border-radius: 10px; border: 1px solid var(--border); }
.auth-card.pass { border-color: rgba(16, 185, 129, 0.3); }
.auth-card.fail { border-color: rgba(239, 68, 68, 0.3); }
.auth-card .auth-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.auth-card.pass .auth-icon { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.auth-card.fail .auth-icon { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.auth-card .auth-info { flex: 1; }
.auth-card .auth-name { font-size: 14px; font-weight: 600; }
.auth-card .auth-desc { font-size: 11px; color: var(--text-muted); }
.auth-card .auth-status { font-size: 11px; padding: 3px 8px; border-radius: 10px; }
.auth-card.pass .auth-status { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.auth-card.fail .auth-status { background: rgba(239, 68, 68, 0.2); color: var(--danger); }

.config-row-flex { display: flex; gap: 24px; margin-bottom: 16px; }
.config-row-flex .config-item { flex: 1; }

.signature-preview { margin-bottom: 12px; padding: 16px; background: var(--bg-card); border-radius: 10px; border-left: 4px solid var(--primary); }
.signature-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.signature-content pre { font-size: 12px; white-space: pre-wrap; font-family: inherit; margin: 0; }
.usage-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }

/* Email Modal */
.email-accounts-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.email-account-item { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--bg-hover); border-radius: 10px; }
.account-icon { width: 44px; height: 44px; background: rgba(99, 102, 241, 0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 18px; }
.account-info { flex: 1; }
.account-email { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.account-name { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.account-stats { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); }
.add-account-btn { width: 100%; }

/* LinkedIn & WeChat Modal */
.connect-prompt { text-align: center; padding: 40px 20px; }
.connect-icon { width: 80px; height: 80px; background: rgba(10, 102, 194, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 36px; color: #0A66C2; }
.connect-icon.wechat { background: rgba(7, 193, 96, 0.2); color: #07C160; }
.connect-prompt h4 { font-size: 18px; margin-bottom: 10px; }
.connect-prompt p { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.wechat-btn { background: #07C160; }

.linkedin-connected, .wechat-connected { padding: 20px; background: var(--bg-hover); border-radius: 12px; }
.linkedin-stats, .wechat-stats { display: flex; gap: 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.stat-item { display: flex; flex-direction: column; align-items: center; flex: 1; }
.stat-item .stat-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.stat-item .stat-value { font-size: 18px; font-weight: 600; }

/* Data Source Detail Modal */
.source-detail-header { margin-bottom: 20px; }
.source-detail-status { margin-bottom: 10px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 13px; }
.status-badge.active { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.status-badge.inactive { background: rgba(107, 114, 128, 0.2); color: var(--text-muted); }
.source-description { font-size: 13px; color: var(--text-muted); }

.source-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.source-stat-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg-hover); border-radius: 10px; }
.source-stat-card .stat-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); font-size: 16px; }
.source-stat-card .stat-info { flex: 1; }
.source-stat-card .stat-value { font-size: 16px; font-weight: 600; }
.source-stat-card .stat-label { font-size: 11px; color: var(--text-muted); }

.detail-section { margin-bottom: 20px; }
.detail-section h5 { font-size: 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.detail-section h5 i { color: var(--primary); }

.config-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.config-item { display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
.config-item label { font-size: 12px; color: var(--text-muted); }
.config-item .form-select { padding: 8px 12px; font-size: 12px; }

.fields-list { display: flex; flex-direction: column; gap: 8px; }
.field-item { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--bg-hover); border-radius: 8px; font-size: 13px; }
.field-name { color: var(--primary); font-weight: 500; }
.field-item i { color: var(--text-muted); }
.field-target { color: var(--text-secondary); font-family: monospace; }

.sync-logs { display: flex; flex-direction: column; gap: 8px; }
.sync-log-item { display: flex; align-items: center; gap: 16px; padding: 10px; background: var(--bg-hover); border-radius: 8px; font-size: 12px; }
.log-time { color: var(--text-muted); min-width: 140px; }
.log-status { padding: 2px 8px; border-radius: 10px; }
.log-status.success { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.log-count { color: var(--text-secondary); }

/* Email Modal Enhanced */
.email-tabs { display: flex; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.email-tab { padding: 8px 16px; background: transparent; border: none; color: var(--text-secondary); font-size: 13px; cursor: pointer; border-radius: 8px; }
.email-tab:hover { background: var(--bg-hover); }
.email-tab.active { background: var(--primary); color: white; }

.account-usage { display: flex; flex-direction: column; gap: 4px; min-width: 100px; }
.usage-bar { height: 6px; background: var(--bg-dark); border-radius: 3px; overflow: hidden; }
.usage-fill { height: 100%; background: var(--primary); border-radius: 3px; }
.usage-text { font-size: 10px; color: var(--text-muted); text-align: right; }

.email-detail-panel { margin-top: 20px; padding: 20px; background: var(--bg-hover); border-radius: 12px; }
.email-detail-panel .detail-header { margin-bottom: 16px; }
.email-detail-panel .detail-header h4 { font-size: 14px; display: flex; align-items: center; gap: 8px; }

.config-table { display: flex; flex-direction: column; gap: 8px; }
.config-row { display: flex; justify-content: space-between; padding: 10px; background: var(--bg-card); border-radius: 8px; font-size: 12px; }
.config-label { color: var(--text-muted); }
.config-value { font-weight: 500; }

.auth-status-grid { display: flex; gap: 12px; }
.auth-status-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg-card); border-radius: 8px; font-size: 12px; }
.auth-status-item.active { color: var(--success); }
.auth-status-item.inactive { color: var(--danger); }
.auth-status-item i { font-size: 16px; }

.auto-reply-config { display: flex; flex-direction: column; gap: 12px; }
.auto-reply-config .config-item { flex-direction: row; align-items: center; justify-content: space-between; }
.auto-reply-config textarea { min-height: 60px; }

.signature-textarea { font-family: monospace; font-size: 12px; }

.toggle-switch { width: 44px; height: 24px; background: var(--bg-dark); border-radius: 12px; position: relative; cursor: pointer; transition: all 0.2s; }
.toggle-switch.active { background: var(--primary); }
.toggle-slider { width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: all 0.2s; }
.toggle-switch.active .toggle-slider { left: 22px; }

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

.settings-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: 12px;
}

/* Settings Grid */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.settings-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Settings Section */
.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
}

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

.section-title h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
}

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

/* Settings List */
.settings-list {
  padding: 8px;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}

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

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

.item-content {
  flex: 1;
  min-width: 0;
}

.item-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

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

.item-action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

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

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

.item-value.warning {
  color: var(--warning);
}

.item-action i {
  color: var(--text-muted);
  font-size: 12px;
}

/* Profile Card */
.profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  margin: 8px;
  background: var(--bg-hover);
  border-radius: 12px;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  background: var(--gradient-1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: white;
  position: relative;
}

.avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: var(--primary);
  border: 2px solid var(--bg-hover);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  cursor: pointer;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}

.profile-role {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.profile-email {
  font-size: 12px;
  color: var(--text-muted);
}

/* Toggle Switch */
.toggle-switch {
  width: 44px;
  height: 24px;
  background: var(--bg-dark);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.toggle-switch.active {
  background: var(--primary);
}
.toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-switch.active .toggle-slider {
  transform: translateX(20px);
}

/* Global Toggle Fix - Override inline styles */
.settings-item .toggle-switch,
.channel-item .toggle-switch,
.item-action .toggle-switch,
.settings-modal .toggle-switch,
.modal .toggle-switch,
.detail-section .toggle-switch,
.config-item .toggle-switch,
.auto-reply-config .toggle-switch { 
  margin-left: auto; 
  background: var(--bg-dark) !important;
}

.settings-item .toggle-switch.active,
.channel-item .toggle-switch.active,
.item-action .toggle-switch.active,
.settings-modal .toggle-switch.active,
.modal .toggle-switch.active,
.detail-section .toggle-switch.active,
.config-item .toggle-switch.active,
.auto-reply-config .toggle-switch.active {
  background: var(--primary) !important;
}

/* Mini Select */
.mini-select {
  padding: 6px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}

.mini-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Channel List */
.channel-list {
  padding: 8px;
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
  background: var(--bg-dark);
  transition: all 0.2s;
}

.channel-item:last-child {
  margin-bottom: 0;
}

.channel-item.connected {
  border-color: rgba(16, 185, 129, 0.3);
}

.channel-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.channel-content {
  flex: 1;
}

.channel-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

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

.channel-action {
  flex-shrink: 0;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

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

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

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

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

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

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

/* Responsive */
@media (max-width: 1200px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .settings-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-actions {
    width: 100%;
  }
  
  .header-actions .btn {
    flex: 1;
  }
}
</style>
