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

export async function getStaticPaths() {
    const classEntries = await getCollection("classes");
    return classEntries.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 de l'évolution (si elle existe, sinon on crée un défaut avec le niveau 1)
const evolution = entry.data.evolution || {
    "1": entry.data.capacites_niveau_1 || [],
};
const niveaux = Object.keys(evolution).sort((a, b) => Number(a) - Number(b));
const maxLevel = niveaux[niveaux.length - 1];

const themeColor =
    entry.data.couleur_theme || `var(--color-${entry.data.encre})`;
---

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

            <div class="class-badges">
                <span
                    class="badge encre"
                    style={`border-color: ${themeColor}; color: ${themeColor}`}
                >
                    Encre {entry.data.encre}
                </span>
                <span class="badge dice">
                    Dé de vie : {entry.data.de_vie}
                </span>
            </div>

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

        <div class="class-specs">
            {
                entry.data.stats_prioritaires &&
                    entry.data.stats_prioritaires.length > 0 && (
                        <section class="spec-block">
                            <h3>Stats Prioritaires</h3>
                            <div class="tags-row">
                                {entry.data.stats_prioritaires.map((stat) => (
                                    <span class="tag">{stat}</span>
                                ))}
                            </div>
                        </section>
                    )
            }

            <section class="spec-block">
                <div class="level-header">
                    <h3>
                        Capacités : Niveau <span id="current-level-display"
                            >1</span>
                    </h3>
                    {
                        niveaux.length > 1 && (
                            <input
                                type="range"
                                id="level-slider"
                                min="1"
                                max={maxLevel}
                                value="1"
                                class="level-slider"
                            />
                        )
                    }
                </div>

                <div class="evolution-container">
                    {
                        niveaux.map((lvl) => (
                            <div
                                class="tags-row level-content"
                                data-level={lvl}
                                style={
                                    lvl === "1"
                                        ? "display: flex;"
                                        : "display: none;"
                                }
                            >
                                {evolution[lvl].map((cap) => (
                                    <span class="tag alt">{cap}</span>
                                ))}
                            </div>
                        ))
                    }
                </div>
            </section>
        </div>

        <hr class="separator" />

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

<script>
    function initLevelSlider() {
        const slider = document.getElementById(
            "level-slider",
        ) as HTMLInputElement;
        const display = document.getElementById("current-level-display");
        const contents = document.querySelectorAll(".level-content");

        if (!slider || !display) return;

        slider.addEventListener("input", (e) => {
            const val = (e.target as HTMLInputElement).value;
            display.textContent = val;

            contents.forEach((content) => {
                const htmlContent = content as HTMLElement;
                if (htmlContent.dataset.level === val) {
                    htmlContent.style.display = "flex";
                } else {
                    htmlContent.style.display = "none";
                }
            });
        });
    }

    // Initialisation au chargement et lors des transitions Astro
    initLevelSlider();
    document.addEventListener("astro:after-swap", initLevelSlider);
</script>

<style>
    .class-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;
    }

    .class-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;
    }

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

    .level-header {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid #f0eada;
    }

    h3 {
        font-family: "Cinzel", serif;
        font-size: 0.9rem;
        color: #b8860b;
        margin: 0;
    }

    /* --- NOUVEAU STYLE DU SLIDER (FLÈCHE CSS) --- */
    .level-slider {
        -webkit-appearance: none; /* Cache le style par défaut (Chrome/Safari) */
        appearance: none;
        width: 100%;
        height: 6px; /* Épaisseur de la barre */
        background: #eee5d8; /* Couleur du fond de la barre */
        border-radius: 3px;
        outline: none;
        margin: 15px 0;
        cursor: pointer;
        position: relative;
    }

    /* Le "Thumb" (la partie qu'on fait glisser) pour Webkit (Chrome, Edge, Safari, Opera) */
    .level-slider::-webkit-slider-thumb {
        -webkit-appearance: none; /* Cache la sphère par défaut */
        appearance: none;
        width: 0;
        height: 0;
        /* Dessine une flèche droite en pur CSS (triangle) */
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid #b8860b; /* Couleur de la flèche (doré dark) */

        position: relative;
        top: 0px; /* Aligne la flèche sur la barre */
        transition: transform 0.2s ease;
    }

    /* Le "Thumb" pour Firefox */
    .level-slider::-moz-range-thumb {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid #b8860b;
        border-right: none;
        background: transparent; /* Firefox nécessite un fond transparent */
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    /* Effet au survol / focus sur le thumb */
    .level-slider::-webkit-slider-thumb:hover,
    .level-slider::-webkit-slider-thumb:active {
        transform: scale(1.2) translateX(2px); /* Grossit et avance un peu */
    }

    .level-slider::-moz-range-thumb:hover,
    .level-slider::-moz-range-thumb:active {
        transform: scale(1.2) translateX(2px);
    }
    /* ------------------------------------------- */

    .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;
    }

    .tag.alt {
        border-left: 3px solid #b8860b;
    }

    .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) {
        .class-specs {
            grid-template-columns: 1fr;
        }
        .class-detail {
            padding: 1.5rem;
            border: none;
            background: transparent;
        }
    }
</style>