ambient/src/pages/collection.astro

---
import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
import EventCard from "../components/EventCard.astro";
import BankCard from "../components/BankCard.astro"; // Import du nouveau composant

const allHumans = await getCollection("humans");
const myHumans = allHumans.filter((entry: any) => entry.id.startsWith("latchimynicolas/"));


const allEvents = await getCollection("events");
const allBanks = await getCollection("banks"); // Récupération des cartes banques/objets

// 1. Tri chronologique global
const sortedEntries = allHumans.sort(
    (a: any, b: any) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
);

const sortedEvents = allEvents.sort(
    (a: any, b: any) => new Date(a.data.date).getTime() - new Date(b.data.date).getTime(),
);

const sortedBanks = allBanks.sort(
    (a: any, b: any) => a.data.name.localeCompare(b.data.name));

// 2. Groupement par utilisateur
const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
    const userName = entry.data.name;
    if (!acc[userName]) acc[userName] = [];
    acc[userName].push(entry);
    return acc;
}, {});

---

<Layout title="Collection">
    <header class="collection-header">
        <a href="/" class="back-link">← Retour au flux</a>
        <h1>Collection</h1>
        <p class="back-link">Cliquer sur une carte pour en voir les détails.</p>
    </header>

    <main class="collection-container">
        {/* SECTION HUMAINS */}
        {
            Object.entries(groupedHumans).map(([userName, cards]) => (
                <section class="user-collection">
                    <h2 class="user-title">
                        {userName}
                        <span>({(cards as any[]).length} souffles)</span>
                    </h2>

                    <div class="user-flex-row">
                        {
                            (cards as any[]).map((entry) => (
                                <a
                                    href={`/${entry.id.replace(/\.md$/, "")}`}
                                    class="card-link"
                                >
                                    <div class="card-scaler">
                                        <Card frontmatter={entry.data} />
                                        <div class="entry-meta">
                                            <p>
                                                {new Date(entry.data.date).toLocaleDateString("fr-FR")}
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            ))
                        }
                    </div>
                    <hr class="separator" />
                </section>
            ))
        }

        {/* SECTION ÉVÉNEMENTS (Même structure que les humains) */}
        {
            sortedEvents.length > 0 && (
                <section class="user-collection">
                    <h2 class="user-title">
                        Événements <span>({sortedEvents.length} cartes)</span>
                    </h2>
                    <div class="user-flex-row">
                        {sortedEvents.map((event) => (
                            <a
                                href={`/${event.id.replace(/\.md$/, "")}`}
                                class="card-link"
                            >
                                <div class="card-scaler">
                                    <EventCard frontmatter={event.data} />
                                    <div class="entry-meta">
                                        <p>
                                            Détecté le :{" "}
                                            {event.data.target_date}
                                        </p>
                                    </div>
                                </div>
                            </a>
                        ))}
                    </div>
<hr class="separator" />
                </section>

                <section class="user-collection">
                            <h2 class="user-title">Trésoreries <span>(Sources de Flux)</span></h2>
                            <div class="user-flex-row">
                                {
                                    sortedBanks.map((bank) => (
                                        <div class="card-link">
                                            <div class="card-scaler">
                                                {bank.data.sub_category === "finances" ? (
                                                    <BankCard frontmatter={bank.data} allHumans={myHumans} />
                                                ) : (
                                                    /* Autre type de stuff si nécessaire */
                                                    <div class="tcg-card">Objet: {bank.data.name}</div>
                                                )}
                                            </div>
                                        </div>
                                    ))
                                }
                            </div>
                        </section>
            )
        }
    </main>
</Layout>

<style>
    .collection-header {
        padding: 40px;
        text-align: center;
    }

    .back-link {
        color: #64748b;
        text-decoration: none;
        font-size: 0.9rem;
    }

    .collection-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px 40px;
    }

    .user-collection {
        margin-bottom: 60px;
    }

    .user-title {
        font-family: "Philosopher", serif;
        font-size: 1.5rem;
        color: #1e293b;
        margin-bottom: 25px;
        border-left: 5px solid #333;
        padding-left: 15px;
    }

    .user-title span {
        font-size: 0.9rem;
        color: #94a3b8;
        font-weight: normal;
    }

    .user-flex-row {
        display: flex;
        flex-wrap: wrap;
        gap: 45px; /* Gap simple comme demandé */
        justify-content: flex-start;
        padding: 20px 0;
        margin-bottom: 100px;
    }

    .entry-meta {
        font-family: "Inter", sans-serif;
        position: relative;
        top: 5px;
        font-size: 0.8rem;
        color: #94a3b8;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: 1px;
    }

    .card-link {
        text-decoration: none;
        transition: transform 0.3s ease;

        /* 1. On définit la taille "réelle" que prendra la carte dans le flux */
        /* Si ta Card fait 300px de large, on met 150px ici */
        width: 230px;
        height: 375px;

        /* 2. On autorise le contenu à déborder visuellement de la boîte logicielle */
        overflow: visible;
    }

    .card-link:hover {
        transform: translateY(-5px);
    }

    .card-scaler {
        /* 3. On réduit l'échelle */
        transform: scale(0.8);

        /* 4. On fixe l'origine en haut à gauche pour que la carte
               se cale parfaitement dans le coin du .card-link */
        transform-origin: top left;

        /* 5. On s'assure que la carte garde sa taille originale en interne
               pour ne pas briser le layout interne de <Card /> */
        width: 300px;
        height: 440px;
    }

    .separator {
        margin-top: 50px;
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* Adaptabilité mobile */
    @media (max-width: 480px) {
        .user-flex-row {
            display: flex; /*  */
            flex-wrap: wrap; /*  */
            gap: 10px; /* Espacement horizontal entre les colonnes */
            justify-content: center; /* [cite: 36] */
            padding: 0;
        }

        .card-link {
            /* On force la largeur à un tiers de l'écran moins le gap */
            width: calc(45%);
            /* On réduit la hauteur de la boîte pour que le separator remonte */
            height: 190px;
            text-decoration: none; /* [cite: 33] */
            display: block;
            overflow: visible;
        }

        .card-scaler {
            transform: scale(0.4) !important; /* On force le scale à 0.3 */
            transform-origin: top left; /* Indispensable pour coller au bord haut-gauche */
            width: 300px; /* Taille originale [cite: 23] */
            height: 440px; /* Taille originale [cite: 24] */
        }

        .entry-meta {
            /* On masque ou on réduit drastiquement la méta pour gagner de la place */
            font-size: 0.5rem; /* [cite: 32] */
            margin-top: -5px;
            white-space: nowrap;
        }
    }
</style>