---
const { frontmatter, streakCount = 1 } = Astro.props;
const { birthDate, health, manifestations, date, name } = frontmatter;
const medicationTaken = health?.mental?.medication ?? false;

// 1. CALCUL DU NIVEAU ET VARIABLES DE BASE
const referenceDate = new Date(date);
const birth = new Date(birthDate);
let age = referenceDate.getFullYear() - birth.getFullYear();
if (
    new Date(referenceDate.getFullYear(), birth.getMonth(), birth.getDate()) >
    referenceDate
)
    age--;

const stress = health?.somatic?.stress_level ?? 2;
const hallucinations = health?.mental?.hallucinations ?? 0;
const sleepBase = health?.somatic?.sleep_avg ?? 7.5;
const energy = health?.somatic?.energy_level ?? 5;
const hygieneScore = health?.somatic?.hygiene_level ?? 5;

// 2. RÉINTÉGRATION DES COMPTAGES
const counts = {
    PRO: manifestations?.filter((m) => m.cercle === "PRO").length || 0,
    SAN: manifestations?.filter((m) => m.cercle === "SAN").length || 0,
    SOC: manifestations?.filter((m) => m.cercle === "SOC").length || 0,
    FLX: manifestations?.filter((m) => m.cercle === "FLX").length || 0,
    HYG: manifestations?.filter((m) => m.cercle === "HYG").length || 0,
};

// 3. SCORE D'HARMONIE RAFFINÉ
const rawHarmony =
    manifestations?.reduce((acc, m) => {
        if (m.type === "pos") return acc + 1;
        if (m.type === "neg") return acc - 1;
        return acc;
    }, 0) || 0;

const uniqueCercles = new Set(manifestations?.map((m) => m.cercle)).size;
const hasAllCercles = uniqueCercles === 5;
const harmonyScore = rawHarmony + (hasAllCercles ? 2 : 0);

// 4. SYSTÈME DE RARETÉ ET SHINY
let rarity = "COMMUNE";
let isShiny = false;

// Condition Shiny : Dès 3 jours de série + équilibre des cercles
if (streakCount >= 3 && uniqueCercles >= 3) {
    isShiny = true;
}

// Paliers de Rareté
if (streakCount >= 3) rarity = "PEU COMMUNE";
if (streakCount >= 6) rarity = "RARE"; // Ta situation actuelle
if (streakCount >= 10 && harmonyScore >= 4) rarity = "LÉGENDAIRE";
if (streakCount >= 20 && hallucinations === 0) rarity = "MYTHIQUE";

// 5. STATS TCG (Avec bonus de série)
const autoMotivation =
    health?.mental?.motivation ?? Math.min(10, uniqueCercles * 2.5);
const streakBonus = Math.floor(streakCount / 7);
const autoAtk = Math.min(
    15,
    counts.PRO * 2 +
        Math.floor(autoMotivation / 4) +
        Math.floor(energy / 3) + // L'énergie booste l'attaque
        (harmonyScore > 0 ? 1 : 0) +
        streakBonus,
);
const sleepPenalty = sleepBase - (counts.PRO > 5 ? 1 : 0) < 6 ? 2 : 0;
const autoDef = Math.max(
    0,
    10 +
        Math.floor(hygieneScore / 2) -
        stress -
        hallucinations -
        sleepPenalty +
        streakBonus,
);
const autoCost = Math.max(1, Math.ceil((manifestations?.length || 0) / 2));

// 6. LOGIQUE DES BIOMES [cite: 39, 40, 41, 42, 43, 44]
let autoBiome = "SAVANE";
let biomeReason = "Équilibre par défaut";
if (stress > 7 || hallucinations >= 2 || harmonyScore <= -3) {
    autoBiome = "ETANG";
    biomeReason = "Alerte Santé / Harmonie critique";
} else if (uniqueCercles >= 3 && counts.SAN > 0) {
    autoBiome = "BELOUVE";
    biomeReason = "Harmonie des Cercles";
} else if (counts.SOC > counts.PRO || counts.FLX > 2) {
    autoBiome = "OCEAN";
    biomeReason = "Flux Social & Émotionnel";
} else if (counts.PRO >= 2 && counts.PRO >= counts.SOC) {
    autoBiome = "FOURNAISE";
    biomeReason = "Dominance Technique (PRO)";
}

