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

export async function getStaticPaths() {
    const personnages = await getCollection("personnages");
    return personnages.map((p) => ({
        params: { id: p.id },
        props: { p },
    }));
}

const { p } = Astro.props;
const { Content } = await render(p);

// Logique métier
const getMod = (score) => Math.floor((score - 10) / 2);
const formatMod = (mod) => (mod >= 0 ? `+${mod}` : mod);
const statsOrder = [
    "force",
    "dexterite",
    "constitution",
    "intelligence",
    "sagesse",
    "charisme",
];
const classesLabel = p.data.classes_detail
    ?.map((c) => `${c.nom} (Niv.${c.niveau})`)
    .join(" / ");
---

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

            <div class="header-badges">
                <div class="mastery">
                    Maîtrise <span>+{p.data.maitrise || 0}</span>
                </div>
                {
                    p.data.inspiration && (
                        <div class="inspiration">✧ Inspiration</div>
                    )
                }
            </div>

            <h1>{p.data.nom}</h1>
            {p.data.titre && <p class="titre-honorifique">{p.data.titre}</p>}
            <p class="meta">{p.data.espece} • {classesLabel}</p>
            <h3>Niveau Global : {p.data.niveau_global}</h3>
        </header>

        <div class="visual-and-stats">
            <div class="canvas-area">
                <div id="character-canvas-container">
                    <span>Canvas Illustration</span>
                </div>
                {
                    p.data.description_physique && (
                        <p class="physique">{p.data.description_physique}</p>
                    )
                }
            </div>

            <div class="stats-grid">
                {
                    statsOrder.map((s) => {
                        const val = p.data.stats?.[s] || 10;
                        const isProf = p.data.sauvegardes?.includes(s);
                        return (
                            <div
                                class={`stat-tag ${isProf ? "proficient" : ""}`}
                            >
                                <span class="s-label">{s.slice(0, 3)}</span>
                                <span class="s-mod">
                                    {formatMod(getMod(val))}
                                </span>
                                <span class="s-val">({val})</span>
                            </div>
                        );
                    })
                }
            </div>
        </div>

        <hr class="separator" />

        <div class="technical-info">
            <section>
                <h3>Traits & Capacités</h3>
                <div class="tags-row">
                    {
                        p.data.traits_espece?.map((t) => (
                            <span class="tag">{t}</span>
                        ))
                    }
                    {
                        p.data.capacites_classe?.map((c) => (
                            <span class="tag alt">{c}</span>
                        ))
                    }
                </div>
            </section>
            <section>
                <h3>Équipement & Sorts</h3>
                <div class="tags-row">
                    {
                        p.data.armes?.map((a) => (
                            <span class="tag weapon">{a}</span>
                        ))
                    }
                    {
                        p.data.sorts?.map((s) => (
                            <span class="tag spell">{s}</span>
                        ))
                    }
                </div>
            </section>
            <section>
                <h3>Outils</h3>
                <div class="tags-row">
                    {
                        p.data.outils?.map((t) => (
                            <span class="tag tool">{t}</span>
                        ))
                    }
                </div>
            </section>
        </div>

        <div class="story-divider"><span>Histoire</span></div>

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

<style>
    /* BASE (Mobile First) */
    .character-sheet {
        background: white;
        border: 1px solid #dcd0b9;
        border-radius: 8px;
        padding: 1.5rem 1rem; /* Padding réduit type Journal */
        max-width: 850px;
        margin: 1rem auto;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
    }

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

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

    .header-badges {
        display: flex;
        justify-content: center;
        gap: 15px;
        font-family: "Cinzel", serif;
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
        color: #b8860b;
    }

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

    .titre-honorifique {
        font-style: italic;
        opacity: 0.8;
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }
    .meta {
        font-family: "Cinzel", serif;
        font-size: 0.8rem;
        color: #b8860b;
        letter-spacing: 1px;
    }

    /* LAYOUT MOBILE */
    .visual-and-stats {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    #character-canvas-container {
        width: 100%;
        aspect-ratio: 1;
        background: #fcfaf7;
        border: 1px solid #eee5d8;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #dcd0b9;
        font-family: "Cinzel", serif;
        font-size: 0.8rem;
    }

    .physique {
        font-size: 0.85rem;
        font-style: italic;
        color: #7a7362;
        margin-top: 0.5rem;
        text-align: center;
    }

    /* STATS EN TAGS (Ultra lisible) */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .stat-tag {
        background: #f9f7f2;
        border: 1px solid #eee5d8;
        padding: 6px;
        text-align: center;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
    }
    .stat-tag.proficient {
        border-color: #b8860b;
        background: #fffdf5;
    }
    .s-label {
        font-size: 0.6rem;
        font-family: "Cinzel", serif;
        color: #b8860b;
    }
    .s-mod {
        font-size: 1.1rem;
        font-weight: bold;
    }
    .s-val {
        font-size: 0.65rem;
        opacity: 0.5;
    }

    /* TECHNIQUES & TAGS */
    .technical-info section {
        margin-bottom: 1.5rem;
    }
    h3 {
        font-family: "Cinzel", serif;
        font-size: 0.85rem;
        border-bottom: 1px solid #f0eada;
        padding-bottom: 4px;
        margin-bottom: 0.8rem;
    }
    .tags-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .tag {
        font-size: 0.75rem;
        padding: 3px 8px;
        border: 1px solid #eee5d8;
        background: #fff;
        border-radius: 3px;
    }
    .tag.alt {
        border-left: 3px solid #b8860b;
    }
    .tag.spell {
        border-left: 3px solid #0070ff;
    }

    .separator {
        border: 0;
        height: 1px;
        background-image: linear-gradient(
            to right,
            transparent,
            #dcd0b9,
            transparent
        );
        margin: 2rem 0;
    }
    .story-divider {
        text-align: center;
        margin: 3rem 0 2rem;
        border-bottom: 1px solid #dcd0b9;
        height: 10px;
    }
    .story-divider span {
        background: white;
        padding: 0 15px;
        font-family: "Cinzel", serif;
        font-size: 0.75rem;
        color: #b8860b;
        text-transform: uppercase;
    }

    .prose-content {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #4a453c;
    }

    /* MEDIA QUERIES (Desktop) */
    @media (min-width: 768px) {
        .character-sheet {
            padding: 3rem;
            margin: 2rem auto;
        }
        h1 {
            font-size: 2.8rem;
        }
        .visual-and-stats {
            flex-direction: row;
            align-items: flex-start;
        }
        .canvas-area {
            flex: 1;
        }
        .stats-grid {
            flex: 1;
            grid-template-columns: repeat(2, 1fr);
        }
        .technical-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
    }

    /* MEDIA QUERIES (Pure Mobile - On retire les bordures comme dans ton journal) */
    @media (max-width: 640px) {
        .character-sheet {
            padding: 1.5rem 1rem;
            border: none;
            background: transparent;
            box-shadow: none;
        }
        .story-divider span {
            background: #fcfaf7; /* Ajuste selon ton fond de page GameLayout */
        }
    }
</style>
