/**
 * Gemeinsame Kartenanzeige für Chastity Game.
 * Benötigt: /js/card-defs.js (CARD_LABELS muss bereits global verfügbar sein)
 * Exportiert: cardTypeGridHtml(cardCounts)
 */
(function () {
    const style = document.createElement('style');
    style.textContent = `
        .card-type-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            margin-top: 0.4rem;
        }
        .card-type-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            width: calc((100% - 6 * 0.6rem) / 14);
            min-width: 28px;
        }
        .card-type-item img {
            width: 100%;
            height: auto;
            border-radius: 4px;
            display: block;
        }
        .card-type-badge {
            font-size: 1rem;
            font-weight: 700;
            color: var(--color-text);
            line-height: 1.2;
        }
    `;
    document.head.appendChild(style);
})();

/**
 * Gibt HTML für ein Karten-Typ-Raster zurück (ein Bild pro Typ, Anzahl-Badge).
 * @param {Object} cardCounts – { RED: 3, GREEN: 1, … }
 * @returns {string} HTML-String
 */
function cardTypeGridHtml(cardCounts) {
    if (!cardCounts || Object.keys(cardCounts).length === 0) {
        return '<span style="color:var(--color-muted);font-size:0.85rem;">Keine Karten mehr im Stapel.</span>';
    }
    const items = Object.entries(cardCounts)
        .filter(([, n]) => n > 0)
        .map(([type, n]) => {
            const info = CARD_LABELS[type] || { img: '/img/card.png', name: type };
            return `<div class="card-type-item">
                <img src="${info.img}" alt="${info.name}">
                <span class="card-type-badge">${n}</span>
            </div>`;
        }).join('');
    return items
        ? `<div class="card-type-grid">${items}</div>`
        : '<span style="color:var(--color-muted);font-size:0.85rem;">Keine Karten mehr im Stapel.</span>';
}