web-fusion/src/pages/ConfigPage.vue

<template>
    <div class="min-h-screen overflow-auto bg-gradient-to-br from-slate-100 to-slate-200 p-6">
        <div class="max-w-5xl mx-auto pb-8">
            <!-- 白色卡片容器 -->
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <!-- 顶部标题栏 -->
                <div class="flex items-end justify-between mb-4">
                    <div>
                        <h1 class="text-2xl font-semibold text-gray-900">自动私信工作台</h1>
                        <p class="text-sm text-gray-500 mt-1">
                            配置账号 · 设置 AI 回复策略 · 一键运行任务
                        </p>
                    </div>
                    <div class="flex items-center gap-3">
                        <span :class="[
                            'px-3 py-1 rounded-full text-xs font-medium',
                            aiConfigured ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
                        ]">
                            AI 人设：{{ aiConfigured ? '已配置' : '未配置' }}
                        </span>
                        <span v-if="expireTime"
                            class="text-xs text-gray-600 bg-orange-50 px-3 py-1 rounded-full border border-orange-200">
                            到期时间：{{ expireTime }}
                        </span>
                        <span class="text-xs text-gray-500 bg-gray-100 px-3 py-1 rounded-full">
                            {{ currentTime }}
                        </span>
                        <!-- 分隔线 -->
                        <span class="w-px h-6 bg-gray-200" />
                        <!-- 退出登录 -->
                        <button @click="emit('logout')"
                            class="px-3 py-1.5 text-xs text-red-600 bg-red-50 hover:bg-red-100 border border-red-200 rounded-lg transition-colors">
                            退出登录
                        </button>
                        <!-- 打开浏览器 -->
                        <button @click="emit('goToBrowser')"
                            class="px-4 py-2 text-sm bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-lg hover:from-blue-600 hover:to-cyan-600 transition-all shadow-sm flex items-center gap-2">
                            <span>打开浏览器</span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 7l5 5m0 0l-5 5m5-5H6" />
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- 提示条 -->
                <div
                    class="flex items-center gap-2 mb-6 px-4 py-2 rounded-full text-sm text-gray-700 bg-gradient-to-r from-blue-50 to-green-50 border border-blue-200 w-fit">
                    <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
                    建议：最多配置 3 个账号轮询发送，开启 AI 自动回复可提升转化率。
                </div>

                <div class="grid grid-cols-3 gap-6">
                    <!-- 左侧：运行配置 -->
                    <div class="col-span-2">
                        <div
                            class="bg-gradient-to-b from-white to-gray-50 rounded-xl border border-gray-200 shadow-sm p-6">
                            <!-- 卡片头部 -->
                            <div class="flex items-center justify-between mb-6">
                                <div class="flex items-center gap-2">
                                    <span
                                        class="w-1 h-4 rounded-full bg-gradient-to-b from-blue-500 to-green-500" />
                                    <span class="font-medium text-gray-900">运行配置</span>
                                </div>

                                <div v-if="!isRunning" class="relative group">
                                    <button @click="handleStart()"
                                        class="flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-400 hover:to-blue-500 transition-all shadow-sm">
                                        <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
                                        开始运行
                                        <!-- 下拉箭头 -->
                                        <svg class="w-4 h-4 ml-1 opacity-80" fill="none" viewBox="0 0 24 24"
                                            stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </button>

                                    <!-- 下拉菜单 -->
                                    <div class="absolute top-full right-0 pt-2 w-40 hidden group-hover:block z-20">
                                        <div
                                            class="bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden transform transition-all duration-200 origin-top-right">
                                            <div class="py-1">
                                                <button v-for="(group, index) in visibleGroups" :key="index"
                                                    @click="handleStart(config.accountGroups.indexOf(group))"
                                                    class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors flex items-center justify-between group/item">
                                                    <span>运行 {{ group.name }}</span>
                                                    <span
                                                        class="text-xs text-gray-400 group-hover/item:text-blue-400">
                                                        {{ config.accountGroups.indexOf(group) + 1 }}
                                                    </span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button v-else @click="handleStop"
                                    class="flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium bg-gradient-to-r from-red-500 to-red-600 text-white hover:from-red-400 hover:to-red-500 transition-all shadow-sm">
                                    <span class="w-2 h-2 rounded-full bg-white animate-pulse" />
                                    停止运行
                                </button>
                            </div>

                            <!-- 账号组 -->
                            <div class="space-y-4">
                                <label class="text-sm font-medium text-gray-700">账号组（最多3组）</label>

                                <div v-for="(group, gIndex) in visibleGroups" :key="gIndex" :class="[
                                    'rounded-lg p-4 border-2 transition-all duration-300',
                                    isGroupActive(group) ? 'bg-blue-50 border-blue-400 shadow-md' : hasRunningAccounts(group) ? 'bg-gray-50 border-gray-300' : 'bg-gray-50 border-gray-200'
                                ]">
                                    <div class="flex items-center justify-between mb-3">
                                        <span class="text-sm font-medium text-gray-800 flex items-center gap-2">
                                            <input type="text" :value="getGroupName(group, gIndex)"
                                                @input="updateGroupName($event.target.value, gIndex)"
                                                :placeholder="`第${gIndex + 1}组`"
                                                class="w-24 px-2 py-1 text-sm text-gray-900 font-medium border border-gray-300 rounded bg-white hover:border-blue-400 focus:border-blue-500 focus:outline-none" />
                                            <span v-if="isRunning && currentGroupIndex === gIndex"
                                                class="px-2 py-0.5 rounded text-xs bg-green-500 text-white">
                                                运行中
                                            </span>
                                            <!-- 运行模式标签 -->
                                            <span v-if="getGroupMode(group)"
                                                :class="['px-2 py-0.5 rounded text-xs', getGroupMode(group) === 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-200 text-gray-600']">
                                                {{ getGroupMode(group) === 'active' ? '全功能' : '仅回复' }}
                                            </span>
                                            <!-- 活跃组标记 + 运行时间 -->
                                            <span v-if="isGroupActive(group)"
                                                class="px-2 py-0.5 rounded text-xs bg-blue-100 text-blue-700 flex items-center gap-1">
                                                活跃
                                                <span class="font-mono">{{ elapsedTime }}</span>
                                            </span>
                                        </span>
                                        <button @click="addAccount(gIndex)" :disabled="group.accounts.length >= 3"
                                            class="text-xs text-blue-600 hover:text-blue-700 disabled:opacity-50">
                                            新增账号
                                        </button>
                                    </div>

                                    <div v-for="(acc, aIndex) in group.accounts" :key="aIndex"
                                        class="flex items-center gap-2 mb-2 p-2 rounded-lg bg-white border border-gray-200">
                                        <input type="email" placeholder="邮箱" :value="acc.email"
                                            @input="updateAccount(gIndex, aIndex, 'email', $event.target.value)"
                                            class="flex-1 px-3 py-2 text-sm text-gray-900 rounded-lg border border-gray-300 focus:border-blue-500 focus:outline-none" />
                                        <div class="flex-1 relative">
                                            <input :type="showPasswordMap[`${gIndex}-${aIndex}`] ? 'text' : 'password'"
                                                placeholder="密码" :value="acc.pwd"
                                                @input="updateAccount(gIndex, aIndex, 'pwd', $event.target.value)"
                                                class="w-full px-3 py-2 text-sm text-gray-900 rounded-lg border border-gray-300 focus:border-blue-500 focus:outline-none pr-10" />
                                            <button @click="togglePasswordVisibility(gIndex, aIndex)"
                                                class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none p-1">
                                                <svg v-if="showPasswordMap[`${gIndex}-${aIndex}`]" class="w-4 h-4"
                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                                </svg>
                                                <svg v-else class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                                                    stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                                                </svg>
                                            </button>
                                        </div>
                                        <!-- 账号运行状态 -->
                                        <span v-if="getAccountStatus(gIndex, aIndex)"
                                            :class="['px-2 py-1 rounded text-xs font-medium whitespace-nowrap', getAccountStatus(gIndex, aIndex).mode === 'active' ? 'bg-emerald-50 text-emerald-600' : 'bg-gray-100 text-gray-500']">
                                            视图{{ getAccountViewId(gIndex, aIndex) }}
                                        </span>
                                        <button @click="removeAccount(gIndex, aIndex)"
                                            :disabled="group.accounts.length === 1"
                                            class="text-xs text-red-500 hover:text-red-600 disabled:opacity-50 px-2">
                                            删除
                                        </button>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-2">每组最多 3 个账号，将按组轮换运行</p>
                                </div>
                            </div>

                            <!-- 轮换设置 -->
                            <div class="mt-6 space-y-4">

                                  <div class="flex items-center gap-4">
                                        <label class="text-sm font-medium text-gray-700 w-28">国家语言</label>
                                        <select :value="config.lang || 'en'"
                                            @change="updateConfig('lang', $event.target.value)"
                                            class="flex-1 px-3 py-2 text-sm text-gray-900 rounded-lg border border-gray-300 focus:border-blue-500 focus:outline-none bg-white">
                                            <option v-for="lang in languageList" :key="lang.code" :value="lang.code">
                                                {{ lang.name }} ({{ lang.code }})
                                            </option>
                                        </select>
                                    </div>
                                <div class="flex items-center gap-4">
                                    <label class="text-sm font-medium text-gray-700 w-28">轮换账号组</label>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" :checked="config.rotateEnabled"
                                            @change="updateConfig('rotateEnabled', $event.target.checked)"
                                            class="sr-only peer" />
                                        <div
                                            class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500">
                                        </div>
                                    </label>
                                    <span class="text-xs text-gray-500">关闭时只跑当前组不切换</span>
                                </div>

                                <template v-if="config.rotateEnabled">
                                    <div class="flex items-center gap-4">
                                        <label class="text-sm font-medium text-gray-700 w-28">账号组数量</label>
                                        <div class="flex gap-4">
                                            <label v-for="num in [2, 3]" :key="num"
                                                class="flex items-center gap-2 cursor-pointer">
                                                <input type="radio" :checked="config.groupCount === num"
                                                    @change="updateConfig('groupCount', num)"
                                                    class="w-4 h-4 text-blue-500" />
                                                <span class="text-sm text-gray-700">{{ num }}组</span>
                                            </label>
                                        </div>
                                    </div>
                                  
                                    <div class="flex items-center gap-4">
                                        <label class="text-sm font-medium text-gray-700 w-28">轮换间隔(分钟)</label>
                                        <input type="number" min="1"
                                            :value="config.switchMinutes === 0 ? '' : config.switchMinutes"
                                            @input="handleNumberInput('switchMinutes', $event.target.value)"
                                            @blur="handleNumberBlur('switchMinutes', $event.target.value, 1)"
                                            class="w-20 px-3 py-2 text-sm text-gray-900 rounded-lg border border-gray-300 focus:border-blue-500 focus:outline-none" />
                                        <span class="text-xs text-gray-500">每隔 N 分钟切换到下一组</span>
                                    </div>
                                </template>

                                <!-- AI 回复 -->
                                <div class="flex items-center gap-4">
                                    <label class="text-sm font-medium text-gray-700 w-28">AI 自动回复</label>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" :checked="config.aiReply"
                                            @change="updateConfig('aiReply', $event.target.checked)"
                                            class="sr-only peer" />
                                        <div
                                            class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500">
                                        </div>
                                    </label>
                                    <span class="text-xs text-gray-500">开启后由 AI 自动根据对话内容生成回复</span>
                                </div>

                                <!-- 第一条消息 -->
                                <div class="flex items-center gap-4">
                                    <label class="text-sm font-medium text-gray-700 w-28">第一条消息</label>
                                    <div class="flex gap-4">
                                        <label class="flex items-center gap-2 cursor-pointer">
                                            <input type="radio" :checked="config.sendInviteFirst === false"
                                                @change="updateConfig('sendInviteFirst', false)"
                                                class="w-4 h-4 text-blue-500" />
                                            <span class="text-sm text-gray-700">打招呼</span>
                                        </label>
                                        <label class="flex items-center gap-2 cursor-pointer">
                                            <input type="radio" :checked="config.sendInviteFirst === true"
                                                @change="updateConfig('sendInviteFirst', true)"
                                                class="w-4 h-4 text-blue-500" />
                                            <span class="text-sm text-gray-700">发送邀请链接</span>
                                        </label>
                                    </div>
                                </div>

                                <!-- 睡眠时间 -->
                                <div class="flex items-center gap-4">
                                    <label class="text-sm font-medium text-gray-700 w-28">睡眠时间(秒)</label>
                                    <input type="number" min="0" placeholder="0"
                                        :value="config.sleepTime < 0 ? '' : config.sleepTime"
                                        @input="handleSleepTimeInput($event.target.value)"
                                        class="w-20 px-3 py-2 text-sm text-gray-900 rounded-lg border border-gray-300 focus:border-blue-500 focus:outline-none" />
                                </div>

                                <!-- 邀请阈值 -->
                                <div v-if="!config.sendInviteFirst" class="flex items-center gap-4">
                                    <label class="text-sm font-medium text-gray-700 w-28">链接发送时机</label>
                                    <input type="number" min="1"
                                        :value="config.inviteThreshold === 0 ? '' : config.inviteThreshold"
                                        @input="handleNumberInput('inviteThreshold', $event.target.value)"
                                        @blur="handleNumberBlur('inviteThreshold', $event.target.value, 1)"
                                        class="w-20 px-3 py-2 text-sm text-gray-900 rounded-lg border border-gray-300 focus:border-blue-500 focus:outline-none" />
                                    <span class="text-xs text-gray-500">打招呼后回复 N 句再发送邀请链接</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧：快捷操作 -->
                    <div class="col-span-1">
                        <div
                            class="bg-gradient-to-b from-white to-gray-50 rounded-xl border border-gray-200 shadow-sm p-6">
                            <div class="flex items-center gap-2 mb-6">
                                <span class="w-1 h-4 rounded-full bg-gradient-to-b from-blue-500 to-green-500" />
                                <span class="font-medium text-gray-900">快捷操作</span>
                            </div>

                            <div class="space-y-2">
                                <button @click="showHostDialog = true"
                                    class="w-full text-left px-4 py-3 text-sm text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
                                    执行主播库
                                </button>
                                <button @click="showGreetingDialog = true"
                                    class="w-full text-left px-4 py-3 text-sm text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
                                    打招呼内容配置
                                </button>
                                <button @click="showAIDialog = true"
                                    class="w-full text-left px-4 py-3 text-sm text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
                                    配置 / 修改 AI 人设
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- AI 配置弹窗 -->
        <AIConfigDialog :visible="showAIDialog" :config="aiConfig" @close="showAIDialog = false"
            @save="handleSaveAIConfig" @change="(key, value) => aiConfig[key] = value" />

        <!-- 主播列表弹窗 -->
        <HostListDialog :visible="showHostDialog" @close="showHostDialog = false" @save="() => { }" />

        <!-- 打招呼内容弹窗 -->
        <GreetingDialog :visible="showGreetingDialog" @close="showGreetingDialog = false" @confirm="handleGreetingConfirm" />
    
    <!-- 预热 Loading 遮罩 -->
        <transition name="fade">
            <div v-if="warmingUp"
                class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/30 backdrop-blur-sm">
                <div
                    class="bg-white/90 rounded-2xl shadow-2xl border border-white/60 px-6 py-5 flex items-center gap-4">
                    <!-- spinner -->
                    <div class="w-10 h-10 rounded-full border-4 border-gray-200 border-t-blue-500 animate-spin"></div>

                    <div class="space-y-1">
                        <div class="text-sm font-semibold text-gray-900">正在预热视图</div>
                        <div class="text-xs text-gray-500">
                            这会提升后台视图渲染稳定性，请稍候…
                        </div>

                        <!-- 可选：进度小点点动画 -->
                        <div class="flex gap-1 pt-1">
                            <span
                                class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-bounce [animation-delay:-0.2s]"></span>
                            <span
                                class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-bounce [animation-delay:-0.1s]"></span>
                            <span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-bounce"></span>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import HostListDialog from '../components/HostListDialog.vue'
