---
import { getCollection } from "astro:content";
import GameLayout from "../layouts/GameLayout.astro";
import Timeline from "../components/Timeline.astro";
import ContentSearch from "../components/ContentSearch.astro";
import Header from "../components/Header.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) => {
    const dateDiff =
        b.data.publishDate.valueOf() - a.data.publishDate.valueOf();

    // Si les dates sont identiques, on trie par titre (001, 002, etc.)
    if (dateDiff === 0) {
        return a.data.title.localeCompare(b.data.title);
    }

    return dateDiff;
});
const allTags = [
    ...new Set(chroniclesOnly.flatMap((post) => post.data.tags || [])),
];
---

<GameLayout title="Sweeties Journey">
    <div class="index-container">
        <Header />

        <Timeline eras={eras} />

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

<style is:global>
    .index-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    /* Conteneur de la carte pour permettre le positionnement absolu du tag */
    .gold-button {
        position: relative;
        overflow: hidden; /* Pour couper le ruban si nécessaire */
        padding-top: 1.5rem; /* On laisse de la place pour le tag en haut */
    }

    /* Le petit tag horizontal en haut à droite */
    .gold-button[data-era]:not([data-era=""])::before {
        content: attr(data-era);
        position: absolute;
        top: 0;
        right: 0;
        background-color: #c89b3c; /* Ton doré DnD [cite: 15] */
        color: white;
        font-family: "Cinzel", serif;
        font-size: 0.6rem;
        font-weight: bold;
        padding: 2px 8px;
        text-transform: uppercase;
        border-bottom-left-radius: 4px;
        letter-spacing: 0.5px;
        pointer-events: none; /* Pour que le clic passe au travers vers le lien */
    }

    /* Style spécifique pour l'état "off" */
    .gold-button.is-off::before {
        background-color: #666; /* Tag grisé pour les histoires hors-série */
        opacity: 0.8;
    }

    /* --- COULEUR SPÉCIFIQUE POUR UNE ÈRE --- */
    /* On cible l'identifiant "lastchope" */
    .gold-button[data-era="lastchope"] {
        background-color: #1e1405 !important; /* Un fond parchemin léger */
        border-color: #722f37 !important; /* Une bordure lie-de-vin */
    }

    /* On change aussi la couleur du petit tag pour cette ère */
    .gold-button[data-era="lastchope"]::before {
        background-color: #722f37 !important;
        color: #f3ece0 !important;
    }

    /* On cible l'identifiant "prelude" */
    .gold-button[data-era="prelude"] {
        border-color: #3c86c8 !important; /* Une bordure lie-de-vin */
    }

    /* On cible l'identifiant "prelude" */
    .gold-button[data-era="prelude"] .title {
        color: #3c86c8 !important; /* Une bordure lie-de-vin */
    }

    /* On change aussi la couleur du petit tag pour cette ère */
    .gold-button[data-era="prelude"]::before {
        background-color: #3c86c8 !important;
        color: #f3ece0 !important;
    }
</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>
