import { api } from '../../services/api.js';
import { showToast } from '../../ui/toast.js';
export async function renderReactionRolesModule(guildId) {
    const container = document.getElementById('module-reactionroles');
    if (!container)
        return;
    container.innerHTML = '<p class="muted">Lade Reaction Roles...</p>';
    try {
        const data = await api.reactionRoles(guildId);
        const entries = data?.entries || data?.reactionRoles || [];
        container.innerHTML = '<h3 class="label">Reaction Roles</h3>';
        if (!entries.length) {
            container.innerHTML += '<div class="empty-state">Keine Reaction Roles.</div>';
            return;
        }
        const list = document.createElement('div');
        list.className = 'ticket-list';
        entries.slice(0, 3).forEach((e) => {
            const item = document.createElement('div');
            item.className = 'ticket-item';
            item.innerHTML = `
        <div style="font-weight:750;">${e.title || e.messageId || 'Eintrag'}</div>
        <div class="muted">${e.channelId || ''}</div>
      `;
            list.appendChild(item);
        });
        container.appendChild(list);
    }
    catch (err) {
        console.error(err);
        container.innerHTML = '<div class="empty-state">Reaction Roles konnten nicht geladen werden.</div>';
        showToast('Fehler beim Laden der Reaction Roles', true);
    }
}