import GreetingDialog from '../components/GreetingDialog.vue'
import AIConfigDialog from '../components/AIConfigDialog.vue'
import { isElectron } from '../utils/electronBridge'

const emit = defineEmits(['goToBrowser', 'logout'])

const CONFIG_KEY = 'autoDm_runConfig'

// Default Config
const defaultConfig = {
    rotateEnabled: false,
    groupCount: 1,
    accountGroups: [
        { name: '第1组', accounts: [{ email: '', pwd: '' }] },
        { name: '第2组', accounts: [{ email: '', pwd: '' }] },
        { name: '第3组', accounts: [{ email: '', pwd: '' }] },
    ],
    aiReply: true,
    sendInviteFirst: false,
    sleepTime: 30,
    inviteThreshold: 3,
    switchMinutes: 60,
    prologueList: {},
    needTranslate: false,
    maxAnchorCount: 100,
    lang: 'en'
}

// Language List
const languageList = [
    { name: '中文 (简体)', code: 'zh-CN' },
    { name: 'English', code: 'en' },
    { name: 'ภาษาไทย', code: 'th-TH' },
    { name: 'العربية', code: 'ar' },
    { name: 'Bahasa Indonesia', code: 'id-ID' },
    { name: 'Русский', code: 'ru-RU' },
    { name: 'Tiếng Việt', code: 'vi-VN' },
    { name: 'Bahasa Melayu', code: 'ms-MY' },
    { name: '日本語', code: 'ja-JP' },
    { name: 'Türkçe', code: 'tr-TR' },
    { name: 'Português', code: 'pt-PT' },
    { name: '한국어', code: 'ko-KR' },
    { name: 'Español', code: 'es-ES' },
    { name: '中文 (繁體)', code: 'zh-Hant-TW' },
    { name: 'Deutsch', code: 'de-DE' },
    { name: 'Italiano', code: 'it-IT' },
    { name: 'Français', code: 'fr-FR' },
    { name: 'Română', code: 'ro-RO' },
    { name: 'Polski', code: 'pl-PL' },
    { name: 'Nederlands', code: 'nl-NL' },
    { name: 'Svenska', code: 'sv-SE' },
]

