<template>
    <!-- 非 Electron 环境不渲染 -->
    <div v-if="isElectronEnv"
        class="min-h-screen bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center p-6">
        <!-- 背景装饰 -->
        <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <div class="absolute -top-40 -right-40 w-96 h-96 bg-blue-100 rounded-full blur-3xl opacity-50" />
            <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-purple-100 rounded-full blur-3xl opacity-50" />
        </div>

        <div class="relative z-10 w-full max-w-md">
            <!-- Logo 和标题 -->
            <div class="text-center mb-8"> 
                <div
                    class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center shadow-lg">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                    </svg>
                </div>
                <h1 class="text-2xl font-bold text-gray-900 mb-2">应用更新检查</h1>
                <p class="text-gray-500 text-sm">当前版本: v{{ currentVersion || '...' }}</p>
            </div>

            <!-- 更新卡片 -->
            <div class="bg-white rounded-2xl border border-gray-100 shadow-xl p-6">

                <!-- 检查中 -->
                <div v-if="status === 'checking' && !showTimeoutError" class="text-center py-8">
                    <div
                        class="w-12 h-12 mx-auto mb-4 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
                    <p class="text-gray-900 font-medium">正在检查更新...</p>
                    <p class="text-gray-500 text-sm mt-2">
                        {{ retryCount > 0 ? `第 ${retryCount}/${MAX_RETRIES} 次重试...` : '请稍候' }}
                    </p>
                </div>

                <!-- 超时错误 -->
                <div v-if="showTimeoutError" class="space-y-6 py-4">
                    <div class="text-center">
                        <div
                            class="w-16 h-16 mx-auto mb-4 bg-orange-50 rounded-full flex items-center justify-center">
                            <svg class="w-8 h-8 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <h2 class="text-xl font-bold text-gray-900">检查更新超时</h2>
                        <p class="text-orange-600 text-sm mt-2">无法连接到更新服务器</p>
                    </div>

                    <button @click="handleRetry"
                        class="w-full py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-lg font-medium hover:from-blue-700 hover:to-blue-600 transition-all shadow-sm">
                        🔄 重新检查
                    </button>

                    <p class="text-center text-gray-400 text-xs">
                        请检查网络连接后重试
                    </p>
                </div>

                <!-- 发现新版本 -->
                <div v-if="status === 'available' && updateInfo" class="space-y-6">
                    <div class="text-center">
                        <div class="w-16 h-16 mx-auto mb-4 bg-green-50 rounded-full flex items-center justify-center">
                            <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                        <h2 class="text-xl font-bold text-gray-900">发现新版本</h2>
                        <p class="text-green-600 font-mono mt-2">v{{ updateInfo.version }}</p>
                    </div>

                    <div v-if="updateInfo.releaseNotes" class="bg-gray-50 rounded-lg p-3 max-h-32 overflow-y-auto">
                        <p class="text-gray-600 text-sm whitespace-pre-wrap">{{ updateInfo.releaseNotes }}</p>
                    </div>

                    <button @click="downloadUpdate"
                        class="w-full py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-lg font-medium hover:from-blue-700 hover:to-blue-600 transition-all shadow-sm">
                        立即下载更新
                    </button>

                    <p class="text-center text-gray-400 text-xs">
                        必须更新后才能使用程序
                    </p>
                </div>

                <!-- 下载中 -->
                <div v-if="status === 'downloading' && progress" class="space-y-6 py-4">
                    <div class="text-center">
                        <p class="text-gray-900 font-medium mb-1">正在下载更新</p>
                        <p class="text-4xl font-bold text-blue-600">{{ progress.percent.toFixed(0) }}%</p>
                    </div>

                    <div class="space-y-2">
                        <div class="h-3 bg-gray-100 rounded-full overflow-hidden">
                            <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-300 rounded-full"
                                :style="{ width: `${progress.percent}%` }" />
                        </div>
                        <div class="flex justify-between text-xs text-gray-500">
                            <span>{{ formatBytes(progress.transferred) }} / {{ formatBytes(progress.total) }}</span>
                            <span>{{ formatBytes(progress.bytesPerSecond) }}/s</span>
                        </div>
                    </div>

                    <p class="text-center text-gray-400 text-sm">
                        请勿关闭程序...
                    </p>
                </div>

                <!-- 下载完成 - 自动重启安装 -->
                <div v-if="status === 'downloaded'" class="space-y-6 py-4">
                    <div class="text-center">
                        <div class="w-16 h-16 mx-auto mb-4 bg-green-50 rounded-full flex items-center justify-center">
                            <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                        <h2 class="text-xl font-bold text-gray-900">下载完成</h2>
                        <p class="text-green-600 text-sm mt-2">
                            {{ countdown > 0 ? `${countdown} 秒后自动重启安装...` : '正在重启安装...' }}
                        </p>
                    </div>

                    <button @click="installUpdate"
                        class="w-full py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg font-medium hover:from-green-600 hover:to-green-700 transition-all shadow-sm">
                        🚀 立即重启安装
                    </button>
                </div>

                <!-- 错误 -->
                <div v-if="status === 'error'" class="space-y-6 py-4">
                    <div class="text-center">
                        <div class="w-16 h-16 mx-auto mb-4 bg-red-50 rounded-full flex items-center justify-center">
                            <svg class="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <h2 class="text-xl font-bold text-gray-900">检查更新失败</h2>
                        <p class="text-red-500 text-sm mt-2">{{ error }}</p>
                    </div>

                    <div class="flex gap-3">
                        <button @click="startCheck"
                            class="flex-1 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-lg font-medium hover:from-blue-700 hover:to-blue-600 transition-all shadow-sm">
                            🔄 重试
                        </button>
                        <button @click="emit('ready')"
                            class="flex-1 py-3 bg-gray-100 text-gray-600 rounded-lg font-medium hover:bg-gray-200 transition-all border border-gray-200">
                            跳过继续
                        </button>
                    </div>

                    <p class="text-center text-gray-400 text-xs">
                        更新检查失败不影响正常使用
                    </p>
                </div>
            </div>

            <!-- 底部版权 -->
            <p class="text-center text-gray-400 text-xs mt-6">
                © 2025 Yolo
            </p>
        </div>
    </div>
