<script lang="ts">
    import { page } from "$app/stores";
    import { gameSession } from "$lib/stores/gameSession.svelte";
    import ProjectorView from "./ProjectorView.svelte";
    import ModeratorView from "./ModeratorView.svelte";
    import {
        KvButtonSecondary,
        KvSpinner,
    } from "$lib/components/kuldvillak/ui";
    import * as m from "$lib/paraglide/messages";

    // Get view from URL query param
    let view = $derived($page.url.searchParams.get("view") ?? "moderator");
</script>

<svelte:head>
    <title>{gameSession.state?.name ?? "Play"} - Kuldvillak</title>
</svelte:head>

{#if !gameSession.state}
    {#if view === "projector"}
        <!-- Projector Loading Screen -->
        <div class="h-screen w-screen bg-kv-black p-4 md:p-8">
            <div
                class="w-full h-full bg-kv-blue flex flex-col items-center justify-center gap-4 md:gap-8 overflow-hidden px-4"
            >
                <KvSpinner class="w-20 h-20 md:w-32 md:h-32" />
                <p
                    class="font-kv-body text-2xl md:text-5xl text-kv-white uppercase kv-shadow-text text-center"
                >
                    {m.kv_play_loading()}
                </p>
                <p
                    class="font-kv-body text-sm md:text-xl text-kv-white uppercase kv-shadow-text text-center"
                >
                    {m.kv_play_loading_hint()}
                </p>
                <a href="/kuldvillak/edit">
                    <KvButtonSecondary>
                        {m.kv_play_go_to_editor()}
                    </KvButtonSecondary>
                </a>
            </div>
        </div>
    {:else}
        <!-- Moderator Loading Screen -->
        <div
            class="h-screen w-screen flex items-center justify-center bg-kv-black"
        >
            <div class="text-center">
                <KvSpinner class="w-16 h-16 mx-auto mb-4" />
                <p
                    class="font-kv-body text-kv-white text-2xl mb-4 uppercase kv-shadow-text"
                >
                    {m.kv_play_loading()}
                </p>
                <p class="font-kv-body text-gray-400 text-sm mb-4 uppercase">
                    {m.kv_play_loading_hint()}
                </p>
                <a
                    href="/kuldvillak/edit"
                    class="text-kv-yellow underline uppercase font-kv-body"
                >
                    {m.kv_play_go_to_editor()}
                </a>
            </div>
        </div>
    {/if}
{:else if view === "projector"}
    <ProjectorView />
{:else}
    <ModeratorView />
{/if}