// State
const config = ref(JSON.parse(JSON.stringify(defaultConfig)))
const aiConfig = ref({
    agentName: '',
    guildName: '',
    contactTool: '',
    contact: '',
})
const isRunning = ref(false)
const currentGroupIndex = ref(0)
const showAIDialog = ref(false)
const showHostDialog = ref(false)
const showGreetingDialog = ref(false)
const aiConfigured = ref(false)
const configLoaded = ref(false)
const rotationStatus = ref(null)
const elapsedTime = ref('00:00')
const expireTime = ref('')
const currentTime = ref('')
const showPasswordMap = ref({})

const isElectronEnv = isElectron()
let timeInterval = null
let rotationTimer = null
let saveTimer = null

// Computed
const visibleGroups = computed(() => {
    return config.value.rotateEnabled
        ? config.value.accountGroups.slice(0, config.value.groupCount)
        : config.value.accountGroups.slice(0, 1)
})

// Lifecycle
onMounted(async () => {
    updateCurrentTime()
    timeInterval = setInterval(updateCurrentTime, 1000)

    // Load User Data
    try {
        const userData = localStorage.getItem('user_data')
        if (userData) {
            const user = JSON.parse(userData)
            if (user.aiExpireTime) {
                const timestamp = Number(user.aiExpireTime)
                const date = new Date(timestamp)
                expireTime.value = date.toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit'
                })
            }
        }
    } catch { }

    await loadConfig()
    checkAIConfig()

    if (isElectronEnv) {
        const status = await window.electronAPI.getRotationStatus()
        rotationStatus.value = status
        if (status?.instanceModes?.length > 0) {
            setIsRunning(true)
        }
        handleStatusChange(status)

        const unsubRotation = window.electronAPI.onRotationStatusChanged((status) => {
            rotationStatus.value = status
            setIsRunning(status?.instanceModes?.length > 0)
            handleStatusChange(status)
        })

        const unsubSave = window.electronAPI.onRequestSaveConfig(() => {
            if (saveTimer) clearTimeout(saveTimer)
            saveToLocalStorage()
            saveToFile()
        })

        // Cleanup function for listeners is not directly supported in onMounted unless we store unsubscribers
        // We will just add window listener for unload as in React
        window.addEventListener('beforeunload', handleBeforeUnload)

        // Store unsubs for unmount
        // Note: In Vue component unmount, we should clean up.
    }
})

