(function () {
    const API_URL = '/data/api/mods-mc.php';

    // Injecte le CSS dans <head>
    const style = document.createElement('style');
    style.textContent = `
        .mc-mods-section {
            margin-top: 0.5rem;
            border-top: 1px solid rgba(98, 114, 164, 0.3);
            padding-top: 0.5rem;
        }
        .mc-mods-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            padding: 0.25rem 0;
            user-select: none;
        }
        .mc-mods-toggle-label {
            font-size: 0.72rem;
            font-weight: 700;
            color: #6272a4;
            text-transform: uppercase;
            letter-spacing: 0.07em;
        }
        .mc-mods-toggle-meta {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.68rem;
            color: #6272a4;
        }
        .mc-mods-arrow {
            font-size: 0.6rem;
            color: #6272a4;
            transition: transform 0.2s;
            display: inline-block;
        }
        .mc-mods-arrow.open { transform: rotate(90deg); }
        .mc-mods-pills {
            display: none;
            flex-wrap: wrap;
            gap: 0.3rem;
            padding-top: 0.45rem;
        }
        .mc-mods-pills.open { display: flex; }
        .mc-mod-pill {
            background: rgba(98, 114, 164, 0.25);
            color: #f8f8f2;
            font-size: 0.65rem;
            padding: 2px 7px;
            border-radius: 20px;
            border: 1px solid rgba(98, 114, 164, 0.35);
            white-space: nowrap;
            cursor: default;
        }
        .mc-mod-pill:hover {
            background: rgba(189, 147, 249, 0.2);
            border-color: rgba(189, 147, 249, 0.5);
            color: #bd93f9;
        }
        .mc-mods-error {
            font-size: 0.7rem;
            color: #ff5555;
            padding-top: 0.3rem;
            font-style: italic;
        }
    `;
    document.head.appendChild(style);

    function buildModsBlock(srv, cardEl) {
        const section = document.createElement('div');
        section.className = 'mc-mods-section';

        if (srv.error) {
            const err = document.createElement('div');
            err.className = 'mc-mods-error';
            err.textContent = srv.error;
            section.appendChild(err);
            cardEl.appendChild(section);
            return;
        }

        const count = srv.mods.length;
        const toggle = document.createElement('div');
        toggle.className = 'mc-mods-toggle';
        toggle.innerHTML = `
            <span class="mc-mods-toggle-label">Mods</span>
            <span class="mc-mods-toggle-meta">
                <span>${count} mod${count !== 1 ? 's' : ''}</span>
                <span class="mc-mods-arrow">&#9656;</span>
            </span>
        `;

        const pills = document.createElement('div');
        pills.className = 'mc-mods-pills';
        srv.mods.forEach(mod => {
            const pill = document.createElement('span');
            pill.className = 'mc-mod-pill';
            pill.title = mod.file;
            pill.textContent = mod.name;
            pills.appendChild(pill);
        });

        toggle.addEventListener('click', () => {
            const arrow = toggle.querySelector('.mc-mods-arrow');
            pills.classList.toggle('open');
            arrow.classList.toggle('open');
        });

        section.appendChild(toggle);
        section.appendChild(pills);
        cardEl.appendChild(section);
    }

    fetch(API_URL)
        .then(r => r.json())
        .then(data => {
            data.forEach((srv, i) => {
                const card = document.getElementById('mc-card-' + i);
                if (card) buildModsBlock(srv, card);
            });
        })
        .catch(err => {
            console.warn('[mods-mc] Erreur fetch :', err);
        });
})();
