<script setup lang="ts">
import { ref, onMounted } from 'vue'

const version = ref<string>('')
const commitHash = ref<string>('')
const buildDate = ref<string>('')

const fetchFirmwareData = async () => {
    try {
        const [tagResponse, commitResponse, dateResponse] = await Promise.all([
            fetch('firmware_v3/tag.txt'),
            fetch('firmware_v3/commit.txt'),
            fetch('firmware_v3/date.txt')
        ])

        version.value = await tagResponse.text()
        commitHash.value = await commitResponse.text()

        const dateText = await dateResponse.text()
        buildDate.value = new Date(dateText.trim()).toLocaleString()
    } catch (error) {
        console.error('Error fetching firmware data:', error)
    }
}

onMounted(() => {
    fetchFirmwareData()
})
</script>

<template>
    <div class="card bg-base-100 shadow-xl ">
        <div class="card-body">
            <h2 class="card-title">Version information</h2>
            <ul class="text-sm">
                <li>Version {{  version  }}</li>
                <li>Commit hash: <a :href="'https://git.btclock.dev/btclock/btclock_v3/commit/' + commitHash "><code>{{  commitHash  }}</code></a></li>
                <li>Build date: <code>{{ buildDate }}</code></li>
                <li><a href="https://git.btclock.dev/btclock/btclock_v3/src/branch/main/.forgejo/workflows/push.yaml">CI
                        script
                        compiling the
                        V3
                        firmware</a> | <a href="https://git.btclock.dev/btclock/btclock_v3/releases/latest">Release to be flashed</a> | 
                <a href="https://git.btclock.dev/btclock/btclock_v3">git repository</a></li>
            </ul>
        </div>
    </div>
</template>