onUnmounted(() => {
    if (timeInterval) clearInterval(timeInterval)
    if (rotationTimer) clearInterval(rotationTimer)
    if (saveTimer) clearTimeout(saveTimer)
    window.removeEventListener('beforeunload', handleBeforeUnload)
    saveToLocalStorage()
})

const updateCurrentTime = () => {
    currentTime.value = new Date().toLocaleString('zh-CN')
}

// Config Loading/Saving
const loadConfig = async () => {
    try {
        if (isElectronEnv) {
            const saved = await window.electronAPI.loadRunConfig()
            if (saved) {
                config.value = { ...config.value, ...saved }
                localStorage.setItem(CONFIG_KEY, JSON.stringify(saved))
            } else {
                const localSaved = localStorage.getItem(CONFIG_KEY)
                if (localSaved) {
                    config.value = { ...config.value, ...JSON.parse(localSaved) }
                }
            }
        } else {
            const localSaved = localStorage.getItem(CONFIG_KEY)
            if (localSaved) {
                config.value = { ...config.value, ...JSON.parse(localSaved) }
            }
        }
    } catch (e) {
        console.error('加载配置失败:', e)
    } finally {
        configLoaded.value = true
    }
}

const saveToLocalStorage = () => {
    localStorage.setItem(CONFIG_KEY, JSON.stringify(config.value))
}

