<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { invoke } from '@tauri-apps/api/core'
import { Loader2, DownloadCloud, CheckCircle2, AlertCircle } from 'lucide-vue-next'

const status = ref('正在初始化...')
const isError = ref(false)

onMounted(async () => {
    try {
        status.value = '正在检查运行环境...'
        // This command checks and downloads binaries if missing
        await invoke('init_ytdlp')
        
        status.value = '准备就绪'
        setTimeout(async () => {
             await invoke('close_splash')
        }, 800)
    } catch (e: any) {
        status.value = '启动错误: ' + (e.toString() || '未知错误')
        isError.value = true
    }
})
</script>

<template>
    <div class="h-screen w-screen bg-white dark:bg-zinc-900 flex flex-col items-center justify-center select-none cursor-default p-8 text-center overflow-hidden" data-tauri-drag-region>
        <div class="mb-6 relative w-20 h-20 bg-blue-600 rounded-2xl shadow-xl flex items-center justify-center text-white">
             <DownloadCloud v-if="!isError" class="w-10 h-10" />
             <AlertCircle v-else class="w-10 h-10" />
        </div>
        
        <h1 class="text-xl font-bold text-zinc-900 dark:text-white mb-6">流萤 - 视频下载</h1>
        
        <div class="flex flex-col items-center gap-3 w-full max-w-xs">
            <div class="flex items-center gap-2.5 text-sm font-medium transition-colors duration-300"
                 :class="isError ? 'text-red-500' : 'text-gray-600 dark:text-gray-300'">
                <Loader2 v-if="!isError && status !== '准备就绪'" class="animate-spin w-4 h-4" />
                <CheckCircle2 v-if="status === '准备就绪'" class="w-4 h-4 text-green-500" />
                <span>{{ status }}</span>
            </div>
        </div>
    </div>
</template>