<script lang="ts">
    import { onMount, onDestroy } from "svelte"
    import { gitHash, buildTime } from "../lib/buildInfo"
    import { serverBuildTime } from "../lib/serverBuildInfo"

    let debugText = ""
    let interval: ReturnType<typeof setInterval> | undefined

    function formatBuildTime(value: string | null | undefined): string {
        if (!value) return "-"
        try {
            return new Date(value).toLocaleString("de-DE", {
                day: "2-digit",
                month: "2-digit",
                year: "2-digit",
                hour: "2-digit",
                minute: "2-digit",
                second: "2-digit",
            })
        } catch {
            return "?"
        }
    }

    function update() {
        try {
            const frontendBuilt = formatBuildTime(buildTime)
            const serverBuilt = formatBuildTime($serverBuildTime)
            debugText = `fe:${frontendBuilt} | srv:${serverBuilt} | v:${gitHash}`
        } catch (e) {
            debugText = `debug-error: ${e}`
        }
    }

    onMount(() => {
        update()
        interval = setInterval(update, 5000)
    })

    onDestroy(() => {
        if (interval) clearInterval(interval)
    })
</script>

<span class="text-[10px] leading-none select-all text-gray-400" aria-hidden="true" title="Debug Info">
    {debugText}
</span>