const saveToFile = async () => {
    if (!isElectronEnv) return
    try {
        const configToSave = JSON.parse(JSON.stringify(config.value))
        // ConfigPage 不管理 filters，HostListDialog 会单独管理
        // 删除 filters 避免用 ConfigPage 中可能过期的状态覆盖后端
        delete configToSave.filters
        await window.electronAPI.saveRunConfig(configToSave)
    } catch (e) {
        console.error('保存配置失败:', e)
    }
}

const handleBeforeUnload = () => {
    saveToLocalStorage()
    saveToFile()
}

// Auto Save
watch(config, (newVal) => {
    if (!configLoaded.value) return
    saveToLocalStorage()

    if (saveTimer) clearTimeout(saveTimer)
    saveTimer = setTimeout(() => {
        saveToFile()
    }, 500)
}, { deep: true })

const checkAIConfig = async () => {
    if (!isElectronEnv) return
    try {
        const saved = await window.electronAPI.loadAIConfig()
        if (saved && (saved.agentName || saved.guildName || saved.contactTool || saved.contact)) {
            aiConfig.value = saved
            aiConfigured.value = true
        } else {
            aiConfigured.value = false
        }
    } catch {
        aiConfigured.value = false
    }
}

const handleSaveAIConfig = async () => {
    if (isElectronEnv) {
        await window.electronAPI.saveAIConfig(JSON.parse(JSON.stringify(aiConfig.value)))
    }
    aiConfigured.value = true
    showAIDialog.value = false
}

