<script setup lang="ts">
import { ref } from "@vue/reactivity";
// @ts-ignore
import { invoke } from "@tauri-apps/api/core";

const dbVersion = ref<string | null>(null);
const loading = ref(false);
const error = ref<string | null>(null);

async function fetchDbVersion() {
    loading.value = true;
    error.value = null;
    try {
        dbVersion.value = await invoke<string>("db_version");
    } catch (e: any) {
        error.value = e?.toString() ?? "Unbekannter Fehler";
        dbVersion.value = null;
    } finally {
        loading.value = false;
    }
}
</script>

<template>
    <div
        style="
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            margin-top: 2rem;
        "
    >
        <button @click="fetchDbVersion" :disabled="loading">
            {{ loading ? "Lade..." : "Datenbank-Version abfragen" }}
        </button>
        <div v-if="dbVersion">
            <strong>SQLite-Version:</strong> {{ dbVersion }}
        </div>
        <div v-if="error" style="color: red">Fehler: {{ error }}</div>
    </div>
</template>
