<script lang="ts">
    import { getTimeIn, randomStr } from "$lib";
    import { onMount } from "svelte";
    import type { PageData } from "./$types";
    import {
        blur,
        fade,
        fly,
    } from 'svelte/transition';
    import {
        cubicOut
    } from 'svelte/easing';
    interface Props {
        data: PageData;
    }

    let { data }: Props = $props();

    let time = $derived(getTimeIn(data.timezone));
    let charAmount = $state(0);

    let audio: HTMLAudioElement;
    let showNotification = $state(false);
    let showCopyNotification = $state(false);

    function copyCurlCommand() {
        navigator.clipboard.writeText("curl https://satr14.my.id").then(() => {
            showCopyNotification = true;
            setTimeout(() => showCopyNotification = false, 3000);
        }).catch(() => {});
    }

    function playAudio() {
        if (audio.paused) {
            audio.volume = 0.5;
            audio.play().then(() => {
                showNotification = true;
                setTimeout(() => showNotification = false, 3000);
            }).catch(() => {});
        }
    }

    onMount(() => {
        charAmount = Math.floor(window.innerWidth / 20);
        window.onkeydown = (e) => {
            if (e.code === "Space") {
                playAudio();
                window.onkeydown = null;
            }
        };
    });
</script>

<audio bind:this={audio} src="/hk-white-palace-ost.mp3" loop></audio>

<a href="https://hackclub.com" target="_blank" class="z-50 fixed top-24 sm:top-12 md:top-4 -left-12 hover:left-0 animate-[wave_1s_ease-in-out_infinite] [transform-origin:top_left]">
  <img src="https://assets.hackclub.com/flag-orpheus-left.svg" alt="Hack Club Orpheus Flag" class="h-20">
</a>

