---
import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";

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

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

<Layout title="Hebel - Collection">
    <header class="collection-header">
        <a href="/" class="back-link">← Retour au flux</a>
        <h1>Toute la Collection</h1>
    </header>

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

                    <div class="user-flex-row">
                        {cards.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>
            ))
        }
    </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: 20px; /* Gap simple comme demandé */
        justify-content: flex-center;
    }

    .entry-meta {
        font-family: "Inter", sans-serif;
        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;
    }

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

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

    /* Adaptabilité mobile [cite: 96] */
    @media (max-width: 480px) {
        .user-flex-row {
            gap: 15px;
            justify-content: center;
        }
        .card-scaler {
            transform: scale(0.9);
        }
    }
</style>