<script lang="ts">
    import posthog from "posthog-js";
    import logoUrl from "$lib/assets/logo.svg";
    import { onMount } from "svelte";
    import { invalidate } from "$app/navigation";

    let { data, children } = $props();
    let { session, supabase, route } = $derived(data);

    onMount(() => {
        posthog.init("phc_hTnel2Q8GKo0TgIBnFWBueJW1ATmCG9tJOtETnQTUdY", {
            api_host: "https://eu.i.posthog.com",
            person_profiles: "always"
        });
        const { data } = supabase.auth.onAuthStateChange((_, newSession) => {
            if (newSession?.expires_at !== session?.expires_at) {
                invalidate("supabase:auth");
            }
        });
        return () => data.subscription.unsubscribe();
    });
    $effect(() => {
        if (route.id === "/filter") {
            document.body.classList.add("coloured");
        } else {
            document.body.classList.remove("coloured");
        }
    });
</script>

<svelte:head>
    <title>Study Spaces</title>
    <link rel="icon" href={logoUrl} />
</svelte:head>

{@render children?.()}

<style>
    :global(body) {
        margin: 0;
        padding: 0;
        width: 100%;
        min-height: 100vh;
    }

    :global(html) {
        background-color: #182125;
        color: #eaffeb;
    }

    :global(body.coloured) {
        background: linear-gradient(-77deg, #2e4653, #223a37);
    }

    :global(*) {
        box-sizing: border-box;
        font-family: Inter;
    }

    :global(h1, h2, h3, h4, h5, h6, p) {
        margin: 0;
        padding: 0;
    }
</style>