{#if showNotification}
    <div class="z-50 fixed top-6 right-6 left-6 flex justify-center items-center">
        <div class="flex items-center gap-3 bg-ctp-surface0 text-ctp-text px-4 py-3 rounded-xl shadow-lg border border-ctp-sky" transition:fly={{ y: 20, duration: 300, easing: cubicOut }}>
            <span class="text-lg">♪</span>
            <div class="text-sm">
                <p class="m-0 font-medium">Now Playing</p>
                <p class="m-0 text-ctp-subtext0 text-xs">White Palace — Hollow Knight OST</p>
            </div>
        </div>
    </div>
{/if}

{#if showCopyNotification}
    <div class="z-50 fixed top-6 right-6 left-6 flex justify-center items-center">
        <div class="flex items-center gap-3 bg-ctp-surface0 text-ctp-text px-4 py-3 rounded-xl shadow-lg border border-ctp-sky" transition:fly={{ y: 20, duration: 300, easing: cubicOut }}>
            <p class="m-0 font-medium">Copied to clipboard</p>
        </div>
    </div>
{/if}

<div class="fixed top-0 left-0 w-full h-full bg-size-[40px_40px] bg-position-[-19px_-19px] opacity-25 rotate-1" style="background-image: radial-gradient(white 1px, transparent 0);"></div>

<div class="fixed top-0 left-0 w-full h-full animate-[rainbow_20s_linear_infinite,breathing_8s_ease-in-out_infinite]" style="background: linear-gradient(-6deg, hsl(var(--rainbow-hue-bottom), 70%, 60%), transparent, hsl(var(--rainbow-hue-top), 70%, 60%));" transition:fade={{
    duration: 1500, easing: cubicOut
}}></div>

<div class="fixed top-0 left-0 w-full h-full overflow-hidden flex justify-center items-center select-none" transition:blur={{
    duration: 1000, easing: cubicOut,
}}>
    <div class="font-[Stray,monospace] group whitespace-nowrap text-center text-5xl my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 hover:text-ctp-base">
        <div class="inline-flex relative overflow-hidden">
            <span class="animate-[marquee_10s_linear_infinite] whitespace-nowrap">
                {randomStr(charAmount)}
            </span>
            <span class="absolute top-0 animate-[marquee2_10s_linear_infinite] whitespace-nowrap">
                {randomStr(charAmount)}
            </span>
        </div><br>
        <span class="block">{randomStr(Math.round(charAmount-data.name.length/2))}<a href="https://git.satr14.my.id/satr14/5th-site-expanded" target="_blank" class="group-hover:px-8 no-underline text-ctp-subtext1 group-hover:text-ctp-text">{data.name.toUpperCase()}</a>{randomStr(Math.round(charAmount-data.name.length/2))}</span>
        <div class="inline-flex relative overflow-hidden">
            <span class="animate-[marquee_10s_linear_infinite_reverse] whitespace-nowrap">
                {randomStr(charAmount)}
            </span>
            <span class="absolute top-0 animate-[marquee2_10s_linear_infinite_reverse] whitespace-nowrap">
                {randomStr(charAmount)}
            </span>
        </div><br>
    </div>
</div>

<div class="fixed top-0 left-0 w-full text-base flex justify-center items-center">
    <nav class="py-2 px-4 backdrop-blur rounded-t-3xl border-ctp-base hover:border-ctp-sky">
        <p class="animate-pulse italic text-base text-center">
            <span>"{data.quote}"</span><br>
            <span class="hidden sm:block">Press [Space] to continue.</span>
            <span class="sm:hidden">Scroll to continue.</span>
        </p>
    </nav>
</div>
    
<div class="h-[calc(100%-7rem)] sm:h-[calc(100%-6rem)]"></div>

<div class="backdrop-blur-md backdrop-brightness-75 w-[calc(100%-2rem)] ml-4 pt-4 border-t-2 border-x-2 border-ctp-surface1 hover:border-ctp-sky shadow-inner rounded-t-3xl" transition:fly={{
    duration: 1500, easing: cubicOut, y: 200, opacity: 0,
}}>
    <div class="max-w-3xl mx-auto px-4 pt-2 sm:pt-4">
        <header>
            <nav class="overflow-hidden flex flex-col-reverse sm:flex-row justify-center sm:justify-between items-center sm:gap-4 text-lg max-w-full w-full px-4 text-nowrap">
                <div class="flex justify-center gap-4 sm:gap-6 group">
                    {#each Object.entries(data.socials) as [name, url]}
                        <a href={url} target="_blank">
                          <img src="https://cdn.simpleicons.org/{name}/cdd6f4" alt={name} class="h-6 sm:h-4 aspect-square hover:opacity-100 group-hover:opacity-80 opacity-70" />
                        </a>
                    {/each}
                </div>
                <a href="/#abt" id="abt" class="text-center no-underline text-4xl leading-6 font-extrabold" onclick={playAudio}>&uarr;</a>
                <p onclick={copyCurlCommand} class="text-center m-0 font-mono italic hidden md:block cursor-pointer hover:text-ctp-sky">curl https://satr14.my.id</p>
            </nav>
        </header>
        
        <main>
            <article>
                <p class="text-center">
                  {#each data.roles as role, i}
                    {i ? " // " : ""}
                    <b>{role}</b>
                  {/each}
                </p>
                <p>{data.description}</p>
                <p class="text-sm"><i>
                    Located in <b>{data.location}</b>. It's <b>{time}</b> in <b>{data.timezone}</b>.
                </i></p>
                <p class="flex flex-wrap gap-2 text-sm">
                    {#each data.skills as skill}
                        <span class="bg-ctp-base text-ctp-text px-2 py-1 rounded-lg no-underline text-xs sm:text-sm">{skill}</span>
                    {/each}
                </p>
                <div class="flex flex-row gap-1">
                    {#each Object.entries(data.links) as [title, url]}
                        <a href={url} target="_blank" class="flex items-center justify-between rounded-lg px-2 py-1 hover:bg-ctp-surface0 text-sm">
                            {title}
                            <span class="text-ctp-overlay1 text-2xl leading-0">&rarr;</span>
                        </a>
                    {/each}
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 py-4">
                    {#each Object.entries(data.communities) as [name, details]}
                        <a href={details.url} target="_blank" class="flex items-center gap-3 rounded-lg py-2 px-3 hover:bg-ctp-surface0">
                            <img src={details.icon} alt={name} class="size-9 rounded-lg" loading="lazy" />
                            <div class="leading-2">
                                <span class="text-sm block text-ctp-text font-bold">{name}</span>
                                <span class="text-xs text-ctp-subtext0">{details.role}</span>
                            </div>
                        </a>
                    {/each}
                </div>
                <div class="flex justify-center">
                    <a class="p-4" href="https://heatmap.shymike.dev/?id=801&timezone=Asia%2FJakarta&cell_size=8&padding=4&rounding=40&labels=true&theme=catppuccin_dark&standalone=true">
                        <img src="https://heatmap.shymike.dev?id=801&timezone=Asia%2FJakarta&cell_size=8&padding=4&rounding=40&labels=true&theme=catppuccin_dark" alt="hackatime heatmap">
                    </a>
                </div>
            </article>
            <div class="opacity-75 hover:opacity-100 flex justify-center gap-2 pb-6 no-underline text-ctp-text">
                <a class="hover:bg-ctp-surface0 px-2 rounded-lg pb-1" href="https://nixwebr.ing/prev/satr14">&lt;prev</a>
                <a class="hover:bg-ctp-surface0 px-2 rounded-lg pb-1" href="https://nixwebr.ing">nix-webring</a>
                <a class="hover:bg-ctp-surface0 px-2 rounded-lg pb-1" href="https://nixwebr.ing/rand">rand?</a>
                <a class="hover:bg-ctp-surface0 px-2 rounded-lg pb-1" href="https://nixwebr.ing/next/satr14">next&gt;</a>
            </div>
        </main>
    </div>
</div>