// Rotation Timer Logic
const handleStatusChange = (status) => {
    if (rotationTimer) {
        clearInterval(rotationTimer)
        rotationTimer = null
    }

    if (status?.modeStartTime) {
        const updateTimer = () => {
            const elapsed = Math.floor((Date.now() - status.modeStartTime) / 1000)
            const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0')
            const seconds = (elapsed % 60).toString().padStart(2, '0')
            elapsedTime.value = `${minutes}:${seconds}`
        }
        updateTimer()
        rotationTimer = setInterval(updateTimer, 1000)
    } else {
        elapsedTime.value = '00:00'
    }
}

// Actions
const updateConfig = (key, value) => {
    config.value[key] = value
}

const updateGroupName = (val, index) => {
    config.value.accountGroups[index].name = val || `第${index + 1}组`
}

const addAccount = (groupIndex) => {
    if (config.value.accountGroups[groupIndex].accounts.length < 3) {
        config.value.accountGroups[groupIndex].accounts.push({ email: '', pwd: '' })
    }
}

const removeAccount = (groupIndex, accountIndex) => {
    if (config.value.accountGroups[groupIndex].accounts.length > 1) {
        config.value.accountGroups[groupIndex].accounts.splice(accountIndex, 1)
    }
}

const updateAccount = (groupIndex, accountIndex, field, value) => {
    config.value.accountGroups[groupIndex].accounts[accountIndex][field] = value
}

