<script setup lang="ts">
const { pb } = usePocketbase()
const url = useRequestURL()

let isValid = false

const sessionid = url.searchParams.get('sessionid')

if (sessionid) {
    
    const movie_data = await pb.collection('game_sessions').getList(1,1, {filter: `id = '${sessionid}'`})
    if (movie_data.items.length > 0) {
        isValid = true
    }
}


</script>

<template>
<div class="index-container">
    <header>
        <img src="@/assets/img/snow.svg" alt="">
        <h1>Paska Joululeffa 2025</h1>
    </header>
    <main>
        <NuxtImg v-if="isValid" format="avif,webp" quality="30" src="/reindeerpoop.webp" alt="" :placeholder="[50, 25, 75, 5]"/>
        <NuxtImg v-else format="avif,webp" quality="30" src="/reindeerpoop-angry.webp" alt="" :placeholder="[50, 25, 75, 5]" />
        <div class="warning">
            <div>
                <Icon name="mdi:warning" size="1.5rem"/>
                <h2 v-if="isValid">Varoitus!</h2>
                <h2 v-else>URPO!!!</h2>
                <Icon name="mdi:warning" size="1.5rem" />
            </div>
            <p v-if="isValid">Täällä on vain tyhmää läppää. Herkkänahkaisille ei suositella.</p>
            <p v-else>Virheellinen koodi</p>
        </div>
        <NuxtLink class="btn btn-primary" :to="'/info?sessionid=' + sessionid" v-if="isValid">Sisään</NuxtLink>
    </main>
    <footer><sup>&copy;</sup> {{ new Date().getFullYear() }} Kessinen</footer>
</div>
</template>

<style scoped lang="scss">

* {
    font-family: DynaPuff, sans-serif;
}

.index-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    min-height: 100vh;
    

}

header {
    text-align: center;
    display: grid;
    grid-template-areas: "stack";
    
    > * {
        grid-area: stack;
        max-width: 100%;
    }

    img {
        width: 100%;
        object-fit: cover;
    }
    h1 {
        padding: 1rem;
        color: hsl(0 74% 5%);
    }
}

main {
    text-align: center;
    padding: 1rem;
    display: grid;
    justify-content: center;
    place-items: center;
    
    img {
        max-width: 80%;
    }

    .warning {
        .iconify {
            color: hsl(44, 100%, 65%);
        }
    }

    > div {
        font-size: 0.9rem;
        line-height: 2;
        padding: 1rem;
        max-width: 80%;
        margin: auto;
        background-color: hsl(212 74% 50% / 20%);
        color: hsl(212 74% 90%);
        border-radius: 1rem;
        > div {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
        }
    }
}

footer {
    text-align: center;
    padding: 1rem;
    background-image: linear-gradient(to bottom, hsl(212, 74%, 50%), hsl(212, 90%, 35%));
    font-size: 0.8rem;
}
</style>
