<template>
    <main class="splash">
        <svg-wordmark />

        <a :href="downloadUrl" download>
            <btn :disabled="loading">
                {{ loading ? 'Checking for updates…' : `Download for ${os}` }}
            </btn>
        </a>
    </main>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import SvgWordmark from '@/components/svg/Wordmark.vue'
import useDetectOS from '@/composables/useDetectOS'
import Btn from '@/components/Btn.vue'

const BASE_URL = 'https://s3.takerofnotes.com'

const { os } = useDetectOS()

const version = ref(null)
const downloadPath = ref(null)
const loading = ref(true)

const downloadUrl = computed(() => {
    if (!downloadPath.value || os.value === 'Unknown') return null
    return `${BASE_URL}/dist/${os.value.toLowerCase()}/${version.value}/${downloadPath.value}`
})

onMounted(async () => {
    try {
        const response = await fetch(
            `${BASE_URL}/dist/${os.value.toLowerCase()}/latest.yml`,
        )
        if (!response.ok) throw new Error(response.statusText)
        const yaml = await response.text()

        const versionMatch = yaml.match(/^version:\s*(.+)/m)
        const pathMatch = yaml.match(/^path:\s*(.+)/m)

        if (versionMatch) version.value = versionMatch[1].trim()
        if (pathMatch) downloadPath.value = pathMatch[1].trim()
    } catch {
        // fallback to placeholder
        downloadPath.value = `takerofnotes-app-0.2.0.${os.value === 'Windows' ? 'exe' : os.value === 'macOS' ? 'dmg' : 'AppImage'}`
    } finally {
        loading.value = false
    }
})
</script>

<style lang="scss">
main.splash {
    height: calc(100 * var(--vh));
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: desktop-vw(40px);

    .svg-wordmark {
        width: 70%;
        height: auto;
        display: block;
    }
}
</style>
