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

const classes = await getCollection("classes");
const especes = await getCollection("especes");
const personnages = await getCollection("personnages");

const SPECTRUM = {
    // Encres (Classes) - Opacité 1.0
    martial: "rgba(230, 57, 70, 1)",
    arcane: "rgba(0, 112, 255, 1)",
    divin: "rgba(200, 155, 60, 1)",
    primal: "rgba(42, 157, 143, 1)",
    hybride: "rgba(100, 100, 100, 1)",

    // Spectres (Espèces) - Opacité 0.4 (pour une meilleure visibilité)
    solaire: "rgba(200, 155, 60, 0.4)",
    elementaire: "rgba(0, 171, 255, 0.4)",
    terrestre: "rgba(139, 69, 19, 0.4)",
    sylvestre: "rgba(0, 128, 0, 0.4)",
    ombre: "rgba(75, 0, 130, 0.4)",
};

// 1. Groupement par CLASSE (Bordure BAS = Espèce)
const classData = personnages.reduce((acc, p) => {
    const pEspeceData = especes.find(
        (e) => e.id.toLowerCase() === p.data.espece?.toLowerCase(),
    );
    const spectreKey = pEspeceData?.data.spectre?.toLowerCase();

    p.data.classes_detail.forEach((c) => {
        if (!c.nom) return;
        const key = c.nom.toLowerCase();
        if (!acc[key]) acc[key] = [];

        acc[key].push({
            id: p.id, // ID nécessaire pour le lien
            nom: p.data.nom,
            niveau_classe: c.niveau,
            colorSpectre: SPECTRUM[spectreKey] || "rgba(200, 200, 200, 0.5)",
        });
    });
    return acc;
}, {});

// 2. Groupement par ESPECE (Bordure HAUT = Classe principale)
const especeData = personnages.reduce((acc, p) => {
    if (!p.data.espece) return acc;
    const key = p.data.espece.toLowerCase();
    if (!acc[key]) acc[key] = [];

    const mainClassName = p.data.classes_detail?.[0]?.nom;
    const pClassData = classes.find(
        (cl) =>
            cl.id.toLowerCase() === mainClassName?.toLowerCase() ||
            cl.data.title?.toLowerCase() === mainClassName?.toLowerCase(),
    );
    const encreKey = pClassData?.data.encre?.toLowerCase();

    acc[key].push({
        id: p.id, // ID nécessaire pour le lien
        nom: p.data.nom,
        niveau: p.data.niveau_global || 1,
        colorEncre: SPECTRUM[encreKey] || "#ffffff",
    });
    return acc;
}, {});
---