// Input Handlers
const handleNumberInput = (key, val) => {
    if (val === '') {
        config.value[key] = 0
    } else {
        const num = parseInt(val)
        if (!isNaN(num)) config.value[key] = num
    }
}

const handleNumberBlur = (key, val, min) => {
    if (!val || parseInt(val) < min) {
        config.value[key] = min
    }
}

const handleSleepTimeInput = (val) => {
    if (val === '') {
        config.value.sleepTime = -1
    } else {
        config.value.sleepTime = parseInt(val) || 0
    }
}
const warmingUp = ref(false)
// Start/Stop
const handleStart = async (specificGroupIndex) => {
    const activeGroupIndex = specificGroupIndex ?? 0
    const activeGroup = config.value.accountGroups[activeGroupIndex]

    if (!activeGroup) return alert('请选择要运行的账号组')

    const hasValidAccount = activeGroup.accounts.some(a => a.email && a.pwd)
    if (!hasValidAccount) return alert('请至少填写一组有效的账号（邮箱和密码）')

    const errors = []
    if (config.value.rotateEnabled && (!config.value.switchMinutes || config.value.switchMinutes < 1)) {
        errors.push('轮换间隔必须大于 0 分钟')
    }
    if (config.value.sleepTime < 0) {
        errors.push('请填写睡眠时间')
    }
    if (!config.value.sendInviteFirst && (!config.value.inviteThreshold || config.value.inviteThreshold < 1)) {
        errors.push('链接发送时机必须大于 0')
    }

    if (errors.length > 0) {
        return alert('配置检查失败：\n\n' + errors.map((e, i) => `${i + 1}. ${e}`).join('\n'))
    }

    if (!isElectronEnv) return alert('非 Electron 环境无法运行')

    // Deep clone to remove Vue reactivity (Proxy)
    const prologueList = JSON.parse(JSON.stringify(config.value.prologueList || {}))
    const activeGroupName = activeGroup.name

    await window.electronAPI.updateAutomationConfig({
        aiReplyEnabled: config.value.aiReply,
        isGreetFirst: config.value.sendInviteFirst,
        sleepTime: config.value.sleepTime,
        inviteThreshold: config.value.inviteThreshold,
        prologueList,
        needTranslate: config.value.needTranslate, // 添加翻译开关配置
        maxAnchorCount: config.value.maxAnchorCount,
        rotationEnabled: config.value.rotateEnabled,
        rotationIntervalMinutes: config.value.switchMinutes,
        currentActiveGroup: activeGroupName,
    })

    const groupsToStart = config.value.rotateEnabled
        ? visibleGroups.value.map(g => ({
            group: g,
            index: config.value.accountGroups.indexOf(g),
            isActive: g.name === activeGroupName
        }))
        : [{ group: activeGroup, index: activeGroupIndex, isActive: true }]

    const startTasks = []
    for (const { group, index } of groupsToStart) {
        const startViewId = index * 3 + 1
        let currentViewId = startViewId
        for (const acc of group.accounts) {
            if (acc.email && acc.pwd && currentViewId < startViewId + 3 && currentViewId <= 9) {
                // Deep clone account object to remove Vue reactivity
                const cleanAccount = JSON.parse(JSON.stringify(acc))
                startTasks.push({
                    viewId: currentViewId,
                    account: { 
                        ...cleanAccount, 
                        group: group.name,
                        lang: config.value.lang || 'en' // 传递语言配置
                    },
                    delay: Math.random() * 2500 + 500
                })
                currentViewId++
            }
        }
    }

   // 预热所有视图，确保后台视图完成渲染，解决自动化执行失败问题
    warmingUp.value = true
    try {
        console.log('[ConfigPage] 预热所有视图...')
        await window.electronAPI.warmUpViews()
        console.log('[ConfigPage] 视图预热完成')
    } catch (e) {
        console.warn('[ConfigPage] 视图预热失败，继续启动:', e)
    }

    const results = await Promise.allSettled(
        startTasks.map(async ({ viewId, account, delay }) => {
            await new Promise(r => setTimeout(r, delay))
            return window.electronAPI.startTikTokAutomation(viewId, account)
        })
    )

    // 检查启动结果
    const failedResults = results
        .map((r, i) => ({ result: r, task: startTasks[i] }))
        .filter(({ result }) => {
            if (result.status === 'rejected') return true
            if (result.status === 'fulfilled' && !result.value.success) return true
            return false
        })

    // 如果全部失败，显示错误并不跳转
    if (failedResults.length === startTasks.length) {
        const firstError = failedResults[0]
        let errorMsg = '启动失败'
        if (firstError.result.status === 'rejected') {
            errorMsg = firstError.result.reason?.message || '启动失败'
        } else if (firstError.result.status === 'fulfilled') {
            errorMsg = firstError.result.value.error || '启动失败'
        }
        warmingUp.value = false
        alert(`启动失败：${errorMsg}`)
        return
    }

    // 如果部分失败，显示警告但继续
    if (failedResults.length > 0) {
        console.warn(`部分账号启动失败: ${failedResults.length}/${startTasks.length}`)
    }

    setIsRunning(true)
    currentGroupIndex.value = activeGroupIndex
    const status = await window.electronAPI.getRotationStatus()
    rotationStatus.value = status
    handleStatusChange(status)
    warmingUp.value = false   //关闭遮罩
    emit('goToBrowser')
}

