<template>
    <div class="p-4 space-y-4">
        <h3 class="text-lg font-semibold text-slate-200">
            TikTok 自动化 - 视图 {{ viewId }}
        </h3>

        <!-- 账号配置 -->
        <div class="space-y-3">
            <input type="email" placeholder="TikTok 邮箱" v-model="email" :disabled="isRunning" class="w-full px-3 py-2 rounded-lg bg-slate-700 border border-slate-600 
                   text-slate-200 text-sm placeholder-slate-400
                   focus:outline-none focus:border-primary-500
                   disabled:opacity-50 disabled:cursor-not-allowed" />
            <input type="password" placeholder="密码" v-model="password" :disabled="isRunning" class="w-full px-3 py-2 rounded-lg bg-slate-700 border border-slate-600 
                   text-slate-200 text-sm placeholder-slate-400
                   focus:outline-none focus:border-primary-500
                   disabled:opacity-50 disabled:cursor-not-allowed" />
        </div>

        <!-- 控制按钮 -->
        <div class="flex gap-2">
            <button v-if="!isRunning" @click="handleStart" class="flex-1 px-4 py-2 rounded-lg text-sm font-medium
                     bg-gradient-to-r from-emerald-500 to-teal-500 text-white
                     hover:from-emerald-400 hover:to-teal-400 transition-all">
                ▶ 启动
            </button>
            <button v-else @click="handleStop" class="flex-1 px-4 py-2 rounded-lg text-sm font-medium
                     bg-gradient-to-r from-red-500 to-rose-500 text-white
                     hover:from-red-400 hover:to-rose-400 transition-all">
                ⏹ 停止
            </button>
        </div>

        <!-- 日志区域 -->
        <div class="mt-4">
            <div class="text-xs font-semibold text-slate-500 uppercase mb-2">
                运行日志
            </div>
            <div class="h-40 overflow-y-auto bg-slate-900/50 rounded-lg p-3 
                      text-xs text-slate-400 font-mono space-y-1
                      border border-slate-700/50">
                <div v-if="logs.length === 0" class="text-slate-600">暂无日志...</div>
                <div v-else v-for="(log, i) in logs" :key="i" class="break-all">{{ log }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch, onUnmounted } from 'vue'
import { isElectron } from '../utils/electronBridge'

const props = defineProps({
    viewId: {
        type: Number,
        required: true
    }
})

const email = ref('')
const password = ref('')
const isRunning = ref(false)
const logs = ref([])

// 监听自动化日志
let unsubscribe = null

watch(() => props.viewId, (newViewId) => {
    if (!isElectron()) return
    if (unsubscribe) unsubscribe()

    unsubscribe = window.electronAPI.onAutomationLog((log) => {
        if (log.viewId === newViewId) {
            logs.value = [...logs.value.slice(-49), log.message]
        }
    })
}, { immediate: true })

onUnmounted(() => {
    if (unsubscribe) unsubscribe()
})

const handleStart = async () => {
    if (!isElectron()) {
        logs.value = [...logs.value, '❌ 非 Electron 环境，无法启动自动化']
        return
    }

    if (!email.value || !password.value) {
        logs.value = [...logs.value, '❌ 请输入邮箱和密码']
        return
    }

    const account = { email: email.value, pwd: password.value }

    isRunning.value = true
    logs.value = [...logs.value, `🚀 启动自动化: ${email.value}`]

    const result = await window.electronAPI.startTikTokAutomation(props.viewId, account)

    if (!result.success) {
        logs.value = [...logs.value, `❌ 启动失败: ${result.error}`]
        isRunning.value = false
    }
}

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

    const result = await window.electronAPI.stopTikTokAutomation(props.viewId)

    if (result.success) {
        logs.value = [...logs.value, '⏹️ 自动化已停止']
    }

    isRunning.value = false
}
</script>