<GameLayout title="Création de Personnage">
    <div class="creation-container">
        <section class="character-select">
            <h2 class="dnd-title">Choisissez votre Classe</h2>
            <div class="dnd-bar"></div>
            <p class="dnd-intro">
                La classe définit vos compétences et votre rôle.
            </p>

            <div class="class-grid">
                {
                    classes.map((charClass) => {
                        const charactersInClass =
                            classData[charClass.id.toLowerCase()] || [];
                        const colorEncre =
                            SPECTRUM[charClass.data.encre] || "#c89b3c";

                        return (
                            <div
                                class="class-card"
                                style={`--accent-color: ${colorEncre}`}
                            >
                                <h3 class="dynamic-title">
                                    {charClass.data.title}
                                </h3>
                                <div class="bubble-container">
                                    {charactersInClass.map((p) => (
                                        <a
                                            href={`/personnages/${p.id}`}
                                            class="notification-bubble bubble-species-border"
                                            style={`--p-color: ${p.colorSpectre}`}
                                        >
                                            <span class="p-name">{p.nom}</span>
                                            <span class="p-lvl">
                                                Niv.{p.niveau_classe}
                                            </span>
                                        </a>
                                    ))}
                                </div>
                                <p>{charClass.data.description}</p>
                                <a
                                    href={`/classes/${charClass.id}`}
                                    class="select-button"
                                >
                                    Détails
                                </a>
                            </div>
                        );
                    })
                }
            </div>
        </section>

        <section class="character-select">
            <h2 class="dnd-title">Choisissez votre Espèce</h2>
            <div class="dnd-bar"></div>
            <p class="dnd-intro">
                L'espèce influence votre apparence et votre histoire.
            </p>

            <div class="class-grid">
                {
                    especes.map((espece) => {
                        const charactersInEspece =
                            especeData[espece.id.toLowerCase()] || [];
                        const colorBg =
                            SPECTRUM[espece.data.spectre] ||
                            "rgba(255,255,255,1)";

                        return (
                            <div
                                class="class-card species-card"
                                style={`--bg-color: ${colorBg}`}
                            >
                                <h3>{espece.data.title}</h3>
                                <div class="bubble-container">
                                    {charactersInEspece.map((p) => (
                                        <a
                                            href={`/personnages/${p.id}`}
                                            class="notification-bubble bubble-class-border"
                                            style={`--p-color: ${p.colorEncre}`}
                                        >
                                            <span class="p-name">{p.nom}</span>
                                            <span class="p-lvl">
                                                Niv.{p.niveau}
                                            </span>
                                        </a>
                                    ))}
                                </div>
                                <p>{espece.data.description}</p>
                                <a
                                    href={`/especes/${espece.id}`}
                                    class="select-button species-button"
                                >
                                    Détails
                                </a>
                            </div>
                        );
                    })
                }
            </div>
        </section>
    </div>
</GameLayout>

<style>
    .creation-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }
    .character-select {
        margin: 4rem 0;
    }
    .dnd-title {
        font-family: "Playfair Display", serif;
        font-size: 2.5rem;
        color: #c89b3c;
        text-align: center;
    }
    .dnd-bar {
        height: 3px;
        background: linear-gradient(
            to right,
            transparent,
            #c89b3c,
            transparent
        );
        margin: 4px auto 1rem;
        width: 50%;
    }
    .dnd-intro {
        font-family: "Cinzel", serif;
        font-size: 0.9rem;
        text-align: center;
        opacity: 0.8;
        margin-bottom: 2rem;
    }
    .class-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
    }
    .class-card {
        background-color: white;
        padding: 2rem 1.5rem;
        border-radius: 5px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: all 0.3s ease;
    }
    .dynamic-title {
        color: var(--accent-color) !important;
        font-family: "Playfair Display", serif;
        font-size: 1.8rem;
    }
    .species-card {
        background-color: var(--bg-color) !important;
    }
    .notification-bubble {
        background: #1a1a1a !important;
        color: white !important;
        font-family: "Cinzel", serif;
        font-size: 0.7rem;
        padding: 4px 10px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        text-decoration: none; /* Important pour les liens */
        transition: transform 0.2s ease;
    }
    .notification-bubble:hover {
        transform: translateY(-2px);
        filter: brightness(1.2);
    }
    .bubble-species-border {
        background-color: var(--p-color) !important;
        border-bottom: 3px solid var(--p-color) !important;
        box-shadow: inset 0 -2px 0 0 var(--p-color);
    }
    .bubble-class-border {
        border-top: 3px solid var(--p-color) !important;
    }
    .p-lvl {
        font-size: 0.6rem;
        opacity: 0.7;
        padding-left: 5px;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }
    .bubble-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin-bottom: 1.5rem;
        min-height: 30px;
    }
    .select-button {
        font-family: "Cinzel", serif;
        text-decoration: none;
        padding: 0.5rem 1rem;
        border: 1px solid var(--accent-color);
        color: var(--accent-color);
        transition: all 0.3s;
    }
    .select-button:hover {
        background: var(--accent-color);
        color: white;
    }
    .species-button {
        border-color: #1a1a1a;
        color: #1a1a1a;
    }
    .species-button:hover {
        background: #1a1a1a;
        color: white;
    }
    .class-card p {
        font-family: "Cinzel", serif;
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
        flex-grow: 1;
    }
</style>