---
import dayjs from "dayjs";
import NavbarLayout from "@layouts/NavbarLayout.astro";
import { getCollection } from "astro:content";
import { astroI18n } from "astro-i18n";

import { Image } from "astro:assets";
import Card from "@components/Card.svelte";
import { CaretRight, Pause, Rocket, Crosshair1 } from "@astropub/icons";
import { t } from "astro-i18n";
import { l } from "@utils/util";
import PlayerCount from "@components/PlayerCount.svelte";
import "../../public/fonts/barlow-condensed/barlow-condensed.css";
import { type Player } from "../components/types/data";
import PostComponent from "../components/PostComponent.astro";
import BackgroundImage from "../components/BackgroundImage.astro";

const teamMember: { [key: string]: Player[] } = await fetch(import.meta.env.PUBLIC_API_SERVER + "/data/team").then((value) => value.json());

const posts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.locale);

const germanPosts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.fallbackLocale);

germanPosts.forEach((value) => {
    if (posts.find((post) => post.data.key === value.data.key)) {
        return;
    } else {
        posts.push(value);
    }
});

const latestPost = posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix()).at(0);

const prefixColorMap: {
    [key: string]: string;
} = {
    Admin: "border-red-600 dark:border-red-800 shadow-red-600 dark:shadow-red-800",
    Dev: "border-sky-600 dark:border-sky-800 shadow-sky-600 dark:shadow-sky-800",
    Mod: "border-amber-600 dark:border-amber-800 shadow-amber-600 dark:shadow-amber-800",
    Sup: "border-blue-700 dark:border-blue-900 shadow-blue-700 dark:shadow-blue-900",
    Arch: "border-green-500 dark:border-green-700 shadow-green-500 dark:shadow-green-700",
};
---

<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage" transparentFooter={false}>
    <div class="w-full h-screen relative mb-4 z-10">
        <div style="height: calc(100vh + 1rem)">
            <BackgroundImage />
        </div>
        <drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
            <h1
                class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow tracking-wider"
                style="transition: transform .7s ease-out, opacity .7s linear; filter: drop-shadow(2px 2px 5px black);"
            >
                <span class="bg-gradient-to-tr from-yellow-400 to-yellow-300 bg-clip-text text-transparent">{t("home.title.first")}</span><span class="text-neutral-600">{t("home.title.second")}</span>
            </h1>
            <text-carousel class="h-20 w-full relative select-none">
                <h2 class="-translate-y-16">{t("home.subtitle.1")}</h2>
                <h2>
                    {t("home.subtitle.2")}
                    <PlayerCount client:idle />
                </h2>
                <h2>{t("home.subtitle.3")}</h2>
            </text-carousel>
            <a href={l("join")} class="btn btn-ghost mt-32 px-8 flex" style="animation: normal flyIn forwards 1.2s ease-out"
                >{t("home.join")}
                <CaretRight width="24" height="24" />
            </a>
            <style>
                @keyframes flyIn {
                    0% {
                        translate: 0 16px;
                        opacity: 0;
                    }

                    20% {
                        translate: 0 16px;
                        opacity: 0;
                    }

                    100% {
                        translate: 0;
                        opacity: 1;
                    }
                }
            </style>
            <script>
                class TextCarousel extends HTMLElement {
                    current = 0;

                    connectedCallback() {
                        this._current.classList.add("!opacity-100");

                        for (let i = 0; i < this.children.length; i++) {
                            if (i !== this.current) {
                                this.children[i].classList.add("translate-y-8");
                            }
                        }

                        setInterval(() => {
                            this.next();
                        }, 5000);
                    }

                    get _current() {
                        return this.children[this.current];
                    }

                    next() {
                        this._current.classList.remove("!opacity-100");
                        this._current.classList.add("translate-y-8");
                        this._current.classList.remove("!delay-500");
                        this.current = (this.current + 1) % this.children.length;
                        this._current.classList.add("!opacity-100");
                        this._current.classList.remove("translate-y-8");
                        this._current.classList.add("!delay-500");
                    }
                }

                class DropIn extends HTMLElement {
                    connectedCallback() {
                        for (let child of this.children) {
                            if (child.classList.contains("opacity-0")) {
                                child.classList.remove("opacity-0");
                                child.classList.remove("-translate-y-16");
                            } else {
                                child.children[0].classList.remove("opacity-0");
                                child.children[0].classList.remove("-translate-y-16");
                            }
                        }
                    }
                }

                customElements.define("text-carousel", TextCarousel);
                customElements.define("drop-in", DropIn);
            </script>
        </drop-in>
        <div class="absolute left-1/2 bottom-6 -translate-x-1/2">
            <PostComponent post={latestPost} slim={true} />
        </div>
    </div>
    <section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
        <div class="py-10 flex flex-col lg:flex-row">
            <Card client:idle>
                <Crosshair1 height="64" width="64" />
                <h1>{t("home.benefits.fights.title")}</h1>
                <p class="mt-4">{t("home.benefits.fights.description.1")}</p>
                <p class="mt-4">{t("home.benefits.fights.description.2")}</p>
            </Card>
            <Card client:idle>
                <Rocket height="64" width="64" />
                <h1>{t("home.benefits.bau.title")}</h1>
                <p class="mt-4">{t("home.benefits.bau.description")}</p>
            </Card>
            <Card client:idle>
                <Pause height="64" width="64" />
                <h1>{t("home.benefits.minigames.title")}</h1>
                <p class="mt-4">{t("home.benefits.minigames.description.1")}</p>
                <p class="mt-4">{t("home.benefits.minigames.description.2")}</p>
            </Card>
        </div>
    </section>
    <section class="w-full py-12 flex flex-wrap justify-center">
        {
            Object.entries(teamMember).map(([prefix, players]) => (
                <Fragment>
                    {players.map((v, index) => (
                        <div class="inline-flex flex-col justify-end">
                            {index == 0 ? <h2 class="dark:text-white text-4xl font-bold text-center md:text-left md:pl-4">{t("home.prefix." + prefix)}</h2> : null}
                            <Card extraClasses={`pt-8 pb-10 px-8 w-fit shadow-md ${prefixColorMap[prefix]}`} client:idle>
                                <figure class="flex flex-col items-center" style="width: 150px">
                                    <figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
                                    <Image
                                        src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
                                        class="transition duration-300 ease-in-out hover:scale-110 hover:backdrop-blur-lg hover:drop-shadow-2xl"
                                        alt={v.name + "s bust"}
                                        width="150"
                                        height="150"
                                    />
                                </figure>
                            </Card>
                        </div>
                    ))}
                </Fragment>
            ))
        }
    </section>
</NavbarLayout>

<style>
    text-carousel {
        > * {
            @apply absolute top-0 left-0 w-full text-xl sm:text-4xl italic text-white text-center opacity-0;
            transition:
                transform 0.5s ease-out,
                opacity 0.5s linear;
            text-shadow: 2px 2px 5px black;
        }
    }

    .barlow {
        font-family:
            Barlow Condensed,
            sans-serif;
    }

    .card {
        @apply w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg transition-transform duration-300 ease-in-out
        dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100
        hover:scale-105;

        > h1 {
            @apply text-xl font-bold mt-4;
        }

        > p {
            @apply mt-4;
        }

        > svg {
            @apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl;
        }
    }
</style>