---
import { getCollection } from "astro:content";
import GameLayout from "../layouts/GameLayout.astro";
import Timeline from "../components/Timeline.astro";
import ContentSearch from "../components/ContentSearch.astro";

const allPosts = await getCollection("journal");

// On récupère les Ères
const eras = allPosts
    .filter((p) => p.data.isEra)
    .sort((a, b) => a.data.publishDate.valueOf() - b.data.publishDate.valueOf())
    .map((p) => ({ id: p.id, title: p.data.title }));

const chroniclesOnly = allPosts.filter((post) => !post.data.isEra);
const sortedPosts = chroniclesOnly.sort(
    (a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf(),
);
const allTags = [
    ...new Set(chroniclesOnly.flatMap((post) => post.data.tags || [])),
];
---

<GameLayout title="Sweeties Journey">
    <div class="index-container">
        <header class="dnd-header">
            <h1 class="dnd-title">Sweeties Journey</h1>
            <div class="dnd-bar"></div>
            <p class="dnd-intro">
                Chroniques des aventures d'une portion de nouilles de la
                communauté, idée originale de Orson Pattes Givrées
            </p>
        </header>

        <div class="creation-button-container">
            <a href="/creation" class="creation-button"
                >Création de Personnage</a
            >
        </div>

        <Timeline eras={eras} />

        <ContentSearch posts={sortedPosts} tags={allTags} basePath="journal" />
    </div>
</GameLayout>

<style is:global>
    .creation-button-container {
        text-align: center;
        margin: 3rem 0;
    }

    a .creation-button {
        font-family: "Cinzel", serif;
        font-size: 1.2rem;
        background: #c89b3c;
        color: white;
        border: none;
        padding: 0.75rem 2rem;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        text-decoration: none;
        display: inline-block;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    }

    a .creation-button:hover {
        background: #a27c2c;
    }

    .index-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    /* Le style du titre DnD reste le même que précédemment */
    .dnd-header {
        margin: 2rem 0;
    }
    .dnd-title {
        font-family: "Playfair Display", serif;
        font-size: 3.5rem;
        color: #c89b3c;
        margin: 0;
    }
    .dnd-bar {
        height: 4px;
        background: linear-gradient(to right, #c89b3c 0%, transparent 100%);
        margin-top: 4px;
    }
    .dnd-intro {
        font-family: "Cinzel", serif;
        font-size: 0.9rem;
        margin-top: 1rem;
        opacity: 0.8;
    }
</style>

<script>
    function setupEraFiltering() {
        const eraButtons = document.querySelectorAll(".era-chip");
        const posts = document.querySelectorAll(".gold-button");

        eraButtons.forEach((button) => {
            button.addEventListener("click", () => {
                const selectedEra = button.getAttribute("data-era");

                // Toggle active class
                eraButtons.forEach((btn) => btn.classList.remove("active"));
                button.classList.add("active");

                posts.forEach((post) => {
                    const postEra = post.getAttribute("data-era");
                    if (selectedEra === "all" || postEra === selectedEra) {
                        (post as HTMLElement).style.display = "block";
                    } else {
                        (post as HTMLElement).style.display = "none";
                    }
                });
            });
        });
    }
    document.addEventListener("astro:page-load", setupEraFiltering);
</script>