const biomes = {
    ETANG: {
        color: "#737e71",
        label: "L'Inerte",
        strong: "SAVANE",
        weak: "OCEAN",
    },
    SAVANE: {
        color: "#e2d1a4",
        label: "La Clarté",
        strong: "FOURNAISE",
        weak: "BELOUVE",
    },
    OCEAN: {
        color: "#85a9bc",
        label: "Le Flux",
        strong: "FOURNAISE",
        weak: "BELOUVE",
    },
    BELOUVE: {
        color: "#5b8c5d",
        label: "La Racine",
        strong: "ETANG",
        weak: "FOURNAISE",
    },
    FOURNAISE: {
        color: "#b35d4d",
        label: "La Forge",
        strong: "BELOUVE",
        weak: "OCEAN",
    },
};
const currentBiome = biomes[autoBiome] || biomes.SAVANE;

const circleSummaries = Object.entries(counts)
    .filter(([_, count]) => count > 0)
    .map(([type, count]) => ({
        type,
        count,
        dominance:
            manifestations?.find((m) => m.cercle === type && m.type)?.type ||
            "neu",
    }));

// LAYER AUTO : Les constantes biologiques et calculées
const autoLayer = [
    {
        label: "Sommeil",
        value: `${sleepBase}h`,
        status: sleepBase < 6 ? "critique" : "stable",
    },
    {
        label: "Énergie",
        value: `${energy}/10`,
        status: energy < 3 ? "bas" : "normal",
    },
    {
        label: "Hallucinations",
        value: hallucinations,
        status: hallucinations > 4 ? "alerte" : "calme",
    },
    { label: "Stabilité", value: currentBiome.label, status: "info" },
    {
        label: "Traitement",
        value: medicationTaken ? "Pris" : "Absent",
        status: medicationTaken ? "stable" : "critique",
    },
];

// LAYER MANUEL : Les leviers d'action et ressentis
const manualLayer = [
    { label: "Stress ressenti", value: `${stress}/10` },
    { label: "Hygiène foyer", value: `${hygieneScore}/10` },
    {
        label: "Harmonie globale",
        value: harmonyScore > 0 ? `+${harmonyScore}` : harmonyScore,
    },
];
---

<article
    class={`tcg-card ${isShiny ? "shiny" : ""} ${rarity}`}
    style={`--biome-color: ${currentBiome.color}`}