</template>

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

const emit = defineEmits(['ready'])

const CHECK_TIMEOUT = 15000 // 15秒超时
const MAX_RETRIES = 3 // 最大重试次数
const AUTO_INSTALL_DELAY = 3 // 自动安装倒计时秒数

const {
    status,
    updateInfo,
    progress,
    error,
    currentVersion,
    checkForUpdates,
    downloadUpdate,
    installUpdate
} = useUpdate()

const isElectronEnv = isElectron()

const checkComplete = ref(false)
const retryCount = ref(0)
const isTimeout = ref(false)
const showTimeoutError = ref(false)
const countdown = ref(AUTO_INSTALL_DELAY)

let timeoutTimer = null
let hasStarted = false
let countdownTimer = null

// 非 Electron 环境直接 ready
onMounted(() => {
    if (!isElectronEnv) {
        emit('ready')
        return
    }
    // 启动检查
    if (!hasStarted) {
        hasStarted = true
        startCheck()
    }
})

// 监听状态
watch(status, (newStatus) => {
    if (newStatus !== 'checking' && timeoutTimer) {
        clearTimeout(timeoutTimer)
        timeoutTimer = null
        isTimeout.value = false
    }

    if (newStatus === 'idle' && checkComplete.value) {
        emit('ready')
    }

    if (newStatus !== 'checking' && newStatus !== 'idle') {
        checkComplete.value = true
    }
    if (newStatus === 'idle') {
        setTimeout(() => {
            checkComplete.value = true
        }, 500)
    }

    // Auto install timer
    if (newStatus === 'downloaded') {
        startCountdown()
    }
})

watch(isTimeout, (val) => {
    if (val) {
        if (retryCount.value >= MAX_RETRIES) {
            console.log('[UpdateChecker] 更新检查超时，显示错误')
            showTimeoutError.value = true
        } else if (retryCount.value > 0) {
            setTimeout(() => {
                startCheck()
            }, 2000)
        }
    }
})

watch(checkComplete, (val) => {
    if (val && status.value === 'idle') {
        emit('ready')
    }
})

function startCheck() {
    if (!isElectronEnv) return

    isTimeout.value = false
    checkForUpdates()

    timeoutTimer = setTimeout(() => {
        if (status.value === 'checking') {
            isTimeout.value = true
            if (retryCount.value < MAX_RETRIES) {
                retryCount.value++
            }
        }
    }, CHECK_TIMEOUT)
}

function handleRetry() {
    showTimeoutError.value = false
    retryCount.value = 0
    hasStarted = false
    startCheck()
}

function startCountdown() {
    if (countdownTimer) clearInterval(countdownTimer)
    countdown.value = AUTO_INSTALL_DELAY
    countdownTimer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
            clearInterval(countdownTimer)
            installUpdate()
        }
    }, 1000)
}

function formatBytes(bytes) {
    if (bytes === 0) return '0 B'
    const k = 1024
    const sizes = ['B', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`
}

onUnmounted(() => {
    if (timeoutTimer) clearTimeout(timeoutTimer)
    if (countdownTimer) clearInterval(countdownTimer)
})
</script>
