<script lang="ts">
    import { metricCall } from "./config"
    import { location } from "./lib/store"
    import { _, locale } from "./lib/i18n/index"
    import LoadingBar from "./widgets/LoadingBar.svelte"
    import ToastContainer from "./widgets/ToastContainer.svelte"
    import {
        SUPPORTED_LANGUAGES,
        LANGUAGE_LABELS,
        currentLanguage,
        localizedPath,
        getLanguageSwitchUrl,
        getBrowserLanguage,
        extractLanguageFromPath,
        DEFAULT_LANGUAGE,
        getRoutePath,
    } from "./lib/i18n"
    export let url = ""

    if (url) {
        // ssr
        let l = url.split("?")
        $location = {
            path: l[0],
            search: l.length > 1 ? l[1] : "",
            hash: "",
            push: false,
            pop: false,
        }
        // Set svelte-i18n locale from URL for SSR rendering
        const lang = extractLanguageFromPath(l[0]) || DEFAULT_LANGUAGE
        $locale = lang
    }

    // Redirect root "/" to default language
    $effect(() => {
        if (typeof window !== "undefined" && $location.path === "/") {
            const lang = getBrowserLanguage()
            history.replaceState(null, "", `/${lang}/`)
        }
    })

    // metrics
    let oldPath = $state("")
    $effect(() => {
        if (metricCall && typeof window !== "undefined" && oldPath !== $location.path) {
            const ref = oldPath
                ? document.location.protocol + "//" + document.location.host + oldPath
                : document.referrer
            oldPath = $location.path
            const fetchPath = oldPath + (oldPath.includes("?") ? "&" : "?") + "metrics"
            fetch(fetchPath, {
                headers: {
                    "x-ssr-skip": "204",
                    "x-ssr-ref": ref,
                    "x-ssr-res": `${window.innerWidth}x${window.innerHeight}`,
                    // no cache
                    "cache-control": "no-cache, no-store, must-revalidate",
                },
            })
        }
    })
</script>

<LoadingBar />
<ToastContainer />

<header class="text-white p-4 bg-red-900">
    <div class="container mx-auto flex flex-wrap items-center justify-between gap-2">
        <a href={localizedPath("/")} class="text-xl font-bold shrink-0">Tibi Svelte Starter</a>
        <nav class="flex items-center gap-4">
            <ul class="hidden sm:flex space-x-4">
                <li><a href={localizedPath("/")} class="hover:underline">{$_("nav.home")}</a></li>
                <li><a href={localizedPath("/about")} class="hover:underline">{$_("nav.about")}</a></li>
                <li><a href={localizedPath("/contact")} class="hover:underline">{$_("nav.contact")}</a></li>
            </ul>
            <div class="flex space-x-2 text-sm sm:border-l sm:border-white/30 sm:pl-4">
                {#each SUPPORTED_LANGUAGES as lang}
                    <a
                        href={getLanguageSwitchUrl(lang)}
                        class="hover:underline px-1"
                        class:font-bold={$currentLanguage === lang}
                        class:opacity-60={$currentLanguage !== lang}
                    >
                        {LANGUAGE_LABELS[lang]}
                    </a>
                {/each}
            </div>
        </nav>
    </div>
    <!-- Mobile nav -->
    <nav class="sm:hidden mt-2 border-t border-white/20 pt-2">
        <ul class="flex space-x-4 text-sm">
            <li><a href={localizedPath("/")} class="hover:underline">{$_("nav.home")}</a></li>
            <li><a href={localizedPath("/about")} class="hover:underline">{$_("nav.about")}</a></li>
            <li><a href={localizedPath("/contact")} class="hover:underline">{$_("nav.contact")}</a></li>
        </ul>
    </nav>
</header>

<main class="container mx-auto p-4">
    {#if getRoutePath($location.path) === "/about"}
        <h1 class="text-2xl font-bold mb-4">{$_("page.about.title")}</h1>
        <p>{$_("page.about.text")}</p>
    {:else if getRoutePath($location.path) === "/contact"}
        <h1 class="text-2xl font-bold mb-4">{$_("page.contact.title")}</h1>
        <p>{$_("page.contact.text")}</p>
    {:else}
        <h1 class="text-2xl font-bold mb-4">{$_("page.home.title")}</h1>
        <p>{$_("page.home.text")}</p>
    {/if}
</main>
