/**
 * Team Admin > Groups
 */
const { html } = window;
const { useState, useEffect, useCallback } = hooks;

export default function GroupsSection({ teamId }) {
    const [groups, setGroups] = useState([]);
    const [loading, setLoading] = useState(true);

    const load = useCallback(async () => {
        try {
            const data = await sw.api.teams.groups(teamId);
            setGroups(data || []);
        } catch (e) { sw.toast(e.message, 'error'); }
        finally { setLoading(false); }
    }, [teamId]);

    useEffect(() => { load(); }, [load]);

    if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;

    return html`
        <div>
            <div class="admin-list">
                ${groups.length === 0 && html`<div class="empty-hint">No groups</div>`}
                ${groups.map(g => html`
                    <div class="admin-surface-row" key=${g.id}>
                        <strong style="flex:1;">${g.name}</strong>
                        <span class="text-muted" style="font-size:12px;">${g.member_count || 0} members</span>
                        <span class="badge">${(g.permissions || []).length} permissions</span>
                    </div>
                `)}
            </div>
        </div>
    `;
}
