---
import { getCollection, render } from "astro:content";
import GameLayout from "../../layouts/GameLayout.astro";

export async function getStaticPaths() {
    const especeEntries = await getCollection("especes");
    return especeEntries.map((entry) => ({
        params: { slug: entry.id },
        props: { entry },
    }));
}

const { entry } = Astro.props;
if (!entry) return Astro.redirect("/404");

const { Content } = await render(entry);

/**
 * RÉCUPÉRATION DU MAPPING SPECTRE
 * Utilise les variables définies dans GameLayout.astro
 * (ex: --color-terrestre, --color-solaire, etc.)
 */
const themeColor = `var(--color-${entry.data.spectre})`;
---

<GameLayout title={entry.data.title}>
    <article class="espece-detail">
        <header class="post-header">
            <a href="/creation" class="back-nav">← Retour à la création</a>

            <div class="espece-badges">
                <span
                    class="badge spectre"
                    style={`border-color: ${themeColor}; color: ${themeColor}`}
                >
                    Spectre {entry.data.spectre}
                </span>
                <span class="badge speed">
                    Vitesse : {entry.data.vitesse}
                </span>
            </div>

            <h1>{entry.data.title}</h1>
            <p class="description">{entry.data.description}</p>
        </header>

        <div class="espece-specs">
            {
                entry.data.bonus_stats &&
                    Object.keys(entry.data.bonus_stats).length > 0 && (
                        <section class="spec-block">
                            <h3>Bonus de Caractéristiques</h3>
                            <div class="stats-bonus-grid">
                                {Object.entries(entry.data.bonus_stats).map(
                                    ([stat, bonus]) => (
                                        <div class="stat-bonus-tag">
                                            <span class="stat-name">
                                                {stat}
                                            </span>
                                            <span class="stat-value">
                                                +{bonus}
                                            </span>
                                        </div>
                                    ),
                                )}
                            </div>
                        </section>
                    )
            }

            {
                entry.data.traits_raciaux &&
                    entry.data.traits_raciaux.length > 0 && (
                        <section class="spec-block">
                            <h3>Traits Raciaux</h3>
                            <div class="tags-row">
                                {entry.data.traits_raciaux.map((trait) => (
                                    <span class="tag">{trait}</span>
                                ))}
                            </div>
                        </section>
                    )
            }
        </div>

        {
            entry.data.langues && entry.data.langues.length > 0 && (
                <section class="languages-section">
                    <h3>Langues connues</h3>
                    <p class="languages-list">
                        {entry.data.langues.join(", ")}
                    </p>
                </section>
            )
        }

        <hr class="separator" />

        <div class="prose-content">
            <Content />
        </div>
    </article>
</GameLayout>

<style>
    .espece-detail {
        background: white;
        border: 1px solid #dcd0b9;
        border-radius: 8px;
        padding: 2.5rem;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
        max-width: 800px;
        margin: 2rem auto;
    }

    .back-nav {
        font-family: "Cinzel", serif;
        font-size: 0.8rem;
        color: #b8860b;
        text-decoration: none;
        display: block;
        margin-bottom: 1.5rem;
    }

    .post-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .espece-badges {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 1rem;
    }

    .badge {
        font-family: "Cinzel", serif;
        font-size: 0.7rem;
        text-transform: uppercase;
        padding: 2px 10px;
        border: 1px solid #dcd0b9;
        border-radius: 12px;
        color: #7a7362;
    }

    h1 {
        margin: 0.5rem 0;
        font-family: "Cinzel", serif;
        font-size: 2.5rem;
        color: #3a352a;
    }

    .description {
        font-style: italic;
        color: #7a7362;
        max-width: 600px;
        margin: 0 auto;
    }

    .espece-specs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-top: 2rem;
        text-align: left;
    }

    h3 {
        font-family: "Cinzel", serif;
        font-size: 0.9rem;
        color: #b8860b;
        border-bottom: 1px solid #f0eada;
        margin-bottom: 0.8rem;
    }

    .stats-bonus-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .stat-bonus-tag {
        background: #fffdf5;
        border: 1px solid #b8860b;
        padding: 4px 10px;
        border-radius: 4px;
        display: flex;
        gap: 8px;
        font-size: 0.85rem;
    }

    .stat-name {
        text-transform: capitalize;
        font-weight: 500;
    }
    .stat-value {
        font-weight: bold;
        color: #b8860b;
    }

    .tags-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .tag {
        font-size: 0.8rem;
        padding: 4px 10px;
        background: #fcfaf7;
        border: 1px solid #eee5d8;
        border-radius: 4px;
    }

    .languages-section {
        margin-top: 1.5rem;
    }

    .languages-list {
        font-size: 0.9rem;
        color: #4a453c;
    }

    .separator {
        border: 0;
        height: 1px;
        background-image: linear-gradient(
            to right,
            transparent,
            #dcd0b9,
            transparent
        );
        margin: 2.5rem 0;
    }

    .prose-content {
        font-size: 1.1rem;
        line-height: 1.7;
    }

    @media (max-width: 640px) {
        .espece-specs {
            grid-template-columns: 1fr;
        }
        .espece-detail {
            padding: 1.5rem;
            border: none;
            background: transparent;
        }
    }
</style>