>
    <div class="card-border">
        <header class="card-header">
            <span class="name">{name}</span>
            <span class="cost">{autoCost}</span>
        </header>

        <div class="card-art">
            <div class="biome-tag">{autoBiome}</div>
            <div class="biome-label">{currentBiome.label}</div>
            <div class="rarity-label">{rarity}</div>
        </div>

        <div class="card-type-line">
            Niveau {age} — {frontmatter.identity?.job || "PROTO"}
            <div class="header-tags">
                {
                    medicationTaken && (
                        <span class="med-tag" title="Médication prise">
                            💊
                        </span>
                    )
                }
                <span class="streak-tag">streak {streakCount}</span>
            </div>
        </div>

        <div class="card-body">
            {
                circleSummaries.map((circle) => (
                    <div class="effect-line">
                        <span
                            class={`type-tag ${circle.type} ${circle.dominance}`}
                        >
                            {circle.type} <small>x{circle.count}</small>
                            {circle.dominance === "pos" && " +"}
                            {circle.dominance === "neg" && " -"}
                        </span>
                    </div>
                ))
            }
        </div>

        <div class="rules-box medical-dashboard">
            <div class="layer-auto">
                <header class="layer-title">Indicateurs Somatiques</header>
                <div class="stats-grid">
                    {
                        autoLayer.map((stat) => (
                            <div class={`stat-item ${stat.status}`}>
                                <span class="stat-label">{stat.label}</span>
                                <span class="stat-value">{stat.value}</span>
                            </div>
                        ))
                    }
                </div>
            </div>

            <hr class="layer-divider" />

            <div class="layer-manual">
                <header class="layer-title">Ressentis & Hygiène</header>
                <div class="stats-grid">
                    {
                        manualLayer.map((stat) => (
                            <div class="stat-item">
                                <span class="stat-label">{stat.label}</span>
                                <span class="stat-value">{stat.value}</span>
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>

        <footer class="card-footer">
            <div class="matchup">
                <span>VS {currentBiome.strong} (+)</span>
            </div>
            <div class="stats-box">
                {autoAtk} / {autoDef}
            </div>
        </footer>
    </div>
</article>

<style>
    /* Styles de base [cite: 60, 61, 62, 63, 64, 68, 69, 81, 84, 85] */
    .tcg-card {
        width: 320px;
        height: 480px;
        background: var(--biome-color);
        border-radius: 18px;
        padding: 12px;
        font-family: "Philosopher", serif;
        color: #1e293b;
        position: relative;
    }
    .card-border {
        height: 100%;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        padding: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
    .card-header {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
    }
    .card-art {
        flex: 1;
        margin: 5px 0;
        position: relative;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
    .biome-tag {
        background: #333;
        color: white;
        padding: 2px 8px;
        font-size: 0.6rem;
        border-radius: 5px;
        width: fit-content;
        margin: 5px;
    }
    .biome-label {
        font-size: 0.6rem;
        padding: 2px 8px;
    }
    .card-type-line {
        border-bottom: 1px solid #333;
        font-size: 0.75rem;
        padding: 2px 5px;
        margin-bottom: 5px;
        font-weight: bold;
        /* Ajout du flex pour l'alignement */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .card-body {
        flex: 0.8;
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }
    .type-tag {
        font-size: 0.7rem;
        font-weight: bold;
        padding: 2px 5px;
        border-radius: 3px;
        color: white;
        background: #333;
    }
    .type-tag.pos {
        border-left: 4px solid #4ade80;
    }
    .type-tag.neg {
        border-left: 4px solid #f87171;
    }
    .PRO {
        border-bottom: 3px solid #f59e0b;
    }
    .SAN {
        border-bottom: 3px solid #3b82f6;
    }
    .SOC {
        border-bottom: 3px solid #ec4899;
    }
    .FLX {
        border-bottom: 3px solid #10b981;
    }
    .HYG {
        border-bottom: 3px solid #9400ff;
    }
    .rules-box {
        margin-top: auto;
        padding: 6px;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 6px;
    }
    .medical-dashboard {
        color: #0f172a;
        padding: 8px;
    }

    .layer-title {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 800;
        margin-bottom: 5px;
        color: #475569;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .stat-item {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        padding: 2px 4px;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.05);
    }

    /* Alertes visuelles pour le médecin */
    .stat-item.critique {
        background: #fee2e27d;
        color: #991b1b;
        border-left: 3px solid #ef4444;
    }
    .stat-item.alerte {
        background: #fef3c77d;
        color: #92400e;
        border-left: 3px solid #f59e0b;
    }

    .layer-divider {
        border: 0;
        border-top: 1px dashed #cbd5e1;
        margin: 8px 0;
    }

    .stat-label {
        font-weight: 500;
    }
    .stat-value {
        font-family: monospace;
        font-weight: bold;
    }
    .mechanics-summary li {
        font-size: 1rem;
        list-style: none;
        line-height: 1.3;
    }
    .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 8px;
    }
    .stats-box {
        background: #333;
        color: white;
        padding: 3px 8px;
        border-radius: 5px;
        font-size: 1.1rem;
    }

    /* Effets Shiny & Rareté */
    .tcg-card.shiny {
        animation: cardShine 5s infinite;
    }
    @keyframes cardShine {
        0%,
        100% {
            filter: brightness(1);
        }
        50% {
            filter: brightness(1.15);
            box-shadow: 0 0 15px var(--biome-color);
        }
    }
    .rarity-label {
        position: absolute;
        bottom: 5px;
        right: 5px;
        font-size: 0.5rem;
        font-weight: bold;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 2px 5px;
        border-radius: 3px;
    }
    .MYTHIQUE .card-border {
        border: 2px solid #a855f7;
    }
    .LÉGENDAIRE .card-border {
        border: 2px solid #fbbf24;
    }
    .streak-tag {
        font-size: 0.8rem;
        font-weight: bold;
    }
    .header-tags {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .med-tag {
        font-size: 0.9rem;
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
        cursor: help;
    }
</style>