const handleStop = async () => {
    if (!isElectronEnv) return

    await Promise.allSettled(
        Array.from({ length: 9 }, (_, i) => i + 1).map(viewId =>
            window.electronAPI.stopTikTokAutomation(viewId).catch(() => { })
        )
    )

    await window.electronAPI.updateAutomationConfig({ rotationEnabled: false })
    if (window.electronAPI.clearAllCache) await window.electronAPI.clearAllCache()

    setIsRunning(false)
    rotationStatus.value = null
    elapsedTime.value = '00:00'
}

const handleGreetingConfirm = (data) => {
    const newPrologueList = {
        yolo: data.sentences,
        ...data.translations
    }
    config.value.prologueList = newPrologueList
    config.value.needTranslate = data.needTranslate
}

// Helpers for Template
const getGroupName = (group, index) => {
    if (group.name.startsWith('第') && group.name.endsWith('组')) return ''
    return group.name
}

const getGroupMode = (group) => {
    return rotationStatus.value?.instanceModes.find(i => i.group === group.name)?.mode
}

const isGroupActive = (group) => {
    return rotationStatus.value?.enabled && rotationStatus.value?.currentActiveGroup === group.name
}

const hasRunningAccounts = (group) => {
    return rotationStatus.value?.instanceModes.some(i => i.group === group.name)
}

const getAccountViewId = (groupIndex, accountIndex) => {
    return groupIndex * 3 + accountIndex + 1
}

const getAccountStatus = (groupIndex, accountIndex) => {
    const viewId = getAccountViewId(groupIndex, accountIndex)
    return rotationStatus.value?.instanceModes.find(i => i.viewId === viewId)
}

function setIsRunning(val) {
    isRunning.value = val
}

const togglePasswordVisibility = (gIndex, aIndex) => {
    const key = `${gIndex}-${aIndex}`
    showPasswordMap.value[key] = !showPasswordMap.value[key]
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>